dap-design-system 0.62.3 → 0.63.0

package/dist/components/option-list/option-data.js

@@ -0,0 +1,34 @@
+import { JSONAttributeParser as u } from "../../common/utils.js";
+function f(t) {
+  if (Array.isArray(t)) return t;
+  if (!(typeof t == "string" && /^\[object /.test(t)) && typeof t == "string" && t.trim() !== "") {
+    const e = u(t);
+    return Array.isArray(e) ? e : void 0;
+  }
+}
+const p = {
+  fromAttribute: (t) => f(t)
+}, i = /* @__PURE__ */ new WeakMap(), s = /* @__PURE__ */ new WeakMap();
+function a(t) {
+  var r, o;
+  let e = i.get(t);
+  return e || (e = document.createElement("dap-ds-option-item"), i.set(t, e), s.set(e, t)), e.setAttribute("value", String(t.value)), e.setAttribute("label", String((r = t.label) != null ? r : "")), e.toggleAttribute("disabled", !!t.disabled), e.textContent = String((o = t.label) != null ? o : ""), e;
+}
+let n;
+function c() {
+  return n === void 0 && (n = typeof document != "undefined" && typeof document.createElement == "function" && typeof document.createElement("div").setAttribute == "function"), n;
+}
+function m(t) {
+  return c() ? t.map((e) => a(e)) : [];
+}
+function l(t) {
+  return t ? s.get(t) : void 0;
+}
+export {
+  l as optionDataOf,
+  a as optionElementFor,
+  m as optionElementsFor,
+  p as optionItemsConverter,
+  f as toOptionItems
+};
+//# sourceMappingURL=option-data.js.map

package/dist/components/option-list/option-data.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"option-data.js","sources":["../../../src/components/option-list/option-data.ts"],"sourcesContent":["import type { TemplateResult } from 'lit'\n\nimport { JSONAttributeParser } from '@/common/utils'\n\n/** One option given as data (`items`) instead of a `<dap-ds-option-item>` child. */\nexport interface DapDSOptionData {\n  /** The option value; becomes the select / combobox value. */\n  value: string\n  /** Plain text of the option: shown by default, and used for filtering, typeahead and the selected text. */\n  label: string\n  /** Whether the option is disabled. */\n  disabled?: boolean\n  /** Any extra fields are passed through to `renderOption`. */\n  [extra: string]: unknown\n}\n\n/** State passed to `renderOption` next to the item. */\nexport interface DapDSOptionRenderState {\n  index: number\n  selected: boolean\n  active: boolean\n  disabled: boolean\n}\n\n/** Renders the content of one data option. A string is shown as text, never parsed as HTML. */\nexport type DapDSOptionRenderer = (\n  item: DapDSOptionData,\n  state: DapDSOptionRenderState,\n) => TemplateResult | Node | string\n\n/**\n * Normalizes an `items` value: an array is used as is, a JSON string is\n * parsed (attributes, and frameworks such as React 19 that assign a string\n * to the property), anything else means \"no items\".\n */\nexport function toOptionItems(value: unknown): DapDSOptionData[] | undefined {\n  if (Array.isArray(value)) return value as DapDSOptionData[]\n  // \"[object Object],…\" is what server renderers (e.g. SvelteKit) write when\n  // they stringify an array prop into an attribute; the real array is set as\n  // a property on hydration, so this is not malformed JSON worth reporting.\n  if (typeof value === 'string' && /^\\[object /.test(value)) return undefined\n  if (typeof value === 'string' && value.trim() !== '') {\n    const parsed = JSONAttributeParser(value)\n    return Array.isArray(parsed) ? (parsed as DapDSOptionData[]) : undefined\n  }\n  return undefined\n}\n\n/** Reads `items` from a JSON attribute; anything that is not an array is ignored. */\nexport const optionItemsConverter = {\n  fromAttribute: (value: string | null): DapDSOptionData[] | undefined =>\n    toOptionItems(value),\n}\n\n/**\n * The detached `dap-ds-option-item` standing in for each data item. The Listbox\n * state, select and combobox all work on option elements, so data items take\n * exactly the same path as child options. Cached per item object so the same\n * item always maps to the same element (selection keeps its identity).\n */\nconst elementByItem = new WeakMap<DapDSOptionData, HTMLElement>()\nconst itemByElement = new WeakMap<Element, DapDSOptionData>()\n\nexport function optionElementFor<E extends HTMLElement>(\n  item: DapDSOptionData,\n): E {\n  let el = elementByItem.get(item)\n  if (!el) {\n    el = document.createElement('dap-ds-option-item')\n    elementByItem.set(item, el)\n    itemByElement.set(el, item)\n  }\n  // Attributes, not properties: `hasAttribute('disabled')` is what filtering\n  // checks, and the attribute callbacks set the properties synchronously.\n  el.setAttribute('value', String(item.value))\n  el.setAttribute('label', String(item.label ?? ''))\n  el.toggleAttribute('disabled', !!item.disabled)\n  el.textContent = String(item.label ?? '')\n  return el as E\n}\n\nlet realDom: boolean | undefined\n\n/**\n * Whether real DOM elements can be created. Under SSR (the @lit-labs/ssr DOM\n * shim) `document.createElement` returns a bare stand-in without\n * `setAttribute`; there are no option elements to build there, as the list\n * renders its options only in the browser.\n */\nfunction hasRealDom(): boolean {\n  if (realDom === undefined) {\n    realDom =\n      typeof document !== 'undefined' &&\n      typeof document.createElement === 'function' &&\n      typeof document.createElement('div').setAttribute === 'function'\n  }\n  return realDom\n}\n\nexport function optionElementsFor<E extends HTMLElement>(\n  items: DapDSOptionData[],\n): E[] {\n  if (!hasRealDom()) {\n    return []\n  }\n  return items.map(item => optionElementFor<E>(item))\n}\n\n/** The data item behind an option element, if it came from `items`. */\nexport function optionDataOf(\n  el: Element | null | undefined,\n): DapDSOptionData | undefined {\n  return el ? itemByElement.get(el) : undefined\n}\n"],"names":["toOptionItems","value","parsed","JSONAttributeParser","optionItemsConverter","elementByItem","itemByElement","optionElementFor","item","el","_a","_b","realDom","hasRealDom","optionElementsFor","items","optionDataOf"],"mappings":";AAmCO,SAASA,EAAcC,GAA+C;AAC3E,MAAI,MAAM,QAAQA,CAAK,EAAU,QAAAA;AAIjC,MAAI,SAAOA,KAAU,YAAY,aAAa,KAAKA,CAAK,MACpD,OAAOA,KAAU,YAAYA,EAAM,KAAA,MAAW,IAAI;AAC9C,UAAAC,IAASC,EAAoBF,CAAK;AACxC,WAAO,MAAM,QAAQC,CAAM,IAAKA,IAA+B;AAAA,EAAA;AAGnE;AAGO,MAAME,IAAuB;AAAA,EAClC,eAAe,CAACH,MACdD,EAAcC,CAAK;AACvB,GAQMI,wBAAoB,QAAsC,GAC1DC,wBAAoB,QAAkC;AAErD,SAASC,EACdC,GACG;;AACC,MAAAC,IAAKJ,EAAc,IAAIG,CAAI;AAC/B,SAAKC,MACEA,IAAA,SAAS,cAAc,oBAAoB,GAClCJ,EAAA,IAAIG,GAAMC,CAAE,GACZH,EAAA,IAAIG,GAAID,CAAI,IAI5BC,EAAG,aAAa,SAAS,OAAOD,EAAK,KAAK,CAAC,GAC3CC,EAAG,aAAa,SAAS,QAAOC,IAAAF,EAAK,UAAL,OAAAE,IAAc,EAAE,CAAC,GACjDD,EAAG,gBAAgB,YAAY,CAAC,CAACD,EAAK,QAAQ,GAC9CC,EAAG,cAAc,QAAOE,IAAAH,EAAK,UAAL,OAAAG,IAAc,EAAE,GACjCF;AACT;AAEA,IAAIG;AAQJ,SAASC,IAAsB;AAC7B,SAAID,MAAY,WACdA,IACE,OAAO,YAAa,eACpB,OAAO,SAAS,iBAAkB,cAClC,OAAO,SAAS,cAAc,KAAK,EAAE,gBAAiB,aAEnDA;AACT;AAEO,SAASE,EACdC,GACK;AACD,SAACF,MAGEE,EAAM,IAAI,CAAQP,MAAAD,EAAoBC,CAAI,CAAC,IAFzC,CAAC;AAGZ;AAGO,SAASQ,EACdP,GAC6B;AAC7B,SAAOA,IAAKH,EAAc,IAAIG,CAAE,IAAI;AACtC;"}

