@macive/ui 0.0.1 → 0.0.2

package/dist/src/components/ActionMenu/components/MenuGroup/MenuGroup.styles.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const styles = {
+    Details: 'mt-4 p-4',
+};
+exports.default = styles;

package/dist/src/components/ActionMenu/components/MenuGroup/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("./MenuGroup"), exports);

package/dist/src/components/ActionMenu/components/RollupActions/RollupActions.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RollupActions = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Icons_1 = require("../../../Icons");
+const i18n_1 = require("../../../../utilities/i18n");
+const use_toggle_1 = require("../../../../utilities/use-toggle");
+const ActionList_1 = require("../../../ActionList");
+const Button_1 = require("../../../Button");
+const Popover_1 = require("../../../Popover");
+const RollupActions_styles_1 = __importDefault(require("./RollupActions.styles"));
+function RollupActions({ accessibilityLabel, items = [], sections = [], }) {
+    const i18n = (0, i18n_1.useI18n)();
+    const { value: rollupOpen, toggle: toggleRollupOpen } = (0, use_toggle_1.useToggle)(false);
+    if (items.length === 0 && sections.length === 0) {
+        return null;
+    }
+    const activatorMarkup = ((0, jsx_runtime_1.jsx)("div", { className: RollupActions_styles_1.default.RollupActivator, children: (0, jsx_runtime_1.jsx)(Button_1.Button, { outline: true, icon: Icons_1.MaDotsHorizontal, accessibilityLabel: accessibilityLabel || i18n.translate('Polaris.ActionMenu.RollupActions.rollupButton'), onClick: toggleRollupOpen }) }));
+    return ((0, jsx_runtime_1.jsx)(Popover_1.Popover, { active: rollupOpen, activator: activatorMarkup, preferredAlignment: 'right', onClose: toggleRollupOpen, hideOnPrint: true, children: (0, jsx_runtime_1.jsx)(ActionList_1.ActionList, { items: items, sections: sections, onActionAnyItem: toggleRollupOpen }) }));
+}
+exports.RollupActions = RollupActions;

package/dist/src/components/ActionMenu/components/RollupActions/RollupActions.styles.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const styles = {
+    RollupActivator: 'text-right ',
+};
+exports.default = styles;

package/dist/src/components/ActionMenu/components/RollupActions/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("./RollupActions"), exports);

package/dist/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SecondaryAction = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const css_1 = require("../../../../utilities/css");
+const Button_1 = require("../../../Button");
+const Tooltip_1 = require("../../../Tooltip");
+const SecondaryAction_styles_1 = __importDefault(require("./SecondaryAction.styles"));
+function SecondaryAction({ children, destructive, helpText, onAction, getOffsetWidth, ...rest }) {
+    const secondaryActionsRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (!getOffsetWidth || !secondaryActionsRef.current)
+            return;
+        getOffsetWidth((_a = secondaryActionsRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth);
+    }, [getOffsetWidth]);
+    const buttonMarkup = ((0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onAction, ...rest, children: children }));
+    const actionMarkup = helpText ? ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { content: helpText, children: buttonMarkup })) : (buttonMarkup);
+    return ((0, jsx_runtime_1.jsx)("span", { className: (0, css_1.classNames)(SecondaryAction_styles_1.default.SecondaryAction, destructive && SecondaryAction_styles_1.default.destructive), ref: secondaryActionsRef, children: actionMarkup }));
+}
+exports.SecondaryAction = SecondaryAction;

package/dist/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.styles.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const styles = {
+    SecondaryAction: '',
+    destructive: '',
+};
+exports.default = styles;

package/dist/src/components/ActionMenu/components/SecondaryAction/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("./SecondaryAction"), exports);

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

@@ -0,0 +1,20 @@
+"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("./Actions"), exports);
+__exportStar(require("./MenuGroup"), exports);
+__exportStar(require("./RollupActions"), exports);
+__exportStar(require("./SecondaryAction"), exports);

package/dist/src/components/ActionMenu/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("./ActionMenu"), exports);

