polaris-react-extended 13.10.3

package/build/esm/components/Navigation/components/Section/Section.js

@@ -0,0 +1,138 @@
+import React, { useRef, useState, useEffect, useId } from 'react';
+import { MenuHorizontalIcon } from '@shopify/polaris-icons';
+import { classNames } from '../../../../utilities/css.js';
+import { useToggle } from '../../../../utilities/use-toggle.js';
+import styles from '../../Navigation.css.js';
+import { Item } from '../Item/Item.js';
+import { useMediaQuery } from '../../../../utilities/media-query/hooks.js';
+import { Icon } from '../../../Icon/Icon.js';
+import { Tooltip } from '../../../Tooltip/Tooltip.js';
+import { Text } from '../../../Text/Text.js';
+import { Collapsible } from '../../../Collapsible/Collapsible.js';
+
+function Section({
+  title,
+  fill,
+  action,
+  items,
+  rollup,
+  separator
+}) {
+  const {
+    value: expanded,
+    toggle: toggleExpanded,
+    setFalse: setExpandedFalse
+  } = useToggle(false);
+  const animationFrame = useRef(null);
+  const {
+    isNavigationCollapsed
+  } = useMediaQuery();
+  const [expandedIndex, setExpandedIndex] = useState();
+  const handleClick = (onClick, hasSubNavItems) => {
+    return () => {
+      if (onClick) {
+        onClick();
+      }
+      if (animationFrame.current) {
+        cancelAnimationFrame(animationFrame.current);
+      }
+      if (!hasSubNavItems || !isNavigationCollapsed) {
+        animationFrame.current = requestAnimationFrame(setExpandedFalse);
+      }
+    };
+  };
+  useEffect(() => {
+    return () => {
+      animationFrame.current && cancelAnimationFrame(animationFrame.current);
+    };
+  });
+  const className = classNames(styles.Section, separator && styles['Section-withSeparator'], fill && styles['Section-fill']);
+  const buttonMarkup = action && /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: styles.Action,
+    "aria-label": action.accessibilityLabel,
+    onClick: action.onClick
+  }, /*#__PURE__*/React.createElement(Icon, {
+    source: action.icon
+  }));
+  const actionMarkup = action && (action.tooltip ? /*#__PURE__*/React.createElement(Tooltip, action.tooltip, buttonMarkup) : buttonMarkup);
+  const sectionHeadingMarkup = title && /*#__PURE__*/React.createElement("li", {
+    className: styles.SectionHeading
+  }, /*#__PURE__*/React.createElement(Text, {
+    as: "span",
+    variant: "bodySm",
+    fontWeight: "medium",
+    tone: "subdued"
+  }, title), actionMarkup);
+  const itemsMarkup = items.map((item, index) => {
+    const {
+      onClick,
+      label,
+      subNavigationItems,
+      ...rest
+    } = item;
+    const hasSubNavItems = subNavigationItems != null && subNavigationItems.length > 0;
+    const handleToggleExpandedState = () => {
+      if (expandedIndex === index) {
+        setExpandedIndex(-1);
+      } else {
+        setExpandedIndex(index);
+      }
+    };
+    return /*#__PURE__*/React.createElement(Item, Object.assign({
+      key: label
+    }, rest, {
+      label: label,
+      subNavigationItems: subNavigationItems,
+      onClick: handleClick(onClick, hasSubNavItems),
+      onToggleExpandedState: handleToggleExpandedState,
+      expanded: expandedIndex === index
+    }));
+  });
+  const toggleClassName = classNames(styles.Item, styles.RollupToggle);
+  const ariaLabel = rollup && (expanded ? rollup.hide : rollup.view);
+  const toggleRollup = rollup && items.length > rollup.after && /*#__PURE__*/React.createElement("div", {
+    className: styles.ListItem,
+    key: "List Item"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.ItemWrapper
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.ItemInnerWrapper
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: toggleClassName,
+    onClick: toggleExpanded,
+    "aria-label": ariaLabel
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles.Icon
+  }, /*#__PURE__*/React.createElement(Icon, {
+    source: MenuHorizontalIcon
+  }))))));
+  const activeItemIndex = items.findIndex(item => {
+    if (!rollup) {
+      return false;
+    }
+    return rollup.activePath === item.url || item.url && rollup.activePath.startsWith(item.url) || (item.subNavigationItems ? item.subNavigationItems.some(({
+      url: itemUrl
+    }) => rollup.activePath.startsWith(itemUrl)) : false);
+  });
+  const sectionItems = rollup ? itemsMarkup.slice(0, rollup.after) : itemsMarkup;
+  const additionalItems = rollup ? itemsMarkup.slice(rollup.after) : [];
+  if (rollup && activeItemIndex !== -1 && activeItemIndex > rollup.after - 1) {
+    sectionItems.push(...additionalItems.splice(activeItemIndex - rollup.after, 1));
+  }
+  const additionalItemsId = useId();
+  const activeItemsMarkup = rollup && additionalItems.length > 0 && /*#__PURE__*/React.createElement("li", {
+    className: styles.RollupSection
+  }, /*#__PURE__*/React.createElement(Collapsible, {
+    id: additionalItemsId,
+    open: expanded
+  }, /*#__PURE__*/React.createElement("ul", {
+    className: styles.List
+  }, additionalItems)), toggleRollup);
+  return /*#__PURE__*/React.createElement("ul", {
+    className: className
+  }, sectionHeadingMarkup, sectionItems, activeItemsMarkup);
+}
+
+export { Section };

