@itwin/core-react 3.7.2 → 3.7.4

package/lib/esm/core-react/listbox/Listbox.js

@@ -1,218 +1,218 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-import * as React from "react";
-import classnames from "classnames";
-import "./Listbox.scss";
-import { Guid } from "@itwin/core-bentley";
-import { SpecialKey } from "@itwin/appui-abstract";
-/**
- * Context set up by listbox for use by `ListboxItems` .
- * @alpha
- */
-// istanbul ignore next
-export const ListboxContext = React.createContext({ onListboxValueChange: (_newValue) => { } }); // eslint-disable-line @typescript-eslint/naming-convention
-function makeId(...args) {
-    return args.filter((val) => val != null).join("--");
-}
-function getOptionValueArray(childNodes) {
-    return React.Children.toArray(childNodes).filter((node) => React.isValidElement(node) && node.props.value).map((optionNode) => optionNode.props);
-}
-function processKeyboardNavigation(optionValues, itemIndex, key) {
-    let keyProcessed = false;
-    let newIndex = itemIndex >= 0 ? itemIndex : 0;
-    // Note: In aria example Page Up/Down just moves up or down by one item. See https://www.w3.org/TR/wai-aria-practices-1.1/examples/listbox/js/listbox.js
-    if (key === SpecialKey.ArrowDown || key === SpecialKey.PageDown) {
-        for (let i = itemIndex + 1; i < optionValues.length; i++) {
-            if (!optionValues[i].disabled) {
-                newIndex = i;
-                break;
-            }
-        }
-        keyProcessed = true;
-    }
-    else if (key === SpecialKey.ArrowUp || key === SpecialKey.PageUp) {
-        for (let i = itemIndex - 1; i >= 0; i--) {
-            if (!optionValues[i].disabled) {
-                newIndex = i;
-                break;
-            }
-        }
-        keyProcessed = true;
-    }
-    else if (key === SpecialKey.Home) {
-        for (let i = 0; i < optionValues.length; i++) {
-            if (!optionValues[i].disabled) {
-                newIndex = i;
-                break;
-            }
-        }
-        keyProcessed = true;
-    }
-    else if (key === SpecialKey.End) {
-        for (let i = optionValues.length - 1; i >= 0; i--) {
-            if (!optionValues[i].disabled) {
-                newIndex = i;
-                break;
-            }
-        }
-        keyProcessed = true;
-    }
-    return [newIndex, keyProcessed];
-}
-/**
- * Single select `Listbox` component
- * @alpha
- */
-export function Listbox(props) {
-    const { ariaLabel, ariaLabelledBy, id, children, selectedValue, className, onListboxValueChange, onKeyDown, ...otherProps } = props;
-    const listRef = React.useRef(null);
-    const [listId] = React.useState(() => { return id !== null && id !== void 0 ? id : Guid.createValue(); });
-    const optionValues = React.useMemo(() => getOptionValueArray(children), [children]);
-    const classes = React.useMemo(() => classnames("core-listbox", className), [className]);
-    const [currentValue, setCurrentValue] = React.useState(selectedValue);
-    const [focusValue, setFocusValue] = React.useState(currentValue);
-    React.useEffect(() => {
-        setCurrentValue(selectedValue);
-        setFocusValue(selectedValue);
-    }, [selectedValue]);
-    const scrollTopRef = React.useRef(0);
-    const handleValueChange = React.useCallback((newValue, isControlOrCommandPressed) => {
-        // istanbul ignore else
-        if (newValue !== currentValue) {
-            setCurrentValue(newValue);
-            setFocusValue(newValue);
-            if (onListboxValueChange)
-                onListboxValueChange(newValue, isControlOrCommandPressed);
-        }
-    }, [setCurrentValue, currentValue, onListboxValueChange]);
-    const focusOption = React.useCallback((itemIndex) => {
-        // istanbul ignore else
-        if (itemIndex >= 0 && itemIndex < optionValues.length) {
-            const newSelection = optionValues[itemIndex];
-            const listElement = listRef.current;
-            // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
-            const optionToFocus = listElement.querySelector(`li[data-value="${newSelection.value}"]`);
-            // istanbul ignore else
-            if (optionToFocus && listElement) {
-                let newScrollTop = listElement.scrollTop;
-                // istanbul ignore next
-                if (listElement.scrollHeight > listElement.clientHeight) {
-                    const scrollBottom = listElement.clientHeight + listElement.scrollTop;
-                    const elementBottom = optionToFocus.offsetTop + optionToFocus.offsetHeight;
-                    if (elementBottom > scrollBottom) {
-                        newScrollTop = elementBottom - listElement.clientHeight;
-                    }
-                    else if (optionToFocus.offsetTop < listElement.scrollTop) {
-                        newScrollTop = optionToFocus.offsetTop;
-                    }
-                    scrollTopRef.current = newScrollTop;
-                }
-                setFocusValue(newSelection.value);
-            }
-        }
-    }, [optionValues]);
-    const handleKeyDown = React.useCallback((event) => {
-        if (optionValues.length < 1)
-            return;
-        const itemIndex = (undefined === focusValue) ? -1 : optionValues.findIndex((optionValue) => ((optionValue.value === focusValue)));
-        if (event.key === SpecialKey.Space) {
-            event.preventDefault();
-            // istanbul ignore else
-            if (focusValue)
-                handleValueChange(focusValue, event.getModifierState("Control") || event.getModifierState("Meta")); // Control or Command
-            return;
-        }
-        else {
-            const [newItemIndex, keyProcessed] = processKeyboardNavigation(optionValues, itemIndex, event.key);
-            // istanbul ignore else
-            if (keyProcessed) {
-                event.preventDefault();
-                focusOption(newItemIndex);
-                return;
-            }
-        }
-        // istanbul ignore else
-        if (onKeyDown)
-            onKeyDown(event);
-    }, [focusValue, optionValues, focusOption, onKeyDown, handleValueChange]);
-    const isInitialMount = React.useRef(true);
-    React.useEffect(() => {
-        const list = listRef.current;
-        if (isInitialMount.current) {
-            isInitialMount.current = false;
-            if (undefined !== focusValue) {
-                const itemIndex = optionValues.findIndex((optionValue) => (optionValue.value === focusValue));
-                focusOption(itemIndex);
-            }
-        }
-        else {
-            list.scrollTop = scrollTopRef.current;
-        }
-    }, [focusValue, focusOption, optionValues]);
-    // istanbul ignore next
-    const handleOnScroll = React.useCallback((_event) => {
-        if (listRef.current)
-            scrollTopRef.current = listRef.current.scrollTop;
-    }, []);
-    // istanbul ignore next
-    const handleOnFocus = React.useCallback((_event) => {
-        if (!focusValue || 0 === focusValue.length) {
-            if (currentValue) {
-                setFocusValue(currentValue);
-            }
-            else {
-                if (optionValues.length > 0)
-                    setFocusValue(optionValues[0].value);
-            }
-        }
-    }, [currentValue, focusValue, optionValues]);
-    return React.createElement("ul", { className: classes, "aria-labelledby": ariaLabel ? undefined : ariaLabelledBy, "aria-label": ariaLabel, 
-        // An element that contains or owns all the listbox options has role
-        // listbox.
-        // https://www.w3.org/TR/wai-aria-practices-1.2/#Listbox
-        role: "listbox", 
-        // https://www.w3.org/TR/wai-aria-practices-1.2/examples/listbox/listbox-collapsible.html
-        tabIndex: 0, "aria-activedescendant": makeId(currentValue, listId), ...otherProps, ref: listRef, id: listId, onKeyDown: handleKeyDown, onScroll: handleOnScroll, "data-value": currentValue, "data-focusvalue": focusValue, onFocus: handleOnFocus },
-        React.createElement(ListboxContext.Provider, { value: {
-                listboxValue: currentValue,
-                focusValue,
-                listboxId: listId,
-                onListboxValueChange: handleValueChange,
-                listboxRef: listRef,
-            } }, children));
-}
-/**
- * `ListboxItem` component.
- * @alpha
- */
-export function ListboxItem(props) {
-    const { children, value, className, disabled, ...otherProps } = props;
-    const { listboxValue, focusValue, listboxId, onListboxValueChange, } = React.useContext(ListboxContext);
-    const hasFocus = focusValue === value;
-    const classes = React.useMemo(() => classnames("core-listbox-item", hasFocus && "focused", className), [className, hasFocus]);
-    const itemRef = React.useRef(null);
-    const isSelected = listboxValue === value;
-    const handleClick = React.useCallback((event) => {
-        var _a, _b;
-        event.preventDefault();
-        // istanbul ignore next
-        const selectedValue = (_b = (_a = event.currentTarget) === null || _a === void 0 ? void 0 : _a.dataset) === null || _b === void 0 ? void 0 : _b.value;
-        // istanbul ignore else
-        if (undefined !== selectedValue) {
-            onListboxValueChange(selectedValue, event.ctrlKey);
-        }
-    }, [onListboxValueChange]);
-    const getItemId = React.useCallback(() => {
-        return makeId(value, listboxId);
-    }, [listboxId, value]);
-    return (
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-    React.createElement("li", { "aria-selected": isSelected, "aria-disabled": disabled || undefined, 
-        // Each option in the listbox has role `option` and is a DOM descendant
-        // of the element with role `listbox`.
-        // https://www.w3.org/TR/wai-aria-practices-1.2/#Listbox
-        role: "option", className: classes, ...otherProps, ref: itemRef, id: getItemId(), "data-value": value, onClick: handleClick }, children));
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import * as React from "react";
+import classnames from "classnames";
+import "./Listbox.scss";
+import { Guid } from "@itwin/core-bentley";
+import { SpecialKey } from "@itwin/appui-abstract";
+/**
+ * Context set up by listbox for use by `ListboxItems` .
+ * @alpha
+ */
+// istanbul ignore next
+export const ListboxContext = React.createContext({ onListboxValueChange: (_newValue) => { } }); // eslint-disable-line @typescript-eslint/naming-convention
+function makeId(...args) {
+    return args.filter((val) => val != null).join("--");
+}
+function getOptionValueArray(childNodes) {
+    return React.Children.toArray(childNodes).filter((node) => React.isValidElement(node) && node.props.value).map((optionNode) => optionNode.props);
+}
+function processKeyboardNavigation(optionValues, itemIndex, key) {
+    let keyProcessed = false;
+    let newIndex = itemIndex >= 0 ? itemIndex : 0;
+    // Note: In aria example Page Up/Down just moves up or down by one item. See https://www.w3.org/TR/wai-aria-practices-1.1/examples/listbox/js/listbox.js
+    if (key === SpecialKey.ArrowDown || key === SpecialKey.PageDown) {
+        for (let i = itemIndex + 1; i < optionValues.length; i++) {
+            if (!optionValues[i].disabled) {
+                newIndex = i;
+                break;
+            }
+        }
+        keyProcessed = true;
+    }
+    else if (key === SpecialKey.ArrowUp || key === SpecialKey.PageUp) {
+        for (let i = itemIndex - 1; i >= 0; i--) {
+            if (!optionValues[i].disabled) {
+                newIndex = i;
+                break;
+            }
+        }
+        keyProcessed = true;
+    }
+    else if (key === SpecialKey.Home) {
+        for (let i = 0; i < optionValues.length; i++) {
+            if (!optionValues[i].disabled) {
+                newIndex = i;
+                break;
+            }
+        }
+        keyProcessed = true;
+    }
+    else if (key === SpecialKey.End) {
+        for (let i = optionValues.length - 1; i >= 0; i--) {
+            if (!optionValues[i].disabled) {
+                newIndex = i;
+                break;
+            }
+        }
+        keyProcessed = true;
+    }
+    return [newIndex, keyProcessed];
+}
+/**
+ * Single select `Listbox` component
+ * @alpha
+ */
+export function Listbox(props) {
+    const { ariaLabel, ariaLabelledBy, id, children, selectedValue, className, onListboxValueChange, onKeyDown, ...otherProps } = props;
+    const listRef = React.useRef(null);
+    const [listId] = React.useState(() => { return id !== null && id !== void 0 ? id : Guid.createValue(); });
+    const optionValues = React.useMemo(() => getOptionValueArray(children), [children]);
+    const classes = React.useMemo(() => classnames("core-listbox", className), [className]);
+    const [currentValue, setCurrentValue] = React.useState(selectedValue);
+    const [focusValue, setFocusValue] = React.useState(currentValue);
+    React.useEffect(() => {
+        setCurrentValue(selectedValue);
+        setFocusValue(selectedValue);
+    }, [selectedValue]);
+    const scrollTopRef = React.useRef(0);
+    const handleValueChange = React.useCallback((newValue, isControlOrCommandPressed) => {
+        // istanbul ignore else
+        if (newValue !== currentValue) {
+            setCurrentValue(newValue);
+            setFocusValue(newValue);
+            if (onListboxValueChange)
+                onListboxValueChange(newValue, isControlOrCommandPressed);
+        }
+    }, [setCurrentValue, currentValue, onListboxValueChange]);
+    const focusOption = React.useCallback((itemIndex) => {
+        // istanbul ignore else
+        if (itemIndex >= 0 && itemIndex < optionValues.length) {
+            const newSelection = optionValues[itemIndex];
+            const listElement = listRef.current;
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+            const optionToFocus = listElement.querySelector(`li[data-value="${newSelection.value}"]`);
+            // istanbul ignore else
+            if (optionToFocus && listElement) {
+                let newScrollTop = listElement.scrollTop;
+                // istanbul ignore next
+                if (listElement.scrollHeight > listElement.clientHeight) {
+                    const scrollBottom = listElement.clientHeight + listElement.scrollTop;
+                    const elementBottom = optionToFocus.offsetTop + optionToFocus.offsetHeight;
+                    if (elementBottom > scrollBottom) {
+                        newScrollTop = elementBottom - listElement.clientHeight;
+                    }
+                    else if (optionToFocus.offsetTop < listElement.scrollTop) {
+                        newScrollTop = optionToFocus.offsetTop;
+                    }
+                    scrollTopRef.current = newScrollTop;
+                }
+                setFocusValue(newSelection.value);
+            }
+        }
+    }, [optionValues]);
+    const handleKeyDown = React.useCallback((event) => {
+        if (optionValues.length < 1)
+            return;
+        const itemIndex = (undefined === focusValue) ? -1 : optionValues.findIndex((optionValue) => ((optionValue.value === focusValue)));
+        if (event.key === SpecialKey.Space) {
+            event.preventDefault();
+            // istanbul ignore else
+            if (focusValue)
+                handleValueChange(focusValue, event.getModifierState("Control") || event.getModifierState("Meta")); // Control or Command
+            return;
+        }
+        else {
+            const [newItemIndex, keyProcessed] = processKeyboardNavigation(optionValues, itemIndex, event.key);
+            // istanbul ignore else
+            if (keyProcessed) {
+                event.preventDefault();
+                focusOption(newItemIndex);
+                return;
+            }
+        }
+        // istanbul ignore else
+        if (onKeyDown)
+            onKeyDown(event);
+    }, [focusValue, optionValues, focusOption, onKeyDown, handleValueChange]);
+    const isInitialMount = React.useRef(true);
+    React.useEffect(() => {
+        const list = listRef.current;
+        if (isInitialMount.current) {
+            isInitialMount.current = false;
+            if (undefined !== focusValue) {
+                const itemIndex = optionValues.findIndex((optionValue) => (optionValue.value === focusValue));
+                focusOption(itemIndex);
+            }
+        }
+        else {
+            list.scrollTop = scrollTopRef.current;
+        }
+    }, [focusValue, focusOption, optionValues]);
+    // istanbul ignore next
+    const handleOnScroll = React.useCallback((_event) => {
+        if (listRef.current)
+            scrollTopRef.current = listRef.current.scrollTop;
+    }, []);
+    // istanbul ignore next
+    const handleOnFocus = React.useCallback((_event) => {
+        if (!focusValue || 0 === focusValue.length) {
+            if (currentValue) {
+                setFocusValue(currentValue);
+            }
+            else {
+                if (optionValues.length > 0)
+                    setFocusValue(optionValues[0].value);
+            }
+        }
+    }, [currentValue, focusValue, optionValues]);
+    return React.createElement("ul", { className: classes, "aria-labelledby": ariaLabel ? undefined : ariaLabelledBy, "aria-label": ariaLabel, 
+        // An element that contains or owns all the listbox options has role
+        // listbox.
+        // https://www.w3.org/TR/wai-aria-practices-1.2/#Listbox
+        role: "listbox", 
+        // https://www.w3.org/TR/wai-aria-practices-1.2/examples/listbox/listbox-collapsible.html
+        tabIndex: 0, "aria-activedescendant": makeId(currentValue, listId), ...otherProps, ref: listRef, id: listId, onKeyDown: handleKeyDown, onScroll: handleOnScroll, "data-value": currentValue, "data-focusvalue": focusValue, onFocus: handleOnFocus },
+        React.createElement(ListboxContext.Provider, { value: {
+                listboxValue: currentValue,
+                focusValue,
+                listboxId: listId,
+                onListboxValueChange: handleValueChange,
+                listboxRef: listRef,
+            } }, children));
+}
+/**
+ * `ListboxItem` component.
+ * @alpha
+ */
+export function ListboxItem(props) {
+    const { children, value, className, disabled, ...otherProps } = props;
+    const { listboxValue, focusValue, listboxId, onListboxValueChange, } = React.useContext(ListboxContext);
+    const hasFocus = focusValue === value;
+    const classes = React.useMemo(() => classnames("core-listbox-item", hasFocus && "focused", className), [className, hasFocus]);
+    const itemRef = React.useRef(null);
+    const isSelected = listboxValue === value;
+    const handleClick = React.useCallback((event) => {
+        var _a, _b;
+        event.preventDefault();
+        // istanbul ignore next
+        const selectedValue = (_b = (_a = event.currentTarget) === null || _a === void 0 ? void 0 : _a.dataset) === null || _b === void 0 ? void 0 : _b.value;
+        // istanbul ignore else
+        if (undefined !== selectedValue) {
+            onListboxValueChange(selectedValue, event.ctrlKey);
+        }
+    }, [onListboxValueChange]);
+    const getItemId = React.useCallback(() => {
+        return makeId(value, listboxId);
+    }, [listboxId, value]);
+    return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+    React.createElement("li", { "aria-selected": isSelected, "aria-disabled": disabled || undefined, 
+        // Each option in the listbox has role `option` and is a DOM descendant
+        // of the element with role `listbox`.
+        // https://www.w3.org/TR/wai-aria-practices-1.2/#Listbox
+        role: "option", className: classes, ...otherProps, ref: itemRef, id: getItemId(), "data-value": value, onClick: handleClick }, children));
+}
 //# sourceMappingURL=Listbox.js.map

