@jobber/components 4.85.6-CJS-to-ESM.5 → 4.85.6

package/dist/DataListSearch-2s_UETky.js

@@ -1,62 +0,0 @@
-import React, { useRef, useState, useCallback } from 'react';
-import { d as debounce } from './debounce-D3te8_TG.js';
-import classnames from 'classnames';
-import { tokens } from '@jobber/design';
-import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
-import { I as InputText } from './InputText-CCmzDC9W.js';
-import { u as useDataListContext } from './DataListContext-9uw8XwzP.js';
-import { S as SEARCH_DEBOUNCE_DELAY } from './DataList.const-Wz370ukq.js';
-import { B as Button } from './Button-CWVwgwhn.js';
-import { A as AnimatedSwitcher } from './AnimatedSwitcher-B4fUExeN.js';
-
-var css_248z = ".tj0MOMhLEEY- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.SaPMOnvw-3c- {\n  --transition-properties: var(--timing-base) ease-in-out;\n  --button-offset: calc(var(--space-largest) - var(--space-smaller));\n\n  position: absolute;\n  top: 50%;\n  right: calc(var(--space-largest) - var(--space-smaller));\n  right: var(--button-offset);\n  visibility: hidden;\n  width: 0;\n  padding: var(--space-smaller) 0;\n  background-color: var(--color-surface);\n  opacity: 0;\n  -webkit-transform: translateY(-50%);\n          transform: translateY(-50%);\n  transition: opacity var(--timing-base) ease-in-out,\n    width var(--timing-base) ease-in-out, visibility var(--timing-base) ease-in-out;\n  transition: opacity var(--transition-properties),\n    width var(--transition-properties), visibility var(--transition-properties);\n}\n\n._3S1-91v2SYI- {\n  visibility: visible;\n  width: calc(100% - var(--button-offset));\n  opacity: 1;\n}\n\n@media (--medium-screens-and-up) {\n\n.SaPMOnvw-3c-,\n._3S1-91v2SYI- {\n    position: static;\n    visibility: visible;\n    width: auto;\n    padding: 0;\n    background-color: transparent;\n    opacity: 1;\n    -webkit-transform: none;\n            transform: none;\n    transition: none;\n}\n  }\n\n._9GlBktsUALw- {\n  display: block;\n}\n\n@media (--medium-screens-and-up) {\n\n._9GlBktsUALw- {\n    display: none;\n}\n  }\n\n/*\n * No Filters Styling\n *\n * When there are no filters, the search input is always visible.\n * ------------------------------------------------------------------------- */\n\n._3Pjrt42x454- .SaPMOnvw-3c- {\n  position: static;\n  visibility: visible;\n  width: auto;\n  opacity: 1;\n  transition: none;\n}\n\n@media (--medium-screens-and-up) {\n\n._3Pjrt42x454- .SaPMOnvw-3c- {\n    max-width: 30%;\n}\n  }\n\n._3Pjrt42x454- ._9GlBktsUALw- {\n  display: none;\n}\n";
-var styles = {"wrapper":"tj0MOMhLEEY-","searchInput":"SaPMOnvw-3c-","searchInputVisible":"_3S1-91v2SYI-","searchButton":"_9GlBktsUALw-","withNoFilters":"_3Pjrt42x454-"};
-styleInject(css_248z);
-
-const DATA_LIST_SEARCH_TEST_ID = "ATL-DataList-Search-input-wrapper";
-// This component is meant to capture the props of the DataList.Search
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-function DataListSearch(_) {
-    return null;
-}
-/**
- * Renders the DataList.Search component.
- */
-function InternalDataListSearch() {
-    const inputRef = useRef(null);
-    const [visible, setVisible] = useState(false);
-    const { searchComponent, filterComponent, sorting, title } = useDataListContext();
-    const debouncedSearch = useCallback(debounce((value) => { var _a; return (_a = searchComponent === null || searchComponent === void 0 ? void 0 : searchComponent.props) === null || _a === void 0 ? void 0 : _a.onSearch(value); }, SEARCH_DEBOUNCE_DELAY), [searchComponent === null || searchComponent === void 0 ? void 0 : searchComponent.props.onSearch]);
-    if (!searchComponent)
-        return null;
-    const { placeholder, initialValue } = searchComponent.props;
-    return (React.createElement("div", { className: classnames(styles.wrapper, {
-            [styles.withNoFilters]: !filterComponent && !sorting,
-        }) },
-        React.createElement("div", { "data-testid": DATA_LIST_SEARCH_TEST_ID, className: classnames(styles.searchInput, {
-                [styles.searchInputVisible]: visible,
-            }) },
-            React.createElement(InputText
-            // If the initial value changes, reset the input.
-            , { 
-                // If the initial value changes, reset the input.
-                key: initialValue, defaultValue: initialValue, ref: inputRef, placeholder: getPlaceholder(), onChange: debouncedSearch, prefix: { icon: "search" }, clearable: "always" })),
-        React.createElement("div", { className: styles.searchButton },
-            React.createElement(AnimatedSwitcher, { switched: visible, initialChild: React.createElement(Button, { variation: "subtle", icon: "search", ariaLabel: "Search", onClick: toggleSearch }), switchTo: React.createElement(Button, { variation: "subtle", icon: "remove", ariaLabel: "Close search bar", onClick: toggleSearch }) }))));
-    function getPlaceholder() {
-        if (placeholder)
-            return placeholder;
-        if (title)
-            return `Search ${title}...`;
-        return `Search...`;
-    }
-    function toggleSearch() {
-        const visibility = !visible;
-        setVisible(visibility);
-        if (visibility && inputRef.current) {
-            setTimeout(inputRef.current.focus, tokens["timing-quick"]);
-        }
-    }
-}
-
-export { DATA_LIST_SEARCH_TEST_ID as D, InternalDataListSearch as I, DataListSearch as a };

