@linzjs/lui 21.51.1 → 21.53.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [21.53.0](https://github.com/linz/lui/compare/v21.52.0...v21.53.0) (2024-11-04)
+
+
+### Features
+
+* Adding an imperative API to LuiListBox to allow selecting or focusing the first item ([#1169](https://github.com/linz/lui/issues/1169)) ([fd56d9c](https://github.com/linz/lui/commit/fd56d9c520e4523820bd22567a0bf8e420b3a455))
+
+# [21.52.0](https://github.com/linz/lui/compare/v21.51.1...v21.52.0) (2024-11-03)
+
+
+### Features
+
+* Adding onNavigateOutOfBounds callback to LuiListBox ([#1168](https://github.com/linz/lui/issues/1168)) ([1146b6f](https://github.com/linz/lui/commit/1146b6f719be86b206687862ca8043958e44c211))
+
 ## [21.51.1](https://github.com/linz/lui/compare/v21.51.0...v21.51.1) (2024-10-31)
 
 

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

@@ -1,6 +1,6 @@
 import './LuiListBox.scss';
 import 'react-loading-skeleton/dist/skeleton.css';
-import { HTMLAttributes, Key, ReactNode } from 'react';
+import { HTMLAttributes, Key, ReactNode, MutableRefObject } from 'react';
 import { SelectionBehavior, SelectionMode } from '@react-types/shared';
 import { AriaListBoxOptions } from '@react-aria/listbox';
 export declare type KeyGetter<T> = (item: T) => Key;
@@ -44,5 +44,15 @@ export interface ILuiListBoxProps<T = ILuiListBoxItem> extends Omit<HTMLAttribut
     getLabel?: LabelGetter<T>;
     loadingIndicator?: () => ReactNode;
     emptyIndicator?: () => ReactNode;
+    onNavigateOutOfBounds?: (bound: 'start' | 'end') => void;
 }
-export declare function LuiListBox<T extends object = ILuiListBoxItem>({ ariaLabel, ariaLabelledBy, itemRenderer, groupHeadingRenderer, loadingIndicator, emptyIndicator, selectionMode, selectionBehavior, disabled, disabledKeys, items, value, onChange, getKey, getGroup, getLabel, ariaProps, className, ...ulProps }: ILuiListBoxProps<T>): JSX.Element;
+export interface ILuiListBoxHandle {
+    focusFirstItem: () => void;
+    selectFirstItem: () => void;
+}
+declare type ForwardedRef<T> = ((instance: T | null) => void) | MutableRefObject<T | null> | null;
+export declare const LuiListBox: <T extends object = ILuiListBoxItem>(props: ILuiListBoxProps<T> & {
+    ref?: ForwardedRef<ILuiListBoxHandle> | undefined;
+}) => ReturnType<typeof LuiListBoxWithRef>;
+declare function LuiListBoxWithRef<T extends object = ILuiListBoxItem>(props: ILuiListBoxProps<T>, ref: ForwardedRef<ILuiListBoxHandle>): JSX.Element;
+export {};

package/dist/index.d.ts

@@ -59,7 +59,7 @@ export { LuiAccordicard } from './components/LuiAccordicard/LuiAccordicard';
 export { LuiAccordicardStatic } from './components/LuiAccordicardStatic/LuiAccordicardStatic';
 export { LuiAccordion } from './components/LuiAccordion/LuiAccordion';
 export * from './components/LuiMultiSwitch/LuiMultiSwitch';
-export { LuiListBox, type ILuiListBoxItem, type ILuiListBoxProps, type IItemRendererProps, } from './components/LuiListBox/LuiListBox';
+export { LuiListBox, type ILuiListBoxItem, type ILuiListBoxProps, type IItemRendererProps, type ILuiListBoxHandle, } from './components/LuiListBox/LuiListBox';
 export { RadioItemRenderer } from './components/LuiListBox/Renderers/RadioItemRenderer';
 export { CheckboxItemRenderer } from './components/LuiListBox/Renderers/CheckboxItemRenderer';
 export { LuiSideMenu, type ILuiSideMenuProps, } from './components/LuiSideMenu/LuiSideMenu';

package/dist/index.js

@@ -55177,7 +55177,7 @@ function useLuiListBox(_a) {
         if (!onChange) {
             return;
         }
-        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)); }));
+        onChange(keys === 'all' ? items.map(getKey) : 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, 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, disabledKeys: disabled ? items.map(getKey) : disabledKeys });
@@ -58330,8 +58330,9 @@ function LuiListBoxGroup(_a) {
         React__default["default"].createElement("ul", __assign({ className: "LuiListBoxGroup-items" }, groupProps), (group.childNodes || []).map(function (node) { return (React__default["default"].createElement(LuiListBoxItem, { key: node.key, node: node, state: state, renderer: itemRenderer })); }))));
 }
 
