polaris-react-extended 13.10.3

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

@@ -0,0 +1,291 @@
+import React from 'react';
+import { classNames } from '../../../../utilities/css.js';
+import { ConditionalRender, ConditionalWrapper } from '../../../../utilities/components.js';
+import { isInterface } from '../../../../utilities/is-interface.js';
+import { isReactElement } from '../../../../utilities/is-react-element.js';
+import styles from './Header.css.js';
+import { Breadcrumbs } from '../../../Breadcrumbs/Breadcrumbs.js';
+import { Title } from './components/Title/Title.js';
+import { hasGroupsWithActions, ActionMenu } from '../../../ActionMenu/ActionMenu.js';
+import { FilterActionsProvider } from '../../../FilterActionsProvider/FilterActionsProvider.js';
+import { useI18n } from '../../../../utilities/i18n/hooks.js';
+import { useMediaQuery } from '../../../../utilities/media-query/hooks.js';
+import { Box } from '../../../Box/Box.js';
+import { Pagination } from '../../../Pagination/Pagination.js';
+import { Text } from '../../../Text/Text.js';
+import { InlineStack } from '../../../InlineStack/InlineStack.js';
+import { buttonFrom } from '../../../Button/utils.js';
+import { Tooltip } from '../../../Tooltip/Tooltip.js';
+
+const SHORT_TITLE = 20;
+const REALLY_SHORT_TITLE = 8;
+const LONG_TITLE = 34;
+function Header({
+  title,
+  subtitle,
+  pageReadyAccessibilityLabel,
+  titleMetadata,
+  additionalMetadata,
+  titleHidden = false,
+  primaryAction,
+  pagination,
+  filterActions,
+  backAction,
+  secondaryActions = [],
+  actionGroups = [],
+  compactTitle = false,
+  onActionRollup
+}) {
+  const i18n = useI18n();
+  const {
+    isNavigationCollapsed
+  } = useMediaQuery();
+  const isSingleRow = !primaryAction && !pagination && (isInterface(secondaryActions) && !secondaryActions.length || isReactElement(secondaryActions)) && !actionGroups.length;
+  const hasActionGroupsOrSecondaryActions = actionGroups.length > 0 || isInterface(secondaryActions) && secondaryActions.length > 0 || isReactElement(secondaryActions);
+  const breadcrumbMarkup = backAction ? /*#__PURE__*/React.createElement("div", {
+    className: styles.BreadcrumbWrapper
+  }, /*#__PURE__*/React.createElement(Box, {
+    maxWidth: "100%",
+    paddingInlineEnd: "100",
+    printHidden: true
+  }, /*#__PURE__*/React.createElement(Breadcrumbs, {
+    backAction: backAction
+  }))) : null;
+  const paginationMarkup = pagination && !isNavigationCollapsed ? /*#__PURE__*/React.createElement("div", {
+    className: styles.PaginationWrapper
+  }, /*#__PURE__*/React.createElement(Box, {
+    printHidden: true
+  }, /*#__PURE__*/React.createElement(Pagination, Object.assign({}, pagination, {
+    hasPrevious: pagination.hasPrevious,
+    hasNext: pagination.hasNext
+  })))) : null;
+  const pageTitleMarkup = /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.TitleWrapper, !hasActionGroupsOrSecondaryActions && styles.TitleWrapperExpand)
+  }, /*#__PURE__*/React.createElement(Title, {
+    title: title,
+    subtitle: subtitle,
+    titleMetadata: titleMetadata,
+    compactTitle: compactTitle,
+    hasSubtitleMaxWidth: hasActionGroupsOrSecondaryActions
+  }));
+  const labelForPageReadyAccessibilityLabel = pageReadyAccessibilityLabel || title;
+  const pageReadyAccessibilityLabelMarkup = labelForPageReadyAccessibilityLabel ? /*#__PURE__*/React.createElement("div", {
+    role: "status"
+  }, /*#__PURE__*/React.createElement(Text, {
+    visuallyHidden: true,
+    as: "p"
+  }, i18n.translate('Polaris.Page.Header.pageReadyAccessibilityLabel', {
+    title: labelForPageReadyAccessibilityLabel
+  }))) : undefined;
+  const primaryActionMarkup = primaryAction ? /*#__PURE__*/React.createElement(PrimaryActionMarkup, {
+    primaryAction: primaryAction
+  }) : null;
+  let actionMenuMarkup = null;
+  if (isInterface(secondaryActions) && (secondaryActions.length > 0 || hasGroupsWithActions(actionGroups))) {
+    actionMenuMarkup = /*#__PURE__*/React.createElement(ActionMenu, {
+      actions: secondaryActions,
+      groups: actionGroups,
+      rollup: isNavigationCollapsed,
+      rollupActionsLabel: title ? i18n.translate('Polaris.Page.Header.rollupActionsLabel', {
+        title
+      }) : undefined,
+      onActionRollup: onActionRollup
+    });
+  } else if (isReactElement(secondaryActions)) {
+    actionMenuMarkup = /*#__PURE__*/React.createElement(React.Fragment, null, secondaryActions);
+  }
+  const navigationMarkup = breadcrumbMarkup || paginationMarkup ? /*#__PURE__*/React.createElement(Box, {
+    printHidden: true,
+    paddingBlockEnd: "100",
+    paddingInlineEnd: actionMenuMarkup && isNavigationCollapsed ? '1000' : undefined
+  }, /*#__PURE__*/React.createElement(InlineStack, {
+    gap: "400",
+    align: "space-between",
+    blockAlign: "center"
+  }, breadcrumbMarkup, paginationMarkup)) : null;
+  const additionalMetadataMarkup = additionalMetadata ? /*#__PURE__*/React.createElement("div", {
+    className: styles.AdditionalMetaData
+  }, /*#__PURE__*/React.createElement(Text, {
+    tone: "subdued",
+    as: "span",
+    variant: "bodySm"
+  }, additionalMetadata)) : null;
+  const headerClassNames = classNames(isSingleRow && styles.isSingleRow, navigationMarkup && styles.hasNavigation, actionMenuMarkup && styles.hasActionMenu, isNavigationCollapsed && styles.mobileView, !backAction && styles.noBreadcrumbs, title && title.length < LONG_TITLE && styles.mediumTitle, title && title.length > LONG_TITLE && styles.longTitle);
+  const {
+    slot1,
+    slot2,
+    slot3,
+    slot4,
+    slot5
+  } = determineLayout({
+    actionMenuMarkup,
+    additionalMetadataMarkup,
+    breadcrumbMarkup,
+    isNavigationCollapsed,
+    pageTitleMarkup,
+    paginationMarkup,
+    primaryActionMarkup,
+    title
+  });
+  return /*#__PURE__*/React.createElement(Box, {
+    position: "relative",
+    paddingBlockStart: {
+      xs: '400',
+      md: '600'
+    },
+    paddingBlockEnd: {
+      xs: '400',
+      md: '600'
+    },
+    paddingInlineStart: {
+      xs: '400',
+      sm: '0'
+    },
+    paddingInlineEnd: {
+      xs: '400',
+      sm: '0'
+    },
+    visuallyHidden: titleHidden
+  }, pageReadyAccessibilityLabelMarkup, /*#__PURE__*/React.createElement("div", {
+    className: headerClassNames
+  }, /*#__PURE__*/React.createElement(FilterActionsProvider, {
+    filterActions: Boolean(filterActions)
+  }, /*#__PURE__*/React.createElement(ConditionalRender, {
+    condition: [slot1, slot2, slot3, slot4].some(notNull)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.Row
+  }, slot1, slot2, /*#__PURE__*/React.createElement(ConditionalRender, {
+    condition: [slot3, slot4].some(notNull)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.RightAlign
+  }, /*#__PURE__*/React.createElement(ConditionalWrapper, {
+    condition: [slot3, slot4].every(notNull),
+    wrapper: children => /*#__PURE__*/React.createElement("div", {
+      className: styles.Actions
+    }, children)
+  }, slot3, slot4))))), /*#__PURE__*/React.createElement(ConditionalRender, {
+    condition: [slot5].some(notNull)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.Row
+  }, /*#__PURE__*/React.createElement(InlineStack, {
+    gap: "400"
+  }, slot5))))));
+}
+function PrimaryActionMarkup({
+  primaryAction
+}) {
+  const {
+    isNavigationCollapsed
+  } = useMediaQuery();
+  let actionMarkup;
+  if (isInterface(primaryAction)) {
+    const {
+      primary: isPrimary,
+      helpText
+    } = primaryAction;
+    const primary = isPrimary === undefined ? true : isPrimary;
+    const content = buttonFrom(shouldShowIconOnly(isNavigationCollapsed, primaryAction), {
+      variant: primary ? 'primary' : undefined
+    });
+    actionMarkup = helpText ? /*#__PURE__*/React.createElement(Tooltip, {
+      content: helpText
+    }, content) : content;
+  } else {
+    actionMarkup = primaryAction;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.PrimaryActionWrapper
+  }, /*#__PURE__*/React.createElement(Box, {
+    printHidden: true
+  }, actionMarkup));
+}
+function shouldShowIconOnly(isMobile, action) {
+  let {
+    content,
+    accessibilityLabel
+  } = action;
+  const {
+    icon
+  } = action;
+  if (icon == null) return {
+    ...action,
+    icon: undefined
+  };
+  if (isMobile) {
+    accessibilityLabel = accessibilityLabel || content;
+    content = undefined;
+  }
+  return {
+    ...action,
+    content,
+    accessibilityLabel,
+    icon
+  };
+}
+function notNull(value) {
+  return value != null;
+}
+function determineLayout({
+  actionMenuMarkup,
+  additionalMetadataMarkup,
+  breadcrumbMarkup,
+  isNavigationCollapsed,
+  pageTitleMarkup,
+  paginationMarkup,
+  primaryActionMarkup,
+  title
+}) {
+  //    Header Layout
+  // |----------------------------------------------------|
+  // | slot1 | slot2 |                    | slot3 | slot4 |
+  // |----------------------------------------------------|
+  // | slot5 |                                            |
+  // |----------------------------------------------------|
+  //
+  const layouts = {
+    mobileCompact: {
+      slots: {
+        slot1: null,
+        slot2: pageTitleMarkup,
+        slot3: actionMenuMarkup,
+        slot4: primaryActionMarkup,
+        slot5: additionalMetadataMarkup
+      },
+      condition: isNavigationCollapsed && breadcrumbMarkup == null && title != null && title.length <= REALLY_SHORT_TITLE
+    },
+    mobileDefault: {
+      slots: {
+        slot1: breadcrumbMarkup,
+        slot2: pageTitleMarkup,
+        slot3: actionMenuMarkup,
+        slot4: primaryActionMarkup,
+        slot5: additionalMetadataMarkup
+      },
+      condition: isNavigationCollapsed
+    },
+    desktopCompact: {
+      slots: {
+        slot1: breadcrumbMarkup,
+        slot2: pageTitleMarkup,
+        slot3: actionMenuMarkup,
+        slot4: primaryActionMarkup,
+        slot5: additionalMetadataMarkup
+      },
+      condition: !isNavigationCollapsed && paginationMarkup == null && actionMenuMarkup == null && title != null && title.length <= SHORT_TITLE
+    },
+    desktopDefault: {
+      slots: {
+        slot1: breadcrumbMarkup,
+        slot2: pageTitleMarkup,
+        slot3: /*#__PURE__*/React.createElement(React.Fragment, null, actionMenuMarkup, primaryActionMarkup),
+        slot4: paginationMarkup,
+        slot5: additionalMetadataMarkup
+      },
+      condition: !isNavigationCollapsed
+    }
+  };
+  const layout = Object.values(layouts).find(layout => layout.condition) || layouts.desktopDefault;
+  return layout.slots;
+}
+
+export { Header };

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

