@linzjs/lui 17.11.3 → 17.12.0

package/dist/lui.esm.js

@@ -40367,7 +40367,7 @@ const LuiAccordicardStatic = (props) => {
             React__default.createElement(LuiIcon, { className: clsx('LuiAccordicardStatic-chevron', isOpen ? 'LuiAccordicardStatic-chevron--isOpen' : null), name: 'ic_expand_more', alt: "expand", title: "Expand and collapse panel", size: "md" }))));
 };
 
-var css_248z$2 = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.LuiListBox {\n  padding: 0;\n  list-style: none;\n}\n.LuiListBox .LuiListBoxItem {\n  font-family: \"Open Sans\", system-ui, sans-serif;\n  font-style: normal;\n  font-weight: normal;\n  user-select: none;\n  color: #2a292c;\n  line-height: 24px;\n  outline: none;\n  padding: 0.5rem 0.75rem;\n  border: 2px solid transparent;\n}\n.LuiListBox .LuiListBoxItem:focus-visible {\n  border-color: #007198;\n}\n.LuiListBox .LuiListBoxItem.LuiListBoxItem-selected {\n  background: #e2f3f7;\n}\n.LuiListBox .LuiListBoxItem:hover, .LuiListBox .LuiListBoxItem.LuiListBoxItem-selected:hover {\n  background: #d6eef4;\n}\n.LuiListBox .LuiListBoxItem.LuiListBoxItem-disabled {\n  background: #eaeaea;\n}\n.LuiListBox .LuiListBox-emptyIndicator, .LuiListBox .LuiListBox-loadingIndicator {\n  padding: 0.5rem 0.75rem;\n}";
+var css_248z$2 = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.LuiListBox {\n  padding: 0;\n  list-style: none;\n}\n.LuiListBox .LuiListBoxItem {\n  font-family: \"Open Sans\", system-ui, sans-serif;\n  font-style: normal;\n  font-weight: normal;\n  user-select: none;\n  color: #2a292c;\n  line-height: 24px;\n  outline: none;\n  padding: 0.5rem 0.75rem;\n  border: 2px solid transparent;\n}\n.LuiListBox .LuiListBoxItem:focus-visible {\n  border-color: #007198;\n}\n.LuiListBox .LuiListBoxItem.LuiListBoxItem-selected {\n  background: #e2f3f7;\n}\n.LuiListBox .LuiListBoxItem:hover, .LuiListBox .LuiListBoxItem.LuiListBoxItem-selected:hover {\n  background: #d6eef4;\n}\n.LuiListBox .LuiListBoxItem.LuiListBoxItem-disabled {\n  background: #eaeaea;\n}\n.LuiListBox .LuiListBox-emptyIndicator, .LuiListBox .LuiListBox-loadingIndicator {\n  padding: 0.5rem 0.75rem;\n}\n.LuiListBox .LuiListBoxGroup .LuiListBoxGroup-heading {\n  font-family: \"Open Sans\", system-ui, sans-serif;\n  font-style: normal;\n  font-weight: normal;\n  font-size: 14px;\n  user-select: none;\n  color: #6b6966;\n  line-height: 16px;\n  padding: 0.5rem 0.5rem;\n}";
 styleInject(css_248z$2);
 
 function $c1d7fb2ec91bae71$var$Item(props) {
@@ -40415,6 +40415,42 @@ let $c1d7fb2ec91bae71$export$6d08773d2e66f8f2 = $c1d7fb2ec91bae71$var$Item;
 
 
 
+function $9fc4852771d079eb$var$Section(props) {
+    return null;
+}
+$9fc4852771d079eb$var$Section.getCollectionNode = function* getCollectionNode(props) {
+    let { children: children , title: title , items: items1  } = props;
+    yield {
+        type: 'section',
+        hasChildNodes: true,
+        rendered: title,
+        'aria-label': props['aria-label'],
+        *childNodes () {
+            if (typeof children === 'function') {
+                if (!items1) throw new Error('props.children was a function but props.items is missing');
+                for (let item of items1)yield {
+                    type: 'item',
+                    value: item,
+                    renderer: children
+                };
+            } else {
+                let items = [];
+                React__default.Children.forEach(children, (child)=>{
+                    items.push({
+                        type: 'item',
+                        element: child
+                    });
+                });
+                yield* items;
+            }
+        }
+    };
+};
+// We don't want getCollectionNode to show up in the type definition
+let $9fc4852771d079eb$export$6e2c8f0811a474ce = $9fc4852771d079eb$var$Section;
+
+
+
 class $eb2240fc39a57fa5$export$bf788dd355e3a401 {
     build(props, context) {
         this.context = context;
@@ -40620,38 +40656,68 @@ function $453cc9f0df89c0a5$export$77d5aafae4e095b2(collection) {
     return count;
 }
 
-function mapToAriaListBoxProps({ selectionMode, selectionBehavior, items = [], value, onChange, ariaProps, getKey = (item) => {
-    if (!item.hasOwnProperty('key')) {
-        throw Error('Could not find `key` property on item, please provide a custom `getKey` function');
-    }
-    return item.key;
-}, }) {
+function useLuiListBox({ selectionMode, selectionBehavior, items = [], value, onChange, ariaProps, getGroup = defaultGroupGetter, getKey = defaultKeyGetter, }) {
+    const children = useCallback((item) => item.childNodes ? (React__default.createElement($9fc4852771d079eb$export$6e2c8f0811a474ce, { key: item.key, items: item.childNodes, title: item.textValue }, (item) => React__default.createElement($c1d7fb2ec91bae71$export$6d08773d2e66f8f2, null, String(item.key)))) : (React__default.createElement($c1d7fb2ec91bae71$export$6d08773d2e66f8f2, null, String(item.key))), []);
+    const onSelectionChange = useCallback((keys) => {
+        if (!onChange) {
+            return;
+        }
+        onChange(keys === 'all' ? items.map((item) => getKey(item)) : Array.from(keys), keys === 'all' ? items : items.filter((item) => keys.has(getKey(item))));
+    }, [items, onChange, getKey]);
+    const nodes = useMemo(() => mapItemsToNodes(items, getKey, getGroup), [
+        items,
+        getKey,
+        getGroup,
+    ]);
     return {
         ...ariaProps,
-        items: items?.map((item) => {
-            if (item.hasOwnProperty('key')) {
-                return item;
-            }
-            return { ...item, key: getKey(item) };
-        }),
+        items: nodes,
         selectionMode,
         selectionBehavior,
         selectedKeys: (Array.isArray(value) ? value : [value]).filter(Boolean),
-        children: (item) => React__default.createElement($c1d7fb2ec91bae71$export$6d08773d2e66f8f2, null, String(item.key)),
-        ...(onChange
-            ? {
-                onSelectionChange: (keys) => {
-                    const selectedItems = keys === 'all'
-                        ? items
-                        : items.filter((item) => keys.has(getKey(item)));
-                    const selectedKeys = keys === 'all'
-                        ? items.map((item) => getKey(item))
-                        : Array.from(keys);
-                    onChange(selectedKeys, selectedItems);
-                },
-            }
-            : {}),
+        children,
+        onSelectionChange,
     };
+}
+function mapItemsToNodes(items, getKey, getGroup) {
+    const rootNodes = new Map();
+    for (const item of items) {
+        const groupName = getGroup(item);
+        const key = getKey(item);
+        // Is an item without a group
+        if (!groupName) {
+            rootNodes.set(key, {
+                key,
+                textValue: String(key),
+                value: item,
+            });
+        }
+        // is an item with a group that has not been encountered yet.
+        if (groupName && !rootNodes.get(groupName)) {
+            rootNodes.set(groupName, {
+                key: groupName,
+                textValue: groupName,
+                childNodes: [],
+            });
+        }
+        if (groupName) {
+            rootNodes.get(groupName).childNodes.push({
+                key,
+                textValue: String(key),
+                value: item,
+            });
+        }
+    }
+    return Array.from(rootNodes.values());
+}
+function defaultKeyGetter(item) {
+    if (!item.hasOwnProperty('key')) {
+        throw Error('Could not find `key` property on item, please provide a custom `getKey` function');
+    }
+    return item.key;
+}
+function defaultGroupGetter(item) {
+    return item.group || null;
 }
 
 function $458b0a5536c1a7cf$export$40bfa8c7b0832715(value1, defaultValue, onChange) {
@@ -43242,20 +43308,41 @@ function $293f70390ea03370$export$497855f14858aa34(props, state, ref) {
     };
 }
 
+
+
+function $af383d3bef1cfdc9$export$c3f9f39876e4bc7(props) {
+    let { heading: heading , 'aria-label': ariaLabel  } = props;
+    let headingId = $bdb11010cef70236$export$f680877a34711e37();
+    return {
+        itemProps: {
+            role: 'presentation'
+        },
+        headingProps: heading ? {
+            // Techincally, listbox cannot contain headings according to ARIA.
+            // We hide the heading from assistive technology, and only use it
+            // as a label for the nested group.
+            id: headingId,
+            'aria-hidden': true
+        } : {
+        },
+        groupProps: {
+            role: 'group',
+            'aria-label': ariaLabel,
+            'aria-labelledby': heading ? headingId : undefined
+        }
+    };
+}
+
 function LuiListBoxItem({ node, state, renderer, }) {
     const ref = useRef(null);
     const { optionProps, isSelected, isDisabled } = $293f70390ea03370$export$497855f14858aa34({ key: node.key }, state, ref);
     const { isFocusVisible, focusProps } = $f7dceffc5ad7768b$export$4e328f61c538687f();
-    return (React__default.createElement("li", { ref: ref, ...$3ef42575df84b30b$export$9d1611c77c2fe928(optionProps, focusProps), className: clsx('LuiListBoxItem', isSelected && 'LuiListBoxItem-selected', isDisabled && 'LuiListBoxItem-disabled') }, renderer
-        ? renderer({ item: node.value, isDisabled, isSelected, isFocusVisible })
-        : node.rendered));
-}
-
-function DefaultItemRenderer({ item, }) {
-    if (!item.hasOwnProperty('label')) {
-        throw Error('Could not find `label` property on item, please provide a custom `itemRenderer`');
-    }
-    return React__default.createElement(React__default.Fragment, null, item.label);
+    return (React__default.createElement("li", { ref: ref, ...$3ef42575df84b30b$export$9d1611c77c2fe928(optionProps, focusProps), className: clsx('LuiListBoxItem', isSelected && 'LuiListBoxItem-selected', isDisabled && 'LuiListBoxItem-disabled') }, renderer({
+        item: node.value,
+        isDisabled,
+        isSelected,
+        isFocusVisible,
+    })));
 }
 
 class $e40ea825a81a3709$export$52baac22726c72bf extends Set {
@@ -43727,27 +43814,28 @@ function $e72dd72e1c76a225$export$2f645645f7bca764(props) {
     };
 }
 
-function LuiListBox({ ariaLabel, ariaLabelledBy, itemRenderer = DefaultItemRenderer, loadingIndicator = DefaultLoadingIndicator, emptyIndicator = DefaultEmptyIndicator, selectionMode = 'single', selectionBehavior = 'toggle', disabled = false, items, value, onChange = () => {
-    /* noop */
-}, getKey, ariaProps, className, ...ulProps }) {
-    const listProps = useMemo(() => mapToAriaListBoxProps({
+function LuiListBoxGroup({ group, state, headingRenderer, itemRenderer, }) {
+    let { itemProps, headingProps, groupProps } = $af383d3bef1cfdc9$export$c3f9f39876e4bc7({
+        heading: group.textValue,
+        'aria-label': group.textValue,
+    });
+    return (React__default.createElement("li", { className: "LuiListBoxGroup", ...itemProps },
+        React__default.createElement("span", { className: "LuiListBoxGroup-heading", ...headingProps }, headingRenderer({ text: group.textValue })),
+        React__default.createElement("ul", { className: "LuiListBoxGroup-items", ...groupProps }, (group.childNodes || []).map((node) => (React__default.createElement(LuiListBoxItem, { key: node.key, node: node, state: state, renderer: itemRenderer }))))));
+}
+
+function LuiListBox({ ariaLabel, ariaLabelledBy, itemRenderer = DefaultItemRenderer, groupHeadingRenderer = DefaultGroupHeadingRenderer, loadingIndicator = DefaultLoadingIndicator, emptyIndicator = DefaultEmptyIndicator, selectionMode = 'single', selectionBehavior = 'toggle', disabled = false, items, value, onChange, getKey, getGroup, ariaProps, className, ...ulProps }) {
+    const listProps = useLuiListBox({
         selectionMode,
         selectionBehavior,
         items,
         value,
         onChange,
         getKey,
+        getGroup,
         ariaProps,
         disabled,
-    }), [
-        selectionMode,
-        selectionBehavior,
-        items,
-        value,
-        onChange,
-        getKey,
-        ariaProps,
-    ]);
+    });
     const ariaListBoxProps = useMemo(() => ({
         'aria-label': ariaLabel,
         'aria-labelledby': ariaLabelledBy,
@@ -43759,7 +43847,16 @@ function LuiListBox({ ariaLabel, ariaLabelledBy, itemRenderer = DefaultItemRende
     return (React__default.createElement("ul", { ...ulProps, ...listBoxProps, ref: ref, className: clsx('LuiListBox', className) },
         !items && loadingIndicator(),
         items?.length === 0 && emptyIndicator(),
-        [...state.collection].map((node) => (React__default.createElement(LuiListBoxItem, { key: node.key, node: node, state: state, renderer: itemRenderer })))));
+        [...state.collection].map((node) => node.type === 'section' ? (React__default.createElement(LuiListBoxGroup, { key: node.key, group: node.value, state: state, headingRenderer: groupHeadingRenderer, itemRenderer: itemRenderer })) : (React__default.createElement(LuiListBoxItem, { key: node.key, node: node.value, state: state, renderer: itemRenderer })))));
+}
+function DefaultItemRenderer({ item, }) {
+    if (!item.hasOwnProperty('label')) {
+        throw Error('Could not find `label` property on item, please provide a custom `itemRenderer`');
+    }
+    return React__default.createElement(React__default.Fragment, null, item.label);
+}
+function DefaultGroupHeadingRenderer({ text, }) {
+    return text;
 }
 function DefaultLoadingIndicator() {
     return (React__default.createElement(React__default.Fragment, null,