@inglorious/ui 7.2.1 → 7.2.3

package/src/controls/select/template.js

@@ -5,12 +5,46 @@
 
 import { html } from "@inglorious/web"
 import { classMap } from "@inglorious/web/directives/class-map"
-import { ref } from "@inglorious/web/directives/ref"
 import { repeat } from "@inglorious/web/directives/repeat"
+import { when } from "@inglorious/web/directives/when"
 
-import { applyElementProps } from "../../shared/applyElementProps.js"
+import { Icon } from "../../data-display/icon/index.js"
 import { formatOption, getOptionValue, isOptionSelected } from "./helpers.js"
 
+/**
+ * Opens the native dropdown when the arrow strip is pressed.
+ *
+ * The arrow is a sibling of the select, not an overlay on it, so a press on it
+ * has no control underneath to hit. A native popup only opens from a trusted
+ * gesture on the select itself, and the strip is outside it.
+ *
+ * `showPicker()` is the API for that. It needs transient user activation, which
+ * a real click has and a dispatched event does not, and it throws rather than
+ * silently doing nothing, so the fallback covers the browsers without it.
+ *
+ * Deliberately on `click`, not `pointerdown`: focusing from pointerdown gets
+ * the focus moved away again by the browser's own mousedown handling, which
+ * showed up as a focus immediately followed by a blur.
+ *
+ * @param {MouseEvent} event
+ */
+function openFromArrowStrip(event) {
+  const frame = event.currentTarget
+  const select = frame?.querySelector("select")
+  if (!select || select.disabled || event.target === select) return
+
+  event.preventDefault()
+  if (typeof select.showPicker === "function") {
+    try {
+      select.showPicker()
+      return
+    } catch {
+      // No user activation, or the popup is already showing.
+    }
+  }
+  select.focus()
+}
+
 /**
  * Renders a styled native select control with optional single or multi-select modes.
  * Options can be primitives or objects and are rendered with consistent theming.
@@ -21,77 +55,147 @@ import { formatOption, getOptionValue, isOptionSelected } from "./helpers.js"
  * @param {SelectProps} props
  * @returns {TemplateResult}
  */
