@artsy/palette 45.13.1 → 45.14.0-canary.1497.33065.0

package/dist/esm/elements/Modal/ModalBase.story.js

@@ -0,0 +1,164 @@
+var _excluded = ["bodyChildren", "dialogChildren", "defer"];
+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 _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 React, { useEffect, useState } from "react";
+import { Text } from "../Text";
+import { Box } from "../Box";
+import { Button } from "../Button";
+import { Input } from "../Input";
+import { Join } from "../Join";
+import { Spacer } from "../Spacer";
+import { ModalBase } from "./ModalBase";
+import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
+var Example = function Example() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    bodyChildren = _ref.bodyChildren,
+    dialogChildren = _ref.dialogChildren,
+    defer = _ref.defer,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  var label = open ? "opened" : "open";
+  var handleClose = function handleClose() {
+    return setOpen(false);
+  };
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    deferred = _useState4[0],
+    setDeferred = _useState4[1];
+  useEffect(function () {
+    if (defer && open) {
+      setTimeout(function () {
+        setDeferred(true);
+      }, 1000);
+    }
+  }, [defer, open]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    variant: "primaryGray",
+    onClick: function onClick() {
+      return setOpen(true);
+    }
+  }, label), bodyChildren, open && /*#__PURE__*/React.createElement(ModalBase, _extends({
+    onClose: handleClose
+  }, rest), /*#__PURE__*/React.createElement(Box, {
+    background: "black",
+    p: 4,
+    width: "100%",
+    height: "100%",
+    style: {
+      border: "2px solid red"
+    }
+  }, /*#__PURE__*/React.createElement(Box, {
+    textAlign: "center"
+  }, /*#__PURE__*/React.createElement(Text, {
+    variant: "sm-display",
+    color: "mono0"
+  }, /*#__PURE__*/React.createElement(Join, {
+    separator: /*#__PURE__*/React.createElement(Spacer, {
+      y: 2
+    })
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, "Some example content. Click outside to close."), /*#__PURE__*/React.createElement(Button, {
+    variant: "primaryWhite",
+    onClick: handleClose
+  }, "Or click here to close."), /*#__PURE__*/React.createElement(Input, {
+    placeholder: "Just an example for focusing"
+  }), /*#__PURE__*/React.createElement(Input, {
+    placeholder: "Just an example for focusing"
+  }), dialogChildren, deferred && /*#__PURE__*/React.createElement(Input, {
+    placeholder: "Deferred input"
+  })))))));
+};
+export default {
+  component: ModalBase,
+  title: "Components/ModalBase",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "A base modal component that handles focus management, backdrop clicks, and accessibility."
+      },
+      controls: {
+        exclude: STORYBOOK_PROPS_BLOCKLIST
+      }
+    }
+  }
+};
+export var Default = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(Example, null);
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Default ModalBase with basic functionality."
+      }
+    }
+  }
+};
+export var DeferredFocusables = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(Example, {
+      defer: true
+    });
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "ModalBase with deferred focusable elements that are added after render."
+      }
+    }
+  }
+};
+export var Fullscreen = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(Example, {
+      dialogProps: {
+        width: "100%",
+        height: "100%",
+        background: "black",
+        alignItems: "center",
+        justifyContent: "center"
+      }
+    });
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "ModalBase in fullscreen mode."
+      }
+    }
+  }
+};
+export var Scrolling = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(Example, {
+      bodyChildren: /*#__PURE__*/React.createElement(React.Fragment, null, Array.from(Array(100)).map(function (_, i) {
+        return /*#__PURE__*/React.createElement("div", {
+          key: i
+        }, "content should not scroll when modal is open");
+      })),
+      dialogChildren: /*#__PURE__*/React.createElement(React.Fragment, null, Array.from(Array(100)).map(function (_, i) {
+        return /*#__PURE__*/React.createElement("div", {
+          key: i
+        }, "content should be scrollable");
+      }))
+    });
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "ModalBase with scrollable content inside while body scroll is prevented."
+      }
+    }
+  }
+};
+//# sourceMappingURL=ModalBase.story.js.map

