@macive/ui 0.0.1 → 0.0.3

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

package/dist/src/components/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Breadcrumbs = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const focus_1 = require("../../utilities/focus");
+const Icon_1 = require("../Icon");
+const Icons_1 = require("../Icons");
+const Text_1 = require("../Text");
+const UnstyledLink_1 = require("../UnstyledLink");
+const Breadcrumbs_styles_1 = __importDefault(require("./Breadcrumbs.styles"));
+function Breadcrumbs({ breadcrumbs, backAction }) {
+    const breadcrumb = backAction !== null && backAction !== void 0 ? backAction : (Array.isArray(breadcrumbs) ? breadcrumbs[breadcrumbs.length - 1] : breadcrumbs);
+    if (breadcrumb == null) {
+        if (process.env.NODE_ENV === 'development') {
+            // eslint-disable-next-line no-console
+            console.warn('Please provide a value to backAction, it will become required in the next major release.');
+        }
+        return null;
+    }
+    const { content } = breadcrumb;
+    const contentMarkup = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: Breadcrumbs_styles_1.default.Icon, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaArrowLeft }) }), (0, jsx_runtime_1.jsx)(Text_1.Text, { as: 'span', visuallyHidden: true, children: content })] }));
+    const breadcrumbMarkup = 'url' in breadcrumb ? ((0, jsx_runtime_1.jsx)(UnstyledLink_1.UnstyledLink, { url: breadcrumb.url, className: Breadcrumbs_styles_1.default.Breadcrumb, onMouseUp: focus_1.handleMouseUpByBlurring, "aria-label": breadcrumb.accessibilityLabel, children: contentMarkup }, content)) : ((0, jsx_runtime_1.jsx)("button", { className: Breadcrumbs_styles_1.default.Breadcrumb, onClick: breadcrumb.onAction, onMouseUp: focus_1.handleMouseUpByBlurring, type: 'button', "aria-label": breadcrumb.accessibilityLabel, children: contentMarkup }, content));
+    return (0, jsx_runtime_1.jsx)("nav", { role: 'navigation', children: breadcrumbMarkup });
+}
+exports.Breadcrumbs = Breadcrumbs;

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

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const styles = {
+    Breadcrumb: 'flex relative item-center align-center m-0 w-max rounded border  border-gray-400 p-[0.45rem] hover:opacity-70 hover:shadow-2xl hover:opacity-70 min-h-full ',
+    Content: 'truncate relative',
+    // Icon: 'h-14 w-14 m-4 ',
+    Icon: 'icon-breadcrumb',
+};
+exports.default = styles;

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

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const BulkActionsClassnames = {
+    "ButtonGroupInner": "BulkActions-ButtonGroupInner",
+    "Popover": "BulkActions-Popover",
+    "Group": "BulkActions-Group",
+    "Group-not-sticky": "BulkActions-Group-not-sticky",
+    "Group-exiting": "BulkActions-Group-exiting",
+    "Group-entered": "BulkActions-Group-entered",
+    "Group-exited": "BulkActions-Group-exited",
+    "Group-measuring": "BulkActions-Group-measuring",
+    "ButtonGroupWrapper": "BulkActions-ButtonGroupWrapper",
+    "BulkActionButton": "BulkActions-BulkActionButton",
+    "disabled": "BulkActions-disabled"
+};
+exports.default = BulkActionsClassnames;

package/dist/src/components/BulkActions/BulkActions.js

