polaris-react-extended 13.10.3

package/build/esm/components/ChoiceList/ChoiceList.js

@@ -0,0 +1,129 @@
+import React, { useId } from 'react';
+import styles from './ChoiceList.css.js';
+import { Bleed } from '../Bleed/Bleed.js';
+import { RadioButton } from '../RadioButton/RadioButton.js';
+import { Box } from '../Box/Box.js';
+import { errorTextID, InlineError } from '../InlineError/InlineError.js';
+import { BlockStack } from '../BlockStack/BlockStack.js';
+import { Checkbox } from '../Checkbox/Checkbox.js';
+import { Text } from '../Text/Text.js';
+
+function ChoiceList({
+  title,
+  titleHidden,
+  allowMultiple,
+  choices,
+  selected,
+  onChange = noop,
+  error,
+  disabled = false,
+  name: nameProp,
+  tone
+}) {
+  // Type asserting to any is required for TS3.2 but can be removed when we update to 3.3
+  // see https://github.com/Microsoft/TypeScript/issues/28768
+  const ControlComponent = allowMultiple ? Checkbox : RadioButton;
+  const uniqName = useId();
+  const name = nameProp ?? uniqName;
+  const finalName = allowMultiple ? `${name}[]` : name;
+  const titleMarkup = title ? /*#__PURE__*/React.createElement(Box, {
+    as: "legend",
+    paddingBlockEnd: {
+      xs: '0',
+      md: '100'
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    as: "span",
+    variant: "bodyMd",
+    visuallyHidden: titleHidden
+  }, title)) : null;
+  const choicesMarkup = choices.map(choice => {
+    const {
+      value,
+      id,
+      label,
+      helpText,
+      disabled: choiceDisabled,
+      describedByError
+    } = choice;
+    function handleChange(checked) {
+      onChange(updateSelectedChoices(choice, checked, selected, allowMultiple), name);
+    }
+    const isSelected = choiceIsSelected(choice, selected);
+    const renderedChildren = choice.renderChildren ? choice.renderChildren(isSelected) : null;
+    const children = renderedChildren ? /*#__PURE__*/React.createElement("div", {
+      className: styles.ChoiceChildren
+    }, /*#__PURE__*/React.createElement(Box, {
+      paddingBlockStart: {
+        xs: '400',
+        md: '0'
+      }
+    }, renderedChildren)) : null;
+    return /*#__PURE__*/React.createElement("li", {
+      key: value
+    }, /*#__PURE__*/React.createElement(Bleed, {
+      marginBlockEnd: helpText ? {
+        xs: '100',
+        md: '0'
+      } : {
+        xs: '0'
+      }
+    }, /*#__PURE__*/React.createElement(ControlComponent, {
+      name: finalName,
+      value: value,
+      id: id,
+      label: label,
+      disabled: choiceDisabled || disabled,
+      fill: {
+        xs: true,
+        sm: false
+      },
+      checked: choiceIsSelected(choice, selected),
+      helpText: helpText,
+      onChange: handleChange,
+      ariaDescribedBy: error && describedByError ? errorTextID(finalName) : null,
+      tone: tone
+    }), children));
+  });
+  const errorMarkup = error && /*#__PURE__*/React.createElement(Box, {
+    paddingBlockStart: {
+      xs: '0',
+      md: '100'
+    },
+    paddingBlockEnd: "200"
+  }, /*#__PURE__*/React.createElement(InlineError, {
+    message: error,
+    fieldID: finalName
+  }));
+  return /*#__PURE__*/React.createElement(BlockStack, {
+    as: "fieldset",
+    gap: {
+      xs: '400',
+      md: '0'
+    },
+    "aria-invalid": error != null,
+    id: finalName
+  }, titleMarkup, /*#__PURE__*/React.createElement(BlockStack, {
+    as: "ul",
+    gap: {
+      xs: '400',
+      md: '0'
+    }
+  }, choicesMarkup), errorMarkup);
+}
+function noop() {}
+function choiceIsSelected({
+  value
+}, selected) {
+  return selected.includes(value);
+}
+function updateSelectedChoices({
+  value
+}, checked, selected, allowMultiple = false) {
+  if (checked) {
+    return allowMultiple ? [...selected, value] : [value];
+  }
+  return selected.filter(selectedChoice => selectedChoice !== value);
+}
+
+export { ChoiceList };

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

