polaris-react-extended 13.10.3

package/build/cjs/components/TextField/components/Resizer/Resizer.js

@@ -0,0 +1,88 @@
+'use strict';
+
+var React = require('react');
+var useIsomorphicLayoutEffect = require('../../../../utilities/use-isomorphic-layout-effect.js');
+var TextField_module = require('../../TextField.css.js');
+var EventListener = require('../../../EventListener/EventListener.js');
+
+function Resizer({
+  contents,
+  currentHeight: currentHeightProp = null,
+  minimumLines,
+  onHeightChange
+}) {
+  const contentNode = React.useRef(null);
+  const minimumLinesNode = React.useRef(null);
+  const animationFrame = React.useRef();
+  const currentHeight = React.useRef(currentHeightProp);
+  if (currentHeightProp !== currentHeight.current) {
+    currentHeight.current = currentHeightProp;
+  }
+  React.useEffect(() => {
+    return () => {
+      if (animationFrame.current) {
+        cancelAnimationFrame(animationFrame.current);
+      }
+    };
+  }, []);
+  const minimumLinesMarkup = minimumLines ? /*#__PURE__*/React.createElement("div", {
+    ref: minimumLinesNode,
+    className: TextField_module.default.DummyInput,
+    dangerouslySetInnerHTML: {
+      __html: getContentsForMinimumLines(minimumLines)
+    }
+  }) : null;
+  const handleHeightCheck = React.useCallback(() => {
+    if (animationFrame.current) {
+      cancelAnimationFrame(animationFrame.current);
+    }
+    animationFrame.current = requestAnimationFrame(() => {
+      if (!contentNode.current || !minimumLinesNode.current) {
+        return;
+      }
+      const newHeight = Math.max(contentNode.current.offsetHeight, minimumLinesNode.current.offsetHeight);
+      if (newHeight !== currentHeight.current) {
+        onHeightChange(newHeight);
+      }
+    });
+  }, [onHeightChange]);
+  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+    handleHeightCheck();
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    "aria-hidden": true,
+    className: TextField_module.default.Resizer
+  }, /*#__PURE__*/React.createElement(EventListener.EventListener, {
+    event: "resize",
+    handler: handleHeightCheck
+  }), /*#__PURE__*/React.createElement("div", {
+    ref: contentNode,
+    className: TextField_module.default.DummyInput,
+    dangerouslySetInnerHTML: {
+      __html: getFinalContents(contents)
+    }
+  }), minimumLinesMarkup);
+}
+const ENTITIES_TO_REPLACE = {
+  '&': '&',
+  '<': '&lt;',
+  '>': '&gt;',
+  '\n': '<br>',
+  '\r': ''
+};
+const REPLACE_REGEX = new RegExp(`[${Object.keys(ENTITIES_TO_REPLACE).join()}]`, 'g');
+function replaceEntity(entity) {
+  return ENTITIES_TO_REPLACE[entity];
+}
+function getContentsForMinimumLines(minimumLines) {
+  let content = '';
+  for (let line = 0; line < minimumLines; line++) {
+    content += '<br>';
+  }
+  return content;
+}
+function getFinalContents(contents) {
+  return contents ? `${contents.replace(REPLACE_REGEX, replaceEntity)}<br>` : '<br>';
+}
+
+exports.Resizer = Resizer;

package/build/cjs/components/TextField/components/Spinner/Spinner.js

@@ -0,0 +1,56 @@
+'use strict';
+
+var React = require('react');
+var polarisIcons = require('@shopify/polaris-icons');
+var TextField_module = require('../../TextField.css.js');
+var Icon = require('../../../Icon/Icon.js');
+
+const Spinner = /*#__PURE__*/React.forwardRef(function Spinner({
+  onChange,
+  onClick,
+  onMouseDown,
+  onMouseUp,
+  onBlur
+}, ref) {
+  function handleStep(step) {
+    return () => onChange(step);
+  }
+  function handleMouseDown(onChange) {
+    return event => {
+      if (event.button !== 0) return;
+      onMouseDown?.(onChange);
+    };
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: TextField_module.default.Spinner,
+    onClick: onClick,
+    "aria-hidden": true,
+    ref: ref
+  }, /*#__PURE__*/React.createElement("div", {
+    role: "button",
+    className: TextField_module.default.Segment,
+    tabIndex: -1,
+    onClick: handleStep(1),
+    onMouseDown: handleMouseDown(handleStep(1)),
+    onMouseUp: onMouseUp,
+    onBlur: onBlur
+  }, /*#__PURE__*/React.createElement("div", {
+    className: TextField_module.default.SpinnerIcon
+  }, /*#__PURE__*/React.createElement(Icon.Icon, {
+    source: polarisIcons.ChevronUpIcon
+  }))), /*#__PURE__*/React.createElement("div", {
+    role: "button",
+    className: TextField_module.default.Segment,
+    tabIndex: -1,
+    onClick: handleStep(-1),
+    onMouseDown: handleMouseDown(handleStep(-1)),
+    onMouseUp: onMouseUp,
+    onBlur: onBlur
+  }, /*#__PURE__*/React.createElement("div", {
+    className: TextField_module.default.SpinnerIcon
+  }, /*#__PURE__*/React.createElement(Icon.Icon, {
+    source: polarisIcons.ChevronDownIcon
+  }))));
+});
+
+exports.Spinner = Spinner;

