polaris-react-extended 13.10.3

package/build/cjs/components/SkeletonPage/SkeletonPage.js

@@ -0,0 +1,98 @@
+'use strict';
+
+var React = require('react');
+var SkeletonPage_module = require('./SkeletonPage.css.js');
+var hooks = require('../../utilities/i18n/hooks.js');
+var Text = require('../Text/Text.js');
+var Box = require('../Box/Box.js');
+var BlockStack = require('../BlockStack/BlockStack.js');
+var InlineStack = require('../InlineStack/InlineStack.js');
+
+function SkeletonPage({
+  children,
+  fullWidth,
+  narrowWidth,
+  primaryAction,
+  title = '',
+  backAction
+}) {
+  const i18n = hooks.useI18n();
+  const titleContent = title ? /*#__PURE__*/React.createElement(Text.Text, {
+    as: "h1",
+    variant: "headingLg",
+    fontWeight: "bold"
+  }, title) : /*#__PURE__*/React.createElement("div", {
+    className: SkeletonPage_module.default.SkeletonTitle
+  }, /*#__PURE__*/React.createElement(Box.Box, {
+    background: "bg-fill-tertiary",
+    minWidth: "120px",
+    minHeight: "28px",
+    borderRadius: "100"
+  }));
+  const primaryActionMarkup = primaryAction ? /*#__PURE__*/React.createElement(Box.Box, {
+    id: "SkeletonPage-PrimaryAction",
+    borderRadius: "100",
+    background: "bg-fill-tertiary",
+    minHeight: "2.25rem",
+    minWidth: "6.25rem"
+  }) : null;
+  const backActionMarkup = backAction ? /*#__PURE__*/React.createElement(Box.Box, {
+    borderRadius: "100",
+    background: "bg-fill-tertiary",
+    minHeight: "2.25rem",
+    minWidth: "2.25rem",
+    maxWidth: "2.25rem"
+  }) : null;
+  return /*#__PURE__*/React.createElement(BlockStack.BlockStack, {
+    gap: "400",
+    inlineAlign: "center"
+  }, /*#__PURE__*/React.createElement(Box.Box, Object.assign({
+    width: "100%",
+    padding: "0",
+    paddingInlineStart: {
+      sm: '600'
+    },
+    paddingInlineEnd: {
+      sm: '600'
+    },
+    maxWidth: "var(--pc-skeleton-page-max-width)",
+    "aria-label": i18n.translate('Polaris.SkeletonPage.loadingLabel'),
+    role: "status"
+  }, narrowWidth && {
+    maxWidth: 'var(--pc-skeleton-page-max-width-narrow)'
+  }, fullWidth && {
+    maxWidth: 'none'
+  }), /*#__PURE__*/React.createElement(BlockStack.BlockStack, null, /*#__PURE__*/React.createElement(Box.Box, {
+    paddingBlockStart: {
+      xs: '400',
+      md: '500'
+    },
+    paddingBlockEnd: {
+      xs: '400',
+      md: '500'
+    },
+    paddingInlineStart: {
+      xs: '400',
+      sm: '0'
+    },
+    paddingInlineEnd: {
+      xs: '400',
+      sm: '0'
+    },
+    width: "100%"
+  }, /*#__PURE__*/React.createElement(InlineStack.InlineStack, {
+    gap: "400",
+    align: "space-between",
+    blockAlign: "center"
+  }, /*#__PURE__*/React.createElement(InlineStack.InlineStack, {
+    gap: "400"
+  }, backActionMarkup, /*#__PURE__*/React.createElement(Box.Box, {
+    paddingBlockStart: "100",
+    paddingBlockEnd: "100"
+  }, titleContent)), primaryActionMarkup)), /*#__PURE__*/React.createElement(Box.Box, {
+    paddingBlockEnd: "200",
+    width: "100%"
+  }, children))));
+}
+
+exports.SkeletonPage = SkeletonPage;

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

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {
+  "Tabs": "Polaris-SkeletonTabs__Tabs",
+  "Tab": "Polaris-SkeletonTabs__Tab",
+  "TabText": "Polaris-SkeletonTabs__TabText",
+  "fitted": "Polaris-SkeletonTabs--fitted"
+};
+
+exports.default = styles;

package/build/cjs/components/SkeletonTabs/SkeletonTabs.js

