@macive/ui 0.0.1 → 0.0.2

package/dist/src/utilities/sticky-manager/sticky-manager.js

@@ -0,0 +1,163 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StickyManager = void 0;
+const shared_1 = require("../../components/shared");
+const breakpoints_1 = require("../breakpoints");
+const debounce_1 = require("../debounce");
+const geometry_1 = require("../geometry");
+const SIXTY_FPS = 1000 / 60;
+class StickyManager {
+    constructor(container) {
+        this.stickyItems = [];
+        this.stuckItems = [];
+        this.container = null;
+        this.topBarOffset = 0;
+        this.handleResize = (0, debounce_1.debounce)(() => {
+            this.manageStickyItems();
+        }, SIXTY_FPS, { leading: true, trailing: true, maxWait: SIXTY_FPS });
+        this.handleScroll = (0, debounce_1.debounce)(() => {
+            this.manageStickyItems();
+        }, SIXTY_FPS, { leading: true, trailing: true, maxWait: SIXTY_FPS });
+        if (container) {
+            this.setContainer(container);
+        }
+    }
+    registerStickyItem(stickyItem) {
+        this.stickyItems.push(stickyItem);
+    }
+    unregisterStickyItem(nodeToRemove) {
+        const nodeIndex = this.stickyItems.findIndex(({ stickyNode }) => nodeToRemove === stickyNode);
+        this.stickyItems.splice(nodeIndex, 1);
+    }
+    setContainer(el) {
+        this.container = el;
+        if (isDocument(el)) {
+            this.setTopBarOffset(el);
+        }
+        this.container.addEventListener('scroll', this.handleScroll);
+        window.addEventListener('resize', this.handleResize);
+        this.manageStickyItems();
+    }
+    removeScrollListener() {
+        if (this.container) {
+            this.container.removeEventListener('scroll', this.handleScroll);
+            window.removeEventListener('resize', this.handleResize);
+        }
+    }
+    manageStickyItems() {
+        if (this.stickyItems.length <= 0) {
+            return;
+        }
+        const scrollTop = this.container ? scrollTopFor(this.container) : 0;
+        const containerTop = (0, geometry_1.getRectForNode)(this.container).top + this.topBarOffset;
+        this.stickyItems.forEach((stickyItem) => {
+            const { handlePositioning } = stickyItem;
+            const { sticky, top, left, width } = this.evaluateStickyItem(stickyItem, scrollTop, containerTop);
+            this.updateStuckItems(stickyItem, sticky);
+            handlePositioning(sticky, top, left, width);
+        });
+    }
+    evaluateStickyItem(stickyItem, scrollTop, containerTop) {
+        var _a;
+        const { stickyNode, placeHolderNode, boundingElement, offset, disableWhenStacked } = stickyItem;
+        if (disableWhenStacked && (0, breakpoints_1.stackedContent)().matches) {
+            return {
+                sticky: false,
+                top: 0,
+                left: 0,
+                width: 'auto',
+            };
+        }
+        const stickyOffset = offset
+            ? //@ts-ignore
+                this.getOffset(stickyNode) + parseInt(space['space-5'], 10)
+            : this.getOffset(stickyNode);
+        const scrollPosition = scrollTop + stickyOffset;
+        const placeHolderNodeCurrentTop = placeHolderNode.getBoundingClientRect().top - containerTop + scrollTop;
+        const top = containerTop + stickyOffset;
+        const width = placeHolderNode.getBoundingClientRect().width;
+        const left = placeHolderNode.getBoundingClientRect().left;
+        let sticky;
+        if (boundingElement == null) {
+            sticky = scrollPosition >= placeHolderNodeCurrentTop;
+        }
+        else {
+            const stickyItemHeight = stickyNode.getBoundingClientRect().height ||
+                ((_a = stickyNode.firstElementChild) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height) ||
+                0;
+            const stickyItemBottomPosition = boundingElement.getBoundingClientRect().bottom - stickyItemHeight + scrollTop - containerTop;
+            sticky =
+                scrollPosition >= placeHolderNodeCurrentTop && scrollPosition < stickyItemBottomPosition;
+        }
+        return {
+            sticky,
+            top,
+            left,
+            width,
+        };
+    }
+    updateStuckItems(item, sticky) {
+        const { stickyNode } = item;
+        if (sticky && !this.isNodeStuck(stickyNode)) {
+            this.addStuckItem(item);
+        }
+        else if (!sticky && this.isNodeStuck(stickyNode)) {
+            this.removeStuckItem(item);
+        }
+    }
+    addStuckItem(stickyItem) {
+        this.stuckItems.push(stickyItem);
+    }
+    removeStuckItem(stickyItem) {
+        const { stickyNode: nodeToRemove } = stickyItem;
+        const nodeIndex = this.stuckItems.findIndex(({ stickyNode }) => nodeToRemove === stickyNode);
+        this.stuckItems.splice(nodeIndex, 1);
+    }
+    getOffset(node) {
+        if (this.stuckItems.length === 0) {
+            return 0;
+        }
+        let offset = 0;
+        let count = 0;
+        const stuckNodesLength = this.stuckItems.length;
+        const nodeRect = (0, geometry_1.getRectForNode)(node);
+        while (count < stuckNodesLength) {
+            const stuckNode = this.stuckItems[count].stickyNode;
+            if (stuckNode !== node) {
+                const stuckNodeRect = (0, geometry_1.getRectForNode)(stuckNode);
+                if (!horizontallyOverlaps(nodeRect, stuckNodeRect)) {
+                    offset += (0, geometry_1.getRectForNode)(stuckNode).height;
+                }
+            }
+            else {
+                break;
+            }
+            count++;
+        }
+        return offset;
+    }
+    isNodeStuck(node) {
+        const nodeFound = this.stuckItems.findIndex(({ stickyNode }) => node === stickyNode);
+        return nodeFound >= 0;
+    }
+    setTopBarOffset(container) {
+        const topbarElement = container.querySelector(`:not(${shared_1.scrollable.selector}) ${shared_1.dataPolarisTopBar.selector}`);
+        this.topBarOffset = topbarElement ? topbarElement.clientHeight : 0;
+    }
+}
+exports.StickyManager = StickyManager;
+function isDocument(node) {
+    return node === document;
+}
+function scrollTopFor(container) {
+    return isDocument(container)
+        ? document.body.scrollTop || document.documentElement.scrollTop
+        : container.scrollTop;
+}
+function horizontallyOverlaps(rect1, rect2) {
+    const rect1Left = rect1.left;
+    const rect1Right = rect1.left + rect1.width;
+    const rect2Left = rect2.left;
+    const rect2Right = rect2.left + rect2.width;
+    return rect2Right < rect1Left || rect1Right < rect2Left;
+}

