@artsy/palette 45.13.1 → 45.14.0-canary.1497.33070.0

package/dist/esm/elements/ModalDialog/ModalDialogContent.story.js

@@ -0,0 +1,221 @@
+import { fn } from "@storybook/test";
+import React from "react";
+import { ModalDialogContent } from "./ModalDialogContent";
+import { Text } from "../Text";
+import { Button } from "../Button";
+import { Input } from "../Input";
+import { Join } from "../Join";
+import { Spacer } from "../Spacer";
+import { Box } from "../Box";
+import ChevronLeftIcon from "@artsy/icons/ChevronLeftIcon";
+import ArtsyLogoIcon from "@artsy/icons/ArtsyLogoIcon";
+import CloseIcon from "@artsy/icons/CloseIcon";
+import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
+export default {
+  component: ModalDialogContent,
+  title: "Components/ModalDialogContent",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "Content component for modal dialogs with title, body, and action sections."
+      },
+      controls: {
+        exclude: STORYBOOK_PROPS_BLOCKLIST
+      }
+    }
+  }
+};
+var modalContent = /*#__PURE__*/React.createElement(Join, {
+  separator: /*#__PURE__*/React.createElement(Spacer, {
+    y: 1
+  })
+}, /*#__PURE__*/React.createElement(Text, {
+  variant: "sm"
+}, "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque, neque voluptates! Sapiente, sint magnam. Assumenda, hic eius asperiores iure explicabo itaque accusantium, consectetur aut sit maxime culpa ab aliquid consequatur?"), /*#__PURE__*/React.createElement(Input, {
+  placeholder: "Enter your name",
+  autoComplete: "name"
+}), /*#__PURE__*/React.createElement(Input, {
+  placeholder: "Enter your email",
+  type: "email",
+  autoComplete: "email"
+}));
+export var Default = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(ModalDialogContent, {
+      onClose: fn(),
+      maxHeight: 400
+    }, modalContent);
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Basic modal dialog content without title or footer."
+      }
+    }
+  }
+};
+export var ShortContent = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(ModalDialogContent, {
+      onClose: fn(),
+      maxHeight: 400
+    }, /*#__PURE__*/React.createElement(Text, {
+      variant: "sm",
+      bg: "mono10"
+    }, "Content shorter than width"));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Modal with short content."
+      }
+    }
+  }
+};
+export var WithTitle = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(ModalDialogContent, {
+      title: "Modal Title",
+      onClose: fn(),
+      maxHeight: 400
+    }, modalContent);
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Modal dialog with a title."
+      }
+    }
+  }
+};
+export var WithLongTitle = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(ModalDialogContent, {
+      title: "Modal Title with a longer title or headline text that runs on for multiple lines",
+      onClose: fn(),
+      maxHeight: 400
+    }, modalContent);
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Modal dialog with a long title that wraps to multiple lines."
+      }
+    }
+  }
+};
+export var WithLogo = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(ModalDialogContent, {
+      hasLogo: true,
+      onClose: fn(),
+      maxHeight: 400
+    }, modalContent);
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Modal dialog with logo displayed."
+      }
+    }
+  }
+};
+export var WithTitleAndLogo = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(ModalDialogContent, {
+      title: "Modal Title",
+      hasLogo: true,
+      onClose: fn(),
+      maxHeight: 400
+    }, modalContent);
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Modal dialog with both title and logo."
+      }
+    }
+  }
+};
+export var WithFooter = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(ModalDialogContent, {
+      footer: /*#__PURE__*/React.createElement(Button, {
+        width: "100%"
+      }, "Confirm"),
+      onClose: fn(),
+      maxHeight: 400
+    }, modalContent);
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Modal dialog with footer action button."
+      }
+    }
+  }
+};
+export var WithTitleAndFooter = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(ModalDialogContent, {
+      title: "Modal Title",
+      footer: /*#__PURE__*/React.createElement(Button, {
+        width: "100%"
+      }, "Confirm"),
+      onClose: fn(),
+      maxHeight: 400
+    }, modalContent);
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Modal dialog with title and footer button."
+      }
+    }
+  }
+};
+export var Complete = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(ModalDialogContent, {
+      title: "Modal Title with a longer title or headline text that runs on for multiple lines",
+      hasLogo: true,
+      footer: /*#__PURE__*/React.createElement(Button, {
+        width: "100%"
+      }, "Confirm"),
+      onClose: fn(),
+      maxHeight: 400
+    }, modalContent);
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Complete modal dialog with title, logo, content, and footer."
+      }
+    }
+  }
+};
+export var CustomHeader = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(ModalDialogContent, {
+      title: /*#__PURE__*/React.createElement(Box, {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        p: 2
+      }, /*#__PURE__*/React.createElement(ChevronLeftIcon, null), /*#__PURE__*/React.createElement(ArtsyLogoIcon, {
+        height: 30
+      }), /*#__PURE__*/React.createElement(CloseIcon, null)),
+      onClose: fn(),
+      maxHeight: 400
+    }, modalContent);
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Modal dialog with custom header containing navigation icons."
+      }
+    }
+  }
+};
+//# sourceMappingURL=ModalDialogContent.story.js.map

