@macive/ui 0.0.1 → 0.0.3

package/dist/src/components/ResourceItem/ResourceItem.js

@@ -0,0 +1,201 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResourceItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_fast_compare_1 = __importDefault(require("react-fast-compare"));
+const breakpoints_1 = require("../../utilities/breakpoints");
+const css_1 = require("../../utilities/css");
+const i18n_1 = require("../../utilities/i18n");
+const resource_list_1 = require("../../utilities/resource-list");
+const unique_id_1 = require("../../utilities/unique-id");
+const ActionList_1 = require("../ActionList");
+const Bleed_1 = require("../Bleed");
+const Box_1 = require("../Box");
+const Button_1 = require("../Button");
+const ButtonGroup_1 = require("../ButtonGroup");
+const Checkbox_1 = require("../Checkbox");
+const HorizontalGrid_1 = require("../HorizontalGrid");
+const HorizontalStack_1 = require("../HorizontalStack");
+const Popover_1 = require("../Popover");
+const UnstyledLink_1 = require("../UnstyledLink");
+const Icons_1 = require("../Icons");
+const ResourceItem_classnames_1 = __importDefault(require("./ResourceItem.classnames"));
+const getUniqueCheckboxID = (0, unique_id_1.globalIdGeneratorFactory)('ResourceListItemCheckbox');
+const getUniqueOverlayID = (0, unique_id_1.globalIdGeneratorFactory)('ResourceListItemOverlay');
+class BaseResourceItem extends react_1.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            actionsMenuVisible: false,
+            focused: false,
+            focusedInner: false,
+            selected: isSelected(this.props.id, this.props.context.selectedItems),
+        };
+        this.node = null;
+        this.checkboxId = getUniqueCheckboxID();
+        this.overlayId = getUniqueOverlayID();
+        this.buttonOverlay = (0, react_1.createRef)();
+        this.setNode = (node) => {
+            this.node = node;
+        };
+        this.handleFocus = (event) => {
+            if (event.target === this.buttonOverlay.current ||
+                (this.node && event.target === this.node.querySelector(`#${this.overlayId}`))) {
+                this.setState({ focused: true, focusedInner: false });
+            }
+            else if (this.node && this.node.contains(event.target)) {
+                this.setState({ focused: true, focusedInner: true });
+            }
+        };
+        this.handleBlur = ({ relatedTarget }) => {
+            if (this.node && relatedTarget instanceof Element && this.node.contains(relatedTarget)) {
+                return;
+            }
+            this.setState({ focused: false, focusedInner: false });
+        };
+        this.handleMouseOut = () => {
+            this.state.focused && this.setState({ focused: false, focusedInner: false });
+        };
+        this.handleLargerSelectionArea = (event) => {
+            stopPropagation(event);
+            this.handleSelection(!this.state.selected, event.nativeEvent.shiftKey);
+        };
+        this.handleSelection = (value, shiftKey) => {
+            const { id, sortOrder, context: { onSelectionChange }, } = this.props;
+            if (id == null || onSelectionChange == null) {
+                return;
+            }
+            this.setState({ focused: value, focusedInner: value });
+            onSelectionChange(value, id, sortOrder, shiftKey);
+        };
+        this.handleClick = (event) => {
+            stopPropagation(event);
+            const { id, onClick, url, context: { selectMode }, } = this.props;
+            const { ctrlKey, metaKey } = event.nativeEvent;
+            const anchor = this.node && this.node.querySelector('a');
+            if (selectMode) {
+                this.handleLargerSelectionArea(event);
+                return;
+            }
+            if (anchor === event.target) {
+                return;
+            }
+            if (onClick) {
+                onClick(id);
+            }
+            if (url && (ctrlKey || metaKey)) {
+                window.open(url, '_blank');
+                return;
+            }
+            if (url && anchor) {
+                anchor.click();
+            }
+        };
+        // This fires onClick when there is a URL on the item
+        this.handleKeyUp = (event) => {
+            const { onClick = noop, context: { selectMode }, } = this.props;
+            const { key } = event;
+            if (key === 'Enter' && this.props.url && !selectMode) {
+                onClick();
+            }
+        };
+        this.handleActionsClick = () => {
+            this.setState(({ actionsMenuVisible }) => ({
+                actionsMenuVisible: !actionsMenuVisible,
+            }));
+        };
+        this.handleCloseRequest = () => {
+            this.setState({ actionsMenuVisible: false });
+        };
+    }
+    static getDerivedStateFromProps(nextProps, prevState) {
+        const selected = isSelected(nextProps.id, nextProps.context.selectedItems);
+        if (prevState.selected === selected) {
+            return null;
+        }
+        return { selected };
+    }
+    shouldComponentUpdate(nextProps, nextState) {
+        const { children: nextChildren, context: { selectedItems: nextSelectedItems, ...restNextContext }, ...restNextProps } = nextProps;
+        const { children, context: { selectedItems, ...restContext }, ...restProps } = this.props;
+        const nextSelectMode = nextProps.context.selectMode;
+        return (!(0, react_fast_compare_1.default)(this.state, nextState) ||
+            this.props.context.selectMode !== nextSelectMode ||
+            (!nextProps.context.selectMode &&
+                (!(0, react_fast_compare_1.default)(restProps, restNextProps) || !(0, react_fast_compare_1.default)(restContext, restNextContext))));
+    }
+    render() {
+        const { children, url, external, media, shortcutActions, ariaControls, ariaExpanded, persistActions = false, accessibilityLabel, name, context: { selectable, selectMode, hasBulkActions, loading, resourceName }, i18n, verticalAlignment, dataHref, breakpoints, } = this.props;
+        const { actionsMenuVisible, focused, focusedInner, selected } = this.state;
+        let ownedMarkup = null;
+        let handleMarkup = null;
+        if (selectable) {
+            const checkboxAccessibilityLabel = name || accessibilityLabel || i18n.translate('Polaris.Common.checkbox');
+            handleMarkup = ((0, jsx_runtime_1.jsx)("div", { onClick: this.handleLargerSelectionArea, children: (0, jsx_runtime_1.jsx)(Bleed_1.Bleed, { marginBlock: '2', marginInline: '3', children: (0, jsx_runtime_1.jsx)(Box_1.Box, { zIndex: 'var(--pc-resource-item-content-stacking-order)', paddingInlineStart: '3', paddingInlineEnd: '3', paddingBlockStart: '3', paddingBlockEnd: '2', children: (0, jsx_runtime_1.jsx)("div", { onClick: stopPropagation, children: (0, jsx_runtime_1.jsx)("div", { onChange: this.handleLargerSelectionArea, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { id: this.checkboxId, label: checkboxAccessibilityLabel, labelHidden: true, checked: selected, disabled: loading }) }) }) }) }) }));
+        }
+        if (media || selectable) {
+            ownedMarkup = ((0, jsx_runtime_1.jsxs)(HorizontalStack_1.HorizontalStack, { gap: '4', blockAlign: media && selectable ? 'center' : getAlignment(verticalAlignment), children: [handleMarkup, media] }));
+        }
+        const className = (0, css_1.classNames)(ResourceItem_classnames_1.default.ResourceItem, focused && ResourceItem_classnames_1.default.focused, selectable && ResourceItem_classnames_1.default.selectable, selected && ResourceItem_classnames_1.default.selected, selectMode && ResourceItem_classnames_1.default.selectMode, persistActions && ResourceItem_classnames_1.default.persistActions, focusedInner && ResourceItem_classnames_1.default.focusedInner);
+        const listItemClassName = (0, css_1.classNames)(ResourceItem_classnames_1.default.ListItem, focused && !focusedInner && ResourceItem_classnames_1.default.focused, hasBulkActions && ResourceItem_classnames_1.default.hasBulkActions);
+        let actionsMarkup = null;
+        let disclosureMarkup = null;
+        if (shortcutActions && !loading) {
+            if (persistActions) {
+                actionsMarkup = (breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.lgUp) ? ((0, jsx_runtime_1.jsx)("div", { className: ResourceItem_classnames_1.default.Actions, onClick: stopPropagation, children: (0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup, { children: (0, Button_1.buttonsFrom)(shortcutActions, { plain: true }) }) })) : null;
+                const disclosureAccessibilityLabel = name
+                    ? i18n.translate('Polaris.ResourceList.Item.actionsDropdownLabel', {
+                        accessibilityLabel: name,
+                    })
+                    : i18n.translate('Polaris.ResourceList.Item.actionsDropdown');
+                disclosureMarkup =
+                    !selectMode && (breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.lgDown) ? ((0, jsx_runtime_1.jsx)("div", { onClick: stopPropagation, children: (0, jsx_runtime_1.jsx)(Popover_1.Popover, { activator: (0, jsx_runtime_1.jsx)(Button_1.Button, { accessibilityLabel: disclosureAccessibilityLabel, onClick: this.handleActionsClick, plain: true, icon: Icons_1.MaMore }), onClose: this.handleCloseRequest, active: actionsMenuVisible, children: (0, jsx_runtime_1.jsx)(ActionList_1.ActionList, { items: shortcutActions }) }) })) : null;
+            }
+            else if (breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.lgUp) {
+                actionsMarkup = ((0, jsx_runtime_1.jsx)("div", { className: ResourceItem_classnames_1.default.Actions, onClick: stopPropagation, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { position: 'absolute', insetBlockStart: '4', insetInlineEnd: '5', children: (0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup, { segmented: true, children: (0, Button_1.buttonsFrom)(shortcutActions, { size: 'slim' }) }) }) }));
+            }
+        }
+        const containerMarkup = ((0, jsx_runtime_1.jsx)(Box_1.Box, { id: this.props.id, position: 'relative', padding: '3', paddingInlineStart: { xs: '4', sm: '5' }, paddingInlineEnd: { xs: '4', sm: '5' }, zIndex: 'var(--pc-resource-item-content-stacking-order)', children: (0, jsx_runtime_1.jsxs)(HorizontalGrid_1.HorizontalGrid, { columns: { xs: '1fr auto' }, children: [(0, jsx_runtime_1.jsxs)(HorizontalGrid_1.HorizontalGrid, { columns: { xs: media || selectable ? 'auto 1fr' : '1fr' }, gap: '5', children: [ownedMarkup, (0, jsx_runtime_1.jsx)(HorizontalStack_1.HorizontalStack, { gap: '4', blockAlign: getAlignment(verticalAlignment), children: (0, jsx_runtime_1.jsx)(Box_1.Box, { width: '100%', padding: '0', paddingInlineStart: '0', paddingInlineEnd: '0', children: children }) })] }), actionsMarkup, disclosureMarkup] }) }));
+        const tabIndex = loading ? -1 : 0;
+        const ariaLabel = accessibilityLabel ||
+            i18n.translate('Polaris.ResourceList.Item.viewItem', {
+                itemName: name || (resourceName && resourceName.singular) || '',
+            });
+        const accessibleMarkup = url ? ((0, jsx_runtime_1.jsx)(UnstyledLink_1.UnstyledLink, { "aria-describedby": this.props.id, "aria-label": ariaLabel, className: ResourceItem_classnames_1.default.Link, url: url, external: external, tabIndex: tabIndex, id: this.overlayId })) : ((0, jsx_runtime_1.jsx)("button", { className: ResourceItem_classnames_1.default.Button, "aria-label": ariaLabel, "aria-controls": ariaControls, "aria-expanded": ariaExpanded, onClick: this.handleClick, tabIndex: tabIndex, ref: this.buttonOverlay }));
+        return ((0, jsx_runtime_1.jsx)("li", { className: listItemClassName, "data-href": dataHref, children: (0, jsx_runtime_1.jsx)("div", { className: ResourceItem_classnames_1.default.ItemWrapper, children: (0, jsx_runtime_1.jsxs)("div", { ref: this.setNode, className: className, onClick: this.handleClick, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyUp: this.handleKeyUp, onMouseOut: this.handleMouseOut, "data-href": url, children: [accessibleMarkup, containerMarkup] }) }) }));
+    }
+}
+function noop() { }
+function stopPropagation(event) {
+    event.stopPropagation();
+}
+function isSelected(id, selectedItems) {
+    return Boolean(selectedItems &&
+        ((Array.isArray(selectedItems) && selectedItems.includes(id)) ||
+            selectedItems === resource_list_1.SELECT_ALL_ITEMS));
+}
+function ResourceItem(props) {
+    const breakpoints = (0, breakpoints_1.useBreakpoints)();
+    return ((0, jsx_runtime_1.jsx)(BaseResourceItem, { ...props, breakpoints: breakpoints, context: (0, react_1.useContext)(resource_list_1.ResourceListContext), i18n: (0, i18n_1.useI18n)() }));
+}
+exports.ResourceItem = ResourceItem;
+function getAlignment(alignment) {
+    switch (alignment) {
+        case 'leading':
+            return 'start';
+        case 'trailing':
+            return 'end';
+        case 'center':
+            return 'center';
+        case 'fill':
+            return 'stretch';
+        case 'baseline':
+            return 'baseline';
+        default:
+            return 'start';
+    }
+}

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

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

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const ResourceListClassnames = {
+    "HeaderWrapper-hasSort": "ResourceList-HeaderWrapper-hasSort",
+    "HeaderWrapper-hasAlternateTool": "ResourceList-HeaderWrapper-hasAlternateTool",
+    "HeaderWrapper-hasSelect": "ResourceList-HeaderWrapper-hasSelect",
+    "HeaderWrapper-inSelectMode": "ResourceList-HeaderWrapper-inSelectMode",
+    "disabledPointerEvents": "ResourceList-disabledPointerEvents",
+    "FiltersWrapper": "ResourceList-FiltersWrapper",
+    "ResourceList": "ResourceList-ResourceList",
+    "HeaderOuterWrapper": "ResourceList-HeaderOuterWrapper",
+    "HeaderWrapper-disabled": "ResourceList-HeaderWrapper-disabled",
+    "HeaderWrapper-overlay": "ResourceList-HeaderWrapper-overlay",
+    "FiltersWrapper+.HeaderOuterWrapper": "ResourceList-FiltersWrapper+.HeaderOuterWrapper",
+    "HeaderWrapper": "ResourceList-HeaderWrapper",
+    "HeaderWrapper-isSticky": "ResourceList-HeaderWrapper-isSticky",
+    "HeaderContentWrapper": "ResourceList-HeaderContentWrapper",
+    "AlternateToolWrapper": "ResourceList-AlternateToolWrapper",
+    "SortWrapper": "ResourceList-SortWrapper",
+    "HeaderTitleWrapper": "ResourceList-HeaderTitleWrapper",
+    "BulkActionsWrapper": "ResourceList-BulkActionsWrapper",
+    "BulkActionsWrapperSticky": "ResourceList-BulkActionsWrapperSticky",
+    "SelectAllActionsWrapper": "ResourceList-SelectAllActionsWrapper",
+    "CheckableButtonWrapper": "ResourceList-CheckableButtonWrapper",
+    "SelectButtonWrapper": "ResourceList-SelectButtonWrapper",
+    "EmptySearchResultWrapper": "ResourceList-EmptySearchResultWrapper",
+    "5em)": "ResourceList-5em)",
+    "ResourceListWrapper": "ResourceList-ResourceListWrapper",
+    "ResourceListWrapperWithBulkActions": "ResourceList-ResourceListWrapperWithBulkActions",
+    "ItemWrapper": "ResourceList-ItemWrapper",
+    "ItemWrapper-isLoading": "ResourceList-ItemWrapper-isLoading",
+    "SpinnerContainer": "ResourceList-SpinnerContainer",
+    "LoadingOverlay": "ResourceList-LoadingOverlay",
+    "DisabledPointerEvents": "ResourceList-DisabledPointerEvents",
+    "disableTextSelection": "ResourceList-disableTextSelection"
+};
+exports.default = ResourceListClassnames;

