@macive/ui 0.0.1 → 0.0.2

package/dist/src/components/LegacyStack/components/Item/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Item"), exports);

package/dist/src/components/LegacyStack/components/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Item"), exports);

package/dist/src/components/LegacyStack/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./LegacyStack"), exports);

package/dist/src/components/Link/Link.classnames.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const LinkClassnames = {
+    "Link": "Link-Link",
+    "monochrome": "Link-monochrome",
+    "removeUnderline": "Link-removeUnderline"
+};
+exports.default = LinkClassnames;

package/dist/src/components/Link/Link.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Link = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const banner_context_1 = require("../../utilities/banner-context");
+const css_1 = require("../../utilities/css");
+const UnstyledLink_1 = require("../UnstyledLink");
+const Link_classnames_1 = __importDefault(require("./Link.classnames"));
+function Link({ url, children, onClick, external, target, id, monochrome, removeUnderline, accessibilityLabel, dataPrimaryLink, }) {
+    return ((0, jsx_runtime_1.jsx)(banner_context_1.BannerContext.Consumer, { children: (BannerContext) => {
+            const shouldBeMonochrome = monochrome || BannerContext;
+            const className = (0, css_1.classNames)(Link_classnames_1.default.Link, shouldBeMonochrome && Link_classnames_1.default.monochrome, removeUnderline ? Link_classnames_1.default.removeUnderline : 'underline', 'hover:underline');
+            return url ? ((0, jsx_runtime_1.jsx)(UnstyledLink_1.UnstyledLink, { onClick: onClick, className: className, url: url, external: external, target: target, id: id, "aria-label": accessibilityLabel, "data-primary-link": dataPrimaryLink, children: children })) : ((0, jsx_runtime_1.jsx)("button", { type: 'button', onClick: onClick, className: className, id: id, "aria-label": accessibilityLabel, "data-primary-link": dataPrimaryLink, children: children }));
+        } }));
+}
+exports.Link = Link;

package/dist/src/components/Link/Link.styles.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const styles = {
+    Link: 'inline-flex  p-0 border-0 hover:cursor-pointer  text-skin-link',
+    monochrome: 'text-[inherit] !text-decoration-none',
+    removeUnderline: 'text-decoration-none',
+};
+exports.default = styles;

package/dist/src/components/Link/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Link"), exports);

package/dist/src/components/List/List.classnames.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const ListClassnames = {
+    "List": "List-List",
+    "typeNumber": "List-typeNumber",
+    "Item": "List-Item",
+    "List:first-child": "List-List:first-child",
+    "spacingLoose": "List-spacingLoose",
+    "Item:last-child": "List-Item:last-child"
+};
+exports.default = ListClassnames;

package/dist/src/components/List/List.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.List = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const css_1 = require("../../utilities/css");
+const components_1 = require("./components");
+const List_classnames_1 = __importDefault(require("./List.classnames"));
+const List = function List({ children, spacing = 'loose', type = 'bullet' }) {
+    const className = (0, css_1.classNames)(List_classnames_1.default.List, 
+    //@ts-expect-error index
+    spacing && List_classnames_1.default[(0, css_1.variationName)('spacing', spacing)], 
+    //@ts-expect-error index
+    type && List_classnames_1.default[(0, css_1.variationName)('type', type)]);
+    const ListElement = type === 'bullet' ? 'ul' : 'ol';
+    return (0, jsx_runtime_1.jsx)(ListElement, { className: className, children: children });
+};
+exports.List = List;
+exports.List.Item = components_1.Item;

package/dist/src/components/List/components/Item/Item.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Item = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const List_classnames_1 = __importDefault(require("../../List.classnames"));
+function Item({ children }) {
+    return (0, jsx_runtime_1.jsx)("li", { className: List_classnames_1.default.Item, children: children });
+}
+exports.Item = Item;

package/dist/src/components/List/components/Item/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Item"), exports);

package/dist/src/components/List/components/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Item"), exports);

package/dist/src/components/List/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./List"), exports);

package/dist/src/components/Listbox/Listbox.classnames.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const ListboxClassnames = {
+    "Listbox": "Listbox-Listbox"
+};
+exports.default = ListboxClassnames;

