polaris-react-extended 13.10.3

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

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {
+  "BulkActionsOuterLayout": "Polaris-BulkActions__BulkActionsOuterLayout",
+  "BulkActionsSelectAllWrapper": "Polaris-BulkActions__BulkActionsSelectAllWrapper",
+  "BulkActionsPromotedActionsWrapper": "Polaris-BulkActions__BulkActionsPromotedActionsWrapper",
+  "BulkActionsLayout": "Polaris-BulkActions__BulkActionsLayout",
+  "BulkActionsLayout--measuring": "Polaris-BulkActions--bulkActionsLayoutMeasuring",
+  "BulkActionsMeasurerLayout": "Polaris-BulkActions__BulkActionsMeasurerLayout",
+  "BulkActionButton": "Polaris-BulkActions__BulkActionButton",
+  "disabled": "Polaris-BulkActions--disabled",
+  "AllAction": "Polaris-BulkActions__AllAction"
+};
+
+exports.default = styles;

package/build/cjs/components/BulkActions/BulkActions.js

@@ -0,0 +1,228 @@
+'use strict';
+
+var React = require('react');
+var css = require('../../utilities/css.js');
+var utilities = require('./utilities.js');
+var BulkActions_module = require('./BulkActions.css.js');
+var BulkActionMenu = require('./components/BulkActionMenu/BulkActionMenu.js');
+var CheckableButton = require('../CheckableButton/CheckableButton.js');
+var BulkActionsMeasurer = require('./components/BulkActionsMeasurer/BulkActionsMeasurer.js');
+var hooks = require('../../utilities/i18n/hooks.js');
+var UnstyledButton = require('../UnstyledButton/UnstyledButton.js');
+var Text = require('../Text/Text.js');
+var BulkActionButton = require('./components/BulkActionButton/BulkActionButton.js');
+var Popover = require('../Popover/Popover.js');
+var ActionList = require('../ActionList/ActionList.js');
+var InlineStack = require('../InlineStack/InlineStack.js');
+
+const BulkActions = /*#__PURE__*/React.forwardRef(function BulkActions({
+  promotedActions,
+  actions,
+  disabled,
+  buttonSize,
+  paginatedSelectAllAction,
+  paginatedSelectAllText,
+  label,
+  accessibilityLabel,
+  selected,
+  onToggleAll,
+  onMoreActionPopoverToggle,
+  width,
+  selectMode
+}, ref) {
+  const i18n = hooks.useI18n();
+  const [popoverActive, setPopoverActive] = React.useState(false);
+  const [state, setState] = React.useReducer((data, partialData) => {
+    return {
+      ...data,
+      ...partialData
+    };
+  }, {
+    disclosureWidth: 0,
+    containerWidth: Infinity,
+    actionsWidths: [],
+    visiblePromotedActions: [],
+    hiddenPromotedActions: [],
+    hasMeasured: false
+  });
+  const {
+    visiblePromotedActions,
+    hiddenPromotedActions,
+    containerWidth,
+    disclosureWidth,
+    actionsWidths,
+    hasMeasured
+  } = state;
+  React.useEffect(() => {
+    if (containerWidth === 0 || !promotedActions || promotedActions.length === 0) {
+      return;
+    }
+    const {
+      visiblePromotedActions,
+      hiddenPromotedActions
+    } = utilities.getVisibleAndHiddenActionsIndices(promotedActions, disclosureWidth, actionsWidths, containerWidth);
+    setState({
+      visiblePromotedActions,
+      hiddenPromotedActions,
+      hasMeasured: containerWidth !== Infinity
+    });
+  }, [containerWidth, disclosureWidth, promotedActions, actionsWidths]);
+  const activatorLabel = !promotedActions || promotedActions && visiblePromotedActions.length === 0 ? i18n.translate('Polaris.ResourceList.BulkActions.actionsActivatorLabel') : i18n.translate('Polaris.ResourceList.BulkActions.moreActionsActivatorLabel');
+  const paginatedSelectAllMarkup = paginatedSelectAllAction ? /*#__PURE__*/React.createElement(UnstyledButton.UnstyledButton, {
+    className: BulkActions_module.default.AllAction,
+    onClick: paginatedSelectAllAction.onAction,
+    size: "slim",
+    disabled: disabled
+  }, /*#__PURE__*/React.createElement(Text.Text, {
+    as: "span",
+    variant: "bodySm",
+    fontWeight: "medium"
+  }, paginatedSelectAllAction.content)) : null;
+  const hasTextAndAction = paginatedSelectAllText && paginatedSelectAllAction;
+  const ariaLive = hasTextAndAction ? 'polite' : undefined;
+  const checkableButtonProps = {
+    accessibilityLabel,
+    label: hasTextAndAction ? paginatedSelectAllText : label,
+    selected,
+    onToggleAll,
+    disabled,
+    ariaLive,
+    ref
+  };
+  const togglePopover = React.useCallback(() => {
+    onMoreActionPopoverToggle?.(popoverActive);
+    setPopoverActive(popoverActive => !popoverActive);
+  }, [onMoreActionPopoverToggle, popoverActive]);
+  const handleMeasurement = React.useCallback(measurements => {
+    const {
+      hiddenActionsWidths: actionsWidths,
+      containerWidth,
+      disclosureWidth
+    } = measurements;
+    if (!promotedActions || promotedActions.length === 0) {
+      return;
+    }
+    const {
+      visiblePromotedActions,
+      hiddenPromotedActions
+    } = utilities.getVisibleAndHiddenActionsIndices(promotedActions, disclosureWidth, actionsWidths, containerWidth);
+    setState({
+      visiblePromotedActions,
+      hiddenPromotedActions,
+      actionsWidths,
+      containerWidth,
+      disclosureWidth,
+      hasMeasured: true
+    });
+  }, [promotedActions]);
+  const actionSections = utilities.getActionSections(actions);
+  const promotedActionsMarkup = promotedActions ? promotedActions.filter((_, index) => {
+    if (!visiblePromotedActions.includes(index)) {
+      return false;
+    }
+    return true;
+  }).map((action, index) => {
+    if (utilities.instanceOfMenuGroupDescriptor(action)) {
+      return /*#__PURE__*/React.createElement(BulkActionMenu.BulkActionMenu, Object.assign({
+        key: index
+      }, action, {
+        isNewBadgeInBadgeActions: utilities.isNewBadgeInBadgeActions(actionSections),
+        size: buttonSize
+      }));
+    }
+    return /*#__PURE__*/React.createElement(BulkActionButton.BulkActionButton, Object.assign({
+      key: index,
+      disabled: disabled
+    }, action, {
+      size: buttonSize
+    }));
+  }) : null;
+  const hiddenPromotedActionObjects = hiddenPromotedActions.map(index => promotedActions?.[index]);
+  const mergedHiddenPromotedActions = hiddenPromotedActionObjects.reduce((memo, action) => {
+    if (!action) return memo;
+    if (utilities.instanceOfMenuGroupDescriptor(action)) {
+      return memo.concat(action.actions);
+    }
+    return memo.concat(action);
+  }, []);
+  const hiddenPromotedSection = {
+    items: mergedHiddenPromotedActions
+  };
+  const allHiddenActions = React.useMemo(() => {
+    if (actionSections) {
+      return actionSections;
+    }
+    if (!actions) {
+      return [];
+    }
+    let isAFlatArray = true;
+    return actions.filter(action => action).reduce((memo, action) => {
+      if (utilities.instanceOfBulkActionListSection(action)) {
+        isAFlatArray = false;
+        return memo.concat(action);
+      }
+      if (isAFlatArray) {
+        if (memo.length === 0) {
+          return [{
+            items: [action]
+          }];
+        }
+        const lastItem = memo[memo.length - 1];
+        memo.splice(memo.length - 1, 1, {
+          items: [...lastItem.items, action]
+        });
+        return memo;
+      }
+      isAFlatArray = true;
+      return memo.concat({
+        items: [action]
+      });
+    }, []);
+  }, [actions, actionSections]);
+  const activator = /*#__PURE__*/React.createElement(BulkActionButton.BulkActionButton, {
+    disclosure: true,
+    showContentInButton: !promotedActionsMarkup,
+    onAction: togglePopover,
+    content: activatorLabel,
+    disabled: disabled,
+    indicator: utilities.isNewBadgeInBadgeActions(actionSections),
+    size: buttonSize
+  });
+  const actionsMarkup = allHiddenActions.length > 0 ? /*#__PURE__*/React.createElement(Popover.Popover, {
+    active: popoverActive,
+    activator: activator,
+    preferredAlignment: "right",
+    onClose: togglePopover
+  }, /*#__PURE__*/React.createElement(ActionList.ActionList, {
+    sections: hiddenPromotedSection.items.length > 0 ? [hiddenPromotedSection, ...allHiddenActions] : allHiddenActions,
+    onActionAnyItem: togglePopover
+  })) : null;
+  const measurerMarkup = /*#__PURE__*/React.createElement(BulkActionsMeasurer.BulkActionsMeasurer, {
+    promotedActions: promotedActions,
+    disabled: disabled,
+    buttonSize: buttonSize,
+    handleMeasurement: handleMeasurement
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: BulkActions_module.default.BulkActions,
+    style: width ? {
+      width
+    } : undefined
+  }, /*#__PURE__*/React.createElement(InlineStack.InlineStack, {
+    gap: "400",
+    blockAlign: "center"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: BulkActions_module.default.BulkActionsSelectAllWrapper
+  }, /*#__PURE__*/React.createElement(CheckableButton.CheckableButton, checkableButtonProps), paginatedSelectAllMarkup), selectMode ? /*#__PURE__*/React.createElement("div", {
+    className: BulkActions_module.default.BulkActionsPromotedActionsWrapper
+  }, /*#__PURE__*/React.createElement(InlineStack.InlineStack, {
+    gap: "100",
+    blockAlign: "center"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: BulkActions_module.default.BulkActionsOuterLayout
+  }, measurerMarkup, /*#__PURE__*/React.createElement("div", {
+    className: css.classNames(BulkActions_module.default.BulkActionsLayout, !hasMeasured && BulkActions_module.default['BulkActionsLayout--measuring'])
+  }, promotedActionsMarkup)), actionsMarkup)) : null));
+});
+
+exports.BulkActions = BulkActions;