package/dist/esm/elements/ModalDialog/ModalDialogContent.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalDialogContent.story.js","names":["fn","React","ModalDialogContent","Text","Button","Input","Join","Spacer","Box","ChevronLeftIcon","ArtsyLogoIcon","CloseIcon","STORYBOOK_PROPS_BLOCKLIST","component","title","tags","parameters","docs","description","controls","exclude","modalContent","createElement","separator","y","variant","placeholder","autoComplete","type","Default","render","onClose","maxHeight","story","ShortContent","bg","WithTitle","WithLongTitle","WithLogo","hasLogo","WithTitleAndLogo","WithFooter","footer","width","WithTitleAndFooter","Complete","CustomHeader","display","alignItems","justifyContent","p","height"],"sources":["../../../../src/elements/ModalDialog/ModalDialogContent.story.tsx"],"sourcesContent":["import { fn } from \"@storybook/test\"\nimport React from \"react\"\nimport { ModalDialogContent } from \"./ModalDialogContent\"\nimport { Text } from \"../Text\"\nimport { Button } from \"../Button\"\nimport { Input } from \"../Input\"\nimport { Join } from \"../Join\"\nimport { Spacer } from \"../Spacer\"\nimport { Box } from \"../Box\"\nimport ChevronLeftIcon from \"@artsy/icons/ChevronLeftIcon\"\nimport ArtsyLogoIcon from \"@artsy/icons/ArtsyLogoIcon\"\nimport CloseIcon from \"@artsy/icons/CloseIcon\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  component: ModalDialogContent,\n  title: \"Components/ModalDialogContent\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"Content component for modal dialogs with title, body, and action sections.\",\n      },\n      controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n    },\n  },\n}\n\nconst modalContent = (\n  <Join separator={<Spacer y={1} />}>\n    <Text variant=\"sm\">\n      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque, neque\n      voluptates! Sapiente, sint magnam. Assumenda, hic eius asperiores iure\n      explicabo itaque accusantium, consectetur aut sit maxime culpa ab aliquid\n      consequatur?\n    </Text>\n    <Input placeholder=\"Enter your name\" autoComplete=\"name\" />\n    <Input placeholder=\"Enter your email\" type=\"email\" autoComplete=\"email\" />\n  </Join>\n)\n\nexport const Default = {\n  render: () => (\n    <ModalDialogContent onClose={fn()} maxHeight={400}>\n      {modalContent}\n    </ModalDialogContent>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Basic modal dialog content without title or footer.\",\n      },\n    },\n  },\n}\n\nexport const ShortContent = {\n  render: () => (\n    <ModalDialogContent onClose={fn()} maxHeight={400}>\n      <Text variant=\"sm\" bg=\"mono10\">\n        Content shorter than width\n      </Text>\n    </ModalDialogContent>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Modal with short content.\",\n      },\n    },\n  },\n}\n\nexport const WithTitle = {\n  render: () => (\n    <ModalDialogContent title=\"Modal Title\" onClose={fn()} maxHeight={400}>\n      {modalContent}\n    </ModalDialogContent>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Modal dialog with a title.\",\n      },\n    },\n  },\n}\n\nexport const WithLongTitle = {\n  render: () => (\n    <ModalDialogContent\n      title=\"Modal Title with a longer title or headline text that runs on for multiple lines\"\n      onClose={fn()}\n      maxHeight={400}\n    >\n      {modalContent}\n    </ModalDialogContent>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Modal dialog with a long title that wraps to multiple lines.\",\n      },\n    },\n  },\n}\n\nexport const WithLogo = {\n  render: () => (\n    <ModalDialogContent hasLogo onClose={fn()} maxHeight={400}>\n      {modalContent}\n    </ModalDialogContent>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Modal dialog with logo displayed.\",\n      },\n    },\n  },\n}\n\nexport const WithTitleAndLogo = {\n  render: () => (\n    <ModalDialogContent\n      title=\"Modal Title\"\n      hasLogo\n      onClose={fn()}\n      maxHeight={400}\n    >\n      {modalContent}\n    </ModalDialogContent>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Modal dialog with both title and logo.\",\n      },\n    },\n  },\n}\n\nexport const WithFooter = {\n  render: () => (\n    <ModalDialogContent\n      footer={<Button width=\"100%\">Confirm</Button>}\n      onClose={fn()}\n      maxHeight={400}\n    >\n      {modalContent}\n    </ModalDialogContent>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Modal dialog with footer action button.\",\n      },\n    },\n  },\n}\n\nexport const WithTitleAndFooter = {\n  render: () => (\n    <ModalDialogContent\n      title=\"Modal Title\"\n      footer={<Button width=\"100%\">Confirm</Button>}\n      onClose={fn()}\n      maxHeight={400}\n    >\n      {modalContent}\n    </ModalDialogContent>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Modal dialog with title and footer button.\",\n      },\n    },\n  },\n}\n\nexport const Complete = {\n  render: () => (\n    <ModalDialogContent\n      title=\"Modal Title with a longer title or headline text that runs on for multiple lines\"\n      hasLogo\n      footer={<Button width=\"100%\">Confirm</Button>}\n      onClose={fn()}\n      maxHeight={400}\n    >\n      {modalContent}\n    </ModalDialogContent>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Complete modal dialog with title, logo, content, and footer.\",\n      },\n    },\n  },\n}\n\nexport const CustomHeader = {\n  render: () => (\n    <ModalDialogContent\n      title={\n        <Box\n          display=\"flex\"\n          alignItems=\"center\"\n          justifyContent=\"space-between\"\n          p={2}\n        >\n          <ChevronLeftIcon />\n          <ArtsyLogoIcon height={30} />\n          <CloseIcon />\n        </Box>\n      }\n      onClose={fn()}\n      maxHeight={400}\n    >\n      {modalContent}\n    </ModalDialogContent>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Modal dialog with custom header containing navigation icons.\",\n      },\n    },\n  },\n}\n"],"mappings":"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"}