package/build/esm/components/Navigation/context.js

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+const NavigationContext = /*#__PURE__*/createContext({
+  location: ''
+});
+
+export { NavigationContext };

package/build/esm/components/Navigation/types.js

@@ -0,0 +1,10 @@
+let MatchState = /*#__PURE__*/function (MatchState) {
+  MatchState[MatchState["MatchForced"] = 0] = "MatchForced";
+  MatchState[MatchState["MatchUrl"] = 1] = "MatchUrl";
+  MatchState[MatchState["MatchPaths"] = 2] = "MatchPaths";
+  MatchState[MatchState["Excluded"] = 3] = "Excluded";
+  MatchState[MatchState["NoMatch"] = 4] = "NoMatch";
+  return MatchState;
+}({});
+
+export { MatchState };

package/build/esm/components/OptionList/OptionList.js

@@ -0,0 +1,142 @@
+import React, { useState, useId, useCallback } from 'react';
+import { isSection } from '../../utilities/options.js';
+import { arraysAreEqual } from '../../utilities/arrays.js';
+import { useDeepEffect } from '../../utilities/use-deep-effect.js';
+import { Option } from './components/Option/Option.js';
+import { Box } from '../Box/Box.js';
+import { BlockStack } from '../BlockStack/BlockStack.js';
+import { Text } from '../Text/Text.js';
+
+function OptionList({
+  options,
+  sections,
+  title,
+  selected,
+  allowMultiple,
+  role,
+  verticalAlign,
+  onChange,
+  id: idProp,
+  onPointerEnterOption,
+  onFocusOption
+}) {
+  const [normalizedOptions, setNormalizedOptions] = useState(createNormalizedOptions(options, sections, title));
+  const uniqId = useId();
+  const id = idProp ?? uniqId;
+  useDeepEffect(() => {
+    setNormalizedOptions(createNormalizedOptions(options || [], sections || [], title));
+  }, [options, sections, title], optionArraysAreEqual);
+  const handleClick = useCallback((sectionIndex, optionIndex) => {
+    const selectedValue = normalizedOptions[sectionIndex].options[optionIndex].value;
+    const foundIndex = selected.indexOf(selectedValue);
+    if (allowMultiple) {
+      const newSelection = foundIndex === -1 ? [selectedValue, ...selected] : [...selected.slice(0, foundIndex), ...selected.slice(foundIndex + 1, selected.length)];
+      onChange(newSelection);
+      return;
+    }
+    onChange([selectedValue]);
+  }, [normalizedOptions, selected, allowMultiple, onChange]);
+  const handlePointerEnter = useCallback((sectionIndex, optionIndex) => {
+    if (!onPointerEnterOption) return;
+    const selectedValue = normalizedOptions[sectionIndex].options[optionIndex].value;
+    onPointerEnterOption(selectedValue);
+  }, [normalizedOptions, onPointerEnterOption]);
+  const handleFocus = useCallback((sectionIndex, optionIndex) => {
+    if (!onFocusOption) return;
+    const selectedValue = normalizedOptions[sectionIndex].options[optionIndex].value;
+    onFocusOption(selectedValue);
+  }, [normalizedOptions, onFocusOption]);
+  const optionsExist = normalizedOptions.length > 0;
+  const optionsMarkup = optionsExist ? normalizedOptions.map(({
+    title,
+    options
+  }, sectionIndex) => {
+    const isFirstOption = sectionIndex === 0;
+    const titleLevel = isFirstOption ? 'h2' : 'h3';
+    const titleMarkup = title ? /*#__PURE__*/React.createElement(Box, {
+      paddingBlockStart: isFirstOption ? '050' : '300',
+      paddingInlineStart: "150",
+      paddingBlockEnd: "100",
+      paddingInlineEnd: "150",
+      borderColor: "border-secondary"
+    }, /*#__PURE__*/React.createElement(Text, {
+      as: titleLevel,
+      variant: "headingSm"
+    }, title)) : null;
+    const optionsMarkup = options && options.map((option, optionIndex) => {
+      const isSelected = selected.includes(option.value);
+      const optionId = option.id || `${id}-${sectionIndex}-${optionIndex}`;
+      return /*#__PURE__*/React.createElement(Option, Object.assign({
+        key: optionId
+      }, option, {
+        id: optionId,
+        section: sectionIndex,
+        index: optionIndex,
+        onClick: handleClick,
+        select: isSelected,
+        allowMultiple: allowMultiple,
+        verticalAlign: verticalAlign,
+        onPointerEnter: handlePointerEnter,
+        onFocus: handleFocus
+      }));
+    });
+    const option = /*#__PURE__*/React.createElement(Box, {
+      as: "ul",
+      id: `${id}-${sectionIndex}`,
+      role: role
+    }, optionsMarkup);
+
+    // eslint-disable-next-line no-nested-ternary
+    const blockStartPadding = isFirstOption ? title ? '100' : '0' : title ? '050' : '0';
+    return /*#__PURE__*/React.createElement(Box, {
+      key: title || `noTitle-${sectionIndex}`,
+      as: "li",
+      paddingBlockStart: blockStartPadding
+    }, /*#__PURE__*/React.createElement(BlockStack, {
+      gap: isFirstOption && sections ? undefined : '0'
+    }, titleMarkup, option));
+  }) : null;
+  return /*#__PURE__*/React.createElement(Box, {
+    as: "ul",
+    role: role,
+    padding: "150"
+  }, optionsMarkup);
+}
+function createNormalizedOptions(options, sections, title) {
+  if (options == null) {
+    const section = {
+      options: [],
+      title
+    };
+    return sections == null ? [] : [section, ...sections];
+  }
+  if (sections == null) {
+    return [{
+      title,
+      options
+    }];
+  }
+  return [{
+    title,
+    options
+  }, ...sections];
+}
+function optionArraysAreEqual(firstArray, secondArray) {
+  if (isSection(firstArray) && isSection(secondArray)) {
+    return arraysAreEqual(firstArray, secondArray, testSectionsPropEquality);
+  }
+  return arraysAreEqual(firstArray, secondArray);
+}
+function testSectionsPropEquality(previousSection, currentSection) {
+  const {
+    options: previousOptions
+  } = previousSection;
+  const {
+    options: currentOptions
+  } = currentSection;
+  const optionsAreEqual = arraysAreEqual(previousOptions, currentOptions);
+  const titlesAreEqual = previousSection.title === currentSection.title;
+  return optionsAreEqual && titlesAreEqual;
+}
+
+export { OptionList };