package/build/cjs/components/BulkActions/components/BulkActionButton/BulkActionButton.js

@@ -0,0 +1,58 @@
+'use strict';
+
+var React = require('react');
+var polarisIcons = require('@shopify/polaris-icons');
+var useComponentDidMount = require('../../../../utilities/use-component-did-mount.js');
+var BulkActions_module = require('../../BulkActions.css.js');
+var Indicator = require('../../../Indicator/Indicator.js');
+var Tooltip = require('../../../Tooltip/Tooltip.js');
+var Button = require('../../../Button/Button.js');
+var Icon = require('../../../Icon/Icon.js');
+
+function BulkActionButton({
+  handleMeasurement,
+  url,
+  external,
+  onAction,
+  content,
+  disclosure,
+  accessibilityLabel,
+  disabled,
+  destructive,
+  indicator,
+  showContentInButton,
+  size
+}) {
+  const bulkActionButton = React.useRef(null);
+  useComponentDidMount.useComponentDidMount(() => {
+    if (handleMeasurement && bulkActionButton.current) {
+      const width = bulkActionButton.current.getBoundingClientRect().width;
+      handleMeasurement(width);
+    }
+  });
+  const isActivatorForMoreActionsPopover = disclosure && !showContentInButton;
+  const buttonContent = isActivatorForMoreActionsPopover ? undefined : content;
+  const buttonMarkup = /*#__PURE__*/React.createElement(Button.Button, {
+    external: external,
+    url: url,
+    accessibilityLabel: isActivatorForMoreActionsPopover ? content : accessibilityLabel,
+    tone: destructive ? 'critical' : undefined,
+    disclosure: disclosure && showContentInButton,
+    onClick: onAction,
+    disabled: disabled,
+    size: size,
+    icon: isActivatorForMoreActionsPopover ? /*#__PURE__*/React.createElement(Icon.Icon, {
+      source: polarisIcons.MenuHorizontalIcon,
+      tone: "base"
+    }) : undefined
+  }, buttonContent);
+  return /*#__PURE__*/React.createElement("div", {
+    className: BulkActions_module.default.BulkActionButton,
+    ref: bulkActionButton
+  }, isActivatorForMoreActionsPopover ? /*#__PURE__*/React.createElement(Tooltip.Tooltip, {
+    content: content,
+    preferredPosition: "below"
+  }, buttonMarkup) : buttonMarkup, indicator && /*#__PURE__*/React.createElement(Indicator.Indicator, null));
+}
+
+exports.BulkActionButton = BulkActionButton;