package/dist/src/components/AfterInitialMount/AfterInitialMount.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AfterInitialMount = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const use_is_after_initial_mount_1 = require("../../utilities/use-is-after-initial-mount");
+function AfterInitialMount({ children, onMount, fallback = null }) {
+    const isMounted = (0, use_is_after_initial_mount_1.useIsAfterInitialMount)();
+    const content = isMounted ? children : fallback;
+    (0, react_1.useEffect)(() => {
+        if (isMounted && onMount) {
+            onMount();
+        }
+    }, [isMounted, onMount]);
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: content });
+}
+exports.AfterInitialMount = AfterInitialMount;

package/dist/src/components/AfterInitialMount/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("./AfterInitialMount"), exports);

package/dist/src/components/AlphaCard/AlphaCard.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlphaCard = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const breakpoints_1 = require("../../utilities/breakpoints");
+const Box_1 = require("../Box");
+const AlphaCard = ({ children, background = 'bg', padding = { xs: '4', sm: '5' }, roundedAbove, }) => {
+    const breakpoints = (0, breakpoints_1.useBreakpoints)();
+    const defaultBorderRadius = '2';
+    let hasBorderRadius = !roundedAbove;
+    if (roundedAbove && breakpoints[`${roundedAbove}Up`]) {
+        hasBorderRadius = true;
+    }
+    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { background: background, padding: padding, shadow: 'md', borderRadius: hasBorderRadius ? defaultBorderRadius : undefined, overflowX: 'hidden', overflowY: 'hidden', children: children }));
+};
+exports.AlphaCard = AlphaCard;

package/dist/src/components/AlphaCard/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("./AlphaCard"), exports);

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

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const AlphaFiltersClassnames = {
+    "Container": "AlphaFilters-Container",
+    "SearchField": "AlphaFilters-SearchField",
+    "Spinner": "AlphaFilters-Spinner",
+    "FiltersWrapper": "AlphaFilters-FiltersWrapper",
+    "FiltersInner": "AlphaFilters-FiltersInner",
+    "AddFilter": "AlphaFilters-AddFilter",
+    "FiltersWrapperWithAddButton": "AlphaFilters-FiltersWrapperWithAddButton",
+    "AddFilterActivatorMultiple": "AlphaFilters-AddFilterActivatorMultiple",
+    "FiltersStickyArea": "AlphaFilters-FiltersStickyArea",
+    "ClearAll": "AlphaFilters-ClearAll",
+    "MultiplePinnedFilterClearAll": "AlphaFilters-MultiplePinnedFilterClearAll",
+    "hideQueryField": "AlphaFilters-hideQueryField",
+    "Filters": "AlphaFilters-Filters",
+    "AddFilterActivator": "AlphaFilters-AddFilterActivator"
+};
+exports.default = AlphaFiltersClassnames;

package/dist/src/components/AlphaFilters/AlphaFilters.js