@@ -0,0 +1,23 @@
+'use strict';
+
+var React = require('react');
+var css = require('../../utilities/css.js');
+var SkeletonTabs_module = require('./SkeletonTabs.css.js');
+
+function SkeletonTabs({
+  count = 2,
+  fitted = false
+}) {
+  return /*#__PURE__*/React.createElement("div", {
+    className: css.classNames(SkeletonTabs_module.default.Tabs, fitted && SkeletonTabs_module.default.fitted)
+  }, [...Array(count).keys()].map(key => {
+    return /*#__PURE__*/React.createElement("div", {
+      key: key,
+      className: css.classNames(SkeletonTabs_module.default.Tab)
+    }, /*#__PURE__*/React.createElement("div", {
+      className: SkeletonTabs_module.default.TabText
+    }));
+  }));
+}
+
+exports.SkeletonTabs = SkeletonTabs;

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

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

package/build/cjs/components/SkeletonThumbnail/SkeletonThumbnail.js

@@ -0,0 +1,16 @@
+'use strict';
+
+var React = require('react');
+var css = require('../../utilities/css.js');
+var SkeletonThumbnail_module = require('./SkeletonThumbnail.css.js');
+
+function SkeletonThumbnail({
+  size = 'medium'
+}) {
+  const className = css.classNames(SkeletonThumbnail_module.default.SkeletonThumbnail, size && SkeletonThumbnail_module.default[css.variationName('size', size)]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: className
+  });
+}
+
+exports.SkeletonThumbnail = SkeletonThumbnail;

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

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

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

@@ -0,0 +1,41 @@
+'use strict';
+
+var React = require('react');
+var css = require('../../utilities/css.js');
+var useIsAfterInitialMount = require('../../utilities/use-is-after-initial-mount.js');
+var Spinner_module = require('./Spinner.css.js');
+var Text = require('../Text/Text.js');
+
+function Spinner({
+  size = 'large',
+  accessibilityLabel,
+  hasFocusableParent
+}) {
+  const isAfterInitialMount = useIsAfterInitialMount.useIsAfterInitialMount();
+  const className = css.classNames(Spinner_module.default.Spinner, size && Spinner_module.default[css.variationName('size', size)]);
+  const spinnerSVGMarkup = size === 'large' ? /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 44 44",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M15.542 1.487A21.507 21.507 0 00.5 22c0 11.874 9.626 21.5 21.5 21.5 9.847 0 18.364-6.675 20.809-16.072a1.5 1.5 0 00-2.904-.756C37.803 34.755 30.473 40.5 22 40.5 11.783 40.5 3.5 32.217 3.5 22c0-8.137 5.3-15.247 12.942-17.65a1.5 1.5 0 10-.9-2.863z"
+  })) : /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 20 20",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M7.229 1.173a9.25 9.25 0 1011.655 11.412 1.25 1.25 0 10-2.4-.698 6.75 6.75 0 11-8.506-8.329 1.25 1.25 0 10-.75-2.385z"
+  }));
+  const spanAttributes = {
+    ...(!hasFocusableParent && {
+      role: 'status'
+    })
+  };
+  const accessibilityLabelMarkup = (isAfterInitialMount || !hasFocusableParent) && /*#__PURE__*/React.createElement(Text.Text, {
+    as: "span",
+    visuallyHidden: true
+  }, accessibilityLabel);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+    className: className
+  }, spinnerSVGMarkup), /*#__PURE__*/React.createElement("span", spanAttributes, accessibilityLabelMarkup));
+}
+
+exports.Spinner = Spinner;

package/build/cjs/components/Sticky/Sticky.js

