polaris-react-extended 13.10.3

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

@@ -0,0 +1,108 @@
+'use strict';
+
+var React = require('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] = React.useState(initSelectedResources);
+  const [allResourcesSelected, setAllResourcesSelected] = React.useState(initAllResourcesSelected);
+  const handleSelectionChange = React.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 = React.useCallback(() => {
+    setSelectedResources([]);
+    setAllResourcesSelected(false);
+  }, []);
+  const removeSelectedResources = React.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.SelectionType = SelectionType;
+exports.useIndexResourceState = useIndexResourceState;

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

@@ -0,0 +1,27 @@
+'use strict';
+
+var React = 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] = React.useState(false);
+  React.useEffect(() => {
+    setIsAfterInitialMount(true);
+  }, []);
+  return isAfterInitialMount;
+}
+
+exports.useIsAfterInitialMount = useIsAfterInitialMount;

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

@@ -0,0 +1,21 @@
+'use strict';
+
+var React = 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 = React.useRef(false);
+  React.useEffect(() => {
+    isMounted.current = true;
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+  return isMounted;
+}
+
+exports.useIsMountedRef = useIsMountedRef;

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

@@ -0,0 +1,13 @@
+'use strict';
+
+var React = require('react');
+var useEventListener = require('./use-event-listener.js');
+
+function useIsTouchDevice() {
+  const [isTouchDevice, setIsTouchDevice] = React.useState(false);
+  const handleTouchStart = React.useCallback(() => setIsTouchDevice(true), []);
+  useEventListener.useEventListener('touchstart', handleTouchStart);
+  return isTouchDevice;
+}
+
+exports.useIsTouchDevice = useIsTouchDevice;

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var React = require('react');
+var target = require('./target.js');
+
+// eslint-disable-next-line no-restricted-imports
+const useIsomorphicLayoutEffect = target.isServer ? React.useEffect : React.useLayoutEffect;
+
+exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;

package/build/cjs/utilities/use-lazy-ref.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var React = require('react');
+
+const UNIQUE_IDENTIFIER = Symbol('unique_identifier');
+
+/**
+ * useLazyRef provides a lazy initial value, similar to lazy
+ * initial state the initialValue is the value used during
+ * initialization and disregarded after that. Use this hook
+ * for expensive initialization.
+ * @param initialValue - A function that will return the initial
+ * value and be disregarded after that
+ * @returns MutableRefObject<T> - Returns a ref object with the
+ * results from invoking initial value
+ * @example
+ * function ComponentExample() {
+ *  const title = useLazyRef(() => someExpensiveComputation());
+ *  return <h1>{title.current}</h1>;
+ * }
+ */
+function useLazyRef(initialValue) {
+  const lazyRef = React.useRef(UNIQUE_IDENTIFIER);
+  if (lazyRef.current === UNIQUE_IDENTIFIER) {
+    lazyRef.current = initialValue();
+  }
+  return lazyRef;
+}
+
+exports.useLazyRef = useLazyRef;

package/build/cjs/utilities/use-media-query.js

@@ -0,0 +1,63 @@
+'use strict';
+
+var React = require('react');
+var target = require('./target.js');
+var useIsomorphicLayoutEffect = require('./use-isomorphic-layout-effect.js');
+
+// Adapted from https://usehooks-ts.com/react-hook/use-media-query
+
+// Derived from https://github.com/argyleink/open-props/blob/09e70c03c0a2533d06ec823f47490f018eb27f23/src/props.media.css#L21-L24
+const queryAliases = {
+  touch: '(hover: none) and (pointer: coarse)',
+  stylus: '(hover: none) and (pointer: fine)',
+  pointer: '(hover) and (pointer: coarse)',
+  mouse: '(hover) and (pointer: fine)'
+};
+const isQueryAlias = queryOrAlias => Object.prototype.hasOwnProperty.call(queryAliases, queryOrAlias);
+
+// Prevents TS from widening union types to `string`
+// eslint-disable-next-line @typescript-eslint/ban-types
+
+function useMediaQuery(queryOrAlias, options = {}) {
+  const {
+    defaultValue = false,
+    initializeWithValue = false
+  } = options;
+  const query = isQueryAlias(queryOrAlias) ? queryAliases[queryOrAlias] : queryOrAlias;
+  const getMatches = React.useCallback(query => {
+    if (target.isServer) return defaultValue;
+    return window.matchMedia(query).matches;
+  }, [defaultValue]);
+  const [matches, setMatches] = React.useState(() => {
+    if (initializeWithValue) return getMatches(query);
+    return defaultValue;
+  });
+  const handleChange = React.useCallback(() => {
+    setMatches(getMatches(query));
+  }, [getMatches, query]);
+  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+    const mediaQueryList = window.matchMedia(query);
+
+    // Triggered at the first client-side load and if query changes
+    handleChange();
+
+    // Use deprecated `addListener` and `removeListener` to support Safari < 14
+    // (https://github.com/juliencrn/usehooks-ts/pull/135)
+    if (mediaQueryList.addListener) {
+      mediaQueryList.addListener(handleChange);
+    } else {
+      mediaQueryList.addEventListener('change', handleChange);
+    }
+    return () => {
+      if (mediaQueryList.removeListener) {
+        mediaQueryList.removeListener(handleChange);
+      } else {
+        mediaQueryList.removeEventListener('change', handleChange);
+      }
+    };
+  }, [query]);
+  return matches;
+}
+
+exports.queryAliases = queryAliases;
+exports.useMediaQuery = useMediaQuery;