@@ -0,0 +1,231 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BulkActions = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_transition_group_1 = require("react-transition-group");
+const clamp_1 = require("../../utilities/clamp");
+const css_1 = require("../../utilities/css");
+const debounce_1 = require("../../utilities/debounce");
+const i18n_1 = require("../../utilities/i18n");
+const ActionList_1 = require("../ActionList");
+const HorizontalStack_1 = require("../HorizontalStack");
+const Popover_1 = require("../Popover");
+// eslint-disable-next-line import/no-deprecated
+const EventListener_1 = require("../EventListener");
+const BulkActions_classnames_1 = __importDefault(require("./BulkActions.classnames"));
+const components_1 = require("./components");
+const MAX_PROMOTED_ACTIONS = 2;
+const BUTTONS_NODE_ADDITIONAL_WIDTH = 64;
+class BulkActionsInner extends react_1.PureComponent {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            popoverVisible: false,
+            containerWidth: 0,
+            measuring: true,
+        };
+        this.containerNode = null;
+        this.buttonsNode = null;
+        this.moreActionsNode = null;
+        this.groupNode = (0, react_1.createRef)();
+        this.promotedActionsWidths = [];
+        this.bulkActionsWidth = 0;
+        this.addedMoreActionsWidthForMeasuring = 0;
+        this.handleResize = (0, debounce_1.debounce)(() => {
+            const { popoverVisible } = this.state;
+            if (this.containerNode) {
+                const containerWidth = this.containerNode.getBoundingClientRect().width;
+                if (containerWidth > 0) {
+                    this.setState({ containerWidth });
+                }
+            }
+            if (popoverVisible) {
+                this.setState({
+                    popoverVisible: false,
+                });
+            }
+        }, 50, { trailing: true });
+        this.setButtonsNode = (node) => {
+            this.buttonsNode = node;
+        };
+        this.setContainerNode = (node) => {
+            this.containerNode = node;
+        };
+        this.setMoreActionsNode = (node) => {
+            this.moreActionsNode = node;
+        };
+        this.togglePopover = () => {
+            if (this.props.onMoreActionPopoverToggle) {
+                this.props.onMoreActionPopoverToggle(this.state.popoverVisible);
+            }
+            this.setState(({ popoverVisible }) => ({
+                popoverVisible: !popoverVisible,
+            }));
+        };
+        this.handleMeasurement = (width) => {
+            const { measuring } = this.state;
+            if (measuring) {
+                this.promotedActionsWidths.push(width);
+            }
+        };
+    }
+    numberOfPromotedActionsToRender() {
+        const { promotedActions } = this.props;
+        const { containerWidth, measuring } = this.state;
+        if (!promotedActions) {
+            return 0;
+        }
+        const containerWidthMinusAdditionalWidth = Math.max(0, containerWidth - BUTTONS_NODE_ADDITIONAL_WIDTH);
+        if (containerWidthMinusAdditionalWidth >= this.bulkActionsWidth || measuring) {
+            return promotedActions.length;
+        }
+        let sufficientSpace = false;
+        let counter = promotedActions.length - 1;
+        let totalWidth = 0;
+        while (!sufficientSpace && counter >= 0) {
+            totalWidth += this.promotedActionsWidths[counter];
+            const widthWithRemovedAction = this.bulkActionsWidth - totalWidth + this.addedMoreActionsWidthForMeasuring;
+            if (containerWidthMinusAdditionalWidth >= widthWithRemovedAction) {
+                sufficientSpace = true;
+            }
+            else {
+                counter--;
+            }
+        }
+        return (0, clamp_1.clamp)(counter, 0, promotedActions.length);
+    }
+    actionSections() {
+        const { actions } = this.props;
+        if (!actions || actions.length === 0) {
+            return;
+        }
+        if (instanceOfBulkActionListSectionArray(actions)) {
+            return actions;
+        }
+        if (instanceOfBulkActionArray(actions)) {
+            return [
+                {
+                    items: actions,
+                },
+            ];
+        }
+    }
+    rolledInPromotedActions() {
+        const { promotedActions } = this.props;
+        const numberOfPromotedActionsToRender = this.numberOfPromotedActionsToRender();
+        if (!promotedActions ||
+            promotedActions.length === 0 ||
+            numberOfPromotedActionsToRender >= promotedActions.length) {
+            return [];
+        }
+        const rolledInPromotedActions = promotedActions.map((action) => {
+            if (instanceOfMenuGroupDescriptor(action)) {
+                return { items: [...action.actions] };
+            }
+            return { items: [action] };
+        });
+        return rolledInPromotedActions.slice(numberOfPromotedActionsToRender);
+    }
+    // eslint-disable-next-line @typescript-eslint/member-ordering
+    componentDidMount() {
+        const { actions, promotedActions } = this.props;
+        if (promotedActions && !actions && this.moreActionsNode) {
+            this.addedMoreActionsWidthForMeasuring = this.moreActionsNode.getBoundingClientRect().width;
+        }
+        this.bulkActionsWidth = this.buttonsNode
+            ? this.buttonsNode.getBoundingClientRect().width - this.addedMoreActionsWidthForMeasuring
+            : 0;
+        if (this.containerNode) {
+            this.setState({
+                containerWidth: this.containerNode.getBoundingClientRect().width,
+                measuring: false,
+            });
+        }
+    }
+    // eslint-disable-next-line @typescript-eslint/member-ordering
+    render() {
+        const { selectMode, disabled, promotedActions, i18n, isSticky, width } = this.props;
+        const actionSections = this.actionSections();
+        if (promotedActions &&
+            promotedActions.length > MAX_PROMOTED_ACTIONS &&
+            process.env.NODE_ENV === 'development') {
+            // eslint-disable-next-line no-console
+            console.warn(i18n.translate('Polaris.ResourceList.BulkActions.warningMessage', {
+                maxPromotedActions: MAX_PROMOTED_ACTIONS,
+            }));
+        }
+        const { popoverVisible, measuring } = this.state;
+        const numberOfPromotedActionsToRender = this.numberOfPromotedActionsToRender();
+        const promotedActionsMarkup = promotedActions && numberOfPromotedActionsToRender > 0
+            ? [...promotedActions].slice(0, numberOfPromotedActionsToRender).map((action, index) => {
+                if (instanceOfMenuGroupDescriptor(action)) {
+                    return ((0, jsx_runtime_1.jsx)(components_1.BulkActionMenu, { ...action, isNewBadgeInBadgeActions: this.isNewBadgeInBadgeActions() }, index));
+                }
+                return ((0, jsx_runtime_1.jsx)(components_1.BulkActionButton, { disabled: disabled, ...action, handleMeasurement: this.handleMeasurement }, index));
+            })
+            : null;
+        const rolledInPromotedActions = this.rolledInPromotedActions();
+        const activatorLabel = !promotedActions || (promotedActions && numberOfPromotedActionsToRender === 0 && !measuring)
+            ? i18n.translate('Polaris.ResourceList.BulkActions.actionsActivatorLabel')
+            : i18n.translate('Polaris.ResourceList.BulkActions.moreActionsActivatorLabel');
+        let combinedActions = [];
+        if (actionSections && rolledInPromotedActions.length > 0) {
+            combinedActions = [...rolledInPromotedActions, ...actionSections];
+        }
+        else if (actionSections) {
+            combinedActions = actionSections;
+        }
+        else if (rolledInPromotedActions.length > 0) {
+            combinedActions = [...rolledInPromotedActions];
+        }
+        const actionsPopover = actionSections || rolledInPromotedActions.length > 0 || measuring ? ((0, jsx_runtime_1.jsx)("div", { className: BulkActions_classnames_1.default.Popover, ref: this.setMoreActionsNode, children: (0, jsx_runtime_1.jsx)(Popover_1.Popover, { active: popoverVisible, activator: (0, jsx_runtime_1.jsx)(components_1.BulkActionButton, { disclosure: true, showContentInButton: !promotedActionsMarkup, onAction: this.togglePopover, content: activatorLabel, disabled: disabled, indicator: this.isNewBadgeInBadgeActions() }), preferredAlignment: 'right', onClose: this.togglePopover, children: (0, jsx_runtime_1.jsx)(ActionList_1.ActionList, { sections: combinedActions, onActionAnyItem: this.togglePopover }) }) })) : null;
+        const groupContent = promotedActionsMarkup || actionsPopover ? ((0, jsx_runtime_1.jsxs)(HorizontalStack_1.HorizontalStack, { gap: '3', children: [promotedActionsMarkup, actionsPopover] })) : null;
+        if (!groupContent) {
+            return null;
+        }
+        const group = ((0, jsx_runtime_1.jsx)(react_transition_group_1.Transition, { timeout: 100, in: selectMode, nodeRef: this.groupNode, children: (status) => {
+                const groupClassName = (0, css_1.classNames)(BulkActions_classnames_1.default.Group, !isSticky && BulkActions_classnames_1.default['Group-not-sticky'], 
+                //@ts-expect-error index
+                !measuring && isSticky && BulkActions_classnames_1.default[`Group-${status}`], measuring && BulkActions_classnames_1.default['Group-measuring']);
+                return ((0, jsx_runtime_1.jsxs)("div", { className: groupClassName, ref: this.groupNode, style: { width }, children: [(0, jsx_runtime_1.jsx)(EventListener_1.EventListener, { event: 'resize', handler: this.handleResize }), (0, jsx_runtime_1.jsx)("div", { className: BulkActions_classnames_1.default.ButtonGroupWrapper, ref: this.setButtonsNode, children: (0, jsx_runtime_1.jsx)("div", { className: BulkActions_classnames_1.default.ButtonGroupInner, children: groupContent }) })] }));
+            } }, 'group'));
+        return (0, jsx_runtime_1.jsx)("div", { ref: this.setContainerNode, children: group });
+    }
+    isNewBadgeInBadgeActions() {
+        var _a;
+        const actions = this.actionSections();
+        if (!actions)
+            return false;
+        for (const action of actions) {
+            for (const item of action.items) {
+                if (((_a = item.badge) === null || _a === void 0 ? void 0 : _a.status) === 'new')
+                    return true;
+            }
+        }
+        return false;
+    }
+}
+function instanceOfBulkActionListSectionArray(actions) {
+    const validList = actions.filter((action) => {
+        return action.items;
+    });
+    return actions.length === validList.length;
+}
+function instanceOfBulkActionArray(actions) {
+    const validList = actions.filter((action) => {
+        return !action.items;
+    });
+    return actions.length === validList.length;
+}
+function instanceOfMenuGroupDescriptor(action) {
+    return 'title' in action;
+}
+function BulkActions(props) {
+    const i18n = (0, i18n_1.useI18n)();
+    return (0, jsx_runtime_1.jsx)(BulkActionsInner, { ...props, i18n: i18n });
+}
+exports.BulkActions = BulkActions;