package/build/esm/components/OptionList/components/Option/Option.css.js

@@ -0,0 +1,19 @@
+var styles = {
+  "Option": "Polaris-Option",
+  "SingleSelectOption": "Polaris-Option__SingleSelectOption",
+  "focused": "Polaris-Option--focused",
+  "active": "Polaris-Option--active",
+  "disabled": "Polaris-Option--disabled",
+  "select": "Polaris-Option--select",
+  "Media": "Polaris-Option__Media",
+  "Label": "Polaris-Option__Label",
+  "MultiSelectOption": "Polaris-Option__MultiSelectOption",
+  "CheckboxLabel": "Polaris-Option__CheckboxLabel",
+  "verticalAlignTop": "Polaris-Option--verticalAlignTop",
+  "verticalAlignCenter": "Polaris-Option--verticalAlignCenter",
+  "verticalAlignBottom": "Polaris-Option--verticalAlignBottom",
+  "Icon": "Polaris-Option__Icon",
+  "Checkbox": "Polaris-Option__Checkbox"
+};
+
+export { styles as default };

package/build/esm/components/OptionList/components/Option/Option.js

@@ -0,0 +1,105 @@
+import React, { useCallback } from 'react';
+import { CheckIcon } from '@shopify/polaris-icons';
+import { useToggle } from '../../../../utilities/use-toggle.js';
+import { classNames, variationName } from '../../../../utilities/css.js';
+import styles from './Option.css.js';
+import { Checkbox } from '../../../Checkbox/Checkbox.js';
+import { InlineStack } from '../../../InlineStack/InlineStack.js';
+import { Icon } from '../../../Icon/Icon.js';
+import { Scrollable } from '../../../Scrollable/Scrollable.js';
+
+function Option({
+  label,
+  value,
+  id,
+  select,
+  active,
+  allowMultiple,
+  disabled,
+  media,
+  onClick,
+  section,
+  index,
+  verticalAlign,
+  onPointerEnter,
+  onFocus
+}) {
+  const {
+    value: focused,
+    toggle: toggleFocused
+  } = useToggle(false);
+  const handleClick = useCallback(() => {
+    if (disabled) {
+      return;
+    }
+    onClick(section, index);
+  }, [disabled, index, onClick, section]);
+  const handlePointerEnter = useCallback(() => {
+    if (disabled) {
+      return;
+    }
+    onPointerEnter(section, index);
+  }, [disabled, onPointerEnter, section, index]);
+  const handleFocus = useCallback(() => {
+    toggleFocused();
+    onFocus(section, index);
+  }, [toggleFocused, onFocus, section, index]);
+  const mediaMarkup = media ? /*#__PURE__*/React.createElement("div", {
+    className: styles.Media
+  }, media) : null;
+  const singleSelectClassName = classNames(styles.SingleSelectOption, focused && styles.focused, disabled && styles.disabled, select && styles.select, active && styles.active, verticalAlign && styles[variationName('verticalAlign', verticalAlign)]);
+  const multiSelectClassName = classNames(styles.Label, disabled && styles.disabled, active && styles.active, select && styles.select, verticalAlign && styles[variationName('verticalAlign', verticalAlign)], allowMultiple && styles.CheckboxLabel, allowMultiple && styles.MultiSelectOption);
+  const optionMarkup = allowMultiple ? /*#__PURE__*/React.createElement("label", {
+    htmlFor: id,
+    className: multiSelectClassName
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.Checkbox
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    id: id,
+    label: "",
+    ariaDescribedBy: `${id}-label`,
+    value: value,
+    checked: select,
+    disabled: disabled,
+    onChange: handleClick
+  })), mediaMarkup, /*#__PURE__*/React.createElement("span", {
+    id: `${id}-label`
+  }, label)) : /*#__PURE__*/React.createElement("button", {
+    id: id,
+    type: "button",
+    className: singleSelectClassName,
+    onClick: handleClick,
+    disabled: disabled,
+    onFocus: handleFocus,
+    onBlur: toggleFocused,
+    "aria-pressed": active || select
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InlineStack, {
+    wrap: false,
+    blockAlign: verticalAlignToBlockAlign(verticalAlign)
+  }, mediaMarkup, label), (select || active) && /*#__PURE__*/React.createElement("span", {
+    className: styles.Icon
+  }, /*#__PURE__*/React.createElement(Icon, {
+    source: CheckIcon
+  }))));
+  const scrollMarkup = active ? /*#__PURE__*/React.createElement(Scrollable.ScrollTo, null) : null;
+  return /*#__PURE__*/React.createElement("li", {
+    key: id,
+    className: styles.Option,
+    tabIndex: -1,
+    onPointerEnter: handlePointerEnter
+  }, scrollMarkup, optionMarkup);
+}
+function verticalAlignToBlockAlign(verticalAlign) {
+  switch (verticalAlign) {
+    case 'top':
+      return 'start';
+    case 'center':
+      return 'center';
+    case 'bottom':
+      return 'end';
+    default:
+      return 'start';
+  }
+}
+
+export { Option };

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