@@ -0,0 +1,9 @@
+var styles = {
+  "Collapsible": "Polaris-Collapsible",
+  "isFullyClosed": "Polaris-Collapsible--isFullyClosed",
+  "expandOnPrint": "Polaris-Collapsible--expandOnPrint",
+  "inline": "Polaris-Collapsible--inline",
+  "animateIn": "Polaris-Collapsible--animateIn"
+};
+
+export { styles as default };

package/build/esm/components/Collapsible/Collapsible.js

@@ -0,0 +1,114 @@
+import React, { useState, useRef, useCallback, useEffect } from 'react';
+import { createVar } from '@shopify/polaris-tokens';
+import { classNames } from '../../utilities/css.js';
+import styles from './Collapsible.css.js';
+
+function Collapsible({
+  id,
+  expandOnPrint,
+  open,
+  variant = 'block',
+  transition = true,
+  children,
+  onAnimationEnd
+}) {
+  const [size, setSize] = useState(0);
+  const [isOpen, setIsOpen] = useState(open);
+  const collapsibleContainer = useRef(null);
+  const animateIn = typeof transition === 'object' && transition.animateIn;
+  const [animationState, setAnimationState] = useState(animateIn ? 'measuring' : 'idle');
+  const isFullyOpen = animationState === 'idle' && open && isOpen;
+  const isFullyClosed = animationState === 'idle' && !open && !isOpen;
+  const content = expandOnPrint || !isFullyClosed ? children : null;
+  const vertical = variant === 'block';
+  const wrapperClassName = classNames(styles.Collapsible, isFullyClosed && styles.isFullyClosed, expandOnPrint && styles.expandOnPrint, variant === 'inline' && styles.inline, animateIn && styles.animateIn);
+  const transitionDisabled = isTransitionDisabled(transition);
+  const transitionStyles = typeof transition === 'object' && {
+    transitionDelay: createVar(`motion-duration-${transition.delay ?? '0'}`),
+    transitionDuration: transition.duration,
+    transitionTimingFunction: transition.timingFunction
+  };
+  const collapsibleStyles = {
+    ...transitionStyles,
+    ...(vertical ? {
+      maxHeight: isFullyOpen ? 'none' : `${size}px`,
+      overflow: isFullyOpen ? 'visible' : 'hidden'
+    } : {
+      maxWidth: isFullyOpen ? 'none' : `${size}px`,
+      overflow: isFullyOpen ? 'visible' : 'hidden'
+    })
+  };
+  const handleCompleteAnimation = useCallback(({
+    target
+  }) => {
+    if (target === collapsibleContainer.current) {
+      setAnimationState('idle');
+      setIsOpen(open);
+      onAnimationEnd && onAnimationEnd();
+    }
+  }, [onAnimationEnd, open]);
+  const startAnimation = useCallback(() => {
+    if (transitionDisabled) {
+      setIsOpen(open);
+      setAnimationState('idle');
+      if (open && collapsibleContainer.current) {
+        setSize(vertical ? collapsibleContainer.current.scrollHeight : collapsibleContainer.current.scrollWidth);
+      } else {
+        setSize(0);
+      }
+    } else {
+      setAnimationState('measuring');
+    }
+  }, [open, vertical, transitionDisabled]);
+  useEffect(() => {
+    if (open !== isOpen) {
+      startAnimation();
+    }
+    // startAnimation should only be fired if the open state changes.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, isOpen]);
+  useEffect(() => {
+    if (!open || !collapsibleContainer.current) return;
+    // If collapsible defaults to open, set an initial height
+    setSize(vertical ? collapsibleContainer.current.scrollHeight : collapsibleContainer.current.scrollWidth);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  useEffect(() => {
+    if (!collapsibleContainer.current) return;
+    switch (animationState) {
+      case 'idle':
+        break;
+      case 'measuring':
+        setSize(vertical ? collapsibleContainer.current.scrollHeight : collapsibleContainer.current.scrollWidth);
+        setAnimationState('animating');
+        break;
+      case 'animating':
+        setSize(
+        // eslint-disable-next-line no-nested-ternary
+        open ? vertical ? collapsibleContainer.current.scrollHeight : collapsibleContainer.current.scrollWidth : 0);
+    }
+  }, [animationState, vertical, open, isOpen]);
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    style: collapsibleStyles,
+    ref: collapsibleContainer,
+    className: wrapperClassName,
+    onTransitionEnd: handleCompleteAnimation,
+    "aria-hidden": !open
+  }, content);
+}
+const zeroDurationRegex = /^0(ms|s)$/;
+function isTransitionDisabled(transitionProp) {
+  if (typeof transitionProp === 'boolean') {
+    return !transitionProp;
+  }
+  const {
+    duration
+  } = transitionProp;
+  if (duration && zeroDurationRegex.test(duration.trim())) {
+    return true;
+  }
+  return false;
+}
+
+export { Collapsible };

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

@@ -0,0 +1,12 @@
+var styles = {
+  "ColorPicker": "Polaris-ColorPicker",
+  "MainColor": "Polaris-ColorPicker__MainColor",
+  "fullWidth": "Polaris-ColorPicker--fullWidth",
+  "Dragger": "Polaris-ColorPicker__Dragger",
+  "ColorLayer": "Polaris-ColorPicker__ColorLayer",
+  "HuePicker": "Polaris-ColorPicker__HuePicker",
+  "AlphaPicker": "Polaris-ColorPicker__AlphaPicker",
+  "Slidable": "Polaris-ColorPicker__Slidable"
+};
+
+export { styles as default };

package/build/esm/components/ColorPicker/ColorPicker.js

@@ -0,0 +1,190 @@
+import React, { PureComponent } from 'react';
+import { debounce } from '../../utilities/debounce.js';
+import { clamp } from '../../utilities/clamp.js';
+import { classNames } from '../../utilities/css.js';
+import { hsbToRgb } from '../../utilities/color-transformers.js';
+import styles from './ColorPicker.css.js';
+import { AlphaPicker } from './components/AlphaPicker/AlphaPicker.js';
+import { HuePicker } from './components/HuePicker/HuePicker.js';
+import { Slidable } from './components/Slidable/Slidable.js';
+
+const RESIZE_DEBOUNCE_TIME_MS = 200;
+class ColorPicker extends PureComponent {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      pickerSize: {
+        width: 0,
+        height: 0
+      }
+    };
+    this.colorNode = null;
+    this.handleResize = debounce(() => {
+      const {
+        colorNode
+      } = this;
+      if (colorNode == null) {
+        return;
+      }
+      this.setState({
+        pickerSize: {
+          width: colorNode.clientWidth,
+          height: colorNode.clientHeight
+        }
+      });
+    }, RESIZE_DEBOUNCE_TIME_MS, {
+      leading: true,
+      trailing: true,
+      maxWait: RESIZE_DEBOUNCE_TIME_MS
+    });
+    this.setColorNode = node => {
+      this.colorNode = node;
+    };
+    this.handleHueChange = hue => {
+      const {
+        color: {
+          brightness,
+          saturation,
+          alpha = 1
+        },
+        onChange
+      } = this.props;
+      onChange({
+        hue,
+        brightness,
+        saturation,
+        alpha
+      });
+    };
+    this.handleAlphaChange = alpha => {
+      const {
+        color: {
+          hue,
+          brightness,
+          saturation
+        },
+        onChange
+      } = this.props;
+      onChange({
+        hue,
+        brightness,
+        saturation,
+        alpha
+      });
+    };
+    this.handleDraggerMove = ({
+      x,
+      y
+    }) => {
+      const {
+        pickerSize
+      } = this.state;
+      const {
+        color: {
+          hue,
+          alpha = 1
+        },
+        onChange
+      } = this.props;
+      const saturation = clamp(x / pickerSize.width, 0, 1);
+      const brightness = clamp(1 - y / pickerSize.height, 0, 1);
+      onChange({
+        hue,
+        saturation,
+        brightness,
+        alpha
+      });
+    };
+    this.handlePickerDrag = event => {
+      // prevents external elements from being selected
+      event.preventDefault();
+    };
+  }
+  componentWillUnmount() {
+    this.observer?.disconnect();
+  }
+  componentDidMount() {
+    const {
+      colorNode
+    } = this;
+    if (!colorNode) {
+      return;
+    }
+    this.observer = new ResizeObserver(this.handleResize);
+    this.observer.observe(colorNode);
+    this.setState({
+      pickerSize: {
+        width: colorNode.clientWidth,
+        height: colorNode.clientHeight
+      }
+    });
+    if (process.env.NODE_ENV === 'development') {
+      setTimeout(() => {
+        this.setState({
+          pickerSize: {
+            width: colorNode.clientWidth,
+            height: colorNode.clientHeight
+          }
+        });
+      }, 0);
+    }
+  }
+  render() {
+    const {
+      id,
+      color,
+      allowAlpha,
+      fullWidth
+    } = this.props;
+    const {
+      hue,
+      saturation,
+      brightness,
+      alpha: providedAlpha
+    } = color;
+    const {
+      pickerSize
+    } = this.state;
+    const alpha = providedAlpha != null && allowAlpha ? providedAlpha : 1;
+    const {
+      red,
+      green,
+      blue
+    } = hsbToRgb({
+      hue,
+      saturation: 1,
+      brightness: 1
+    });
+    const colorString = `rgba(${red}, ${green}, ${blue}, ${alpha})`;
+    const draggerX = clamp(saturation * pickerSize.width, 0, pickerSize.width);
+    const draggerY = clamp(pickerSize.height - brightness * pickerSize.height, 0, pickerSize.height);
+    const alphaSliderMarkup = allowAlpha ? /*#__PURE__*/React.createElement(AlphaPicker, {
+      alpha: alpha,
+      color: color,
+      onChange: this.handleAlphaChange
+    }) : null;
+    const className = classNames(styles.ColorPicker, fullWidth && styles.fullWidth);
+    return /*#__PURE__*/React.createElement("div", {
+      className: className,
+      id: id,
+      onMouseDown: this.handlePickerDrag
+    }, /*#__PURE__*/React.createElement("div", {
+      ref: this.setColorNode,
+      className: styles.MainColor
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.ColorLayer,
+      style: {
+        backgroundColor: colorString
+      }
+    }), /*#__PURE__*/React.createElement(Slidable, {
+      onChange: this.handleDraggerMove,
+      draggerX: draggerX,
+      draggerY: draggerY
+    })), /*#__PURE__*/React.createElement(HuePicker, {
+      hue: hue,
+      onChange: this.handleHueChange
+    }), alphaSliderMarkup);
+  }
+}
+
+export { ColorPicker };