package/dist/src/components/BulkActions/components/BulkActionButton/BulkActionButton.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BulkActionButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Button_1 = require("../../../Button");
+const Icon_1 = require("../../../Icon");
+// import {Indicator} from '../../../Indicator';
+const use_component_did_mount_1 = require("../../../../utilities/use-component-did-mount");
+const Icons_1 = require("../../../Icons");
+const Tooltip_1 = require("../../../Tooltip");
+const BulkActions_classnames_1 = __importDefault(require("../../BulkActions.classnames"));
+function BulkActionButton({ handleMeasurement, url, external, onAction, content, disclosure, accessibilityLabel, disabled, showContentInButton, }) {
+    const bulkActionButton = (0, react_1.useRef)(null);
+    (0, use_component_did_mount_1.useComponentDidMount)(() => {
+        if (handleMeasurement && bulkActionButton.current) {
+            const width = bulkActionButton.current.getBoundingClientRect().width;
+            handleMeasurement(width);
+        }
+    });
+    const isActivatorForMoreActionsPopover = disclosure && !showContentInButton;
+    const buttonContent = isActivatorForMoreActionsPopover ? undefined : content;
+    const buttonMarkup = ((0, jsx_runtime_1.jsx)(Button_1.Button
+    //@ts-ignore
+    , { 
+        //@ts-ignore
+        external: external, url: url, accessibilityLabel: isActivatorForMoreActionsPopover ? content : accessibilityLabel, disclosure: disclosure && showContentInButton, onClick: onAction, disabled: disabled, size: 'slim', icon: isActivatorForMoreActionsPopover ? (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaCloseCircle, color: 'base' }) : undefined, children: buttonContent }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: BulkActions_classnames_1.default.BulkActionButton, ref: bulkActionButton, children: isActivatorForMoreActionsPopover ? ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { content: content, preferredPosition: 'above', children: buttonMarkup })) : (buttonMarkup) }));
+}
+exports.BulkActionButton = BulkActionButton;

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

