@jobber/components 4.81.4 → 4.81.5-fix-inline.5

package/dist/DataListLayout-BAtuF0cD.js

@@ -0,0 +1,19 @@
+import React, { useEffect } from 'react';
+import { D as DataListItems } from './DataListItems-BLXMP_kf.js';
+import { u as useDataListContext } from './DataListContext-BoTq0ash.js';
+import { u as useActiveLayout } from './useActiveLayout-B7fRenGI.js';
+
+function DataListLayout({ children, size = "xs", }) {
+    const { registerLayout, loadingState } = useDataListContext();
+    const { activeBreakpoint } = useActiveLayout();
+    useEffect(() => {
+        registerLayout(size, children);
+    }, [size, children]);
+    const shouldRenderList = size === activeBreakpoint;
+    if (loadingState !== "initial" && shouldRenderList) {
+        return React.createElement(DataListItems, { size: size });
+    }
+    return null;
+}
+
+export { DataListLayout as D };

package/dist/DataListLayout-C3WneEEv.js

@@ -0,0 +1,21 @@
+'use strict';
+
+var React = require('react');
+var DataListItems = require('./DataListItems--lDdFRtW.js');
+var DataListContext = require('./DataListContext-DV8V647K.js');
+var useActiveLayout = require('./useActiveLayout-DSR3n9QJ.js');
+
+function DataListLayout({ children, size = "xs", }) {
+    const { registerLayout, loadingState } = DataListContext.useDataListContext();
+    const { activeBreakpoint } = useActiveLayout.useActiveLayout();
+    React.useEffect(() => {
+        registerLayout(size, children);
+    }, [size, children]);
+    const shouldRenderList = size === activeBreakpoint;
+    if (loadingState !== "initial" && shouldRenderList) {
+        return React.createElement(DataListItems.DataListItems, { size: size });
+    }
+    return null;
+}
+
+exports.DataListLayout = DataListLayout;

package/dist/DataListLayoutActions-CxIaU7kR.js

@@ -0,0 +1,36 @@
+import React, { Children, useEffect } from 'react';
+import { u as useDataListContext } from './DataListContext-BoTq0ash.js';
+import { u as useDataListLayoutContext } from './DataListLayoutContext-D_cd4uMj.js';
+import { D as DataListItemActionsOverflow } from './DataListItemActionsOverflow-C_KOV3g7.js';
+import { G as Glimmer } from './Glimmer-LoAEnc8h.js';
+
+var styles = {"hidden":"_0m75bgCVBhk-"};
+
+function DataListLayoutActions() {
+    const { itemActionComponent, loadingState } = useDataListContext();
+    const { setHasInLayoutActions } = useDataListLayoutContext();
+    const { children: actionsChildren } = (itemActionComponent === null || itemActionComponent === void 0 ? void 0 : itemActionComponent.props) || {};
+    const actions = Children.toArray(actionsChildren);
+    const hasActions = actions.length > 0;
+    useEffect(() => {
+        setHasInLayoutActions(hasActions);
+        return () => {
+            setHasInLayoutActions(false);
+        };
+    }, []);
+    if (loadingState === "initial") {
+        return React.createElement(Glimmer, { shape: "square", size: "large" });
+    }
+    if (!hasActions)
+        return null;
+    return (React.createElement(DataListLayoutActionsWrapper, null,
+        React.createElement(DataListItemActionsOverflow, { actions: actions })));
+}
+function DataListLayoutActionsWrapper({ children }) {
+    const { isInLayoutProvider } = useDataListLayoutContext();
+    if (isInLayoutProvider)
+        return React.createElement(React.Fragment, null, children);
+    return React.createElement("div", { className: styles.hidden }, children);
+}
+
+export { DataListLayoutActions as D };

package/dist/DataListLayoutActions-DODOH4lS.js