package/dist/DataListSearch-P9-j_TtT.js

@@ -1,66 +0,0 @@
-'use strict';
-
-var React = require('react');
-var debounce = require('./debounce-CJA36ltI.js');
-var classnames = require('classnames');
-var design = require('@jobber/design');
-var styleInject_es = require('./style-inject.es-XZHJH68X.js');
-var InputText = require('./InputText--fuxI6yf.js');
-var DataListContext = require('./DataListContext-B4eBw_aH.js');
-var DataList_const = require('./DataList.const-YbvF2-QB.js');
-var Button = require('./Button-D3mW3Hcg.js');
-var AnimatedSwitcher = require('./AnimatedSwitcher-UmlTf067.js');
-
-var css_248z = ".tj0MOMhLEEY- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.SaPMOnvw-3c- {\n  --transition-properties: var(--timing-base) ease-in-out;\n  --button-offset: calc(var(--space-largest) - var(--space-smaller));\n\n  position: absolute;\n  top: 50%;\n  right: calc(var(--space-largest) - var(--space-smaller));\n  right: var(--button-offset);\n  visibility: hidden;\n  width: 0;\n  padding: var(--space-smaller) 0;\n  background-color: var(--color-surface);\n  opacity: 0;\n  -webkit-transform: translateY(-50%);\n          transform: translateY(-50%);\n  transition: opacity var(--timing-base) ease-in-out,\n    width var(--timing-base) ease-in-out, visibility var(--timing-base) ease-in-out;\n  transition: opacity var(--transition-properties),\n    width var(--transition-properties), visibility var(--transition-properties);\n}\n\n._3S1-91v2SYI- {\n  visibility: visible;\n  width: calc(100% - var(--button-offset));\n  opacity: 1;\n}\n\n@media (--medium-screens-and-up) {\n\n.SaPMOnvw-3c-,\n._3S1-91v2SYI- {\n    position: static;\n    visibility: visible;\n    width: auto;\n    padding: 0;\n    background-color: transparent;\n    opacity: 1;\n    -webkit-transform: none;\n            transform: none;\n    transition: none;\n}\n  }\n\n._9GlBktsUALw- {\n  display: block;\n}\n\n@media (--medium-screens-and-up) {\n\n._9GlBktsUALw- {\n    display: none;\n}\n  }\n\n/*\n * No Filters Styling\n *\n * When there are no filters, the search input is always visible.\n * ------------------------------------------------------------------------- */\n\n._3Pjrt42x454- .SaPMOnvw-3c- {\n  position: static;\n  visibility: visible;\n  width: auto;\n  opacity: 1;\n  transition: none;\n}\n\n@media (--medium-screens-and-up) {\n\n._3Pjrt42x454- .SaPMOnvw-3c- {\n    max-width: 30%;\n}\n  }\n\n._3Pjrt42x454- ._9GlBktsUALw- {\n  display: none;\n}\n";
-var styles = {"wrapper":"tj0MOMhLEEY-","searchInput":"SaPMOnvw-3c-","searchInputVisible":"_3S1-91v2SYI-","searchButton":"_9GlBktsUALw-","withNoFilters":"_3Pjrt42x454-"};
-styleInject_es.styleInject(css_248z);
-
-const DATA_LIST_SEARCH_TEST_ID = "ATL-DataList-Search-input-wrapper";
-// This component is meant to capture the props of the DataList.Search
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-function DataListSearch(_) {
-    return null;
-}
-/**
- * Renders the DataList.Search component.
- */
-function InternalDataListSearch() {
-    const inputRef = React.useRef(null);
-    const [visible, setVisible] = React.useState(false);
-    const { searchComponent, filterComponent, sorting, title } = DataListContext.useDataListContext();
-    const debouncedSearch = React.useCallback(debounce.debounce((value) => { var _a; return (_a = searchComponent === null || searchComponent === void 0 ? void 0 : searchComponent.props) === null || _a === void 0 ? void 0 : _a.onSearch(value); }, DataList_const.SEARCH_DEBOUNCE_DELAY), [searchComponent === null || searchComponent === void 0 ? void 0 : searchComponent.props.onSearch]);
-    if (!searchComponent)
-        return null;
-    const { placeholder, initialValue } = searchComponent.props;
-    return (React.createElement("div", { className: classnames(styles.wrapper, {
-            [styles.withNoFilters]: !filterComponent && !sorting,
-        }) },
-        React.createElement("div", { "data-testid": DATA_LIST_SEARCH_TEST_ID, className: classnames(styles.searchInput, {
-                [styles.searchInputVisible]: visible,
-            }) },
-            React.createElement(InputText.InputText
-            // If the initial value changes, reset the input.
-            , { 
-                // If the initial value changes, reset the input.
-                key: initialValue, defaultValue: initialValue, ref: inputRef, placeholder: getPlaceholder(), onChange: debouncedSearch, prefix: { icon: "search" }, clearable: "always" })),
-        React.createElement("div", { className: styles.searchButton },
-            React.createElement(AnimatedSwitcher.AnimatedSwitcher, { switched: visible, initialChild: React.createElement(Button.Button, { variation: "subtle", icon: "search", ariaLabel: "Search", onClick: toggleSearch }), switchTo: React.createElement(Button.Button, { variation: "subtle", icon: "remove", ariaLabel: "Close search bar", onClick: toggleSearch }) }))));
-    function getPlaceholder() {
-        if (placeholder)
-            return placeholder;
-        if (title)
-            return `Search ${title}...`;
-        return `Search...`;
-    }
-    function toggleSearch() {
-        const visibility = !visible;
-        setVisible(visibility);
-        if (visibility && inputRef.current) {
-            setTimeout(inputRef.current.focus, design.tokens["timing-quick"]);
-        }
-    }
-}
-
-exports.DATA_LIST_SEARCH_TEST_ID = DATA_LIST_SEARCH_TEST_ID;
-exports.DataListSearch = DataListSearch;
-exports.InternalDataListSearch = InternalDataListSearch;