package/dist/src/components/Listbox/Listbox.js

@@ -0,0 +1,307 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Listbox = exports.AutoSelection = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const typos_1 = require("../../typos");
+const combobox_1 = require("../../utilities/combobox");
+const debounce_1 = require("../../utilities/debounce");
+const listbox_1 = require("../../utilities/listbox");
+const unique_id_1 = require("../../utilities/unique-id");
+const use_toggle_1 = require("../../utilities/use-toggle");
+const KeypressListener_1 = require("../KeypressListener");
+const shared_1 = require("../shared");
+const Text_1 = require("../Text");
+const components_1 = require("./components");
+const Listbox_classnames_1 = __importDefault(require("./Listbox.classnames"));
+var AutoSelection;
+(function (AutoSelection) {
+    /** Default active option is the first selected option. If no options are selected, defaults to first interactive option. */
+    AutoSelection["FirstSelected"] = "FIRST_SELECTED";
+    /** Default active option is always the first interactive option. */
+    AutoSelection["First"] = "FIRST";
+    /** Default to the manual selection pattern. */
+    AutoSelection["None"] = "NONE";
+})(AutoSelection = exports.AutoSelection || (exports.AutoSelection = {}));
+const OPTION_SELECTOR = '[data-listbox-option]';
+const OPTION_VALUE_ATTRIBUTE = 'data-listbox-option-value';
+const OPTION_ACTION_ATTRIBUTE = 'data-listbox-option-action';
+const OPTION_FOCUS_ATTRIBUTE = 'data-focused';
+function Listbox({ children, autoSelection = AutoSelection.FirstSelected, enableKeyboardControl, accessibilityLabel, customListId, onSelect, onActiveOptionChange, }) {
+    const [loading, setLoading] = (0, react_1.useState)();
+    const [activeOption, setActiveOption] = (0, react_1.useState)();
+    const [lazyLoading, setLazyLoading] = (0, react_1.useState)(false);
+    const [currentOptions, setCurrentOptions] = (0, react_1.useState)([]);
+    const { value: keyboardEventsEnabled, setTrue: enableKeyboardEvents, setFalse: disableKeyboardEvents, } = (0, use_toggle_1.useToggle)(Boolean(enableKeyboardControl));
+    const uniqueId = (0, unique_id_1.useUniqueId)('Listbox');
+    const listId = customListId || uniqueId;
+    const scrollableRef = (0, react_1.useRef)(null);
+    const listboxRef = (0, react_1.useRef)(null);
+    const { listboxId, textFieldLabelId, textFieldFocused, willLoadMoreOptions, setActiveOptionId, setListboxId, onOptionSelected, onKeyToBottom, } = (0, combobox_1.useComboboxListbox)();
+    const inCombobox = Boolean(setActiveOptionId);
+    (0, react_1.useEffect)(() => {
+        if (setListboxId && !listboxId) {
+            setListboxId(listId);
+        }
+    }, [setListboxId, listboxId, listId]);
+    const getNavigableOptions = (0, react_1.useCallback)(() => {
+        if (!listboxRef.current) {
+            return [];
+        }
+        //@ts-expect-error Set
+        return [...new Set(listboxRef.current.querySelectorAll(OPTION_SELECTOR))];
+    }, []);
+    const getFirstNavigableOption = (0, react_1.useCallback)((currentOptions) => {
+        const hasSelectedOptions = currentOptions.some((option) => option.getAttribute('aria-selected') === 'true');
+        let elementIndex = 0;
+        const element = currentOptions.find((option, index) => {
+            const isInteractable = option.getAttribute('aria-disabled') !== 'true';
+            let isFirstNavigableOption;
+            if (hasSelectedOptions && autoSelection === AutoSelection.FirstSelected) {
+                const isSelected = option.getAttribute('aria-selected') === 'true';
+                isFirstNavigableOption = isSelected && isInteractable;
+            }
+            else {
+                isFirstNavigableOption = isInteractable;
+            }
+            if (isFirstNavigableOption)
+                elementIndex = index;
+            return isFirstNavigableOption;
+        });
+        if (!element)
+            return;
+        return { element, index: elementIndex };
+    }, [autoSelection]);
+    const handleScrollIntoView = (0, react_1.useCallback)((option) => {
+        const { current: scrollable } = scrollableRef;
+        if (scrollable) {
+            (0, listbox_1.scrollOptionIntoView)(option.element, scrollable);
+        }
+    }, []);
+    const handleScrollIntoViewDebounced = (0, debounce_1.debounce)(handleScrollIntoView, 50);
+    const handleKeyToBottom = (0, react_1.useCallback)(() => {
+        if (onKeyToBottom) {
+            setLazyLoading(true);
+            return Promise.resolve(onKeyToBottom());
+        }
+    }, [onKeyToBottom]);
+    const handleChangeActiveOption = (0, react_1.useCallback)((nextOption) => {
+        if (!nextOption)
+            return setActiveOption(undefined);
+        activeOption === null || activeOption === void 0 ? void 0 : activeOption.element.removeAttribute(OPTION_FOCUS_ATTRIBUTE);
+        nextOption.element.setAttribute(OPTION_FOCUS_ATTRIBUTE, 'true');
+        handleScrollIntoViewDebounced(nextOption);
+        setActiveOption(nextOption);
+        setActiveOptionId === null || setActiveOptionId === void 0 ? void 0 : setActiveOptionId(nextOption.domId);
+        onActiveOptionChange === null || onActiveOptionChange === void 0 ? void 0 : onActiveOptionChange(nextOption.value, nextOption.domId);
+    }, [activeOption, setActiveOptionId, onActiveOptionChange, handleScrollIntoViewDebounced]);
+    const getFormattedOption = (0, react_1.useCallback)((element, index) => {
+        return {
+            element,
+            index,
+            domId: element.id,
+            value: element.getAttribute(OPTION_VALUE_ATTRIBUTE) || '',
+            disabled: element.getAttribute('aria-disabled') === 'true',
+            isAction: element.getAttribute(OPTION_ACTION_ATTRIBUTE) === 'true',
+        };
+    }, []);
+    const resetActiveOption = (0, react_1.useCallback)(() => {
+        let nextOption;
+        const nextOptions = getNavigableOptions();
+        const nextActiveOption = getFirstNavigableOption(nextOptions);
+        if (nextOptions.length === 0 && currentOptions.length > 0) {
+            setCurrentOptions(nextOptions);
+            handleChangeActiveOption();
+            return;
+        }
+        if (nextActiveOption) {
+            const { element, index } = nextActiveOption;
+            nextOption = getFormattedOption(element, index);
+        }
+        const optionIsAlreadyActive = activeOption !== undefined && (nextOption === null || nextOption === void 0 ? void 0 : nextOption.domId) === (activeOption === null || activeOption === void 0 ? void 0 : activeOption.domId);
+        const actionContentHasUpdated = (activeOption === null || activeOption === void 0 ? void 0 : activeOption.isAction) && (nextOption === null || nextOption === void 0 ? void 0 : nextOption.isAction) && (nextOption === null || nextOption === void 0 ? void 0 : nextOption.value) !== (activeOption === null || activeOption === void 0 ? void 0 : activeOption.value);
+        const currentValues = currentOptions.map((option) => option.getAttribute(OPTION_VALUE_ATTRIBUTE));
+        const nextValues = nextOptions.map((option) => option.getAttribute(OPTION_VALUE_ATTRIBUTE));
+        const listIsUnchanged = nextValues.length === currentValues.length &&
+            nextValues.every((value, index) => {
+                return currentValues[index] === value;
+            });
+        const listIsAppended = currentValues.length !== 0 &&
+            nextValues.length > currentValues.length &&
+            currentValues.every((value, index) => {
+                return nextValues[index] === value;
+            });
+        if (listIsUnchanged) {
+            if (optionIsAlreadyActive && actionContentHasUpdated) {
+                setCurrentOptions(nextOptions);
+                handleChangeActiveOption(nextOption);
+            }
+            return;
+        }
+        if (listIsAppended) {
+            setCurrentOptions(nextOptions);
+            return;
+        }
+        setCurrentOptions(nextOptions);
+        if (lazyLoading) {
+            setLazyLoading(false);
+            return;
+        }
+        handleChangeActiveOption(nextOption);
+    }, [
+        lazyLoading,
+        currentOptions,
+        activeOption,
+        getFirstNavigableOption,
+        getNavigableOptions,
+        getFormattedOption,
+        handleChangeActiveOption,
+    ]);
+    (0, react_1.useEffect)(() => {
+        if (autoSelection !== AutoSelection.None &&
+            !loading &&
+            children &&
+            react_1.Children.count(children) > 0) {
+            resetActiveOption();
+        }
+    }, [children, autoSelection, activeOption, loading, resetActiveOption]);
+    (0, react_1.useEffect)(() => {
+        if (listboxRef.current) {
+            scrollableRef.current = listboxRef.current.closest(shared_1.scrollable.selector);
+        }
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (enableKeyboardControl && !keyboardEventsEnabled) {
+            enableKeyboardEvents();
+        }
+    }, [enableKeyboardControl, keyboardEventsEnabled, enableKeyboardEvents]);
+    const onOptionSelect = (0, react_1.useCallback)((option) => {
+        handleChangeActiveOption(option);
+        if (onOptionSelected)
+            onOptionSelected();
+        if (onSelect)
+            onSelect(option.value);
+    }, [handleChangeActiveOption, onSelect, onOptionSelected]);
+    const getNextIndex = (0, react_1.useCallback)((currentIndex, lastIndex, direction) => {
+        let nextIndex;
+        if (direction === 'down') {
+            if (currentIndex === lastIndex) {
+                nextIndex = willLoadMoreOptions ? currentIndex + 1 : 0;
+            }
+            else {
+                nextIndex = currentIndex + 1;
+            }
+        }
+        else {
+            nextIndex = currentIndex === 0 ? lastIndex : currentIndex - 1;
+        }
+        return nextIndex;
+    }, [willLoadMoreOptions]);
+    const getNextValidOption = (0, react_1.useCallback)(async (key) => {
+        const lastIndex = currentOptions.length - 1;
+        let currentIndex = (activeOption === null || activeOption === void 0 ? void 0 : activeOption.index) || 0;
+        let nextIndex = 0;
+        let element = activeOption === null || activeOption === void 0 ? void 0 : activeOption.element;
+        let totalOptions = -1;
+        if (!activeOption && autoSelection === AutoSelection.None) {
+            const nextOptions = getNavigableOptions();
+            //@ts-expect-error unknown
+            const nextActiveOption = getFirstNavigableOption(nextOptions);
+            //@ts-expect-error unknown
+            setCurrentOptions(nextOptions);
+            return {
+                element: nextActiveOption === null || nextActiveOption === void 0 ? void 0 : nextActiveOption.element,
+                nextIndex: (nextActiveOption === null || nextActiveOption === void 0 ? void 0 : nextActiveOption.index) || 0,
+            };
+        }
+        while (totalOptions++ < lastIndex) {
+            nextIndex = getNextIndex(currentIndex, lastIndex, key);
+            element = currentOptions[nextIndex];
+            const triggerLazyLoad = nextIndex >= lastIndex;
+            const isDisabled = (element === null || element === void 0 ? void 0 : element.getAttribute('aria-disabled')) === 'true';
+            if (triggerLazyLoad && willLoadMoreOptions) {
+                await handleKeyToBottom();
+            }
+            if (isDisabled) {
+                currentIndex = nextIndex;
+                element = undefined;
+                continue;
+            }
+            break;
+        }
+        return { element, nextIndex };
+    }, [
+        autoSelection,
+        currentOptions,
+        activeOption,
+        willLoadMoreOptions,
+        getNextIndex,
+        handleKeyToBottom,
+        getFirstNavigableOption,
+        getNavigableOptions,
+    ]);
+    const handleArrow = (0, react_1.useCallback)(async (type, event) => {
+        event.preventDefault();
+        const { element, nextIndex } = await getNextValidOption(type);
+        if (!element)
+            return;
+        const nextOption = getFormattedOption(element, nextIndex);
+        handleChangeActiveOption(nextOption);
+    }, [getFormattedOption, getNextValidOption, handleChangeActiveOption]);
+    const handleDownArrow = (0, react_1.useCallback)((event) => {
+        handleArrow('down', event);
+    }, [handleArrow]);
+    const handleUpArrow = (0, react_1.useCallback)((event) => {
+        handleArrow('up', event);
+    }, [handleArrow]);
+    const handleEnter = (0, react_1.useCallback)((event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (activeOption) {
+            onOptionSelect(activeOption);
+        }
+    }, [activeOption, onOptionSelect]);
+    const handleFocus = (0, react_1.useCallback)(() => {
+        if (enableKeyboardControl)
+            return;
+        enableKeyboardEvents();
+    }, [enableKeyboardControl, enableKeyboardEvents]);
+    const handleBlur = (0, react_1.useCallback)((event) => {
+        event.stopPropagation();
+        if (keyboardEventsEnabled) {
+            const nextActiveOption = getFirstNavigableOption(currentOptions);
+            if (nextActiveOption) {
+                const { element, index } = nextActiveOption;
+                const nextOption = getFormattedOption(element, index);
+                handleChangeActiveOption(nextOption);
+            }
+        }
+        if (enableKeyboardControl)
+            return;
+        disableKeyboardEvents();
+    }, [
+        enableKeyboardControl,
+        currentOptions,
+        keyboardEventsEnabled,
+        disableKeyboardEvents,
+        getFirstNavigableOption,
+        getFormattedOption,
+        handleChangeActiveOption,
+    ]);
+    const listeners = keyboardEventsEnabled || textFieldFocused ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(KeypressListener_1.KeypressListener, { keyEvent: 'keydown', keyCode: typos_1.Key.DownArrow, handler: handleDownArrow }), (0, jsx_runtime_1.jsx)(KeypressListener_1.KeypressListener, { keyEvent: 'keydown', keyCode: typos_1.Key.UpArrow, handler: handleUpArrow }), (0, jsx_runtime_1.jsx)(KeypressListener_1.KeypressListener, { keyEvent: 'keydown', keyCode: typos_1.Key.Enter, handler: handleEnter })] })) : null;
+    const listboxContext = (0, react_1.useMemo)(() => ({
+        onOptionSelect,
+        setLoading,
+    }), [onOptionSelect]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [listeners, (0, jsx_runtime_1.jsx)(Text_1.Text, { as: 'span', visuallyHidden: true, children: (0, jsx_runtime_1.jsx)("div", { "aria-live": 'polite', children: loading ? loading : null }) }), (0, jsx_runtime_1.jsx)(listbox_1.ListboxContext.Provider, { value: listboxContext, children: (0, jsx_runtime_1.jsx)(listbox_1.WithinListboxContext.Provider, { value: true, children: children ? ((0, jsx_runtime_1.jsx)("ul", { tabIndex: 0, role: 'listbox', className: Listbox_classnames_1.default.Listbox, "aria-label": inCombobox ? undefined : accessibilityLabel, "aria-labelledby": textFieldLabelId, "aria-busy": Boolean(loading), "aria-activedescendant": activeOption && activeOption.domId, id: listId, onFocus: inCombobox ? undefined : handleFocus, onBlur: inCombobox ? undefined : handleBlur, ref: listboxRef, children: children })) : null }) })] }));
+}
+exports.Listbox = Listbox;
+Listbox.Option = components_1.Option;
+Listbox.TextOption = components_1.TextOption;
+Listbox.Loading = components_1.Loading;
+Listbox.Section = components_1.Section;
+Listbox.Header = components_1.Header;
+Listbox.Action = components_1.Action;