@@ -0,0 +1,38 @@
+'use strict';
+
+var React = require('react');
+var DataListContext = require('./DataListContext-DV8V647K.js');
+var DataListLayoutContext = require('./DataListLayoutContext-CUG2tppi.js');
+var DataListItemActionsOverflow = require('./DataListItemActionsOverflow-NFqx6P5d.js');
+var Glimmer = require('./Glimmer-xvDsD6N9.js');
+
+var styles = {"hidden":"_0m75bgCVBhk-"};
+
+function DataListLayoutActions() {
+    const { itemActionComponent, loadingState } = DataListContext.useDataListContext();
+    const { setHasInLayoutActions } = DataListLayoutContext.useDataListLayoutContext();
+    const { children: actionsChildren } = (itemActionComponent === null || itemActionComponent === void 0 ? void 0 : itemActionComponent.props) || {};
+    const actions = React.Children.toArray(actionsChildren);
+    const hasActions = actions.length > 0;
+    React.useEffect(() => {
+        setHasInLayoutActions(hasActions);
+        return () => {
+            setHasInLayoutActions(false);
+        };
+    }, []);
+    if (loadingState === "initial") {
+        return React.createElement(Glimmer.Glimmer, { shape: "square", size: "large" });
+    }
+    if (!hasActions)
+        return null;
+    return (React.createElement(DataListLayoutActionsWrapper, null,
+        React.createElement(DataListItemActionsOverflow.DataListItemActionsOverflow, { actions: actions })));
+}
+function DataListLayoutActionsWrapper({ children }) {
+    const { isInLayoutProvider } = DataListLayoutContext.useDataListLayoutContext();
+    if (isInLayoutProvider)
+        return React.createElement(React.Fragment, null, children);
+    return React.createElement("div", { className: styles.hidden }, children);
+}
+
+exports.DataListLayoutActions = DataListLayoutActions;

package/dist/DataListLayoutContext-C28QMPQK.js

@@ -0,0 +1,8 @@
+import { createContext, useContext } from 'react';
+
+const DataListLayoutActionsContext = createContext({ activeItem: undefined });
+function useDataListLayoutActionsContext() {
+    return useContext(DataListLayoutActionsContext);
+}
+
+export { DataListLayoutActionsContext as D, useDataListLayoutActionsContext as u };

package/dist/DataListLayoutContext-CUG2tppi.js

@@ -0,0 +1,18 @@
+'use strict';
+
+var noop = require('./noop-CflTzxej.js');
+var React = require('react');
+
+const defaultValues = {
+    isInLayoutProvider: false,
+    hasInLayoutActions: false,
+    setHasInLayoutActions: noop.noop,
+};
+const DataListLayoutContext = React.createContext(defaultValues);
+function useDataListLayoutContext() {
+    return React.useContext(DataListLayoutContext);
+}
+
+exports.DataListLayoutContext = DataListLayoutContext;
+exports.defaultValues = defaultValues;
+exports.useDataListLayoutContext = useDataListLayoutContext;

package/dist/DataListLayoutContext-D6xufRgh.js

@@ -0,0 +1,11 @@
+'use strict';
+
+var React = require('react');
+
+const DataListLayoutActionsContext = React.createContext({ activeItem: undefined });
+function useDataListLayoutActionsContext() {
+    return React.useContext(DataListLayoutActionsContext);
+}
+
+exports.DataListLayoutActionsContext = DataListLayoutActionsContext;
+exports.useDataListLayoutActionsContext = useDataListLayoutActionsContext;

package/dist/DataListLayoutContext-D_cd4uMj.js

@@ -0,0 +1,14 @@
+import { n as noop } from './noop-CwBeMcnO.js';
+import { createContext, useContext } from 'react';
+
+const defaultValues = {
+    isInLayoutProvider: false,
+    hasInLayoutActions: false,
+    setHasInLayoutActions: noop,
+};
+const DataListLayoutContext = createContext(defaultValues);
+function useDataListLayoutContext() {
+    return useContext(DataListLayoutContext);
+}
+
+export { DataListLayoutContext as D, defaultValues as d, useDataListLayoutContext as u };

package/dist/DataListLoadMore-DL7t2n68.js

