@inglorious/ui 7.2.0 → 7.2.2

package/src/controls/combobox/template.js

@@ -21,66 +21,9 @@ import {
 
 const NO_FOCUSED_INDEX = -1
 
-/**
- * Registered outside-pointer listeners, keyed by the dropdown element they
- * belong to. Used only to deduplicate: the ref callback is handed a fresh arrow
- * on every re-render, so without this each pass would stack another listener on
- * the document.
- * @type {WeakMap<Element, { props: ComboboxProps, listener: (event: Event) => void }>}
- */
-const outsideListeners = new WeakMap()
-
-/**
- * Listen on the document for presses outside the dropdown, closing it when one
- * happens.
- *
- * This listens for `pointerdown` rather than `click` on purpose. Mobile browsers
- * synthesise `click` asynchronously after `touchend`, and drop it entirely when
- * the touch drifts into a scroll gesture or the target is replaced meanwhile.
- * A suppressed click would leave the listener armed, and it would then close the
- * *next* dropdown on the tap that opened it, leaving the combobox looking stuck.
- * `pointerdown` is dispatched synchronously for mouse, touch and pen.
- *
- * No id is needed: the element keys the listener, and it retires itself once its
- * dropdown has left the DOM.
- * @param {ComboboxProps} props
- * @param {Element|null|undefined} el dropdown element, or undefined on unmount
- */
-function trackOutsideClick(props, el) {
-  if (!el) return
-
-  const existing = outsideListeners.get(el)
-  if (existing) {
-    // A re-render of the same dropdown: keep the one listener, but point it at
-    // the current props so onClose is not captured from the first render.
-    existing.props = props
-    return
-  }
-
-  const entry = { props }
-  entry.listener = (event) => {
-    // The dropdown left the DOM: this press is the last one to hear from it.
-    // Retiring here is what keeps a torn-down dropdown from closing whatever
-    // opens next.
-    if (!el.isConnected) {
-      document.removeEventListener("pointerdown", entry.listener)
-      return
-    }
-
-    // The root, not the dropdown: the control is a sibling of the dropdown, and a
-    // press on it has to count as inside. Resolved per event rather than at mount
-    // because the dropdown is not connected yet when the ref first runs.
-    const root = el.closest(".iw-combobox") ?? el
-    if (!event.composedPath().includes(root)) entry.props.onClose?.()
-  }
-
-  outsideListeners.set(el, entry)
-  document.addEventListener("pointerdown", entry.listener)
-}
-
 export const Combobox = {
   /**
-   * Main entrypoint for the combobox control. It renders the wrapper, label, control, and dropdown when open.
+   * Main entrypoint for the combobox control. It renders the frame, label, control, and dropdown when open.
    * Comboboxes support search, single or multi-select values, and clearable selection.
    * @param {ComboboxProps} props
    * @returns {TemplateResult}
@@ -90,72 +33,144 @@ export const Combobox = {
   },
 
   /**
-   * Main entrypoint for the combobox control. It renders the wrapper, label, control, and dropdown when open.
+   * Main entrypoint for the combobox control. It renders the frame, label, control, and dropdown when open.
    * Comboboxes support search, single or multi-select values, and clearable selection.
    * @param {ComboboxProps} props
    * @returns {TemplateResult}
    */
   renderCombobox(props) {
-    return html`<div
-      class=${classMap({
-        "iw-combobox": true,
-        "iw-combobox-full-width": !!props.isFullWidth,
-        [`iw-combobox-${props.size}`]: props.size !== "md",
-      })}
-    >
-      ${
-        props.label
-          ? html`<label class="iw-combobox-label">${props.label}</label>`
-          : null
-      }
-      ${this.renderControl?.(props)}
-      ${when(props.isOpen, () => this.renderDropdown?.(props))}
+    const {
+      id,
+      type, // eslint-disable-line no-unused-vars
+      label,
+      hint,
+      error,
+      isRequired = false,
+      isFullWidth = false,
+      isOpen = false,
+    } = props
+    // The control is a div, not a labellable element, so a `for` binding is not
+    // available. It is referenced by id from the control's aria-labelledby
+    // instead, which is what a screen reader actually reads here.
+    // Only minted when there is something to point at. A reference to an id
+    // that is not in the DOM is worse than no reference at all.
+    const labelId = label && id ? `${id}-label` : ""
+    const messageId = (error || hint) && id ? `${id}-message` : ""
+
+    const comboboxClasses = {
+      "iw-combobox": true,
+      "iw-combobox-full-width": !!isFullWidth,
+    }
+
+    return html`<div class=${classMap(comboboxClasses)}>
+      ${when(
+        label,
+        () =>
+          html`<label id=${labelId || ""} class="iw-combobox-label">
+            ${label}
+            ${when(
+              isRequired,
+              () => html`<span class="iw-combobox-required">*</span>`,
+            )}
+          </label>`,
+      )}
+      ${this.renderControl?.({ ...props, labelId, messageId })}
+      ${when(isOpen, () => this.renderDropdown?.(props))}
+      ${when(
+        error,
+        () =>
+          html`<span id=${messageId ?? ""} class="iw-combobox-error-message"
+            >${error}</span
+          >`,
+      )}
+      ${when(
+        !error && hint,
+        () =>
+          html`<span id=${messageId || ""} class="iw-combobox-hint"
+            >${hint}</span
+          >`,
+      )}
     </div>`
   },
 
   /**
    * Renders the clickable control element that shows the current selection and toggles the dropdown.
    * Handles placeholder, clear button, and the open/disabled state.
+   *
+   * The control is the only way into a closed combobox, so it has to be
+   * focusable: it was a plain div with a click handler, which meant tabbing
+   * skipped the field entirely and none of the keyboard handling was reachable.
+   * It keeps focus while the dropdown is open unless a search input takes it.
    * @param {ComboboxProps} props
    * @returns {TemplateResult}
    */
   renderControl(props) {
+    const {
+      id,
+      labelId,
+      messageId,
+      selectedValue,
+      error,
+      size = "md",
+      isDisabled = false,
+      isRequired = false,
+      isOpen = false,
+      isMulti = false,
+      isClearable = false,
+      onToggle,
+      onClear,
+    } = props
+
+    const controlId = id ? `${id}-control` : ""
+
+    const frameClasses = {
+      "iw-combobox-frame": true,
+      [`iw-combobox-${size}`]: true,
+      "iw-combobox-frame-open": isOpen,
+      "iw-combobox-frame-disabled": isDisabled,
+      "iw-combobox-frame-error": !!error,
+      "iw-combobox-frame-selection":
+        isMulti && Array.isArray(selectedValue) && selectedValue.length,
+    }
+
     return html`<div
-      class="iw-combobox-control ${classMap({
-        "iw-combobox-control-open": props.isOpen,
-        "iw-combobox-control-disabled": props.isDisabled,
-        "iw-combobox-control-selection":
-          props.isMulti &&
-          Array.isArray(props.selectedValue) &&
-          props.selectedValue.length,
-      })}"
-      @click=${() => !props.isDisabled && props.onToggle?.()}
+      id=${controlId}
+      class="${classMap(frameClasses)}"
+      role="combobox"
+      aria-haspopup="listbox"
+      aria-expanded=${isOpen ? "true" : "false"}
+      aria-controls=${controlId ? `${controlId}-listbox` : ""}
+      aria-labelledby=${labelId || ""}
+      aria-describedby=${messageId || ""}
+      aria-required=${isRequired ? "true" : "false"}
+      aria-invalid=${error ? "true" : "false"}
+      tabindex=${isDisabled ? -1 : 0}
+      @keydown=${(event) => handleControlKeyDown(props, event)}
+      @click=${() => !isDisabled && onToggle?.()}
     >
       ${when(
-        props.isMulti,
+        isMulti,
         () => this.renderMultiValue?.(props),
         () => this.renderSingleValue?.(props),
       )}
       ${when(
-        props.isClearable &&
-          ((props.isMulti &&
-            Array.isArray(props.selectedValue) &&
-            props.selectedValue.length) ||
-            (!props.isMulti && props.selectedValue !== null)),
+        isClearable &&
+          ((isMulti && Array.isArray(selectedValue) && selectedValue.length) ||
+            (!isMulti && selectedValue !== null)),
         () =>
           html`<button
             class="iw-combobox-clear"
             type="button"
             @click=${(event) => {
               event.stopPropagation()
-              props.onClear?.()
+              onClear?.()
             }}
           >
             ×
           </button>`,
       )}
 