package/dist/DataListSort-BPIPnVXL.js

@@ -1,94 +0,0 @@
-'use strict';
-
-var React = require('react');
-var DataListContext = require('./DataListContext-B4eBw_aH.js');
-var Combobox = require('./Combobox-CL1tRKd3.js');
-require('./ComboboxProvider-BwxfVgmL.js');
-var Chip = require('./Chip-DSy6Xm8R.js');
-require('./tslib.es6-ld72nsZq.js');
-var Icon = require('./Icon-B9XNdA1T.js');
-
-function DataListSort() {
-    const { sorting, headers } = DataListContext.useDataListContext();
-    if (!sorting)
-        return null;
-    const { sortable, state, onSort } = sorting;
-    const sortByOptions = getSortByOptions();
-    return (React.createElement(Combobox.Combobox, { onSelect: selection => handleKeyChange(selection[0].id.toString()), selected: [
-            {
-                id: getSelectedSortID(),
-                label: (state === null || state === void 0 ? void 0 : state.order) || "",
-            },
-        ] },
-        React.createElement(Combobox.Combobox.Activator, null,
-            React.createElement(Chip.Chip, { heading: "Sort", label: getButtonLabel(), variation: state ? "base" : "subtle" }, !state && (React.createElement(Chip.Chip.Suffix, null,
-                React.createElement(Icon.Icon, { name: "arrowDown", size: "small" }))))),
-        sortByOptions.map(({ label, value }) => (React.createElement(Combobox.Combobox.Option, { key: value, id: value, label: label })))));
-    function getSortByOptions() {
-        const options = sortable.reduce((acc, sort) => {
-            const label = headers[sort.key];
-            if (!label)
-                return acc;
-            const customOptions = sort.options;
-            if (customOptions) {
-                customOptions.forEach(option => {
-                    acc.push({
-                        label: option.label || "",
-                        value: JSON.stringify({
-                            key: sort.key,
-                            order: option.order,
-                            label: option.label,
-                            id: option.id,
-                        }),
-                    });
-                });
-                return acc;
-            }
-            acc.push({
-                label: `${label} (A-Z)`,
-                value: JSON.stringify({
-                    key: sort.key,
-                    order: "asc",
-                    label: label,
-                    id: sort.key,
-                }),
-            });
-            acc.push({
-                label: `${label} (Z-A)`,
-                value: JSON.stringify({
-                    key: sort.key,
-                    order: "desc",
-                    label: label,
-                    id: sort.key,
-                }),
-            });
-            return acc;
-        }, []);
-        // Inject a none option as the first option
-        options.unshift({ label: "None", value: "none" });
-        return options;
-    }
-    function getButtonLabel() {
-        const selectedOption = sortByOptions.find(option => option.value === getSelectedSortID());
-        return (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || "";
-    }
-    function handleKeyChange(value) {
-        if (value && value !== "none") {
-            const { key, order, label, id } = JSON.parse(value);
-            onSort({ key, order: order, label, id });
-            return;
-        }
-        onSort(undefined);
-    }
-    function getSelectedSortID() {
-        const selectedSortID = {
-            key: state === null || state === void 0 ? void 0 : state.key,
-            order: state === null || state === void 0 ? void 0 : state.order,
-            label: state === null || state === void 0 ? void 0 : state.label,
-            id: state === null || state === void 0 ? void 0 : state.id,
-        };
-        return JSON.stringify(selectedSortID);
-    }
-}
-
-exports.DataListSort = DataListSort;

package/dist/DataListSort-D1Ng8x7t.js

@@ -1,92 +0,0 @@
-import React from 'react';
-import { u as useDataListContext } from './DataListContext-9uw8XwzP.js';
-import { C as Combobox } from './Combobox-D44taKUg.js';
-import './ComboboxProvider-Dm_tfmkr.js';
-import { C as Chip } from './Chip-Cvuqhi_q.js';
-import './tslib.es6-Df1SgIEn.js';
-import { I as Icon } from './Icon-CoHJokXb.js';
-
-function DataListSort() {
-    const { sorting, headers } = useDataListContext();
-    if (!sorting)
-        return null;
-    const { sortable, state, onSort } = sorting;
-    const sortByOptions = getSortByOptions();
-    return (React.createElement(Combobox, { onSelect: selection => handleKeyChange(selection[0].id.toString()), selected: [
-            {
-                id: getSelectedSortID(),
-                label: (state === null || state === void 0 ? void 0 : state.order) || "",
-            },
-        ] },
-        React.createElement(Combobox.Activator, null,
-            React.createElement(Chip, { heading: "Sort", label: getButtonLabel(), variation: state ? "base" : "subtle" }, !state && (React.createElement(Chip.Suffix, null,
-                React.createElement(Icon, { name: "arrowDown", size: "small" }))))),
-        sortByOptions.map(({ label, value }) => (React.createElement(Combobox.Option, { key: value, id: value, label: label })))));
-    function getSortByOptions() {
-        const options = sortable.reduce((acc, sort) => {
-            const label = headers[sort.key];
-            if (!label)
-                return acc;
-            const customOptions = sort.options;
-            if (customOptions) {
-                customOptions.forEach(option => {
-                    acc.push({
-                        label: option.label || "",
-                        value: JSON.stringify({
-                            key: sort.key,
-                            order: option.order,
-                            label: option.label,
-                            id: option.id,
-                        }),
-                    });
-                });
-                return acc;
-            }
-            acc.push({
-                label: `${label} (A-Z)`,
-                value: JSON.stringify({
-                    key: sort.key,
-                    order: "asc",
-                    label: label,
-                    id: sort.key,
-                }),
-            });
-            acc.push({
-                label: `${label} (Z-A)`,
-                value: JSON.stringify({
-                    key: sort.key,
-                    order: "desc",
-                    label: label,
-                    id: sort.key,
-                }),
-            });
-            return acc;
-        }, []);
-        // Inject a none option as the first option
-        options.unshift({ label: "None", value: "none" });
-        return options;
-    }
-    function getButtonLabel() {
-        const selectedOption = sortByOptions.find(option => option.value === getSelectedSortID());
-        return (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || "";
-    }
-    function handleKeyChange(value) {
-        if (value && value !== "none") {
-            const { key, order, label, id } = JSON.parse(value);
-            onSort({ key, order: order, label, id });
-            return;
-        }
-        onSort(undefined);
-    }
-    function getSelectedSortID() {
-        const selectedSortID = {
-            key: state === null || state === void 0 ? void 0 : state.key,
-            order: state === null || state === void 0 ? void 0 : state.order,
-            label: state === null || state === void 0 ? void 0 : state.label,
-            id: state === null || state === void 0 ? void 0 : state.id,
-        };
-        return JSON.stringify(selectedSortID);
-    }
-}
-
-export { DataListSort as D };

package/dist/DataListSortingOptions-Ciu5gWGt.js

@@ -1,38 +0,0 @@
-import React, { useEffect } from 'react';
-import { u as useOnKeyDown } from './useOnKeyDown-BsUfDste.js';
-import { u as useRefocusOnActivator } from './useRefocusOnActivator-CMNWUYSe.js';
-import { I as Icon } from './Icon-CoHJokXb.js';
-import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
-
-var css_248z = ".thBUfVNaigs- {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  max-width: var(--popover--width);\n  box-shadow: var(--shadow-base);\n  margin-top: var(--space-smaller);\n  padding: var(--space-small);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: var(--radius-larger);\n  background: var(--color-surface);\n  -ms-flex-align: start;\n      align-items: flex-start;\n}\n\n.QaXuqbVjG04- {\n  display: -ms-flexbox;\n  display: flex;\n  min-width: calc(var(--space-largest) * 3.5);\n  min-height: calc((var(--space-largest) - var(--space-smaller)));\n  box-sizing: border-box;\n  padding: var(--space-small);\n  border-radius: var(--radius-large);\n  font-family: var(--typography--fontFamily-normal);\n  font-size: var(--typography--fontSize-base);\n  font-weight: 500;\n  white-space: nowrap;\n  list-style: none;\n  cursor: pointer;\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  gap: var(--space-smaller);\n}\n\n.jobber-retheme .QaXuqbVjG04-,\n.jobber-retheme .thBUfVNaigs- {\n  border-radius: var(--radius-base);\n}\n\n.QaXuqbVjG04-:hover,\n.QaXuqbVjG04-:focus {\n  background-color: var(--color-surface--hover);\n}\n\n.QaXuqbVjG04-:focus-visible {\n  box-shadow: var(--shadow-focus);\n}\n";
-var styles = {"optionsList":"thBUfVNaigs-","option":"QaXuqbVjG04-"};
-styleInject(css_248z);
-
-function DataListSortingOptions({ options, selectedOption, onSelectChange, onClose, optionsListRef, dataListHeaderTileRef, }) {
-    useRefocusOnActivator.useRefocusOnActivator(!optionsListRef.current);
-    useOnKeyDown.useOnKeyDown(() => onClose(), "Escape");
-    useEffect(() => {
-        document.addEventListener("mousedown", handleClickOutside);
-        return () => {
-            document.removeEventListener("mousedown", handleClickOutside);
-        };
-    }, [optionsListRef, dataListHeaderTileRef, onClose]);
-    return (React.createElement("ul", { className: styles.optionsList, ref: optionsListRef }, options.map(option => (React.createElement("li", { className: styles.option, key: option.id, onClick: () => onSelectChange(option), onKeyDown: event => handleKeyDown(event, option), tabIndex: 0, "data-value": option.id },
-        option.label,
-        option.label === (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) && (React.createElement(Icon, { name: "checkmark", color: "blue" })))))));
-    function handleKeyDown(event, option) {
-        if (event.key === "Enter") {
-            onSelectChange(option);
-        }
-    }
-    function handleClickOutside(event) {
-        var _a, _b;
-        const isClickInside = ((_a = optionsListRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) ||
-            ((_b = dataListHeaderTileRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target));
-        if (!isClickInside) {
-            onClose();
-        }
-    }
-}
-
-export { DataListSortingOptions as D };

package/dist/DataListSortingOptions-SfZWLgFS.js

@@ -1,40 +0,0 @@
-'use strict';
-
-var React = require('react');
-var useOnKeyDown = require('./useOnKeyDown-B9JF2jLZ.js');
-var useRefocusOnActivator = require('./useRefocusOnActivator-DOJm9VWz.js');
-var Icon = require('./Icon-B9XNdA1T.js');
-var styleInject_es = require('./style-inject.es-XZHJH68X.js');
-
-var css_248z = ".thBUfVNaigs- {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  max-width: var(--popover--width);\n  box-shadow: var(--shadow-base);\n  margin-top: var(--space-smaller);\n  padding: var(--space-small);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: var(--radius-larger);\n  background: var(--color-surface);\n  -ms-flex-align: start;\n      align-items: flex-start;\n}\n\n.QaXuqbVjG04- {\n  display: -ms-flexbox;\n  display: flex;\n  min-width: calc(var(--space-largest) * 3.5);\n  min-height: calc((var(--space-largest) - var(--space-smaller)));\n  box-sizing: border-box;\n  padding: var(--space-small);\n  border-radius: var(--radius-large);\n  font-family: var(--typography--fontFamily-normal);\n  font-size: var(--typography--fontSize-base);\n  font-weight: 500;\n  white-space: nowrap;\n  list-style: none;\n  cursor: pointer;\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  gap: var(--space-smaller);\n}\n\n.jobber-retheme .QaXuqbVjG04-,\n.jobber-retheme .thBUfVNaigs- {\n  border-radius: var(--radius-base);\n}\n\n.QaXuqbVjG04-:hover,\n.QaXuqbVjG04-:focus {\n  background-color: var(--color-surface--hover);\n}\n\n.QaXuqbVjG04-:focus-visible {\n  box-shadow: var(--shadow-focus);\n}\n";
-var styles = {"optionsList":"thBUfVNaigs-","option":"QaXuqbVjG04-"};
-styleInject_es.styleInject(css_248z);
-
-function DataListSortingOptions({ options, selectedOption, onSelectChange, onClose, optionsListRef, dataListHeaderTileRef, }) {
-    useRefocusOnActivator.useRefocusOnActivator.useRefocusOnActivator(!optionsListRef.current);
-    useOnKeyDown.useOnKeyDown.useOnKeyDown(() => onClose(), "Escape");
-    React.useEffect(() => {
-        document.addEventListener("mousedown", handleClickOutside);
-        return () => {
-            document.removeEventListener("mousedown", handleClickOutside);
-        };
-    }, [optionsListRef, dataListHeaderTileRef, onClose]);
-    return (React.createElement("ul", { className: styles.optionsList, ref: optionsListRef }, options.map(option => (React.createElement("li", { className: styles.option, key: option.id, onClick: () => onSelectChange(option), onKeyDown: event => handleKeyDown(event, option), tabIndex: 0, "data-value": option.id },
-        option.label,
-        option.label === (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) && (React.createElement(Icon.Icon, { name: "checkmark", color: "blue" })))))));
-    function handleKeyDown(event, option) {
-        if (event.key === "Enter") {
-            onSelectChange(option);
-        }
-    }
-    function handleClickOutside(event) {
-        var _a, _b;
-        const isClickInside = ((_a = optionsListRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) ||
-            ((_b = dataListHeaderTileRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target));
-        if (!isClickInside) {
-            onClose();
-        }
-    }
-}
-
-exports.DataListSortingOptions = DataListSortingOptions;

package/dist/DataListStatusBar-BZHyp6Ep.js

@@ -1,22 +0,0 @@
-import React from 'react';
-import { g as getCompoundComponent } from './DataList.utils-BdHYuwRY.js';
-import { u as useDataListContext } from './DataListContext-9uw8XwzP.js';
-
-// This component is meant to capture the props of the DataList.Filters
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-function DataListStatusBar(_) {
-    return null;
-}
-/**
- * Renders the DataList.StatusBar component
- */
-function InternalDataListStatusBar() {
-    const { children: parentChildren } = useDataListContext();
-    const component = getCompoundComponent(parentChildren, DataListStatusBar);
-    if (!component)
-        return null;
-    const children = component === null || component === void 0 ? void 0 : component.props.children;
-    return React.createElement(React.Fragment, null, children);
-}
-
-export { DataListStatusBar as D, InternalDataListStatusBar as I };

package/dist/DataListStatusBar-D-j7Wk18.js

@@ -1,25 +0,0 @@
-'use strict';
-
-var React = require('react');
-var DataList_utils = require('./DataList.utils-DTLgRGnD.js');
-var DataListContext = require('./DataListContext-B4eBw_aH.js');
-
-// This component is meant to capture the props of the DataList.Filters
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-function DataListStatusBar(_) {
-    return null;
-}
-/**
- * Renders the DataList.StatusBar component
- */
-function InternalDataListStatusBar() {
-    const { children: parentChildren } = DataListContext.useDataListContext();
-    const component = DataList_utils.getCompoundComponent(parentChildren, DataListStatusBar);
-    if (!component)
-        return null;
-    const children = component === null || component === void 0 ? void 0 : component.props.children;
-    return React.createElement(React.Fragment, null, children);
-}
-
-exports.DataListStatusBar = DataListStatusBar;
-exports.InternalDataListStatusBar = InternalDataListStatusBar;

package/dist/DataListStickyHeader-BKN9V51R.js

@@ -1,28 +0,0 @@
-'use strict';
-
-var classnames = require('classnames');
-var React = require('react');
-var styleInject_es = require('./style-inject.es-XZHJH68X.js');
-var DataList_const = require('./DataList.const-YbvF2-QB.js');
-
-var css_248z = ".PGOHzrMh374- {\n  --offset: 1px;\n  --sticky-header-transition-properties: var(--timing-base) ease-in-out;\n\n  position: sticky;\n  top: calc(1px * -1);\n  top: calc(var(--offset) * -1);\n  z-index: var(--elevation-base);\n  padding-top: 1px;\n  padding-top: var(--offset);\n  background-color: var(--color-surface);\n}\n\n/**\n * Draw a border that gets covered by the column headers border when it shows up.\n *\n * Mostly to prevent us from writing some complex JS to remove the border when\n * the column headers show up.\n */\n\n.PGOHzrMh374-::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  bottom: 0;\n  left: 50%;\n  z-index: -1;\n  width: 0;\n  height: 0;\n  background-color: var(--color-border);\n  -webkit-transform: translateX(-50%);\n          transform: translateX(-50%);\n  transition: height var(--sticky-header-transition-properties)\n      var(--timing-quick),\n    width var(--sticky-header-transition-properties);\n}\n\n.PGjWc5ocjpI-::before {\n  width: 100%;\n  height: var(--border-thick);\n  transition: height var(--sticky-header-transition-properties),\n    width var(--sticky-header-transition-properties) var(--timing-quick);\n}\n";
-var styles = {"header":"PGOHzrMh374-","stuck":"PGjWc5ocjpI-"};
-styleInject_es.styleInject(css_248z);
-
-function DataListStickyHeader({ children }) {
-    const [isStuck, setIsStuck] = React.useState(false);
-    const ref = React.useRef(null);
-    const handleObserver = React.useCallback(([e]) => setIsStuck(e.intersectionRatio < 1), [setIsStuck]);
-    React.useEffect(() => {
-        if (!window.IntersectionObserver)
-            return;
-        const observer = new IntersectionObserver(handleObserver, { threshold: 1 });
-        ref.current && observer.observe(ref.current);
-        return () => {
-            ref.current && observer.unobserve(ref.current);
-        };
-    }, [handleObserver, ref.current]);
-    return (React.createElement("div", { "data-testid": DataList_const.DATA_LIST_STICKY_HEADER_TEST_ID, ref: ref, className: classnames(styles.header, { [styles.stuck]: isStuck }) }, children));
-}
-
-exports.DataListStickyHeader = DataListStickyHeader;

package/dist/DataListStickyHeader-CCG09E7V.js

@@ -1,26 +0,0 @@
-import classnames from 'classnames';
-import React, { useState, useRef, useCallback, useEffect } from 'react';
-import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
-import { a as DATA_LIST_STICKY_HEADER_TEST_ID } from './DataList.const-Wz370ukq.js';
-
-var css_248z = ".PGOHzrMh374- {\n  --offset: 1px;\n  --sticky-header-transition-properties: var(--timing-base) ease-in-out;\n\n  position: sticky;\n  top: calc(1px * -1);\n  top: calc(var(--offset) * -1);\n  z-index: var(--elevation-base);\n  padding-top: 1px;\n  padding-top: var(--offset);\n  background-color: var(--color-surface);\n}\n\n/**\n * Draw a border that gets covered by the column headers border when it shows up.\n *\n * Mostly to prevent us from writing some complex JS to remove the border when\n * the column headers show up.\n */\n\n.PGOHzrMh374-::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  bottom: 0;\n  left: 50%;\n  z-index: -1;\n  width: 0;\n  height: 0;\n  background-color: var(--color-border);\n  -webkit-transform: translateX(-50%);\n          transform: translateX(-50%);\n  transition: height var(--sticky-header-transition-properties)\n      var(--timing-quick),\n    width var(--sticky-header-transition-properties);\n}\n\n.PGjWc5ocjpI-::before {\n  width: 100%;\n  height: var(--border-thick);\n  transition: height var(--sticky-header-transition-properties),\n    width var(--sticky-header-transition-properties) var(--timing-quick);\n}\n";
-var styles = {"header":"PGOHzrMh374-","stuck":"PGjWc5ocjpI-"};
-styleInject(css_248z);
-
-function DataListStickyHeader({ children }) {
-    const [isStuck, setIsStuck] = useState(false);
-    const ref = useRef(null);
-    const handleObserver = useCallback(([e]) => setIsStuck(e.intersectionRatio < 1), [setIsStuck]);
-    useEffect(() => {
-        if (!window.IntersectionObserver)
-            return;
-        const observer = new IntersectionObserver(handleObserver, { threshold: 1 });
-        ref.current && observer.observe(ref.current);
-        return () => {
-            ref.current && observer.unobserve(ref.current);
-        };
-    }, [handleObserver, ref.current]);
-    return (React.createElement("div", { "data-testid": DATA_LIST_STICKY_HEADER_TEST_ID, ref: ref, className: classnames(styles.header, { [styles.stuck]: isStuck }) }, children));
-}
-
-export { DataListStickyHeader as D };

package/dist/DataListTags-C5inHFOR.js

@@ -1,67 +0,0 @@
-'use strict';
-
-var React = require('react');
-var classnames = require('classnames');
-var styleInject_es = require('./style-inject.es-XZHJH68X.js');
-var InlineLabel = require('./InlineLabel-BPjH1ASc.js');
-var Text = require('./Text-D9gsHxbp.js');
-
-var css_248z = "._8MYxAQYdZzM- {\n  position: relative;\n}\n\n.WRV-UmQmPzo- {\n  --inline-label-height: calc(\n    var(--typography--fontSize-small) * 1.5 + calc(var(--space-smaller) * 1.25) *\n      2\n  );\n\n  display: -ms-flexbox;\n\n  display: flex;\n  z-index: var(--elevation-default);\n  max-height: calc((\n    var(--typography--fontSize-small) * 1.5 + (var(--space-smaller) * 1.25) *\n      2\n  ) * 2);\n  max-height: calc(calc(\n    var(--typography--fontSize-small) * 1.5 + calc(var(--space-smaller) * 1.25) *\n      2\n  ) * 2);\n  max-height: calc(var(--inline-label-height) * 2);\n  overflow: hidden;\n  white-space: nowrap;\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n  gap: var(--space-smaller);\n}\n\n.ND-cN-mX5-c- {\n  -webkit-mask-image: linear-gradient(\n    to left,\n    transparent,\n    transparent var(--space-large),\n    rgba(0, 0, 0, 1) var(--space-largest),\n    rgba(0, 0, 0, 1)\n  );\n          mask-image: linear-gradient(\n    to left,\n    transparent,\n    transparent var(--space-large),\n    rgba(0, 0, 0, 1) var(--space-largest),\n    rgba(0, 0, 0, 1)\n  );\n}\n\n.liQeWCMenD0- {\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  top: 0;\n  right: 0;\n  height: 100%;\n  -ms-flex-align: center;\n      align-items: center;\n}\n";
-var styles = {"tagWrapper":"_8MYxAQYdZzM-","tags":"WRV-UmQmPzo-","tagsMask":"ND-cN-mX5-c-","tagCount":"liQeWCMenD0-"};
-styleInject_es.styleInject(css_248z);
-
-function DataListTags({ items }) {
-    const ref = React.useRef(null);
-    const [visibleIndex, setVisibleIndex] = React.useState([]);
-    const visibleItems = visibleIndex.filter(Boolean).length;
-    const shouldShowTagCount = Boolean(visibleItems);
-    React.useEffect(() => {
-        var _a;
-        if (!window.IntersectionObserver)
-            return;
-        setVisibleIndex([]);
-        const observer = new IntersectionObserver(handleIntersection, {
-            root: ref.current,
-            threshold: buildIntersectionThreshold(items),
-        });
-        const elements = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll("[data-tag-element]");
-        elements === null || elements === void 0 ? void 0 : elements.forEach(element => observer.observe(element));
-        return () => {
-            elements === null || elements === void 0 ? void 0 : elements.forEach(element => observer.unobserve(element));
-        };
-    }, [items]);
-    return (React.createElement("div", { className: styles.tagWrapper, ref: ref },
-        React.createElement("div", { className: classnames(styles.tags, {
-                [styles.tagsMask]: shouldShowTagCount,
-            }) }, items.filter(Boolean).map((tag, index) => (React.createElement("div", { key: tag, "data-tag-element": index },
-            React.createElement(InlineLabel.InlineLabel, null, tag))))),
-        shouldShowTagCount && (React.createElement("div", { className: styles.tagCount },
-            React.createElement(Text.Text, null,
-                "+",
-                visibleItems)))));
-    function handleIntersection(...[entries]) {
-        entries.forEach(entry => {
-            const index = entry.target.getAttribute("data-tag-element");
-            const indexNumber = Number(index);
-            if (!index || isNaN(indexNumber))
-                return;
-            setVisibleIndex(prevState => {
-                const newState = [...prevState];
-                newState[indexNumber] = entry.intersectionRatio !== 1;
-                return newState;
-            });
-        });
-    }
-}
-function buildIntersectionThreshold(items) {
-    const thresholds = [];
-    const totalItems = items.length;
-    for (let i = 1.0; i <= totalItems; i++) {
-        const ratio = i / totalItems;
-        thresholds.push(ratio);
-    }
-    thresholds.push(0);
-    return thresholds;
-}
-
-exports.DataListTags = DataListTags;

package/dist/DataListTags-CHZr9DW3.js

@@ -1,65 +0,0 @@
-import React, { useRef, useState, useEffect } from 'react';
-import classnames from 'classnames';
-import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
-import { I as InlineLabel } from './InlineLabel-x3msDD5R.js';
-import { T as Text } from './Text-DEviM1Tv.js';
-
-var css_248z = "._8MYxAQYdZzM- {\n  position: relative;\n}\n\n.WRV-UmQmPzo- {\n  --inline-label-height: calc(\n    var(--typography--fontSize-small) * 1.5 + calc(var(--space-smaller) * 1.25) *\n      2\n  );\n\n  display: -ms-flexbox;\n\n  display: flex;\n  z-index: var(--elevation-default);\n  max-height: calc((\n    var(--typography--fontSize-small) * 1.5 + (var(--space-smaller) * 1.25) *\n      2\n  ) * 2);\n  max-height: calc(calc(\n    var(--typography--fontSize-small) * 1.5 + calc(var(--space-smaller) * 1.25) *\n      2\n  ) * 2);\n  max-height: calc(var(--inline-label-height) * 2);\n  overflow: hidden;\n  white-space: nowrap;\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n  gap: var(--space-smaller);\n}\n\n.ND-cN-mX5-c- {\n  -webkit-mask-image: linear-gradient(\n    to left,\n    transparent,\n    transparent var(--space-large),\n    rgba(0, 0, 0, 1) var(--space-largest),\n    rgba(0, 0, 0, 1)\n  );\n          mask-image: linear-gradient(\n    to left,\n    transparent,\n    transparent var(--space-large),\n    rgba(0, 0, 0, 1) var(--space-largest),\n    rgba(0, 0, 0, 1)\n  );\n}\n\n.liQeWCMenD0- {\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  top: 0;\n  right: 0;\n  height: 100%;\n  -ms-flex-align: center;\n      align-items: center;\n}\n";
-var styles = {"tagWrapper":"_8MYxAQYdZzM-","tags":"WRV-UmQmPzo-","tagsMask":"ND-cN-mX5-c-","tagCount":"liQeWCMenD0-"};
-styleInject(css_248z);
-
-function DataListTags({ items }) {
-    const ref = useRef(null);
-    const [visibleIndex, setVisibleIndex] = useState([]);
-    const visibleItems = visibleIndex.filter(Boolean).length;
-    const shouldShowTagCount = Boolean(visibleItems);
-    useEffect(() => {
-        var _a;
-        if (!window.IntersectionObserver)
-            return;
-        setVisibleIndex([]);
-        const observer = new IntersectionObserver(handleIntersection, {
-            root: ref.current,
-            threshold: buildIntersectionThreshold(items),
-        });
-        const elements = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll("[data-tag-element]");
-        elements === null || elements === void 0 ? void 0 : elements.forEach(element => observer.observe(element));
-        return () => {
-            elements === null || elements === void 0 ? void 0 : elements.forEach(element => observer.unobserve(element));
-        };
-    }, [items]);
-    return (React.createElement("div", { className: styles.tagWrapper, ref: ref },
-        React.createElement("div", { className: classnames(styles.tags, {
-                [styles.tagsMask]: shouldShowTagCount,
-            }) }, items.filter(Boolean).map((tag, index) => (React.createElement("div", { key: tag, "data-tag-element": index },
-            React.createElement(InlineLabel, null, tag))))),
-        shouldShowTagCount && (React.createElement("div", { className: styles.tagCount },
-            React.createElement(Text, null,
-                "+",
-                visibleItems)))));
-    function handleIntersection(...[entries]) {
-        entries.forEach(entry => {
-            const index = entry.target.getAttribute("data-tag-element");
-            const indexNumber = Number(index);
-            if (!index || isNaN(indexNumber))
-                return;
-            setVisibleIndex(prevState => {
-                const newState = [...prevState];
-                newState[indexNumber] = entry.intersectionRatio !== 1;
-                return newState;
-            });
-        });
-    }
-}
-function buildIntersectionThreshold(items) {
-    const thresholds = [];
-    const totalItems = items.length;
-    for (let i = 1.0; i <= totalItems; i++) {
-        const ratio = i / totalItems;
-        thresholds.push(ratio);
-    }
-    thresholds.push(0);
-    return thresholds;
-}
-
-export { DataListTags as D };