package/lib/esm/core-react/listbox/Listbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Listbox.js","sourceRoot":"","sources":["../../../../src/core-react/listbox/Listbox.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\nimport * as React from \"react\";\r\nimport classnames from \"classnames\";\r\n\r\nimport \"./Listbox.scss\";\r\nimport { Guid } from \"@itwin/core-bentley\";\r\nimport { SpecialKey } from \"@itwin/appui-abstract\";\r\n\r\n/** Ideas borrowed from  https://reacttraining.com/reach-ui/listbox */\r\n\r\n/**\r\n * `Listbox` value.\r\n * @alpha\r\n */\r\nexport type ListboxValue = string;\r\n\r\n/**\r\n * `Listbox` Props.\r\n * @alpha\r\n */\r\nexport interface ListboxProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement> {\r\n  id?: string;\r\n  selectedValue?: ListboxValue;\r\n  ariaLabel?: any;\r\n  ariaLabelledBy?: any;\r\n  onListboxValueChange?: ((newValue: ListboxValue, isControlOrCommandPressed?: boolean) => void);\r\n}\r\n\r\n/**\r\n * `ListboxItem` Props.\r\n * @alpha\r\n */\r\nexport interface ListboxItemProps extends React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement> {\r\n  /** The unique item's value. */\r\n  value: ListboxValue;\r\n  /** set if item is disabled. */\r\n  disabled?: boolean;\r\n}\r\n\r\n/**\r\n * `Listbox` Context.\r\n * @alpha\r\n */\r\nexport interface ListboxContextProps {\r\n  listboxId?: string;\r\n  listboxValue?: ListboxValue;\r\n  focusValue?: ListboxValue;\r\n  onListboxValueChange: ((newValue: ListboxValue, isControlOrCommandPressed?: boolean) => void);\r\n  listboxRef?: React.RefObject<HTMLUListElement>;\r\n}\r\n\r\n/**\r\n * Context set up by listbox for use by `ListboxItems` .\r\n * @alpha\r\n */\r\n// istanbul ignore next\r\nexport const ListboxContext = React.createContext<ListboxContextProps>({ onListboxValueChange: (_newValue: ListboxValue | undefined) => { } }); // eslint-disable-line @typescript-eslint/naming-convention\r\n\r\nfunction makeId(...args: Array<string | number | null | undefined>) {\r\n  return args.filter((val) => val != null).join(\"--\");\r\n}\r\n\r\nfunction getOptionValueArray(childNodes: React.ReactNode): ListboxItemProps[] {\r\n  return React.Children.toArray(childNodes).filter((node) => React.isValidElement(node) && node.props.value).map((optionNode) => ((optionNode as React.ReactElement).props as ListboxItemProps));\r\n}\r\n\r\nfunction processKeyboardNavigation(optionValues: ListboxItemProps[], itemIndex: number, key: string): [number, boolean] {\r\n  let keyProcessed = false;\r\n  let newIndex = itemIndex >= 0 ? itemIndex : 0;\r\n\r\n  // Note: In aria example Page Up/Down just moves up or down by one item. See https://www.w3.org/TR/wai-aria-practices-1.1/examples/listbox/js/listbox.js\r\n  if (key === SpecialKey.ArrowDown || key === SpecialKey.PageDown) {\r\n    for (let i = itemIndex + 1; i < optionValues.length; i++) {\r\n      if (!optionValues[i].disabled) {\r\n        newIndex = i;\r\n        break;\r\n      }\r\n    }\r\n    keyProcessed = true;\r\n  } else if (key === SpecialKey.ArrowUp || key === SpecialKey.PageUp) {\r\n    for (let i = itemIndex - 1; i >= 0; i--) {\r\n      if (!optionValues[i].disabled) {\r\n        newIndex = i;\r\n        break;\r\n      }\r\n    }\r\n    keyProcessed = true;\r\n  } else if (key === SpecialKey.Home) {\r\n    for (let i = 0; i < optionValues.length; i++) {\r\n      if (!optionValues[i].disabled) {\r\n        newIndex = i;\r\n        break;\r\n      }\r\n    }\r\n    keyProcessed = true;\r\n  } else if (key === SpecialKey.End) {\r\n    for (let i = optionValues.length - 1; i >= 0; i--) {\r\n      if (!optionValues[i].disabled) {\r\n        newIndex = i;\r\n        break;\r\n      }\r\n    }\r\n    keyProcessed = true;\r\n  }\r\n  return [newIndex, keyProcessed];\r\n}\r\n\r\n/**\r\n * Single select `Listbox` component\r\n * @alpha\r\n */\r\nexport function Listbox(props: ListboxProps) {\r\n  const { ariaLabel, ariaLabelledBy, id, children, selectedValue, className, onListboxValueChange, onKeyDown, ...otherProps } = props;\r\n  const listRef = React.useRef<HTMLUListElement>(null);\r\n  const [listId] = React.useState(() => { return id ?? Guid.createValue(); });\r\n  const optionValues = React.useMemo(() => getOptionValueArray(children), [children]);\r\n  const classes = React.useMemo(() => classnames(\"core-listbox\", className), [className]);\r\n  const [currentValue, setCurrentValue] = React.useState<ListboxValue | undefined>(selectedValue);\r\n  const [focusValue, setFocusValue] = React.useState<ListboxValue | undefined>(currentValue);\r\n\r\n  React.useEffect(() => {\r\n    setCurrentValue(selectedValue);\r\n    setFocusValue(selectedValue);\r\n  }, [selectedValue]);\r\n\r\n  const scrollTopRef = React.useRef(0);\r\n  const handleValueChange = React.useCallback((newValue: ListboxValue, isControlOrCommandPressed?: boolean) => {\r\n    // istanbul ignore else\r\n    if (newValue !== currentValue) {\r\n      setCurrentValue(newValue);\r\n      setFocusValue(newValue);\r\n      if (onListboxValueChange)\r\n        onListboxValueChange(newValue, isControlOrCommandPressed);\r\n    }\r\n  }, [setCurrentValue, currentValue, onListboxValueChange]);\r\n\r\n  const focusOption = React.useCallback((itemIndex: number) => {\r\n    // istanbul ignore else\r\n    if (itemIndex >= 0 && itemIndex < optionValues.length) {\r\n      const newSelection = optionValues[itemIndex];\r\n      const listElement = listRef.current as HTMLUListElement;\r\n      // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\r\n      const optionToFocus = listElement.querySelector(`li[data-value=\"${newSelection.value}\"]`) as HTMLLIElement | null;\r\n      // istanbul ignore else\r\n      if (optionToFocus && listElement) {\r\n        let newScrollTop = listElement.scrollTop;\r\n\r\n        // istanbul ignore next\r\n        if (listElement.scrollHeight > listElement.clientHeight) {\r\n          const scrollBottom = listElement.clientHeight + listElement.scrollTop;\r\n          const elementBottom = optionToFocus.offsetTop + optionToFocus.offsetHeight;\r\n          if (elementBottom > scrollBottom) {\r\n            newScrollTop = elementBottom - listElement.clientHeight;\r\n          } else if (optionToFocus.offsetTop < listElement.scrollTop) {\r\n            newScrollTop = optionToFocus.offsetTop;\r\n          }\r\n          scrollTopRef.current = newScrollTop;\r\n        }\r\n        setFocusValue(newSelection.value);\r\n      }\r\n    }\r\n  }, [optionValues]);\r\n\r\n  const handleKeyDown = React.useCallback((event: React.KeyboardEvent<HTMLUListElement>) => {\r\n    if (optionValues.length < 1)\r\n      return;\r\n\r\n    const itemIndex = (undefined === focusValue) ? -1 : optionValues.findIndex((optionValue) => ((optionValue.value === focusValue)));\r\n\r\n    if (event.key === SpecialKey.Space) {\r\n      event.preventDefault();\r\n      // istanbul ignore else\r\n      if (focusValue)\r\n        handleValueChange(focusValue, event.getModifierState(\"Control\") || event.getModifierState(\"Meta\"));  // Control or Command\r\n      return;\r\n    } else {\r\n      const [newItemIndex, keyProcessed] = processKeyboardNavigation(optionValues, itemIndex, event.key);\r\n      // istanbul ignore else\r\n      if (keyProcessed) {\r\n        event.preventDefault();\r\n        focusOption(newItemIndex);\r\n        return;\r\n      }\r\n    }\r\n\r\n    // istanbul ignore else\r\n    if (onKeyDown)\r\n      onKeyDown(event);\r\n  }, [focusValue, optionValues, focusOption, onKeyDown, handleValueChange]);\r\n\r\n  const isInitialMount = React.useRef(true);\r\n\r\n  React.useEffect(() => {\r\n    const list = listRef.current as HTMLUListElement;\r\n\r\n    if (isInitialMount.current) {\r\n      isInitialMount.current = false;\r\n\r\n      if (undefined !== focusValue) {\r\n        const itemIndex = optionValues.findIndex((optionValue) => (optionValue.value === focusValue));\r\n        focusOption(itemIndex);\r\n      }\r\n    } else {\r\n      list.scrollTop = scrollTopRef.current;\r\n    }\r\n  }, [focusValue, focusOption, optionValues]);\r\n\r\n  // istanbul ignore next\r\n  const handleOnScroll = React.useCallback((_event: React.UIEvent<HTMLUListElement, UIEvent>) => {\r\n    if (listRef.current)\r\n      scrollTopRef.current = listRef.current.scrollTop;\r\n  }, []);\r\n\r\n  // istanbul ignore next\r\n  const handleOnFocus = React.useCallback((_event: React.FocusEvent<HTMLUListElement>) => {\r\n    if (!focusValue || 0 === focusValue.length) {\r\n      if (currentValue) {\r\n        setFocusValue(currentValue);\r\n      } else {\r\n        if (optionValues.length > 0)\r\n          setFocusValue(optionValues[0].value);\r\n      }\r\n    }\r\n  }, [currentValue, focusValue, optionValues]);\r\n\r\n  return <ul\r\n    className={classes}\r\n    // If the listbox is not part of another widget, then it has a visible\r\n    // label referenced by `aria-labelledby` on the element with role\r\n    // `listbox`.\r\n    // https://www.w3.org/TR/wai-aria-practices-1.2/#Listbox\r\n    // If an `aria-label` is passed, we should skip `aria-labelledby` to\r\n    // avoid confusion.\r\n    aria-labelledby={ariaLabel ? undefined : ariaLabelledBy}\r\n    aria-label={ariaLabel}\r\n    // An element that contains or owns all the listbox options has role\r\n    // listbox.\r\n    // https://www.w3.org/TR/wai-aria-practices-1.2/#Listbox\r\n    role=\"listbox\"\r\n    // https://www.w3.org/TR/wai-aria-practices-1.2/examples/listbox/listbox-collapsible.html\r\n    tabIndex={0}\r\n    // https://www.w3.org/TR/wai-aria-practices-1.2/examples/listbox/listbox-scrollable.html\r\n    aria-activedescendant={makeId(currentValue, listId)}\r\n    {...otherProps}\r\n    ref={listRef}\r\n    id={listId}\r\n    onKeyDown={handleKeyDown}\r\n    onScroll={handleOnScroll}\r\n    data-value={currentValue}\r\n    data-focusvalue={focusValue}\r\n    onFocus={handleOnFocus}\r\n  >\r\n    <ListboxContext.Provider\r\n      value={{\r\n        listboxValue: currentValue,\r\n        focusValue,\r\n        listboxId: listId,\r\n        onListboxValueChange: handleValueChange,\r\n        listboxRef: listRef,\r\n      }}\r\n    >\r\n      {children}\r\n    </ListboxContext.Provider>\r\n  </ul>;\r\n}\r\n\r\n/**\r\n * `ListboxItem` component.\r\n * @alpha\r\n */\r\nexport function ListboxItem(props: ListboxItemProps) {\r\n  const {\r\n    children,\r\n    value,\r\n    className,\r\n    disabled,\r\n    ...otherProps\r\n  } = props;\r\n\r\n  const {\r\n    listboxValue,\r\n    focusValue,\r\n    listboxId,\r\n    onListboxValueChange,\r\n  } = React.useContext(ListboxContext);\r\n\r\n  const hasFocus = focusValue === value;\r\n\r\n  const classes = React.useMemo(() => classnames(\"core-listbox-item\", hasFocus && \"focused\", className), [className, hasFocus]);\r\n  const itemRef = React.useRef<HTMLLIElement>(null);\r\n  const isSelected = listboxValue === value;\r\n\r\n  const handleClick = React.useCallback((event: React.MouseEvent<HTMLLIElement, MouseEvent>) => {\r\n    event.preventDefault();\r\n    // istanbul ignore next\r\n    const selectedValue = event.currentTarget?.dataset?.value;\r\n    // istanbul ignore else\r\n    if (undefined !== selectedValue) {\r\n      onListboxValueChange(selectedValue, event.ctrlKey);\r\n    }\r\n  }, [onListboxValueChange]);\r\n\r\n  const getItemId = React.useCallback(() => {\r\n    return makeId(value, listboxId);\r\n  }, [listboxId, value]);\r\n\r\n  return (\r\n    // eslint-disable-next-line jsx-a11y/click-events-have-key-events\r\n    <li\r\n      // In a single-select listbox, the selected option has `aria-selected`\r\n      // set to `true`.\r\n      // https://www.w3.org/TR/wai-aria-practices-1.2/#Listbox\r\n      aria-selected={isSelected}\r\n      // Applicable to all host language elements regardless of whether a\r\n      // `role` is applied.\r\n      // https://www.w3.org/WAI/PF/aria/states_and_properties#global_states_header\r\n      aria-disabled={disabled || undefined}\r\n      // Each option in the listbox has role `option` and is a DOM descendant\r\n      // of the element with role `listbox`.\r\n      // https://www.w3.org/TR/wai-aria-practices-1.2/#Listbox\r\n      role=\"option\"\r\n      className={classes}\r\n      {...otherProps}\r\n      ref={itemRef}\r\n      id={getItemId()}\r\n      // used for css styling\r\n      data-value={value}\r\n      onClick={handleClick}\r\n    >\r\n      {children}\r\n    </li>\r\n  );\r\n}\r\n"]}
+{"version":3,"file":"Listbox.js","sourceRoot":"","sources":["../../../../src/core-react/listbox/Listbox.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\nimport * as React from \"react\";\nimport classnames from \"classnames\";\n\nimport \"./Listbox.scss\";\nimport { Guid } from \"@itwin/core-bentley\";\nimport { SpecialKey } from \"@itwin/appui-abstract\";\n\n/** Ideas borrowed from  https://reacttraining.com/reach-ui/listbox */\n\n/**\n * `Listbox` value.\n * @alpha\n */\nexport type ListboxValue = string;\n\n/**\n * `Listbox` Props.\n * @alpha\n */\nexport interface ListboxProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement> {\n  id?: string;\n  selectedValue?: ListboxValue;\n  ariaLabel?: any;\n  ariaLabelledBy?: any;\n  onListboxValueChange?: ((newValue: ListboxValue, isControlOrCommandPressed?: boolean) => void);\n}\n\n/**\n * `ListboxItem` Props.\n * @alpha\n */\nexport interface ListboxItemProps extends React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement> {\n  /** The unique item's value. */\n  value: ListboxValue;\n  /** set if item is disabled. */\n  disabled?: boolean;\n}\n\n/**\n * `Listbox` Context.\n * @alpha\n */\nexport interface ListboxContextProps {\n  listboxId?: string;\n  listboxValue?: ListboxValue;\n  focusValue?: ListboxValue;\n  onListboxValueChange: ((newValue: ListboxValue, isControlOrCommandPressed?: boolean) => void);\n  listboxRef?: React.RefObject<HTMLUListElement>;\n}\n\n/**\n * Context set up by listbox for use by `ListboxItems` .\n * @alpha\n */\n// istanbul ignore next\nexport const ListboxContext = React.createContext<ListboxContextProps>({ onListboxValueChange: (_newValue: ListboxValue | undefined) => { } }); // eslint-disable-line @typescript-eslint/naming-convention\n\nfunction makeId(...args: Array<string | number | null | undefined>) {\n  return args.filter((val) => val != null).join(\"--\");\n}\n\nfunction getOptionValueArray(childNodes: React.ReactNode): ListboxItemProps[] {\n  return React.Children.toArray(childNodes).filter((node) => React.isValidElement(node) && node.props.value).map((optionNode) => ((optionNode as React.ReactElement).props as ListboxItemProps));\n}\n\nfunction processKeyboardNavigation(optionValues: ListboxItemProps[], itemIndex: number, key: string): [number, boolean] {\n  let keyProcessed = false;\n  let newIndex = itemIndex >= 0 ? itemIndex : 0;\n\n  // Note: In aria example Page Up/Down just moves up or down by one item. See https://www.w3.org/TR/wai-aria-practices-1.1/examples/listbox/js/listbox.js\n  if (key === SpecialKey.ArrowDown || key === SpecialKey.PageDown) {\n    for (let i = itemIndex + 1; i < optionValues.length; i++) {\n      if (!optionValues[i].disabled) {\n        newIndex = i;\n        break;\n      }\n    }\n    keyProcessed = true;\n  } else if (key === SpecialKey.ArrowUp || key === SpecialKey.PageUp) {\n    for (let i = itemIndex - 1; i >= 0; i--) {\n      if (!optionValues[i].disabled) {\n        newIndex = i;\n        break;\n      }\n    }\n    keyProcessed = true;\n  } else if (key === SpecialKey.Home) {\n    for (let i = 0; i < optionValues.length; i++) {\n      if (!optionValues[i].disabled) {\n        newIndex = i;\n        break;\n      }\n    }\n    keyProcessed = true;\n  } else if (key === SpecialKey.End) {\n    for (let i = optionValues.length - 1; i >= 0; i--) {\n      if (!optionValues[i].disabled) {\n        newIndex = i;\n        break;\n      }\n    }\n    keyProcessed = true;\n  }\n  return [newIndex, keyProcessed];\n}\n\n/**\n * Single select `Listbox` component\n * @alpha\n */\nexport function Listbox(props: ListboxProps) {\n  const { ariaLabel, ariaLabelledBy, id, children, selectedValue, className, onListboxValueChange, onKeyDown, ...otherProps } = props;\n  const listRef = React.useRef<HTMLUListElement>(null);\n  const [listId] = React.useState(() => { return id ?? Guid.createValue(); });\n  const optionValues = React.useMemo(() => getOptionValueArray(children), [children]);\n  const classes = React.useMemo(() => classnames(\"core-listbox\", className), [className]);\n  const [currentValue, setCurrentValue] = React.useState<ListboxValue | undefined>(selectedValue);\n  const [focusValue, setFocusValue] = React.useState<ListboxValue | undefined>(currentValue);\n\n  React.useEffect(() => {\n    setCurrentValue(selectedValue);\n    setFocusValue(selectedValue);\n  }, [selectedValue]);\n\n  const scrollTopRef = React.useRef(0);\n  const handleValueChange = React.useCallback((newValue: ListboxValue, isControlOrCommandPressed?: boolean) => {\n    // istanbul ignore else\n    if (newValue !== currentValue) {\n      setCurrentValue(newValue);\n      setFocusValue(newValue);\n      if (onListboxValueChange)\n        onListboxValueChange(newValue, isControlOrCommandPressed);\n    }\n  }, [setCurrentValue, currentValue, onListboxValueChange]);\n\n  const focusOption = React.useCallback((itemIndex: number) => {\n    // istanbul ignore else\n    if (itemIndex >= 0 && itemIndex < optionValues.length) {\n      const newSelection = optionValues[itemIndex];\n      const listElement = listRef.current as HTMLUListElement;\n      // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\n      const optionToFocus = listElement.querySelector(`li[data-value=\"${newSelection.value}\"]`) as HTMLLIElement | null;\n      // istanbul ignore else\n      if (optionToFocus && listElement) {\n        let newScrollTop = listElement.scrollTop;\n\n        // istanbul ignore next\n        if (listElement.scrollHeight > listElement.clientHeight) {\n          const scrollBottom = listElement.clientHeight + listElement.scrollTop;\n          const elementBottom = optionToFocus.offsetTop + optionToFocus.offsetHeight;\n          if (elementBottom > scrollBottom) {\n            newScrollTop = elementBottom - listElement.clientHeight;\n          } else if (optionToFocus.offsetTop < listElement.scrollTop) {\n            newScrollTop = optionToFocus.offsetTop;\n          }\n          scrollTopRef.current = newScrollTop;\n        }\n        setFocusValue(newSelection.value);\n      }\n    }\n  }, [optionValues]);\n\n  const handleKeyDown = React.useCallback((event: React.KeyboardEvent<HTMLUListElement>) => {\n    if (optionValues.length < 1)\n      return;\n\n    const itemIndex = (undefined === focusValue) ? -1 : optionValues.findIndex((optionValue) => ((optionValue.value === focusValue)));\n\n    if (event.key === SpecialKey.Space) {\n      event.preventDefault();\n      // istanbul ignore else\n      if (focusValue)\n        handleValueChange(focusValue, event.getModifierState(\"Control\") || event.getModifierState(\"Meta\"));  // Control or Command\n      return;\n    } else {\n      const [newItemIndex, keyProcessed] = processKeyboardNavigation(optionValues, itemIndex, event.key);\n      // istanbul ignore else\n      if (keyProcessed) {\n        event.preventDefault();\n        focusOption(newItemIndex);\n        return;\n      }\n    }\n\n    // istanbul ignore else\n    if (onKeyDown)\n      onKeyDown(event);\n  }, [focusValue, optionValues, focusOption, onKeyDown, handleValueChange]);\n\n  const isInitialMount = React.useRef(true);\n\n  React.useEffect(() => {\n    const list = listRef.current as HTMLUListElement;\n\n    if (isInitialMount.current) {\n      isInitialMount.current = false;\n\n      if (undefined !== focusValue) {\n        const itemIndex = optionValues.findIndex((optionValue) => (optionValue.value === focusValue));\n        focusOption(itemIndex);\n      }\n    } else {\n      list.scrollTop = scrollTopRef.current;\n    }\n  }, [focusValue, focusOption, optionValues]);\n\n  // istanbul ignore next\n  const handleOnScroll = React.useCallback((_event: React.UIEvent<HTMLUListElement, UIEvent>) => {\n    if (listRef.current)\n      scrollTopRef.current = listRef.current.scrollTop;\n  }, []);\n\n  // istanbul ignore next\n  const handleOnFocus = React.useCallback((_event: React.FocusEvent<HTMLUListElement>) => {\n    if (!focusValue || 0 === focusValue.length) {\n      if (currentValue) {\n        setFocusValue(currentValue);\n      } else {\n        if (optionValues.length > 0)\n          setFocusValue(optionValues[0].value);\n      }\n    }\n  }, [currentValue, focusValue, optionValues]);\n\n  return <ul\n    className={classes}\n    // If the listbox is not part of another widget, then it has a visible\n    // label referenced by `aria-labelledby` on the element with role\n    // `listbox`.\n    // https://www.w3.org/TR/wai-aria-practices-1.2/#Listbox\n    // If an `aria-label` is passed, we should skip `aria-labelledby` to\n    // avoid confusion.\n    aria-labelledby={ariaLabel ? undefined : ariaLabelledBy}\n    aria-label={ariaLabel}\n    // An element that contains or owns all the listbox options has role\n    // listbox.\n    // https://www.w3.org/TR/wai-aria-practices-1.2/#Listbox\n    role=\"listbox\"\n    // https://www.w3.org/TR/wai-aria-practices-1.2/examples/listbox/listbox-collapsible.html\n    tabIndex={0}\n    // https://www.w3.org/TR/wai-aria-practices-1.2/examples/listbox/listbox-scrollable.html\n    aria-activedescendant={makeId(currentValue, listId)}\n    {...otherProps}\n    ref={listRef}\n    id={listId}\n    onKeyDown={handleKeyDown}\n    onScroll={handleOnScroll}\n    data-value={currentValue}\n    data-focusvalue={focusValue}\n    onFocus={handleOnFocus}\n  >\n    <ListboxContext.Provider\n      value={{\n        listboxValue: currentValue,\n        focusValue,\n        listboxId: listId,\n        onListboxValueChange: handleValueChange,\n        listboxRef: listRef,\n      }}\n    >\n      {children}\n    </ListboxContext.Provider>\n  </ul>;\n}\n\n/**\n * `ListboxItem` component.\n * @alpha\n */\nexport function ListboxItem(props: ListboxItemProps) {\n  const {\n    children,\n    value,\n    className,\n    disabled,\n    ...otherProps\n  } = props;\n\n  const {\n    listboxValue,\n    focusValue,\n    listboxId,\n    onListboxValueChange,\n  } = React.useContext(ListboxContext);\n\n  const hasFocus = focusValue === value;\n\n  const classes = React.useMemo(() => classnames(\"core-listbox-item\", hasFocus && \"focused\", className), [className, hasFocus]);\n  const itemRef = React.useRef<HTMLLIElement>(null);\n  const isSelected = listboxValue === value;\n\n  const handleClick = React.useCallback((event: React.MouseEvent<HTMLLIElement, MouseEvent>) => {\n    event.preventDefault();\n    // istanbul ignore next\n    const selectedValue = event.currentTarget?.dataset?.value;\n    // istanbul ignore else\n    if (undefined !== selectedValue) {\n      onListboxValueChange(selectedValue, event.ctrlKey);\n    }\n  }, [onListboxValueChange]);\n\n  const getItemId = React.useCallback(() => {\n    return makeId(value, listboxId);\n  }, [listboxId, value]);\n\n  return (\n    // eslint-disable-next-line jsx-a11y/click-events-have-key-events\n    <li\n      // In a single-select listbox, the selected option has `aria-selected`\n      // set to `true`.\n      // https://www.w3.org/TR/wai-aria-practices-1.2/#Listbox\n      aria-selected={isSelected}\n      // Applicable to all host language elements regardless of whether a\n      // `role` is applied.\n      // https://www.w3.org/WAI/PF/aria/states_and_properties#global_states_header\n      aria-disabled={disabled || undefined}\n      // Each option in the listbox has role `option` and is a DOM descendant\n      // of the element with role `listbox`.\n      // https://www.w3.org/TR/wai-aria-practices-1.2/#Listbox\n      role=\"option\"\n      className={classes}\n      {...otherProps}\n      ref={itemRef}\n      id={getItemId()}\n      // used for css styling\n      data-value={value}\n      onClick={handleClick}\n    >\n      {children}\n    </li>\n  );\n}\n"]}