package/build/cjs/components/BulkActions/components/BulkActionMenu/BulkActionMenu.js

@@ -0,0 +1,37 @@
+'use strict';
+
+var React = require('react');
+var useToggle = require('../../../../utilities/use-toggle.js');
+var BulkActionButton = require('../BulkActionButton/BulkActionButton.js');
+var Popover = require('../../../Popover/Popover.js');
+var ActionList = require('../../../ActionList/ActionList.js');
+
+function BulkActionMenu({
+  title,
+  actions,
+  isNewBadgeInBadgeActions,
+  size
+}) {
+  const {
+    value: isVisible,
+    toggle: toggleMenuVisibility
+  } = useToggle.useToggle(false);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Popover.Popover, {
+    active: isVisible,
+    activator: /*#__PURE__*/React.createElement(BulkActionButton.BulkActionButton, {
+      disclosure: true,
+      showContentInButton: true,
+      onAction: toggleMenuVisibility,
+      content: title,
+      indicator: isNewBadgeInBadgeActions,
+      size: size
+    }),
+    onClose: toggleMenuVisibility,
+    preferInputActivator: true
+  }, /*#__PURE__*/React.createElement(ActionList.ActionList, {
+    items: actions,
+    onActionAnyItem: toggleMenuVisibility
+  })));
+}
+
+exports.BulkActionMenu = BulkActionMenu;