package/dist/src/components/BulkActions/components/BulkActionMenu/BulkActionMenu.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BulkActionMenu = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const use_toggle_1 = require("../../../../utilities/use-toggle");
+const ActionList_1 = require("../../../ActionList");
+const Popover_1 = require("../../../Popover");
+const BulkActionButton_1 = require("../BulkActionButton");
+function BulkActionMenu({ title, actions, isNewBadgeInBadgeActions }) {
+    const { value: isVisible, toggle: toggleMenuVisibility } = (0, use_toggle_1.useToggle)(false);
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Popover_1.Popover, { active: isVisible, activator: (0, jsx_runtime_1.jsx)(BulkActionButton_1.BulkActionButton, { disclosure: true, showContentInButton: true, onAction: toggleMenuVisibility, content: title, indicator: isNewBadgeInBadgeActions }), onClose: toggleMenuVisibility, preferInputActivator: true, children: (0, jsx_runtime_1.jsx)(ActionList_1.ActionList, { items: actions, onActionAnyItem: toggleMenuVisibility }) }) }));
+}
+exports.BulkActionMenu = BulkActionMenu;

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

package/dist/src/components/BulkActions/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("./BulkActionButton"), exports);
+__exportStar(require("./BulkActionMenu"), exports);

package/dist/src/components/BulkActions/hooks/index.js

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