package/lib/esm/core-react/listbox/Listbox.scss

@@ -1,54 +1,54 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "../index";
-
-$uicore-list-item-height: $uicore-baseline * 2; ///  22px; /// ~1.618;
-
-ul.core-listbox {
-  list-style: none;
-  outline: none;
-  padding: 0;
-  margin: 0;
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  overflow: auto;
-  color: $buic-foreground-body;
-  border: 1px solid $buic-foreground-disabled; // default border: disabled or muted foreground
-  position: relative; // required to properly set scrollTop position
-
-  @include uicore-touch-scrolling;
-  @include uicore-scrollbar();
-
-  &:focus {
-    border-color: $buic-foreground-focus;
-
-    li.core-listbox-item.focused {
-      background-color: $buic-row-hover;
-      border: 1px solid $buic-foreground-primary;
-    }
-  }
-
-  li.core-listbox-item {
-    display: inline-flex;
-    line-height: $uicore-list-item-height;
-    padding-left: 4px;
-
-    &[aria-selected='true'] {
-      background-color: $buic-row-selection;
-    }
-
-    &[aria-disabled="true"] {
-      pointer-events: none;
-      color: $buic-foreground-disabled;
-    }
-
-    &:hover {
-      background-color: $buic-row-hover;
-    }
-  }
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "../index";
+
+$uicore-list-item-height: $uicore-baseline * 2; ///  22px; /// ~1.618;
+
+ul.core-listbox {
+  list-style: none;
+  outline: none;
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  color: $buic-foreground-body;
+  border: 1px solid $buic-foreground-disabled; // default border: disabled or muted foreground
+  position: relative; // required to properly set scrollTop position
+
+  @include uicore-touch-scrolling;
+  @include uicore-scrollbar();
+
+  &:focus {
+    border-color: $buic-foreground-focus;
+
+    li.core-listbox-item.focused {
+      background-color: $buic-row-hover;
+      border: 1px solid $buic-foreground-primary;
+    }
+  }
+
+  li.core-listbox-item {
+    display: inline-flex;
+    line-height: $uicore-list-item-height;
+    padding-left: 4px;
+
+    &[aria-selected='true'] {
+      background-color: $buic-row-selection;
+    }
+
+    &[aria-disabled="true"] {
+      pointer-events: none;
+      color: $buic-foreground-disabled;
+    }
+
+    &:hover {
+      background-color: $buic-row-hover;
+    }
+  }
 }