@@ -0,0 +1,10 @@
+var styles = {
+  "Title": "Polaris-Title",
+  "TitleWithSubtitle": "Polaris-Title__TitleWithSubtitle",
+  "TitleWrapper": "Polaris-Title__TitleWrapper",
+  "SubTitle": "Polaris-Title__SubTitle",
+  "SubtitleCompact": "Polaris-Title__SubtitleCompact",
+  "SubtitleMaxWidth": "Polaris-Title__SubtitleMaxWidth"
+};
+
+export { styles as default };

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import { classNames } from '../../../../../../utilities/css.js';
+import styles from './Title.css.js';
+import { Text } from '../../../../../Text/Text.js';
+import { Bleed } from '../../../../../Bleed/Bleed.js';
+
+function Title({
+  title,
+  subtitle,
+  titleMetadata,
+  compactTitle,
+  hasSubtitleMaxWidth
+}) {
+  const className = classNames(styles.Title, subtitle && styles.TitleWithSubtitle);
+  const titleMarkup = title ? /*#__PURE__*/React.createElement("h1", {
+    className: className
+  }, /*#__PURE__*/React.createElement(Text, {
+    as: "span",
+    variant: "headingLg",
+    fontWeight: "bold"
+  }, title)) : null;
+  const titleMetadataMarkup = titleMetadata ? /*#__PURE__*/React.createElement(Bleed, {
+    marginBlock: "100"
+  }, titleMetadata) : null;
+  const wrappedTitleMarkup = /*#__PURE__*/React.createElement("div", {
+    className: styles.TitleWrapper
+  }, titleMarkup, titleMetadataMarkup);
+  const subtitleMarkup = subtitle ? /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.SubTitle, compactTitle && styles.SubtitleCompact, hasSubtitleMaxWidth && styles.SubtitleMaxWidth)
+  }, /*#__PURE__*/React.createElement(Text, {
+    as: "p",
+    variant: "bodySm",
+    tone: "subdued"
+  }, subtitle)) : null;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, wrappedTitleMarkup, subtitleMarkup);
+}
+
+export { Title };

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