package/build/cjs/components/ThemeProvider/ThemeProvider.css.js

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {
+  "themeContainer": "Polaris-ThemeProvider--themeContainer"
+};
+
+exports.default = styles;

package/build/cjs/components/ThemeProvider/ThemeProvider.js

@@ -0,0 +1,34 @@
+'use strict';
+
+var React = require('react');
+var polarisTokens = require('@shopify/polaris-tokens');
+var useTheme = require('../../utilities/use-theme.js');
+var css = require('../../utilities/css.js');
+var ThemeProvider_module = require('./ThemeProvider.css.js');
+
+/**
+ * Allowlist of local themes
+ * TODO: Replace `as const` with `satisfies ThemeName[]`
+ */
+const themeNamesLocal = ['light', 'dark-experimental'];
+const isThemeNameLocal = name => themeNamesLocal.includes(name);
+function ThemeProvider(props) {
+  const {
+    as: ThemeContainer = 'div',
+    children,
+    className,
+    theme: themeName = polarisTokens.themeNameDefault
+  } = props;
+  return /*#__PURE__*/React.createElement(useTheme.ThemeNameContext.Provider, {
+    value: themeName
+  }, /*#__PURE__*/React.createElement(useTheme.ThemeContext.Provider, {
+    value: useTheme.getTheme(themeName)
+  }, /*#__PURE__*/React.createElement(ThemeContainer, {
+    "data-portal-id": props['data-portal-id'],
+    className: css.classNames(polarisTokens.createThemeClassName(themeName), ThemeProvider_module.default.themeContainer, className)
+  }, children)));
+}
+
+exports.ThemeProvider = ThemeProvider;
+exports.isThemeNameLocal = isThemeNameLocal;
+exports.themeNamesLocal = themeNamesLocal;

package/build/cjs/components/Thumbnail/Thumbnail.css.js

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {
+  "Thumbnail": "Polaris-Thumbnail",
+  "sizeExtraSmall": "Polaris-Thumbnail--sizeExtraSmall",
+  "sizeSmall": "Polaris-Thumbnail--sizeSmall",
+  "sizeMedium": "Polaris-Thumbnail--sizeMedium",
+  "sizeLarge": "Polaris-Thumbnail--sizeLarge",
+  "transparent": "Polaris-Thumbnail--transparent"
+};
+
+exports.default = styles;

package/build/cjs/components/Thumbnail/Thumbnail.js

@@ -0,0 +1,28 @@
+'use strict';
+
+var React = require('react');
+var css = require('../../utilities/css.js');
+var Thumbnail_module = require('./Thumbnail.css.js');
+var Image = require('../Image/Image.js');
+var Icon = require('../Icon/Icon.js');
+
+function Thumbnail({
+  source,
+  alt,
+  size = 'medium',
+  transparent
+}) {
+  const className = css.classNames(Thumbnail_module.default.Thumbnail, size && Thumbnail_module.default[css.variationName('size', size)], transparent && Thumbnail_module.default.transparent);
+  const content = typeof source === 'string' ? /*#__PURE__*/React.createElement(Image.Image, {
+    alt: alt,
+    source: source
+  }) : /*#__PURE__*/React.createElement(Icon.Icon, {
+    accessibilityLabel: alt,
+    source: source
+  });
+  return /*#__PURE__*/React.createElement("span", {
+    className: className
+  }, content);
+}
+
+exports.Thumbnail = Thumbnail;

package/build/cjs/components/Toast/Toast.js

