polaris-react-extended 13.10.3

package/build/cjs/components/ColorPicker/components/HuePicker/utilities.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var clamp = require('../../../../utilities/clamp.js');
+
+const VERTICAL_PADDING = 13;
+function calculateDraggerY(hue, sliderHeight, draggerHeight) {
+  const offset = offsetForHue(hue, sliderHeight, draggerHeight);
+  return clamp.clamp(offset, 0, sliderHeight);
+}
+function hueForDraggerY(y, sliderHeight) {
+  const offsetY = clamp.clamp(y, 0, sliderHeight);
+  return hueForOffset(offsetY, sliderHeight);
+}
+function hueForOffset(offset, sliderHeight) {
+  const selectionHeight = offset - VERTICAL_PADDING;
+  const slidableArea = sliderHeight - VERTICAL_PADDING * 2;
+  return clamp.clamp(selectionHeight / slidableArea * 360, 0, 360);
+}
+function offsetForHue(hue, sliderHeight, draggerHeight) {
+  const slidableArea = sliderHeight - (draggerHeight + VERTICAL_PADDING);
+  return clamp.clamp(hue / 360 * slidableArea + VERTICAL_PADDING, 0, sliderHeight - draggerHeight);
+}
+
+exports.calculateDraggerY = calculateDraggerY;
+exports.hueForDraggerY = hueForDraggerY;

package/build/cjs/components/ColorPicker/components/Slidable/Slidable.js