package/build/cjs/components/BulkActions/components/BulkActionsMeasurer/BulkActionsMeasurer.js

@@ -0,0 +1,69 @@
+'use strict';
+
+var React = require('react');
+var useEventListener = require('../../../../utilities/use-event-listener.js');
+var BulkActions_module = require('../../BulkActions.css.js');
+var utilities = require('../../utilities.js');
+var hooks = require('../../../../utilities/i18n/hooks.js');
+var BulkActionButton = require('../BulkActionButton/BulkActionButton.js');
+
+const ACTION_SPACING = 4;
+function BulkActionsMeasurer({
+  promotedActions = [],
+  disabled,
+  buttonSize,
+  handleMeasurement: handleMeasurementProp
+}) {
+  const i18n = hooks.useI18n();
+  const containerNode = React.useRef(null);
+  const activatorLabel = i18n.translate('Polaris.ResourceList.BulkActions.moreActionsActivatorLabel');
+  const activator = /*#__PURE__*/React.createElement(BulkActionButton.BulkActionButton, {
+    disclosure: true,
+    content: activatorLabel
+  });
+  const handleMeasurement = React.useCallback(() => {
+    if (!containerNode.current) {
+      return;
+    }
+    const containerWidth = containerNode.current.offsetWidth;
+    const hiddenActionNodes = containerNode.current.children;
+    const hiddenActionNodesArray = Array.from(hiddenActionNodes);
+    const hiddenActionsWidths = hiddenActionNodesArray.map(node => {
+      const buttonWidth = Math.ceil(node.getBoundingClientRect().width);
+      return buttonWidth + ACTION_SPACING;
+    });
+    const disclosureWidth = hiddenActionsWidths.pop() || 0;
+    handleMeasurementProp({
+      containerWidth,
+      disclosureWidth,
+      hiddenActionsWidths
+    });
+  }, [handleMeasurementProp]);
+  React.useEffect(() => {
+    handleMeasurement();
+  }, [handleMeasurement, promotedActions]);
+  const promotedActionsMarkup = promotedActions.map((action, index) => {
+    if (utilities.instanceOfMenuGroupDescriptor(action)) {
+      return /*#__PURE__*/React.createElement(BulkActionButton.BulkActionButton, {
+        key: index,
+        disclosure: true,
+        showContentInButton: true,
+        content: action.title,
+        size: buttonSize
+      });
+    }
+    return /*#__PURE__*/React.createElement(BulkActionButton.BulkActionButton, Object.assign({
+      key: index,
+      disabled: disabled
+    }, action, {
+      size: buttonSize
+    }));
+  });
+  useEventListener.useEventListener('resize', handleMeasurement);
+  return /*#__PURE__*/React.createElement("div", {
+    className: BulkActions_module.default.BulkActionsMeasurerLayout,
+    ref: containerNode
+  }, promotedActionsMarkup, activator);
+}
+
+exports.BulkActionsMeasurer = BulkActionsMeasurer;

