@inglorious/ui 9.8.2 → 9.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/ui",
-  "version": "9.8.2",
+  "version": "9.10.0",
   "description": "A design system for Inglorious Web with render-function components and customizable themes",
   "author": "Matteo Antony Mistretta <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
   "license": "MIT",
@@ -211,6 +211,31 @@
       "import": "./src/feedback/backdrop/index.js"
     },
     "./backdrop.css": "./src/feedback/backdrop/style.css",
+    "./chip-picker": {
+      "types": "./types/controls/chip-picker.d.ts",
+      "import": "./src/controls/chip-picker/index.js"
+    },
+    "./chip-picker.css": "./src/controls/chip-picker/style.css",
+    "./confirm-dialog": {
+      "types": "./types/feedback/confirm-dialog.d.ts",
+      "import": "./src/feedback/confirm-dialog/index.js"
+    },
+    "./confirm-dialog.css": "./src/feedback/confirm-dialog/style.css",
+    "./crop-dialog": {
+      "types": "./types/feedback/crop-dialog.d.ts",
+      "import": "./src/feedback/crop-dialog/index.js"
+    },
+    "./crop-dialog.css": "./src/feedback/crop-dialog/style.css",
+    "./lightbox": {
+      "types": "./types/data-display/lightbox.d.ts",
+      "import": "./src/data-display/lightbox/index.js"
+    },
+    "./lightbox.css": "./src/data-display/lightbox/style.css",
+    "./load-status": {
+      "types": "./types/feedback/load-status.d.ts",
+      "import": "./src/feedback/load-status/index.js"
+    },
+    "./load-status.css": "./src/feedback/load-status/style.css",
     "./dialog": {
       "types": "./types/feedback/dialog.d.ts",
       "import": "./src/feedback/dialog/index.js"
@@ -316,7 +341,7 @@
   "peerDependencies": {
     "@inglorious/store": "^12.1.1",
     "@inglorious/utils": "^5.1.0",
-    "@inglorious/web": "^6.13.1"
+    "@inglorious/web": "^6.14.0"
   },
   "devDependencies": {
     "@iconify-icons/fa7-brands": "^2.0.0",
@@ -328,7 +353,7 @@
     "@inglorious/store": "12.1.1",
     "@inglorious/vite-plugin-jsx": "2.0.6",
     "@inglorious/vite-plugin-vue": "1.0.7",
-    "@inglorious/web": "6.13.1",
+    "@inglorious/web": "6.14.0",
     "@storybook/addon-docs": "^10.6.5",
     "@storybook/web-components-vite": "^10.6.5",
     "happy-dom": "^20.14.0",

package/src/controls/chip-picker/chip-picker.stories.js

@@ -0,0 +1,22 @@
+import { createRender } from "../../stories/notify-story.js"
+import { ChipPicker } from "."
+
+export default {
+  title: "Controls/ChipPicker",
+  tags: ["autodocs"],
+  render: createRender(ChipPicker),
+  argTypes: { onToggle: { action: "onToggle" } },
+}
+
+export const Default = {
+  args: {
+    label: "What do you do?",
+    hint: "Pick as many as you like.",
+    options: [
+      { value: "photographer", label: "Photographer" },
+      { value: "videographer", label: "Videographer" },
+      { value: "dj", label: "DJ" },
+    ],
+    value: ["videographer"],
+  },
+}

package/src/controls/chip-picker/index.js

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

package/src/controls/chip-picker/style.css

@@ -0,0 +1,26 @@
+.iw-chip-picker {
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+
+.iw-chip-picker-legend {
+  padding: 0;
+  margin-bottom: var(--iw-space-2);
+  font-size: var(--iw-font-size-sm);
+  font-weight: var(--iw-font-weight-medium);
+  color: var(--iw-color-text);
+}
+
+.iw-chip-picker-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--iw-space-2);
+}
+
+.iw-chip-picker-hint {
+  margin: var(--iw-space-2) 0 0;
+  font-size: var(--iw-font-size-xs);
+  color: var(--iw-color-text-muted, var(--iw-color-text));
+}

package/src/controls/chip-picker/template.js

@@ -0,0 +1,53 @@
+/**
+ * @typedef {import('../../../types/controls/chip-picker').ChipPickerProps} ChipPickerProps
+ * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
+ */
+
+import { html } from "@inglorious/web"
+import { when } from "@inglorious/web/directives/when"
+
+import { Chip } from "../../data-display/chip/index.js"
+import { formatOption } from "../combobox/helpers.js"
+
+/**
+ * Renders a group of toggle chips for picking several options, as a fieldset
+ * whose legend is `label`.
+ * @param {ChipPickerProps} props
+ * @returns {TemplateResult}
+ */
+export function render(props) {
+  const {
+    label,
+    hint,
+    options = [],
+    value = [],
+    isDisabled = false,
+    className = "",
+    onToggle,
+  } = props
+
+  return html`<fieldset
+    class=${["iw-chip-picker", className].filter(Boolean).join(" ")}
+  >
+    ${when(
+      label,
+      () => html`<legend class="iw-chip-picker-legend">${label}</legend>`,
+    )}
+    <div class="iw-chip-picker-chips">
+      ${options.map((option) => {
+        const {
+          value: optionValue,
+          label: optionLabel,
+          ...rest
+        } = formatOption(option)
+        return Chip.render({
+          children: optionLabel,
+          isSelected: value.includes(optionValue),
+          isDisabled: isDisabled || Boolean(rest.isDisabled),
+          onClick: () => onToggle?.(optionValue),
+        })
+      })}
+    </div>
+    ${when(hint, () => html`<p class="iw-chip-picker-hint">${hint}</p>`)}
+  </fieldset>`
+}

package/src/controls/combobox/combobox.stories.js

@@ -29,6 +29,10 @@ export default {
     },
     isSearchable: { control: "boolean", description: "Show search input." },
     isClearable: { control: "boolean", description: "Show clear button." },
+    isCreatable: {
+      control: "boolean",
+      description: "Offer to add a searched term that matches no option.",
+    },
     isDisabled: { control: "boolean", description: "Disable the control." },
     isLoading: { control: "boolean", description: "Show loading state." },
     searchTerm: { control: "text", description: "Current search filter." },
@@ -95,6 +99,16 @@ MultiOpen.args = {
   isOpen: true,
 }
 
+export const Creatable = {}
+Creatable.args = {
+  ...Default.args,
+  isMulti: true,
+  isCreatable: true,
+  selectedValue: ["it", "Atlantis"],
+  searchTerm: "Narnia",
+  isOpen: true,
+}
+
 export const WithHint = {}
 WithHint.args = {
   ...Default.args,

package/src/controls/combobox/handlers.js

@@ -3,7 +3,9 @@
  * @typedef {import('../../../types/controls/select.js').SelectOption} SelectOption
  */
 
-import { filterOptions, formatOption, getOptionValue } from "./helpers.js"
+import { formatOption, getOptionValue, visibleOptions } from "./helpers.js"
+
+const NONE = -1
 
 /**
  * Initialize missing select state defaults.
@@ -16,7 +18,7 @@ export function create(entity) {
 
   entity.isOpen ??= false
   entity.searchTerm ??= ""
-  entity.focusedIndex ??= -1
+  entity.focusedIndex ??= NONE
 
   entity.isMulti ??= false
   entity.selectedValue ??= entity.isMulti ? [] : null
@@ -38,15 +40,13 @@ export function create(entity) {
 export function open(entity) {
   if (entity.isDisabled) return
   entity.isOpen = true
-
-  const filtered = filterOptions(entity.options, entity.searchTerm)
-  entity.focusedIndex = filtered.length ? 0 : -1
+  entity.focusedIndex = enabledIndex(visibleOptions(entity), 0, 1)
 }
 
 /** @param {SelectEntity} entity */
 export function close(entity) {
   entity.isOpen = false
-  entity.focusedIndex = -1
+  entity.focusedIndex = NONE
 }
 
 /** @param {SelectEntity} entity */
@@ -60,12 +60,18 @@ export function toggle(entity) {
  * @param {SelectEntity} entity
  * @param {SelectOption} option
  */
-export function optionSelect(entity, option) {
+export function optionSelect(entity, option, api) {
   if (entity.isDisabled) return
 
   const normalizedOption = formatOption(option)
+  if (normalizedOption.isDisabled) return
   const optionValue = getOptionValue(normalizedOption)
 
+  if (normalizedOption.isCreated) {
+    entity.searchTerm = ""
+    entity.focusedIndex = NONE
+  }
+
   if (entity.isMulti) {
     const values = Array.isArray(entity.selectedValue)
       ? entity.selectedValue
@@ -79,17 +85,24 @@ export function optionSelect(entity, option) {
     }
 
     entity.selectedValue = values
+    notifyChange(entity, api)
     return
   }
 
   entity.selectedValue = optionValue
   close(entity)
+  notifyChange(entity, api)
 }
 
-/** @param {SelectEntity} entity */
-export function clear(entity) {
+/**
+ * @param {SelectEntity} entity
+ * @param {unknown} _payload
+ * @param {import('@inglorious/web').Api} [api]
+ */
+export function clear(entity, _payload, api) {
   if (entity.isDisabled) return
   entity.selectedValue = entity.isMulti ? [] : null
+  notifyChange(entity, api)
 }
 
 /**
@@ -98,32 +111,36 @@ export function clear(entity) {
  */
 export function searchChange(entity, searchTerm) {
   entity.searchTerm = searchTerm
-  const filtered = filterOptions(entity.options, entity.searchTerm)
-  entity.focusedIndex = filtered.length ? 0 : -1
+  entity.focusedIndex = enabledIndex(visibleOptions(entity), 0, 1)
 }
 
 /** @param {SelectEntity} entity */
 export function focusNext(entity) {
-  const filtered = filterOptions(entity.options, entity.searchTerm)
-  if (!filtered.length) return
-  entity.focusedIndex = Math.min(entity.focusedIndex + 1, filtered.length - 1)
+  const next = enabledIndex(visibleOptions(entity), entity.focusedIndex + 1, 1)
+  if (next !== NONE) entity.focusedIndex = next
 }
 
-/** @param {SelectEntity} entity */
+/**
+ * Before the first enabled option, focus goes back to the search box.
+ * @param {SelectEntity} entity
+ */
 export function focusPrev(entity) {
-  entity.focusedIndex = Math.max(entity.focusedIndex - 1, -1)
+  entity.focusedIndex = enabledIndex(
+    visibleOptions(entity),
+    entity.focusedIndex - 1,
+    -1,
+  )
 }
 
 /** @param {SelectEntity} entity */
 export function focusFirst(entity) {
-  const filtered = filterOptions(entity.options, entity.searchTerm)
-  if (filtered.length) entity.focusedIndex = 0
+  entity.focusedIndex = enabledIndex(visibleOptions(entity), 0, 1)
 }
 
 /** @param {SelectEntity} entity */
 export function focusLast(entity) {
-  const filtered = filterOptions(entity.options, entity.searchTerm)
-  if (filtered.length) entity.focusedIndex = filtered.length - 1
+  const filtered = visibleOptions(entity)
+  entity.focusedIndex = enabledIndex(filtered, filtered.length - 1, -1)
 }
 
 /**
@@ -134,3 +151,53 @@ export function focusLast(entity) {
 export function focusSet(entity, index) {
   entity.focusedIndex = Number.isInteger(index) ? index : entity.focusedIndex
 }
+
+/**
+ * Sets the value from outside, such as a form being filled with saved data.
+ * An empty string, as an empty form field holds, is no value. Unlike a
+ * choice, it does not notify `changeEvent`.
+ * @param {SelectEntity} entity
+ * @param {string | number | (string | number)[] | null} value
+ */
+export function valueSet(entity, value) {
+  if (entity.isMulti) entity.selectedValue = [...(value ?? [])]
+  else entity.selectedValue = value === "" ? null : (value ?? null)
+  entity.searchTerm = ""
+  entity.focusedIndex = NONE
+}
+
+/**
+ * Replaces the options, such as when they depend on another field.
+ * @param {SelectEntity} entity
+ * @param {SelectOption[]} options
+ */
+export function optionsSet(entity, options) {
+  entity.options = (options ?? []).map(formatOption)
+  entity.searchTerm = ""
+  entity.focusedIndex = NONE
+}
+
+/**
+ * Shows a validation message. The combobox is its own entity, so the form
+ * that validates it hands the message over.
+ * @param {SelectEntity} entity
+ * @param {string | null} error
+ */
+export function errorSet(entity, error) {
+  entity.error = error ?? null
+}
+
+function notifyChange(entity, api) {
+  if (!entity.changeEvent || !api) return
+  const value = entity.isMulti
+    ? [...entity.selectedValue]
+    : entity.selectedValue
+  api.notify(entity.changeEvent, { ...entity.changePayload, value })
+}
+
+function enabledIndex(options, start, step) {
+  for (let index = start; index >= 0 && index < options.length; index += step) {
+    if (!formatOption(options[index]).isDisabled) return index
+  }
+  return NONE
+}

package/src/controls/combobox/helpers.js

@@ -45,10 +45,45 @@ export function filterOptions(options, searchTerm) {
 
   const searchLower = String(searchTerm).toLowerCase().trim()
 
-  return options.filter((option) => {
-    const label = getOptionLabel(option)
-    return label.toLowerCase().includes(searchLower)
-  })
+  return options.filter((option) =>
+    optionTexts(option).some((text) => text.includes(searchLower)),
+  )
+}
+
+/**
+ * The options the dropdown lists: those matching the search, then, on a
+ * creatable combobox, one to add the typed term unless it is already known.
+ * @param {{ options?: SelectOption[], searchTerm?: string, selectedValue?: string|number|(string|number)[]|null, isCreatable?: boolean, formatCreateLabel?: (term: string) => string }} props
+ * @returns {SelectOption[]}
+ */
+export function visibleOptions({
+  options = [],
+  searchTerm,
+  selectedValue,
+  isCreatable = false,
+  formatCreateLabel = (term) => `Add "${term}"`,
+}) {
+  const filtered = filterOptions(options, searchTerm)
+  const term = String(searchTerm ?? "").trim()
+  if (!isCreatable || !term) return filtered
+
+  const key = term.toLowerCase()
+  const isKnown =
+    [selectedValue]
+      .flat()
+      .some((value) => String(value).toLowerCase() === key) ||
+    options.some(
+      (option) =>
+        !formatOption(option).isDisabled &&
+        (optionTexts(option).includes(key) ||
+          String(getOptionValue(option)).toLowerCase() === key),
+    )
+  if (isKnown) return filtered
+
+  return [
+    ...filtered,
+    { value: term, label: formatCreateLabel(term), isCreated: true },
+  ]
 }
 
 /**
@@ -89,3 +124,14 @@ export function formatOption(option) {
 
   return { value: String(option), label: String(option) }
 }
+
+/**
+ * What a search looks through: the label and the option's keywords, lowercased.
+ * @param {SelectOption} option
+ * @returns {string[]}
+ */
+function optionTexts(option) {
+  return [getOptionLabel(option), ...(option?.keywords ?? [])].map((text) =>
+    text.toLowerCase(),
+  )
+}

package/src/controls/combobox/index.js

@@ -40,4 +40,5 @@ export const {
   getOptionLabel,
   getOptionValue,
   isOptionSelected,
+  visibleOptions,
 } = helpers

package/src/controls/combobox/template.js

@@ -14,11 +14,11 @@ import { Chip } from "../../data-display/chip/index.js"
 import { fallbackLabel } from "../../shared/fallback-label.js"
 import { syncPopover } from "../../shared/top-layer.js"
 import {
-  filterOptions,
   formatOption,
   getOptionLabel,
   getOptionValue,
   isOptionSelected,
+  visibleOptions,
 } from "./helpers.js"
 
 const NO_FOCUSED_INDEX = -1
@@ -234,18 +234,20 @@ export const Combobox = {
    */
   renderMultiValueTag(props, value) {
     const { id, options, size, onOptionSelect, onChange } = props
+    const option = options.find((opt) => getOptionValue(opt) === value) ?? value
 
-    const option = options.find((opt) => getOptionValue(opt) === value)
     const tagId = id ? `${id}-tag-${String(value)}` : undefined
     const chipSize = size === "lg" ? "md" : "sm"
 
     return html`<span
       class="iw-combobox-multi-value-tag"
-      @click=${(event) => event.stopPropagation()}
+      @click=${(event) => {
+        if (event.target.closest(".iw-chip-remove")) event.stopPropagation()
+      }}
     >
       ${Chip.render({
         id: tagId,
-        children: option ? getOptionLabel(option) : String(value),
+        children: getOptionLabel(option),
         isRemovable: true,
         size: chipSize,
         shape: "rounded",
@@ -269,9 +271,9 @@ export const Combobox = {
    * @returns {TemplateResult}
    */
   renderDropdown(props) {
-    const { id, options, searchTerm, isSearchable, isLoading } = props
+    const { id, isSearchable, isLoading } = props
 
-    const filteredOptions = filterOptions(options, searchTerm)
+    const filteredOptions = visibleOptions(props)
 
     return html`<div
       id=${id ? `${id}-control-listbox` : nothing}
@@ -328,9 +330,7 @@ export const Combobox = {
    * @returns {TemplateResult}
    */
   renderOptions(props) {
-    const { options, searchTerm } = props
-
-    const filteredOptions = filterOptions(options, searchTerm)
+    const filteredOptions = visibleOptions(props)
 
     return html`<div class="iw-combobox-dropdown-options">
       ${repeat(
@@ -380,7 +380,7 @@ export const Combobox = {
       @mouseenter=${() => onFocusSet?.(index)}
     >
       ${when(
-        isMulti,
+        isMulti && !normalized.isCreated,
         () =>
           html`<input
             type="checkbox"
@@ -428,7 +428,8 @@ export const Combobox = {
 function handleControlKeyDown(props, event) {
   const { isDisabled, isOpen, onToggle } = props
 
-  if (isDisabled) return
+  // The keys of a tag's remove button or the clear button are their own.
+  if (isDisabled || event.target.closest?.("button")) return
 
   if (isOpen) {
     handleKeyDown(props, event)
@@ -450,8 +451,6 @@ function handleControlKeyDown(props, event) {
  */
 function handleKeyDown(props, event) {
   const {
-    options,
-    searchTerm,
     focusedIndex,
     onFocusFirst,
     onFocusPrev,
@@ -462,7 +461,7 @@ function handleKeyDown(props, event) {
     onClose,
   } = props
 
-  const filteredOptions = filterOptions(options, searchTerm)
+  const filteredOptions = visibleOptions(props)
 
   switch (event.key) {
     case "ArrowDown":

package/src/controls/controls.css

@@ -1,8 +1,10 @@
-@import "./button/style.css";
 @import "./button-group/style.css";
+@import "./button/style.css";
 @import "./checkbox/style.css";
+@import "./chip-picker/style.css";
 @import "./combobox/style.css";
 @import "./fab/style.css";
+@import "./file-upload/style.css";
 @import "./icon-button/style.css";
 @import "./image-cropper/style.css";
 @import "./input/style.css";
@@ -12,4 +14,3 @@
 @import "./slider/style.css";
 @import "./switch/style.css";
 @import "./textarea/style.css";
-@import "./file-upload/style.css";

package/src/data-display/data-display.css

@@ -7,6 +7,7 @@
 @import "./data-grid/style.css";
 @import "./divider/style.css";
 @import "./icon/style.css";
+@import "./lightbox/style.css";
 @import "./list/style.css";
 @import "./table/style.css";
 @import "./tooltip/style.css";

package/src/data-display/lightbox/index.js

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

package/src/data-display/lightbox/lightbox.stories.js

@@ -0,0 +1,25 @@
+import { createRender } from "../../stories/notify-story.js"
+import { Lightbox } from "."
+
+export default {
+  title: "Data Display/Lightbox",
+  tags: ["autodocs"],
+  render: createRender(Lightbox),
+  argTypes: {
+    index: { control: "number" },
+    onStep: { action: "onStep" },
+    onClose: { action: "onClose" },
+  },
+}
+
+export const Default = {
+  args: {
+    isOpen: true,
+    index: 0,
+    images: [
+      "https://picsum.photos/id/1011/1200/800",
+      "https://picsum.photos/id/1015/1200/800",
+      "https://picsum.photos/id/1016/800/1200",
+    ],
+  },
+}