package/dist/src/utilities/target.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isServer = void 0;
+exports.isServer = typeof window === 'undefined' || typeof document === 'undefined';

package/dist/src/utilities/unique-id/context.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UniqueIdFactoryContext = void 0;
+const react_1 = require("react");
+exports.UniqueIdFactoryContext = (0, react_1.createContext)(undefined);

package/dist/src/utilities/unique-id/hooks.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useUniqueId = void 0;
+const react_1 = require("react");
+const errors_1 = require("../errors");
+const context_1 = require("./context");
+/**
+ * Returns a unique id that remains consistent across multiple re-renders of the
+ * same hook
+ * @param prefix Defines a prefix for the ID. You probably want to set this to
+ *   the name of the component you're calling `useUniqueId` in.
+ * @param overrideId Defines a fixed value to use instead of generating a unique
+ *   ID. Useful for components that allow consumers to specify their own ID.
+ */
+function useUniqueId(prefix = '', overrideId = '') {
+    const idFactory = (0, react_1.useContext)(context_1.UniqueIdFactoryContext);
+    // By using a ref to store the uniqueId for each invocation of the hook and
+    // checking that it is not already populated we ensure that we don’t generate
+    // a new ID on every re-render of a component.
+    const uniqueIdRef = (0, react_1.useRef)(null);
+    if (!idFactory) {
+        throw new errors_1.MissingAppProviderError('No UniqueIdFactory was provided.');
+    }
+    // If an override was specified, then use that instead of using a unique ID
+    // Hooks can’t be called conditionally so this has to go after all use* calls
+    if (overrideId) {
+        return overrideId;
+    }
+    // If a unique id has not yet been generated, then get a new one
+    if (!uniqueIdRef.current) {
+        uniqueIdRef.current = idFactory.nextId(prefix);
+    }
+    return uniqueIdRef.current;
+}
+exports.useUniqueId = useUniqueId;