@@ -0,0 +1,171 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlphaFilters = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const css_1 = require("../../utilities/css");
+const i18n_1 = require("../../utilities/i18n");
+const ActionList_1 = require("../ActionList");
+const Box_1 = require("../Box");
+const Button_1 = require("../Button");
+const HorizontalStack_1 = require("../HorizontalStack");
+const Popover_1 = require("../Popover");
+const Spinner_1 = require("../Spinner");
+const Text_1 = require("../Text");
+const UnstyledButton_1 = require("../UnstyledButton");
+const Icons_1 = require("../Icons");
+const AlphaFilters_classnames_1 = __importDefault(require("./AlphaFilters.classnames"));
+const components_1 = require("./components");
+const TRANSITION_DURATION = 'var(--p-motion-duration-150)';
+const TRANSITION_MARGIN = '-36px';
+const defaultStyle = {
+    transition: `opacity ${TRANSITION_DURATION} var(--p-motion-ease)`,
+    opacity: 0,
+};
+const transitionStyles = {
+    entering: { opacity: 1 },
+    entered: { opacity: 1 },
+    exiting: { opacity: 0 },
+    exited: { opacity: 0 },
+    unmounted: { opacity: 0 },
+};
+const defaultFilterStyles = {
+    transition: `opacity ${TRANSITION_DURATION} var(--p-motion-ease), margin ${TRANSITION_DURATION} var(--p-motion-ease)`,
+    opacity: 0,
+    marginTop: TRANSITION_MARGIN,
+};
+const transitionFilterStyles = {
+    entering: {
+        opacity: 1,
+        marginTop: 0,
+    },
+    entered: {
+        opacity: 1,
+        marginTop: 0,
+    },
+    exiting: {
+        opacity: 0,
+        marginTop: TRANSITION_MARGIN,
+    },
+    exited: {
+        opacity: 0,
+        marginTop: TRANSITION_MARGIN,
+    },
+    unmounted: {
+        opacity: 0,
+        marginTop: TRANSITION_MARGIN,
+    },
+};
+function AlphaFilters({ queryValue, queryPlaceholder, focused, filters, appliedFilters, onQueryChange, onQueryClear, onQueryBlur, onQueryFocus, onClearAll, children, disabled, hideFilters, hideQueryField, disableQueryField, borderlessQueryField, loading, disableFilters, mountedState, onAddFilterClick, }) {
+    const i18n = (0, i18n_1.useI18n)();
+    const [popoverActive, setPopoverActive] = (0, react_1.useState)(false);
+    const [localPinnedFilters, setLocalPinnedFilters] = (0, react_1.useState)([]);
+    const hasMounted = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
+        hasMounted.current = true;
+    });
+    const togglePopoverActive = () => setPopoverActive((popoverActive) => !popoverActive);
+    const handleAddFilterClick = () => {
+        onAddFilterClick === null || onAddFilterClick === void 0 ? void 0 : onAddFilterClick();
+        togglePopoverActive();
+    };
+    const appliedFilterKeys = appliedFilters === null || appliedFilters === void 0 ? void 0 : appliedFilters.map(({ key }) => key);
+    const pinnedFiltersFromPropsAndAppliedFilters = filters.filter(({ pinned, key }) => (Boolean(pinned) || (appliedFilterKeys === null || appliedFilterKeys === void 0 ? void 0 : appliedFilterKeys.includes(key))) &&
+        // Filters that are pinned in local state display at the end of our list
+        !localPinnedFilters.find((filterKey) => filterKey === key));
+    const pinnedFiltersFromLocalState = localPinnedFilters
+        .map((key) => filters.find((filter) => filter.key === key))
+        .reduce((acc, filter) => (filter ? [...acc, filter] : acc), []);
+    const pinnedFilters = [...pinnedFiltersFromPropsAndAppliedFilters, ...pinnedFiltersFromLocalState];
+    const onFilterClick = ({ key, onAction }) => () => {
+        // PopoverOverlay will cause a rerender of the component and nuke the
+        // popoverActive state, so we set this as a microtask
+        setTimeout(() => {
+            setLocalPinnedFilters((currentLocalPinnedFilters) => [
+                ...new Set([...currentLocalPinnedFilters, key]),
+            ]);
+            onAction === null || onAction === void 0 ? void 0 : onAction();
+            togglePopoverActive();
+        }, 0);
+    };
+    const filterToActionItem = (filter) => ({
+        ...filter,
+        content: filter.label,
+        onAction: onFilterClick(filter),
+    });
+    const unpinnedFilters = filters.filter((filter) => !pinnedFilters.some(({ key }) => key === filter.key));
+    const unsectionedFilters = unpinnedFilters
+        .filter((filter) => !filter.section)
+        .map(filterToActionItem);
+    const sectionedFilters = unpinnedFilters
+        .filter((filter) => filter.section)
+        .reduce((acc, filter) => {
+        const filterActionItem = filterToActionItem(filter);
+        const sectionIndex = acc.findIndex((section) => section.title === filter.section);
+        if (sectionIndex === -1) {
+            acc.push({
+                title: filter.section,
+                items: [filterActionItem],
+            });
+        }
+        else {
+            acc[sectionIndex].items.push(filterActionItem);
+        }
+        return acc;
+    }, []);
+    const hasOneOrMorePinnedFilters = pinnedFilters.length >= 1;
+    const addFilterActivator = ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: 'bodySm', as: 'p', children: (0, jsx_runtime_1.jsxs)(UnstyledButton_1.UnstyledButton, { type: 'button', className: AlphaFilters_classnames_1.default.AddFilter, onClick: handleAddFilterClick, "aria-label": i18n.translate('Polaris.Filters.addFilter'), disabled: disabled ||
+                    (unsectionedFilters.length === 0 && sectionedFilters.length === 0) ||
+                    disableFilters, children: [(0, jsx_runtime_1.jsx)("span", { children: i18n.translate('Polaris.Filters.addFilter') }), (0, jsx_runtime_1.jsx)(Icons_1.MaPlus, {})] }) }) }));
+    const handleClearAllFilters = () => {
+        setLocalPinnedFilters([]);
+        onClearAll === null || onClearAll === void 0 ? void 0 : onClearAll();
+    };
+    const shouldShowAddButton = filters.some((filter) => !filter.pinned);
+    const additionalContent = (0, react_1.useMemo)(() => {
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: AlphaFilters_classnames_1.default.Spinner, children: loading ? (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { size: 'small' }) : null }), children] }));
+    }, [loading, children]);
+    const queryFieldMarkup = hideQueryField ? null : ((0, jsx_runtime_1.jsx)("div", { className: AlphaFilters_classnames_1.default.Container, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { paddingBlockStart: {
+                xs: '2',
+                md: '2',
+            }, paddingBlockEnd: {
+                xs: '2',
+                // md: '2',
+            }, paddingInlineStart: '2', paddingInlineEnd: {
+                xs: '4',
+                md: '3',
+            }, children: (0, jsx_runtime_1.jsxs)(HorizontalStack_1.HorizontalStack, { align: 'start', blockAlign: 'center', gap: {
+                    xs: '4',
+                    md: '3',
+                }, children: [(0, jsx_runtime_1.jsx)("div", { className: AlphaFilters_classnames_1.default.SearchField, style: mountedState
+                            ? {
+                                ...defaultStyle,
+                                ...transitionStyles[mountedState],
+                            }
+                            : undefined, children: (0, jsx_runtime_1.jsx)(components_1.SearchField, { onChange: onQueryChange, onFocus: onQueryFocus, onBlur: onQueryBlur, onClear: onQueryClear, value: queryValue, placeholder: queryPlaceholder, focused: focused, disabled: disabled || disableQueryField, borderlessQueryField: borderlessQueryField }) }), additionalContent] }) }) }));
+    const mountedStateStyles = mountedState && !hideQueryField
+        ? {
+            ...defaultFilterStyles,
+            ...transitionFilterStyles[mountedState],
+        }
+        : undefined;
+    const pinnedFiltersMarkup = pinnedFilters.map(({ key: filterKey, ...pinnedFilter }) => {
+        const appliedFilter = appliedFilters === null || appliedFilters === void 0 ? void 0 : appliedFilters.find(({ key }) => key === filterKey);
+        const handleFilterPillRemove = () => {
+            setLocalPinnedFilters((currentLocalPinnedFilters) => currentLocalPinnedFilters.filter((key) => key !== filterKey));
+            appliedFilter === null || appliedFilter === void 0 ? void 0 : appliedFilter.onRemove(filterKey);
+        };
+        return ((0, jsx_runtime_1.jsx)(components_1.FilterPill, { ...pinnedFilter, initialActive: hasMounted.current && !pinnedFilter.pinned && !appliedFilter, label: (appliedFilter === null || appliedFilter === void 0 ? void 0 : appliedFilter.label) || pinnedFilter.label, filterKey: filterKey, selected: appliedFilterKeys === null || appliedFilterKeys === void 0 ? void 0 : appliedFilterKeys.includes(filterKey), onRemove: handleFilterPillRemove, disabled: pinnedFilter.disabled || disableFilters }, filterKey));
+    });
+    const addButton = shouldShowAddButton ? ((0, jsx_runtime_1.jsx)("div", { className: (0, css_1.classNames)(AlphaFilters_classnames_1.default.AddFilterActivator, hasOneOrMorePinnedFilters && AlphaFilters_classnames_1.default.AddFilterActivatorMultiple), children: (0, jsx_runtime_1.jsx)(Popover_1.Popover, { active: popoverActive && !disabled, activator: addFilterActivator, onClose: togglePopoverActive, children: (0, jsx_runtime_1.jsx)(ActionList_1.ActionList, { actionRole: 'menuitem', items: unsectionedFilters, sections: sectionedFilters }) }) })) : null;
+    const clearAllMarkup = (appliedFilters === null || appliedFilters === void 0 ? void 0 : appliedFilters.length) || localPinnedFilters.length ? ((0, jsx_runtime_1.jsx)("div", { className: (0, css_1.classNames)(AlphaFilters_classnames_1.default.ClearAll, hasOneOrMorePinnedFilters && shouldShowAddButton && AlphaFilters_classnames_1.default.MultiplePinnedFilterClearAll), children: (0, jsx_runtime_1.jsx)(Button_1.Button, { size: 'micro', plain: true, onClick: handleClearAllFilters, removeUnderline: true, children: i18n.translate('Polaris.Filters.clearFilters') }) })) : null;
+    const filtersMarkup = hideFilters || filters.length === 0 ? null : ((0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.classNames)(AlphaFilters_classnames_1.default.FiltersWrapper, shouldShowAddButton && hasOneOrMorePinnedFilters && AlphaFilters_classnames_1.default.FiltersWrapperWithAddButton), "aria-live": 'polite', style: mountedStateStyles, children: [(0, jsx_runtime_1.jsx)("div", { className: (0, css_1.classNames)(AlphaFilters_classnames_1.default.FiltersInner), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.classNames)(AlphaFilters_classnames_1.default.FiltersStickyArea), children: [pinnedFiltersMarkup, addButton, clearAllMarkup] }) }), hideQueryField ? ((0, jsx_runtime_1.jsx)(Box_1.Box, { paddingInlineEnd: '3', paddingBlockStart: '2', paddingBlockEnd: '2', children: (0, jsx_runtime_1.jsx)(HorizontalStack_1.HorizontalStack, { align: 'start', blockAlign: 'center', gap: {
+                        xs: '4',
+                        md: '3',
+                    }, children: additionalContent }) })) : null] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.classNames)(AlphaFilters_classnames_1.default.Filters, hideQueryField && AlphaFilters_classnames_1.default.hideQueryField), children: [queryFieldMarkup, filtersMarkup] }));
+}
+exports.AlphaFilters = AlphaFilters;

