Copy Jump to Date PoC changes on top of RovingTabIndex fixes

Copy changes from #7317
on top of RovingTabIndex fixes in #7336

res/css/views/context_menus/_IconizedContextMenu.scss

@@ -50,21 +50,21 @@ limitations under the License.
         }
 
         // round the top corners of the top button for the hover effect to be bounded
-        &:first-child .mx_AccessibleButton:first-child {
+        &:first-child .mx_AccessibleButton:not(.mx_AccessibleButton_hasKind):first-child {
             border-radius: 8px 8px 0 0; // radius matches .mx_ContextualMenu
         }
 
         // round the bottom corners of the bottom button for the hover effect to be bounded
-        &:last-child .mx_AccessibleButton:last-child {
+        &:last-child .mx_AccessibleButton:not(.mx_AccessibleButton_hasKind):last-child {
             border-radius: 0 0 8px 8px; // radius matches .mx_ContextualMenu
         }
 
         // round all corners of the only button for the hover effect to be bounded
-        &:first-child:last-child .mx_AccessibleButton:first-child:last-child {
+        &:first-child:last-child .mx_AccessibleButton:not(.mx_AccessibleButton_hasKind):first-child:last-child {
             border-radius: 8px; // radius matches .mx_ContextualMenu
         }
 
-        .mx_AccessibleButton {
+        .mx_AccessibleButton:not(.mx_AccessibleButton_hasKind) {
             // pad the inside of the button so that the hover background is padded too
             padding-top: 12px;
             padding-bottom: 12px;
@@ -130,7 +130,7 @@ limitations under the License.
     }
 
     .mx_IconizedContextMenu_optionList_red {
-        .mx_AccessibleButton {
+        .mx_AccessibleButton:not(.mx_AccessibleButton_hasKind) {
             color: $alert !important;
         }
 
@@ -148,7 +148,7 @@ limitations under the License.
     }
 
     .mx_IconizedContextMenu_active {
-        &.mx_AccessibleButton, .mx_AccessibleButton {
+        &.mx_AccessibleButton:not(.mx_AccessibleButton_hasKind), .mx_AccessibleButton:not(.mx_AccessibleButton_hasKind) {
             color: $accent !important;
         }
 

res/css/views/elements/_Field.scss

@@ -127,6 +127,7 @@ limitations under the License.
         transform 0.25s ease-out 0s,
         background-color 0.25s ease-out 0s;
     font-size: $font-10px;
+    line-height: normal;
     transform: translateY(-13px);
     padding: 0 2px;
     background-color: $background;

res/css/views/messages/_DateSeparator.scss

@@ -33,3 +33,37 @@ limitations under the License.
     margin: 0 25px;
     flex: 0 0 auto;
 }
+
+.mx_DateSeparator_jumpToDateMenu {
+    display: flex;
+}
+
+.mx_DateSeparator_chevron {
+    align-self: center;
+    width: 16px;
+    height: 16px;
+    mask-position: center;
+    mask-size: contain;
+    mask-repeat: no-repeat;
+    mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
+    background-color: $tertiary-content;
+}
+
+.mx_DateSeparator_jumpToDateMenuOption > .mx_IconizedContextMenu_label {
+    flex: initial;
+    width: auto;
+}
+
+.mx_DateSeparator_datePickerForm {
+    display: flex;
+}
+
+.mx_DateSeparator_datePicker {
+    flex: initial;
+    margin: 0;
+    margin-left: 8px;
+}
+
+.mx_DateSeparator_datePickerSubmitButton {
+    margin-left: 8px;
+}

src/components/structures/MessagePanel.tsx

@@ -715,8 +715,8 @@ export default class MessagePanel extends React.Component<IProps, IState> {
 
         // do we need a date separator since the last event?
         const wantsDateSeparator = this.wantsDateSeparator(prevEvent, eventDate);
-        if (wantsDateSeparator && !isGrouped) {
-            const dateSeparator = <li key={ts1}><DateSeparator key={ts1} ts={ts1} /></li>;
+        if (wantsDateSeparator && !isGrouped && this.props.room) {
+            const dateSeparator = <li key={ts1}><DateSeparator key={ts1} roomId={this.props.room.roomId} ts={ts1} /></li>;
             ret.push(dateSeparator);
         }
 
@@ -1109,7 +1109,7 @@ class CreationGrouper extends BaseGrouper {
         if (panel.wantsDateSeparator(this.prevEvent, createEvent.getDate())) {
             const ts = createEvent.getTs();
             ret.push(
-                <li key={ts+'~'}><DateSeparator key={ts+'~'} ts={ts} /></li>,
+                <li key={ts+'~'}><DateSeparator key={ts+'~'} roomId={createEvent.getRoomId()} ts={ts} /></li>,
             );
         }
 
@@ -1222,7 +1222,7 @@ class RedactionGrouper extends BaseGrouper {
         if (panel.wantsDateSeparator(this.prevEvent, this.events[0].getDate())) {
             const ts = this.events[0].getTs();
             ret.push(
-                <li key={ts+'~'}><DateSeparator key={ts+'~'} ts={ts} /></li>,
+                <li key={ts+'~'}><DateSeparator key={ts+'~'} roomId={this.events[0].getRoomId()} ts={ts} /></li>,
             );
         }
 
@@ -1318,7 +1318,7 @@ class MemberGrouper extends BaseGrouper {
         if (panel.wantsDateSeparator(this.prevEvent, this.events[0].getDate())) {
             const ts = this.events[0].getTs();
             ret.push(
-                <li key={ts+'~'}><DateSeparator key={ts+'~'} ts={ts} /></li>,
+                <li key={ts+'~'}><DateSeparator key={ts+'~'} roomId={this.events[0].getRoomId()} ts={ts} /></li>,
             );
         }
 

src/components/views/elements/Field.tsx

@@ -20,6 +20,7 @@ import { debounce } from "lodash";
 
 import * as sdk from '../../../index';
 import { IFieldState, IValidationResult } from "./Validation";
+import { ComponentClass } from "../../../@types/common";
 
 // Invoke validation from user input (when typing, etc.) at most once every N ms.
 const VALIDATION_THROTTLE_MS = 200;
@@ -97,7 +98,16 @@ interface ITextareaProps extends IProps, TextareaHTMLAttributes<HTMLTextAreaElem
     value: string;
 }
 
-type PropShapes = IInputProps | ISelectProps | ITextareaProps;
+export interface ICustomInputProps extends IProps, InputHTMLAttributes<HTMLInputElement> {
+    // The element to create.
+    element: ComponentClass;
+    // The input's value. This is a controlled component, so the value is required.
+    value: string;
+    // Optionally can be used for the CustomInput
+    onInput?: React.ChangeEventHandler<HTMLInputElement>;
+}
+
+type PropShapes = IInputProps | ISelectProps | ITextareaProps | ICustomInputProps;
 
 interface IState {
     valid: boolean;
@@ -257,7 +267,7 @@ export default class Field extends React.PureComponent<PropShapes, IState> {
         }
 
         const hasValidationFlag = forceValidity !== null && forceValidity !== undefined;
-        const fieldClasses = classNames("mx_Field", `mx_Field_${this.props.element}`, className, {
+        const fieldClasses = classNames("mx_Field", `mx_Field_${typeof this.props.element === "string" ? this.props.element : "input"}`, className, {
             // If we have a prefix element, leave the label always at the top left and
             // don't animate it, as it looks a bit clunky and would add complexity to do
             // properly.