-export function render(props) {
-  const {
-    id,
-    type, // eslint-disable-line no-unused-vars
-    name = "",
-    value = "",
-    options = [],
-    size = "md",
-    isDisabled = false,
-    isFullWidth = false,
-    isMulti = false,
-    onChange,
-    onBlur,
-    onFocus,
-    ...rest
-  } = props
-
-  const inputId = id || name
-
-  const selectClasses = {
-    "iw-select": true,
-    "iw-select-full-width": !!isFullWidth,
-    [`iw-select-${size}`]: size !== "md",
-  }
+export const Select = {
+  render(props) {
+    return this.renderSelect(props)
+  },
+
+  renderSelect(props) {
+    const {
+      id,
+      label,
+      hint,
+      error,
+      isRequired = false,
+      isFullWidth = false,
+    } = props
+
+    const labelId = label && id ? `${id}-label` : ""
+    const messageId = (error || hint) && id ? `${id}-message` : ""
+
+    const selectClasses = {
+      "iw-select": true,
+      "iw-select-full-width": !!isFullWidth,
+    }
+
+    return html`
+      <div class=${classMap(selectClasses)}>
+        ${when(
+          label,
+          () => html`
+            <label for=${id || name || ""} class="iw-select-label">
+              ${label}
+              ${
+                isRequired
+                  ? html`<span class="iw-select-required">*</span>`
+                  : null
+              }
+            </label>
+          `,
+        )}
+        ${this.renderControl?.({ ...props, labelId, messageId })}
+        ${when(
+          error,
+          () =>
+            html`<span id=${messageId || ""} class="iw-select-error-message"
+              >${error}</span
+            >`,
+        )}
+        ${when(
+          !error && hint,
+          () =>
+            html`<span id=${messageId || ""} class="iw-select-hint"
+              >${hint}</span
+            >`,
+        )}
+      </div>
+    `
+  },
+
+  renderControl(props) {
+    const {
+      id,
+      name,
+      options,
+      value,
+      error,
+      icon,
+      size = "md",
+      isOpen,
+      isMulti,
+      isRequired,
+      isDisabled,
+      onChange,
+      onBlur,
+      onFocus,
+    } = props
+
+    const controlId = id || name
+
+    const controlClasses = {
+      "iw-select-control": true,
+      [`iw-select-${size}`]: true,
+      "iw-select-control-open": isOpen,
+      "iw-select-control-disabled": isDisabled,
+      "iw-select-control-error": !!error,
+    }
+
+    const selectedOption = options.find(
+      (option) => getOptionValue(option) === value,
+    )
+
+    return html`<div class="iw-select-frame" @click=${openFromArrowStrip}>
+      ${icon ? Icon.render({ children: icon, size }) : null}
+
+      <select
+        id=${controlId}
+        name=${name}
+        ?multiple=${isMulti}
+        ?disabled=${isDisabled}
+        ?required=${isRequired}
+        class=${classMap(controlClasses)}
+        @change=${(event) => onChange?.(event.target.value)}
+        @blur=${onBlur}
+        @focus=${onFocus}
+      >
+        ${repeat(
+          options,
+          (option) => getOptionValue(option),
+          (option) => {
+            const {
+              value,
+              label,
+              isDisabled: isOptionDisabled,
+            } = formatOption(option)
+            const isSelected = isOptionSelected(
+              option,
+              selectedOption?.value,
+              isMulti,
+            )
+
+            const optionClasses = {
+              "iw-select-option": true,
+              "iw-select-option-selected": isSelected,
+            }
 
-  const selectedOption = options.find(
-    (option) => getOptionValue(option) === value,
-  )
-
-  return html`
-    <select
-      id=${inputId}
-      name=${name}
-      ?multiple=${isMulti}
-      ?disabled=${isDisabled}
-      class=${classMap(selectClasses)}
-      @change=${(event) => onChange?.(event.target.value)}
-      @blur=${onBlur}
-      @focus=${onFocus}
-      ${ref((element) => applyElementProps(element, rest))}
-    >
-      ${repeat(
-        options,
-        (option) => getOptionValue(option),
-        (option) => {
-          const {
-            value,
-            label,
-            isDisabled: isOptionDisabled,
-          } = formatOption(option)
-          const isSelected = isOptionSelected(
-            option,
-            selectedOption?.value,
-            isMulti,
-          )
-
-          const optionClasses = {
-            "iw-select-option": true,
-            "iw-select-option-selected": isSelected,
-          }
-
-          return html`<option
-            value=${value}
-            .selected=${value === selectedOption?.value}
-            ?disabled=${isOptionDisabled}
-            class=${classMap(optionClasses)}
-          >
-            ${label}
-          </option>`
-        },
-      )}
-    </select>
-  `
+            return html`<option
+              value=${value}
+              .selected=${value === selectedOption?.value}
+              ?disabled=${isOptionDisabled}
+              class=${classMap(optionClasses)}
+            >
+              ${label}
+            </option>`
+          },
+        )}
+      </select>
+      <!-- A native select can only contain options, so the arrow cannot live
+             inside it. It sits on a wrapper around the select rather than the
+             field, so it stays centred on the control whether or not a label,
+             hint or error sits above and below it. Decorative: pointer-events
+             none so clicks reach the select, and hidden from assistive tech,
+             which announces a dropdown without needing the glyph. -->
+      <span class="iw-select-arrow" aria-hidden="true">▼</span>
+    </div>`
+  },
 }

package/src/data-display/icon/icon-implementations.mdx

@@ -108,8 +108,8 @@ Use this page as a quick reference for supported icon strategies in `@inglorious
 </section>
 
     <section className="iw-icon-tab-panel iw-icon-tab-panel-material">
-      <p>Use <code>@inglorious/ui/material-icon</code> when Material Symbols fonts are loaded. Reference: <a href="https://fonts.google.com/icons?icon.set=Material+Icons" target="_blank">Material Icons</a></p>
-      <pre><code>{`MaterialIcon.render({ name: "home", filled: true, size: "md" })`}</code></pre>
+      <p>Use <code>@inglorious/ui/material-icon</code> when Material Symbols fonts are loaded. Reference: <a href="https://fonts.google.com/icons?icon.set=Material+Symbols&icon.style=Outlined" target="_blank">Material Symbols</a></p>
+      <pre><code>{`MaterialIcon.render({ name: "home", isFilled: true, size: "md" })`}</code></pre>
       <div className="iw-icon-example">
         <span className="iw-material-symbol" aria-hidden="true">home</span>
         <span className="iw-material-symbol" aria-hidden="true">settings</span>

package/types/controls/combobox.d.ts

@@ -6,7 +6,10 @@ export type ComboboxOption =
   | {
       value: string | number
       label?: string
+      hint?: string
+      error?: string
       isDisabled?: boolean
+      isRequired?: boolean
       [key: string]: unknown
     }
 

package/types/controls/select.d.ts

@@ -19,7 +19,11 @@ export interface SelectProps {
   size?: "sm" | "md" | "lg"
   isDisabled?: boolean
   isFullWidth?: boolean
+  label?: string
+  hint?: string
+  error?: string
   isMulti?: boolean
+  isRequired?: boolean
   onChange?: (value: string) => void
   onBlur?: () => void
   onFocus?: () => void