package/dist/esm/elements/Modal/ModalBase.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalBase.story.js","names":["React","useEffect","useState","Text","Box","Button","Input","Join","Spacer","ModalBase","STORYBOOK_PROPS_BLOCKLIST","Example","_ref","arguments","length","undefined","bodyChildren","dialogChildren","defer","rest","_objectWithoutProperties","_excluded","_useState","_useState2","_slicedToArray","open","setOpen","label","handleClose","_useState3","_useState4","deferred","setDeferred","setTimeout","createElement","Fragment","variant","onClick","_extends","onClose","background","p","width","height","style","border","textAlign","color","separator","y","placeholder","component","title","tags","parameters","docs","description","controls","exclude","Default","render","story","DeferredFocusables","Fullscreen","dialogProps","alignItems","justifyContent","Scrolling","Array","from","map","_","i","key"],"sources":["../../../../src/elements/Modal/ModalBase.story.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\"\nimport { Text } from \"../Text\"\nimport { Box } from \"../Box\"\nimport { Button } from \"../Button\"\nimport { Input } from \"../Input\"\nimport { Join } from \"../Join\"\nimport { Spacer } from \"../Spacer\"\nimport { ModalBase, ModalBaseProps } from \"./ModalBase\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nconst Example: React.FC<\n  React.PropsWithChildren<\n    ModalBaseProps & {\n      dialogChildren?: JSX.Element\n      bodyChildren?: JSX.Element\n      /** Simulates an input being added after render */\n      defer?: boolean\n    }\n  >\n> = ({ bodyChildren, dialogChildren, defer, ...rest } = {}) => {\n  const [open, setOpen] = useState(false)\n  const label = open ? \"opened\" : \"open\"\n  const handleClose = () => setOpen(false)\n\n  const [deferred, setDeferred] = useState(false)\n\n  useEffect(() => {\n    if (defer && open) {\n      setTimeout(() => {\n        setDeferred(true)\n      }, 1000)\n    }\n  }, [defer, open])\n\n  return (\n    <>\n      <Button variant=\"primaryGray\" onClick={() => setOpen(true)}>\n        {label}\n      </Button>\n\n      {bodyChildren}\n\n      {open && (\n        <ModalBase onClose={handleClose} {...rest}>\n          <Box\n            background=\"black\"\n            p={4}\n            width=\"100%\"\n            height=\"100%\"\n            style={{ border: \"2px solid red\" }}\n          >\n            <Box textAlign=\"center\">\n              <Text variant=\"sm-display\" color=\"mono0\">\n                <Join separator={<Spacer y={2} />}>\n                  <>Some example content. Click outside to close.</>\n                  <Button variant=\"primaryWhite\" onClick={handleClose}>\n                    Or click here to close.\n                  </Button>\n                  <Input placeholder=\"Just an example for focusing\" />\n                  <Input placeholder=\"Just an example for focusing\" />\n                  {dialogChildren}\n                  {deferred && <Input placeholder=\"Deferred input\" />}\n                </Join>\n              </Text>\n            </Box>\n          </Box>\n        </ModalBase>\n      )}\n    </>\n  )\n}\n\nexport default {\n  component: ModalBase,\n  title: \"Components/ModalBase\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A base modal component that handles focus management, backdrop clicks, and accessibility.\",\n      },\n      controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n    },\n  },\n}\n\nexport const Default = {\n  render: () => <Example />,\n  parameters: {\n    docs: {\n      description: {\n        story: \"Default ModalBase with basic functionality.\",\n      },\n    },\n  },\n}\n\nexport const DeferredFocusables = {\n  render: () => <Example defer />,\n  parameters: {\n    docs: {\n      description: {\n        story:\n          \"ModalBase with deferred focusable elements that are added after render.\",\n      },\n    },\n  },\n}\n\nexport const Fullscreen = {\n  render: () => (\n    <Example\n      dialogProps={{\n        width: \"100%\",\n        height: \"100%\",\n        background: \"black\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n      }}\n    />\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"ModalBase in fullscreen mode.\",\n      },\n    },\n  },\n}\n\nexport const Scrolling = {\n  render: () => (\n    <Example\n      bodyChildren={\n        <>\n          {Array.from(Array(100)).map((_, i) => (\n            <div key={i}>content should not scroll when modal is open</div>\n          ))}\n        </>\n      }\n      dialogChildren={\n        <>\n          {Array.from(Array(100)).map((_, i) => (\n            <div key={i}>content should be scrollable</div>\n          ))}\n        </>\n      }\n    />\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story:\n          \"ModalBase with scrollable content inside while body scroll is prevented.\",\n      },\n    },\n  },\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+export * from "./ModalBase";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/elements/Modal/index.tsx"],"sourcesContent":["export * from \"./ModalBase\"\n"],"mappings":"AAAA"}

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