@@ -0,0 +1,189 @@
+'use strict';
+
+var React = require('react');
+var target = require('../../../../utilities/target.js');
+var ColorPicker_module = require('../../ColorPicker.css.js');
+var EventListener = require('../../../EventListener/EventListener.js');
+
+let isDragging = false;
+
+// Required to solve a bug causing the underlying page/container to scroll
+// while trying to drag the ColorPicker controls.
+// This must be called as soon as possible to properly prevent the event.
+// `passive: false` must also be set, as it seems webkit has changed the "default" behaviour
+// https://bugs.webkit.org/show_bug.cgi?id=182521
+if (!target.isServer) {
+  window.addEventListener('touchmove', event => {
+    if (!isDragging) {
+      return;
+    }
+    event.preventDefault();
+  }, {
+    passive: false
+  });
+}
+class Slidable extends React.PureComponent {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      dragging: false
+    };
+    this.node = null;
+    this.draggerNode = null;
+    this.setDraggerNode = node => {
+      this.draggerNode = node;
+    };
+    this.setNode = node => {
+      this.node = node;
+    };
+    this.startDrag = event => {
+      if (isMouseDownEvent(event)) {
+        this.handleDraggerMove(event.clientX, event.clientY);
+      }
+      isDragging = true;
+      this.setState({
+        dragging: true
+      });
+    };
+    this.handleDragEnd = () => {
+      isDragging = false;
+      this.setState({
+        dragging: false
+      });
+    };
+    this.handleMove = event => {
+      event.stopImmediatePropagation();
+      event.stopPropagation();
+      if (event.cancelable) {
+        event.preventDefault();
+      }
+      if (isMouseMoveEvent(event)) {
+        this.handleDraggerMove(event.clientX, event.clientY);
+        return;
+      }
+      this.handleDraggerMove(event.touches[0].clientX, event.touches[0].clientY);
+    };
+    this.handleDraggerMove = (x, y) => {
+      if (this.node == null) {
+        return;
+      }
+      const {
+        onChange
+      } = this.props;
+      const rect = this.node.getBoundingClientRect();
+      const offsetX = x - rect.left;
+      const offsetY = y - rect.top;
+      onChange({
+        x: offsetX,
+        y: offsetY
+      });
+    };
+  }
+  componentWillUnmount() {
+    this.observer?.disconnect();
+  }
+  componentDidMount() {
+    if (!this.node) {
+      return;
+    }
+    this.observer = new ResizeObserver(() => {
+      /**
+       * This is a workaround to enable event listeners to be
+       * re-attached when moving from one document to another
+       * when using a React portal across iframes.
+       * Using a resize observer works because when the clientWidth
+       * will go from 0 to the real width after the node
+       * gets rendered in its new place.
+       */
+      const {
+        window
+      } = this.state;
+      if (window !== this.node?.ownerDocument.defaultView) {
+        this.setState({
+          window: this.node?.ownerDocument.defaultView
+        });
+      }
+      this.handleResize();
+    });
+    this.observer.observe(this.node);
+    this.handleResize();
+  }
+  render() {
+    const {
+      dragging,
+      window
+    } = this.state;
+    const {
+      draggerX = 0,
+      draggerY = 0
+    } = this.props;
+    const draggerPositioning = {
+      transform: `translate3d(${draggerX}px, ${draggerY}px, 0)`
+    };
+    const moveListener = dragging ? /*#__PURE__*/React.createElement(EventListener.EventListener, {
+      event: "mousemove",
+      handler: this.handleMove,
+      passive: false,
+      window: window
+    }) : null;
+    const touchMoveListener = dragging ? /*#__PURE__*/React.createElement(EventListener.EventListener, {
+      event: "touchmove",
+      handler: this.handleMove,
+      passive: false,
+      window: window
+    }) : null;
+    const endDragListener = dragging ? /*#__PURE__*/React.createElement(EventListener.EventListener, {
+      event: "mouseup",
+      handler: this.handleDragEnd,
+      window: window
+    }) : null;
+    const touchEndListener = dragging ? /*#__PURE__*/React.createElement(EventListener.EventListener, {
+      event: "touchend",
+      handler: this.handleDragEnd,
+      window: window
+    }) : null;
+    const touchCancelListener = dragging ? /*#__PURE__*/React.createElement(EventListener.EventListener, {
+      event: "touchcancel",
+      handler: this.handleDragEnd,
+      window: window
+    }) : null;
+    return /*#__PURE__*/React.createElement("div", {
+      ref: this.setNode,
+      className: ColorPicker_module.default.Slidable,
+      onMouseDown: this.startDrag,
+      onTouchStart: this.startDrag
+    }, endDragListener, moveListener, touchMoveListener, touchEndListener, touchCancelListener, /*#__PURE__*/React.createElement("div", {
+      style: draggerPositioning,
+      className: ColorPicker_module.default.Dragger,
+      ref: this.setDraggerNode
+    }));
+  }
+  handleResize() {
+    const {
+      onDraggerHeight
+    } = this.props;
+    if (!onDraggerHeight) {
+      return;
+    }
+    const {
+      draggerNode
+    } = this;
+    if (!draggerNode) {
+      return;
+    }
+    onDraggerHeight(draggerNode.clientWidth);
+    if (process.env.NODE_ENV === 'development') {
+      setTimeout(() => {
+        onDraggerHeight(draggerNode.clientWidth);
+      }, 0);
+    }
+  }
+}
+function isMouseMoveEvent(event) {
+  return event.type === 'mousemove';
+}
+function isMouseDownEvent(event) {
+  return event.type === 'mousedown';
+}
+
+exports.Slidable = Slidable;

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

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

package/build/cjs/components/Combobox/Combobox.js