-      <div class="iw-combobox-arrow"><span>▼</span></div>
+      <span class="iw-combobox-arrow" aria-hidden="true">▼</span>
     </div>`
   },
 
@@ -166,21 +181,21 @@ export const Combobox = {
    * @returns {TemplateResult}
    */
   renderSingleValue(props) {
-    if (props.selectedValue === null) {
-      return html`<span class="iw-combobox-placeholder"
-        >${props.placeholder}</span
+    const { options, selectedValue, placeholder } = props
+
+    if (selectedValue === null) {
+      return html`<span class="iw-combobox-control iw-combobox-placeholder"
+        >${placeholder}</span
       >`
     }
 
-    const selectedOption = props.options.find(
-      (option) => getOptionValue(option) === props.selectedValue,
+    const selectedOption = options.find(
+      (option) => getOptionValue(option) === selectedValue,
     )
 
-    return html`<span class="iw-combobox-value"
+    return html`<span class="iw-combobox-control iw-combobox-value"
       >${
-        selectedOption
-          ? getOptionLabel(selectedOption)
-          : String(props.selectedValue)
+        selectedOption ? getOptionLabel(selectedOption) : String(selectedValue)
       }</span
     >`
   },
@@ -192,15 +207,17 @@ export const Combobox = {
    * @returns {TemplateResult}
    */
   renderMultiValue(props) {
-    if (!Array.isArray(props.selectedValue) || !props.selectedValue.length) {
-      return html`<span class="iw-combobox-placeholder"
-        >${props.placeholder}</span
+    const { selectedValue, placeholder } = props
+
+    if (!Array.isArray(selectedValue) || !selectedValue.length) {
+      return html`<span class="iw-combobox-control iw-combobox-placeholder"
+        >${placeholder}</span
       >`
     }
 
-    return html`<div class="iw-combobox-multi-value">
+    return html`<div class="iw-combobox-control iw-combobox-multi-value">
       ${repeat(
-        props.selectedValue,
+        selectedValue,
         (value) => value,
         (value) => this.renderMultiValueTag?.(props, value),
       )}
@@ -215,9 +232,11 @@ export const Combobox = {
    * @returns {TemplateResult}
    */
   renderMultiValueTag(props, value) {
-    const option = props.options.find((opt) => getOptionValue(opt) === value)
-    const tagId = `${props.id}-tag-${String(value)}`
-    const chipSize = props.size === "lg" ? "md" : "sm"
+    const { id, options, size, onOptionSelect, onChange } = props
+
+    const option = options.find((opt) => getOptionValue(opt) === value)
+    const tagId = `${id}-tag-${String(value)}`
+    const chipSize = size === "lg" ? "md" : "sm"
 
     return html`<span
       class="iw-combobox-multi-value-tag"
@@ -230,8 +249,8 @@ export const Combobox = {
         size: chipSize,
         shape: "rounded",
         onClick: () => {
-          props.onOptionSelect?.(option)
-          props.onChange?.(option)
+          onOptionSelect?.(option)
+          onChange?.(option)
         },
       })}
     </span>`
@@ -244,18 +263,22 @@ export const Combobox = {
    * @returns {TemplateResult}
    */
   renderDropdown(props) {
-    const filteredOptions = filterOptions(props.options, props.searchTerm)
+    const { id, options, searchTerm, isSearchable, isLoading } = props
+
+    const filteredOptions = filterOptions(options, searchTerm)
 
     return html`<div
+      id=${id ? `${id}-control-listbox` : ""}
       class="iw-combobox-dropdown"
+      role="listbox"
       ${ref((el) => trackOutsideClick(props, el))}
     >
-      ${when(props.isSearchable, () => this.renderSearchInput?.(props))}
-      ${when(props.isLoading, () => this.renderLoading?.(props))}
-      ${when(!props.isLoading && !filteredOptions.length, () =>
+      ${when(isSearchable, () => this.renderSearchInput?.(props))}
+      ${when(isLoading, () => this.renderLoading?.(props))}
+      ${when(!isLoading && !filteredOptions.length, () =>
         this.renderNoOptions?.(props),
       )}
-      ${when(!props.isLoading && filteredOptions.length, () =>
+      ${when(!isLoading && filteredOptions.length, () =>
         this.renderOptions?.(props),
       )}
     </div>`
@@ -268,15 +291,17 @@ export const Combobox = {
    * @returns {TemplateResult}
    */
   renderSearchInput(props) {
+    const { searchTerm, isOpen, onSearchChange } = props
+
     return html`<input
       class="iw-combobox-dropdown-search"
       type="text"
       placeholder="Search..."
-      .value=${props.searchTerm ?? ""}
-      @input=${(event) => props.onSearchChange?.(event.target.value)}
+      .value=${searchTerm ?? ""}
+      @input=${(event) => onSearchChange?.(event.target.value)}
       @keydown=${(event) => handleKeyDown(props, event)}
       ${ref((el) => {
-        if (el && props.isOpen) queueMicrotask(() => el.focus())
+        if (el && isOpen) queueMicrotask(() => el.focus())
       })}
     />`
   },
@@ -288,7 +313,9 @@ export const Combobox = {
    * @returns {TemplateResult}
    */
   renderOptions(props) {
-    const filteredOptions = filterOptions(props.options, props.searchTerm)
+    const { options, searchTerm } = props
+
+    const filteredOptions = filterOptions(options, searchTerm)
 
     return html`<div class="iw-combobox-dropdown-options">
       ${repeat(
@@ -307,15 +334,24 @@ export const Combobox = {
    * @returns {TemplateResult}
    */
   renderOption(props, { option, index }) {
+    const {
+      id,
+      selectedValue,
+      focusedIndex,
+      isMulti,
+      onOptionSelect,
+      onChange,
+      onFocusSet,
+    } = props
+
     const normalized = formatOption(option)
-    const isSelected = isOptionSelected(
-      option,
-      props.selectedValue,
-      props.isMulti,
-    )
-    const isFocused = index === props.focusedIndex
+    const isSelected = isOptionSelected(option, selectedValue, isMulti)
+    const isFocused = index === focusedIndex
 
     return html`<div
+      id=${id ? `${id}-option-${index}` : ""}
+      role="option"
+      aria-selected=${isSelected ? "true" : "false"}
       class="iw-combobox-dropdown-options-option ${classMap({
         "iw-combobox-dropdown-options-option-selected": isSelected,
         "iw-combobox-dropdown-options-option-focused": isFocused,
@@ -323,13 +359,13 @@ export const Combobox = {
       })}"
       @click=${() => {
         if (normalized.isDisabled) return
-        props.onOptionSelect?.(normalized)
-        props.onChange?.(normalized)
+        onOptionSelect?.(normalized)
+        onChange?.(normalized)
       }}
-      @mouseenter=${() => props.onFocusSet?.(index)}
+      @mouseenter=${() => onFocusSet?.(index)}
     >
       ${when(
-        props.isMulti,
+        isMulti,
         () =>
           html`<input
             type="checkbox"
@@ -348,7 +384,9 @@ export const Combobox = {
    * @returns {TemplateResult}
    */
   renderLoading(props) {
-    return html`<div class="iw-combobox-loading">${props.loadingMessage}</div>`
+    const { loadingMessage } = props
+
+    return html`<div class="iw-combobox-loading">${loadingMessage}</div>`
   },
 
   /**
@@ -358,55 +396,148 @@ export const Combobox = {
    * @returns {TemplateResult}
    */
   renderNoOptions(props) {
-    return html`<div class="iw-combobox-no-options">
-      ${props.noOptionsMessage}
-    </div>`
+    const { noOptionsMessage } = props
+    return html`<div class="iw-combobox-no-options">${noOptionsMessage}</div>`
   },
 }
 
+/**
+ * Opens a closed combobox from the keyboard, and navigates an open one.
+ *
+ * The control keeps DOM focus whenever the combobox is not searchable — there
+ * is no search input to hand focus to — so while open it drives the same
+ * navigation handleKeyDown() gives the search input, rather than toggling.
+ * @param {ComboboxProps} props
+ * @param {KeyboardEvent} event
+ */
+function handleControlKeyDown(props, event) {
+  const { isDisabled, isOpen, onToggle } = props
+
+  if (isDisabled) return
+
+  if (isOpen) {
+    handleKeyDown(props, event)
+    return
+  }
+
+  if (event.key !== "Enter" && event.key !== " " && event.key !== "ArrowDown") {
+    return
+  }
+  // Space would otherwise scroll the page out from under the dropdown.
+  event.preventDefault()
+  onToggle?.()
+}
+
 /**
  * Handle key navigation.
  * @param {ComboboxProps} props
  * @param {KeyboardEvent} event
  */
 function handleKeyDown(props, event) {
-  const filteredOptions = filterOptions(props.options, props.searchTerm)
+  const {
+    options,
+    searchTerm,
+    focusedIndex,
+    onFocusFirst,
+    onFocusPrev,
+    onFocusNext,
+    onFocusLast,
+    onOptionSelect,
+    onChange,
+    onClose,
+  } = props
+
+  const filteredOptions = filterOptions(options, searchTerm)
 
   switch (event.key) {
     case "ArrowDown":
       event.preventDefault()
-      props.onFocusNext?.()
+      onFocusNext?.()
       break
     case "ArrowUp":
       event.preventDefault()
-      props.onFocusPrev?.()
+      onFocusPrev?.()
       break
     case "Enter":
       event.preventDefault()
-      if (
-        props.focusedIndex > NO_FOCUSED_INDEX &&
-        filteredOptions[props.focusedIndex]
-      ) {
-        const option = formatOption(filteredOptions[props.focusedIndex])
+      if (focusedIndex > NO_FOCUSED_INDEX && filteredOptions[focusedIndex]) {
+        const option = formatOption(filteredOptions[focusedIndex])
         if (!option.isDisabled) {
-          props.onOptionSelect?.(option)
-          props.onChange?.(option)
+          onOptionSelect?.(option)
+          onChange?.(option)
         }
       }
       break
     case "Escape":
       event.preventDefault()
-      props.onClose?.()
+      onClose?.()
       break
     case "Home":
       event.preventDefault()
-      props.onFocusFirst?.()
+      onFocusFirst?.()
       break
     case "End":
       event.preventDefault()
-      props.onFocusLast?.()
+      onFocusLast?.()
       break
     default:
       break
   }
 }
+
+/**
+ * Registered outside-pointer listeners, keyed by the dropdown element they
+ * belong to. Used only to deduplicate: the ref callback is handed a fresh arrow
+ * on every re-render, so without this each pass would stack another listener on
+ * the document.
+ * @type {WeakMap<Element, { props: ComboboxProps, listener: (event: Event) => void }>}
+ */
+const outsideListeners = new WeakMap()
+
+/**
+ * Listen on the document for presses outside the dropdown, closing it when one
+ * happens.
+ *
+ * This listens for `pointerdown` rather than `click` on purpose. Mobile browsers
+ * synthesise `click` asynchronously after `touchend`, and drop it entirely when
+ * the touch drifts into a scroll gesture or the target is replaced meanwhile.
+ * A suppressed click would leave the listener armed, and it would then close the
+ * *next* dropdown on the tap that opened it, leaving the combobox looking stuck.
+ * `pointerdown` is dispatched synchronously for mouse, touch and pen.
+ *
+ * No id is needed: the element keys the listener, and it retires itself once its
+ * dropdown has left the DOM.
+ * @param {ComboboxProps} props
+ * @param {Element|null|undefined} el dropdown element, or undefined on unmount
+ */
+function trackOutsideClick(props, el) {
+  if (!el) return
+
+  const existing = outsideListeners.get(el)
+  if (existing) {
+    // A re-render of the same dropdown: keep the one listener, but point it at
+    // the current props so onClose is not captured from the first render.
+    existing.props = props
+    return
+  }
+
+  const entry = { props }
+  entry.listener = (event) => {
+    // The dropdown left the DOM: this press is the last one to hear from it.
+    // Retiring here is what keeps a torn-down dropdown from closing whatever
+    // opens next.
+    if (!el.isConnected) {
+      document.removeEventListener("pointerdown", entry.listener)
+      return
+    }
+
+    // The root, not the dropdown: the control is a sibling of the dropdown, and a
+    // press on it has to count as inside. Resolved per event rather than at mount
+    // because the dropdown is not connected yet when the ref first runs.
+    const root = el.closest(".iw-combobox") ?? el
+    if (!event.composedPath().includes(root)) entry.props.onClose?.()
+  }
+
+  outsideListeners.set(el, entry)
+  document.addEventListener("pointerdown", entry.listener)
+}

package/src/controls/input/index.js

@@ -1,3 +1,3 @@
-import * as renderers from "./template.js"
+import { Input as renderers } from "./template.js"
 
 export const Input = { ...renderers }

package/src/controls/input/input.stories.js

@@ -174,6 +174,25 @@ WithError.args = {
   error: "Please enter a valid email address",
 }
 
+export const WithIcon = {}
+WithIcon.args = {
+  ...Default.args,
+  icon: "@",
+}
+
+export const WithIconAfter = {}
+WithIconAfter.args = {
+  ...Default.args,
+  iconAfter: "@",
+}
+
+export const WithBothIcons = {}
+WithBothIcons.args = {
+  ...Default.args,
+  icon: "@",
+  iconAfter: "@",
+}
+
 export const Required = {}
 Required.args = {
   ...Default.args,
@@ -206,6 +225,13 @@ Small.args = {
   size: "sm",
 }
 
+export const Medium = {}
+Medium.args = {
+  ...Default.args,
+  label: "Medium Input",
+  size: "md",
+}
+
 export const Large = {}
 Large.args = {
   ...Default.args,
@@ -286,3 +312,12 @@ Color.args = {
   inputType: "color",
   value: "#7c3aed",
 }
+
+export const Password = {}
+Password.args = {
+  ...Default.args,
+  label: "Password",
+  inputType: "password",
+  placeholder: "••••••••",
+  iconAfter: "@",
+}