package/build/esm/components/ColorPicker/components/AlphaPicker/AlphaPicker.js

@@ -0,0 +1,105 @@
+import React, { PureComponent } from 'react';
+import { hsbToRgb } from '../../../../utilities/color-transformers.js';
+import styles from '../../ColorPicker.css.js';
+import { alphaForDraggerY, calculateDraggerY } from './utilities.js';
+import { Slidable } from '../Slidable/Slidable.js';
+
+class AlphaPicker extends PureComponent {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      sliderHeight: 0,
+      draggerHeight: 0
+    };
+    this.node = null;
+    this.setNode = node => {
+      if (!node) {
+        return;
+      }
+      this.node = node;
+    };
+    this.setSliderHeight = () => {
+      const {
+        node
+      } = this;
+      if (!node) {
+        return;
+      }
+      this.setState({
+        sliderHeight: node.clientHeight
+      });
+      if (process.env.NODE_ENV === 'development') {
+        setTimeout(() => {
+          this.setState({
+            sliderHeight: node.clientHeight
+          });
+        }, 0);
+      }
+    };
+    this.setDraggerHeight = height => {
+      this.setState({
+        draggerHeight: height
+      });
+    };
+    this.handleChange = ({
+      y
+    }) => {
+      const {
+        onChange
+      } = this.props;
+      const {
+        sliderHeight
+      } = this.state;
+      const alpha = alphaForDraggerY(y, sliderHeight);
+      onChange(alpha);
+    };
+  }
+  componentWillUnmount() {
+    this.observer?.disconnect();
+  }
+  componentDidMount() {
+    if (!this.node) {
+      return;
+    }
+    this.observer = new ResizeObserver(this.setSliderHeight);
+    this.observer.observe(this.node);
+    this.setSliderHeight();
+  }
+  render() {
+    const {
+      color,
+      alpha
+    } = this.props;
+    const {
+      sliderHeight,
+      draggerHeight
+    } = this.state;
+    const draggerY = calculateDraggerY(alpha, sliderHeight, draggerHeight);
+    const background = alphaGradientForColor(color);
+    return /*#__PURE__*/React.createElement("div", {
+      className: styles.AlphaPicker,
+      ref: this.setNode
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.ColorLayer,
+      style: {
+        background
+      }
+    }), /*#__PURE__*/React.createElement(Slidable, {
+      draggerY: draggerY,
+      draggerX: 0,
+      onChange: this.handleChange,
+      onDraggerHeight: this.setDraggerHeight
+    }));
+  }
+}
+function alphaGradientForColor(color) {
+  const {
+    red,
+    green,
+    blue
+  } = hsbToRgb(color);
+  const rgb = `${red}, ${green}, ${blue}`;
+  return `linear-gradient(to top, rgba(${rgb}, 0) 18px, rgba(${rgb}, 1) calc(100% - 18px))`;
+}
+
+export { AlphaPicker };