@@ -0,0 +1,111 @@
+'use strict';
+
+var React = require('react');
+var Combobox_module = require('./Combobox.css.js');
+var context = require('../../utilities/combobox/context.js');
+var TextField = require('./components/TextField/TextField.js');
+var Popover = require('../Popover/Popover.js');
+
+function Combobox({
+  activator,
+  allowMultiple,
+  children,
+  preferredPosition = 'below',
+  willLoadMoreOptions,
+  height,
+  maxHeight,
+  minHeight,
+  onScrolledToBottom,
+  onClose
+}) {
+  const [popoverActive, setPopoverActive] = React.useState(false);
+  const [activeOptionId, setActiveOptionId] = React.useState();
+  const [textFieldLabelId, setTextFieldLabelId] = React.useState();
+  const [listboxId, setListboxId] = React.useState();
+  const [textFieldFocused, setTextFieldFocused] = React.useState(false);
+  const shouldOpen = !popoverActive;
+  const popoverActiveWithChildren = popoverActive && React.Children.count(children) > 0;
+  const ref = React.useRef(null);
+  const handleClose = React.useCallback(() => {
+    setPopoverActive(false);
+    onClose?.();
+    setActiveOptionId(undefined);
+  }, [onClose]);
+  const handleOpen = React.useCallback(() => {
+    setPopoverActive(true);
+    setActiveOptionId(undefined);
+  }, []);
+  const onOptionSelected = React.useCallback(() => {
+    if (!allowMultiple) {
+      handleClose();
+      setActiveOptionId(undefined);
+      return;
+    }
+    ref.current?.forceUpdatePosition();
+  }, [allowMultiple, handleClose]);
+  const handleFocus = React.useCallback(() => {
+    if (shouldOpen) {
+      handleOpen();
+    }
+  }, [shouldOpen, handleOpen]);
+  const handleChange = React.useCallback(() => {
+    if (shouldOpen) {
+      handleOpen();
+    }
+  }, [shouldOpen, handleOpen]);
+  const handleBlur = React.useCallback(() => {
+    if (popoverActive) {
+      handleClose();
+    }
+  }, [popoverActive, handleClose]);
+  const textFieldContextValue = React.useMemo(() => ({
+    activeOptionId,
+    expanded: popoverActive,
+    listboxId,
+    setTextFieldFocused,
+    setTextFieldLabelId,
+    onTextFieldFocus: handleFocus,
+    onTextFieldChange: handleChange,
+    onTextFieldBlur: handleBlur
+  }), [activeOptionId, popoverActive, listboxId, setTextFieldFocused, setTextFieldLabelId, handleFocus, handleChange, handleBlur]);
+  const listboxOptionContextValue = React.useMemo(() => ({
+    allowMultiple
+  }), [allowMultiple]);
+  const listboxContextValue = React.useMemo(() => ({
+    listboxId,
+    textFieldLabelId,
+    textFieldFocused,
+    willLoadMoreOptions,
+    onOptionSelected,
+    setActiveOptionId,
+    setListboxId,
+    onKeyToBottom: onScrolledToBottom
+  }), [listboxId, textFieldLabelId, textFieldFocused, willLoadMoreOptions, onOptionSelected, setActiveOptionId, setListboxId, onScrolledToBottom]);
+  return /*#__PURE__*/React.createElement(Popover.Popover, {
+    ref: ref,
+    active: popoverActiveWithChildren,
+    activator: /*#__PURE__*/React.createElement(context.ComboboxTextFieldContext.Provider, {
+      value: textFieldContextValue
+    }, activator),
+    autofocusTarget: "none",
+    preventFocusOnClose: true,
+    fullWidth: true,
+    preferInputActivator: false,
+    preferredPosition: preferredPosition,
+    onClose: handleClose
+  }, React.Children.count(children) > 0 ? /*#__PURE__*/React.createElement(Popover.Popover.Pane, {
+    onScrolledToBottom: onScrolledToBottom,
+    height: height,
+    maxHeight: maxHeight,
+    minHeight: minHeight
+  }, /*#__PURE__*/React.createElement(context.ComboboxListboxContext.Provider, {
+    value: listboxContextValue
+  }, /*#__PURE__*/React.createElement(context.ComboboxListboxOptionContext.Provider, {
+    value: listboxOptionContextValue
+  }, /*#__PURE__*/React.createElement("div", {
+    className: Combobox_module.default.Listbox
+  }, children)))) : null);
+}
+Combobox.TextField = TextField.TextField;
+
+exports.Combobox = Combobox;

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