@@ -0,0 +1,34 @@
+'use strict';
+
+var React = require('react');
+var useInView = require('./useInView-DLLfp5cO.js');
+var DataListContext = require('./DataListContext-DV8V647K.js');
+var DataList_const = require('./DataList.const-Cq7UG_mT.js');
+var Spinner = require('./Spinner-CybMa8fZ.js');
+var Button = require('./Button-jIxCW0ny.js');
+
+var styles = {"trigger":"IC-Y9bTIVFo-","loadingMore":"PbZLGpbI6ZM-","backToTop":"_6zA6B-jmz6o-","fadeIn":"gZ4DUv82g5I-"};
+
+function DataListLoadMoreTrigger() {
+    const { onLoadMore } = DataListContext.useDataListContext();
+    const [inViewRef, isInView] = useInView.useInView_2();
+    React.useEffect(() => {
+        isInView && (onLoadMore === null || onLoadMore === void 0 ? void 0 : onLoadMore());
+    }, [isInView]);
+    return (React.createElement("div", { ref: inViewRef, className: styles.trigger, "data-testid": DataList_const.DATA_LOAD_MORE_TEST_ID }));
+}
+
+const MAX_DATA_COUNT = 50;
+function DataListLoadMore({ onBackToTop }) {
+    const { loadingState, data } = DataListContext.useDataListContext();
+    const showBackToTop = data.length > MAX_DATA_COUNT && loadingState !== "loadingMore";
+    return (React.createElement(React.Fragment, null,
+        React.createElement(DataListLoadMoreTrigger, { key: data.length }),
+        loadingState === "loadingMore" && (React.createElement("div", { "data-testid": DataList_const.DATA_LIST_LOADING_MORE_SPINNER_TEST_ID, className: styles.loadingMore },
+            React.createElement(Spinner.Spinner, { size: "small" }))),
+        showBackToTop && (React.createElement("div", { className: styles.backToTop },
+            React.createElement(Button.Button, { label: "Back to top", onClick: onBackToTop, size: "small", variation: "subtle" })))));
+}
+
+exports.DataListLoadMore = DataListLoadMore;
+exports.MAX_DATA_COUNT = MAX_DATA_COUNT;

package/dist/DataListLoadMore-gO58OLGs.js

@@ -0,0 +1,31 @@
+import React, { useEffect } from 'react';
+import { u as useInView_2 } from './useInView-DJMHuvCd.js';
+import { u as useDataListContext } from './DataListContext-BoTq0ash.js';
+import { f as DATA_LOAD_MORE_TEST_ID, g as DATA_LIST_LOADING_MORE_SPINNER_TEST_ID } from './DataList.const-B4QxuXgJ.js';
+import { S as Spinner } from './Spinner-WydT8fKP.js';
+import { B as Button } from './Button-D4ylkMVt.js';
+
+var styles = {"trigger":"IC-Y9bTIVFo-","loadingMore":"PbZLGpbI6ZM-","backToTop":"_6zA6B-jmz6o-","fadeIn":"gZ4DUv82g5I-"};
+
+function DataListLoadMoreTrigger() {
+    const { onLoadMore } = useDataListContext();
+    const [inViewRef, isInView] = useInView_2();
+    useEffect(() => {
+        isInView && (onLoadMore === null || onLoadMore === void 0 ? void 0 : onLoadMore());
+    }, [isInView]);
+    return (React.createElement("div", { ref: inViewRef, className: styles.trigger, "data-testid": DATA_LOAD_MORE_TEST_ID }));
+}
+
+const MAX_DATA_COUNT = 50;
+function DataListLoadMore({ onBackToTop }) {
+    const { loadingState, data } = useDataListContext();
+    const showBackToTop = data.length > MAX_DATA_COUNT && loadingState !== "loadingMore";
+    return (React.createElement(React.Fragment, null,
+        React.createElement(DataListLoadMoreTrigger, { key: data.length }),
+        loadingState === "loadingMore" && (React.createElement("div", { "data-testid": DATA_LIST_LOADING_MORE_SPINNER_TEST_ID, className: styles.loadingMore },
+            React.createElement(Spinner, { size: "small" }))),
+        showBackToTop && (React.createElement("div", { className: styles.backToTop },
+            React.createElement(Button, { label: "Back to top", onClick: onBackToTop, size: "small", variation: "subtle" })))));
+}
+
+export { DataListLoadMore as D, MAX_DATA_COUNT as M };

package/dist/DataListLoadingState-BQYljkrG.js