package/build/esm/components/ColorPicker/components/AlphaPicker/utilities.js

@@ -0,0 +1,22 @@
+import { clamp } from '../../../../utilities/clamp.js';
+
+const VERTICAL_PADDING = 13;
+function calculateDraggerY(alpha, sliderHeight, draggerHeight) {
+  const offset = offsetForAlpha(alpha, sliderHeight, draggerHeight);
+  return clamp(offset, 0, sliderHeight);
+}
+function alphaForDraggerY(y, sliderHeight) {
+  const offsetY = clamp(y, 0, sliderHeight);
+  return alphaForOffset(offsetY, sliderHeight);
+}
+function alphaForOffset(offset, sliderHeight) {
+  const selectionHeight = offset - VERTICAL_PADDING;
+  const slidableArea = sliderHeight - VERTICAL_PADDING * 2;
+  return clamp(1 - selectionHeight / slidableArea, 0, 1);
+}
+function offsetForAlpha(alpha, sliderHeight, draggerHeight) {
+  const slidableArea = sliderHeight - (draggerHeight + VERTICAL_PADDING);
+  return clamp((1 - alpha) * slidableArea + VERTICAL_PADDING, 0, sliderHeight - draggerHeight);
+}
+
+export { alphaForDraggerY, alphaForOffset, calculateDraggerY };