package/dist/src/components/BulkActions/hooks/use-is-bulk-actions-sticky.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIsBulkActionsSticky = void 0;
+const react_1 = require("react");
+const debounce_1 = require("../../../utilities/debounce");
+const DEBOUNCE_PERIOD = 250;
+const PADDING_IN_SELECT_MODE = 92;
+function useIsBulkActionsSticky(selectMode) {
+    const hasIOSupport = typeof window !== 'undefined' && Boolean(window.IntersectionObserver);
+    const [isBulkActionsSticky, setIsSticky] = (0, react_1.useState)(false);
+    const [bulkActionsAbsoluteOffset, setBulkActionsAbsoluteOffset] = (0, react_1.useState)(0);
+    const [bulkActionsMaxWidth, setBulkActionsMaxWidth] = (0, react_1.useState)(0);
+    const [bulkActionsOffsetLeft, setBulkActionsOffsetLeft] = (0, react_1.useState)(0);
+    const bulkActionsIntersectionRef = (0, react_1.useRef)(null);
+    const tableMeasurerRef = (0, react_1.useRef)(null);
+    const handleIntersect = (entries) => {
+        entries.forEach((entry) => {
+            setIsSticky(!entry.isIntersecting);
+        });
+    };
+    const options = {
+        root: null,
+        rootMargin: '-12px',
+        threshold: 0,
+    };
+    const observerRef = (0, react_1.useRef)(hasIOSupport ? new IntersectionObserver(handleIntersect, options) : null);
+    const computeTableDimensions = (0, react_1.useCallback)(() => {
+        const node = tableMeasurerRef.current;
+        if (!node) {
+            return {
+                maxWidth: 0,
+                offsetHeight: 0,
+                offsetLeft: 0,
+            };
+        }
+        const box = node.getBoundingClientRect();
+        const paddingHeight = selectMode ? PADDING_IN_SELECT_MODE : 0;
+        const offsetHeight = box.height - paddingHeight;
+        const maxWidth = box.width;
+        const offsetLeft = box.left;
+        setBulkActionsAbsoluteOffset(offsetHeight);
+        setBulkActionsMaxWidth(maxWidth);
+        setBulkActionsOffsetLeft(offsetLeft);
+    }, [selectMode]);
+    (0, react_1.useEffect)(() => {
+        computeTableDimensions();
+        const debouncedComputeTableHeight = (0, debounce_1.debounce)(computeTableDimensions, DEBOUNCE_PERIOD, {
+            trailing: true,
+        });
+        window.addEventListener('resize', debouncedComputeTableHeight);
+        return () => window.removeEventListener('resize', debouncedComputeTableHeight);
+    }, [computeTableDimensions]);
+    (0, react_1.useEffect)(() => {
+        const observer = observerRef.current;
+        if (!observer) {
+            return;
+        }
+        const node = bulkActionsIntersectionRef.current;
+        if (node) {
+            observer.observe(node);
+        }
+        return () => {
+            observer === null || observer === void 0 ? void 0 : observer.disconnect();
+        };
+    }, [bulkActionsIntersectionRef]);
+    return {
+        bulkActionsIntersectionRef,
+        tableMeasurerRef,
+        isBulkActionsSticky,
+        bulkActionsAbsoluteOffset,
+        bulkActionsMaxWidth,
+        bulkActionsOffsetLeft,
+        computeTableDimensions,
+    };
+}
+exports.useIsBulkActionsSticky = useIsBulkActionsSticky;