package/build/cjs/utilities/use-on-value-change.js

@@ -0,0 +1,16 @@
+'use strict';
+
+var React = require('react');
+
+function useOnValueChange(value, onChange) {
+  const tracked = React.useRef(value);
+  React.useEffect(() => {
+    const oldValue = tracked.current;
+    if (value !== tracked.current) {
+      tracked.current = value;
+      onChange(value, oldValue);
+    }
+  }, [value, onChange]);
+}
+
+exports.useOnValueChange = useOnValueChange;

package/build/cjs/utilities/use-previous.js

@@ -0,0 +1,16 @@
+'use strict';
+
+var React = require('react');
+
+/**
+ * Returns the previous value of a variable.
+ */
+function usePrevious(value) {
+  const ref = React.useRef();
+  React.useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+}
+
+exports.usePrevious = usePrevious;

package/build/cjs/utilities/use-theme.js

@@ -0,0 +1,35 @@
+'use strict';
+
+var React = require('react');
+var polarisTokens = require('@shopify/polaris-tokens');
+
+const ThemeContext = /*#__PURE__*/React.createContext(null);
+const ThemeNameContext = /*#__PURE__*/React.createContext(null);
+function getTheme(themeName) {
+  return polarisTokens.themes[themeName];
+}
+function useTheme() {
+  const theme = React.useContext(ThemeContext);
+  if (!theme) {
+    throw new Error('No theme was provided. Your application must be wrapped in an <AppProvider> or <ThemeProvider> component. See https://polaris.shopify.com/components/app-provider for implementation instructions.');
+  }
+  return theme;
+}
+function useThemeName() {
+  const themeName = React.useContext(ThemeNameContext);
+  if (!themeName) {
+    throw new Error('No themeName was provided. Your application must be wrapped in an <AppProvider> or <ThemeProvider> component. See https://polaris.shopify.com/components/app-provider for implementation instructions.');
+  }
+  return themeName;
+}
+function UseTheme(props) {
+  const theme = useTheme();
+  return props.children(theme);
+}
+
+exports.ThemeContext = ThemeContext;
+exports.ThemeNameContext = ThemeNameContext;
+exports.UseTheme = UseTheme;
+exports.getTheme = getTheme;
+exports.useTheme = useTheme;
+exports.useThemeName = useThemeName;

package/build/cjs/utilities/use-toggle.js

@@ -0,0 +1,19 @@
+'use strict';
+
+var React = require('react');
+
+/**
+ * Returns a stateful value, and a set of memoized functions to toggle it,
+ * set it to true and set it to false
+ */
+function useToggle(initialState) {
+  const [value, setState] = React.useState(initialState);
+  return {
+    value,
+    toggle: React.useCallback(() => setState(state => !state), []),
+    setTrue: React.useCallback(() => setState(true), []),
+    setFalse: React.useCallback(() => setState(false), [])
+  };
+}
+
+exports.useToggle = useToggle;