package/dist/esm/elements/ModalDialog/index.js

@@ -0,0 +1,3 @@
+export * from "./ModalDialog";
+export * from "./ModalDialogContent";
+//# sourceMappingURL=index.js.map

package/dist/esm/elements/ModalDialog/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/elements/ModalDialog/index.ts"],"sourcesContent":["export * from \"./ModalDialog\"\nexport * from \"./ModalDialogContent\"\n"],"mappings":"AAAA;AACA"}

package/dist/esm/elements/MultiSelect/MultiSelect.js

@@ -0,0 +1,197 @@
+var _excluded = ["autoOpen", "complete", "description", "disabled", "error", "focus", "hover", "selected", "name", "options", "required", "title", "onBlur", "onFocus", "onSelect"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import { themeGet } from "@styled-system/theme-get";
+import React, { useEffect, useState } from "react";
+import styled, { css } from "styled-components";
+import { FORM_ELEMENT_TRANSITION } from "../../helpers";
+import { RequiredField } from "../../shared/RequiredField";
+import { useClickOutside, usePosition } from "../../utils";
+import { useUpdateEffect } from "../../utils/useUpdateEffect";
+import { useWidthOf } from "../../utils/useWidthOf";
+import { Box, BoxProps } from "../Box";
+import { Checkbox } from "../Checkbox";
+import { Clickable } from "../Clickable";
+import { caretMixin, Option } from "../Select";
+import { Text } from "../Text";
+import { Tooltip } from "../Tooltip";
+import { MULTISELECT_STATES } from "./tokens";
+/** A drop-down multi-select menu */
+export var MultiSelect = function MultiSelect(_ref) {
+  var _ref$autoOpen = _ref.autoOpen,
+    autoOpen = _ref$autoOpen === void 0 ? false : _ref$autoOpen,
+    complete = _ref.complete,
+    description = _ref.description,
+    disabled = _ref.disabled,
+    error = _ref.error,
+    focus = _ref.focus,
+    hover = _ref.hover,
+    _ref$selected = _ref.selected,
+    selected = _ref$selected === void 0 ? [] : _ref$selected,
+    _ref$name = _ref.name,
+    name = _ref$name === void 0 ? "Select" : _ref$name,
+    options = _ref.options,
+    required = _ref.required,
+    title = _ref.title,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus,
+    onSelect = _ref.onSelect,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var selectedOptions = valuesToOptions(selected, options);
+  var _useState = useState(autoOpen),
+    _useState2 = _slicedToArray(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  var _useState3 = useState(selectedOptions || []),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selection = _useState4[0],
+    setSelection = _useState4[1];
+  useEffect(function () {
+    var newSelectedOptions = valuesToOptions(selected, options);
+    setSelection(newSelectedOptions);
+  }, [selected.toString()]);
+
+  // Yields focus back and forth between popover and anchor
+  useUpdateEffect(function () {
+    if (visible && tooltipRef.current) {
+      tooltipRef.current.focus();
+      return;
+    }
+    if (!anchorRef.current) return;
+    anchorRef.current.focus();
+  }, [visible]);
+  var handleVisible = function handleVisible() {
+    setVisible(true);
+    onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+  };
+  var handleHide = function handleHide() {
+    setVisible(false);
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur(selection);
+  };
+  useEffect(function () {
+    var handleKeydown = function handleKeydown(event) {
+      if (event.key === "Escape") {
+        handleHide();
+      }
+    };
+    document.addEventListener("keydown", handleKeydown);
+    return function () {
+      document.removeEventListener("keydown", handleKeydown);
+    };
+  }, []);
+  var _usePosition = usePosition({
+      position: "bottom",
+      offset: 10,
+      active: visible
+    }),
+    anchorRef = _usePosition.anchorRef,
+    tooltipRef = _usePosition.tooltipRef;
+  var _useWidthOf = useWidthOf({
+      ref: anchorRef
+    }),
+    width = _useWidthOf.width;
+  useClickOutside({
+    ref: tooltipRef,
+    onClickOutside: handleHide,
+    when: visible,
+    type: "click"
+  });
+  var handleSelect = function handleSelect(option) {
+    return function (selected) {
+      var prevSelection = selection;
+      var nextSelection = selected ? [].concat(_toConsumableArray(prevSelection), [option]) : prevSelection.filter(function (_ref2) {
+        var value = _ref2.value;
+        return option.value !== value;
+      });
+      setSelection(nextSelection);
+      onSelect === null || onSelect === void 0 ? void 0 : onSelect(nextSelection);
+    };
+  };
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    width: "100%"
+  }, rest), !!description && /*#__PURE__*/React.createElement(Tooltip, {
+    pointer: true,
+    content: description,
+    placement: "top-end"
+  }, /*#__PURE__*/React.createElement(Text, {
+    variant: "xs",
+    color: "mono60",
+    textAlign: "right"
+  }, /*#__PURE__*/React.createElement("u", null, "What is this?"))), /*#__PURE__*/React.createElement(Container, _extends({
+    mt: !!title && !description ? 1 : 0,
+    ref: anchorRef,
+    onClick: handleVisible,
+    complete: complete || selection.length > 0,
+    disabled: !!disabled,
+    error: error,
+    focus: !!focus,
+    hover: !!hover,
+    title: title,
+    visible: visible
+  }, rest), /*#__PURE__*/React.createElement(Text, {
+    variant: "sm",
+    lineHeight: 1,
+    overflowEllipsis: true
+  }, selection.length > 0 ? _toConsumableArray(selection).reverse().map(function (s) {
+    return s.text;
+  }).join(", ") : name), !!title && /*#__PURE__*/React.createElement(StyledLabel, {
+    htmlFor: name
+  }, title)), visible && /*#__PURE__*/React.createElement(Options, {
+    tabIndex: 0,
+    ref: tooltipRef,
+    zIndex: 1,
+    bg: "mono0",
+    width: width
+  }, options.map(function (option) {
+    return /*#__PURE__*/React.createElement(Checkbox, {
+      key: option.value,
+      height: 50,
+      px: 1,
+      selected: selection.map(function (o) {
+        return o.value;
+      }).includes(option.value),
+      onSelect: handleSelect(option)
+    }, option.text);
+  })), required && !(error && typeof error === "string") && /*#__PURE__*/React.createElement(RequiredField, {
+    mt: 0.5,
+    ml: 1,
+    disabled: disabled
+  }), error && typeof error === "string" && /*#__PURE__*/React.createElement(Text, {
+    variant: "xs",
+    mt: 0.5,
+    ml: 1,
+    color: "red100"
+  }, error));
+};
+MultiSelect.displayName = "MultiSelect";
+var valuesToOptions = function valuesToOptions(values, options) {
+  return options.filter(function (option) {
+    return values.includes(option.value);
+  });
+};
+var Options = styled(Box).withConfig({
+  displayName: "MultiSelect__Options",
+  componentId: "sc-amrkn0-0"
+})(["position:fixed;z-index:1;max-height:300px;text-align:left;box-shadow:", ";overflow-y:auto;-webkit-overflow-scrolling:touch;"], themeGet("effects.dropShadow"));
+var Container = styled(Clickable).withConfig({
+  displayName: "MultiSelect__Container",
+  componentId: "sc-amrkn0-1"
+})(["position:relative;width:100%;padding:16px 24px 16px ", ";font-family:", ";border:1px solid;border-radius:3px;border-color:", ";cursor:pointer;line-height:1;transition:color 0.25s,background-color 0.25s,border-color 0.25s;background-color:", ";", " ", ""], themeGet("space.1"), themeGet("fonts.sans"), themeGet("colors.mono30"), themeGet("colors.mono0"), function (props) {
+  return css(["", " ", " ", " ", " ", " ", " &:hover{", "}", " &:disabled{cursor:default;", "}", ""], MULTISELECT_STATES.default, props.complete && MULTISELECT_STATES.completed, props.hover && MULTISELECT_STATES.hover, props.focus && MULTISELECT_STATES.focus, props.disabled && MULTISELECT_STATES.disabled, props.error && MULTISELECT_STATES.error, MULTISELECT_STATES.hover, props.visible && MULTISELECT_STATES.focus, MULTISELECT_STATES.disabled, props.title && !props.complete && !props.visible && css(["color:transparent !important;"]));
+}, caretMixin);
+var StyledLabel = styled.label.withConfig({
+  displayName: "MultiSelect__StyledLabel",
+  componentId: "sc-amrkn0-2"
+})(["position:absolute;top:50%;left:5px;padding:0 5px;pointer-events:none;transform:translateY(-50%);transition:", ";transition-property:color,transform,padding,font-size;background-color:", ";font-family:", ";"], FORM_ELEMENT_TRANSITION, themeGet("colors.mono0"), themeGet("fonts.sans"));
+//# sourceMappingURL=MultiSelect.js.map