@@ -0,0 +1,26 @@
+'use strict';
+
+var React = require('react');
+var Glimmer = require('./Glimmer-xvDsD6N9.js');
+var DataListContext = require('./DataListContext-DV8V647K.js');
+var useActiveLayout = require('./useActiveLayout-DSR3n9QJ.js');
+
+var styles = {"wrapper":"_8cMzUF8XEwY-","loadingItem":"Rh--6fVpkm4-","glimmer":"NFaWWvmxtkw-"};
+
+const LOADING_STATE_LIMIT_ITEMS = 10;
+const DATALIST_LOADINGSTATE_ROW_TEST_ID = "ATL-DataList-LoadingState-Row";
+function DataListLoadingState() {
+    const { headers } = DataListContext.useDataListContext();
+    const { layout, activeBreakpoint } = useActiveLayout.useActiveLayout();
+    if (!layout)
+        return null;
+    const glimmerSize = activeBreakpoint === "xs" ? "small" : "large";
+    const glimmersFromHeader = Object.keys(headers).reduce((data, key) => (Object.assign(Object.assign({}, data), { [key]: (React.createElement("div", { className: styles.glimmer },
+            React.createElement(Glimmer.Glimmer, { size: glimmerSize }))) })), {});
+    const loadingData = new Array(LOADING_STATE_LIMIT_ITEMS).fill(glimmersFromHeader);
+    return (React.createElement("div", { className: styles.wrapper }, loadingData.map((child, i) => (React.createElement("div", { key: i, className: styles.loadingItem, "data-testid": DATALIST_LOADINGSTATE_ROW_TEST_ID }, layout(child))))));
+}
+
+exports.DATALIST_LOADINGSTATE_ROW_TEST_ID = DATALIST_LOADINGSTATE_ROW_TEST_ID;
+exports.DataListLoadingState = DataListLoadingState;
+exports.LOADING_STATE_LIMIT_ITEMS = LOADING_STATE_LIMIT_ITEMS;

package/dist/DataListLoadingState-CNNg5QBP.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { G as Glimmer } from './Glimmer-LoAEnc8h.js';
+import { u as useDataListContext } from './DataListContext-BoTq0ash.js';
+import { u as useActiveLayout } from './useActiveLayout-B7fRenGI.js';
+
+var styles = {"wrapper":"_8cMzUF8XEwY-","loadingItem":"Rh--6fVpkm4-","glimmer":"NFaWWvmxtkw-"};
+
+const LOADING_STATE_LIMIT_ITEMS = 10;
+const DATALIST_LOADINGSTATE_ROW_TEST_ID = "ATL-DataList-LoadingState-Row";
+function DataListLoadingState() {
+    const { headers } = useDataListContext();
+    const { layout, activeBreakpoint } = useActiveLayout();
+    if (!layout)
+        return null;
+    const glimmerSize = activeBreakpoint === "xs" ? "small" : "large";
+    const glimmersFromHeader = Object.keys(headers).reduce((data, key) => (Object.assign(Object.assign({}, data), { [key]: (React.createElement("div", { className: styles.glimmer },
+            React.createElement(Glimmer, { size: glimmerSize }))) })), {});
+    const loadingData = new Array(LOADING_STATE_LIMIT_ITEMS).fill(glimmersFromHeader);
+    return (React.createElement("div", { className: styles.wrapper }, loadingData.map((child, i) => (React.createElement("div", { key: i, className: styles.loadingItem, "data-testid": DATALIST_LOADINGSTATE_ROW_TEST_ID }, layout(child))))));
+}
+
+export { DATALIST_LOADINGSTATE_ROW_TEST_ID as D, LOADING_STATE_LIMIT_ITEMS as L, DataListLoadingState as a };

package/dist/DataListOverflowFade-BrWCta0c.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var React = require('react');
+var useInView = require('./useInView-DLLfp5cO.js');
+var classnames = require('classnames');
+
+const CONTAINER_TEST_ID = "ATL-DataListFilters-Container";
+
+var styles = {"fadeContainer":"jbBRoxlZlNI-","overflowItems":"P6uJ-vHfKrM-","overflowGrid":"MnN8qbS4hw4-","overflowTrigger":"b-5P7Z8eGO8-","overflowLeft":"xzaCS4slLpI-","overflowRight":"Jf227kC8Nu0-"};
+
+function DataListOverflowFade({ children }) {
+    const [leftRef, isLeftVisible] = useInView.useInView_2();
+    const [rightRef, isRightVisible] = useInView.useInView_2();
+    return (React.createElement("div", { "data-testid": CONTAINER_TEST_ID, className: classnames(styles.fadeContainer, {
+            [styles.overflowLeft]: !isLeftVisible,
+            [styles.overflowRight]: !isRightVisible,
+        }) },
+        React.createElement("div", { className: styles.overflowGrid },
+            React.createElement("span", { ref: leftRef, className: styles.overflowTrigger }),
+            React.createElement("div", { className: styles.overflowItems }, children),
+            React.createElement("span", { ref: rightRef, className: styles.overflowTrigger }))));
+}
+
+exports.CONTAINER_TEST_ID = CONTAINER_TEST_ID;
+exports.DataListOverflowFade = DataListOverflowFade;