package/dist/src/utilities/unique-id/index.js

@@ -0,0 +1,19 @@
+"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("./context"), exports);
+__exportStar(require("./hooks"), exports);
+__exportStar(require("./unique-id-factory"), exports);

package/dist/src/utilities/unique-id/unique-id-factory.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.globalIdGeneratorFactory = exports.UniqueIdFactory = void 0;
+class UniqueIdFactory {
+    constructor(idGeneratorFactory) {
+        this.idGenerators = {};
+        this.idGeneratorFactory = idGeneratorFactory;
+    }
+    nextId(prefix) {
+        if (!this.idGenerators[prefix]) {
+            this.idGenerators[prefix] = this.idGeneratorFactory(prefix);
+        }
+        return this.idGenerators[prefix]();
+    }
+}
+exports.UniqueIdFactory = UniqueIdFactory;
+function globalIdGeneratorFactory(prefix = '') {
+    let index = 1;
+    return () => `Polaris${prefix}${index++}`;
+}
+exports.globalIdGeneratorFactory = globalIdGeneratorFactory;

package/dist/src/utilities/use-break-point.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBreakpoint = void 0;
+const react_1 = require("react");
+const breakpoints = {
+    mobile: '100%',
+    tablet: '50%',
+    desktop: '50%',
+};
+const getBreakpointValue = (breakpoint) => breakpoints[breakpoint];
+const useBreakpoint = () => {
+    const [breakpoint, setBreakpoint] = (0, react_1.useState)('mobile');
+    (0, react_1.useEffect)(() => {
+        const handleResize = () => {
+            //@ts-ignore
+            const width = window.innerWidth;
+            if (width <= 640) {
+                setBreakpoint('mobile');
+            }
+            else if (width <= 1024) {
+                setBreakpoint('tablet');
+            }
+            else {
+                setBreakpoint('desktop');
+            }
+        };
+        //@ts-ignore
+        window.addEventListener('resize', handleResize);
+        return () => {
+            //@ts-ignore
+            window.removeEventListener('resize', handleResize);
+        };
+    }, []);
+    return { breakpoint, getBreakpointValue };
+};
+exports.useBreakpoint = useBreakpoint;

package/dist/src/utilities/use-component-did-mount.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useComponentDidMount = void 0;
+const react_1 = require("react");
+const use_is_after_initial_mount_1 = require("./use-is-after-initial-mount");
+/**
+ * Similarly to the life-cycle method componentDidMount, useComponentDidMount
+ * will be invoked after the component has mounted, and only the initial mount.
+ * @param callback Defines a callback to invoke once the component has
+ * initially mounted.
+ * @example
+ * function Playground({active}) {
+ *  useComponentDidMount(() => {
+ *    if (active) {
+ *      console.warning(`Component has mounted.`);
+ *    }
+ *  });
+ *
+ *  return null;
+ * }
+ */
+function useComponentDidMount(callback) {
+    const isAfterInitialMount = (0, use_is_after_initial_mount_1.useIsAfterInitialMount)();
+    const hasInvokedLifeCycle = (0, react_1.useRef)(false);
+    if (isAfterInitialMount && !hasInvokedLifeCycle.current) {
+        hasInvokedLifeCycle.current = true;
+        return callback();
+    }
+}
+exports.useComponentDidMount = useComponentDidMount;