package/dist/components/option-list/option-list.component.d.ts

@@ -1,6 +1,7 @@
 import { PropertyValueMap } from 'lit';
 import { DdsElement } from '../../internal/dds-hu-element';
 import { default as DapDSOptionItem } from '../option-item/option-item.component';
+import { DapDSOptionData, DapDSOptionRenderer } from './option-data';
 declare const DapDSOptionList_base: typeof DdsElement & {
     new (...args: any[]): import('../../internal/mixin/sizedMixin').SizedElementInterface;
     prototype: import('../../internal/mixin/sizedMixin').SizedElementInterface;
@@ -12,7 +13,7 @@ declare const DapDSOptionList_base: typeof DdsElement & {
  * @title - Option list
  *
  * @event {{ void }} dds-cancel - Fired when the escape key is pressed.
- * @event {{ option: DapDSOptionItem, value: string, index: number, text: string }} dds-option-change - Fired when the option list value changes.
+ * @event {{ option: DapDSOptionItem, value: string, index: number, text: string, item?: DapDSOptionData }} dds-option-change - Fired when the option list value changes. `item` is set when the options come from `items`.
  * @event {{ void }} dds-keydown - Fired when a key is pressed down.
  * @event {{ elements: DapDSOptionItem[] }} dds-list-changed - Fired when the available options list changes.
  *
@@ -55,6 +56,20 @@ export default class DapDSOptionList extends DapDSOptionList_base {
      * @ignore
      */
     disableDelaySet: boolean;
+    /**
+     * The options as data, instead of `dap-ds-option-item` children. When set, child options are ignored. Also accepted as a JSON attribute.
+     * @type {DapDSOptionData[]}
+     */
+    get items(): DapDSOptionData[] | undefined;
+    set items(value: DapDSOptionData[] | string | undefined);
+    private _items?;
+    /**
+     * Renders the content of each option given in `items`. Defaults to the item's `label` as text. Must not render interactive elements, and should include the label text (it is the option's accessible name).
+     * @type {DapDSOptionRenderer}
+     */
+    renderOption?: DapDSOptionRenderer;
+    /** Whether multiple options can be selected; exposed as aria-multiselectable on the listbox. */
+    multiselectable: boolean;
     queryTimeout: number | undefined;
     queryString: string;
     firstLoad: boolean;
@@ -62,41 +77,80 @@ export default class DapDSOptionList extends DapDSOptionList_base {
     selectedIndex: number;
     private optionEls;
     private availableOptions;
+    /** The option last marked as selected (Listbox state `marked`). */
+    private markedOption;
+    /** The option carrying the focused flag (Listbox state `flagged`). */
+    private flaggedOption;
+    private ownValue;
+    /**
+     * True when the element was server-rendered (declarative shadow DOM): its
+     * shadow root already exists when the element is constructed.
+     */
+    private readonly serverRendered;
     get isAutoComplete(): boolean;
     static readonly styles: import('lit').CSSResult;
     protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     getAllOptions(): DapDSOptionItem[];
+    private getSlottedOptions;
     private getAllRenderedOptions;
     getAllAvailabeOptions(): DapDSOptionItem[];
     getActiveOption(): DapDSOptionItem | null | undefined;
     protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    private warnedChildren;
+    private warnedLabels;
+    private warnIgnoredChildren;
+    /** The visible text is the option's accessible name, so it should contain the label. */
+    private warnMissingLabels;
     protected shouldUpdate(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): boolean;
     filterAvailableOptions(): void;
     attributeChangedCallback(name: string, oldValue: any, newValue: any): void;
     setOptionsFromSlottedItems(): void;
     private handleKeydown;
     private scrollToActiveOption;
-    private handleNavigationKey;
-    private handleActionKey;
-    private handleTypeheadKey;
-    private handleKeyCodes;
     private getEventDetails;
-    private findNearestEnabled;
-    private findIndexByValue;
-    private clearItemFocusStates;
-    private setCurrentOption;
+    /** `{ item }` for an option that came from `items`, else nothing (child payloads stay as they were). */
+    private itemDetail;
     private setFocusedOption;
-    private setSelectedOption;
-    private selectionChanged;
-    private changeOption;
+    private revealAbort?;
+    /**
+     * The popup constrains its scroll container's max-height asynchronously
+     * (floating-ui, re-run when the content changes), so there is no single
+     * frame after which the container is final. Keep the active option in view
+     * for a few frames, and stop as soon as the user scrolls, touches or types.
+     */
+    private revealOverFrames;
+    /**
+     * Scroll the active option into view once the popup has laid out. For hosts
+     * that open the list without moving focus into it.
+     * @internal
+     */
+    revealActiveOption(): void;
     private readonly handleOptionClick;
     getSearchString: (char: string) => string;
+    /** (Re)start the timer that clears the typeahead query. */
+    private restartTypeaheadTimer;
     buildQueryString: (char: string) => void;
-    private handleInitialFocus;
-    private handleKeyFocus;
     captureFocus(key?: string): void;
     removeFocus(): void;
     private handleSlotChange;
+    private toListboxState;
+    /**
+     * Reduce, apply the new state, then run the effects in order. Fields that
+     * changed and changed back within one reduction are still reported to Lit,
+     * exactly as the former sequence of assignments did.
+     */
+    private dispatch;
+    /**
+     * Option flags follow Listbox state. On the caller's option items (the
+     * source of truth for what is selected / focusable) the marked option is
+     * `selected`, the flagged option is `focused` with tabindex 0, and every
+     * other item is cleared. A rendered clone (a click passes the clone) is only
+     * ever set, never cleared: its flags otherwise come from its render bindings.
+     */
+    private applyOptionFlags;
+    private runEffect;
+    private emitListboxEvent;
+    private renderOptionContent;
     render(): import('lit-html').TemplateResult;
 }
 export {};