package/build/cjs/utilities/within-content-context.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var React = require('react');
+
+const WithinContentContext = /*#__PURE__*/React.createContext(false);
+
+exports.WithinContentContext = WithinContentContext;

package/build/cjs/utilities/within-filter-context.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var React = require('react');
+
+const WithinFilterContext = /*#__PURE__*/React.createContext(false);
+
+exports.WithinFilterContext = WithinFilterContext;

package/build/esm/components/AccountConnection/AccountConnection.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import { useBreakpoints } from '../../utilities/breakpoints.js';
+import { buttonFrom } from '../Button/utils.js';
+import { Card } from '../Card/Card.js';
+import { SettingAction } from '../SettingAction/SettingAction.js';
+import { InlineStack } from '../InlineStack/InlineStack.js';
+import { BlockStack } from '../BlockStack/BlockStack.js';
+import { Avatar } from '../Avatar/Avatar.js';
+import { Box } from '../Box/Box.js';
+import { Text } from '../Text/Text.js';
+
+function AccountConnection({
+  connected = false,
+  action,
+  avatarUrl,
+  accountName = '',
+  title,
+  details,
+  termsOfService
+}) {
+  const breakpoints = useBreakpoints();
+  const initials = accountName ? accountName.split(/\s+/).map(name => name[0]).join('') : undefined;
+  const avatarMarkup = connected ? /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Avatar, {
+    accessibilityLabel: "",
+    name: accountName,
+    initials: initials,
+    source: avatarUrl
+  })) : null;
+  const titleContent = title ? title : accountName;
+  const titleMarkup = /*#__PURE__*/React.createElement(Text, {
+    as: "h2",
+    variant: "headingSm"
+  }, titleContent);
+  const detailsMarkup = details ? /*#__PURE__*/React.createElement(Text, {
+    as: "span",
+    variant: "bodyMd",
+    tone: "subdued"
+  }, details) : null;
+  const termsOfServiceMarkup = termsOfService ? /*#__PURE__*/React.createElement(Box, {
+    paddingBlockStart: breakpoints.mdUp ? '400' : '500'
+  }, /*#__PURE__*/React.createElement(Text, {
+    as: "span",
+    variant: "bodyMd"
+  }, termsOfService)) : null;
+  const actionElement = action ? buttonFrom(action, {
+    variant: connected ? undefined : 'primary'
+  }) : null;
+  return /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(SettingAction, {
+    action: actionElement
+  }, /*#__PURE__*/React.createElement(InlineStack, {
+    gap: "400"
+  }, avatarMarkup, /*#__PURE__*/React.createElement(BlockStack, {
+    gap: "100"
+  }, titleMarkup, detailsMarkup))), termsOfServiceMarkup);
+}
+
+export { AccountConnection };

package/build/esm/components/ActionList/ActionList.css.js

@@ -0,0 +1,14 @@
+var styles = {
+  "Item": "Polaris-ActionList__Item",
+  "default": "Polaris-ActionList--default",
+  "active": "Polaris-ActionList--active",
+  "destructive": "Polaris-ActionList--destructive",
+  "disabled": "Polaris-ActionList--disabled",
+  "Prefix": "Polaris-ActionList__Prefix",
+  "Suffix": "Polaris-ActionList__Suffix",
+  "indented": "Polaris-ActionList--indented",
+  "menu": "Polaris-ActionList--menu",
+  "Text": "Polaris-ActionList__Text"
+};
+
+export { styles as default };

package/build/esm/components/ActionList/ActionList.js