package/dist/src/utilities/use-deep-callback.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDeepCallback = void 0;
+const react_1 = require("react");
+const use_deep_compare_ref_1 = require("./use-deep-compare-ref");
+/**
+ * A replacement for React's useCallback that'll allow for custom and deep compares.
+ * @see {@link https://reactjs.org/docs/hooks-reference.html#usecallback}
+ * @param callback Accepts a callback that's forwarded to React's useCallback
+ * @param dependencies A dependency array similar to React's useCallback however it utilizes a deep compare
+ * @param customCompare Opportunity to provide a custom compare function
+ * @returns A memoized callback
+ * @example
+ * const Child = memo(function Child({onClick}) {
+ *   console.log('Child has rendered.');
+ *   return <button onClick={onClick}>Click me</button>;
+ * });
+ *
+ * function ComponentExample() {
+ *   const [timesClicked, setTimesClicked] = useState(0);
+ *
+ *   const handleClick = useDeepCallback(() => {
+ *     setTimesClicked((timesClicked) => timesClicked + 1);
+ *     // New reference every render
+ *   }, [{}]);
+ *
+ *   return (
+ *     <>
+ *       <div>Times clicked: {timesClicked}</div>
+ *       <Child onClick={handleClick} />
+ *     </>
+ *   );
+ * }
+ */
+// eslint-disable-next-line @typescript-eslint/ban-types
+function useDeepCallback(callback, dependencies, customCompare) {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    return (0, react_1.useCallback)(callback, (0, use_deep_compare_ref_1.useDeepCompareRef)(dependencies, customCompare));
+}
+exports.useDeepCallback = useDeepCallback;

package/dist/src/utilities/use-deep-compare-ref.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDeepCompareRef = void 0;
+const react_1 = require("react");
+const react_fast_compare_1 = __importDefault(require("react-fast-compare"));
+/**
+ * Allows for custom or deep comparison of a dependency list. Useful to keep a consistent dependency
+ * list across reference changes.
+ * @param dependencies A dependency array similar to React's useEffect / useCallback / useMemo
+ * @param comparator An optional function to compare dependencies that'll default to a deep comparison
+ * @returns A dependency list
+ * @see {@link https://github.com/Airsoko/react-ui/blob/main/src/utilities/use-deep-effect.tsx}
+ * @see {@link https://github.com/Airsoko/react-ui/blob/main/src/utilities/use-deep-callback.tsx}
+ * @example
+ * function useDeepEffectExample(callback, dependencies, customCompare) {
+ *  useEffect(callback, useDeepCompareRef(dependencies, customCompare));
+ * }
+ */
+function useDeepCompareRef(dependencies, comparator = react_fast_compare_1.default) {
+    const dependencyList = (0, react_1.useRef)(dependencies);
+    if (!comparator(dependencyList.current, dependencies)) {
+        dependencyList.current = dependencies;
+    }
+    return dependencyList.current;
+}
+exports.useDeepCompareRef = useDeepCompareRef;

package/dist/src/utilities/use-deep-effect.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDeepEffect = void 0;
+const react_1 = require("react");
+const use_deep_compare_ref_1 = require("./use-deep-compare-ref");
+/**
+ * A replacement for React's useEffect that'll allow for custom and deep
+ * compares of the dependency list.
+ * @see {@link https://reactjs.org/docs/hooks-reference.html#useeffect}
+ * @param callback Accepts a callback that's forwarded to React's useEffect
+ * @param dependencies A dependency array similar to React's useEffect however it utilizes a deep compare
+ * @param customCompare Opportunity to provide a custom compare function
+ * @example
+ * function ComponentExample() {
+ *  const [, forceUpdate] = useState();
+ *  const obj = {a: 1};
+ *
+ *  useDeepEffect(() => {
+ *    console.log('useDeepEffect invocation');
+ *    forceUpdate(obj);
+ *  }, [obj]);
+ *
+ *  return null;
+ * }
+ */
+function useDeepEffect(callback, dependencies, customCompare) {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    (0, react_1.useEffect)(callback, (0, use_deep_compare_ref_1.useDeepCompareRef)(dependencies, customCompare));
+}
+exports.useDeepEffect = useDeepEffect;