@@ -0,0 +1,132 @@
+'use strict';
+
+var React = require('react');
+var geometry = require('../../utilities/geometry.js');
+var hooks = require('../../utilities/sticky-manager/hooks.js');
+
+class StickyInner extends React.Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      isSticky: false,
+      style: {}
+    };
+    this.placeHolderNode = null;
+    this.stickyNode = null;
+    this.setPlaceHolderNode = node => {
+      this.placeHolderNode = node;
+    };
+    this.setStickyNode = node => {
+      this.stickyNode = node;
+    };
+    this.handlePositioning = (stick, top = 0, left = 0, width = 0) => {
+      const {
+        isSticky
+      } = this.state;
+      if (stick && !isSticky || !stick && isSticky) {
+        this.adjustPlaceHolderNode(stick);
+        this.setState({
+          isSticky: !isSticky
+        }, () => {
+          if (this.props.onStickyChange == null) {
+            return null;
+          }
+          this.props.onStickyChange(!isSticky);
+          if (this.props.boundingElement == null) {
+            return null;
+          }
+          this.props.boundingElement.toggleAttribute('data-sticky-active');
+        });
+      }
+      const style = stick ? {
+        position: 'fixed',
+        top,
+        left,
+        width
+      } : {};
+      this.setState({
+        style
+      });
+    };
+    this.adjustPlaceHolderNode = add => {
+      if (this.placeHolderNode && this.stickyNode) {
+        this.placeHolderNode.style.paddingBottom = add ? `${geometry.getRectForNode(this.stickyNode).height}px` : '0px';
+      }
+    };
+  }
+  componentDidMount() {
+    const {
+      boundingElement,
+      offset = false,
+      disableWhenStacked = false,
+      stickyManager
+    } = this.props;
+    if (!this.stickyNode || !this.placeHolderNode) return;
+    stickyManager.registerStickyItem({
+      stickyNode: this.stickyNode,
+      placeHolderNode: this.placeHolderNode,
+      handlePositioning: this.handlePositioning,
+      offset,
+      boundingElement,
+      disableWhenStacked
+    });
+  }
+  componentDidUpdate() {
+    const {
+      boundingElement,
+      offset = false,
+      disableWhenStacked = false,
+      stickyManager
+    } = this.props;
+    if (!this.stickyNode || !this.placeHolderNode) return;
+    const stickyManagerItem = stickyManager.getStickyItem(this.stickyNode);
+    const didPropsChange = !stickyManagerItem || boundingElement !== stickyManagerItem.boundingElement || offset !== stickyManagerItem.offset || disableWhenStacked !== stickyManagerItem.disableWhenStacked;
+    if (!didPropsChange) return;
+    stickyManager.unregisterStickyItem(this.stickyNode);
+    stickyManager.registerStickyItem({
+      stickyNode: this.stickyNode,
+      placeHolderNode: this.placeHolderNode,
+      handlePositioning: this.handlePositioning,
+      offset,
+      boundingElement,
+      disableWhenStacked
+    });
+  }
+  componentWillUnmount() {
+    const {
+      stickyManager
+    } = this.props;
+    if (!this.stickyNode) return;
+    stickyManager.unregisterStickyItem(this.stickyNode);
+  }
+  render() {
+    const {
+      style,
+      isSticky
+    } = this.state;
+    const {
+      children
+    } = this.props;
+    const childrenContent = isFunction(children) ? children(isSticky) : children;
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      ref: this.setPlaceHolderNode
+    }), /*#__PURE__*/React.createElement("div", {
+      ref: this.setStickyNode,
+      style: style
+    }, childrenContent));
+  }
+}
+
+// This should have a typeguard instead of using Function
+// eslint-disable-next-line @typescript-eslint/ban-types
+function isFunction(arg) {
+  return typeof arg === 'function';
+}
+function Sticky(props) {
+  const stickyManager = hooks.useStickyManager();
+  return /*#__PURE__*/React.createElement(StickyInner, Object.assign({}, props, {
+    stickyManager: stickyManager
+  }));
+}
+
+exports.Sticky = Sticky;

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

@@ -0,0 +1,31 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {
+  "Outer": "Polaris-Tabs__Outer",
+  "Wrapper": "Polaris-Tabs__Wrapper",
+  "WrapperWithNewButton": "Polaris-Tabs__WrapperWithNewButton",
+  "ButtonWrapper": "Polaris-Tabs__ButtonWrapper",
+  "Tabs": "Polaris-Tabs",
+  "Tab": "Polaris-Tabs__Tab",
+  "Tab-active": "Polaris-Tabs__Tab--active",
+  "Tab-hasActions": "Polaris-Tabs__Tab--hasActions",
+  "Tab-iconOnly": "Polaris-Tabs__Tab--iconOnly",
+  "fillSpace": "Polaris-Tabs--fillSpace",
+  "TabContainer": "Polaris-Tabs__TabContainer",
+  "fitted": "Polaris-Tabs--fitted",
+  "titleWithIcon": "Polaris-Tabs--titleWithIcon",
+  "List": "Polaris-Tabs__List",
+  "Item": "Polaris-Tabs__Item",
+  "DisclosureTab": "Polaris-Tabs__DisclosureTab",
+  "DisclosureTab-visible": "Polaris-Tabs__DisclosureTab--visible",
+  "DisclosureActivator": "Polaris-Tabs__DisclosureActivator",
+  "TabsMeasurer": "Polaris-Tabs__TabsMeasurer",
+  "NewTab": "Polaris-Tabs__NewTab",
+  "ActionListWrap": "Polaris-Tabs__ActionListWrap",
+  "Panel": "Polaris-Tabs__Panel",
+  "Panel-hidden": "Polaris-Tabs__Panel--hidden"
+};
+
+exports.default = styles;