@inglorious/ui 9.8.2 → 9.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/ui",
-  "version": "9.8.2",
+  "version": "9.9.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",

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,7 @@
  * @typedef {import('../../../types/controls/select.js').SelectOption} SelectOption
  */
 
-import { filterOptions, formatOption, getOptionValue } from "./helpers.js"
+import { formatOption, getOptionValue, visibleOptions } from "./helpers.js"
 
 /**
  * Initialize missing select state defaults.
@@ -39,7 +39,7 @@ export function open(entity) {
   if (entity.isDisabled) return
   entity.isOpen = true
 
-  const filtered = filterOptions(entity.options, entity.searchTerm)
+  const filtered = visibleOptions(entity)
   entity.focusedIndex = filtered.length ? 0 : -1
 }
 
@@ -66,6 +66,11 @@ export function optionSelect(entity, option) {
   const normalizedOption = formatOption(option)
   const optionValue = getOptionValue(normalizedOption)
 
+  if (normalizedOption.isCreated) {
+    entity.searchTerm = ""
+    entity.focusedIndex = -1
+  }
+
   if (entity.isMulti) {
     const values = Array.isArray(entity.selectedValue)
       ? entity.selectedValue
@@ -98,13 +103,13 @@ export function clear(entity) {
  */
 export function searchChange(entity, searchTerm) {
   entity.searchTerm = searchTerm
-  const filtered = filterOptions(entity.options, entity.searchTerm)
+  const filtered = visibleOptions(entity)
   entity.focusedIndex = filtered.length ? 0 : -1
 }
 
 /** @param {SelectEntity} entity */
 export function focusNext(entity) {
-  const filtered = filterOptions(entity.options, entity.searchTerm)
+  const filtered = visibleOptions(entity)
   if (!filtered.length) return
   entity.focusedIndex = Math.min(entity.focusedIndex + 1, filtered.length - 1)
 }
@@ -116,13 +121,13 @@ export function focusPrev(entity) {
 
 /** @param {SelectEntity} entity */
 export function focusFirst(entity) {
-  const filtered = filterOptions(entity.options, entity.searchTerm)
+  const filtered = visibleOptions(entity)
   if (filtered.length) entity.focusedIndex = 0
 }
 
 /** @param {SelectEntity} entity */
 export function focusLast(entity) {
-  const filtered = filterOptions(entity.options, entity.searchTerm)
+  const filtered = visibleOptions(entity)
   if (filtered.length) entity.focusedIndex = filtered.length - 1
 }
 

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/types/controls/combobox.d.ts

@@ -10,6 +10,10 @@ export type ComboboxOption =
       error?: string
       isDisabled?: boolean
       isRequired?: boolean
+      /** Other names a search finds this option by. */
+      keywords?: string[]
+      /** Set on the option that adds a searched term. */
+      isCreated?: boolean
       [key: string]: unknown
     }
 
@@ -30,6 +34,10 @@ export interface ComboboxProps {
   isDisabled?: boolean
   isSearchable?: boolean
   isClearable?: boolean
+  /** Offers to add a searched term that matches no option. Needs `isSearchable`. */
+  isCreatable?: boolean
+  /** Text of the option that adds the term. Defaults to `Add "term"`. */
+  formatCreateLabel?: (term: string) => string
 
   placeholder?: string
   /** Placeholder of the search box in the panel. Defaults to "Search...". */
@@ -83,3 +91,13 @@ export declare function filterOptions(
   options: ComboboxOption[],
   searchTerm: string,
 ): ComboboxOption[]
+export declare function visibleOptions(
+  props: Pick<
+    ComboboxProps,
+    | "options"
+    | "searchTerm"
+    | "selectedValue"
+    | "isCreatable"
+    | "formatCreateLabel"
+  >,
+): ComboboxOption[]