package/dist/src/utilities/use-disable-interaction.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDisableKeyboard = exports.useDisableClick = void 0;
+const react_1 = require("react");
+/**
+ * useDisableInteraction provides the original event handler but disables interaction
+ * if the boolean passed is true.
+ * @param disabled - A boolean value that determines if the button should
+ * be disabled
+ * @param handleEvent - The original event handler
+ * @returns Function - The original event handler but with interactions disabled if the
+ * provided boolean is true
+ * @example
+ * function ComponentExample() {
+ * const handleClick = () => {
+ *  console.log('disable me');
+ * };
+ * const handleClickEvent = useDisableInteraction(true, handleClick);
+ * return <button onClick={handleClickEvent}>Im Disabled</button>;
+ * }
+ */
+function useDisableClick(disabled, handleClick) {
+    const handleClickWrapper = (0, react_1.useCallback)((event) => {
+        if (disabled) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    }, [disabled]);
+    if (!disabled) {
+        return handleClick;
+    }
+    return handleClickWrapper;
+}
+exports.useDisableClick = useDisableClick;
+function useDisableKeyboard(disabled, handleKeyDown) {
+    const handleKeyDownWrapper = (0, react_1.useCallback)((event) => {
+        if (disabled && ((event === null || event === void 0 ? void 0 : event.key) === ' ' || event.key === 'Enter')) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    }, [disabled]);
+    if (!disabled) {
+        return handleKeyDown;
+    }
+    return handleKeyDownWrapper;
+}
+exports.useDisableKeyboard = useDisableKeyboard;

package/dist/src/utilities/use-event-listener.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useEventListener = void 0;
+const react_1 = require("react");
+const use_isomorphic_layout_effect_1 = require("./use-isomorphic-layout-effect");
+/**
+ * React hook encapsulating the boilerplate logic for adding and removing event listeners.
+ */
+function useEventListener(eventName, handler, target, options) {
+    const handlerRef = (0, react_1.useRef)(handler);
+    const optionsRef = (0, react_1.useRef)(options);
+    (0, use_isomorphic_layout_effect_1.useIsomorphicLayoutEffect)(() => {
+        handlerRef.current = handler;
+    }, [handler]);
+    (0, use_isomorphic_layout_effect_1.useIsomorphicLayoutEffect)(() => {
+        optionsRef.current = options;
+    }, [options]);
+    (0, react_1.useEffect)(() => {
+        if (!(typeof eventName === 'string' && target !== null))
+            return;
+        let targetElement;
+        if (typeof target === 'undefined') {
+            targetElement = window;
+        }
+        else if ('current' in target) {
+            if (target.current === null)
+                return;
+            targetElement = target.current;
+        }
+        else {
+            targetElement = target;
+        }
+        const eventOptions = optionsRef.current;
+        const eventListener = (event) => handlerRef.current(event);
+        targetElement.addEventListener(eventName, eventListener, eventOptions);
+        return () => {
+            targetElement.removeEventListener(eventName, eventListener, eventOptions);
+        };
+    }, [eventName, target]);
+}
+exports.useEventListener = useEventListener;

package/dist/src/utilities/use-index-resource-state.js