package/dist/src/components/BulkActions/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("./BulkActions"), exports);
+__exportStar(require("./hooks"), exports);

package/dist/src/components/Button/Button copy.js

@@ -0,0 +1,97 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable jsx-a11y/role-supports-aria-props */
+const react_1 = require("react");
+const Icons_1 = require("../Icons");
+const css_1 = require("../../utilities/css");
+const focus_1 = require("../../utilities/focus");
+const i18n_1 = require("../../utilities/i18n");
+const use_disable_interaction_1 = require("../../utilities/use-disable-interaction");
+const ActionList_1 = require("../ActionList");
+const Icon_1 = require("../Icon");
+const Popover_1 = require("../Popover");
+const Spinner_1 = require("../Spinner");
+const UnstyledButton_1 = require("../UnstyledButton");
+const Button_classnames_1 = __importDefault(require("./Button.classnames"));
+const DEFAULT_SIZE = 'medium';
+function Button({ id, children, url, disabled, external, download, target, submit, loading, pressed, accessibilityLabel, role, ariaControls, ariaExpanded, ariaDescribedBy, ariaChecked, onClick, onFocus, onBlur, onKeyDown, onKeyPress, onKeyUp, onMouseEnter, onTouchStart, onPointerDown, icon, primary, outline, destructive, disclosure, plain, monochrome, removeUnderline, size = DEFAULT_SIZE, textAlign, fullWidth, connectedDisclosure, dataPrimaryLink, }) {
+    const i18n = (0, i18n_1.useI18n)();
+    const isDisabled = disabled || loading;
+    const className = (0, css_1.classNames)(Button_classnames_1.default.Button, primary && Button_classnames_1.default.primary, outline && Button_classnames_1.default.outline, destructive && Button_classnames_1.default.destructive, primary && plain && Button_classnames_1.default.primaryPlain, isDisabled && Button_classnames_1.default.disabled, loading && Button_classnames_1.default.loading, plain && !primary && Button_classnames_1.default.plain, pressed && !disabled && !url && Button_classnames_1.default.pressed, monochrome && Button_classnames_1.default.monochrome, 
+    //@ts-expect-error any size
+    size && size !== DEFAULT_SIZE && Button_classnames_1.default[(0, css_1.variationName)('size', size)], 
+    //@ts-expect-error any size
+    textAlign && Button_classnames_1.default[(0, css_1.variationName)('textAlign', textAlign)], fullWidth && Button_classnames_1.default.fullWidth, icon && children == null && Button_classnames_1.default.iconOnly, connectedDisclosure && Button_classnames_1.default.connectedDisclosure, removeUnderline && Button_classnames_1.default.removeUnderline);
+    const disclosureMarkup = disclosure ? ((0, jsx_runtime_1.jsx)("span", { className: Button_classnames_1.default.Icon, children: (0, jsx_runtime_1.jsx)("div", { className: (0, css_1.classNames)(Button_classnames_1.default.DisclosureIcon, loading && Button_classnames_1.default.hidden), children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: loading ? 'placeholder' : getDisclosureIconSource(disclosure) }) }) })) : null;
+    const iconSource = isIconSource(icon) ? (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: loading ? 'placeholder' : icon }) : icon;
+    const iconMarkup = iconSource ? ((0, jsx_runtime_1.jsx)("span", { className: (0, css_1.classNames)(Button_classnames_1.default.Icon, loading && Button_classnames_1.default.hidden), children: iconSource })) : null;
+    const childMarkup = children ? ((0, jsx_runtime_1.jsx)("span", { className: (0, css_1.classNames)(Button_classnames_1.default.Text, removeUnderline && Button_classnames_1.default.removeUnderline), children: children }, disabled ? 'text-disabled' : 'text')) : null;
+    const spinnerSVGMarkup = loading ? ((0, jsx_runtime_1.jsx)("span", { className: Button_classnames_1.default.Spinner, children: (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { size: 'small', accessibilityLabel: i18n.translate('Polaris.Button.spinnerAccessibilityLabel') }) })) : null;
+    const [disclosureActive, setDisclosureActive] = (0, react_1.useState)(false);
+    const toggleDisclosureActive = (0, react_1.useCallback)(() => {
+        setDisclosureActive((disclosureActive) => !disclosureActive);
+    }, []);
+    const handleClick = (0, use_disable_interaction_1.useDisableClick)(disabled, toggleDisclosureActive);
+    let connectedDisclosureMarkup;
+    if (connectedDisclosure) {
+        const connectedDisclosureClassName = (0, css_1.classNames)(Button_classnames_1.default.Button, primary && Button_classnames_1.default.primary, outline && Button_classnames_1.default.outline, 
+        //@ts-expect-error any on string
+        size && size !== DEFAULT_SIZE && Button_classnames_1.default[(0, css_1.variationName)('size', size)], 
+        //@ts-expect-error any on string
+        textAlign && Button_classnames_1.default[(0, css_1.variationName)('textAlign', textAlign)], destructive && Button_classnames_1.default.destructive, connectedDisclosure.disabled && Button_classnames_1.default.disabled, Button_classnames_1.default.iconOnly, Button_classnames_1.default.ConnectedDisclosure, monochrome && Button_classnames_1.default.monochrome);
+        const defaultLabel = i18n.translate('Polaris.Button.connectedDisclosureAccessibilityLabel');
+        const { disabled, accessibilityLabel: disclosureLabel = defaultLabel } = connectedDisclosure;
+        const connectedDisclosureActivator = ((0, jsx_runtime_1.jsx)("button", { type: 'button', className: connectedDisclosureClassName, "aria-disabled": disabled, "aria-label": disclosureLabel, "aria-describedby": ariaDescribedBy, "aria-checked": ariaChecked, onClick: handleClick, onMouseUp: focus_1.handleMouseUpByBlurring, tabIndex: disabled ? -1 : undefined, children: (0, jsx_runtime_1.jsx)("span", { className: Button_classnames_1.default.Icon, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaDown }) }) }));
+        connectedDisclosureMarkup = ((0, jsx_runtime_1.jsx)(Popover_1.Popover, { active: disclosureActive, onClose: toggleDisclosureActive, activator: connectedDisclosureActivator, preferredAlignment: 'right', children: (0, jsx_runtime_1.jsx)(ActionList_1.ActionList, { items: connectedDisclosure.actions, onActionAnyItem: toggleDisclosureActive }) }));
+    }
+    const commonProps = {
+        id,
+        className,
+        accessibilityLabel,
+        ariaDescribedBy,
+        role,
+        onClick,
+        onFocus,
+        onBlur,
+        onMouseUp: focus_1.handleMouseUpByBlurring,
+        onMouseEnter,
+        onTouchStart,
+        'data-primary-link': dataPrimaryLink,
+    };
+    const linkProps = {
+        url,
+        external,
+        download,
+        target,
+    };
+    const actionProps = {
+        submit,
+        disabled: isDisabled,
+        loading,
+        ariaControls,
+        ariaExpanded,
+        ariaChecked,
+        pressed,
+        onKeyDown,
+        onKeyUp,
+        onKeyPress,
+        onPointerDown,
+    };
+    const buttonMarkup = ((0, jsx_runtime_1.jsx)(UnstyledButton_1.UnstyledButton, { ...commonProps, ...linkProps, ...actionProps, children: (0, jsx_runtime_1.jsxs)("span", { className: Button_classnames_1.default.Content, children: [spinnerSVGMarkup, iconMarkup, childMarkup, disclosureMarkup] }) }));
+    return connectedDisclosureMarkup ? ((0, jsx_runtime_1.jsxs)("div", { className: Button_classnames_1.default.ConnectedDisclosureWrapper, children: [buttonMarkup, connectedDisclosureMarkup] })) : (buttonMarkup);
+}
+exports.Button = Button;
+function isIconSource(x) {
+    return typeof x === 'string' || (typeof x === 'object' && x.body) || typeof x === 'function';
+}
+function getDisclosureIconSource(disclosure) {
+    if (disclosure === 'select') {
+        return Icons_1.MaSort;
+    }
+    return disclosure === 'up' ? Icons_1.MaUp : Icons_1.MaDown;
+}