@@ -0,0 +1,110 @@
+import React, { useContext, useRef, useState, useMemo } from 'react';
+import { SearchIcon } from '@shopify/polaris-icons';
+import { Key } from '../../types.js';
+import { wrapFocusPreviousFocusableMenuItem, wrapFocusNextFocusableMenuItem } from '../../utilities/focus.js';
+import { FilterActionsContext } from '../FilterActionsProvider/FilterActionsProvider.js';
+import { Section } from './components/Section/Section.js';
+import { KeypressListener } from '../KeypressListener/KeypressListener.js';
+import { TextField } from '../TextField/TextField.js';
+import { useI18n } from '../../utilities/i18n/hooks.js';
+import { Box } from '../Box/Box.js';
+import { Icon } from '../Icon/Icon.js';
+import { Item } from './components/Item/Item.js';
+
+const FILTER_ACTIONS_THRESHOLD = 8;
+function ActionList({
+  items,
+  sections = [],
+  actionRole,
+  allowFiltering,
+  onActionAnyItem,
+  filterLabel
+}) {
+  const i18n = useI18n();
+  const filterActions = useContext(FilterActionsContext);
+  let finalSections = [];
+  const actionListRef = useRef(null);
+  const [searchText, setSearchText] = useState('');
+  if (items) {
+    finalSections = [{
+      items
+    }, ...sections];
+  } else if (sections) {
+    finalSections = sections;
+  }
+  const isFilterable = finalSections?.some(section => section.items.some(item => typeof item.content === 'string'));
+  const hasMultipleSections = finalSections.length > 1;
+  const elementRole = hasMultipleSections && actionRole === 'menuitem' ? 'menu' : undefined;
+  const elementTabIndex = hasMultipleSections && actionRole === 'menuitem' ? -1 : undefined;
+  const filteredSections = finalSections?.map(section => ({
+    ...section,
+    items: section.items.filter(({
+      content
+    }) => typeof content === 'string' ? content?.toLowerCase().includes(searchText.toLowerCase()) : content)
+  }));
+  const sectionMarkup = filteredSections.map((section, index) => {
+    return section.items.length > 0 ? /*#__PURE__*/React.createElement(Section, {
+      key: typeof section.title === 'string' ? section.title : index,
+      section: section,
+      hasMultipleSections: hasMultipleSections,
+      actionRole: actionRole,
+      onActionAnyItem: onActionAnyItem,
+      isFirst: index === 0
+    }) : null;
+  });
+  const handleFocusPreviousItem = evt => {
+    evt.preventDefault();
+    if (actionListRef.current && evt.target) {
+      if (actionListRef.current.contains(evt.target)) {
+        wrapFocusPreviousFocusableMenuItem(actionListRef.current, evt.target);
+      }
+    }
+  };
+  const handleFocusNextItem = evt => {
+    evt.preventDefault();
+    if (actionListRef.current && evt.target) {
+      if (actionListRef.current.contains(evt.target)) {
+        wrapFocusNextFocusableMenuItem(actionListRef.current, evt.target);
+      }
+    }
+  };
+  const listeners = actionRole === 'menuitem' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(KeypressListener, {
+    keyEvent: "keydown",
+    keyCode: Key.DownArrow,
+    handler: handleFocusNextItem
+  }), /*#__PURE__*/React.createElement(KeypressListener, {
+    keyEvent: "keydown",
+    keyCode: Key.UpArrow,
+    handler: handleFocusPreviousItem
+  })) : null;
+  const totalFilteredActions = useMemo(() => {
+    const totalSectionItems = filteredSections?.reduce((acc, section) => acc + section.items.length, 0) || 0;
+    return totalSectionItems;
+  }, [filteredSections]);
+  const totalActions = finalSections?.reduce((acc, section) => acc + section.items.length, 0) || 0;
+  const hasManyActions = totalActions >= FILTER_ACTIONS_THRESHOLD;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, (allowFiltering || filterActions) && hasManyActions && isFilterable && /*#__PURE__*/React.createElement(Box, {
+    padding: "200",
+    paddingBlockEnd: totalFilteredActions > 0 ? '0' : '200'
+  }, /*#__PURE__*/React.createElement(TextField, {
+    clearButton: true,
+    labelHidden: true,
+    label: filterLabel ? filterLabel : i18n.translate('Polaris.ActionList.SearchField.placeholder'),
+    placeholder: filterLabel ? filterLabel : i18n.translate('Polaris.ActionList.SearchField.placeholder'),
+    autoComplete: "off",
+    value: searchText,
+    onChange: value => setSearchText(value),
+    prefix: /*#__PURE__*/React.createElement(Icon, {
+      source: SearchIcon
+    }),
+    onClearButtonClick: () => setSearchText('')
+  })), /*#__PURE__*/React.createElement(Box, {
+    as: hasMultipleSections ? 'ul' : 'div',
+    ref: actionListRef,
+    role: elementRole,
+    tabIndex: elementTabIndex
+  }, listeners, sectionMarkup));
+}
+ActionList.Item = Item;
+
+export { ActionList };