package/dist/src/components/AlphaFilters/components/FilterPill/FilterPill.classnames.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const FilterPillClassnames = {
+    "FilterButton": "FilterPill-FilterButton",
+    "focusedFilterButton:focus-within:not(:active)": "FilterPill-focusedFilterButton:focus-within:not(:active)",
+    "disabledFilterButton": "FilterPill-disabledFilterButton",
+    "ActiveFilterButton": "FilterPill-ActiveFilterButton",
+    "PlainButton": "FilterPill-PlainButton",
+    "ToggleButton": "FilterPill-ToggleButton",
+    "Label": "FilterPill-Label",
+    "clearButton": "FilterPill-clearButton",
+    "IconWrapper": "FilterPill-IconWrapper",
+    "PopoverWrapper": "FilterPill-PopoverWrapper",
+    "FocusFilterButton": "FilterPill-FocusFilterButton",
+    "focusedFilterButton": "FilterPill-focusedFilterButton"
+};
+exports.default = FilterPillClassnames;

package/dist/src/components/AlphaFilters/components/FilterPill/FilterPill.js

@@ -0,0 +1,66 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilterPill = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const breakpoints_1 = require("../../../../utilities/breakpoints");
+const css_1 = require("../../../../utilities/css");
+const i18n_1 = require("../../../../utilities/i18n");
+const use_toggle_1 = require("../../../../utilities/use-toggle");
+const Button_1 = require("../../../Button");
+const HorizontalStack_1 = require("../../../HorizontalStack");
+const Icon_1 = require("../../../Icon");
+const Popover_1 = require("../../../Popover");
+const Text_1 = require("../../../Text");
+const UnstyledButton_1 = require("../../../UnstyledButton");
+const VerticalStack_1 = require("../../../VerticalStack");
+const Icons_1 = require("../../../Icons");
+const FilterPill_classnames_1 = __importDefault(require("./FilterPill.classnames"));
+function FilterPill({ filterKey, label, filter, disabled, hideClearButton, selected, initialActive, closeOnChildOverlayClick, onRemove, onClick, }) {
+    const i18n = (0, i18n_1.useI18n)();
+    const { mdDown } = (0, breakpoints_1.useBreakpoints)();
+    const elementRef = (0, react_1.useRef)(null);
+    const { value: focused, setTrue: setFocusedTrue, setFalse: setFocusedFalse } = (0, use_toggle_1.useToggle)(false);
+    const [popoverActive, setPopoverActive] = (0, react_1.useState)(initialActive);
+    (0, react_1.useEffect)(() => {
+        var _a, _b;
+        const node = elementRef.current;
+        if (!node || !popoverActive) {
+            return;
+        }
+        const parent = (_a = node.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement;
+        if (!parent) {
+            return;
+        }
+        (_b = parent.scroll) === null || _b === void 0 ? void 0 : _b.call(parent, {
+            left: node.offsetLeft,
+        });
+    }, [elementRef, popoverActive]);
+    const togglePopoverActive = () => {
+        if (filter) {
+            setPopoverActive((popoverActive) => !popoverActive);
+        }
+        if (onClick) {
+            onClick(filterKey);
+        }
+    };
+    const handleClear = () => {
+        if (onRemove)
+            onRemove(filterKey);
+        setPopoverActive(false);
+    };
+    const buttonClasses = (0, css_1.classNames)(FilterPill_classnames_1.default.FilterButton, selected && FilterPill_classnames_1.default.ActiveFilterButton, popoverActive && FilterPill_classnames_1.default.FocusFilterButton, focused && FilterPill_classnames_1.default.focusedFilterButton, disabled && FilterPill_classnames_1.default.disabledFilterButton);
+    const clearButtonClassNames = (0, css_1.classNames)(FilterPill_classnames_1.default.PlainButton, FilterPill_classnames_1.default.clearButton);
+    const toggleButtonClassNames = (0, css_1.classNames)(FilterPill_classnames_1.default.PlainButton, FilterPill_classnames_1.default.ToggleButton);
+    const wrappedLabel = ((0, jsx_runtime_1.jsx)("div", { className: FilterPill_classnames_1.default.Label, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: mdDown ? 'bodyMd' : 'bodySm', as: 'span', children: label }) }));
+    const activator = ((0, jsx_runtime_1.jsx)("div", { className: buttonClasses, children: (0, jsx_runtime_1.jsxs)(HorizontalStack_1.HorizontalStack, { gap: '0', wrap: false, children: [(0, jsx_runtime_1.jsx)(UnstyledButton_1.UnstyledButton, { onFocus: setFocusedTrue, onBlur: setFocusedFalse, onClick: togglePopoverActive, className: toggleButtonClassNames, type: 'button', disabled: disabled, children: (0, jsx_runtime_1.jsx)(HorizontalStack_1.HorizontalStack, { wrap: false, align: 'center', blockAlign: 'center', gap: '0', children: selected ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: wrappedLabel })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [wrappedLabel, (0, jsx_runtime_1.jsx)("div", { className: FilterPill_classnames_1.default.IconWrapper, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaDown, color: 'base' }) })] })) }) }), selected ? ((0, jsx_runtime_1.jsx)(UnstyledButton_1.UnstyledButton, { onClick: handleClear, className: clearButtonClassNames, type: 'button', "aria-label": i18n.translate('Polaris.FilterPill.clear'), disabled: disabled, children: (0, jsx_runtime_1.jsx)("div", { className: FilterPill_classnames_1.default.IconWrapper, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaCloseCircle, color: 'base' }) }) })) : null] }) }));
+    const clearButtonMarkup = !hideClearButton && ((0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: handleClear, plain: true, disabled: !selected, textAlign: 'left', children: i18n.translate('Polaris.FilterPill.clear') }));
+    if (disabled) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { ref: elementRef, children: (0, jsx_runtime_1.jsx)(Popover_1.Popover, { active: popoverActive && !disabled, activator: activator, onClose: togglePopoverActive, preferredAlignment: 'left', preventCloseOnChildOverlayClick: !closeOnChildOverlayClick, children: (0, jsx_runtime_1.jsx)("div", { className: FilterPill_classnames_1.default.PopoverWrapper, children: (0, jsx_runtime_1.jsx)(Popover_1.Popover.Section, { children: (0, jsx_runtime_1.jsxs)(VerticalStack_1.VerticalStack, { gap: '1', children: [filter, clearButtonMarkup] }) }) }) }, filterKey) }));
+}
+exports.FilterPill = FilterPill;