package/build/esm/components/ColorPicker/components/HuePicker/HuePicker.js

@@ -0,0 +1,88 @@
+import React, { PureComponent } from 'react';
+import styles from '../../ColorPicker.css.js';
+import { hueForDraggerY, calculateDraggerY } from './utilities.js';
+import { Slidable } from '../Slidable/Slidable.js';
+
+class HuePicker extends PureComponent {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      sliderHeight: 0,
+      draggerHeight: 0
+    };
+    this.node = null;
+    this.setNode = node => {
+      if (!node) {
+        return;
+      }
+      this.node = node;
+    };
+    this.setSliderHeight = () => {
+      const {
+        node
+      } = this;
+      if (!node) {
+        return;
+      }
+      this.setState({
+        sliderHeight: node.clientHeight
+      });
+      if (process.env.NODE_ENV === 'development') {
+        setTimeout(() => {
+          this.setState({
+            sliderHeight: node.clientHeight
+          });
+        }, 0);
+      }
+    };
+    this.setDraggerHeight = height => {
+      this.setState({
+        draggerHeight: height
+      });
+    };
+    this.handleChange = ({
+      y
+    }) => {
+      const {
+        onChange
+      } = this.props;
+      const {
+        sliderHeight
+      } = this.state;
+      const hue = hueForDraggerY(y, sliderHeight);
+      onChange(hue);
+    };
+  }
+  componentWillUnmount() {
+    this.observer?.disconnect();
+  }
+  componentDidMount() {
+    if (!this.node) {
+      return;
+    }
+    this.observer = new ResizeObserver(this.setSliderHeight);
+    this.observer.observe(this.node);
+    this.setSliderHeight();
+  }
+  render() {
+    const {
+      hue
+    } = this.props;
+    const {
+      sliderHeight,
+      draggerHeight
+    } = this.state;
+    const draggerY = calculateDraggerY(hue, sliderHeight, draggerHeight);
+    return /*#__PURE__*/React.createElement("div", {
+      className: styles.HuePicker,
+      ref: this.setNode
+    }, /*#__PURE__*/React.createElement(Slidable, {
+      draggerY: draggerY,
+      draggerX: 0,
+      onChange: this.handleChange,
+      onDraggerHeight: this.setDraggerHeight
+    }));
+  }
+}
+
+export { HuePicker };

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

@@ -0,0 +1,22 @@
+import { clamp } from '../../../../utilities/clamp.js';
+
+const VERTICAL_PADDING = 13;
+function calculateDraggerY(hue, sliderHeight, draggerHeight) {
+  const offset = offsetForHue(hue, sliderHeight, draggerHeight);
+  return clamp(offset, 0, sliderHeight);
+}
+function hueForDraggerY(y, sliderHeight) {
+  const offsetY = 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(selectionHeight / slidableArea * 360, 0, 360);
+}
+function offsetForHue(hue, sliderHeight, draggerHeight) {
+  const slidableArea = sliderHeight - (draggerHeight + VERTICAL_PADDING);
+  return clamp(hue / 360 * slidableArea + VERTICAL_PADDING, 0, sliderHeight - draggerHeight);
+}
+
+export { calculateDraggerY, hueForDraggerY };