package/dist/src/components/Listbox/components/Action/Action.classnames.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const ActionClassnames = {
+    "Action": "Action-Action",
+    "ActionDivider": "Action-ActionDivider",
+    "Icon": "Action-Icon"
+};
+exports.default = ActionClassnames;

package/dist/src/components/Listbox/components/Action/Action.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Action = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const css_1 = require("../../../../utilities/css");
+const context_1 = require("../../../../utilities/listbox/context");
+const Icon_1 = require("../../../Icon");
+const Option_1 = require("../Option");
+const TextOption_1 = require("../TextOption");
+const Action_classnames_1 = __importDefault(require("./Action.classnames"));
+function Action(props) {
+    const { selected, disabled, children, icon, divider } = props;
+    const iconMarkup = icon && ((0, jsx_runtime_1.jsx)("div", { className: Action_classnames_1.default.Icon, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { color: 'subdued', source: icon }) }));
+    const className = (0, css_1.classNames)(Action_classnames_1.default.Action, divider && Action_classnames_1.default.ActionDivider);
+    return ((0, jsx_runtime_1.jsx)(context_1.ActionContext.Provider, { value: true, children: (0, jsx_runtime_1.jsx)(Option_1.Option, { ...props, children: (0, jsx_runtime_1.jsx)("div", { className: className, children: (0, jsx_runtime_1.jsxs)(TextOption_1.TextOption, { selected: selected, disabled: disabled, children: [iconMarkup, children] }) }) }) }));
+}
+exports.Action = Action;