@@ -0,0 +1,65 @@
+'use strict';
+
+var React = require('react');
+var hooks = require('../../../../utilities/combobox/hooks.js');
+var Label = require('../../../Label/Label.js');
+var TextField$1 = require('../../../TextField/TextField.js');
+
+function TextField({
+  value,
+  id: idProp,
+  type = 'text',
+  ariaAutocomplete = 'list',
+  onFocus,
+  onBlur,
+  onChange,
+  ...rest
+}) {
+  const comboboxTextFieldContext = hooks.useComboboxTextField();
+  const {
+    activeOptionId,
+    listboxId,
+    expanded,
+    setTextFieldFocused,
+    setTextFieldLabelId,
+    onTextFieldFocus,
+    onTextFieldChange,
+    onTextFieldBlur
+  } = comboboxTextFieldContext;
+  const uniqueId = React.useId();
+  const textFieldId = React.useMemo(() => idProp || uniqueId, [uniqueId, idProp]);
+  const labelId = React.useMemo(() => Label.labelID(idProp || uniqueId), [uniqueId, idProp]);
+  React.useEffect(() => {
+    if (setTextFieldLabelId) setTextFieldLabelId(labelId);
+  }, [labelId, setTextFieldLabelId]);
+  const handleFocus = React.useCallback(event => {
+    if (onFocus) onFocus(event);
+    if (onTextFieldFocus) onTextFieldFocus();
+    if (setTextFieldFocused) setTextFieldFocused(true);
+  }, [onFocus, onTextFieldFocus, setTextFieldFocused]);
+  const handleBlur = React.useCallback(event => {
+    if (onBlur) onBlur(event);
+    if (onTextFieldBlur) onTextFieldBlur();
+    if (setTextFieldFocused) setTextFieldFocused(false);
+  }, [onBlur, onTextFieldBlur, setTextFieldFocused]);
+  const handleChange = React.useCallback((value, id) => {
+    if (onChange) onChange(value, id);
+    if (onTextFieldChange) onTextFieldChange(value);
+  }, [onChange, onTextFieldChange]);
+  return /*#__PURE__*/React.createElement(TextField$1.TextField, Object.assign({}, rest, {
+    value: value,
+    id: textFieldId,
+    type: type,
+    ariaAutocomplete: ariaAutocomplete,
+    "aria-haspopup": "listbox",
+    ariaActiveDescendant: activeOptionId,
+    ariaControls: listboxId,
+    role: "combobox",
+    ariaExpanded: expanded,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onChange: handleChange
+  }));
+}
+
+exports.TextField = TextField;

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

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {
+  "Connected": "Polaris-Connected",
+  "Item": "Polaris-Connected__Item",
+  "Item-primary": "Polaris-Connected__Item--primary",
+  "Item-focused": "Polaris-Connected__Item--focused"
+};
+
+exports.default = styles;

package/build/cjs/components/Connected/Connected.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var React = require('react');
+var Connected_module = require('./Connected.css.js');
+var Item = require('./components/Item/Item.js');
+
+function Connected({
+  children,
+  left,
+  right
+}) {
+  const leftConnectionMarkup = left ? /*#__PURE__*/React.createElement(Item.Item, {
+    position: "left"
+  }, left) : null;
+  const rightConnectionMarkup = right ? /*#__PURE__*/React.createElement(Item.Item, {
+    position: "right"
+  }, right) : null;
+  return /*#__PURE__*/React.createElement("div", {
+    className: Connected_module.default.Connected
+  }, leftConnectionMarkup, /*#__PURE__*/React.createElement(Item.Item, {
+    position: "primary"
+  }, children), rightConnectionMarkup);
+}
+
+exports.Connected = Connected;

package/build/cjs/components/Connected/components/Item/Item.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var React = require('react');
+var css = require('../../../../utilities/css.js');
+var useToggle = require('../../../../utilities/use-toggle.js');
+var Connected_module = require('../../Connected.css.js');
+
+function Item({
+  children,
+  position
+}) {
+  const {
+    value: focused,
+    setTrue: forceTrueFocused,
+    setFalse: forceFalseFocused
+  } = useToggle.useToggle(false);
+  const className = css.classNames(Connected_module.default.Item, focused && Connected_module.default['Item-focused'], position === 'primary' ? Connected_module.default['Item-primary'] : Connected_module.default['Item-connection']);
+  return /*#__PURE__*/React.createElement("div", {
+    onBlur: forceFalseFocused,
+    onFocus: forceTrueFocused,
+    className: className
+  }, children);
+}
+
+exports.Item = Item;

package/build/cjs/components/ContextualSaveBar/ContextualSaveBar.js