@@ -0,0 +1,103 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIndexResourceState = exports.SelectionType = void 0;
+const react_1 = require("react");
+var SelectionType;
+(function (SelectionType) {
+    SelectionType["All"] = "all";
+    SelectionType["Page"] = "page";
+    SelectionType["Multi"] = "multi";
+    SelectionType["Single"] = "single";
+})(SelectionType = exports.SelectionType || (exports.SelectionType = {}));
+function defaultResourceIDResolver(resource) {
+    if ('id' in resource) {
+        return resource.id;
+    }
+    throw new Error('Your resource does not directly contain an `id`. Pass a `resourceIDResolver` to `useIndexResourceState`');
+}
+function useIndexResourceState(resources, { selectedResources: initSelectedResources = [], allResourcesSelected: initAllResourcesSelected = false, resourceIDResolver = defaultResourceIDResolver, resourceFilter = undefined, resetOnSelectedResourcesChange, } = {
+    selectedResources: [],
+    allResourcesSelected: false,
+    resourceIDResolver: defaultResourceIDResolver,
+    resourceFilter: undefined,
+}) {
+    const [selectedResources, setSelectedResources] = (0, react_1.useState)(initSelectedResources);
+    const [allResourcesSelected, setAllResourcesSelected] = (0, react_1.useState)(initAllResourcesSelected);
+    /**
+     * START ADDED
+     * @author remove this incase of a bug
+     */
+    (0, react_1.useEffect)(() => {
+        resetOnSelectedResourcesChange && setSelectedResources(initSelectedResources);
+    }, [initSelectedResources, resetOnSelectedResourcesChange]);
+    /**
+     * START END
+     */
+    const handleSelectionChange = (0, react_1.useCallback)((selectionType, isSelecting, selection) => {
+        if (selectionType === SelectionType.All) {
+            setAllResourcesSelected(isSelecting);
+        }
+        else if (allResourcesSelected) {
+            setAllResourcesSelected(false);
+        }
+        switch (selectionType) {
+            case SelectionType.Single:
+                setSelectedResources((newSelectedResources) => isSelecting
+                    ? [...newSelectedResources, selection]
+                    : newSelectedResources.filter((id) => id !== selection));
+                break;
+            case SelectionType.All:
+            case SelectionType.Page:
+                if (resourceFilter) {
+                    const filteredResources = resources.filter(resourceFilter);
+                    setSelectedResources(isSelecting && selectedResources.length < filteredResources.length
+                        ? filteredResources.map(resourceIDResolver)
+                        : []);
+                }
+                else {
+                    setSelectedResources(isSelecting ? resources.map(resourceIDResolver) : []);
+                }
+                break;
+            case SelectionType.Multi:
+                if (!selection)
+                    break;
+                setSelectedResources((newSelectedResources) => {
+                    const ids = [];
+                    const filteredResources = resourceFilter ? resources.filter(resourceFilter) : resources;
+                    for (let i = selection[0]; i <= selection[1]; i++) {
+                        if (filteredResources.includes(resources[i])) {
+                            const id = resourceIDResolver(resources[i]);
+                            if ((isSelecting && !newSelectedResources.includes(id)) ||
+                                (!isSelecting && newSelectedResources.includes(id))) {
+                                ids.push(id);
+                            }
+                        }
+                    }
+                    return isSelecting
+                        ? [...newSelectedResources, ...ids]
+                        : newSelectedResources.filter((id) => !ids.includes(id));
+                });
+                break;
+        }
+    }, [allResourcesSelected, resourceFilter, selectedResources.length, resources, resourceIDResolver]);
+    const clearSelection = (0, react_1.useCallback)(() => {
+        setSelectedResources([]);
+        setAllResourcesSelected(false);
+    }, []);
+    const removeSelectedResources = (0, react_1.useCallback)((removeResources) => {
+        const selectedResourcesCopy = [...selectedResources];
+        const newSelectedResources = selectedResourcesCopy.filter((resource) => !removeResources.includes(resource));
+        setSelectedResources(newSelectedResources);
+        if (newSelectedResources.length === 0) {
+            setAllResourcesSelected(false);
+        }
+    }, [selectedResources]);
+    return {
+        selectedResources,
+        allResourcesSelected,
+        handleSelectionChange,
+        clearSelection,
+        removeSelectedResources,
+    };
+}
+exports.useIndexResourceState = useIndexResourceState;

package/dist/src/utilities/use-is-after-initial-mount.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIsAfterInitialMount = void 0;
+const react_1 = require("react");
+/**
+ * useIsAfterInitialMount will trigger a re-render to provide
+ * you with an updated value. Using this you enhance server-side
+ * code that can only run on the client.
+ * @returns MutableRefObject<T> - Returns a ref object with the
+ * results from invoking initial value
+ * @example
+ * function ComponentExample({children}) {
+ *  const isMounted = useIsAfterInitialMount();
+ *  const content = isMounted ? children : null;
+ *
+ *  return <>{content}</>;
+ * }
+ */
+function useIsAfterInitialMount() {
+    const [isAfterInitialMount, setIsAfterInitialMount] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        setIsAfterInitialMount(true);
+    }, []);
+    return isAfterInitialMount;
+}
+exports.useIsAfterInitialMount = useIsAfterInitialMount;

package/dist/src/utilities/use-is-mounted-ref.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIsMountedRef = void 0;
+const react_1 = require("react");
+/**
+ * Returns a MutatableRefObject containing a boolean value that
+ * represents a components mounted status.
+ * @returns MutableRefObject<boolean> The mounted status
+ */
+function useIsMountedRef() {
+    const isMounted = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
+        isMounted.current = true;
+        return () => {
+            isMounted.current = false;
+        };
+    }, []);
+    return isMounted;
+}
+exports.useIsMountedRef = useIsMountedRef;