@@ -0,0 +1,32 @@
+'use strict';
+
+var React = require('react');
+var useDeepEffect = require('../../utilities/use-deep-effect.js');
+var hooks = require('../../utilities/frame/hooks.js');
+
+// The script in the styleguide that generates the Props Explorer data expects
+// that the interface defining the props is defined in this file, not imported
+// from elsewhere. This silly workaround ensures that the Props Explorer table
+// is generated correctly.
+
+const Toast = /*#__PURE__*/React.memo(function Toast(props) {
+  const id = React.useId();
+  const {
+    showToast,
+    hideToast
+  } = hooks.useFrame();
+  useDeepEffect.useDeepEffect(() => {
+    showToast({
+      id,
+      ...props
+    });
+    return () => {
+      hideToast({
+        id
+      });
+    };
+  }, [props]);
+  return null;
+});
+
+exports.Toast = Toast;

package/build/cjs/components/Tooltip/Tooltip.css.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {
+  "TooltipContainer": "Polaris-Tooltip__TooltipContainer",
+  "HasUnderline": "Polaris-Tooltip__HasUnderline"
+};
+
+exports.default = styles;

package/build/cjs/components/Tooltip/Tooltip.js

@@ -0,0 +1,185 @@
+'use strict';
+
+var React = require('react');
+var focus = require('../../utilities/focus.js');
+var useToggle = require('../../utilities/use-toggle.js');
+var css = require('../../utilities/css.js');
+var Tooltip_module = require('./Tooltip.css.js');
+var hooks = require('../../utilities/ephemeral-presence-manager/hooks.js');
+var Portal = require('../Portal/Portal.js');
+var TooltipOverlay = require('./components/TooltipOverlay/TooltipOverlay.js');
+var Text = require('../Text/Text.js');
+
+const HOVER_OUT_TIMEOUT = 150;
+function Tooltip({
+  children,
+  content,
+  dismissOnMouseOut,
+  active: originalActive,
+  hoverDelay,
+  preferredPosition = 'above',
+  activatorWrapper = 'span',
+  accessibilityLabel,
+  width = 'default',
+  padding = 'default',
+  borderRadius: borderRadiusProp,
+  zIndexOverride,
+  hasUnderline,
+  persistOnClick,
+  onOpen,
+  onClose
+}) {
+  const borderRadius = borderRadiusProp || '200';
+  const WrapperComponent = activatorWrapper;
+  const {
+    value: active,
+    setTrue: setActiveTrue,
+    setFalse: handleBlur
+  } = useToggle.useToggle(Boolean(originalActive));
+  const {
+    value: persist,
+    toggle: togglePersisting
+  } = useToggle.useToggle(Boolean(originalActive) && Boolean(persistOnClick));
+  const [activatorNode, setActivatorNode] = React.useState(null);
+  const {
+    presenceList,
+    addPresence,
+    removePresence
+  } = hooks.useEphemeralPresenceManager();
+  const id = React.useId();
+  const activatorContainer = React.useRef(null);
+  const mouseEntered = React.useRef(false);
+  const [shouldAnimate, setShouldAnimate] = React.useState(Boolean(!originalActive));
+  const hoverDelayTimeout = React.useRef(null);
+  const hoverOutTimeout = React.useRef(null);
+  const handleFocus = React.useCallback(() => {
+    if (originalActive !== false) {
+      setActiveTrue();
+    }
+  }, [originalActive, setActiveTrue]);
+  React.useEffect(() => {
+    const firstFocusable = activatorContainer.current ? focus.findFirstFocusableNode(activatorContainer.current) : null;
+    const accessibilityNode = firstFocusable || activatorContainer.current;
+    if (!accessibilityNode) return;
+    accessibilityNode.tabIndex = 0;
+    accessibilityNode.setAttribute('aria-describedby', id);
+    accessibilityNode.setAttribute('data-polaris-tooltip-activator', 'true');
+  }, [id, children]);
+  React.useEffect(() => {
+    return () => {
+      if (hoverDelayTimeout.current) {
+        clearTimeout(hoverDelayTimeout.current);
+      }
+      if (hoverOutTimeout.current) {
+        clearTimeout(hoverOutTimeout.current);
+      }
+    };
+  }, []);
+  const handleOpen = React.useCallback(() => {
+    setShouldAnimate(!presenceList.tooltip && !active);
+    onOpen?.();
+    addPresence('tooltip');
+  }, [addPresence, presenceList.tooltip, onOpen, active]);
+  const handleClose = React.useCallback(() => {
+    onClose?.();
+    setShouldAnimate(false);
+    hoverOutTimeout.current = setTimeout(() => {
+      removePresence('tooltip');
+    }, HOVER_OUT_TIMEOUT);
+  }, [removePresence, onClose]);
+  const handleKeyUp = React.useCallback(event => {
+    if (event.key !== 'Escape') return;
+    handleClose?.();
+    handleBlur();
+    persistOnClick && togglePersisting();
+  }, [handleBlur, handleClose, persistOnClick, togglePersisting]);
+  React.useEffect(() => {
+    if (originalActive === false && active) {
+      handleClose();
+      handleBlur();
+    }
+  }, [originalActive, active, handleClose, handleBlur]);
+  const portal = activatorNode ? /*#__PURE__*/React.createElement(Portal.Portal, {
+    idPrefix: "tooltip"
+  }, /*#__PURE__*/React.createElement(TooltipOverlay.TooltipOverlay, {
+    id: id,
+    preferredPosition: preferredPosition,
+    activator: activatorNode,
+    active: active,
+    accessibilityLabel: accessibilityLabel,
+    onClose: noop,
+    preventInteraction: dismissOnMouseOut,
+    width: width,
+    padding: padding,
+    borderRadius: borderRadius,
+    zIndexOverride: zIndexOverride,
+    instant: !shouldAnimate
+  }, /*#__PURE__*/React.createElement(Text.Text, {
+    as: "span",
+    variant: "bodyMd"
+  }, content))) : null;
+  const wrapperClassNames = css.classNames(activatorWrapper === 'div' && Tooltip_module.default.TooltipContainer, hasUnderline && Tooltip_module.default.HasUnderline);
+  return /*#__PURE__*/React.createElement(WrapperComponent, {
+    onFocus: () => {
+      handleOpen();
+      handleFocus();
+    },
+    onBlur: () => {
+      handleClose();
+      handleBlur();
+      if (persistOnClick) {
+        togglePersisting();
+      }
+    },
+    onMouseLeave: handleMouseLeave,
+    onMouseOver: handleMouseEnterFix,
+    onMouseDown: persistOnClick ? togglePersisting : undefined,
+    ref: setActivator,
+    onKeyUp: handleKeyUp,
+    className: wrapperClassNames
+  }, children, portal);
+  function setActivator(node) {
+    const activatorContainerRef = activatorContainer;
+    if (node == null) {
+      activatorContainerRef.current = null;
+      setActivatorNode(null);
+      return;
+    }
+    if (node.firstElementChild) {
+      setActivatorNode(node.firstElementChild);
+    }
+    activatorContainerRef.current = node;
+  }
+  function handleMouseEnter() {
+    mouseEntered.current = true;
+    if (hoverDelay && !presenceList.tooltip) {
+      hoverDelayTimeout.current = setTimeout(() => {
+        handleOpen();
+        handleFocus();
+      }, hoverDelay);
+    } else {
+      handleOpen();
+      handleFocus();
+    }
+  }
+  function handleMouseLeave() {
+    if (hoverDelayTimeout.current) {
+      clearTimeout(hoverDelayTimeout.current);
+      hoverDelayTimeout.current = null;
+    }
+    mouseEntered.current = false;
+    handleClose();
+    if (!persist) {
+      handleBlur();
+    }
+  }
+
+  // https://github.com/facebook/react/issues/10109
+  // Mouseenter event not triggered when cursor moves from disabled button
+  function handleMouseEnterFix() {
+    !mouseEntered.current && handleMouseEnter();
+  }
+}
+function noop() {}
+
+exports.Tooltip = Tooltip;

