@bytebrand/fe-ui-core-autobahn 1.0.1 → 1.0.2

package/ui/FormDropdown.tsx

@@ -1,327 +1,327 @@
-// Autobahn (auto.de redesign) — mobx-react-form-bound dropdown adapter.
-//
-// A drop-in md3 replacement for the legacy fe-ui-core FormDropDown
-// (components/ui/FormDropDown/FormDropDown.tsx). It is the #1 form dependency
-// (11+ pages, 60+ vehicle-form selects: BasicData/EngineData/Chassis/…,
-// Settings gender/title, …). The visual control is the md3 `Dropdown`
-// (single-select) reused as-is; multi-select is implemented here on the same
-// `mselect-*` classes as a checklist with selected chips on the trigger.
-//
-// THE DATA CONTRACT MIRRORS THE LEGACY EXACTLY so validation/output/submit are
-// unchanged — only the markup is re-skinned:
-//
-//   • single (default): field.value is the option OBJECT `{value,label}` (legacy
-//     `getValue`). We read `field.value.value` and commit
-//     `field.onChange({value,label}, field.name)`; clear -> `onChange('', name)`.
-//   • isObj: field.value IS the source option object (e.g. a GENDERS item
-//     `{value:number,label}`). On change we resolve the matching object out of
-//     `field.extra` and `onChange(obj, field.name)` (legacy parity — form.output
-//     keeps the object).
-//   • isMulti: field.value is a primitive array; the menu is a checklist; the
-//     trigger shows the selected labels as chips; `onChange(values, field.name)`.
-//
-// Option shapes in `field.extra` are normalized: primitive lists (['2','3',…]),
-// `{value,label}` and `{key,value}`. Label resolution mirrors the legacy
-// getOptions(): with a namespace, 'cbd' -> t('cbd:'+opt), else a labelled option
-// -> t(namespace+':'+label), else t(opt). When `isApiTranslated`, `field.extra`
-// already carries translated labels, so they are used verbatim.
-//
-// observer-wrapped (re-renders on value/error). Renders correctly only inside a
-// `.md3` subtree.
-
-import * as React from 'react';
-import { observer } from 'mobx-react';
-
-import Icon from './Icon';
-import Dropdown, { DropdownOption } from './Dropdown';
-
-export interface FormDropdownProps {
-  /** mobx-react-form field (form.$('basicDataForm.mainData_make') etc.). Untyped — the lib ships no TS types. */
-  field: any;
-  /** i18n translate — resolves option labels and the field's placeholder/label key. */
-  t: (key: string, options?: object) => string;
-  /** translation namespace for option labels (e.g. 'common', 'cbd', 'mainData'). */
-  namespace?: string;
-  /** field.value is the source option OBJECT, not a scalar (GENDERS/TITLES item). */
-  isObj?: boolean;
-  /** option labels in field.extra are already translated (came from a request). */
-  isApiTranslated?: boolean;
-  /** multiple selection — value is a primitive array, rendered as chips + checklist. */
-  isMulti?: boolean;
-  /** hide the clear ("×") affordance on a single select. */
-  disableClearable?: boolean;
-  /** suppress the built-in label (when an outer wrapper — e.g. FormFieldDropDown — owns the label). */
-  hideLabel?: boolean;
-  /** accepted for legacy-surface parity (the md3 control never free-types). */
-  freeSolo?: boolean;
-  disabled?: boolean;
-  /** layout passthrough (e.g. grid-area), mirrors legacy `style`. */
-  style?: React.CSSProperties;
-  /** extra class on the wrapper (legacy `className`). */
-  className?: string;
-}
-
-/** Raw option as it can appear in field.extra. */
-type RawOption =
-  | string
-  | number
-  | { value: any; label?: any; key?: any; isDisabled?: boolean; isSeries?: boolean };
-
-/** Normalize one raw option to a stable { value, label, disabled } shape (label not yet translated). */
-function normalizeOption(opt: RawOption): { value: string; rawLabel: any; disabled: boolean } {
-  if (opt !== null && typeof opt === 'object') {
-    // {value,label} | {key,value} | {value,...}
-    const hasKey = 'key' in opt && !('label' in opt);
-    const value = hasKey ? (opt as any).key : (opt as any).value;
-    const rawLabel = hasKey
-      ? (opt as any).value
-      : 'label' in opt && (opt as any).label != null
-        ? (opt as any).label
-        : (opt as any).value;
-    const disabled = !!((opt as any).isDisabled || (opt as any).isSeries);
-    return { value: String(value), rawLabel, disabled };
-  }
-  // primitive
-  return { value: String(opt), rawLabel: opt, disabled: false };
-}
-
-const FormDropdown: React.FunctionComponent<FormDropdownProps> = observer(
-  ({ field, t, namespace, isObj, isApiTranslated, isMulti, disableClearable, freeSolo, disabled, style, className, hideLabel }) => {
-    // ---- label resolution (legacy getOptions parity) -------------------------------------------
-    const labelFor = React.useCallback(
-      (rawLabel: any): string => {
-        const s = rawLabel == null ? '' : String(rawLabel);
-        if (isApiTranslated) return s; // already translated in field.extra
-        if (namespace) {
-          if (namespace === 'cbd') return t(`cbd:${s}`);
-          // a "labelled" option translates under the namespace; a bare primitive translates as-is.
-          return t(s) === s ? t(`${namespace}:${s}`) : t(s);
-        }
-        return t(s);
-      },
-      [t, namespace, isApiTranslated],
-    );
-
-    // ---- options (memoized off field.extra) -----------------------------------------------------
-    const raw: RawOption[] = Array.isArray(field.extra) ? field.extra : [];
-    const options: DropdownOption[] = React.useMemo(
-      () =>
-        raw.map((o) => {
-          const n = normalizeOption(o);
-          return { value: n.value, label: labelFor(n.rawLabel), disabled: n.disabled };
-        }),
-      // field.extra identity changes when the form `.set('extra', …)` runs (make->models).
-      [raw, labelFor],
-    );
-
-    const hasError = !!field.hasError && !!field.error;
-    const label = field.placeholder ? t(field.placeholder) : field.label ? t(field.label) : '';
-    const isDisabled = !!field.disabled || !!disabled;
-
-    // =========================================================================================
-    // MULTI — primitive array value, checklist menu, chips on the trigger.
-    // =========================================================================================
-    if (isMulti) {
-      return (
-        <MultiDropdown
-          field={field}
-          options={options}
-          label={hideLabel ? '' : label}
-          hasError={hasError}
-          disabled={isDisabled}
-          ariaLabel={label}
-          style={style}
-          className={className}
-        />
-      );
-    }
-
-    // =========================================================================================
-    // SINGLE — value is {value,label} (default) or the source object (isObj).
-    // =========================================================================================
-    // current scalar value to highlight in the menu (legacy reads value.value ?? value).
-    const rawValue = field.value;
-    const currentValue =
-      rawValue && typeof rawValue === 'object'
-        ? String(rawValue.value != null ? rawValue.value : '')
-        : rawValue != null
-          ? String(rawValue)
-          : '';
-
-    const commit = (next: string) => {
-      if (next === '') {
-        // clear (only reachable when !disableClearable).
-        field.onChange(isObj ? null : '', field.name);
-        return;
-      }
-      if (isObj) {
-        // resolve the SOURCE option object out of field.extra (matched by value/key) so
-        // form.output keeps receiving the object (GENDERS/TITLES parity).
-        const match = raw.find((o) => {
-          const n = normalizeOption(o);
-          return n.value === next;
-        });
-        field.onChange(match != null ? match : null, field.name);
-      } else {
-        // legacy getValue(): commit the {value,label} pair.
-        const chosen = options.find((o) => o.value === next);
-        field.onChange({ value: next, label: chosen ? chosen.label : next }, field.name);
-      }
-    };
-
-    // a clear option is prepended (mirrors MaterialAutocomplete's clear) unless disabled.
-    const menuOptions: DropdownOption[] =
-      disableClearable || !currentValue ? options : [{ value: '', label: '—' }, ...options];
-
-    return (
-      <div className={'mfd' + (className ? ' ' + className : '')} style={style}>
-        {label && !hideLabel ? <label className="md-label-sm mfield-label mfd-label">{label}</label> : null}
-        <Dropdown
-          value={currentValue}
-          options={menuOptions}
-          onChange={commit}
-          placeholder={label || '—'}
-          ariaLabel={label}
-          disabled={isDisabled}
-          className={hasError ? 'mfd-invalid' : undefined}
-        />
-        {hasError ? <span className="mfield-error-text mfd-error">{field.error}</span> : null}
-      </div>
-    );
-  },
-);
-
-// ---------------------------------------------------------------------------------------------
-// Multi-select — built on the same mselect-* classes as the base Dropdown, with a checklist
-// menu and chips on the trigger. Value is a primitive string[] (legacy MaterialSelect parity:
-// onChange(values, field.name); field.output keeps Array.isArray(values) ? values : null).
-// ---------------------------------------------------------------------------------------------
-interface MultiProps {
-  field: any;
-  options: DropdownOption[];
-  label: string;
-  hasError: boolean;
-  disabled: boolean;
-  ariaLabel: string;
-  style?: React.CSSProperties;
-  className?: string;
-}
-
-const MultiDropdown: React.FunctionComponent<MultiProps> = observer(
-  ({ field, options, label, hasError, disabled, ariaLabel, style, className }) => {
-    const [open, setOpen] = React.useState(false);
-    const rootRef = React.useRef<HTMLDivElement | null>(null);
-    const btnRef = React.useRef<HTMLButtonElement | null>(null);
-
-    const selected: string[] = Array.isArray(field.value) ? field.value.map(String) : [];
-
-    // click-away (guarded for SSR), matching the base Dropdown.
-    React.useEffect(() => {
-      if (!open || typeof document === 'undefined') return undefined;
-      const onDocMouseDown = (e: MouseEvent) => {
-        if (rootRef.current && !rootRef.current.contains(e.target as Node)) setOpen(false);
-      };
-      document.addEventListener('mousedown', onDocMouseDown);
-      return () => document.removeEventListener('mousedown', onDocMouseDown);
-    }, [open]);
-
-    const toggle = (value: string) => {
-      if (disabled) return;
-      const next = selected.indexOf(value) > -1 ? selected.filter((v) => v !== value) : [...selected, value];
-      field.onChange(next, field.name);
-    };
-
-    const removeChip = (e: React.MouseEvent, value: string) => {
-      e.stopPropagation();
-      if (disabled) return;
-      field.onChange(selected.filter((v) => v !== value), field.name);
-    };
-
-    const onTriggerKeyDown = (e: React.KeyboardEvent) => {
-      if (disabled) return;
-      if (e.key === 'Escape') {
-        setOpen(false);
-        if (btnRef.current) btnRef.current.focus();
-      } else if (e.key === 'Tab') {
-        setOpen(false);
-      } else if (!open && (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ')) {
-        e.preventDefault();
-        setOpen(true);
-      }
-    };
-
-    const labelOf = (value: string) => {
-      const o = options.find((opt) => opt.value === value);
-      return o ? o.label : value;
-    };
-
-    return (
-      <div className={'mfd' + (className ? ' ' + className : '')} style={style}>
-        {label ? <label className="md-label-sm mfield-label mfd-label">{label}</label> : null}
-        <div className="mselect mselect--block mfd-multi" ref={rootRef}>
-          <button
-            ref={btnRef}
-            type="button"
-            className={'mselect-btn mfd-multi-btn' + (hasError ? ' mfd-invalid' : '')}
-            aria-haspopup="listbox"
-            aria-expanded={open}
-            aria-label={ariaLabel}
-            disabled={disabled}
-            onClick={() => setOpen((o) => !o)}
-            onKeyDown={onTriggerKeyDown}
-          >
-            {selected.length ? (
-              <span className="mfd-chips">
-                {selected.map((v) => (
-                  <span className="mfd-chip" key={v}>
-                    <span className="mfd-chip-label">{labelOf(v)}</span>
-                    <span
-                      className="mfd-chip-x"
-                      role="button"
-                      tabIndex={-1}
-                      aria-label="remove"
-                      onMouseDown={(e) => e.preventDefault()}
-                      onClick={(e) => removeChip(e, v)}
-                    >
-                      <Icon name="x" size={13} />
-                    </span>
-                  </span>
-                ))}
-              </span>
-            ) : (
-              <span className="mselect-label mselect-label--ph">{label || '—'}</span>
-            )}
-            <Icon name="chevron-down" cls="mselect-chev" />
-          </button>
-          {open && (
-            <ul className="mselect-menu mfd-multi-menu" role="listbox" aria-multiselectable="true" tabIndex={-1}>
-              {options.map((opt, i) => {
-                const checked = selected.indexOf(opt.value) > -1;
-                return (
-                  <li key={`${opt.value}_${i}`} role="presentation">
-                    <button
-                      type="button"
-                      role="option"
-                      aria-selected={checked}
-                      disabled={opt.disabled}
-                      className={'mselect-opt mfd-multi-opt' + (checked ? ' is-checked' : '')}
-                      onClick={() => toggle(opt.value)}
-                    >
-                      <span className={'mfd-check' + (checked ? ' mfd-check--on' : '')}>
-                        {checked ? <Icon name="check" size={14} /> : null}
-                      </span>
-                      <span className="mselect-opt-label">{opt.label}</span>
-                    </button>
-                  </li>
-                );
-              })}
-            </ul>
-          )}
-        </div>
-        {hasError ? <span className="mfield-error-text mfd-error">{field.error}</span> : null}
-      </div>
-    );
-  },
-);
-
-export default FormDropdown;
+// Autobahn (auto.de redesign) — mobx-react-form-bound dropdown adapter.
+//
+// A drop-in md3 replacement for the legacy fe-ui-core FormDropDown
+// (components/ui/FormDropDown/FormDropDown.tsx). It is the #1 form dependency
+// (11+ pages, 60+ vehicle-form selects: BasicData/EngineData/Chassis/…,
+// Settings gender/title, …). The visual control is the md3 `Dropdown`
+// (single-select) reused as-is; multi-select is implemented here on the same
+// `mselect-*` classes as a checklist with selected chips on the trigger.
+//
+// THE DATA CONTRACT MIRRORS THE LEGACY EXACTLY so validation/output/submit are
+// unchanged — only the markup is re-skinned:
+//
+//   • single (default): field.value is the option OBJECT `{value,label}` (legacy
+//     `getValue`). We read `field.value.value` and commit
+//     `field.onChange({value,label}, field.name)`; clear -> `onChange('', name)`.
+//   • isObj: field.value IS the source option object (e.g. a GENDERS item
+//     `{value:number,label}`). On change we resolve the matching object out of
+//     `field.extra` and `onChange(obj, field.name)` (legacy parity — form.output
+//     keeps the object).
+//   • isMulti: field.value is a primitive array; the menu is a checklist; the
+//     trigger shows the selected labels as chips; `onChange(values, field.name)`.
+//
+// Option shapes in `field.extra` are normalized: primitive lists (['2','3',…]),
+// `{value,label}` and `{key,value}`. Label resolution mirrors the legacy
+// getOptions(): with a namespace, 'cbd' -> t('cbd:'+opt), else a labelled option
+// -> t(namespace+':'+label), else t(opt). When `isApiTranslated`, `field.extra`
+// already carries translated labels, so they are used verbatim.
+//
+// observer-wrapped (re-renders on value/error). Renders correctly only inside a
+// `.md3` subtree.
+
+import * as React from 'react';
+import { observer } from 'mobx-react';
+
+import Icon from './Icon';
+import Dropdown, { DropdownOption } from './Dropdown';
+
+export interface FormDropdownProps {
+  /** mobx-react-form field (form.$('basicDataForm.mainData_make') etc.). Untyped — the lib ships no TS types. */
+  field: any;
+  /** i18n translate — resolves option labels and the field's placeholder/label key. */
+  t: (key: string, options?: object) => string;
+  /** translation namespace for option labels (e.g. 'common', 'cbd', 'mainData'). */
+  namespace?: string;
+  /** field.value is the source option OBJECT, not a scalar (GENDERS/TITLES item). */
+  isObj?: boolean;
+  /** option labels in field.extra are already translated (came from a request). */
+  isApiTranslated?: boolean;
+  /** multiple selection — value is a primitive array, rendered as chips + checklist. */
+  isMulti?: boolean;
+  /** hide the clear ("×") affordance on a single select. */
+  disableClearable?: boolean;
+  /** suppress the built-in label (when an outer wrapper — e.g. FormFieldDropDown — owns the label). */
+  hideLabel?: boolean;
+  /** accepted for legacy-surface parity (the md3 control never free-types). */
+  freeSolo?: boolean;
+  disabled?: boolean;
+  /** layout passthrough (e.g. grid-area), mirrors legacy `style`. */
+  style?: React.CSSProperties;
+  /** extra class on the wrapper (legacy `className`). */
+  className?: string;
+}
+
+/** Raw option as it can appear in field.extra. */
+type RawOption =
+  | string
+  | number
+  | { value: any; label?: any; key?: any; isDisabled?: boolean; isSeries?: boolean };
+
+/** Normalize one raw option to a stable { value, label, disabled } shape (label not yet translated). */
+function normalizeOption(opt: RawOption): { value: string; rawLabel: any; disabled: boolean } {
+  if (opt !== null && typeof opt === 'object') {
+    // {value,label} | {key,value} | {value,...}
+    const hasKey = 'key' in opt && !('label' in opt);
+    const value = hasKey ? (opt as any).key : (opt as any).value;
+    const rawLabel = hasKey
+      ? (opt as any).value
+      : 'label' in opt && (opt as any).label != null
+        ? (opt as any).label
+        : (opt as any).value;
+    const disabled = !!((opt as any).isDisabled || (opt as any).isSeries);
+    return { value: String(value), rawLabel, disabled };
+  }
+  // primitive
+  return { value: String(opt), rawLabel: opt, disabled: false };
+}
+
+const FormDropdown: React.FunctionComponent<FormDropdownProps> = observer(
+  ({ field, t, namespace, isObj, isApiTranslated, isMulti, disableClearable, freeSolo, disabled, style, className, hideLabel }) => {
+    // ---- label resolution (legacy getOptions parity) -------------------------------------------
+    const labelFor = React.useCallback(
+      (rawLabel: any): string => {
+        const s = rawLabel == null ? '' : String(rawLabel);
+        if (isApiTranslated) return s; // already translated in field.extra
+        if (namespace) {
+          if (namespace === 'cbd') return t(`cbd:${s}`);
+          // a "labelled" option translates under the namespace; a bare primitive translates as-is.
+          return t(s) === s ? t(`${namespace}:${s}`) : t(s);
+        }
+        return t(s);
+      },
+      [t, namespace, isApiTranslated],
+    );
+
+    // ---- options (memoized off field.extra) -----------------------------------------------------
+    const raw: RawOption[] = Array.isArray(field.extra) ? field.extra : [];
+    const options: DropdownOption[] = React.useMemo(
+      () =>
+        raw.map((o) => {
+          const n = normalizeOption(o);
+          return { value: n.value, label: labelFor(n.rawLabel), disabled: n.disabled };
+        }),
+      // field.extra identity changes when the form `.set('extra', …)` runs (make->models).
+      [raw, labelFor],
+    );
+
+    const hasError = !!field.hasError && !!field.error;
+    const label = field.placeholder ? t(field.placeholder) : field.label ? t(field.label) : '';
+    const isDisabled = !!field.disabled || !!disabled;
+
+    // =========================================================================================
+    // MULTI — primitive array value, checklist menu, chips on the trigger.
+    // =========================================================================================
+    if (isMulti) {
+      return (
+        <MultiDropdown
+          field={field}
+          options={options}
+          label={hideLabel ? '' : label}
+          hasError={hasError}
+          disabled={isDisabled}
+          ariaLabel={label}
+          style={style}
+          className={className}
+        />
+      );
+    }
+
+    // =========================================================================================
+    // SINGLE — value is {value,label} (default) or the source object (isObj).
+    // =========================================================================================
+    // current scalar value to highlight in the menu (legacy reads value.value ?? value).
+    const rawValue = field.value;
+    const currentValue =
+      rawValue && typeof rawValue === 'object'
+        ? String(rawValue.value != null ? rawValue.value : '')
+        : rawValue != null
+          ? String(rawValue)
+          : '';
+
+    const commit = (next: string) => {
+      if (next === '') {
+        // clear (only reachable when !disableClearable).
+        field.onChange(isObj ? null : '', field.name);
+        return;
+      }
+      if (isObj) {
+        // resolve the SOURCE option object out of field.extra (matched by value/key) so
+        // form.output keeps receiving the object (GENDERS/TITLES parity).
+        const match = raw.find((o) => {
+          const n = normalizeOption(o);
+          return n.value === next;
+        });
+        field.onChange(match != null ? match : null, field.name);
+      } else {
+        // legacy getValue(): commit the {value,label} pair.
+        const chosen = options.find((o) => o.value === next);
+        field.onChange({ value: next, label: chosen ? chosen.label : next }, field.name);
+      }
+    };
+
+    // a clear option is prepended (mirrors MaterialAutocomplete's clear) unless disabled.
+    const menuOptions: DropdownOption[] =
+      disableClearable || !currentValue ? options : [{ value: '', label: '—' }, ...options];
+
+    return (
+      <div className={'mfd' + (className ? ' ' + className : '')} style={style}>
+        {label && !hideLabel ? <label className="md-label-sm mfield-label mfd-label">{label}</label> : null}
+        <Dropdown
+          value={currentValue}
+          options={menuOptions}
+          onChange={commit}
+          placeholder={label || '—'}
+          ariaLabel={label}
+          disabled={isDisabled}
+          className={hasError ? 'mfd-invalid' : undefined}
+        />
+        {hasError ? <span className="mfield-error-text mfd-error">{field.error}</span> : null}
+      </div>
+    );
+  },
+);
+
+// ---------------------------------------------------------------------------------------------
+// Multi-select — built on the same mselect-* classes as the base Dropdown, with a checklist
+// menu and chips on the trigger. Value is a primitive string[] (legacy MaterialSelect parity:
+// onChange(values, field.name); field.output keeps Array.isArray(values) ? values : null).
+// ---------------------------------------------------------------------------------------------
+interface MultiProps {
+  field: any;
+  options: DropdownOption[];
+  label: string;
+  hasError: boolean;
+  disabled: boolean;
+  ariaLabel: string;
+  style?: React.CSSProperties;
+  className?: string;
+}
+
+const MultiDropdown: React.FunctionComponent<MultiProps> = observer(
+  ({ field, options, label, hasError, disabled, ariaLabel, style, className }) => {
+    const [open, setOpen] = React.useState(false);
+    const rootRef = React.useRef<HTMLDivElement | null>(null);
+    const btnRef = React.useRef<HTMLButtonElement | null>(null);
+
+    const selected: string[] = Array.isArray(field.value) ? field.value.map(String) : [];
+
+    // click-away (guarded for SSR), matching the base Dropdown.
+    React.useEffect(() => {
+      if (!open || typeof document === 'undefined') return undefined;
+      const onDocMouseDown = (e: MouseEvent) => {
+        if (rootRef.current && !rootRef.current.contains(e.target as Node)) setOpen(false);
+      };
+      document.addEventListener('mousedown', onDocMouseDown);
+      return () => document.removeEventListener('mousedown', onDocMouseDown);
+    }, [open]);
+
+    const toggle = (value: string) => {
+      if (disabled) return;
+      const next = selected.indexOf(value) > -1 ? selected.filter((v) => v !== value) : [...selected, value];
+      field.onChange(next, field.name);
+    };
+
+    const removeChip = (e: React.MouseEvent, value: string) => {
+      e.stopPropagation();
+      if (disabled) return;
+      field.onChange(selected.filter((v) => v !== value), field.name);
+    };
+
+    const onTriggerKeyDown = (e: React.KeyboardEvent) => {
+      if (disabled) return;
+      if (e.key === 'Escape') {
+        setOpen(false);
+        if (btnRef.current) btnRef.current.focus();
+      } else if (e.key === 'Tab') {
+        setOpen(false);
+      } else if (!open && (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ')) {
+        e.preventDefault();
+        setOpen(true);
+      }
+    };
+
+    const labelOf = (value: string) => {
+      const o = options.find((opt) => opt.value === value);
+      return o ? o.label : value;
+    };
+
+    return (
+      <div className={'mfd' + (className ? ' ' + className : '')} style={style}>
+        {label ? <label className="md-label-sm mfield-label mfd-label">{label}</label> : null}
+        <div className="mselect mselect--block mfd-multi" ref={rootRef}>
+          <button
+            ref={btnRef}
+            type="button"
+            className={'mselect-btn mfd-multi-btn' + (hasError ? ' mfd-invalid' : '')}
+            aria-haspopup="listbox"
+            aria-expanded={open}
+            aria-label={ariaLabel}
+            disabled={disabled}
+            onClick={() => setOpen((o) => !o)}
+            onKeyDown={onTriggerKeyDown}
+          >
+            {selected.length ? (
+              <span className="mfd-chips">
+                {selected.map((v) => (
+                  <span className="mfd-chip" key={v}>
+                    <span className="mfd-chip-label">{labelOf(v)}</span>
+                    <span
+                      className="mfd-chip-x"
+                      role="button"
+                      tabIndex={-1}
+                      aria-label="remove"
+                      onMouseDown={(e) => e.preventDefault()}
+                      onClick={(e) => removeChip(e, v)}
+                    >
+                      <Icon name="x" size={13} />
+                    </span>
+                  </span>
+                ))}
+              </span>
+            ) : (
+              <span className="mselect-label mselect-label--ph">{label || '—'}</span>
+            )}
+            <Icon name="chevron-down" cls="mselect-chev" />
+          </button>
+          {open && (
+            <ul className="mselect-menu mfd-multi-menu" role="listbox" aria-multiselectable="true" tabIndex={-1}>
+              {options.map((opt, i) => {
+                const checked = selected.indexOf(opt.value) > -1;
+                return (
+                  <li key={`${opt.value}_${i}`} role="presentation">
+                    <button
+                      type="button"
+                      role="option"
+                      aria-selected={checked}
+                      disabled={opt.disabled}
+                      className={'mselect-opt mfd-multi-opt' + (checked ? ' is-checked' : '')}
+                      onClick={() => toggle(opt.value)}
+                    >
+                      <span className={'mfd-check' + (checked ? ' mfd-check--on' : '')}>
+                        {checked ? <Icon name="check" size={14} /> : null}
+                      </span>
+                      <span className="mselect-opt-label">{opt.label}</span>
+                    </button>
+                  </li>
+                );
+              })}
+            </ul>
+          )}
+        </div>
+        {hasError ? <span className="mfield-error-text mfd-error">{field.error}</span> : null}
+      </div>
+    );
+  },
+);
+
+export default FormDropdown;