package/dist/src/components/ResourceList/ResourceList.js

@@ -0,0 +1,352 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResourceList = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const components_1 = require("../../utilities/components");
+const css_1 = require("../../utilities/css");
+const debounce_1 = require("../../utilities/debounce");
+const Button_1 = require("../Button");
+// eslint-disable-next-line import/no-deprecated
+const i18n_1 = require("../../utilities/i18n");
+const resource_list_1 = require("../../utilities/resource-list");
+const use_lazy_ref_1 = require("../../utilities/use-lazy-ref");
+const BulkActions_1 = require("../BulkActions");
+const CheckableButton_1 = require("../CheckableButton");
+const EmptySearchResult_1 = require("../EmptySearchResult");
+const EventListener_1 = require("../EventListener");
+const ResourceItem_1 = require("../ResourceItem");
+const Select_1 = require("../Select");
+const SelectAllActions_1 = require("../SelectAllActions");
+const Spinner_1 = require("../Spinner");
+const Sticky_1 = require("../Sticky");
+const Icons_1 = require("../Icons");
+const ResourceList_classnames_1 = __importDefault(require("./ResourceList.classnames"));
+const SMALL_SPINNER_HEIGHT = 28;
+const LARGE_SPINNER_HEIGHT = 45;
+function getAllItemsOnPage(items, idForItem) {
+    return items.map((item, index) => {
+        return idForItem(item, index);
+    });
+}
+const isBreakpointsXS = () => {
+    return typeof window === 'undefined'
+        ? false
+        : // : window.innerWidth < parseFloat(toPx(tokens.breakpoints['breakpoints-sm']) ?? '')
+            true;
+};
+function defaultIdForItem(item, index) {
+    return Object.prototype.hasOwnProperty.call(item, 'id') ? item.id : index.toString();
+}
+function ResourceList({ items, filterControl, flushFilters, emptyState, emptySearchState, resourceName: resourceNameProp, promotedBulkActions, bulkActions, selectedItems = [], isFiltered, selectable, hasMoreItems, loading, headerContent, showHeader, totalItemsCount, sortValue, sortOptions, alternateTool, onSortChange, onSelectionChange, renderItem, idForItem = defaultIdForItem, resolveItemId, }) {
+    const i18n = (0, i18n_1.useI18n)();
+    const [selectMode, setSelectMode] = (0, react_1.useState)(Boolean(selectedItems && selectedItems.length > 0));
+    const [loadingPosition, setLoadingPositionState] = (0, react_1.useState)(0);
+    const [lastSelected, setLastSelected] = (0, react_1.useState)();
+    const [smallScreen, setSmallScreen] = (0, react_1.useState)(isBreakpointsXS());
+    const forceUpdate = (0, react_1.useReducer)((x = 0) => x + 1, 0)[1];
+    const checkableButtonRef = (0, react_1.useRef)(null);
+    const { bulkActionsIntersectionRef, tableMeasurerRef, isBulkActionsSticky, bulkActionsAbsoluteOffset, bulkActionsMaxWidth, bulkActionsOffsetLeft, computeTableDimensions, } = (0, BulkActions_1.useIsBulkActionsSticky)(selectMode);
+    (0, react_1.useEffect)(() => {
+        computeTableDimensions();
+    }, [computeTableDimensions, items.length]);
+    const defaultResourceName = (0, use_lazy_ref_1.useLazyRef)(() => ({
+        singular: i18n.translate('Polaris.ResourceList.defaultItemSingular'),
+        plural: i18n.translate('Polaris.ResourceList.defaultItemPlural'),
+    }));
+    const listRef = (0, react_1.useRef)(null);
+    const handleSelectMode = (selectMode) => {
+        setSelectMode(selectMode);
+        if (!selectMode && onSelectionChange) {
+            onSelectionChange([]);
+        }
+    };
+    const handleResize = (0, debounce_1.debounce)(() => {
+        const newSmallScreen = isBreakpointsXS();
+        if (selectedItems && selectedItems.length === 0 && selectMode && !newSmallScreen) {
+            handleSelectMode(false);
+        }
+        if (smallScreen !== newSmallScreen) {
+            setSmallScreen(newSmallScreen);
+        }
+    }, 50, { leading: true, trailing: true, maxWait: 50 });
+    const isSelectable = Boolean((promotedBulkActions && promotedBulkActions.length > 0) ||
+        (bulkActions && bulkActions.length > 0) ||
+        selectable) && !smallScreen;
+    const selectAllSelectState = () => {
+        let selectState = 'indeterminate';
+        if (!selectedItems || (Array.isArray(selectedItems) && selectedItems.length === 0)) {
+            selectState = false;
+        }
+        else if (selectedItems === resource_list_1.SELECT_ALL_ITEMS ||
+            (Array.isArray(selectedItems) && selectedItems.length === items.length)) {
+            selectState = true;
+        }
+        return selectState;
+    };
+    const resourceName = resourceNameProp ? resourceNameProp : defaultResourceName.current;
+    const headerTitle = () => {
+        const itemsCount = items.length;
+        const resource = !loading && ((!totalItemsCount && itemsCount === 1) || totalItemsCount === 1)
+            ? resourceName.singular
+            : resourceName.plural;
+        if (loading) {
+            return i18n.translate('Polaris.ResourceList.loading', { resource });
+        }
+        else if (totalItemsCount) {
+            return i18n.translate('Polaris.ResourceList.showingTotalCount', {
+                itemsCount,
+                totalItemsCount,
+                resource,
+            });
+        }
+        else if (headerContent) {
+            return headerContent;
+        }
+        else {
+            return i18n.translate('Polaris.ResourceList.showing', {
+                itemsCount,
+                resource,
+            });
+        }
+    };
+    const selectAllActionsLabel = () => {
+        const selectedItemsCount = selectedItems === resource_list_1.SELECT_ALL_ITEMS ? `${items.length}+` : selectedItems.length;
+        return i18n.translate('Polaris.ResourceList.selected', {
+            selectedItemsCount,
+        });
+    };
+    const selectAllActionsAccessibilityLabel = () => {
+        const selectedItemsCount = selectedItems.length;
+        const totalItemsCount = items.length;
+        const allSelected = selectedItemsCount === totalItemsCount;
+        if (totalItemsCount === 1 && allSelected) {
+            return i18n.translate('Polaris.ResourceList.a11yCheckboxDeselectAllSingle', {
+                resourceNameSingular: resourceName.singular,
+            });
+        }
+        else if (totalItemsCount === 1) {
+            return i18n.translate('Polaris.ResourceList.a11yCheckboxSelectAllSingle', {
+                resourceNameSingular: resourceName.singular,
+            });
+        }
+        else if (allSelected) {
+            return i18n.translate('Polaris.ResourceList.a11yCheckboxDeselectAllMultiple', {
+                itemsLength: items.length,
+                resourceNamePlural: resourceName.plural,
+            });
+        }
+        else {
+            return i18n.translate('Polaris.ResourceList.a11yCheckboxSelectAllMultiple', {
+                itemsLength: items.length,
+                resourceNamePlural: resourceName.plural,
+            });
+        }
+    };
+    const paginatedSelectAllText = () => {
+        if (!isSelectable || !hasMoreItems) {
+            return;
+        }
+        if (selectedItems === resource_list_1.SELECT_ALL_ITEMS) {
+            return i18n.translate(isFiltered
+                ? 'Polaris.ResourceList.allFilteredItemsSelected'
+                : 'Polaris.ResourceList.allItemsSelected', {
+                itemsLength: items.length,
+                resourceNamePlural: resourceName.plural,
+            });
+        }
+    };
+    const paginatedSelectAllAction = () => {
+        if (!isSelectable || !hasMoreItems) {
+            return;
+        }
+        const actionText = selectedItems === resource_list_1.SELECT_ALL_ITEMS
+            ? i18n.translate('Polaris.Common.undo')
+            : i18n.translate(isFiltered
+                ? 'Polaris.ResourceList.selectAllFilteredItems'
+                : 'Polaris.ResourceList.selectAllItems', {
+                itemsLength: items.length,
+                resourceNamePlural: resourceName.plural,
+            });
+        return {
+            content: actionText,
+            onAction: handleSelectAllItemsInStore,
+        };
+    };
+    const emptySearchResultText = {
+        title: i18n.translate('Polaris.ResourceList.emptySearchResultTitle', {
+            resourceNamePlural: resourceName.plural,
+        }),
+        description: i18n.translate('Polaris.ResourceList.emptySearchResultDescription'),
+    };
+    const handleSelectAllItemsInStore = () => {
+        const newlySelectedItems = selectedItems === resource_list_1.SELECT_ALL_ITEMS ? getAllItemsOnPage(items, idForItem) : resource_list_1.SELECT_ALL_ITEMS;
+        if (onSelectionChange) {
+            onSelectionChange(newlySelectedItems);
+        }
+    };
+    const setLoadingPosition = (0, react_1.useCallback)(() => {
+        if (listRef.current != null) {
+            if (typeof window === 'undefined') {
+                return;
+            }
+            const overlay = listRef.current.getBoundingClientRect();
+            const viewportHeight = Math.max(document.documentElement ? document.documentElement.clientHeight : 0, window.innerHeight || 0);
+            const overflow = viewportHeight - overlay.height;
+            const spinnerHeight = items.length === 1 ? SMALL_SPINNER_HEIGHT : LARGE_SPINNER_HEIGHT;
+            const spinnerPosition = overflow > 0
+                ? (overlay.height - spinnerHeight) / 2
+                : (viewportHeight - overlay.top - spinnerHeight) / 2;
+            setLoadingPositionState(spinnerPosition);
+        }
+    }, [listRef, items.length]);
+    const itemsExist = items.length > 0;
+    (0, react_1.useEffect)(() => {
+        if (loading) {
+            setLoadingPosition();
+        }
+    }, [loading, setLoadingPosition]);
+    (0, react_1.useEffect)(() => {
+        if (selectedItems && selectedItems.length > 0 && !selectMode) {
+            setSelectMode(true);
+        }
+        if ((!selectedItems || selectedItems.length === 0) && !isBreakpointsXS()) {
+            setSelectMode(false);
+        }
+    }, [selectedItems, selectMode]);
+    (0, react_1.useEffect)(() => {
+        forceUpdate();
+    }, [forceUpdate, items]);
+    const renderItemWithId = (item, index) => {
+        const id = idForItem(item, index);
+        const itemContent = renderItem(item, id, index);
+        if (process.env.NODE_ENV === 'development' && !(0, components_1.isElementOfType)(itemContent, ResourceItem_1.ResourceItem)) {
+            // eslint-disable-next-line no-console
+            console.warn('<ResourceList /> renderItem function should return a <ResourceItem />.');
+        }
+        return itemContent;
+    };
+    const handleMultiSelectionChange = (lastSelected, currentSelected, resolveItemId) => {
+        const min = Math.min(lastSelected, currentSelected);
+        const max = Math.max(lastSelected, currentSelected);
+        return items.slice(min, max + 1).map(resolveItemId);
+    };
+    const handleSelectionChange = (selected, id, sortOrder, shiftKey) => {
+        if (selectedItems == null || onSelectionChange == null) {
+            return;
+        }
+        let newlySelectedItems = selectedItems === resource_list_1.SELECT_ALL_ITEMS ? getAllItemsOnPage(items, idForItem) : [...selectedItems];
+        if (sortOrder !== undefined) {
+            setLastSelected(sortOrder);
+        }
+        const lastSelectedFromState = lastSelected;
+        let selectedIds = [id];
+        if (shiftKey && lastSelectedFromState != null && sortOrder !== undefined && resolveItemId) {
+            selectedIds = handleMultiSelectionChange(lastSelectedFromState, sortOrder, resolveItemId);
+        }
+        //@ts-ignore unknown
+        newlySelectedItems = [...new Set([...newlySelectedItems, ...selectedIds])];
+        if (!selected) {
+            for (const selectedId of selectedIds) {
+                newlySelectedItems.splice(newlySelectedItems.indexOf(selectedId), 1);
+            }
+        }
+        if (newlySelectedItems.length === 0 && !isBreakpointsXS()) {
+            handleSelectMode(false);
+        }
+        else if (newlySelectedItems.length > 0) {
+            handleSelectMode(true);
+        }
+        if (onSelectionChange) {
+            onSelectionChange(newlySelectedItems);
+        }
+    };
+    const handleToggleAll = () => {
+        let newlySelectedItems;
+        if ((Array.isArray(selectedItems) && selectedItems.length === items.length) ||
+            selectedItems === resource_list_1.SELECT_ALL_ITEMS) {
+            newlySelectedItems = [];
+        }
+        else {
+            newlySelectedItems = items.map((item, index) => {
+                return idForItem(item, index);
+            });
+        }
+        if (newlySelectedItems.length === 0 && !isBreakpointsXS()) {
+            handleSelectMode(false);
+        }
+        else if (newlySelectedItems.length > 0) {
+            handleSelectMode(true);
+        }
+        if (onSelectionChange) {
+            onSelectionChange(newlySelectedItems);
+        }
+        // setTimeout ensures execution after the Transition on BulkActions
+        setTimeout(() => {
+            var _a;
+            (_a = checkableButtonRef === null || checkableButtonRef === void 0 ? void 0 : checkableButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }, 0);
+    };
+    const selectAllActionsMarkup = isSelectable ? ((0, jsx_runtime_1.jsx)("div", { className: ResourceList_classnames_1.default.SelectAllActionsWrapper, children: (0, jsx_runtime_1.jsx)(SelectAllActions_1.SelectAllActions, { label: selectAllActionsLabel(), accessibilityLabel: selectAllActionsAccessibilityLabel(), selected: selectAllSelectState(), onToggleAll: handleToggleAll, selectMode: selectMode, paginatedSelectAllAction: paginatedSelectAllAction(), paginatedSelectAllText: paginatedSelectAllText(), disabled: loading, ref: checkableButtonRef }) })) : null;
+    const bulkActionClassNames = (0, css_1.classNames)(ResourceList_classnames_1.default.BulkActionsWrapper, isBulkActionsSticky && ResourceList_classnames_1.default.BulkActionsWrapperSticky);
+    const bulkActionsMarkup = isSelectable && selectMode && (bulkActions || promotedBulkActions) ? ((0, jsx_runtime_1.jsx)("div", { className: bulkActionClassNames, style: {
+            top: isBulkActionsSticky ? undefined : bulkActionsAbsoluteOffset,
+            width: bulkActionsMaxWidth,
+            left: isBulkActionsSticky ? bulkActionsOffsetLeft : undefined,
+        }, children: (0, jsx_runtime_1.jsx)(BulkActions_1.BulkActions, { selectMode: selectMode, onSelectModeToggle: handleSelectMode, promotedActions: promotedBulkActions, actions: bulkActions, disabled: loading, isSticky: isBulkActionsSticky, width: bulkActionsMaxWidth }) })) : null;
+    const filterControlMarkup = filterControl ? ((0, jsx_runtime_1.jsx)("div", { className: (0, css_1.classNames)(!flushFilters && ResourceList_classnames_1.default.FiltersWrapper), children: filterControl })) : null;
+    const sortingSelectMarkup = sortOptions && sortOptions.length > 0 && !alternateTool ? ((0, jsx_runtime_1.jsx)("div", { className: ResourceList_classnames_1.default.SortWrapper, children: (0, jsx_runtime_1.jsx)(Select_1.Select, { label: i18n.translate('Polaris.ResourceList.sortingLabel'), labelInline: !smallScreen, labelHidden: smallScreen, options: sortOptions, onChange: onSortChange, value: sortValue, disabled: selectMode }) })) : null;
+    const alternateToolMarkup = alternateTool && !sortingSelectMarkup ? ((0, jsx_runtime_1.jsx)("div", { className: ResourceList_classnames_1.default.AlternateToolWrapper, children: alternateTool })) : null;
+    const headerTitleMarkup = (0, jsx_runtime_1.jsx)("div", { className: ResourceList_classnames_1.default.HeaderTitleWrapper, children: headerTitle() });
+    const selectButtonMarkup = isSelectable ? ((0, jsx_runtime_1.jsx)("div", { className: ResourceList_classnames_1.default.SelectButtonWrapper, children: (0, jsx_runtime_1.jsx)(Button_1.Button, { disabled: selectMode, icon: Icons_1.MaMinus, onClick: () => handleSelectMode(true), children: i18n.translate('Polaris.ResourceList.selectButtonText') }) })) : null;
+    const checkableButtonMarkup = isSelectable ? ((0, jsx_runtime_1.jsx)("div", { className: ResourceList_classnames_1.default.CheckableButtonWrapper, children: (0, jsx_runtime_1.jsx)(CheckableButton_1.CheckableButton, { accessibilityLabel: selectAllActionsAccessibilityLabel(), label: headerTitle(), onToggleAll: handleToggleAll, disabled: loading, ref: checkableButtonRef }) })) : null;
+    const needsHeader = isSelectable || (sortOptions && sortOptions.length > 0) || alternateTool;
+    const headerWrapperOverlay = loading ? (0, jsx_runtime_1.jsx)("div", { className: ResourceList_classnames_1.default['HeaderWrapper-overlay'] }) : null;
+    const showEmptyState = emptyState && !itemsExist && !loading;
+    const showEmptySearchState = !showEmptyState && filterControl && !itemsExist && !loading;
+    const headerMarkup = !showEmptyState &&
+        showHeader !== false &&
+        !showEmptySearchState &&
+        (showHeader || needsHeader) &&
+        listRef.current && ((0, jsx_runtime_1.jsxs)("div", { className: ResourceList_classnames_1.default.HeaderOuterWrapper, children: [(0, jsx_runtime_1.jsx)(Sticky_1.Sticky, { boundingElement: listRef.current, children: (isSticky) => {
+                    const headerClassName = (0, css_1.classNames)(ResourceList_classnames_1.default.HeaderWrapper, sortOptions &&
+                        sortOptions.length > 0 &&
+                        !alternateTool &&
+                        ResourceList_classnames_1.default['HeaderWrapper-hasSort'], alternateTool && ResourceList_classnames_1.default['HeaderWrapper-hasAlternateTool'], isSelectable && ResourceList_classnames_1.default['HeaderWrapper-hasSelect'], loading && ResourceList_classnames_1.default['HeaderWrapper-disabled'], isSelectable && selectMode && ResourceList_classnames_1.default['HeaderWrapper-inSelectMode'], isSticky && ResourceList_classnames_1.default['HeaderWrapper-isSticky']);
+                    return ((0, jsx_runtime_1.jsxs)("div", { className: headerClassName, children: [headerWrapperOverlay, (0, jsx_runtime_1.jsxs)("div", { className: ResourceList_classnames_1.default.HeaderContentWrapper, children: [headerTitleMarkup, checkableButtonMarkup, alternateToolMarkup, sortingSelectMarkup, selectButtonMarkup] }), selectAllActionsMarkup] }));
+                } }), bulkActionsMarkup] }));
+    const emptySearchStateMarkup = showEmptySearchState
+        ? emptySearchState || ((0, jsx_runtime_1.jsx)("div", { className: ResourceList_classnames_1.default.EmptySearchResultWrapper, children: (0, jsx_runtime_1.jsx)(EmptySearchResult_1.EmptySearchResult, { ...emptySearchResultText, withIllustration: true }) }))
+        : null;
+    const emptyStateMarkup = showEmptyState ? emptyState : null;
+    const defaultTopPadding = 8;
+    const topPadding = loadingPosition > 0 ? loadingPosition : defaultTopPadding;
+    const spinnerStyle = { paddingTop: `${topPadding}px` };
+    const spinnerSize = items.length < 2 ? 'small' : 'large';
+    const loadingOverlay = loading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("li", { className: ResourceList_classnames_1.default.SpinnerContainer, style: spinnerStyle, children: (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { size: spinnerSize, accessibilityLabel: 'Items are loading' }) }), (0, jsx_runtime_1.jsx)("li", { className: ResourceList_classnames_1.default.LoadingOverlay })] })) : null;
+    const className = (0, css_1.classNames)(ResourceList_classnames_1.default.ItemWrapper, loading && ResourceList_classnames_1.default['ItemWrapper-isLoading']);
+    const loadingWithoutItemsMarkup = loading && !itemsExist ? ((0, jsx_runtime_1.jsx)("div", { className: className, tabIndex: -1, children: loadingOverlay })) : null;
+    const resourceListClassName = (0, css_1.classNames)(ResourceList_classnames_1.default.ResourceList, loading && ResourceList_classnames_1.default.disabledPointerEvents, selectMode && ResourceList_classnames_1.default.disableTextSelection);
+    const listMarkup = itemsExist ? ((0, jsx_runtime_1.jsxs)("ul", { className: resourceListClassName, ref: listRef, "aria-live": 'polite', "aria-busy": loading, children: [loadingOverlay, react_1.Children.toArray(items.map(renderItemWithId))] })) : null;
+    // This is probably a legit error but I don't have the time to refactor this
+    // eslint-disable-next-line react/jsx-no-constructed-context-values
+    const context = {
+        selectable: isSelectable,
+        selectedItems,
+        selectMode,
+        hasBulkActions: Boolean(bulkActions),
+        resourceName,
+        loading,
+        onSelectionChange: handleSelectionChange,
+    };
+    const resourceListWrapperClasses = (0, css_1.classNames)(ResourceList_classnames_1.default.ResourceListWrapper, Boolean(bulkActionsMarkup) &&
+        selectMode &&
+        bulkActions &&
+        ResourceList_classnames_1.default.ResourceListWrapperWithBulkActions);
+    return ((0, jsx_runtime_1.jsxs)(resource_list_1.ResourceListContext.Provider, { value: context, children: [(0, jsx_runtime_1.jsx)(EventListener_1.EventListener, { event: 'resize', handler: handleResize }), (0, jsx_runtime_1.jsxs)("div", { className: resourceListWrapperClasses, ref: tableMeasurerRef, children: [filterControlMarkup, headerMarkup, listMarkup, emptySearchStateMarkup, emptyStateMarkup, loadingWithoutItemsMarkup] }), (0, jsx_runtime_1.jsx)("div", { ref: bulkActionsIntersectionRef })] }));
+}
+exports.ResourceList = ResourceList;
+ResourceList.Item = ResourceItem_1.ResourceItem;

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

package/dist/src/components/ScrollLock/ScrollLock.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScrollLock = void 0;
+const react_1 = require("react");
+const scroll_lock_manager_1 = require("../../utilities/scroll-lock-manager");
+// Even though this has no args, reference ScrollLockProps so the prop explorer
+// in the styleguide works without warnings about unfound props
+function ScrollLock(_) {
+    const scrollLockManager = (0, scroll_lock_manager_1.useScrollLockManager)();
+    (0, react_1.useEffect)(() => {
+        scrollLockManager.registerScrollLock();
+        return () => {
+            scrollLockManager.unregisterScrollLock();
+        };
+    }, [scrollLockManager]);
+    return null;
+}
+exports.ScrollLock = ScrollLock;