package/dist/esm/elements/MultiSelect/MultiSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelect.js","names":["themeGet","React","useEffect","useState","styled","css","FORM_ELEMENT_TRANSITION","RequiredField","useClickOutside","usePosition","useUpdateEffect","useWidthOf","Box","BoxProps","Checkbox","Clickable","caretMixin","Option","Text","Tooltip","MULTISELECT_STATES","MultiSelect","_ref","_ref$autoOpen","autoOpen","complete","description","disabled","error","focus","hover","_ref$selected","selected","_ref$name","name","options","required","title","onBlur","onFocus","onSelect","rest","_objectWithoutProperties","_excluded","selectedOptions","valuesToOptions","_useState","_useState2","_slicedToArray","visible","setVisible","_useState3","_useState4","selection","setSelection","newSelectedOptions","toString","tooltipRef","current","anchorRef","handleVisible","handleHide","handleKeydown","event","key","document","addEventListener","removeEventListener","_usePosition","position","offset","active","_useWidthOf","ref","width","onClickOutside","when","type","handleSelect","option","prevSelection","nextSelection","concat","_toConsumableArray","filter","_ref2","value","createElement","_extends","pointer","content","placement","variant","color","textAlign","Container","mt","onClick","length","lineHeight","overflowEllipsis","reverse","map","s","text","join","StyledLabel","htmlFor","Options","tabIndex","zIndex","bg","height","px","o","includes","ml","displayName","values","withConfig","componentId","props","default","completed","label"],"sources":["../../../../src/elements/MultiSelect/MultiSelect.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { useEffect, useState } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { FORM_ELEMENT_TRANSITION } from \"../../helpers\"\nimport { RequiredField } from \"../../shared/RequiredField\"\nimport { useClickOutside, usePosition } from \"../../utils\"\nimport { useUpdateEffect } from \"../../utils/useUpdateEffect\"\nimport { useWidthOf } from \"../../utils/useWidthOf\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Checkbox } from \"../Checkbox\"\nimport { Clickable } from \"../Clickable\"\nimport { caretMixin, Option } from \"../Select\"\nimport { Text } from \"../Text\"\nimport { Tooltip } from \"../Tooltip\"\nimport { MULTISELECT_STATES } from \"./tokens\"\n\nexport interface MultiSelectProps extends BoxProps {\n  /** Whether to open the dropdown automatically on mount or render (default: false) */\n  autoOpen?: boolean\n  complete?: boolean\n  description?: string\n  disabled?: boolean\n  error?: string | boolean\n  focus?: boolean\n  hover?: boolean\n  /** Selected values (updating the list will refresh the internal selection and re-render the component) */\n  selected?: Option[\"value\"][]\n  name?: string\n  options: Option[]\n  required?: boolean\n  title?: string\n  onBlur?: (selection: Option[]) => void\n  onFocus?: () => void\n  onSelect?: (selection: Option[]) => void\n\n  visible?: boolean\n}\n\n/** A drop-down multi-select menu */\nexport const MultiSelect: React.FC<\n  React.PropsWithChildren<MultiSelectProps>\n> = ({\n  autoOpen = false,\n  complete,\n  description,\n  disabled,\n  error,\n  focus,\n  hover,\n  selected = [],\n  name = \"Select\",\n  options,\n  required,\n  title,\n  onBlur,\n  onFocus,\n  onSelect,\n  ...rest\n}) => {\n  const selectedOptions = valuesToOptions(selected, options)\n\n  const [visible, setVisible] = useState(autoOpen)\n  const [selection, setSelection] = useState<Option[]>(selectedOptions || [])\n\n  useEffect(() => {\n    const newSelectedOptions = valuesToOptions(selected, options)\n    setSelection(newSelectedOptions)\n  }, [selected.toString()])\n\n  // Yields focus back and forth between popover and anchor\n  useUpdateEffect(() => {\n    if (visible && tooltipRef.current) {\n      tooltipRef.current.focus()\n      return\n    }\n\n    if (!anchorRef.current) return\n    anchorRef.current.focus()\n  }, [visible])\n\n  const handleVisible = () => {\n    setVisible(true)\n    onFocus?.()\n  }\n\n  const handleHide = () => {\n    setVisible(false)\n    onBlur?.(selection)\n  }\n\n  useEffect(() => {\n    const handleKeydown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        handleHide()\n      }\n    }\n\n    document.addEventListener(\"keydown\", handleKeydown)\n    return () => {\n      document.removeEventListener(\"keydown\", handleKeydown)\n    }\n  }, [])\n  const { anchorRef, tooltipRef } = usePosition({\n    position: \"bottom\",\n    offset: 10,\n    active: visible,\n  })\n\n  const { width } = useWidthOf({ ref: anchorRef })\n\n  useClickOutside({\n    ref: tooltipRef,\n    onClickOutside: handleHide,\n    when: visible,\n    type: \"click\",\n  })\n\n  const handleSelect = (option: Option) => {\n    return (selected: boolean) => {\n      const prevSelection = selection\n      const nextSelection = selected\n        ? [...prevSelection, option]\n        : prevSelection.filter(({ value }) => option.value !== value)\n\n      setSelection(nextSelection)\n      onSelect?.(nextSelection)\n    }\n  }\n\n  return (\n    <Box width=\"100%\" {...rest}>\n      {!!description && (\n        <Tooltip pointer content={description} placement=\"top-end\">\n          <Text variant=\"xs\" color=\"mono60\" textAlign=\"right\">\n            <u>What is this?</u>\n          </Text>\n        </Tooltip>\n      )}\n\n      <Container\n        mt={!!title && !description ? 1 : 0}\n        ref={anchorRef as any}\n        onClick={handleVisible}\n        complete={complete || selection.length > 0}\n        disabled={!!disabled}\n        error={error}\n        focus={!!focus}\n        hover={!!hover}\n        title={title}\n        visible={visible}\n        {...rest}\n      >\n        <Text variant=\"sm\" lineHeight={1} overflowEllipsis>\n          {selection.length > 0\n            ? [...selection]\n                .reverse()\n                .map((s) => s.text)\n                .join(\", \")\n            : name}\n        </Text>\n\n        {!!title && <StyledLabel htmlFor={name}>{title}</StyledLabel>}\n      </Container>\n\n      {visible && (\n        <Options\n          tabIndex={0}\n          ref={tooltipRef as any}\n          zIndex={1}\n          bg=\"mono0\"\n          width={width}\n        >\n          {options.map((option) => {\n            return (\n              <Checkbox\n                key={option.value}\n                height={50}\n                px={1}\n                selected={selection.map((o) => o.value).includes(option.value)}\n                onSelect={handleSelect(option)}\n              >\n                {option.text}\n              </Checkbox>\n            )\n          })}\n        </Options>\n      )}\n\n      {required && !(error && typeof error === \"string\") && (\n        <RequiredField mt={0.5} ml={1} disabled={disabled} />\n      )}\n\n      {error && typeof error === \"string\" && (\n        <Text variant=\"xs\" mt={0.5} ml={1} color=\"red100\">\n          {error}\n        </Text>\n      )}\n    </Box>\n  )\n}\n\nconst valuesToOptions = (\n  values: Option[\"value\"][],\n  options: Option[]\n): Option[] => {\n  return options.filter((option) => values.includes(option.value))\n}\n\nconst Options = styled(Box)`\n  position: fixed;\n  z-index: 1;\n  max-height: 300px;\n  text-align: left;\n  box-shadow: ${themeGet(\"effects.dropShadow\")};\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n`\n\ntype ContainerProps = Pick<\n  MultiSelectProps,\n  \"complete\" | \"disabled\" | \"error\" | \"hover\" | \"focus\" | \"visible\"\n>\n\nconst Container = styled(Clickable)<ContainerProps>`\n  position: relative;\n  width: 100%;\n  /* 24px = space.1 + 4px-wide caret + space.1 */\n  padding: 16px 24px 16px ${themeGet(\"space.1\")};\n  font-family: ${themeGet(\"fonts.sans\")};\n  border: 1px solid;\n  border-radius: 3px;\n  border-color: ${themeGet(\"colors.mono30\")};\n  cursor: pointer;\n  line-height: 1;\n  transition: color 0.25s, background-color 0.25s, border-color 0.25s;\n  background-color: ${themeGet(\"colors.mono0\")};\n\n  ${(props) => {\n    return css`\n      ${MULTISELECT_STATES.default}\n      ${props.complete && MULTISELECT_STATES.completed}\n      ${props.hover && MULTISELECT_STATES.hover}\n      ${props.focus && MULTISELECT_STATES.focus}\n      ${props.disabled && MULTISELECT_STATES.disabled}\n      ${props.error && MULTISELECT_STATES.error}\n\n      &:hover {\n        ${MULTISELECT_STATES.hover}\n      }\n\n      ${props.visible && MULTISELECT_STATES.focus}\n\n      &:disabled {\n        cursor: default;\n        ${MULTISELECT_STATES.disabled}\n      }\n\n      // Hide text behind title when it's visible\n      ${props.title &&\n      !props.complete &&\n      !props.visible &&\n      css`\n        color: transparent !important;\n      `}\n    `\n  }}\n\n  ${caretMixin}\n`\n\nconst StyledLabel = styled.label`\n  position: absolute;\n  top: 50%;\n  left: 5px;\n  padding: 0 5px;\n  pointer-events: none;\n  transform: translateY(-50%);\n  transition: ${FORM_ELEMENT_TRANSITION};\n  transition-property: color, transform, padding, font-size;\n  background-color: ${themeGet(\"colors.mono0\")};\n  font-family: ${themeGet(\"fonts.sans\")};\n`\n"],"mappings":"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"}