-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, _j = _a.disabledKeys, disabledKeys = _j === void 0 ? [] : _j, 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", "disabledKeys", "items", "value", "onChange", "getKey", "getGroup", "getLabel", "ariaProps", "className"]);
+var LuiListBox = React.forwardRef(LuiListBoxWithRef);
+function LuiListBoxWithRef(props, ref) {
+    var ariaLabel = props.ariaLabel, ariaLabelledBy = props.ariaLabelledBy, _a = props.itemRenderer, itemRenderer = _a === void 0 ? DefaultItemRenderer : _a, _b = props.groupHeadingRenderer, groupHeadingRenderer = _b === void 0 ? DefaultGroupHeadingRenderer : _b, _c = props.loadingIndicator, loadingIndicator = _c === void 0 ? DefaultLoadingIndicator : _c, _d = props.emptyIndicator, emptyIndicator = _d === void 0 ? DefaultEmptyIndicator : _d, _e = props.selectionMode, selectionMode = _e === void 0 ? 'single' : _e, _f = props.selectionBehavior, selectionBehavior = _f === void 0 ? 'toggle' : _f, _g = props.disabled, disabled = _g === void 0 ? false : _g, _h = props.disabledKeys, disabledKeys = _h === void 0 ? [] : _h, items = props.items, value = props.value, onChange = props.onChange, getKey = props.getKey, getGroup = props.getGroup, getLabel = props.getLabel, ariaProps = props.ariaProps, className = props.className, onNavigateOutOfBounds = props.onNavigateOutOfBounds, ulProps = __rest(props, ["ariaLabel", "ariaLabelledBy", "itemRenderer", "groupHeadingRenderer", "loadingIndicator", "emptyIndicator", "selectionMode", "selectionBehavior", "disabled", "disabledKeys", "items", "value", "onChange", "getKey", "getGroup", "getLabel", "ariaProps", "className", "onNavigateOutOfBounds"]);
     var listProps = useLuiListBox({
         selectionMode: selectionMode,
         selectionBehavior: selectionBehavior,
@@ -58346,10 +58347,38 @@ function LuiListBox(_a) {
         disabledKeys: disabledKeys
     });
     var ariaListBoxProps = React.useMemo(function () { return (__assign({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy }, listProps)); }, [listProps, ariaLabel, ariaLabelledBy]);
-    var ref = React.useRef(null);
+    var listRef = React.useRef(null);
     var state = $e72dd72e1c76a225$export$2f645645f7bca764(listProps);
-    var listBoxProps = $c132121280ec012d$export$50eacbbf140a3141(ariaListBoxProps, state, ref).listBoxProps;
-    return (React__default["default"].createElement("ul", __assign({}, ulProps, listBoxProps, { ref: ref, className: clsx('LuiListBox', className) }),
+    var listBoxProps = $c132121280ec012d$export$50eacbbf140a3141(ariaListBoxProps, state, listRef).listBoxProps;
+    var getFirstItem = function () { var _a; return (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('li[data-key]:first-of-type'); };
+    React.useImperativeHandle(ref, function () { return ({
+        focusFirstItem: function () {
+            var _a;
+            (_a = getFirstItem()) === null || _a === void 0 ? void 0 : _a.focus();
+        },
+        selectFirstItem: function () {
+            var _a;
+            (_a = getFirstItem()) === null || _a === void 0 ? void 0 : _a.click();
+        }
+    }); });
+    var onKeyDown = function (e) {
+        var _a, _b;
+        var lastFocusedKey = state.selectionManager.focusedKey;
+        (_a = listBoxProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(listBoxProps, e);
+        (_b = ulProps.onKeyDown) === null || _b === void 0 ? void 0 : _b.call(ulProps, e);
+        var currentFocusedKey = state.selectionManager.focusedKey;
+        // Events can bubble through portals, ensure we are dealing with an element in this list (not a modal or menu rendered by an item in the list)
+        if (!e.currentTarget.contains(e.target)) {
+            return;
+        }
+        if (e.key === 'ArrowUp' && lastFocusedKey === currentFocusedKey) {
+            onNavigateOutOfBounds === null || onNavigateOutOfBounds === void 0 ? void 0 : onNavigateOutOfBounds('start');
+        }
+        if (e.key === 'ArrowDown' && lastFocusedKey === currentFocusedKey) {
+            onNavigateOutOfBounds === null || onNavigateOutOfBounds === void 0 ? void 0 : onNavigateOutOfBounds('end');
+        }
+    };
+    return (React__default["default"].createElement("ul", __assign({}, ulProps, listBoxProps, { onKeyDown: onKeyDown, ref: listRef, className: clsx('LuiListBox', className) }),
         !items && loadingIndicator(),
         (items === null || items === void 0 ? void 0 : items.length) === 0 && emptyIndicator(),
         Array.from(state.collection).map(function (node) {