polaris-react-extended 13.10.3

package/build/esm/utilities/sticky-manager/sticky-manager.js

@@ -0,0 +1,190 @@
+import { themeDefault } from '@shopify/polaris-tokens';
+import { debounce } from '../debounce.js';
+import { scrollable, dataPolarisTopBar } from '../../components/shared.js';
+import { stackedContent } from '../breakpoints.js';
+import { getRectForNode } from '../geometry.js';
+
+const SIXTY_FPS = 1000 / 60;
+class StickyManager {
+  constructor(container) {
+    this.stickyItems = [];
+    this.stuckItems = [];
+    this.container = null;
+    this.topBarOffset = 0;
+    this.handleResize = debounce(() => {
+      this.manageStickyItems();
+    }, SIXTY_FPS, {
+      leading: true,
+      trailing: true,
+      maxWait: SIXTY_FPS
+    });
+    this.handleScroll = 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);
+  }
+  getStickyItem(node) {
+    return this.stickyItems.find(({
+      stickyNode
+    }) => node === stickyNode);
+  }
+  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 = 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) {
+    const {
+      stickyNode,
+      placeHolderNode,
+      boundingElement,
+      offset,
+      disableWhenStacked
+    } = stickyItem;
+    if (disableWhenStacked && stackedContent().matches) {
+      return {
+        sticky: false,
+        top: 0,
+        left: 0,
+        width: 'auto'
+      };
+    }
+    const stickyOffset = offset ? this.getOffset(stickyNode) + parseInt(
+    // Important: This will not update when the active theme changes.
+    // Update this to `useTheme` once converted to a function component.
+    themeDefault.space['space-500'], 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 || stickyNode.firstElementChild?.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 = getRectForNode(node);
+    while (count < stuckNodesLength) {
+      const stuckNode = this.stuckItems[count].stickyNode;
+      if (stuckNode !== node) {
+        const stuckNodeRect = getRectForNode(stuckNode);
+        if (!horizontallyOverlaps(nodeRect, stuckNodeRect)) {
+          offset += 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(${scrollable.selector}) ${dataPolarisTopBar.selector}`);
+    this.topBarOffset = topbarElement ? topbarElement.clientHeight : 0;
+  }
+}
+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;
+}
+
+export { StickyManager };

package/build/esm/utilities/string.js

@@ -0,0 +1,5 @@
+function escapeRegex(str) {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+export { escapeRegex };

package/build/esm/utilities/target.js

@@ -0,0 +1,3 @@
+const isServer = typeof window === 'undefined' || typeof document === 'undefined';
+
+export { isServer };

package/build/esm/utilities/use-component-did-mount.js

@@ -0,0 +1,29 @@
+import { useRef } from 'react';
+import { useIsAfterInitialMount } from './use-is-after-initial-mount.js';
+
+/**
+ * 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 = useIsAfterInitialMount();
+  const hasInvokedLifeCycle = useRef(false);
+  if (isAfterInitialMount && !hasInvokedLifeCycle.current) {
+    hasInvokedLifeCycle.current = true;
+    return callback();
+  }
+}
+
+export { useComponentDidMount };

package/build/esm/utilities/use-copy-to-clipboard.js

@@ -0,0 +1,26 @@
+import { useState, useCallback, useEffect } from 'react';
+
+/**
+ * Copy text to the native clipboard using the `navigator.clipboard` API
+ * Adapted from https://www.benmvp.com/blog/copy-to-clipboard-react-custom-hook
+ */
+function useCopyToClipboard(options = {}) {
+  const {
+    defaultValue = '',
+    timeout = 1500
+  } = options;
+  const [status, setStatus] = useState('inactive');
+  const copy = useCallback(value => {
+    navigator.clipboard.writeText(typeof value === 'string' ? value : defaultValue).then(() => setStatus('copied'), () => setStatus('failed')).catch(error => {
+      throw error;
+    });
+  }, [defaultValue]);
+  useEffect(() => {
+    if (status === 'inactive') return;
+    const timeoutId = setTimeout(() => setStatus('inactive'), timeout);
+    return () => clearTimeout(timeoutId);
+  }, [status, timeout]);
+  return [copy, status];
+}
+
+export { useCopyToClipboard };

package/build/esm/utilities/use-deep-callback.js

@@ -0,0 +1,39 @@
+import { useCallback } from 'react';
+import { useDeepCompareRef } from './use-deep-compare-ref.js';
+
+/**
+ * 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 useCallback(callback, useDeepCompareRef(dependencies, customCompare));
+}
+
+export { useDeepCallback };

package/build/esm/utilities/use-deep-compare-ref.js

@@ -0,0 +1,25 @@
+import { useRef } from 'react';
+import isEqual from '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/Shopify/polaris-react/blob/main/src/utilities/use-deep-effect.tsx}
+ * @see {@link https://github.com/Shopify/polaris-react/blob/main/src/utilities/use-deep-callback.tsx}
+ * @example
+ * function useDeepEffectExample(callback, dependencies, customCompare) {
+ *  useEffect(callback, useDeepCompareRef(dependencies, customCompare));
+ * }
+ */
+function useDeepCompareRef(dependencies, comparator = isEqual) {
+  const dependencyList = useRef(dependencies);
+  if (!comparator(dependencyList.current, dependencies)) {
+    dependencyList.current = dependencies;
+  }
+  return dependencyList.current;
+}
+
+export { useDeepCompareRef };

package/build/esm/utilities/use-deep-effect.js

@@ -0,0 +1,29 @@
+import { useEffect } from 'react';
+import { useDeepCompareRef } from './use-deep-compare-ref.js';
+
+/**
+ * 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
+  useEffect(callback, useDeepCompareRef(dependencies, customCompare));
+}
+
+export { useDeepEffect };

package/build/esm/utilities/use-disable-interaction.js

@@ -0,0 +1,34 @@
+import { useCallback } from '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 = useCallback(event => {
+    if (disabled) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  }, [disabled]);
+  if (!disabled) {
+    return handleClick;
+  }
+  return handleClickWrapper;
+}
+
+export { useDisableClick };

package/build/esm/utilities/use-event-listener.js

@@ -0,0 +1,56 @@
+import { useRef, useEffect } from 'react';
+import { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect.js';
+
+/**
+ * Acceptable target elements for `useEventListener`.
+ */
+
+/**
+ * Extracts the target element from a React `RefObject` or returns the input element.
+ */
+
+/**
+ * Extracts a (lib.dom.ts) EventMap for a given target element.
+ */
+
+/**
+ * Extracts all event names for a given target element.
+ */
+
+/**
+ * Extracts the `event` object for a given event type.
+ */
+
+/**
+ * React hook encapsulating the boilerplate logic for adding and removing event listeners.
+ */
+function useEventListener(eventName, handler, target, options) {
+  const handlerRef = useRef(handler);
+  const optionsRef = useRef(options);
+  useIsomorphicLayoutEffect(() => {
+    handlerRef.current = handler;
+  }, [handler]);
+  useIsomorphicLayoutEffect(() => {
+    optionsRef.current = options;
+  }, [options]);
+  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]);
+}
+
+export { useEventListener };

package/build/esm/utilities/use-focus.js

@@ -0,0 +1,45 @@
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { useEventListener } from './use-event-listener.js';
+
+function useFocus(
+/**
+ * The target element for the focus event.
+ */
+ref) {
+  const [isFocused, setIsFocused] = useState(false);
+  const handleFocus = useCallback(() => setIsFocused(true), []);
+  const handleBlur = useCallback(() => setIsFocused(false), []);
+  useEventListener('focus', handleFocus, ref);
+  useEventListener('blur', handleBlur, ref);
+  return isFocused;
+}
+function useFocusIn(
+/**
+ * The target element for the focusin event.
+ */
+ref) {
+  const [isFocusedIn, setIsFocusedIn] = useState(false);
+  const deferredFocusOut = useRef(null);
+  const handleFocusIn = useCallback(() => {
+    if (deferredFocusOut.current) {
+      clearTimeout(deferredFocusOut.current);
+      deferredFocusOut.current = null;
+    }
+    setIsFocusedIn(true);
+  }, []);
+  const handleFocusOut = useCallback(() => {
+    // Push focusout state update to the end of the event queue to
+    // allow subsequent focusin events to persist the isFocusedIn state
+    deferredFocusOut.current = setTimeout(() => {
+      setIsFocusedIn(false);
+    }, 0);
+  }, []);
+  useEventListener('focusin', handleFocusIn, ref);
+  useEventListener('focusout', handleFocusOut, ref);
+  useEffect(() => () => {
+    if (deferredFocusOut.current) clearTimeout(deferredFocusOut.current);
+  }, []);
+  return isFocusedIn;
+}
+
+export { useFocus, useFocusIn };

package/build/esm/utilities/use-hover.js

@@ -0,0 +1,17 @@
+import { useState, useCallback } from 'react';
+import { useEventListener } from './use-event-listener.js';
+
+function useHover(
+/**
+ * The target element for the mouseenter event.
+ */
+ref) {
+  const [isHovered, setIsHovered] = useState(false);
+  const handleMouseEnter = useCallback(() => setIsHovered(true), []);
+  const handleMouseLeave = useCallback(() => setIsHovered(false), []);
+  useEventListener('mouseenter', handleMouseEnter, ref);
+  useEventListener('mouseleave', handleMouseLeave, ref);
+  return isHovered;
+}
+
+export { useHover };

package/build/esm/utilities/use-index-resource-state.js

@@ -0,0 +1,105 @@
+import { useState, useCallback } from 'react';
+
+let SelectionType = /*#__PURE__*/function (SelectionType) {
+  SelectionType["All"] = "all";
+  SelectionType["Page"] = "page";
+  SelectionType["Multi"] = "multi";
+  SelectionType["Single"] = "single";
+  SelectionType["Range"] = "range";
+  return 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
+} = {
+  selectedResources: [],
+  allResourcesSelected: false,
+  resourceIDResolver: defaultResourceIDResolver,
+  resourceFilter: undefined
+}) {
+  const [selectedResources, setSelectedResources] = useState(initSelectedResources);
+  const [allResourcesSelected, setAllResourcesSelected] = useState(initAllResourcesSelected);
+  const handleSelectionChange = useCallback((selectionType, isSelecting, selection, _position) => {
+    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(currentSelectedResources => {
+          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 && !currentSelectedResources.includes(id) || !isSelecting && currentSelectedResources.includes(id)) {
+                ids.push(id);
+              }
+            }
+          }
+          return isSelecting ? [...currentSelectedResources, ...ids] : currentSelectedResources.filter(id => !ids.includes(id));
+        });
+        break;
+      case SelectionType.Range:
+        if (!selection) break;
+        setSelectedResources(currentSelectedResources => {
+          const filteredResources = resourceFilter ? resources.filter(resourceFilter) : resources;
+          const resourceIds = filteredResources.map(resourceIDResolver);
+          const selectedIds = resourceIds.slice(Number(selection[0]), Number(selection[1]) + 1);
+          const isIndeterminate = selectedIds.some(id => {
+            return selectedResources.includes(id);
+          });
+          const isChecked = selectedIds.every(id => {
+            return selectedResources.includes(id);
+          });
+          const isSelectingAllInRange = !isChecked && (isSelecting || isIndeterminate);
+          const nextSelectedResources = isSelectingAllInRange ? [...new Set([...currentSelectedResources, ...selectedIds]).values()] : currentSelectedResources.filter(id => !selectedIds.includes(id));
+          return nextSelectedResources;
+        });
+        break;
+    }
+  }, [allResourcesSelected, resourceFilter, selectedResources, resources, resourceIDResolver]);
+  const clearSelection = useCallback(() => {
+    setSelectedResources([]);
+    setAllResourcesSelected(false);
+  }, []);
+  const removeSelectedResources = 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
+  };
+}
+
+export { SelectionType, useIndexResourceState };

package/build/esm/utilities/use-is-after-initial-mount.js

@@ -0,0 +1,25 @@
+import { useState, useEffect } from '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] = useState(false);
+  useEffect(() => {
+    setIsAfterInitialMount(true);
+  }, []);
+  return isAfterInitialMount;
+}
+
+export { useIsAfterInitialMount };

package/build/esm/utilities/use-is-mounted-ref.js

@@ -0,0 +1,19 @@
+import { useRef, useEffect } from 'react';
+
+/**
+ * Returns a MutatableRefObject containing a boolean value that
+ * represents a components mounted status.
+ * @returns MutableRefObject<boolean> The mounted status
+ */
+function useIsMountedRef() {
+  const isMounted = useRef(false);
+  useEffect(() => {
+    isMounted.current = true;
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+  return isMounted;
+}
+
+export { useIsMountedRef };

package/build/esm/utilities/use-is-touch-device.js

@@ -0,0 +1,11 @@
+import { useState, useCallback } from 'react';
+import { useEventListener } from './use-event-listener.js';
+
+function useIsTouchDevice() {
+  const [isTouchDevice, setIsTouchDevice] = useState(false);
+  const handleTouchStart = useCallback(() => setIsTouchDevice(true), []);
+  useEventListener('touchstart', handleTouchStart);
+  return isTouchDevice;
+}
+
+export { useIsTouchDevice };

package/build/esm/utilities/use-isomorphic-layout-effect.js

@@ -0,0 +1,7 @@
+import { useEffect, useLayoutEffect } from 'react';
+import { isServer } from './target.js';
+
+// eslint-disable-next-line no-restricted-imports
+const useIsomorphicLayoutEffect = isServer ? useEffect : useLayoutEffect;
+
+export { useIsomorphicLayoutEffect };