package/dist/esm/elements/MultiSelect/MultiSelect.story.js

@@ -0,0 +1,164 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { fn } from "@storybook/test";
+import React, { useReducer } from "react";
+import { MultiSelect } from "./MultiSelect";
+import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
+export default {
+  title: "Components/MultiSelect",
+  component: MultiSelect,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      controls: {
+        exclude: STORYBOOK_PROPS_BLOCKLIST
+      }
+    }
+  }
+};
+var OPTIONS = [{
+  text: "Painting",
+  value: "painting"
+}, {
+  text: "Print",
+  value: "print"
+}, {
+  text: "Sculpture",
+  value: "sculpture"
+}, {
+  text: "Photography",
+  value: "photography"
+}, {
+  text: "Mixed Media",
+  value: "mixed-media"
+}];
+export var Default = {
+  args: {
+    name: "Medium",
+    options: OPTIONS,
+    onSelect: fn()
+  }
+};
+export var Focus = {
+  args: {
+    name: "Medium",
+    options: OPTIONS,
+    onSelect: fn(),
+    focus: true
+  }
+};
+export var Hover = {
+  args: {
+    name: "Medium",
+    options: OPTIONS,
+    onSelect: fn(),
+    hover: true
+  }
+};
+export var Complete = {
+  args: {
+    name: "Medium",
+    options: OPTIONS,
+    onSelect: fn(),
+    complete: true
+  }
+};
+export var WithError = {
+  args: {
+    name: "Medium",
+    options: OPTIONS,
+    onSelect: fn(),
+    error: "Something went wrong."
+  }
+};
+export var Disabled = {
+  args: {
+    name: "Medium",
+    options: OPTIONS,
+    onSelect: fn(),
+    disabled: true
+  }
+};
+export var WithTitle = {
+  args: {
+    name: "Select",
+    title: "Medium",
+    options: OPTIONS,
+    onSelect: fn()
+  }
+};
+export var Required = {
+  args: {
+    name: "Select",
+    title: "Medium",
+    options: OPTIONS,
+    onSelect: fn(),
+    required: true
+  }
+};
+export var WithDescription = {
+  args: {
+    name: "Select",
+    title: "Medium",
+    description: "Materials or support",
+    options: OPTIONS,
+    onSelect: fn()
+  }
+};
+export var WithStateTracking = {
+  args: {
+    name: "Size",
+    options: OPTIONS
+  },
+  render: function render(args) {
+    var _useReducer = useReducer(function (state, newFilter) {
+        return _objectSpread(_objectSpread({}, state), newFilter);
+      }, {}),
+      _useReducer2 = _slicedToArray(_useReducer, 2),
+      filters = _useReducer2[0],
+      setFilter = _useReducer2[1];
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("pre", null, JSON.stringify(filters)), /*#__PURE__*/React.createElement(MultiSelect, _extends({}, args, {
+      onSelect: function onSelect(sizes) {
+        setFilter({
+          sizes: sizes.map(function (size) {
+            return size.value;
+          })
+        });
+      }
+    })));
+  }
+};
+export var CustomSelectionLogic = function CustomSelectionLogic() {
+  var _React$useState = React.useState([]),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    selectedValue = _React$useState2[0],
+    setSelectedValue = _React$useState2[1];
+  var handleSelect = function handleSelect(selection) {
+    // If a new option is selected, only keep the most recently selected one
+    if (selection.length > selectedValue.length) {
+      var newlySelected = selection[selection.length - 1];
+      setSelectedValue([newlySelected.value]);
+    } else {
+      // If an option was deselected, clear the selection
+      setSelectedValue([]);
+    }
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", null, "This MultiSelect behaves like a single select - selecting a new option deselects all others."), /*#__PURE__*/React.createElement("pre", null, "Selected: ", JSON.stringify(selectedValue)), /*#__PURE__*/React.createElement(MultiSelect, {
+    options: OPTIONS,
+    name: "Select one medium",
+    selected: selectedValue,
+    onSelect: handleSelect
+  }));
+};
+//# sourceMappingURL=MultiSelect.story.js.map