@@ -0,0 +1,5 @@
+var styles = {
+  "PageActions": "Polaris-PageActions"
+};
+
+export { styles as default };

package/build/esm/components/PageActions/PageActions.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { isInterface } from '../../utilities/is-interface.js';
+import { isReactElement } from '../../utilities/is-react-element.js';
+import styles from './PageActions.css.js';
+import { buttonsFrom } from '../Button/utils.js';
+import { ButtonGroup } from '../ButtonGroup/ButtonGroup.js';
+import { LegacyStack } from '../LegacyStack/LegacyStack.js';
+
+function PageActions({
+  primaryAction,
+  secondaryActions
+}) {
+  let primaryActionMarkup = null;
+  if (isReactElement(primaryAction)) {
+    primaryActionMarkup = /*#__PURE__*/React.createElement(React.Fragment, null, primaryAction);
+  } else if (primaryAction) {
+    primaryActionMarkup = buttonsFrom(primaryAction, {
+      variant: 'primary'
+    });
+  }
+  let secondaryActionsMarkup = null;
+  if (isInterface(secondaryActions) && secondaryActions.length > 0) {
+    secondaryActionsMarkup = /*#__PURE__*/React.createElement(ButtonGroup, null, buttonsFrom(secondaryActions));
+  } else if (isReactElement(secondaryActions)) {
+    secondaryActionsMarkup = /*#__PURE__*/React.createElement(React.Fragment, null, secondaryActions);
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.PageActions
+  }, /*#__PURE__*/React.createElement(LegacyStack, {
+    distribution: "trailing",
+    spacing: "tight"
+  }, secondaryActionsMarkup, primaryActionMarkup));
+}
+
+export { PageActions };

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

