@linzjs/lui 17.11.1 → 17.12.0

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+# [17.12.0](https://github.com/linz/lui/compare/v17.11.3...v17.12.0) (2022-08-28)
+
+
+### Features
+
+* **LuiListBox:** Adding support for groups ([#739](https://github.com/linz/lui/issues/739)) ([797c421](https://github.com/linz/lui/commit/797c42117e615aee47b2ac33aad50ef6a1957d5d))
+
+## [17.11.3](https://github.com/linz/lui/compare/v17.11.2...v17.11.3) (2022-08-24)
+
+
+### Bug Fixes
+
+* added warning to text input and fixed msg alignment with icon ([#738](https://github.com/linz/lui/issues/738)) ([45b6e87](https://github.com/linz/lui/commit/45b6e8755fbf0663478b7cda81d55b429d35f744))
+
+## [17.11.2](https://github.com/linz/lui/compare/v17.11.1...v17.11.2) (2022-08-23)
+
+
+### Bug Fixes
+
+* changed margins on banner messages stacked together ([#737](https://github.com/linz/lui/issues/737)) ([59fa68b](https://github.com/linz/lui/commit/59fa68ba22762a96ccd6bde2a1303fd8b4e3275b))
+
 ## [17.11.1](https://github.com/linz/lui/compare/v17.11.0...v17.11.1) (2022-08-22)
 
 

package/dist/components/LuiFormElements/LuiTextInput/LuiTextInput.d.ts

@@ -3,6 +3,7 @@ export interface LuiTextInputProps {
     onChange?: ChangeEventHandler<HTMLInputElement>;
     inputProps?: InputHTMLAttributes<HTMLInputElement>;
     error?: string;
+    warning?: string;
     hideLabel?: boolean;
     label: JSX.Element | string;
     /**

package/dist/components/LuiListBox/LuiListBox.d.ts

@@ -2,12 +2,27 @@ import './LuiListBox.scss';
 import { HTMLAttributes, Key, ReactNode } from 'react';
 import { SelectionBehavior, SelectionMode } from '@react-types/shared';
 import { AriaListBoxOptions } from '@react-aria/listbox';
-export declare type ItemWithKey<T> = T & {
+export declare type KeyGetter<T> = (item: T) => Key;
+export declare type GroupGetter<T> = (item: T) => string | null;
+export interface ILuiListItemNode<T> {
     key: Key;
-};
+    textValue: string;
+    childNodes?: ILuiListItemNode<T>[];
+    value?: T;
+}
 export interface ILuiListBoxItem extends Object {
     key: Key;
     label: ReactNode;
+    group?: string;
+}
+export interface IItemRendererProps<T> {
+    item: T;
+    isSelected: boolean;
+    isDisabled: boolean;
+    isFocusVisible: boolean;
+}
+export interface IGroupHeadingRendererProps {
+    text: string;
 }
 export interface ILuiListBoxProps<T = ILuiListBoxItem> extends Omit<HTMLAttributes<HTMLUListElement>, 'onChange'> {
     ariaLabel?: string;
@@ -16,18 +31,14 @@ export interface ILuiListBoxProps<T = ILuiListBoxItem> extends Omit<HTMLAttribut
     value?: Key | Key[];
     disabled?: boolean;
     onChange?: (keys: Key[], items: T[]) => void;
-    ariaProps?: Omit<AriaListBoxOptions<ItemWithKey<T>>, 'children' | 'selectedKeys' | 'onSelectionChange' | 'selectionMode'>;
+    ariaProps?: Omit<AriaListBoxOptions<ILuiListItemNode<T>>, 'children' | 'selectedKeys' | 'onSelectionChange' | 'selectionMode'>;
     selectionMode?: SelectionMode;
     selectionBehavior?: SelectionBehavior;
     itemRenderer?: (props: IItemRendererProps<T>) => ReactNode;
-    getKey?: (item: T) => Key;
+    groupHeadingRenderer?: (props: IGroupHeadingRendererProps) => ReactNode;
+    getKey?: KeyGetter<T>;
+    getGroup?: GroupGetter<T>;
     loadingIndicator?: () => ReactNode;
     emptyIndicator?: () => ReactNode;
 }
-export interface IItemRendererProps<T> {
-    item: T;
-    isSelected: boolean;
-    isDisabled: boolean;
-    isFocusVisible: boolean;
-}
-export declare function LuiListBox<T extends object = ILuiListBoxItem>({ ariaLabel, ariaLabelledBy, itemRenderer, loadingIndicator, emptyIndicator, selectionMode, selectionBehavior, disabled, items, value, onChange, getKey, ariaProps, className, ...ulProps }: ILuiListBoxProps<T>): JSX.Element;
+export declare function LuiListBox<T extends object = ILuiListBoxItem>({ ariaLabel, ariaLabelledBy, itemRenderer, groupHeadingRenderer, loadingIndicator, emptyIndicator, selectionMode, selectionBehavior, disabled, items, value, onChange, getKey, getGroup, ariaProps, className, ...ulProps }: ILuiListBoxProps<T>): JSX.Element;

package/dist/components/LuiListBox/LuiListBoxGroup.d.ts

@@ -0,0 +1,10 @@
+import { ListState } from '@react-stately/list';
+import { ReactNode } from 'react';
+import { IGroupHeadingRendererProps, IItemRendererProps, ILuiListItemNode } from './LuiListBox';
+export interface ILuiListBoxSectionProps<T> {
+    group: ILuiListItemNode<T>;
+    state: ListState<ILuiListItemNode<T>>;
+    headingRenderer: (props: IGroupHeadingRendererProps) => ReactNode;
+    itemRenderer: (item: IItemRendererProps<T>) => ReactNode;
+}
+export declare function LuiListBoxGroup<T>({ group, state, headingRenderer, itemRenderer, }: ILuiListBoxSectionProps<T>): JSX.Element;

package/dist/components/LuiListBox/LuiListBoxItem.d.ts

@@ -1,10 +1,9 @@
-import { Node } from '@react-types/shared';
 import { ReactNode } from 'react';
-import { IItemRendererProps } from './LuiListBox';
+import { IItemRendererProps, ILuiListItemNode } from './LuiListBox';
 import { ListState } from '@react-stately/list';
 export interface ILuiListBoxItemProps<T> {
-    node: Node<T>;
-    state: ListState<T>;
-    renderer?: (item: IItemRendererProps<T>) => ReactNode;
+    node: ILuiListItemNode<T>;
+    state: ListState<ILuiListItemNode<T>>;
+    renderer: (item: IItemRendererProps<T>) => ReactNode;
 }
 export default function LuiListBoxItem<T>({ node, state, renderer, }: ILuiListBoxItemProps<T>): JSX.Element;

package/dist/components/LuiListBox/useLuiListBox.d.ts

@@ -0,0 +1,3 @@
+import { ListProps } from '@react-stately/list';
+import { ILuiListBoxProps, ILuiListItemNode } from './LuiListBox';
+export declare function useLuiListBox<T extends object>({ selectionMode, selectionBehavior, items, value, onChange, ariaProps, getGroup, getKey, }: ILuiListBoxProps<T>): ListProps<ILuiListItemNode<T>>;

package/dist/index.js

@@ -873,7 +873,7 @@ function useGenerateOrDefaultId(idFromProps) {
 }
 const LuiTextInput = (props) => {
     const id = useGenerateOrDefaultId(props.inputProps?.id);
-    return (React__default["default"].createElement("div", { className: clsx('LuiTextInput', props.error && 'hasError', props.className) },
+    return (React__default["default"].createElement("div", { className: clsx('LuiTextInput', props.error && 'hasError', props.warning && 'hasWarning', props.className) },
         React__default["default"].createElement("label", { className: 'LuiTextInput-label', htmlFor: id },
             props.mandatory && React__default["default"].createElement("span", { className: "LuiTextInput-mandatory" }, "*"),
             React__default["default"].createElement("span", { className: 'LuiTextInput-label-text ' +
@@ -884,7 +884,10 @@ const LuiTextInput = (props) => {
                 props.icon),
             props.error && (React__default["default"].createElement("span", { className: "LuiTextInput-error" },
                 React__default["default"].createElement(LuiIcon, { alt: "error", name: "ic_error", className: "LuiTextInput-error-icon", size: "sm", status: "error" }),
-                props.error)))));
+                props.error)),
+            props.warning && (React__default["default"].createElement("span", { className: "LuiTextInput-warning" },
+                React__default["default"].createElement(LuiIcon, { alt: "warning", name: "ic_warning", className: "LuiTextInput-warning-icon", size: "sm", status: "warning" }),
+                props.warning)))));
 };
 
 const LuiCheckboxInput = (props) => {
@@ -40393,7 +40396,7 @@ const LuiAccordicardStatic = (props) => {
             React__default["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) {
@@ -40441,6 +40444,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["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;
@@ -40646,38 +40685,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 = React.useCallback((item) => item.childNodes ? (React__default["default"].createElement($9fc4852771d079eb$export$6e2c8f0811a474ce, { key: item.key, items: item.childNodes, title: item.textValue }, (item) => React__default["default"].createElement($c1d7fb2ec91bae71$export$6d08773d2e66f8f2, null, String(item.key)))) : (React__default["default"].createElement($c1d7fb2ec91bae71$export$6d08773d2e66f8f2, null, String(item.key))), []);
+    const onSelectionChange = React.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 = React.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["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) {
@@ -43268,20 +43337,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 = React.useRef(null);
     const { optionProps, isSelected, isDisabled } = $293f70390ea03370$export$497855f14858aa34({ key: node.key }, state, ref);
     const { isFocusVisible, focusProps } = $f7dceffc5ad7768b$export$4e328f61c538687f();
-    return (React__default["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["default"].createElement(React__default["default"].Fragment, null, item.label);
+    return (React__default["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 {
@@ -43753,27 +43843,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 = React.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["default"].createElement("li", { className: "LuiListBoxGroup", ...itemProps },
+        React__default["default"].createElement("span", { className: "LuiListBoxGroup-heading", ...headingProps }, headingRenderer({ text: group.textValue })),
+        React__default["default"].createElement("ul", { className: "LuiListBoxGroup-items", ...groupProps }, (group.childNodes || []).map((node) => (React__default["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 = React.useMemo(() => ({
         'aria-label': ariaLabel,
         'aria-labelledby': ariaLabelledBy,
@@ -43785,7 +43876,16 @@ function LuiListBox({ ariaLabel, ariaLabelledBy, itemRenderer = DefaultItemRende
     return (React__default["default"].createElement("ul", { ...ulProps, ...listBoxProps, ref: ref, className: clsx('LuiListBox', className) },
         !items && loadingIndicator(),
         items?.length === 0 && emptyIndicator(),
-        [...state.collection].map((node) => (React__default["default"].createElement(LuiListBoxItem, { key: node.key, node: node, state: state, renderer: itemRenderer })))));
+        [...state.collection].map((node) => node.type === 'section' ? (React__default["default"].createElement(LuiListBoxGroup, { key: node.key, group: node.value, state: state, headingRenderer: groupHeadingRenderer, itemRenderer: itemRenderer })) : (React__default["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["default"].createElement(React__default["default"].Fragment, null, item.label);
+}
+function DefaultGroupHeadingRenderer({ text, }) {
+    return text;
 }
 function DefaultLoadingIndicator() {
     return (React__default["default"].createElement(React__default["default"].Fragment, null,