package/dist/DataListOverflowFade-DgWI4Gxy.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { u as useInView_2 } from './useInView-DJMHuvCd.js';
+import classnames from 'classnames';
+
+const CONTAINER_TEST_ID = "ATL-DataListFilters-Container";
+
+var styles = {"fadeContainer":"jbBRoxlZlNI-","overflowItems":"P6uJ-vHfKrM-","overflowGrid":"MnN8qbS4hw4-","overflowTrigger":"b-5P7Z8eGO8-","overflowLeft":"xzaCS4slLpI-","overflowRight":"Jf227kC8Nu0-"};
+
+function DataListOverflowFade({ children }) {
+    const [leftRef, isLeftVisible] = useInView_2();
+    const [rightRef, isRightVisible] = useInView_2();
+    return (React.createElement("div", { "data-testid": CONTAINER_TEST_ID, className: classnames(styles.fadeContainer, {
+            [styles.overflowLeft]: !isLeftVisible,
+            [styles.overflowRight]: !isRightVisible,
+        }) },
+        React.createElement("div", { className: styles.overflowGrid },
+            React.createElement("span", { ref: leftRef, className: styles.overflowTrigger }),
+            React.createElement("div", { className: styles.overflowItems }, children),
+            React.createElement("span", { ref: rightRef, className: styles.overflowTrigger }))));
+}
+
+export { CONTAINER_TEST_ID as C, DataListOverflowFade as D };

package/dist/DataListSearch-620KKGu0.js

@@ -0,0 +1,63 @@
+'use strict';
+
+var React = require('react');
+var debounce = require('./debounce-1muae-Ut.js');
+var classnames = require('classnames');
+var design = require('@jobber/design');
+var InputText = require('./InputText-DrzKel_0.js');
+var DataListContext = require('./DataListContext-DV8V647K.js');
+var DataList_const = require('./DataList.const-Cq7UG_mT.js');
+var Button = require('./Button-jIxCW0ny.js');
+var AnimatedSwitcher = require('./AnimatedSwitcher-B9Ib0WXS.js');
+
+var styles = {"wrapper":"tj0MOMhLEEY-","searchInput":"SaPMOnvw-3c-","searchInputVisible":"_3S1-91v2SYI-","searchButton":"_9GlBktsUALw-","withNoFilters":"_3Pjrt42x454-"};
+
+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/DataListSearch-CJ9_3dKh.js

@@ -0,0 +1,59 @@
+import React, { useRef, useState, useCallback } from 'react';
+import { d as debounce } from './debounce-D_4D9mM0.js';
+import classnames from 'classnames';
+import { tokens } from '@jobber/design';
+import { I as InputText } from './InputText-BRD2bEln.js';
+import { u as useDataListContext } from './DataListContext-BoTq0ash.js';
+import { S as SEARCH_DEBOUNCE_DELAY } from './DataList.const-B4QxuXgJ.js';
+import { B as Button } from './Button-D4ylkMVt.js';
+import { A as AnimatedSwitcher } from './AnimatedSwitcher-iJcHkx38.js';
+
+var styles = {"wrapper":"tj0MOMhLEEY-","searchInput":"SaPMOnvw-3c-","searchInputVisible":"_3S1-91v2SYI-","searchButton":"_9GlBktsUALw-","withNoFilters":"_3Pjrt42x454-"};
+
+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/DataListSort-BPVJjH7j.js

@@ -0,0 +1,92 @@
+import React from 'react';
+import { u as useDataListContext } from './DataListContext-BoTq0ash.js';
+import { C as Combobox } from './Combobox-DulqUHfB.js';
+import './ComboboxProvider-BB94eXke.js';
+import { C as Chip } from './Chip-BpLuH391.js';
+import './tslib.es6-CI8-zPBP.js';
+import { I as Icon } from './Icon-DroGZxeN.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/DataListSort-CLOs9pi7.js

@@ -0,0 +1,94 @@
+'use strict';
+
+var React = require('react');
+var DataListContext = require('./DataListContext-DV8V647K.js');
+var Combobox = require('./Combobox-C6vTj_rC.js');
+require('./ComboboxProvider-BiK_hfZj.js');
+var Chip = require('./Chip-DfO5Czw7.js');
+require('./tslib.es6-B4nBbkFK.js');
+var Icon = require('./Icon-BrJTp9Vt.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;