package/build/cjs/components/BulkActions/utilities.js

@@ -0,0 +1,79 @@
+'use strict';
+
+function getVisibleAndHiddenActionsIndices(promotedActions = [], disclosureWidth, actionsWidths, containerWidth) {
+  const sumTabWidths = actionsWidths.reduce((sum, width) => sum + width, 0);
+  const arrayOfPromotedActionsIndices = promotedActions.map((_, index) => {
+    return index;
+  });
+  const visiblePromotedActions = [];
+  const hiddenPromotedActions = [];
+  if (containerWidth > sumTabWidths) {
+    visiblePromotedActions.push(...arrayOfPromotedActionsIndices);
+  } else {
+    let accumulatedWidth = 0;
+    let hasReturned = false;
+    arrayOfPromotedActionsIndices.forEach(currentPromotedActionsIndex => {
+      const currentActionsWidth = actionsWidths[currentPromotedActionsIndex];
+      const notEnoughSpace = accumulatedWidth + currentActionsWidth >= containerWidth - disclosureWidth;
+      if (notEnoughSpace || hasReturned) {
+        hiddenPromotedActions.push(currentPromotedActionsIndex);
+        hasReturned = true;
+        return;
+      }
+      visiblePromotedActions.push(currentPromotedActionsIndex);
+      accumulatedWidth += currentActionsWidth;
+    });
+  }
+  return {
+    visiblePromotedActions,
+    hiddenPromotedActions
+  };
+}
+function instanceOfBulkActionListSectionArray(actions) {
+  const validList = actions.filter(action => {
+    return action.items;
+  });
+  return actions.length === validList.length;
+}
+function instanceOfBulkActionArray(actions) {
+  const validList = actions.filter(action => {
+    return !action.items;
+  });
+  return actions.length === validList.length;
+}
+function instanceOfMenuGroupDescriptor(action) {
+  return 'title' in action && 'actions' in action;
+}
+function instanceOfBulkActionListSection(action) {
+  return 'items' in action;
+}
+function getActionSections(actions) {
+  if (!actions || actions.length === 0) {
+    return;
+  }
+  if (instanceOfBulkActionListSectionArray(actions)) {
+    return actions;
+  }
+  if (instanceOfBulkActionArray(actions)) {
+    return [{
+      items: actions
+    }];
+  }
+}
+function isNewBadgeInBadgeActions(actionSections) {
+  if (!actionSections) return false;
+  for (const action of actionSections) {
+    for (const item of action.items) {
+      if (item.badge?.tone === 'new') return true;
+    }
+  }
+  return false;
+}
+
+exports.getActionSections = getActionSections;
+exports.getVisibleAndHiddenActionsIndices = getVisibleAndHiddenActionsIndices;
+exports.instanceOfBulkActionArray = instanceOfBulkActionArray;
+exports.instanceOfBulkActionListSection = instanceOfBulkActionListSection;
+exports.instanceOfBulkActionListSectionArray = instanceOfBulkActionListSectionArray;
+exports.instanceOfMenuGroupDescriptor = instanceOfMenuGroupDescriptor;
+exports.isNewBadgeInBadgeActions = isNewBadgeInBadgeActions;

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

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {
+  "Button": "Polaris-Button",
+  "disabled": "Polaris-Button--disabled",
+  "pressed": "Polaris-Button--pressed",
+  "variantPrimary": "Polaris-Button--variantPrimary",
+  "variantSecondary": "Polaris-Button--variantSecondary",
+  "variantTertiary": "Polaris-Button--variantTertiary",
+  "variantPlain": "Polaris-Button--variantPlain",
+  "removeUnderline": "Polaris-Button--removeUnderline",
+  "variantMonochromePlain": "Polaris-Button--variantMonochromePlain",
+  "toneSuccess": "Polaris-Button--toneSuccess",
+  "toneCritical": "Polaris-Button--toneCritical",
+  "sizeMicro": "Polaris-Button--sizeMicro",
+  "sizeSlim": "Polaris-Button--sizeSlim",
+  "sizeMedium": "Polaris-Button--sizeMedium",
+  "sizeLarge": "Polaris-Button--sizeLarge",
+  "textAlignCenter": "Polaris-Button--textAlignCenter",
+  "textAlignStart": "Polaris-Button--textAlignStart",
+  "textAlignLeft": "Polaris-Button--textAlignLeft",
+  "textAlignEnd": "Polaris-Button--textAlignEnd",
+  "textAlignRight": "Polaris-Button--textAlignRight",
+  "fullWidth": "Polaris-Button--fullWidth",
+  "iconOnly": "Polaris-Button--iconOnly",
+  "iconWithText": "Polaris-Button--iconWithText",
+  "disclosure": "Polaris-Button--disclosure",
+  "loading": "Polaris-Button--loading",
+  "pressable": "Polaris-Button--pressable",
+  "hidden": "Polaris-Button--hidden",
+  "Icon": "Polaris-Button__Icon",
+  "Spinner": "Polaris-Button__Spinner"
+};
+
+exports.default = styles;