package/dist/src/components/Listbox/components/Action/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Action = void 0;
+var Action_1 = require("./Action");
+Object.defineProperty(exports, "Action", { enumerable: true, get: function () { return Action_1.Action; } });

package/dist/src/components/Listbox/components/Header/Header.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Header = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Section_1 = require("../Section");
+const Box_1 = require("../../../Box");
+const Text_1 = require("../../../Text");
+function Header({ children }) {
+    const sectionId = (0, Section_1.useSection)() || '';
+    const content = typeof children === 'string' ? ((0, jsx_runtime_1.jsx)(Box_1.Box, { paddingBlockStart: "2", paddingInlineStart: "4", paddingBlockEnd: "2", paddingInlineEnd: "4", children: (0, jsx_runtime_1.jsx)(Text_1.Text, { as: "span", variant: "headingXs", color: "subdued", children: children }) })) : (children);
+    return ((0, jsx_runtime_1.jsx)("div", { "aria-hidden": true, id: sectionId, children: content }));
+}
+exports.Header = Header;

package/dist/src/components/Listbox/components/Header/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Header = void 0;
+var Header_1 = require("./Header");
+Object.defineProperty(exports, "Header", { enumerable: true, get: function () { return Header_1.Header; } });

package/dist/src/components/Listbox/components/Loading/Loading.classnames.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const LoadingClassnames = {
+    "ListItem": "Loading-ListItem",
+    "Loading": "Loading-Loading"
+};
+exports.default = LoadingClassnames;