package/dist/src/components/AlphaFilters/components/FilterPill/FilterPill.styles.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const classNames = {
+    FilterButton: 'Filter-Pill-FilterButton',
+    PlainButton: 'Filter-Pill-PlainButton',
+    'PlainButton path': 'Filter-Pill-PlainButton path',
+    "PlainButton[aria-disabled='true'] path": "Filter-Pill-PlainButton[aria-disabled='true'] path",
+    ToggleButton: 'Filter-Pill-ToggleButton',
+    Label: 'Filter-Pill-Label',
+    'ActiveFilterButton ': 'Filter-Pill-ActiveFilterButton ',
+    clearButton: 'Filter-Pill-clearButton',
+    PopoverWrapper: 'Filter-Pill-PopoverWrapper',
+    IconWrapper: 'Filter-Pill-IconWrapper',
+    ActiveFilterButton: 'Filter-Pill-ActiveFilterButton',
+    disabledFilterButton: 'Filter-Pill-disabledFilterButton',
+    focusedFilterButton: 'Filter-Pill-focusedFilterButton',
+    FocusFilterButton: 'Filter-Pill-FocusFilterButton',
+};
+exports.default = classNames;

package/dist/src/components/AlphaFilters/components/FilterPill/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("./FilterPill"), exports);

package/dist/src/components/AlphaFilters/components/SearchField/SearchField.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const TextField_1 = require("../../../TextField");
+function SearchField({ onChange, onClear, onFocus, onBlur, focused, value, placeholder, disabled, borderlessQueryField, }) {
+    function handleChange(value) {
+        onChange(value);
+    }
+    function handleClear() {
+        if (onClear) {
+            onClear();
+        }
+        else {
+            onChange('');
+        }
+    }
+    return ((0, jsx_runtime_1.jsx)(TextField_1.TextField, { value: value, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, label: placeholder, labelHidden: true, autoComplete: "off", focused: focused, placeholder: placeholder, clearButton: true, onClearButtonClick: handleClear, disabled: disabled, borderless: borderlessQueryField }));
+}
+exports.SearchField = SearchField;

package/dist/src/components/AlphaFilters/components/SearchField/index.js

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

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

@@ -0,0 +1,18 @@
+"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("./FilterPill"), exports);
+__exportStar(require("./SearchField"), exports);

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

@@ -0,0 +1,18 @@
+"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("./AlphaFilters"), exports);
+__exportStar(require("./components"), exports);