package/build/cjs/components/Tooltip/components/TooltipOverlay/TooltipOverlay.css.js

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {
+  "TooltipOverlay": "Polaris-TooltipOverlay",
+  "Tail": "Polaris-TooltipOverlay__Tail",
+  "positionedAbove": "Polaris-TooltipOverlay--positionedAbove",
+  "measuring": "Polaris-TooltipOverlay--measuring",
+  "measured": "Polaris-TooltipOverlay--measured",
+  "instant": "Polaris-TooltipOverlay--instant",
+  "Content": "Polaris-TooltipOverlay__Content",
+  "default": "Polaris-TooltipOverlay--default",
+  "wide": "Polaris-TooltipOverlay--wide"
+};
+
+exports.default = styles;

package/build/cjs/components/Tooltip/components/TooltipOverlay/TooltipOverlay.js

@@ -0,0 +1,88 @@
+'use strict';
+
+var React = require('react');
+var css = require('../../../../utilities/css.js');
+var shared = require('../../../shared.js');
+var TooltipOverlay_module = require('./TooltipOverlay.css.js');
+var PositionedOverlay = require('../../../PositionedOverlay/PositionedOverlay.js');
+var hooks = require('../../../../utilities/i18n/hooks.js');
+
+const tailUpPaths = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("path", {
+  d: "M18.829 8.171 11.862.921A3 3 0 0 0 7.619.838L0 8.171h1.442l6.87-6.612a2 2 0 0 1 2.83.055l6.3 6.557h1.387Z",
+  fill: "var(--p-color-tooltip-tail-up-border)"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M17.442 10.171h-16v-2l6.87-6.612a2 2 0 0 1 2.83.055l6.3 6.557v2Z",
+  fill: "var(--p-color-bg-surface)"
+}));
+const tailDownPaths = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("path", {
+  d: "m0 2 6.967 7.25a3 3 0 0 0 4.243.083L18.829 2h-1.442l-6.87 6.612a2 2 0 0 1-2.83-.055L1.387 2H0Z",
+  fill: "var(--p-color-tooltip-tail-down-border)"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M1.387 0h16v2l-6.87 6.612a2 2 0 0 1-2.83-.055L1.387 2V0Z",
+  fill: "var(--p-color-bg-surface)"
+}));
+function TooltipOverlay({
+  active,
+  activator,
+  preferredPosition = 'above',
+  preventInteraction,
+  id,
+  children,
+  accessibilityLabel,
+  width,
+  padding,
+  borderRadius,
+  zIndexOverride,
+  instant
+}) {
+  const i18n = hooks.useI18n();
+  const markup = active ? /*#__PURE__*/React.createElement(PositionedOverlay.PositionedOverlay, {
+    active: active,
+    activator: activator,
+    preferredPosition: preferredPosition,
+    preventInteraction: preventInteraction,
+    render: renderTooltip,
+    zIndexOverride: zIndexOverride
+  }) : null;
+  return markup;
+  function renderTooltip(overlayDetails) {
+    const {
+      measuring,
+      desiredHeight,
+      positioning,
+      chevronOffset
+    } = overlayDetails;
+    const containerClassName = css.classNames(TooltipOverlay_module.default.TooltipOverlay, measuring && TooltipOverlay_module.default.measuring, !measuring && TooltipOverlay_module.default.measured, instant && TooltipOverlay_module.default.instant, positioning === 'above' && TooltipOverlay_module.default.positionedAbove);
+    const contentClassName = css.classNames(TooltipOverlay_module.default.Content, width && TooltipOverlay_module.default[width]);
+    const contentStyles = measuring ? undefined : {
+      minHeight: desiredHeight
+    };
+    const style = {
+      '--pc-tooltip-chevron-x-pos': `${chevronOffset}px`,
+      '--pc-tooltip-border-radius': borderRadius ? `var(--p-border-radius-${borderRadius})` : undefined,
+      '--pc-tooltip-padding': padding && padding === 'default' ? 'var(--p-space-100) var(--p-space-200)' : `var(--p-space-${padding})`
+    };
+    return /*#__PURE__*/React.createElement("div", Object.assign({
+      style: style,
+      className: containerClassName
+    }, shared.layer.props), /*#__PURE__*/React.createElement("svg", {
+      className: TooltipOverlay_module.default.Tail,
+      width: "19",
+      height: "11",
+      fill: "none"
+    }, positioning === 'above' ? tailDownPaths : tailUpPaths), /*#__PURE__*/React.createElement("div", {
+      id: id,
+      role: "tooltip",
+      className: contentClassName,
+      style: {
+        ...contentStyles,
+        ...style
+      },
+      "aria-label": accessibilityLabel ? i18n.translate('Polaris.TooltipOverlay.accessibilityLabel', {
+        label: accessibilityLabel
+      }) : undefined
+    }, children));
+  }
+}
+
+exports.TooltipOverlay = TooltipOverlay;

package/build/cjs/components/TopBar/TopBar.css.js

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {
+  "TopBar": "Polaris-TopBar",
+  "Container": "Polaris-TopBar__Container",
+  "LogoDisplayControl": "Polaris-TopBar__LogoDisplayControl",
+  "LogoDisplayContainer": "Polaris-TopBar__LogoDisplayContainer",
+  "LogoContainer": "Polaris-TopBar__LogoContainer",
+  "hasLogoSuffix": "Polaris-TopBar--hasLogoSuffix",
+  "Logo": "Polaris-TopBar__Logo",
+  "LogoLink": "Polaris-TopBar__LogoLink",
+  "ContextControl": "Polaris-TopBar__ContextControl",
+  "NavigationIcon": "Polaris-TopBar__NavigationIcon",
+  "focused": "Polaris-TopBar--focused",
+  "IconWrapper": "Polaris-TopBar__IconWrapper",
+  "LeftContent": "Polaris-TopBar__LeftContent",
+  "Search": "Polaris-TopBar__Search",
+  "RightContent": "Polaris-TopBar__RightContent",
+  "SecondaryMenu": "Polaris-TopBar__SecondaryMenu"
+};
+
+exports.default = styles;