@@ -0,0 +1,41 @@
+'use strict';
+
+var React = require('react');
+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 ContextualSaveBar = /*#__PURE__*/React.memo(function ContextualSaveBar({
+  message,
+  saveAction,
+  discardAction,
+  alignContentFlush,
+  fullWidth,
+  contextControl,
+  secondaryMenu
+}) {
+  const {
+    setContextualSaveBar,
+    removeContextualSaveBar
+  } = hooks.useFrame();
+  React.useEffect(() => {
+    setContextualSaveBar({
+      message,
+      saveAction,
+      discardAction,
+      alignContentFlush,
+      fullWidth,
+      contextControl,
+      secondaryMenu
+    });
+  }, [message, saveAction, discardAction, alignContentFlush, setContextualSaveBar, fullWidth, contextControl, secondaryMenu]);
+  React.useEffect(() => {
+    return removeContextualSaveBar;
+  }, [removeContextualSaveBar]);
+  return null;
+});
+
+exports.ContextualSaveBar = ContextualSaveBar;

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

@@ -0,0 +1,49 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {
+  "DataTable": "Polaris-DataTable",
+  "condensed": "Polaris-DataTable--condensed",
+  "Navigation": "Polaris-DataTable__Navigation",
+  "Pip": "Polaris-DataTable__Pip",
+  "Pip-visible": "Polaris-DataTable__Pip--visible",
+  "ScrollContainer": "Polaris-DataTable__ScrollContainer",
+  "Table": "Polaris-DataTable__Table",
+  "TableRow": "Polaris-DataTable__TableRow",
+  "Cell": "Polaris-DataTable__Cell",
+  "IncreasedTableDensity": "Polaris-DataTable__IncreasedTableDensity",
+  "ZebraStripingOnData": "Polaris-DataTable__ZebraStripingOnData",
+  "RowCountIsEven": "Polaris-DataTable__RowCountIsEven",
+  "ShowTotalsInFooter": "Polaris-DataTable__ShowTotalsInFooter",
+  "Cell-separate": "Polaris-DataTable__Cell--separate",
+  "Cell-firstColumn": "Polaris-DataTable__Cell--firstColumn",
+  "Cell-numeric": "Polaris-DataTable__Cell--numeric",
+  "Cell-truncated": "Polaris-DataTable__Cell--truncated",
+  "Cell-header": "Polaris-DataTable__Cell--header",
+  "Cell-sortable": "Polaris-DataTable__Cell--sortable",
+  "Heading-left": "Polaris-DataTable__Heading--left",
+  "Cell-verticalAlignTop": "Polaris-DataTable__Cell--verticalAlignTop",
+  "Cell-verticalAlignBottom": "Polaris-DataTable__Cell--verticalAlignBottom",
+  "Cell-verticalAlignMiddle": "Polaris-DataTable__Cell--verticalAlignMiddle",
+  "Cell-verticalAlignBaseline": "Polaris-DataTable__Cell--verticalAlignBaseline",
+  "hoverable": "Polaris-DataTable--hoverable",
+  "Cell-hovered": "Polaris-DataTable__Cell--hovered",
+  "Icon": "Polaris-DataTable__Icon",
+  "Heading": "Polaris-DataTable__Heading",
+  "StickyHeaderEnabled": "Polaris-DataTable__StickyHeaderEnabled",
+  "StickyHeaderWrapper": "Polaris-DataTable__StickyHeaderWrapper",
+  "Cell-sorted": "Polaris-DataTable__Cell--sorted",
+  "Cell-total": "Polaris-DataTable__Cell--total",
+  "ShowTotals": "Polaris-DataTable__ShowTotals",
+  "Cell-total-footer": "Polaris-DataTable--cellTotalFooter",
+  "Footer": "Polaris-DataTable__Footer",
+  "StickyHeaderInner": "Polaris-DataTable__StickyHeaderInner",
+  "StickyHeaderInner-isSticky": "Polaris-DataTable__StickyHeaderInner--isSticky",
+  "StickyHeaderTable": "Polaris-DataTable__StickyHeaderTable",
+  "FixedFirstColumn": "Polaris-DataTable__FixedFirstColumn",
+  "StickyTableHeadingsRow": "Polaris-DataTable__StickyTableHeadingsRow",
+  "TooltipContent": "Polaris-DataTable__TooltipContent"
+};
+
+exports.default = styles;