@@ -0,0 +1,71 @@
+var _excluded = ["children", "footer", "hasLogo", "leftPanel", "onClose", "rightPanel", "title", "header", "zIndex"],
+  _excluded2 = ["width"];
+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 _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 React from "react";
+import { ModalBase } from "../Modal";
+import { ModalDialogContent } from "./ModalDialogContent";
+import { splitBoxProps } from "../Box";
+import { useDidMount } from "../../utils/useDidMount";
+import { useTheme } from "../../Theme";
+export var ModalDialog = function ModalDialog(_ref) {
+  var children = _ref.children,
+    footer = _ref.footer,
+    hasLogo = _ref.hasLogo,
+    leftPanel = _ref.leftPanel,
+    onClose = _ref.onClose,
+    rightPanel = _ref.rightPanel,
+    title = _ref.title,
+    header = _ref.header,
+    zIndex = _ref.zIndex,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var isMounted = useDidMount({
+    clearCallStack: true
+  });
+  var _splitBoxProps = splitBoxProps(rest),
+    _splitBoxProps2 = _slicedToArray(_splitBoxProps, 2),
+    _splitBoxProps2$ = _splitBoxProps2[0],
+    width = _splitBoxProps2$.width,
+    boxProps = _objectWithoutProperties(_splitBoxProps2$, _excluded2),
+    modalProps = _splitBoxProps2[1];
+  var _useTheme = useTheme(),
+    theme = _useTheme.theme;
+  return /*#__PURE__*/React.createElement(ModalBase, _extends({
+    onClose: onClose,
+    style: isMounted ? {
+      backgroundColor: theme.effects.backdrop,
+      transition: "background-color 250ms"
+    } : {
+      backgroundColor: "transparent"
+    },
+    dialogProps: {
+      width: width !== null && width !== void 0 ? width : 480
+    },
+    zIndex: zIndex
+  }, modalProps), /*#__PURE__*/React.createElement(ModalDialogContent, _extends({
+    footer: footer,
+    hasLogo: hasLogo,
+    leftPanel: leftPanel,
+    onClose: onClose,
+    rightPanel: rightPanel,
+    title: title,
+    header: header,
+    width: "100%",
+    style: isMounted ? {
+      opacity: 1,
+      transition: "opacity 250ms, transform 250ms"
+    } : {
+      opacity: 0,
+      transform: "translateY(10px)"
+    }
+  }, boxProps), children));
+};
+ModalDialog.displayName = "ModalDialog";
+//# sourceMappingURL=ModalDialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModalDialog.js","names":["React","ModalBase","ModalDialogContent","splitBoxProps","useDidMount","useTheme","ModalDialog","_ref","children","footer","hasLogo","leftPanel","onClose","rightPanel","title","header","zIndex","rest","_objectWithoutProperties","_excluded","isMounted","clearCallStack","_splitBoxProps","_splitBoxProps2","_slicedToArray","_splitBoxProps2$","width","boxProps","_excluded2","modalProps","_useTheme","theme","createElement","_extends","style","backgroundColor","effects","backdrop","transition","dialogProps","opacity","transform","displayName"],"sources":["../../../../src/elements/ModalDialog/ModalDialog.tsx"],"sourcesContent":["import React from \"react\"\nimport { ModalBase, ModalBaseProps } from \"../Modal\"\nimport {\n  ModalDialogContent,\n  ModalDialogContentProps,\n} from \"./ModalDialogContent\"\nimport { splitBoxProps } from \"../Box\"\nimport { useDidMount } from \"../../utils/useDidMount\"\nimport { useTheme } from \"../../Theme\"\n\nexport type ModalDialogProps = Omit<ModalBaseProps, \"title\"> &\n  ModalDialogContentProps & {\n    leftPanel?: React.ReactNode\n    rightPanel?: React.ReactNode\n  }\n\nexport const ModalDialog: React.FC<React.PropsWithChildren<ModalDialogProps>> = ({\n  children,\n  footer,\n  hasLogo,\n  leftPanel,\n  onClose,\n  rightPanel,\n  title,\n  header,\n  zIndex,\n  ...rest\n}) => {\n  const isMounted = useDidMount({ clearCallStack: true })\n\n  const [{ width, ...boxProps }, modalProps] = splitBoxProps(rest)\n\n  const { theme } = useTheme()\n\n  return (\n    <ModalBase\n      onClose={onClose}\n      style={\n        isMounted\n          ? {\n              backgroundColor: theme.effects.backdrop,\n              transition: \"background-color 250ms\",\n            }\n          : { backgroundColor: \"transparent\" }\n      }\n      dialogProps={{ width: width ?? 480 }}\n      zIndex={zIndex}\n      {...modalProps}\n    >\n      <ModalDialogContent\n        footer={footer}\n        hasLogo={hasLogo}\n        leftPanel={leftPanel}\n        onClose={onClose}\n        rightPanel={rightPanel}\n        title={title}\n        header={header}\n        width=\"100%\"\n        style={\n          isMounted\n            ? {\n                opacity: 1,\n                transition: \"opacity 250ms, transform 250ms\",\n              }\n            : { opacity: 0, transform: \"translateY(10px)\" }\n        }\n        {...boxProps}\n      >\n        {children}\n      </ModalDialogContent>\n    </ModalBase>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS;AAClB,SACEC,kBAAkB;AAGpB,SAASC,aAAa;AACtB,SAASC,WAAW;AACpB,SAASC,QAAQ;AAQjB,OAAO,IAAMC,WAAgE,GAAG,SAAnEA,WAAgEA,CAAAC,IAAA,EAWvE;EAAA,IAVJC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACRC,MAAM,GAAAF,IAAA,CAANE,MAAM;IACNC,OAAO,GAAAH,IAAA,CAAPG,OAAO;IACPC,SAAS,GAAAJ,IAAA,CAATI,SAAS;IACTC,OAAO,GAAAL,IAAA,CAAPK,OAAO;IACPC,UAAU,GAAAN,IAAA,CAAVM,UAAU;IACVC,KAAK,GAAAP,IAAA,CAALO,KAAK;IACLC,MAAM,GAAAR,IAAA,CAANQ,MAAM;IACNC,MAAM,GAAAT,IAAA,CAANS,MAAM;IACHC,IAAI,GAAAC,wBAAA,CAAAX,IAAA,EAAAY,SAAA;EAEP,IAAMC,SAAS,GAAGhB,WAAW,CAAC;IAAEiB,cAAc,EAAE;EAAK,CAAC,CAAC;EAEvD,IAAAC,cAAA,GAA6CnB,aAAa,CAACc,IAAI,CAAC;IAAAM,eAAA,GAAAC,cAAA,CAAAF,cAAA;IAAAG,gBAAA,GAAAF,eAAA;IAAvDG,KAAK,GAAAD,gBAAA,CAALC,KAAK;IAAKC,QAAQ,GAAAT,wBAAA,CAAAO,gBAAA,EAAAG,UAAA;IAAIC,UAAU,GAAAN,eAAA;EAEzC,IAAAO,SAAA,GAAkBzB,QAAQ,EAAE;IAApB0B,KAAK,GAAAD,SAAA,CAALC,KAAK;EAEb,oBACE/B,KAAA,CAAAgC,aAAA,CAAC/B,SAAS,EAAAgC,QAAA;IACRrB,OAAO,EAAEA,OAAQ;IACjBsB,KAAK,EACHd,SAAS,GACL;MACEe,eAAe,EAAEJ,KAAK,CAACK,OAAO,CAACC,QAAQ;MACvCC,UAAU,EAAE;IACd,CAAC,GACD;MAAEH,eAAe,EAAE;IAAc,CACtC;IACDI,WAAW,EAAE;MAAEb,KAAK,EAAEA,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI;IAAI,CAAE;IACrCV,MAAM,EAAEA;EAAO,GACXa,UAAU,gBAEd7B,KAAA,CAAAgC,aAAA,CAAC9B,kBAAkB,EAAA+B,QAAA;IACjBxB,MAAM,EAAEA,MAAO;IACfC,OAAO,EAAEA,OAAQ;IACjBC,SAAS,EAAEA,SAAU;IACrBC,OAAO,EAAEA,OAAQ;IACjBC,UAAU,EAAEA,UAAW;IACvBC,KAAK,EAAEA,KAAM;IACbC,MAAM,EAAEA,MAAO;IACfW,KAAK,EAAC,MAAM;IACZQ,KAAK,EACHd,SAAS,GACL;MACEoB,OAAO,EAAE,CAAC;MACVF,UAAU,EAAE;IACd,CAAC,GACD;MAAEE,OAAO,EAAE,CAAC;MAAEC,SAAS,EAAE;IAAmB;EACjD,GACGd,QAAQ,GAEXnB,QAAQ,CACU,CACX;AAEhB,CAAC;AAxDYF,WAAgE,CAAAoC,WAAA"}

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