@@ -0,0 +1,8 @@
+var styles = {
+  "Page": "Polaris-Page",
+  "fullWidth": "Polaris-Page--fullWidth",
+  "narrowWidth": "Polaris-Page--narrowWidth",
+  "Content": "Polaris-Page__Content"
+};
+
+export { styles as default };

package/build/esm/components/Page/Page.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { classNames } from '../../utilities/css.js';
+import { isInterface } from '../../utilities/is-interface.js';
+import { isReactElement } from '../../utilities/is-react-element.js';
+import styles from './Page.css.js';
+import { Header } from './components/Header/Header.js';
+
+function Page({
+  children,
+  fullWidth,
+  narrowWidth,
+  ...rest
+}) {
+  const pageClassName = classNames(styles.Page, fullWidth && styles.fullWidth, narrowWidth && styles.narrowWidth);
+  const hasHeaderContent = rest.title != null && rest.title !== '' || rest.subtitle != null && rest.subtitle !== '' || rest.primaryAction != null || rest.secondaryActions != null && (isInterface(rest.secondaryActions) && rest.secondaryActions.length > 0 || isReactElement(rest.secondaryActions)) || rest.actionGroups != null && rest.actionGroups.length > 0 || rest.backAction != null;
+  const contentClassName = classNames(!hasHeaderContent && styles.Content);
+  const headerMarkup = hasHeaderContent ? /*#__PURE__*/React.createElement(Header, Object.assign({
+    filterActions: true
+  }, rest)) : null;
+  return /*#__PURE__*/React.createElement("div", {
+    className: pageClassName
+  }, headerMarkup, /*#__PURE__*/React.createElement("div", {
+    className: contentClassName
+  }, children));
+}
+
+export { Page };

package/build/esm/components/Page/components/Header/Header.css.js

@@ -0,0 +1,18 @@
+var styles = {
+  "TitleWrapper": "Polaris-Header__TitleWrapper",
+  "TitleWrapperExpand": "Polaris-Header__TitleWrapperExpand",
+  "BreadcrumbWrapper": "Polaris-Header__BreadcrumbWrapper",
+  "PaginationWrapper": "Polaris-Header__PaginationWrapper",
+  "PrimaryActionWrapper": "Polaris-Header__PrimaryActionWrapper",
+  "Row": "Polaris-Header__Row",
+  "mobileView": "Polaris-Header--mobileView",
+  "RightAlign": "Polaris-Header__RightAlign",
+  "noBreadcrumbs": "Polaris-Header--noBreadcrumbs",
+  "AdditionalMetaData": "Polaris-Header__AdditionalMetaData",
+  "Actions": "Polaris-Header__Actions",
+  "longTitle": "Polaris-Header--longTitle",
+  "mediumTitle": "Polaris-Header--mediumTitle",
+  "isSingleRow": "Polaris-Header--isSingleRow"
+};
+
+export { styles as default };