@@ -0,0 +1,7 @@
+var styles = {
+  "Pagination": "Polaris-Pagination",
+  "table": "Polaris-Pagination--table",
+  "TablePaginationActions": "Polaris-Pagination__TablePaginationActions"
+};
+
+export { styles as default };

package/build/esm/components/Pagination/Pagination.js

@@ -0,0 +1,142 @@
+import { ChevronLeftIcon, ChevronRightIcon } from '@shopify/polaris-icons';
+import React, { createRef } from 'react';
+import { isInputFocused } from '../../utilities/is-input-focused.js';
+import { classNames } from '../../utilities/css.js';
+import styles from './Pagination.css.js';
+import { useI18n } from '../../utilities/i18n/hooks.js';
+import { KeypressListener } from '../KeypressListener/KeypressListener.js';
+import { Box } from '../Box/Box.js';
+import { InlineStack } from '../InlineStack/InlineStack.js';
+import { ButtonGroup } from '../ButtonGroup/ButtonGroup.js';
+import { Tooltip } from '../Tooltip/Tooltip.js';
+import { Text } from '../Text/Text.js';
+import { Button } from '../Button/Button.js';
+
+function Pagination({
+  hasNext,
+  hasPrevious,
+  nextURL,
+  previousURL,
+  onNext,
+  onPrevious,
+  nextTooltip,
+  previousTooltip,
+  nextKeys,
+  previousKeys,
+  accessibilityLabel,
+  accessibilityLabels,
+  label,
+  type = 'page'
+}) {
+  const i18n = useI18n();
+  const node = /*#__PURE__*/createRef();
+  const navLabel = accessibilityLabel || i18n.translate('Polaris.Pagination.pagination');
+  const previousLabel = accessibilityLabels?.previous || i18n.translate('Polaris.Pagination.previous');
+  const nextLabel = accessibilityLabels?.next || i18n.translate('Polaris.Pagination.next');
+  const prev = /*#__PURE__*/React.createElement(Button, {
+    icon: ChevronLeftIcon,
+    accessibilityLabel: previousLabel,
+    url: previousURL,
+    onClick: onPrevious,
+    disabled: !hasPrevious,
+    id: "previousURL"
+  });
+  const constructedPrevious = previousTooltip && hasPrevious ? /*#__PURE__*/React.createElement(Tooltip, {
+    activatorWrapper: "span",
+    content: previousTooltip,
+    preferredPosition: "below"
+  }, prev) : prev;
+  const next = /*#__PURE__*/React.createElement(Button, {
+    icon: ChevronRightIcon,
+    accessibilityLabel: nextLabel,
+    url: nextURL,
+    onClick: onNext,
+    disabled: !hasNext,
+    id: "nextURL"
+  });
+  const constructedNext = nextTooltip && hasNext ? /*#__PURE__*/React.createElement(Tooltip, {
+    activatorWrapper: "span",
+    content: nextTooltip,
+    preferredPosition: "below"
+  }, next) : next;
+  const previousHandler = onPrevious || noop;
+  const previousButtonEvents = previousKeys && (previousURL || onPrevious) && hasPrevious && previousKeys.map(key => /*#__PURE__*/React.createElement(KeypressListener, {
+    key: key,
+    keyCode: key,
+    handler: previousURL ? handleCallback(clickPaginationLink('previousURL', node)) : handleCallback(previousHandler)
+  }));
+  const nextHandler = onNext || noop;
+  const nextButtonEvents = nextKeys && (nextURL || onNext) && hasNext && nextKeys.map(key => /*#__PURE__*/React.createElement(KeypressListener, {
+    key: key,
+    keyCode: key,
+    handler: nextURL ? handleCallback(clickPaginationLink('nextURL', node)) : handleCallback(nextHandler)
+  }));
+  if (type === 'table') {
+    const labelMarkup = label ? /*#__PURE__*/React.createElement(Box, {
+      padding: "300",
+      paddingBlockStart: "0",
+      paddingBlockEnd: "0"
+    }, /*#__PURE__*/React.createElement(Text, {
+      as: "span",
+      variant: "bodySm",
+      fontWeight: "medium"
+    }, label)) : null;
+    return /*#__PURE__*/React.createElement("nav", {
+      "aria-label": navLabel,
+      ref: node,
+      className: classNames(styles.Pagination, styles.table)
+    }, previousButtonEvents, nextButtonEvents, /*#__PURE__*/React.createElement(Box, {
+      background: "bg-surface-secondary",
+      paddingBlockStart: "150",
+      paddingBlockEnd: "150",
+      paddingInlineStart: "300",
+      paddingInlineEnd: "200"
+    }, /*#__PURE__*/React.createElement(InlineStack, {
+      align: "center",
+      blockAlign: "center"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.TablePaginationActions,
+      "data-buttongroup-variant": "segmented"
+    }, /*#__PURE__*/React.createElement("div", null, constructedPrevious), labelMarkup, /*#__PURE__*/React.createElement("div", null, constructedNext)))));
+  }
+  const labelTextMarkup = hasNext && hasPrevious ? /*#__PURE__*/React.createElement("span", null, label) : /*#__PURE__*/React.createElement(Text, {
+    tone: "subdued",
+    as: "span"
+  }, label);
+  const labelMarkup = label ? /*#__PURE__*/React.createElement(Box, {
+    padding: "300",
+    paddingBlockStart: "0",
+    paddingBlockEnd: "0"
+  }, /*#__PURE__*/React.createElement("div", {
+    "aria-live": "polite"
+  }, labelTextMarkup)) : null;
+  return /*#__PURE__*/React.createElement("nav", {
+    "aria-label": navLabel,
+    ref: node,
+    className: styles.Pagination
+  }, previousButtonEvents, nextButtonEvents, /*#__PURE__*/React.createElement(ButtonGroup, {
+    variant: "segmented"
+  }, constructedPrevious, labelMarkup, constructedNext));
+}
+function clickPaginationLink(id, node) {
+  return () => {
+    if (node.current == null) {
+      return;
+    }
+    const link = node.current.querySelector(`#${id}`);
+    if (link) {
+      link.click();
+    }
+  };
+}
+function handleCallback(fn) {
+  return () => {
+    if (isInputFocused()) {
+      return;
+    }
+    fn();
+  };
+}
+function noop() {}
+
+export { Pagination };