package/build/cjs/components/Button/Button.js

@@ -0,0 +1,143 @@
+'use strict';
+
+var React = require('react');
+var polarisIcons = require('@shopify/polaris-icons');
+var breakpoints = require('../../utilities/breakpoints.js');
+var css = require('../../utilities/css.js');
+var focus = require('../../utilities/focus.js');
+var Button_module = require('./Button.css.js');
+var Icon = require('../Icon/Icon.js');
+var Spinner = require('../Spinner/Spinner.js');
+var UnstyledButton = require('../UnstyledButton/UnstyledButton.js');
+var hooks = require('../../utilities/i18n/hooks.js');
+var Text = require('../Text/Text.js');
+
+function Button({
+  id,
+  children,
+  url,
+  disabled,
+  external,
+  download,
+  target,
+  submit,
+  loading,
+  pressed,
+  accessibilityLabel,
+  role,
+  ariaControls,
+  ariaExpanded,
+  ariaDescribedBy,
+  ariaChecked,
+  onClick,
+  onFocus,
+  onBlur,
+  onKeyDown,
+  onKeyPress,
+  onKeyUp,
+  onMouseEnter,
+  onTouchStart,
+  onPointerDown,
+  icon,
+  disclosure,
+  removeUnderline,
+  size = 'medium',
+  textAlign = 'center',
+  fullWidth,
+  dataPrimaryLink,
+  tone,
+  variant = 'secondary',
+  className,
+  style
+}) {
+  const i18n = hooks.useI18n();
+  const isDisabled = disabled || loading;
+  const {
+    mdUp
+  } = breakpoints.useBreakpoints();
+  const computedClassName = css.classNames(Button_module.default.Button, Button_module.default.pressable, Button_module.default[css.variationName('variant', variant)], Button_module.default[css.variationName('size', size)], Button_module.default[css.variationName('textAlign', textAlign)], fullWidth && Button_module.default.fullWidth, disclosure && Button_module.default.disclosure, icon && children && Button_module.default.iconWithText, icon && children == null && Button_module.default.iconOnly, isDisabled && Button_module.default.disabled, loading && Button_module.default.loading, pressed && !disabled && !url && Button_module.default.pressed, removeUnderline && Button_module.default.removeUnderline, tone && Button_module.default[css.variationName('tone', tone)], className);
+  const disclosureMarkup = disclosure ? /*#__PURE__*/React.createElement("span", {
+    className: loading ? Button_module.default.hidden : Button_module.default.Icon
+  }, /*#__PURE__*/React.createElement(Icon.Icon, {
+    source: loading ? 'placeholder' : getDisclosureIconSource(disclosure, polarisIcons.ChevronUpIcon, polarisIcons.ChevronDownIcon)
+  })) : null;
+  const iconSource = isIconSource(icon) ? /*#__PURE__*/React.createElement(Icon.Icon, {
+    source: loading ? 'placeholder' : icon
+  }) : icon;
+  const iconMarkup = iconSource ? /*#__PURE__*/React.createElement("span", {
+    className: loading ? Button_module.default.hidden : Button_module.default.Icon
+  }, iconSource) : null;
+  const hasPlainText = ['plain', 'monochromePlain'].includes(variant);
+  let textFontWeight = 'medium';
+  if (hasPlainText) {
+    textFontWeight = 'regular';
+  } else if (variant === 'primary') {
+    textFontWeight = mdUp ? 'medium' : 'semibold';
+  }
+  let textVariant = 'bodySm';
+  if (size === 'large' || hasPlainText && size !== 'micro') {
+    textVariant = 'bodyMd';
+  }
+  const childMarkup = children ? /*#__PURE__*/React.createElement(Text.Text, {
+    as: "span",
+    variant: textVariant,
+    fontWeight: textFontWeight
+    // Fixes Safari bug that doesn't re-render button text to correct color
+    ,
+    key: disabled ? 'text-disabled' : 'text'
+  }, children) : null;
+  const spinnerSVGMarkup = loading ? /*#__PURE__*/React.createElement("span", {
+    className: Button_module.default.Spinner
+  }, /*#__PURE__*/React.createElement(Spinner.Spinner, {
+    size: "small",
+    accessibilityLabel: i18n.translate('Polaris.Button.spinnerAccessibilityLabel')
+  })) : null;
+  const commonProps = {
+    id,
+    className: computedClassName,
+    accessibilityLabel,
+    ariaDescribedBy,
+    role,
+    onClick,
+    onFocus,
+    onBlur,
+    onMouseUp: focus.handleMouseUpByBlurring,
+    onMouseEnter,
+    onTouchStart,
+    'data-primary-link': dataPrimaryLink
+  };
+  const linkProps = {
+    url,
+    external,
+    download,
+    target
+  };
+  const actionProps = {
+    submit,
+    disabled: isDisabled,
+    loading,
+    ariaControls,
+    ariaExpanded,
+    ariaChecked,
+    pressed,
+    onKeyDown,
+    onKeyUp,
+    onKeyPress,
+    onPointerDown
+  };
+  const buttonMarkup = /*#__PURE__*/React.createElement(UnstyledButton.UnstyledButton, Object.assign({}, commonProps, linkProps, actionProps, {
+    style: style
+  }), spinnerSVGMarkup, iconMarkup, childMarkup, disclosureMarkup);
+  return buttonMarkup;
+}
+function isIconSource(x) {
+  return typeof x === 'string' || typeof x === 'object' && x.body || typeof x === 'function';
+}
+function getDisclosureIconSource(disclosure, upIcon, downIcon) {
+  if (disclosure === 'select') {
+    return polarisIcons.SelectIcon;
+  }
+  return disclosure === 'up' ? upIcon : downIcon;
+}
+
+exports.Button = Button;