@@ -0,0 +1,117 @@
+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 _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 React from "react";
+import { Text } from "../Text";
+import { Button } from "../Button";
+import { ModalDialog } from "./ModalDialog";
+import { Box } from "../Box";
+import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
+var LOREM = "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloribus sed iure repellendus animi, aliquid aut fuga maxime nemo minus quas. Error, incidunt fugit similique quidem culpa hic! Nemo, quas rerum. ";
+export default {
+  component: ModalDialog,
+  title: "Components/ModalDialog",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "A modal dialog component with customizable layout, panels, and content areas."
+      },
+      controls: {
+        exclude: STORYBOOK_PROPS_BLOCKLIST
+      }
+    }
+  }
+};
+var Template = function Template(args) {
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    open = _React$useState2[0],
+    setOpen = _React$useState2[1];
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      return setOpen(true);
+    }
+  }, "Open Modal"), open && /*#__PURE__*/React.createElement(ModalDialog, _extends({}, args, {
+    onClose: function onClose() {
+      return setOpen(false);
+    }
+  }), args.children || /*#__PURE__*/React.createElement(Text, {
+    variant: "sm"
+  }, LOREM.repeat(2))));
+};
+export var Default = {
+  args: {
+    title: "Modal Title",
+    children: /*#__PURE__*/React.createElement(Text, {
+      variant: "sm"
+    }, LOREM)
+  },
+  render: Template,
+  parameters: {
+    docs: {
+      description: {
+        story: "Default ModalDialog with title and content."
+      }
+    }
+  }
+};
+export var WithFooter = {
+  args: {
+    title: "Modal Title",
+    children: /*#__PURE__*/React.createElement(Text, {
+      variant: "sm"
+    }, LOREM),
+    footer: /*#__PURE__*/React.createElement(Button, {
+      width: "100%"
+    }, "Confirm")
+  },
+  render: Template,
+  parameters: {
+    docs: {
+      description: {
+        story: "ModalDialog with a footer button."
+      }
+    }
+  }
+};
+export var WithPanels = {
+  args: {
+    title: "With Left and Right Panels",
+    width: "100%",
+    leftPanel: /*#__PURE__*/React.createElement(Box, {
+      bg: "mono100",
+      width: 300,
+      flexShrink: 0,
+      p: 1
+    }, /*#__PURE__*/React.createElement(Text, {
+      variant: "xs",
+      color: "mono0"
+    }, "Some custom content on the left")),
+    rightPanel: /*#__PURE__*/React.createElement(Box, {
+      bg: "mono100",
+      width: 300,
+      flexShrink: 0,
+      p: 1
+    }, /*#__PURE__*/React.createElement(Text, {
+      variant: "xs",
+      color: "mono0"
+    }, "Some custom content on the right")),
+    children: /*#__PURE__*/React.createElement(Text, {
+      variant: "sm"
+    }, LOREM)
+  },
+  render: Template,
+  parameters: {
+    docs: {
+      description: {
+        story: "ModalDialog with left and right panels."
+      }
+    }
+  }
+};
+//# sourceMappingURL=ModalDialog.story.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModalDialog.story.js","names":["React","Text","Button","ModalDialog","Box","STORYBOOK_PROPS_BLOCKLIST","LOREM","component","title","tags","parameters","docs","description","controls","exclude","Template","args","_React$useState","useState","_React$useState2","_slicedToArray","open","setOpen","createElement","Fragment","onClick","_extends","onClose","children","variant","repeat","Default","render","story","WithFooter","footer","width","WithPanels","leftPanel","bg","flexShrink","p","color","rightPanel"],"sources":["../../../../src/elements/ModalDialog/ModalDialog.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { Text } from \"../Text\"\nimport { Button } from \"../Button\"\nimport { ModalDialog } from \"./ModalDialog\"\nimport { Box } from \"../Box\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nconst LOREM =\n  \"Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloribus sed iure repellendus animi, aliquid aut fuga maxime nemo minus quas. Error, incidunt fugit similique quidem culpa hic! Nemo, quas rerum. \"\n\nexport default {\n  component: ModalDialog,\n  title: \"Components/ModalDialog\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A modal dialog component with customizable layout, panels, and content areas.\",\n      },\n      controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n    },\n  },\n}\n\nconst Template = (args) => {\n  const [open, setOpen] = React.useState(false)\n  return (\n    <>\n      <Button onClick={() => setOpen(true)}>Open Modal</Button>\n      {open && (\n        <ModalDialog {...args} onClose={() => setOpen(false)}>\n          {args.children || <Text variant=\"sm\">{LOREM.repeat(2)}</Text>}\n        </ModalDialog>\n      )}\n    </>\n  )\n}\n\nexport const Default = {\n  args: {\n    title: \"Modal Title\",\n    children: <Text variant=\"sm\">{LOREM}</Text>,\n  },\n  render: Template,\n  parameters: {\n    docs: {\n      description: {\n        story: \"Default ModalDialog with title and content.\",\n      },\n    },\n  },\n}\n\nexport const WithFooter = {\n  args: {\n    title: \"Modal Title\",\n    children: <Text variant=\"sm\">{LOREM}</Text>,\n    footer: <Button width=\"100%\">Confirm</Button>,\n  },\n  render: Template,\n  parameters: {\n    docs: {\n      description: {\n        story: \"ModalDialog with a footer button.\",\n      },\n    },\n  },\n}\n\nexport const WithPanels = {\n  args: {\n    title: \"With Left and Right Panels\",\n    width: \"100%\",\n    leftPanel: (\n      <Box bg=\"mono100\" width={300} flexShrink={0} p={1}>\n        <Text variant=\"xs\" color=\"mono0\">\n          Some custom content on the left\n        </Text>\n      </Box>\n    ),\n    rightPanel: (\n      <Box bg=\"mono100\" width={300} flexShrink={0} p={1}>\n        <Text variant=\"xs\" color=\"mono0\">\n          Some custom content on the right\n        </Text>\n      </Box>\n    ),\n    children: <Text variant=\"sm\">{LOREM}</Text>,\n  },\n  render: Template,\n  parameters: {\n    docs: {\n      description: {\n        story: \"ModalDialog with left and right panels.\",\n      },\n    },\n  },\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,104 @@
+var _excluded = ["children", "footer", "hasLogo", "leftPanel", "onClose", "rightPanel", "title", "header"];
+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 _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 React, { isValidElement } from "react";
+import { Clickable } from "../Clickable";
+import { Box } from "../Box";
+import { Flex } from "../Flex";
+import { Text } from "../Text";
+import CloseIcon from "@artsy/icons/CloseIcon";
+import ArtsyLogoIcon from "@artsy/icons/ArtsyLogoIcon";
+import { useSentinelVisibility } from "../../utils/useSentinelVisibility";
+import { Spacer } from "../Spacer";
+import styled from "styled-components";
+import { themeGet } from "@styled-system/theme-get";
+import { useTheme } from "../../Theme";
+export var ModalDialogContent = function ModalDialogContent(_ref) {
+  var children = _ref.children,
+    footer = _ref.footer,
+    hasLogo = _ref.hasLogo,
+    leftPanel = _ref.leftPanel,
+    onClose = _ref.onClose,
+    rightPanel = _ref.rightPanel,
+    title = _ref.title,
+    header = _ref.header,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useSentinelVisibilit = useSentinelVisibility(),
+    topSentinel = _useSentinelVisibilit.sentinel,
+    isAtTop = _useSentinelVisibilit.isSentinelVisible;
+  var _useSentinelVisibilit2 = useSentinelVisibility(),
+    bottomSentinel = _useSentinelVisibilit2.sentinel,
+    isAtBottom = _useSentinelVisibilit2.isSentinelVisible;
+  var _useTheme = useTheme(),
+    theme = _useTheme.theme;
+  return /*#__PURE__*/React.createElement(Flex, _extends({
+    bg: "mono0",
+    m: 2,
+    style: {
+      boxShadow: theme.effects.dropShadow
+    }
+  }, rest), leftPanel, /*#__PURE__*/React.createElement(Flex, {
+    flexDirection: "column",
+    overflow: "hidden",
+    width: "100%"
+  }, /*#__PURE__*/React.createElement(Flex, {
+    flexDirection: "column",
+    zIndex: 1,
+    style: {
+      transition: "box-shadow 250ms",
+      boxShadow: isAtTop ? theme.effects.dropShadow : undefined
+    }
+  }, /*#__PURE__*/isValidElement(title) ? title : /*#__PURE__*/React.createElement(Flex, {
+    alignItems: "flex-start",
+    justifyContent: "space-between"
+  }, (title || hasLogo) && /*#__PURE__*/React.createElement(Box, {
+    m: 2
+  }, hasLogo && /*#__PURE__*/React.createElement(ArtsyLogoIcon, {
+    display: "block",
+    width: 75,
+    height: 26
+  }), hasLogo && title && /*#__PURE__*/React.createElement(Spacer, {
+    y: 2
+  }), title && /*#__PURE__*/React.createElement(Text, {
+    variant: "lg-display",
+    lineClamp: 6,
+    hyphenate: true
+  }, title)), /*#__PURE__*/React.createElement(ModalClose, {
+    onClick: onClose
+  })), header && /*#__PURE__*/React.createElement(Box, {
+    px: 2,
+    pb: 2
+  }, header)), /*#__PURE__*/React.createElement(Box, {
+    px: 2,
+    pb: 2,
+    flex: 1,
+    overflow: "auto",
+    style: {
+      WebkitOverflowScrolling: "touch"
+    }
+  }, topSentinel, children, bottomSentinel), footer && /*#__PURE__*/React.createElement(Box, {
+    p: 2,
+    style: {
+      transition: "box-shadow 250ms",
+      boxShadow: isAtBottom ? theme.effects.dropShadow : undefined
+    }
+  }, footer)), rightPanel);
+};
+ModalDialogContent.displayName = "ModalDialogContent";
+export var ModalClose = function ModalClose(props) {
+  return /*#__PURE__*/React.createElement(Close, _extends({
+    p: 2,
+    ml: "auto",
+    "aria-label": "Close"
+  }, props), /*#__PURE__*/React.createElement(CloseIcon, {
+    fill: "currentColor",
+    display: "block"
+  }));
+};
+ModalClose.displayName = "ModalClose";
+var Close = styled(Clickable).withConfig({
+  displayName: "ModalDialogContent__Close",
+  componentId: "sc-ow6myz-0"
+})(["color:", ";&:focus,&:focus-visible{outline:none;color:", ";}"], themeGet("colors.mono100"), themeGet("colors.mono60"));
+//# sourceMappingURL=ModalDialogContent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModalDialogContent.js","names":["React","isValidElement","Clickable","Box","Flex","Text","CloseIcon","ArtsyLogoIcon","useSentinelVisibility","Spacer","styled","themeGet","useTheme","ModalDialogContent","_ref","children","footer","hasLogo","leftPanel","onClose","rightPanel","title","header","rest","_objectWithoutProperties","_excluded","_useSentinelVisibilit","topSentinel","sentinel","isAtTop","isSentinelVisible","_useSentinelVisibilit2","bottomSentinel","isAtBottom","_useTheme","theme","createElement","_extends","bg","m","style","boxShadow","effects","dropShadow","flexDirection","overflow","width","zIndex","transition","undefined","alignItems","justifyContent","display","height","y","variant","lineClamp","hyphenate","ModalClose","onClick","px","pb","flex","WebkitOverflowScrolling","p","displayName","props","Close","ml","fill","withConfig","componentId"],"sources":["../../../../src/elements/ModalDialog/ModalDialogContent.tsx"],"sourcesContent":["import React, { FC, isValidElement } from \"react\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Flex } from \"../Flex\"\nimport { Text } from \"../Text\"\nimport CloseIcon from \"@artsy/icons/CloseIcon\"\nimport ArtsyLogoIcon from \"@artsy/icons/ArtsyLogoIcon\"\nimport { useSentinelVisibility } from \"../../utils/useSentinelVisibility\"\nimport { Spacer } from \"../Spacer\"\nimport styled from \"styled-components\"\nimport { themeGet } from \"@styled-system/theme-get\"\nimport { useTheme } from \"../../Theme\"\n\nexport interface ModalDialogContentProps\n  extends BoxProps,\n    Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  children: React.ReactNode\n  footer?: React.ReactNode\n  hasLogo?: boolean\n  leftPanel?: React.ReactNode\n  onClose: () => void\n  rightPanel?: React.ReactNode\n  title?: React.ReactNode\n  header?: React.ReactNode\n}\n\nexport const ModalDialogContent: React.FC<\n  React.PropsWithChildren<ModalDialogContentProps>\n> = ({\n  children,\n  footer,\n  hasLogo,\n  leftPanel,\n  onClose,\n  rightPanel,\n  title,\n  header,\n  ...rest\n}) => {\n  const {\n    sentinel: topSentinel,\n    isSentinelVisible: isAtTop,\n  } = useSentinelVisibility()\n\n  const {\n    sentinel: bottomSentinel,\n    isSentinelVisible: isAtBottom,\n  } = useSentinelVisibility()\n\n  const { theme } = useTheme()\n\n  return (\n    <Flex\n      bg=\"mono0\"\n      m={2}\n      style={{ boxShadow: theme.effects.dropShadow }}\n      {...rest}\n    >\n      {leftPanel}\n\n      <Flex flexDirection=\"column\" overflow=\"hidden\" width=\"100%\">\n        <Flex\n          flexDirection=\"column\"\n          zIndex={1}\n          style={{\n            transition: \"box-shadow 250ms\",\n            boxShadow: isAtTop ? theme.effects.dropShadow : undefined,\n          }}\n        >\n          {isValidElement(title) ? (\n            title\n          ) : (\n            <Flex alignItems=\"flex-start\" justifyContent=\"space-between\">\n              {(title || hasLogo) && (\n                <Box m={2}>\n                  {hasLogo && (\n                    <ArtsyLogoIcon display=\"block\" width={75} height={26} />\n                  )}\n\n                  {hasLogo && title && <Spacer y={2} />}\n\n                  {title && (\n                    <Text variant=\"lg-display\" lineClamp={6} hyphenate>\n                      {title}\n                    </Text>\n                  )}\n                </Box>\n              )}\n\n              <ModalClose onClick={onClose} />\n            </Flex>\n          )}\n\n          {header && (\n            <Box px={2} pb={2}>\n              {header}\n            </Box>\n          )}\n        </Flex>\n\n        <Box\n          px={2}\n          pb={2}\n          flex={1}\n          overflow=\"auto\"\n          style={{ WebkitOverflowScrolling: \"touch\" }}\n        >\n          {topSentinel}\n          {children}\n          {bottomSentinel}\n        </Box>\n\n        {footer && (\n          <Box\n            p={2}\n            style={{\n              transition: \"box-shadow 250ms\",\n              boxShadow: isAtBottom ? theme.effects.dropShadow : undefined,\n            }}\n          >\n            {footer}\n          </Box>\n        )}\n      </Flex>\n\n      {rightPanel}\n    </Flex>\n  )\n}\n\nexport type ModalCloseProps = ClickableProps\n\nexport const ModalClose: FC<React.PropsWithChildren<ModalCloseProps>> = (\n  props\n) => {\n  return (\n    <Close p={2} ml=\"auto\" aria-label=\"Close\" {...props}>\n      <CloseIcon fill=\"currentColor\" display=\"block\" />\n    </Close>\n  )\n}\n\nconst Close = styled(Clickable)`\n  color: ${themeGet(\"colors.mono100\")};\n\n  &:focus,\n  &:focus-visible {\n    outline: none;\n    color: ${themeGet(\"colors.mono60\")};\n  }\n`\n"],"mappings":"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"}