@morphemecms/cms 0.0.0-stage → 0.1.0

package/theme/ui/TextField.tsx

@@ -0,0 +1,278 @@
+// A text field (m3.material.io/components/text-fields, .text-field in ../styles/ui.css): a field to write in, with
+// its name (`label`), drawn in the field and moving above what is written, or only read by screen readers
+// (`hideLabel`, a field whose placeholder says what it is), or without one (no `label`: a form that names its fields
+// itself, the editor's, with a <label> for its `id`), and a line under it (`supporting`), or what is wrong with
+// it (`error`: the field marked, and the line saying so; true: only marked, what is wrong said elsewhere). Its kind (`kind`: outlined, the default, or filled) is
+// Material's name; how each looks is the theme's. In the field before what is written an icon (`leadingIcon`, the
+// theme's icon by its name) and a text (`prefix`, kr.), after it a text (`suffix`) and an icon (`trailingIcon`), a
+// button of the field's own (`clearLabel`: one that empties it, shown when something is written; `passwordLabel`: one
+// that shows the password, with type="password"), one of the caller's (`trailing`, an IconButton) and the error's icon
+// (`errorIcon`, in place of the others while the field is wrong). `counter`: how much is written under it at the end
+// (12/50 with `maxLength`); `limit`: how much it should have at most, without stopping more (12/60, the counter marked
+// past it, .text-field-counter-over). `rows`: several lines (a <textarea>) of that many rows; `multiline`: several lines that grow
+// with the text. `disabled`: it cannot be used; `readOnly`: it can be read and copied, not changed. Other attributes
+// (`type`, `name`, `required`, `placeholder`, `id`, `autoComplete` …) go on the <input>, and `className` on the field
+// around it (its width, its place). The counter, the growing and the buttons work on the site with
+// textField.script.ts and in the editor here (both with textFieldUpdate.ts). An Astro component gives an element the
+// same classes with textFieldClass, textFieldContainerClass and textFieldInputClass, and so does something that looks
+// like a field but is a button (the editor's choice from a list).
+import { useId, type FormEvent, type MouseEvent, type ReactNode } from 'react';
+import { Glyph, Svg, type IconRef } from '@morphemecms/cms/src/icon';
+import IconButton, { iconButtonClass } from '@theme/ui/IconButton';
+import { counterText, pressTextField, updateTextField } from './textFieldUpdate';
+
+/** The kinds of a text field, as Material 3 names them. */
+export type TextFieldKind = 'outlined' | 'filled';
+
+/** A text field's classes: its kind's, the error's when it has one, and a multi-line field's. */
+export const textFieldClass = (kind: TextFieldKind = 'outlined', error = false, multiline = false) =>
+  ['text-field', `text-field-${kind}`, error && 'text-field-error', multiline && 'text-field-multiline'].filter(Boolean).join(' ');
+
+/** The class of the box in the field, and of what is written in it (or tapped: a choice from a list). */
+export const textFieldContainerClass = 'text-field-container';
+export const textFieldInputClass = 'text-field-input';
+
+export default function TextField({
+  label,
+  hideLabel,
+  supporting,
+  error,
+  kind,
+  leadingIcon,
+  trailingIcon,
+  trailing,
+  errorIcon,
+  clearLabel,
+  passwordLabel,
+  prefix,
+  suffix,
+  counter: counted,
+  maxLength,
+  limit,
+  rows,
+  multiline,
+  id,
+  placeholder,
+  className,
+  ...rest
+}: {
+  label?: string;
+  hideLabel?: boolean;
+  supporting?: ReactNode;
+  error?: string | boolean;
+  kind?: TextFieldKind;
+  leadingIcon?: string;
+  trailingIcon?: string;
+  trailing?: ReactNode;
+  errorIcon?: boolean;
+  clearLabel?: string;
+  passwordLabel?: string;
+  prefix?: string;
+  suffix?: string;
+  counter?: boolean;
+  maxLength?: number;
+  limit?: number;
+  rows?: number;
+  multiline?: boolean;
+  disabled?: boolean;
+  readOnly?: boolean;
+  id?: string;
+  placeholder?: string;
+  className?: string;
+} & Record<string, unknown>) {
+  const counter = counted || limit !== undefined;
+  const own = useId();
+  const field = id ?? own;
+  const line = (typeof error === 'string' && error) || supporting;
+  const drawn = label !== undefined && !hideLabel;
+  const lines = multiline || rows !== undefined;
+  // Only a field that does something as it is written in, or has buttons, is the script's.
+  const working = counter || multiline || clearLabel || passwordLabel;
+  const described = [line && `${field}-supporting`, counter && `${field}-counter`].filter(Boolean).join(' ');
+  const written = String(rest.defaultValue ?? rest.value ?? '');
+  const off = Boolean(rest.disabled);
+  const input = {
+    id: field,
+    className: textFieldInputClass,
+    // A label drawn in the field moves above it once something is written (:placeholder-shown).
+    placeholder: placeholder ?? (!drawn && !clearLabel ? undefined : ' '),
+    maxLength,
+    'aria-label': hideLabel ? label : undefined,
+    'aria-invalid': error ? true : undefined,
+    'aria-describedby': described || undefined,
+    ...rest,
+  };
+  return (
+    <div
+      className={[
+        textFieldClass(kind, !!error, lines),
+        leadingIcon && 'text-field-with-leading-icon',
+        !drawn && 'text-field-without-label',
+        className,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+      data-text-field={working ? '' : undefined}
+      onInput={working ? (e: FormEvent<HTMLDivElement>) => updateTextField(e.currentTarget) : undefined}
+      onClick={
+        clearLabel || passwordLabel
+          ? (e: MouseEvent<HTMLDivElement>) => {
+              const button = (e.target as HTMLElement).closest<HTMLElement>('[data-text-field-clear], [data-text-field-visibility]');
+              if (button) pressTextField(e.currentTarget, button);
+            }
+          : undefined
+      }
+    >
+      <div className={textFieldContainerClass}>
+        {leadingIcon && <Svg name={leadingIcon} size={20} className="text-field-leading-icon" />}
+        {prefix && (
+          <span className="text-field-prefix" aria-hidden="true">
+            {prefix}
+          </span>
+        )}
+        {lines ? (
+          <textarea {...input} rows={rows ?? 1} data-text-field-grow={multiline && rows === undefined ? '' : undefined} />
+        ) : (
+          <input {...input} />
+        )}
+        {drawn && (
+          <label htmlFor={field} className="text-field-label">
+            {label}
+          </label>
+        )}
+        {suffix && (
+          <span className="text-field-suffix" aria-hidden="true">
+            {suffix}
+          </span>
+        )}
+        {trailingIcon && <Svg name={trailingIcon} size={20} className="text-field-trailing-icon" />}
+        {clearLabel && (
+          <IconButton
+            icon="x"
+            label={clearLabel}
+            className="text-field-trailing-action text-field-clear"
+            disabled={off}
+            data-text-field-clear=""
+          />
+        )}
+        {passwordLabel && (
+          <button
+            type="button"
+            className={`${iconButtonClass()} text-field-trailing-action text-field-visibility`}
+            aria-label={passwordLabel}
+            aria-pressed="false"
+            disabled={off}
+            data-text-field-visibility=""
+          >
+            <Svg name="eye" size={22} className="text-field-visibility-show" />
+            <Svg name="eye-slash" size={22} className="text-field-visibility-hide" />
+          </button>
+        )}
+        {trailing && <span className="text-field-trailing-action">{trailing}</span>}
+        {errorIcon && <Svg name="warning-circle" size={20} className="text-field-trailing-icon text-field-error-icon" />}
+      </div>
+      {(line || counter) && (
+        <div className="text-field-supporting-row">
+          {line && (
+            <p id={`${field}-supporting`} className="text-field-supporting">
+              {line}
+            </p>
+          )}
+          {counter && (
+            <span
+              id={`${field}-counter`}
+              className={
+                limit !== undefined && written.length > limit ? 'text-field-counter text-field-counter-over' : 'text-field-counter'
+              }
+              data-text-field-counter=""
+              data-limit={limit}
+            >
+              {counterText(written.length, maxLength ?? limit)}
+            </span>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/** A field that is tapped to choose (the editor's choice from a list, which opens its own sheet, or with `href` a page
+ * with the choices): the text field (its kind and its look) with a button, or a link, in its container showing what is
+ * chosen (`children`), its name on its edge (`label`; without it, it is named by `aria-label`), an icon at its end
+ * (`trailingIcon`: caret-down, the default, or the arrow to a page), and the line under it (`supporting`) or what is
+ * wrong (`error`). Other attributes (onClick, aria-…) go on the button, and `className` on the field around it. */
+export function TextFieldButton({
+  label,
+  supporting,
+  error,
+  kind,
+  href,
+  trailingIcon = 'caret-down',
+  id,
+  className,
+  children,
+  ...rest
+}: {
+  label?: string;
+  supporting?: ReactNode;
+  error?: string | boolean;
+  kind?: TextFieldKind;
+  href?: string;
+  trailingIcon?: IconRef;
+  id?: string;
+  className?: string;
+  children: ReactNode;
+} & Record<string, unknown>) {
+  const own = useId();
+  const field = id ?? own;
+  const line = (typeof error === 'string' && error) || supporting;
+  const described = line ? `${field}-supporting` : undefined;
+  return (
+    <div
+      className={[textFieldClass(kind, !!error), label === undefined && 'text-field-without-label', className].filter(Boolean).join(' ')}
+    >
+      <div className={textFieldContainerClass}>
+        {href === undefined ? (
+          <button
+            type="button"
+            id={field}
+            className={textFieldInputClass}
+            aria-invalid={error ? true : undefined}
+            aria-describedby={described}
+            {...rest}
+          >
+            {children}
+          </button>
+        ) : (
+          <a
+            id={field}
+            href={href}
+            className={textFieldInputClass}
+            aria-labelledby={label ? `${field}-label ${field}` : undefined}
+            {...rest}
+          >
+            {children}
+          </a>
+        )}
+        {label !== undefined &&
+          (href === undefined ? (
+            <label htmlFor={field} className="text-field-label">
+              {label}
+            </label>
+          ) : (
+            <span id={`${field}-label`} className="text-field-label">
+              {label}
+            </span>
+          ))}
+        <Glyph icon={trailingIcon} size={20} className="text-field-trailing-icon" />
+      </div>
+      {line && (
+        <div className="text-field-supporting-row">
+          <p id={described} className="text-field-supporting">
+            {line}
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}

package/theme/ui/TimePicker.tsx

@@ -0,0 +1,128 @@
+// A time picker (m3.material.io/components/time-pickers, .time-picker in ../styles/ui.css): a text field to type a time
+// of day in (as the site's language writes it, 14.30 in Danish; `timeFormat`: 24h, the default, or 12h, 2.30 PM, with
+// AM and PM in the picker), with a clock button that opens the picker (TimePickerContainer.tsx: the dial, and the
+// input mode) in a dialog in the middle of the screen, and what a form sends, the time as hh:mm (14:30), in a hidden
+// input named `name`. The picker's `orientation`: the dial under the boxes (vertical) or beside them (horizontal);
+// without one, beside them on a screen wider than it is high and low (a phone turned on its side), as Material's.
+// `value`: the time it starts with; `label`, `supporting`, `error`: the field's name, the line under it (else the
+// time's format) and what is wrong with it (the field marked); `required`, `id` and the rest go on the field's input,
+// and `className` on the field. On the site
+// timePicker.script.ts opens it, draws the picker in its <dialog>, writes the time picked into the inputs and closes
+// it; in the editor's previews it is only drawn, and with `onChange` (the editor's own fields) it works the same way,
+// here, and says the time picked (or '' for none). Its fixed texts (timePickerTexts) are the site's own, in
+// @site/texts, unless `texts` gives them (the editor's, in its language).
+import { useEffect, useRef, type ReactNode } from 'react';
+import { siteText, locale } from '@morphemecms/cms/src/i18n';
+import { timePickerField } from '@theme/ui/timePicker.script';
+import IconButton from '@theme/ui/IconButton';
+import TextField from '@theme/ui/TextField';
+import { dayPeriods, timeOf, timeTyped } from '@theme/ui/dates';
+import type { TimePickerFormat, TimePickerOrientation, TimePickerTexts } from '@theme/ui/TimePickerContainer';
+
+/** A time picker's fixed texts, in the language its times are written in (AM and PM the language's own). */
+export const timePickerTexts = (): TimePickerTexts => ({
+  locale,
+  select: siteText('Vælg tidspunkt'),
+  enter: siteText('Skriv tidspunkt'),
+  hour: siteText('Time'),
+  minute: siteText('Minut'),
+  format: siteText('tt.mm'),
+  wrong: siteText('Skriv et tidspunkt mellem 00.00 og 23.59.'),
+  format12: siteText('t.mm AM/PM'),
+  wrong12: siteText('Skriv et tidspunkt mellem 1.00 og 12.59.'),
+  period: siteText('Før eller efter middag'),
+  am: dayPeriods(locale)[0],
+  pm: dayPeriods(locale)[1],
+  toInput: siteText('Skift til at skrive'),
+  toDial: siteText('Skift til urskiven'),
+  cancel: siteText('Annuller'),
+  ok: siteText('OK'),
+});
+
+export default function TimePicker({
+  label,
+  name,
+  value = '',
+  supporting,
+  error,
+  timeFormat = '24h',
+  orientation,
+  texts: given,
+  onChange,
+  className,
+  ...rest
+}: {
+  label: string;
+  name: string;
+  value?: string;
+  supporting?: ReactNode;
+  error?: string | boolean;
+  timeFormat?: TimePickerFormat;
+  orientation?: TimePickerOrientation;
+  texts?: TimePickerTexts;
+  onChange?: (value: string) => void;
+  className?: string;
+} & Record<string, unknown>) {
+  const texts = given ?? timePickerTexts();
+  const known = !!timeOf(value);
+  const twelve = timeFormat === '12h';
+  const format = twelve ? texts.format12 : texts.format;
+  const typed = known ? timeTyped(value, texts.locale, twelve) : '';
+  const box = useWorking(onChange, known ? value : '', typed);
+  return (
+    <div
+      ref={box}
+      className={['time-picker-field', className].filter(Boolean).join(' ')}
+      data-time-picker={JSON.stringify({ texts, timeFormat, orientation })}
+    >
+      <TextField
+        label={label}
+        supporting={supporting ?? format}
+        error={error}
+        placeholder={format}
+        defaultValue={typed}
+        inputMode="numeric"
+        autoComplete="off"
+        data-time-picker-text=""
+        {...rest}
+      />
+      <IconButton
+        icon="clock"
+        label={texts.select}
+        className="time-picker-field-button"
+        aria-haspopup="dialog"
+        aria-expanded="false"
+        data-time-picker-open=""
+      />
+      <input type="hidden" name={name} defaultValue={known ? value : ''} data-time-picker-value="" />
+      <dialog className="dialog-modal time-picker-dialog" aria-label={texts.select} data-time-picker-dialog=""></dialog>
+    </div>
+  );
+}
+
+// A picker the editor changes (`onChange`): made to work here as on the site, telling the editor what is picked, and
+// showing what the editor's value is when it changes from outside (a version restored).
+function useWorking(onChange: ((value: string) => void) | undefined, value: string, typed: string) {
+  const box = useRef<HTMLDivElement>(null);
+  const told = useRef(onChange);
+  told.current = onChange;
+  const working = onChange !== undefined;
+  useEffect(() => {
+    const field = box.current;
+    if (!working || !field) return;
+    timePickerField(field);
+    const input = field.querySelector<HTMLInputElement>('[data-time-picker-value]');
+    const changed = () => told.current?.(input?.value ?? '');
+    input?.addEventListener('change', changed);
+    return () => input?.removeEventListener('change', changed);
+  }, [working]);
+  useEffect(() => {
+    const field = box.current;
+    const input = field?.querySelector<HTMLInputElement>('[data-time-picker-value]');
+    if (!working || !field || !input || input.value === value) return;
+    input.value = value;
+    const text = field.querySelector<HTMLInputElement>('[data-time-picker-text]');
+    if (text) text.value = typed;
+  }, [working, value]);
+  return box;
+}

package/theme/ui/TimePickerContainer.tsx

@@ -0,0 +1,234 @@
+// What a time picker shows when it is open (m3.material.io/components/time-pickers, .time-picker in ../styles/ui.css),
+// drawn for the time and what is shown (`view`, `selecting`, `hour`, `minute`): one drawing for the site, where
+// timePicker.script.ts draws it in the time picker's <dialog> (TimePicker.tsx) each time something changes and does
+// what it is told by the data-time-picker-… attributes, and for the editor, which only draws it. Built on the theme's
+// Dialog (the surface), IconButton, Button and TextField; how it looks is the theme's (--time-picker-*).
+//   `view`: the dial (the hours and the minutes, each a box, the one `selecting` on the dial under them: the hours
+//   00–11 on the outer ring and 12–23 on the inner one, the minutes in fives, the hand pointing at the time; a slider
+//   for screen readers and the arrow keys) or the input mode (the hours and the minutes, each the theme's TextField).
+//   `typed`, `error`: what is written in the input mode's fields, and what is wrong with it (on which one).
+//   `timeFormat`: 24h, the default, as Danish writes the time, or 12h (the hours 1–12 on one ring, with the period
+//   selector, AM and PM, beside the boxes). `orientation`: vertical, the default, the dial under the boxes, or
+//   horizontal, the dial beside them (Material's on a phone turned on its side).
+// No texts of its own (`texts`, TimePicker.tsx's timePickerTexts) and no React state, so the site's script can draw it
+// without the editor's dictionaries.
+import type { CSSProperties } from 'react';
+import Dialog from '@theme/ui/Dialog';
+import IconButton from '@theme/ui/IconButton';
+import Button from '@theme/ui/Button';
+import TextField from '@theme/ui/TextField';
+import { timeSeparator, twoDigits } from '@theme/ui/dates';
+
+export type TimePickerView = 'dial' | 'input';
+/** A time picker's time formats and orientations, as Material 3 names them. */
+export type TimePickerFormat = '24h' | '12h';
+export type TimePickerOrientation = 'vertical' | 'horizontal';
+
+/** A time picker's fixed texts, in the language its times are written in (`locale`). */
+export type TimePickerTexts = {
+  locale: string;
+  select: string;
+  enter: string;
+  hour: string;
+  minute: string;
+  format: string;
+  wrong: string;
+  /** The 12-hour clock's: its format, what is wrong, the name of the period selector and its AM and PM. */
+  format12: string;
+  wrong12: string;
+  period: string;
+  am: string;
+  pm: string;
+  toInput: string;
+  toDial: string;
+  cancel: string;
+  ok: string;
+};
+
+/** What a time picker shows: what changes while it is open. */
+export type TimePickerState = {
+  view: TimePickerView;
+  selecting: 'hour' | 'minute';
+  hour: number;
+  minute: number;
+  typed?: string[];
+  error?: { field: number; message: string };
+};
+
+export type TimePickerContainerProps = TimePickerState & {
+  texts: TimePickerTexts;
+  timeFormat?: TimePickerFormat;
+  orientation?: TimePickerOrientation;
+  headlineId?: string;
+  className?: string;
+};
+
+/** The numbers on the dial: the hours, 00–11 outside and 12–23 inside (on a 12-hour clock 12, 1–11 on one ring), or
+ * the minutes in fives. */
+const hours = Array.from({ length: 24 }, (_, h) => h);
+const twelveHours = Array.from({ length: 12 }, (_, h) => h);
+const minutes = Array.from({ length: 12 }, (_, i) => i * 5);
+
+/** Where a number stands on the dial, and the hand when it points at it: its angle from the top, and its ring (a
+ * 12-hour clock has one). */
+export const handOf = (selecting: 'hour' | 'minute', value: number, twelve = false) =>
+  selecting === 'hour' ? { angle: (value % 12) * 30, inner: !twelve && value >= 12 } : { angle: value * 6, inner: false };
+
+const at = (angle: number) => ({ '--time-picker-angle': `${angle}deg` }) as CSSProperties;
+
+export default function TimePickerContainer({
+  view,
+  selecting,
+  hour,
+  minute,
+  typed = [],
+  error,
+  texts,
+  timeFormat = '24h',
+  orientation = 'vertical',
+  headlineId,
+  className,
+}: TimePickerContainerProps) {
+  const separator = timeSeparator(texts.locale);
+  const twelve = timeFormat === '12h';
+  const pm = hour >= 12;
+  // The hour as the clock shows it (2 for 14 on a 12-hour clock).
+  const shown = twelve ? hour % 12 || 12 : hour;
+  const value = selecting === 'hour' ? hour : minute;
+  const hand = handOf(selecting, value, twelve);
+  const fields = [
+    { key: 'hour' as const, label: texts.hour, value: twoDigits(shown) },
+    { key: 'minute' as const, label: texts.minute, value: twoDigits(minute) },
+  ];
+  // AM and PM, beside the boxes (under them, horizontal).
+  const period = twelve && (
+    <span className="time-picker-period" role="group" aria-label={texts.period}>
+      {(['am', 'pm'] as const).map((p) => (
+        <button key={p} type="button" className="time-picker-period-button" aria-pressed={(p === 'pm') === pm} data-time-picker-action={p}>
+          {texts[p]}
+        </button>
+      ))}
+    </span>
+  );
+  return (
+    <Dialog
+      className={['time-picker', orientation === 'horizontal' && 'time-picker-horizontal', twelve && 'time-picker-12h', className]
+        .filter(Boolean)
+        .join(' ')}
+      data-view={view}
+    >
+      <h2 id={headlineId} className="time-picker-headline">
+        {view === 'input' ? texts.enter : texts.select}
+      </h2>
+
+      {view === 'dial' ? (
+        <>
+          <div className="time-picker-selector">
+            {fields.map((f, i) => (
+              <span key={f.key} className="time-picker-selector-part">
+                {i === 1 && (
+                  <span className="time-picker-separator" aria-hidden="true">
+                    {separator}
+                  </span>
+                )}
+                <button
+                  type="button"
+                  className="time-picker-box"
+                  aria-label={`${f.label}: ${f.value}`}
+                  aria-pressed={selecting === f.key}
+                  data-time-picker-action={f.key}
+                >
+                  {f.value}
+                </button>
+              </span>
+            ))}
+            {period}
+          </div>
+          <div
+            className="time-picker-dial"
+            role="slider"
+            tabIndex={0}
+            aria-label={selecting === 'hour' ? texts.hour : texts.minute}
+            aria-valuemin={selecting === 'hour' && twelve ? 1 : 0}
+            aria-valuemax={selecting === 'hour' ? (twelve ? 12 : 23) : 59}
+            aria-valuenow={selecting === 'hour' ? shown : minute}
+            aria-valuetext={selecting === 'hour' && twelve ? `${shown} ${pm ? texts.pm : texts.am}` : twoDigits(value)}
+            data-time-picker-dial={selecting}
+          >
+            <span
+              className="time-picker-dial-hand"
+              data-inner={hand.inner || undefined}
+              data-between={(selecting === 'minute' && value % 5 !== 0) || undefined}
+              style={at(hand.angle)}
+              aria-hidden="true"
+            >
+              <span className="time-picker-dial-knob" />
+            </span>
+            {(selecting === 'minute' ? minutes : twelve ? twelveHours : hours).map((n) => {
+              const spot = handOf(selecting, n, twelve);
+              const picked = selecting === 'hour' && twelve ? n === hour % 12 : n === value;
+              return (
+                <span
+                  key={n}
+                  className="time-picker-dial-number"
+                  data-inner={spot.inner || undefined}
+                  data-selected={picked || undefined}
+                  style={at(spot.angle)}
+                  aria-hidden="true"
+                >
+                  {selecting === 'minute' ? twoDigits(n) : twelve ? n || 12 : n === 0 ? twoDigits(n) : n}
+                </span>
+              );
+            })}
+          </div>
+        </>
+      ) : (
+        <div className="time-picker-input">
+          {fields.map((f, i) => (
+            <span key={f.key} className="time-picker-selector-part">
+              {i === 1 && (
+                <span className="time-picker-separator" aria-hidden="true">
+                  {separator}
+                </span>
+              )}
+              <TextField
+                label={f.label}
+                hideLabel
+                supporting={f.label}
+                error={error?.field === i ? f.label : undefined}
+                defaultValue={typed[i] ?? f.value}
+                inputMode="numeric"
+                maxLength={2}
+                autoComplete="off"
+                className="time-picker-text-field"
+                data-time-picker-input={i}
+              />
+            </span>
+          ))}
+          {period}
+        </div>
+      )}
+      {error && (
+        <p className="time-picker-error" role="alert">
+          {error.message}
+        </p>
+      )}
+
+      <div className="time-picker-actions">
+        <IconButton
+          icon={view === 'dial' ? 'keyboard' : 'clock'}
+          label={view === 'dial' ? texts.toInput : texts.toDial}
+          data-time-picker-action="mode"
+        />
+        <span className="time-picker-actions-end">
+          <Button kind="text" size="small" data-time-picker-action="cancel">
+            {texts.cancel}
+          </Button>
+          <Button kind="text" size="small" data-time-picker-action="ok">
+            {texts.ok}
+          </Button>
+        </span>
+      </div>
+    </Dialog>
+  );
+}