package/dist/src/components/Listbox/components/Loading/Loading.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Loading = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const listbox_1 = require("../../../../utilities/listbox");
+const Spinner_1 = require("../../../Spinner");
+const Loading_classnames_1 = __importDefault(require("./Loading.classnames"));
+exports.Loading = (0, react_1.memo)(function LoadingOption({ children, accessibilityLabel: label, }) {
+    const { setLoading } = (0, listbox_1.useListbox)();
+    (0, react_1.useEffect)(() => {
+        setLoading(label);
+        return () => {
+            setLoading(undefined);
+        };
+    }, [label, setLoading]);
+    return ((0, jsx_runtime_1.jsx)("li", { className: Loading_classnames_1.default.ListItem, role: 'presentation', children: children ? (children) : ((0, jsx_runtime_1.jsx)("div", { className: Loading_classnames_1.default.Loading, children: (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { size: 'small', accessibilityLabel: label }) })) }));
+});

package/dist/src/components/Listbox/components/Loading/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Loading = void 0;
+var Loading_1 = require("./Loading");
+Object.defineProperty(exports, "Loading", { enumerable: true, get: function () { return Loading_1.Loading; } });

package/dist/src/components/Listbox/components/Option/Option.classnames.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const OptionClassnames = {
+    "Option": "Option-Option",
+    "divider": "Option-divider"
+};
+exports.default = OptionClassnames;