@linzjs/lui 17.13.2 → 17.14.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [17.14.0](https://github.com/linz/lui/compare/v17.13.3...v17.14.0) (2022-09-13)
+
+
+### Features
+
+* **LuiListBox:** Adding aria-label support to listbox items ([#756](https://github.com/linz/lui/issues/756)) ([4702258](https://github.com/linz/lui/commit/4702258110d1642b5b6db010cf355b8f44114bb1))
+
+## [17.13.3](https://github.com/linz/lui/compare/v17.13.2...v17.13.3) (2022-09-13)
+
+
+### Bug Fixes
+
+* Add child key to options of LuiRadioInput ([#753](https://github.com/linz/lui/issues/753)) ([33b5697](https://github.com/linz/lui/commit/33b5697420a53fdd8fd4da88815d5e34a7196ca7))
+
 ## [17.13.2](https://github.com/linz/lui/compare/v17.13.1...v17.13.2) (2022-09-07)
 
 

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

@@ -4,6 +4,7 @@ import { SelectionBehavior, SelectionMode } from '@react-types/shared';
 import { AriaListBoxOptions } from '@react-aria/listbox';
 export declare type KeyGetter<T> = (item: T) => Key;
 export declare type GroupGetter<T> = (item: T) => string | null;
+export declare type LabelGetter<T> = (item: T) => string;
 export interface ILuiListItemNode<T> {
     key: Key;
     textValue: string;
@@ -38,7 +39,8 @@ export interface ILuiListBoxProps<T = ILuiListBoxItem> extends Omit<HTMLAttribut
     groupHeadingRenderer?: (props: IGroupHeadingRendererProps) => ReactNode;
     getKey?: KeyGetter<T>;
     getGroup?: GroupGetter<T>;
+    getLabel?: LabelGetter<T>;
     loadingIndicator?: () => ReactNode;
     emptyIndicator?: () => ReactNode;
 }
-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;
+export declare function LuiListBox<T extends object = ILuiListBoxItem>({ ariaLabel, ariaLabelledBy, itemRenderer, groupHeadingRenderer, loadingIndicator, emptyIndicator, selectionMode, selectionBehavior, disabled, items, value, onChange, getKey, getGroup, getLabel, ariaProps, className, ...ulProps }: ILuiListBoxProps<T>): JSX.Element;

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

@@ -1,3 +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>>;
+export declare function useLuiListBox<T extends object>({ selectionMode, selectionBehavior, items, value, onChange, ariaProps, getGroup, getKey, getLabel, }: ILuiListBoxProps<T>): ListProps<ILuiListItemNode<T>>;

package/dist/components/LuiUpdateSplashModal/LuiUpdatesSplashModal.d.ts

@@ -3,6 +3,7 @@ export declare const LuiUpdatesSplashModal: React.FC<{
     bigImage: string;
     smallImage: string;
     header: string;
+    wrapperClass: string;
     onClose: () => void;
     id: string;
 }>;

package/dist/index.js

@@ -1199,12 +1199,12 @@ var LuiRadioInput = function (props) {
                     var isSelected = props.selectedValue === option;
                     var isDisabled = props.isOptionDisabled && props.isOptionDisabled(index);
                     var hasWarning = props.optionHasWarning && props.optionHasWarning(index);
-                    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+                    return (React__default["default"].createElement(React.Fragment, { key: radioId },
                         React__default["default"].createElement("label", { htmlFor: radioId, className: clsx('LuiRadioInput-label', {
                                 'LuiRadioInput-label--isDisabled': isDisabled,
                                 'LuiRadioInput-label--hasWarning': hasWarning && isSelected,
                                 'LuiRadioInput-label--isSelected': isSelected
-                            }), key: radioId },
+                            }) },
                             React__default["default"].createElement("input", __assign({ disabled: isDisabled, className: "LuiRadioInput-input", type: "radio", id: radioId, name: option, value: option, checked: isSelected, onChange: props.onChange }, props.inputProps)),
                             props.renderLabelFor ? props.renderLabelFor(option) : option),
                         hasWarning && isSelected && (React__default["default"].createElement("div", { className: "LuiRadioInput-warningOnIndividualMsg" },
@@ -28159,11 +28159,12 @@ var LuiUpdatesSplashModal = function (props) {
         Modal.setAppElement('#root');
     }
     return (React__default["default"].createElement(Modal, { key: props.id, isOpen: true, shouldCloseOnOverlayClick: true, onRequestClose: props.onClose, contentLabel: "Recent updates", className: "lui-scrim", style: { overlay: { backgroundColor: 'transparent' } } },
-        React__default["default"].createElement("div", { ref: node, className: "lui-large-feature-notification" },
-            React__default["default"].createElement("div", { className: "lui-feature-img" },
+        React__default["default"].createElement("div", { ref: node, className: clsx('lui-large-feature-notification', props.wrapperClass) },
+            React__default["default"].createElement("div", { className: "lui-feature-header" },
                 React__default["default"].createElement("h1", null, props.header),
                 React__default["default"].createElement("button", { "aria-label": "Close dialog", onClick: props.onClose },
-                    React__default["default"].createElement("i", { className: "material-icons-round" }, "close")),
+                    React__default["default"].createElement("i", { className: "material-icons-round" }, "close"))),
+            React__default["default"].createElement("div", { className: "lui-feature-img" },
                 React__default["default"].createElement("img", { className: "lui-hide-xs lui-hide-sm", alt: "What's new", src: props.bigImage }),
                 React__default["default"].createElement("img", { className: "lui-hide-md lui-hide-lg lui-hide-xl", alt: "What's new", src: props.smallImage })),
             React__default["default"].createElement("div", { className: 'lui-feature-text' }, props.children))));
@@ -40825,7 +40826,7 @@ function $453cc9f0df89c0a5$export$77d5aafae4e095b2(collection) {
 }
 
 function useLuiListBox(_a) {
-    var selectionMode = _a.selectionMode, selectionBehavior = _a.selectionBehavior, _b = _a.items, items = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, ariaProps = _a.ariaProps, _c = _a.getGroup, getGroup = _c === void 0 ? defaultGroupGetter : _c, _d = _a.getKey, getKey = _d === void 0 ? defaultKeyGetter : _d;
+    var selectionMode = _a.selectionMode, selectionBehavior = _a.selectionBehavior, _b = _a.items, items = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, ariaProps = _a.ariaProps, _c = _a.getGroup, getGroup = _c === void 0 ? defaultGroupGetter : _c, _d = _a.getKey, getKey = _d === void 0 ? defaultKeyGetter : _d, _e = _a.getLabel, getLabel = _e === void 0 ? defaultLabelGetter : _e;
     var children = React.useCallback(function (item) {
         return item.childNodes ? (React__default["default"].createElement($9fc4852771d079eb$export$6e2c8f0811a474ce, { key: item.key, items: item.childNodes, title: item.textValue }, function (item) { return React__default["default"].createElement($c1d7fb2ec91bae71$export$6d08773d2e66f8f2, null, String(item.key)); })) : (React__default["default"].createElement($c1d7fb2ec91bae71$export$6d08773d2e66f8f2, null, String(item.key)));
     }, []);
@@ -40835,26 +40836,20 @@ function useLuiListBox(_a) {
         }
         onChange(keys === 'all' ? items.map(function (item) { return getKey(item); }) : Array.from(keys), keys === 'all' ? items : items.filter(function (item) { return keys.has(getKey(item)); }));
     }, [items, onChange, getKey]);
-    var nodes = React.useMemo(function () { return mapItemsToNodes(items, getKey, getGroup); }, [
-        items,
-        getKey,
-        getGroup,
-    ]);
+    var nodes = React.useMemo(function () { return mapItemsToNodes(items, getKey, getGroup, getLabel); }, [items, getKey, getGroup, getLabel]);
     return __assign(__assign({}, ariaProps), { items: nodes, selectionMode: selectionMode, selectionBehavior: selectionBehavior, selectedKeys: (Array.isArray(value) ? value : [value]).filter(Boolean), children: children, onSelectionChange: onSelectionChange });
 }
-function mapItemsToNodes(items, getKey, getGroup) {
+function mapItemsToNodes(items, getKey, getGroup, getLabel) {
     var rootNodes = new Map();
     for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {
         var item = items_1[_i];
         var groupName = getGroup(item);
         var key = getKey(item);
+        var textValue = getLabel(item);
+        var node = { key: key, textValue: textValue, value: item };
         // Is an item without a group
         if (!groupName) {
-            rootNodes.set(key, {
-                key: key,
-                textValue: String(key),
-                value: item
-            });
+            rootNodes.set(key, node);
         }
         // is an item with a group that has not been encountered yet.
         if (groupName && !rootNodes.get(groupName)) {
@@ -40865,11 +40860,7 @@ function mapItemsToNodes(items, getKey, getGroup) {
             });
         }
         if (groupName) {
-            rootNodes.get(groupName).childNodes.push({
-                key: key,
-                textValue: String(key),
-                value: item
-            });
+            rootNodes.get(groupName).childNodes.push(node);
         }
     }
     return Array.from(rootNodes.values());
@@ -40882,6 +40873,12 @@ function defaultKeyGetter(item) {
 }
 function defaultGroupGetter(item) {
     return item.group || null;
+}
+function defaultLabelGetter(item) {
+    if (!item.hasOwnProperty('key')) {
+        throw Error('Could not find `label` property on item, please provide a custom `getLabel` function');
+    }
+    return item.label;
 }
 
 function $458b0a5536c1a7cf$export$40bfa8c7b0832715(value1, defaultValue, onChange) {
@@ -43500,7 +43497,7 @@ function $af383d3bef1cfdc9$export$c3f9f39876e4bc7(props) {
 function LuiListBoxItem(_a) {
     var node = _a.node, state = _a.state, renderer = _a.renderer;
     var ref = React.useRef(null);
-    var _b = $293f70390ea03370$export$497855f14858aa34({ key: node.key }, state, ref), optionProps = _b.optionProps, isSelected = _b.isSelected, isDisabled = _b.isDisabled;
+    var _b = $293f70390ea03370$export$497855f14858aa34({ key: node.key, 'aria-label': node.textValue }, state, ref), optionProps = _b.optionProps, isSelected = _b.isSelected, isDisabled = _b.isDisabled;
     var _c = $f7dceffc5ad7768b$export$4e328f61c538687f(), isFocusVisible = _c.isFocusVisible, focusProps = _c.focusProps;
     return (React__default["default"].createElement("li", __assign({ ref: ref }, $3ef42575df84b30b$export$9d1611c77c2fe928(optionProps, focusProps), { className: clsx('LuiListBoxItem', isSelected && 'LuiListBoxItem-selected', isDisabled && 'LuiListBoxItem-disabled') }), renderer({
         item: node.value,
@@ -43991,7 +43988,7 @@ function LuiListBoxGroup(_a) {
 }
 
 function LuiListBox(_a) {
-    var ariaLabel = _a.ariaLabel, ariaLabelledBy = _a.ariaLabelledBy, _b = _a.itemRenderer, itemRenderer = _b === void 0 ? DefaultItemRenderer : _b, _c = _a.groupHeadingRenderer, groupHeadingRenderer = _c === void 0 ? DefaultGroupHeadingRenderer : _c, _d = _a.loadingIndicator, loadingIndicator = _d === void 0 ? DefaultLoadingIndicator : _d, _e = _a.emptyIndicator, emptyIndicator = _e === void 0 ? DefaultEmptyIndicator : _e, _f = _a.selectionMode, selectionMode = _f === void 0 ? 'single' : _f, _g = _a.selectionBehavior, selectionBehavior = _g === void 0 ? 'toggle' : _g, _h = _a.disabled, disabled = _h === void 0 ? false : _h, items = _a.items, value = _a.value, onChange = _a.onChange, getKey = _a.getKey, getGroup = _a.getGroup, ariaProps = _a.ariaProps, className = _a.className, ulProps = __rest(_a, ["ariaLabel", "ariaLabelledBy", "itemRenderer", "groupHeadingRenderer", "loadingIndicator", "emptyIndicator", "selectionMode", "selectionBehavior", "disabled", "items", "value", "onChange", "getKey", "getGroup", "ariaProps", "className"]);
+    var ariaLabel = _a.ariaLabel, ariaLabelledBy = _a.ariaLabelledBy, _b = _a.itemRenderer, itemRenderer = _b === void 0 ? DefaultItemRenderer : _b, _c = _a.groupHeadingRenderer, groupHeadingRenderer = _c === void 0 ? DefaultGroupHeadingRenderer : _c, _d = _a.loadingIndicator, loadingIndicator = _d === void 0 ? DefaultLoadingIndicator : _d, _e = _a.emptyIndicator, emptyIndicator = _e === void 0 ? DefaultEmptyIndicator : _e, _f = _a.selectionMode, selectionMode = _f === void 0 ? 'single' : _f, _g = _a.selectionBehavior, selectionBehavior = _g === void 0 ? 'toggle' : _g, _h = _a.disabled, disabled = _h === void 0 ? false : _h, items = _a.items, value = _a.value, onChange = _a.onChange, getKey = _a.getKey, getGroup = _a.getGroup, getLabel = _a.getLabel, ariaProps = _a.ariaProps, className = _a.className, ulProps = __rest(_a, ["ariaLabel", "ariaLabelledBy", "itemRenderer", "groupHeadingRenderer", "loadingIndicator", "emptyIndicator", "selectionMode", "selectionBehavior", "disabled", "items", "value", "onChange", "getKey", "getGroup", "getLabel", "ariaProps", "className"]);
     var listProps = useLuiListBox({
         selectionMode: selectionMode,
         selectionBehavior: selectionBehavior,
@@ -44000,6 +43997,7 @@ function LuiListBox(_a) {
         onChange: onChange,
         getKey: getKey,
         getGroup: getGroup,
+        getLabel: getLabel,
         ariaProps: ariaProps,
         disabled: disabled
     });
@@ -44051,7 +44049,7 @@ styleInject(css_248z);
 
 function CheckboxItemRenderer(_a) {
     var item = _a.item, isSelected = _a.isSelected;
-    return (React__default["default"].createElement("div", { className: "CheckboxRenderer ".concat(isSelected ? 'LuiCheckboxInput--isChecked' : ''), style: {} },
+    return (React__default["default"].createElement("div", { className: "CheckboxRenderer ".concat(isSelected ? 'LuiCheckboxInput--isChecked' : '') },
         React__default["default"].createElement(LuiIcon, { size: "md", name: isSelected ? 'ic_check' : 'ic_zoom_out', alt: isSelected ? 'Checked' : 'Indeterminate Check', className: "LuiCheckboxInput-labelCheck ".concat(isSelected ? 'LuiCheckboxInput--isChecked' : '') }),
         item.label));
 }