@activecollab/components 2.0.444 → 2.0.446

package/dist/esm/components/Menu/Menu.js

@@ -46,6 +46,16 @@ export const Menu = _ref => {
     setChildNode = _useState3[1];
   const elementRef = useRef(null);
   const isOpenAtLeastOnce = useRef(false);
+  const wasOpen = useRef(open);
+  const focusBeforeOpen = useRef(null);
+  const returnFocusTo = useRef(null);
+  const popperRef = useRef(null);
+
+  // Read on the render that opens the menu, before the focus lock moves the focus inside it.
+  if (open && !wasOpen.current && typeof document !== "undefined") {
+    focusBeforeOpen.current = document.activeElement;
+  }
+  wasOpen.current = open;
   useEffect(() => {
     setOpen(defaultOpen);
   }, [defaultOpen]);
@@ -83,17 +93,39 @@ export const Menu = _ref => {
     if (open) {
       isOpenAtLeastOnce.current = true;
     } else if (!open && isOpenAtLeastOnce.current) {
-      var _elementRef$current;
-      (_elementRef$current = elementRef.current) == null || _elementRef$current.focus();
+      const previous = focusBeforeOpen.current;
+      const returnTo = previous instanceof HTMLElement && previous.isConnected ? previous : elementRef.current;
+      returnFocusTo.current = returnTo;
+      returnTo == null || returnTo.focus();
       isOpenAtLeastOnce.current = false;
     }
   }, [open]);
+
+  // A fading menu is already closed. Its content can still reach for the focus, and would take it away
+  // with it when it unmounts, so the focus goes straight back to where the menu returned it.
+  useEffect(() => {
+    if (open || exited) {
+      return undefined;
+    }
+    const keepFocusOut = event => {
+      var _popperRef$current;
+      if ((_popperRef$current = popperRef.current) != null && _popperRef$current.contains(event.target)) {
+        var _returnFocusTo$curren;
+        (_returnFocusTo$curren = returnFocusTo.current) == null || _returnFocusTo$curren.focus();
+      }
+    };
+    document.addEventListener("focusin", keepFocusOut, true);
+    return () => document.removeEventListener("focusin", keepFocusOut, true);
+  }, [open, exited]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, target && /*#__PURE__*/React.cloneElement(target, targetProps), open || !exited ? /*#__PURE__*/React.createElement(Window, {
     onClose: handleClose,
     disableScrollLock: !handleScroll
-    // A closing menu hands the focus back at once, it does not hold it for the length of the fade.
+    // The menu returns the focus itself at once, so a late returnFocus cannot undo a caller's move.
+    ,
+    disableFocusLock: disableFocusLock || !open
+    // A fading menu is already closed, so an escape pressed meanwhile belongs to the page behind it.
     ,
-    disableFocusLock: disableFocusLock || !open,
+    disableCloseOnEsc: !open,
     style: {
       position: windowAbsolutelyPositioned ? "absolute" : "fixed"
     }
@@ -103,6 +135,7 @@ export const Menu = _ref => {
     tabIndex: -1,
     disableBackgroundColor: true
   }) : null, /*#__PURE__*/React.createElement(Popper, {
+    ref: popperRef,
     anchorEl: childNode,
     open: childNode ? open : false,
     placement: position,
@@ -124,7 +157,10 @@ export const Menu = _ref => {
     }, /*#__PURE__*/React.createElement(StyledMenu, {
       className: classnames("c-simple-menu__paper", "c-simple-menu__" + mode, menuClassName, className),
       $mode: mode,
-      onMouseDown: onMenuClick
+      onMouseDown: onMenuClick,
+      style: open ? undefined : {
+        pointerEvents: "none"
+      }
     }, /*#__PURE__*/React.createElement(MenuContextProvider, {
       value: {
         open,

package/dist/esm/components/Menu/Menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.js","names":["React","useRef","useState","useCallback","useEffect","classnames","MenuContextProvider","StyledMenu","useForkRef","Overlay","Popper","Grow","Window","Menu","_ref","children","_ref$disableFocusLock","disableFocusLock","onMenuClick","_ref$handleScroll","handleScroll","_ref$mode","mode","_ref$open","open","defaultOpen","onOpen","onClose","onBeforeClose","_ref$position","position","target","className","menuClassName","popperClassName","backgroundElementClass","_ref$windowAbsolutely","windowAbsolutelyPositioned","onPopperOpen","_useState","setOpen","_useState2","exited","setExited","_useState3","childNode","setChildNode","elementRef","isOpenAtLeastOnce","handleRefRef","ref","undefined","handleRef","handleOpen","event","_target$props","preventDefault","stopPropagation","props","onClick","handleClose","childProps","forceClose","targetProps","current","_elementRef$current","focus","createElement","Fragment","cloneElement","disableScrollLock","style","tabIndex","disableBackgroundColor","anchorEl","placement","afterWrite","transition","_ref2","transitionProps","in","onEnter","onExited","$mode","onMouseDown","value","displayName"],"sources":["../../../../src/components/Menu/Menu.tsx"],"sourcesContent":["import React, {\n  useRef,\n  FC,\n  ReactNode,\n  MouseEvent,\n  useState,\n  useCallback,\n  useEffect,\n  ReactElement,\n  Ref,\n} from \"react\";\n\nimport { Placement } from \"@popperjs/core\";\nimport classnames from \"classnames\";\n\nimport { MenuContextProvider } from \"./context\";\nimport { StyledMenu } from \"./Styles\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { Overlay } from \"../Overlay\";\nimport { Popper } from \"../Popper\";\nimport { Grow } from \"../Transitions\";\nimport { Window } from \"../Window\";\n\ninterface ElementWithRef<T> extends ReactElement {\n  ref?: Ref<T>;\n}\n\n// source: https://twitter.com/mattpocockuk/status/1671908303918473217/photo/1\n// eslint-disable-next-line @typescript-eslint/ban-types\nexport type MenuMode = \"normal\" | \"wider\" | \"tiny\" | \"widest\";\n\nexport interface IMenu {\n  /** Menu content */\n  children:\n    | ReactNode\n    | ((childProps: { forceClose: () => void }) => JSX.Element);\n  /** On menu element click */\n  onMenuClick?: (event: MouseEvent<HTMLElement>) => void;\n  /** Handle scroll bar */\n  handleScroll?: boolean;\n  /** Disable Focus Lock */\n  disableFocusLock?: boolean;\n  /** Menu width mode */\n  mode?: MenuMode;\n  /** Should menu be open when it's mounted */\n  open?: boolean;\n  /** Callback triggered when modal has been opened */\n  onOpen?: () => void;\n  /** Callback triggered when modal has been closed */\n  onClose?: () => void;\n  /** Before close callback */\n  onBeforeClose?: () => boolean;\n  /** Position Menu */\n  position?: Placement;\n  /** Target element */\n  target?: ElementWithRef<Element>;\n  className?: string;\n  /** Menu classes */\n  menuClassName?: string;\n  /** Popper class name*/\n  popperClassName?: string;\n  /** Background style for clickable element after the menu is open (opacity, color, etc...) */\n  backgroundElementClass?: string;\n  /** Should Window be positioned absolutely */\n  windowAbsolutelyPositioned?: boolean;\n  /** Popper on open */\n  onPopperOpen?: (...args) => void;\n}\n\nexport const Menu: FC<IMenu> = ({\n  children,\n  disableFocusLock = false,\n  onMenuClick,\n  handleScroll = true,\n  mode = \"normal\",\n  open: defaultOpen = false,\n  onOpen,\n  onClose,\n  onBeforeClose,\n  position = \"bottom-start\",\n  target,\n  className,\n  menuClassName,\n  popperClassName,\n  backgroundElementClass,\n  windowAbsolutelyPositioned = false,\n  onPopperOpen,\n}) => {\n  const [open, setOpen] = useState(defaultOpen);\n  const [exited, setExited] = useState(!defaultOpen);\n  const [childNode, setChildNode] = useState<Element | null>();\n  const elementRef = useRef<HTMLElement | null>(null);\n  const isOpenAtLeastOnce = useRef(false);\n\n  useEffect(() => {\n    setOpen(defaultOpen);\n  }, [defaultOpen]);\n\n  useEffect(() => {\n    if (open) {\n      setExited(false);\n    }\n  }, [open]);\n\n  const handleRefRef = useForkRef(\n    target ? target.ref : undefined,\n    setChildNode\n  );\n  const handleRef = useForkRef(handleRefRef, elementRef);\n\n  const handleOpen = useCallback(\n    (\n      event: Pick<MouseEvent<Element>, \"preventDefault\" | \"stopPropagation\">\n    ) => {\n      event?.preventDefault();\n      event?.stopPropagation();\n      setOpen(true);\n      typeof onOpen === \"function\" && onOpen();\n      typeof target?.props?.onClick === \"function\" &&\n        target.props.onClick(event);\n    },\n    [onOpen, target?.props]\n  );\n\n  const handleClose = useCallback(() => {\n    if (typeof onBeforeClose === \"function\" && !onBeforeClose()) {\n      return;\n    }\n    setOpen(false);\n    typeof onClose === \"function\" && onClose();\n  }, [onClose, onBeforeClose]);\n\n  const childProps = {\n    forceClose: handleClose,\n  };\n\n  const targetProps = {\n    open,\n    ref: handleRef,\n    onClick: handleOpen,\n  };\n\n  useEffect(() => {\n    if (open) {\n      isOpenAtLeastOnce.current = true;\n    } else if (!open && isOpenAtLeastOnce.current) {\n      elementRef.current?.focus();\n      isOpenAtLeastOnce.current = false;\n    }\n  }, [open]);\n\n  return (\n    <>\n      {target && React.cloneElement(target, targetProps)}\n      {open || !exited ? (\n        <Window\n          onClose={handleClose}\n          disableScrollLock={!handleScroll}\n          // A closing menu hands the focus back at once, it does not hold it for the length of the fade.\n          disableFocusLock={disableFocusLock || !open}\n          style={{\n            position: windowAbsolutelyPositioned ? \"absolute\" : \"fixed\",\n          }}\n        >\n          {/* A closing menu must not swallow the click that lands while it fades out. */}\n          {open ? (\n            <Overlay\n              className={backgroundElementClass}\n              onClick={handleClose}\n              tabIndex={-1}\n              disableBackgroundColor\n            />\n          ) : null}\n          <Popper\n            anchorEl={childNode}\n            open={childNode ? open : false}\n            placement={position}\n            className={popperClassName}\n            tabIndex={-1}\n            afterWrite={onPopperOpen}\n            transition\n          >\n            {({ placement, transitionProps }) => (\n              <Grow\n                placement={placement}\n                in={transitionProps?.in}\n                onEnter={transitionProps?.onEnter}\n                onExited={() => {\n                  setExited(true);\n                  transitionProps?.onExited?.();\n                }}\n              >\n                <StyledMenu\n                  className={classnames(\n                    \"c-simple-menu__paper\",\n                    `c-simple-menu__${mode}`,\n                    menuClassName,\n                    className\n                  )}\n                  $mode={mode}\n                  onMouseDown={onMenuClick}\n                >\n                  <MenuContextProvider value={{ open, setOpen }}>\n                    {typeof children === \"function\"\n                      ? children(childProps)\n                      : children}\n                  </MenuContextProvider>\n                </StyledMenu>\n              </Grow>\n            )}\n          </Popper>\n        </Window>\n      ) : null}\n    </>\n  );\n};\n\nMenu.displayName = \"Menu\";\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Menu.js","names":["React","useRef","useState","useCallback","useEffect","classnames","MenuContextProvider","StyledMenu","useForkRef","Overlay","Popper","Grow","Window","Menu","_ref","children","_ref$disableFocusLock","disableFocusLock","onMenuClick","_ref$handleScroll","handleScroll","_ref$mode","mode","_ref$open","open","defaultOpen","onOpen","onClose","onBeforeClose","_ref$position","position","target","className","menuClassName","popperClassName","backgroundElementClass","_ref$windowAbsolutely","windowAbsolutelyPositioned","onPopperOpen","_useState","setOpen","_useState2","exited","setExited","_useState3","childNode","setChildNode","elementRef","isOpenAtLeastOnce","wasOpen","focusBeforeOpen","returnFocusTo","popperRef","current","document","activeElement","handleRefRef","ref","undefined","handleRef","handleOpen","event","_target$props","preventDefault","stopPropagation","props","onClick","handleClose","childProps","forceClose","targetProps","previous","returnTo","HTMLElement","isConnected","focus","keepFocusOut","_popperRef$current","contains","_returnFocusTo$curren","addEventListener","removeEventListener","createElement","Fragment","cloneElement","disableScrollLock","disableCloseOnEsc","style","tabIndex","disableBackgroundColor","anchorEl","placement","afterWrite","transition","_ref2","transitionProps","in","onEnter","onExited","$mode","onMouseDown","pointerEvents","value","displayName"],"sources":["../../../../src/components/Menu/Menu.tsx"],"sourcesContent":["import React, {\n  useRef,\n  FC,\n  ReactNode,\n  MouseEvent,\n  useState,\n  useCallback,\n  useEffect,\n  ReactElement,\n  Ref,\n} from \"react\";\n\nimport { Placement } from \"@popperjs/core\";\nimport classnames from \"classnames\";\n\nimport { MenuContextProvider } from \"./context\";\nimport { StyledMenu } from \"./Styles\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { Overlay } from \"../Overlay\";\nimport { Popper } from \"../Popper\";\nimport { Grow } from \"../Transitions\";\nimport { Window } from \"../Window\";\n\ninterface ElementWithRef<T> extends ReactElement {\n  ref?: Ref<T>;\n}\n\n// source: https://twitter.com/mattpocockuk/status/1671908303918473217/photo/1\n// eslint-disable-next-line @typescript-eslint/ban-types\nexport type MenuMode = \"normal\" | \"wider\" | \"tiny\" | \"widest\";\n\nexport interface IMenu {\n  /** Menu content */\n  children:\n    | ReactNode\n    | ((childProps: { forceClose: () => void }) => JSX.Element);\n  /** On menu element click */\n  onMenuClick?: (event: MouseEvent<HTMLElement>) => void;\n  /** Handle scroll bar */\n  handleScroll?: boolean;\n  /** Disable Focus Lock */\n  disableFocusLock?: boolean;\n  /** Menu width mode */\n  mode?: MenuMode;\n  /** Should menu be open when it's mounted */\n  open?: boolean;\n  /** Callback triggered when modal has been opened */\n  onOpen?: () => void;\n  /** Callback triggered when modal has been closed */\n  onClose?: () => void;\n  /** Before close callback */\n  onBeforeClose?: () => boolean;\n  /** Position Menu */\n  position?: Placement;\n  /** Target element */\n  target?: ElementWithRef<Element>;\n  className?: string;\n  /** Menu classes */\n  menuClassName?: string;\n  /** Popper class name*/\n  popperClassName?: string;\n  /** Background style for clickable element after the menu is open (opacity, color, etc...) */\n  backgroundElementClass?: string;\n  /** Should Window be positioned absolutely */\n  windowAbsolutelyPositioned?: boolean;\n  /** Popper on open */\n  onPopperOpen?: (...args) => void;\n}\n\nexport const Menu: FC<IMenu> = ({\n  children,\n  disableFocusLock = false,\n  onMenuClick,\n  handleScroll = true,\n  mode = \"normal\",\n  open: defaultOpen = false,\n  onOpen,\n  onClose,\n  onBeforeClose,\n  position = \"bottom-start\",\n  target,\n  className,\n  menuClassName,\n  popperClassName,\n  backgroundElementClass,\n  windowAbsolutelyPositioned = false,\n  onPopperOpen,\n}) => {\n  const [open, setOpen] = useState(defaultOpen);\n  const [exited, setExited] = useState(!defaultOpen);\n  const [childNode, setChildNode] = useState<Element | null>();\n  const elementRef = useRef<HTMLElement | null>(null);\n  const isOpenAtLeastOnce = useRef(false);\n  const wasOpen = useRef(open);\n  const focusBeforeOpen = useRef<Element | null>(null);\n  const returnFocusTo = useRef<HTMLElement | null>(null);\n  const popperRef = useRef<HTMLDivElement | null>(null);\n\n  // Read on the render that opens the menu, before the focus lock moves the focus inside it.\n  if (open && !wasOpen.current && typeof document !== \"undefined\") {\n    focusBeforeOpen.current = document.activeElement;\n  }\n  wasOpen.current = open;\n\n  useEffect(() => {\n    setOpen(defaultOpen);\n  }, [defaultOpen]);\n\n  useEffect(() => {\n    if (open) {\n      setExited(false);\n    }\n  }, [open]);\n\n  const handleRefRef = useForkRef(\n    target ? target.ref : undefined,\n    setChildNode\n  );\n  const handleRef = useForkRef(handleRefRef, elementRef);\n\n  const handleOpen = useCallback(\n    (\n      event: Pick<MouseEvent<Element>, \"preventDefault\" | \"stopPropagation\">\n    ) => {\n      event?.preventDefault();\n      event?.stopPropagation();\n      setOpen(true);\n      typeof onOpen === \"function\" && onOpen();\n      typeof target?.props?.onClick === \"function\" &&\n        target.props.onClick(event);\n    },\n    [onOpen, target?.props]\n  );\n\n  const handleClose = useCallback(() => {\n    if (typeof onBeforeClose === \"function\" && !onBeforeClose()) {\n      return;\n    }\n    setOpen(false);\n    typeof onClose === \"function\" && onClose();\n  }, [onClose, onBeforeClose]);\n\n  const childProps = {\n    forceClose: handleClose,\n  };\n\n  const targetProps = {\n    open,\n    ref: handleRef,\n    onClick: handleOpen,\n  };\n\n  useEffect(() => {\n    if (open) {\n      isOpenAtLeastOnce.current = true;\n    } else if (!open && isOpenAtLeastOnce.current) {\n      const previous = focusBeforeOpen.current;\n      const returnTo =\n        previous instanceof HTMLElement && previous.isConnected\n          ? previous\n          : elementRef.current;\n\n      returnFocusTo.current = returnTo;\n      returnTo?.focus();\n      isOpenAtLeastOnce.current = false;\n    }\n  }, [open]);\n\n  // A fading menu is already closed. Its content can still reach for the focus, and would take it away\n  // with it when it unmounts, so the focus goes straight back to where the menu returned it.\n  useEffect(() => {\n    if (open || exited) {\n      return undefined;\n    }\n\n    const keepFocusOut = (event: FocusEvent) => {\n      if (popperRef.current?.contains(event.target as Node)) {\n        returnFocusTo.current?.focus();\n      }\n    };\n\n    document.addEventListener(\"focusin\", keepFocusOut, true);\n\n    return () => document.removeEventListener(\"focusin\", keepFocusOut, true);\n  }, [open, exited]);\n\n  return (\n    <>\n      {target && React.cloneElement(target, targetProps)}\n      {open || !exited ? (\n        <Window\n          onClose={handleClose}\n          disableScrollLock={!handleScroll}\n          // The menu returns the focus itself at once, so a late returnFocus cannot undo a caller's move.\n          disableFocusLock={disableFocusLock || !open}\n          // A fading menu is already closed, so an escape pressed meanwhile belongs to the page behind it.\n          disableCloseOnEsc={!open}\n          style={{\n            position: windowAbsolutelyPositioned ? \"absolute\" : \"fixed\",\n          }}\n        >\n          {/* A closing menu must not swallow the click that lands while it fades out. */}\n          {open ? (\n            <Overlay\n              className={backgroundElementClass}\n              onClick={handleClose}\n              tabIndex={-1}\n              disableBackgroundColor\n            />\n          ) : null}\n          <Popper\n            ref={popperRef}\n            anchorEl={childNode}\n            open={childNode ? open : false}\n            placement={position}\n            className={popperClassName}\n            tabIndex={-1}\n            afterWrite={onPopperOpen}\n            transition\n          >\n            {({ placement, transitionProps }) => (\n              <Grow\n                placement={placement}\n                in={transitionProps?.in}\n                onEnter={transitionProps?.onEnter}\n                onExited={() => {\n                  setExited(true);\n                  transitionProps?.onExited?.();\n                }}\n              >\n                <StyledMenu\n                  className={classnames(\n                    \"c-simple-menu__paper\",\n                    `c-simple-menu__${mode}`,\n                    menuClassName,\n                    className\n                  )}\n                  $mode={mode}\n                  onMouseDown={onMenuClick}\n                  style={open ? undefined : { pointerEvents: \"none\" }}\n                >\n                  <MenuContextProvider value={{ open, setOpen }}>\n                    {typeof children === \"function\"\n                      ? children(childProps)\n                      : children}\n                  </MenuContextProvider>\n                </StyledMenu>\n              </Grow>\n            )}\n          </Popper>\n        </Window>\n      ) : null}\n    </>\n  );\n};\n\nMenu.displayName = \"Menu\";\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/components/Sheet/Sheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Sheet.d.ts","sourceRoot":"","sources":["../../../../src/components/Sheet/Sheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAMZ,aAAa,EAGd,MAAM,OAAO,CAAC;AAoBf,UAAU,YAAY;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,UAAU,MAAM;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,YAAY,EAAE,CAAC;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAChD,QAAQ,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IACvC,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAID,eAAO,MAAM,KAAK,oHAgKjB,CAAC"}
+{"version":3,"file":"Sheet.d.ts","sourceRoot":"","sources":["../../../../src/components/Sheet/Sheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAMZ,aAAa,EAGd,MAAM,OAAO,CAAC;AAuBf,UAAU,YAAY;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,UAAU,MAAM;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,YAAY,EAAE,CAAC;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAChD,QAAQ,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IACvC,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAID,eAAO,MAAM,KAAK,oHAiKjB,CAAC"}

package/dist/esm/components/Sheet/Sheet.js

@@ -3,10 +3,11 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["children", "onClose", "controls", "open", "animation", "position", "mode", "disableFocusLock", "disableScrollLock", "disableBackgroundColor", "bodyStyle", "bodyClassName", "disableBackgroundClick"];
 import React, { useCallback, useEffect, forwardRef, useState, useImperativeHandle } from "react";
 import classnames from "classnames";
-import { StyledAnimatedSpan, StyledCssTransition, StyledHeader, StyledIconsWrapperSmall, StyledListSeparator, StyledSheetIcons, StyledSheetWrapper, StyledSheetSurface, StyledSheetWrapperPaper } from "./Styles";
+import { StyledAnimatedSpan, StyledCssTransition, StyledHeader, StyledIconsWrapperSmall, StyledListSeparator, StyledSheetIcons, StyledSheetWrapper, SHEET_ENTER_MS, SHEET_EXIT_MS, StyledSheetSurface, StyledSheetWrapperPaper } from "./Styles";
 import { IconButton } from "../IconButton";
 import { Overlay } from "../Overlay";
 import { Tooltip } from "../Tooltip";
+import { Fade } from "../Transitions";
 import { Window } from "../Window";
 export const Sheet = /*#__PURE__*/forwardRef((_ref, ref) => {
   let children = _ref.children,
@@ -67,10 +68,16 @@ export const Sheet = /*#__PURE__*/forwardRef((_ref, ref) => {
     onClose: handleClose,
     disableFocusLock: disableFocusLock,
     disableScrollLock: disableScrollLock
-  }), open && /*#__PURE__*/React.createElement(Overlay, {
+  }), /*#__PURE__*/React.createElement(Fade, {
+    in: open,
+    timeout: open ? SHEET_ENTER_MS : SHEET_EXIT_MS
+  }, /*#__PURE__*/React.createElement(Overlay, {
     onClick: handleBackgroundClick,
-    disableBackgroundColor: disableBackgroundColor
-  }), /*#__PURE__*/React.createElement(StyledSheetWrapper, {
+    disableBackgroundColor: disableBackgroundColor,
+    style: {
+      pointerEvents: open ? undefined : "none"
+    }
+  })), /*#__PURE__*/React.createElement(StyledSheetWrapper, {
     className: classnames("c-sheet__wrapper", bodyClassName),
     style: bodyStyle,
     $position: position,
@@ -78,7 +85,7 @@ export const Sheet = /*#__PURE__*/forwardRef((_ref, ref) => {
   }, /*#__PURE__*/React.createElement(StyledCssTransition, {
     appear: true,
     in: open,
-    timeout: 400,
+    timeout: SHEET_ENTER_MS,
     classNames: "c-sheet__animation",
     $direction: animation,
     onEnter: handleEnter,

package/dist/esm/components/Sheet/Sheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sheet.js","names":["React","useCallback","useEffect","forwardRef","useState","useImperativeHandle","classnames","StyledAnimatedSpan","StyledCssTransition","StyledHeader","StyledIconsWrapperSmall","StyledListSeparator","StyledSheetIcons","StyledSheetWrapper","StyledSheetSurface","StyledSheetWrapperPaper","IconButton","Overlay","Tooltip","Window","Sheet","_ref","ref","children","onClose","_ref$controls","controls","_ref$open","open","defaultOpen","_ref$animation","animation","_ref$position","position","_ref$mode","mode","_ref$disableFocusLock","disableFocusLock","_ref$disableScrollLoc","disableScrollLock","_ref$disableBackgroun","disableBackgroundColor","bodyStyle","bodyClassName","_ref$disableBackgroun2","disableBackgroundClick","rest","_objectWithoutPropertiesLoose","_excluded","_useState","setOpen","_useState2","exited","setExited","handleEnter","handleExited","handleClose","handleBackgroundClick","event","preventDefault","close","createElement","_extends","onClick","className","style","$position","$mode","appear","in","timeout","classNames","$direction","onEnter","onExited","length","map","_ref2","index","IconComponent","icon","tooltip","disabled","title","disable","key","$disabled","paperClass","_ref3","variant","displayName"],"sources":["../../../../src/components/Sheet/Sheet.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  forwardRef,\n  HTMLAttributes,\n  useState,\n  CSSProperties,\n  MouseEvent,\n  useImperativeHandle,\n} from \"react\";\n\nimport classnames from \"classnames\";\n\nimport {\n  StyledAnimatedSpan,\n  StyledCssTransition,\n  StyledHeader,\n  StyledIconsWrapperSmall,\n  StyledListSeparator,\n  StyledSheetIcons,\n  StyledSheetWrapper,\n  StyledSheetSurface,\n  StyledSheetWrapperPaper,\n} from \"./Styles\";\nimport { IconButton } from \"../IconButton\";\nimport { Overlay } from \"../Overlay\";\nimport { Tooltip } from \"../Tooltip\";\nimport { Window } from \"../Window\";\n\ninterface ControlProps {\n  onClick: () => void;\n  icon: React.ReactElement;\n  tooltip: string;\n  disabled: boolean;\n  className: string;\n}\n\ninterface ISheet {\n  onClose?: () => void;\n  controls?: ControlProps[];\n  open?: boolean;\n  animation?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  position?: \"center\" | \"left\" | \"right\";\n  mode?: \"normal\" | \"stretch\";\n  disableFocusLock?: boolean;\n  disableScrollLock?: boolean;\n  disableBackgroundColor?: boolean;\n  bodyStyle?: CSSProperties;\n  bodyClassName?: string;\n  disableBackgroundClick?: boolean;\n}\n\nexport interface SheetMethods {\n  close: () => void;\n}\n\ntype SheetProps = ISheet & HTMLAttributes<HTMLDivElement>;\n\nexport const Sheet = forwardRef<SheetMethods, SheetProps>(\n  (\n    {\n      children,\n      onClose,\n      controls = [],\n      open: defaultOpen = false,\n      animation = \"top\",\n      position = \"center\",\n      mode = \"normal\",\n      disableFocusLock = false,\n      disableScrollLock = false,\n      disableBackgroundColor = false,\n      bodyStyle,\n      bodyClassName,\n      disableBackgroundClick = false,\n      ...rest\n    },\n    ref\n  ) => {\n    const [open, setOpen] = useState(defaultOpen);\n    const [exited, setExited] = useState(true);\n\n    useEffect(() => {\n      setOpen(defaultOpen);\n    }, [defaultOpen]);\n\n    const handleEnter = useCallback(() => {\n      setExited(false);\n    }, []);\n\n    const handleExited = useCallback(() => {\n      setExited(true);\n      onClose?.();\n    }, [onClose]);\n\n    const handleClose = useCallback(() => {\n      setOpen(false);\n    }, []);\n\n    const handleBackgroundClick = useCallback(\n      (event: MouseEvent<HTMLDivElement>) => {\n        if (!disableBackgroundClick) {\n          event.preventDefault();\n          handleClose();\n        }\n      },\n      [disableBackgroundClick, handleClose]\n    );\n\n    useImperativeHandle(ref, () => ({\n      close: handleClose,\n    }));\n\n    if (!open && exited) {\n      return null;\n    }\n\n    return (\n      <Window\n        {...rest}\n        onClose={handleClose}\n        disableFocusLock={disableFocusLock}\n        disableScrollLock={disableScrollLock}\n      >\n        {open && (\n          <Overlay\n            onClick={handleBackgroundClick}\n            disableBackgroundColor={disableBackgroundColor}\n          />\n        )}\n        <StyledSheetWrapper\n          className={classnames(\"c-sheet__wrapper\", bodyClassName)}\n          style={bodyStyle}\n          $position={position}\n          $mode={mode}\n        >\n          <StyledCssTransition\n            appear\n            in={open}\n            timeout={400}\n            classNames=\"c-sheet__animation\"\n            $direction={animation}\n            onEnter={handleEnter}\n            onExited={handleExited}\n          >\n            <StyledSheetSurface>\n              {controls.length > 0 && (\n                <StyledSheetIcons>\n                  {controls.map(\n                    (\n                      {\n                        icon: IconComponent,\n                        tooltip,\n                        onClick,\n                        disabled,\n                        className,\n                      },\n                      index\n                    ) => (\n                      <Tooltip\n                        title={tooltip}\n                        disable={!tooltip || disabled}\n                        key={`c-sheet-control-${index}`}\n                      >\n                        <StyledAnimatedSpan\n                          onClick={onClick}\n                          $disabled={disabled}\n                          className={className}\n                        >\n                          {IconComponent}\n                        </StyledAnimatedSpan>\n                      </Tooltip>\n                    )\n                  )}\n                </StyledSheetIcons>\n              )}\n              <StyledSheetWrapperPaper paperClass=\"c-sheet__wrapper__paper\">\n                {controls.length > 0 && (\n                  <StyledHeader>\n                    <StyledIconsWrapperSmall>\n                      {controls.map(\n                        (\n                          {\n                            icon: IconComponent,\n                            tooltip,\n                            onClick,\n                            disabled,\n                            className,\n                          },\n                          index\n                        ) => (\n                          <Tooltip\n                            title={tooltip}\n                            disable={!tooltip || disabled}\n                            key={index}\n                          >\n                            <IconButton\n                              onClick={onClick}\n                              disabled={disabled}\n                              className={className}\n                              variant=\"text gray\"\n                            >\n                              {IconComponent}\n                            </IconButton>\n                          </Tooltip>\n                        )\n                      )}\n                    </StyledIconsWrapperSmall>\n                    <StyledListSeparator />\n                  </StyledHeader>\n                )}\n                {children}\n              </StyledSheetWrapperPaper>\n            </StyledSheetSurface>\n          </StyledCssTransition>\n        </StyledSheetWrapper>\n      </Window>\n    );\n  }\n);\n\nSheet.displayName = \"Sheet\";\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Sheet.js","names":["React","useCallback","useEffect","forwardRef","useState","useImperativeHandle","classnames","StyledAnimatedSpan","StyledCssTransition","StyledHeader","StyledIconsWrapperSmall","StyledListSeparator","StyledSheetIcons","StyledSheetWrapper","SHEET_ENTER_MS","SHEET_EXIT_MS","StyledSheetSurface","StyledSheetWrapperPaper","IconButton","Overlay","Tooltip","Fade","Window","Sheet","_ref","ref","children","onClose","_ref$controls","controls","_ref$open","open","defaultOpen","_ref$animation","animation","_ref$position","position","_ref$mode","mode","_ref$disableFocusLock","disableFocusLock","_ref$disableScrollLoc","disableScrollLock","_ref$disableBackgroun","disableBackgroundColor","bodyStyle","bodyClassName","_ref$disableBackgroun2","disableBackgroundClick","rest","_objectWithoutPropertiesLoose","_excluded","_useState","setOpen","_useState2","exited","setExited","handleEnter","handleExited","handleClose","handleBackgroundClick","event","preventDefault","close","createElement","_extends","in","timeout","onClick","style","pointerEvents","undefined","className","$position","$mode","appear","classNames","$direction","onEnter","onExited","length","map","_ref2","index","IconComponent","icon","tooltip","disabled","title","disable","key","$disabled","paperClass","_ref3","variant","displayName"],"sources":["../../../../src/components/Sheet/Sheet.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  forwardRef,\n  HTMLAttributes,\n  useState,\n  CSSProperties,\n  MouseEvent,\n  useImperativeHandle,\n} from \"react\";\n\nimport classnames from \"classnames\";\n\nimport {\n  StyledAnimatedSpan,\n  StyledCssTransition,\n  StyledHeader,\n  StyledIconsWrapperSmall,\n  StyledListSeparator,\n  StyledSheetIcons,\n  StyledSheetWrapper,\n  SHEET_ENTER_MS,\n  SHEET_EXIT_MS,\n  StyledSheetSurface,\n  StyledSheetWrapperPaper,\n} from \"./Styles\";\nimport { IconButton } from \"../IconButton\";\nimport { Overlay } from \"../Overlay\";\nimport { Tooltip } from \"../Tooltip\";\nimport { Fade } from \"../Transitions\";\nimport { Window } from \"../Window\";\n\ninterface ControlProps {\n  onClick: () => void;\n  icon: React.ReactElement;\n  tooltip: string;\n  disabled: boolean;\n  className: string;\n}\n\ninterface ISheet {\n  onClose?: () => void;\n  controls?: ControlProps[];\n  open?: boolean;\n  animation?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  position?: \"center\" | \"left\" | \"right\";\n  mode?: \"normal\" | \"stretch\";\n  disableFocusLock?: boolean;\n  disableScrollLock?: boolean;\n  disableBackgroundColor?: boolean;\n  bodyStyle?: CSSProperties;\n  bodyClassName?: string;\n  disableBackgroundClick?: boolean;\n}\n\nexport interface SheetMethods {\n  close: () => void;\n}\n\ntype SheetProps = ISheet & HTMLAttributes<HTMLDivElement>;\n\nexport const Sheet = forwardRef<SheetMethods, SheetProps>(\n  (\n    {\n      children,\n      onClose,\n      controls = [],\n      open: defaultOpen = false,\n      animation = \"top\",\n      position = \"center\",\n      mode = \"normal\",\n      disableFocusLock = false,\n      disableScrollLock = false,\n      disableBackgroundColor = false,\n      bodyStyle,\n      bodyClassName,\n      disableBackgroundClick = false,\n      ...rest\n    },\n    ref\n  ) => {\n    const [open, setOpen] = useState(defaultOpen);\n    const [exited, setExited] = useState(true);\n\n    useEffect(() => {\n      setOpen(defaultOpen);\n    }, [defaultOpen]);\n\n    const handleEnter = useCallback(() => {\n      setExited(false);\n    }, []);\n\n    const handleExited = useCallback(() => {\n      setExited(true);\n      onClose?.();\n    }, [onClose]);\n\n    const handleClose = useCallback(() => {\n      setOpen(false);\n    }, []);\n\n    const handleBackgroundClick = useCallback(\n      (event: MouseEvent<HTMLDivElement>) => {\n        if (!disableBackgroundClick) {\n          event.preventDefault();\n          handleClose();\n        }\n      },\n      [disableBackgroundClick, handleClose]\n    );\n\n    useImperativeHandle(ref, () => ({\n      close: handleClose,\n    }));\n\n    if (!open && exited) {\n      return null;\n    }\n\n    return (\n      <Window\n        {...rest}\n        onClose={handleClose}\n        disableFocusLock={disableFocusLock}\n        disableScrollLock={disableScrollLock}\n      >\n        <Fade in={open} timeout={open ? SHEET_ENTER_MS : SHEET_EXIT_MS}>\n          <Overlay\n            onClick={handleBackgroundClick}\n            disableBackgroundColor={disableBackgroundColor}\n            style={{ pointerEvents: open ? undefined : \"none\" }}\n          />\n        </Fade>\n        <StyledSheetWrapper\n          className={classnames(\"c-sheet__wrapper\", bodyClassName)}\n          style={bodyStyle}\n          $position={position}\n          $mode={mode}\n        >\n          <StyledCssTransition\n            appear\n            in={open}\n            timeout={SHEET_ENTER_MS}\n            classNames=\"c-sheet__animation\"\n            $direction={animation}\n            onEnter={handleEnter}\n            onExited={handleExited}\n          >\n            <StyledSheetSurface>\n              {controls.length > 0 && (\n                <StyledSheetIcons>\n                  {controls.map(\n                    (\n                      {\n                        icon: IconComponent,\n                        tooltip,\n                        onClick,\n                        disabled,\n                        className,\n                      },\n                      index\n                    ) => (\n                      <Tooltip\n                        title={tooltip}\n                        disable={!tooltip || disabled}\n                        key={`c-sheet-control-${index}`}\n                      >\n                        <StyledAnimatedSpan\n                          onClick={onClick}\n                          $disabled={disabled}\n                          className={className}\n                        >\n                          {IconComponent}\n                        </StyledAnimatedSpan>\n                      </Tooltip>\n                    )\n                  )}\n                </StyledSheetIcons>\n              )}\n              <StyledSheetWrapperPaper paperClass=\"c-sheet__wrapper__paper\">\n                {controls.length > 0 && (\n                  <StyledHeader>\n                    <StyledIconsWrapperSmall>\n                      {controls.map(\n                        (\n                          {\n                            icon: IconComponent,\n                            tooltip,\n                            onClick,\n                            disabled,\n                            className,\n                          },\n                          index\n                        ) => (\n                          <Tooltip\n                            title={tooltip}\n                            disable={!tooltip || disabled}\n                            key={index}\n                          >\n                            <IconButton\n                              onClick={onClick}\n                              disabled={disabled}\n                              className={className}\n                              variant=\"text gray\"\n                            >\n                              {IconComponent}\n                            </IconButton>\n                          </Tooltip>\n                        )\n                      )}\n                    </StyledIconsWrapperSmall>\n                    <StyledListSeparator />\n                  </StyledHeader>\n                )}\n                {children}\n              </StyledSheetWrapperPaper>\n            </StyledSheetSurface>\n          </StyledCssTransition>\n        </StyledSheetWrapper>\n      </Window>\n    );\n  }\n);\n\nSheet.displayName = \"Sheet\";\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/components/Sheet/Styles.d.ts

@@ -1,4 +1,6 @@
 import { CSSTransition } from "react-transition-group";
+export declare const SHEET_ENTER_MS = 400;
+export declare const SHEET_EXIT_MS = 200;
 export declare const StyledSheetIcons: import("styled-components").StyledComponent<"div", any, {}, never>;
 interface IStyledSheetWrapper {
     $position?: "center" | "left" | "right";

package/dist/esm/components/Sheet/Styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Sheet/Styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AASvD,eAAO,MAAM,gBAAgB,oEA2B5B,CAAC;AAIF,UAAU,mBAAmB;IAC3B,SAAS,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IACxC,KAAK,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CAC9B;AAED,eAAO,MAAM,kBAAkB,qFAiG9B,CAAC;AAIF,UAAU,wBAAwB;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,kBAAkB,oEAM9B,CAAC;AAIF,eAAO,MAAM,uBAAuB,0FAkBnC,CAAC;AAIF,UAAU,mBAAmB;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,kBAAkB,sFAc9B,CAAC;AAIF,eAAO,MAAM,mBAAmB;gBAClB,MAAM;SA6HnB,CAAC;AAIF,eAAO,MAAM,mBAAmB;;;kBAE/B,CAAC;AAIF,eAAO,MAAM,uBAAuB,oEASnC,CAAC;AAIF,eAAO,MAAM,YAAY,oEAIxB,CAAC"}
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Sheet/Styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AASvD,eAAO,MAAM,cAAc,MAAM,CAAC;AAClC,eAAO,MAAM,aAAa,MAAM,CAAC;AAEjC,eAAO,MAAM,gBAAgB,oEA2B5B,CAAC;AAIF,UAAU,mBAAmB;IAC3B,SAAS,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IACxC,KAAK,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CAC9B;AAED,eAAO,MAAM,kBAAkB,qFAiG9B,CAAC;AAIF,UAAU,wBAAwB;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,kBAAkB,oEAM9B,CAAC;AAIF,eAAO,MAAM,uBAAuB,0FAkBnC,CAAC;AAIF,UAAU,mBAAmB;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,kBAAkB,sFAc9B,CAAC;AAIF,eAAO,MAAM,mBAAmB;gBAClB,MAAM;SA6HnB,CAAC;AAIF,eAAO,MAAM,mBAAmB;;;kBAE/B,CAAC;AAIF,eAAO,MAAM,uBAAuB,oEASnC,CAAC;AAIF,eAAO,MAAM,YAAY,oEAIxB,CAAC"}

package/dist/esm/components/Sheet/Styles.js

@@ -3,6 +3,8 @@ import styled, { css } from "styled-components";
 import { BoxSizingStyle } from "../BoxSizingStyle";
 import { FontStyle } from "../FontStyle";
 import { ListSeparator } from "../List";
+export const SHEET_ENTER_MS = 400;
+export const SHEET_EXIT_MS = 200;
 export const StyledSheetIcons = styled.div.withConfig({
   displayName: "Styles__StyledSheetIcons",
   componentId: "sc-144eyxd-0"
@@ -44,7 +46,7 @@ StyledAnimatedSpan.displayName = "StyledAnimatedSpan";
 export const StyledCssTransition = styled(CSSTransition).withConfig({
   displayName: "Styles__StyledCssTransition",
   componentId: "sc-144eyxd-5"
-})(["", " ", " ", " ", ""], props => props.$direction === "top" && css(["&.c-sheet__animation-enter{opacity:0;transform:translateY(-100%);}&.c-sheet__animation-enter-active{opacity:1;transform:translateY(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-appear{opacity:0;transform:translateY(-100%);}&.c-sheet__animation-appear-active{opacity:1;transform:translateY(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-exit{opacity:1;}&.c-sheet__animation-exit-active{opacity:0;transform:translateY(-100%);transition:opacity 200ms,transform 200ms;}"]), props => props.$direction === "bottom" && css(["&.c-sheet__animation-enter{opacity:0;transform:translateY(100%);}&.c-sheet__animation-enter-active{opacity:1;transform:translateY(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-appear{opacity:0;transform:translateY(100%);}&.c-sheet__animation-appear-active{opacity:1;transform:translateY(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-exit{opacity:1;}&.c-sheet__animation-exit-active{opacity:0;transform:translateY(100%);transition:opacity 200ms,transform 200ms;}"]), props => props.$direction === "left" && css(["&.c-sheet__animation-enter{opacity:0;transform:translateX(-100%);}&.c-sheet__animation-enter-active{opacity:1;transform:translateX(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-appear{opacity:0;transform:translateX(-100%);}&.c-sheet__animation-appear-active{opacity:1;transform:translateX(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-exit{opacity:1;}&.c-sheet__animation-exit-active{opacity:0;transform:translateX(-100%);transition:opacity 200ms,transform 200ms;}"]), props => props.$direction === "right" && css(["&.c-sheet__animation-enter{opacity:0;transform:translateX(100%);}&.c-sheet__animation-enter-active{opacity:1;transform:translateX(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-appear{opacity:0;transform:translateX(100%);}&.c-sheet__animation-appear-active{opacity:1;transform:translateX(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-exit{opacity:1;}&.c-sheet__animation-exit-active{opacity:0;transform:translateX(100%);transition:opacity 200ms,transform 200ms;}"]));
+})(["", " ", " ", " ", ""], props => props.$direction === "top" && css(["&.c-sheet__animation-enter{opacity:0;transform:translateY(-100%);}&.c-sheet__animation-enter-active{opacity:1;transform:translateY(0);transition:opacity ", "ms,transform ", "ms;}&.c-sheet__animation-appear{opacity:0;transform:translateY(-100%);}&.c-sheet__animation-appear-active{opacity:1;transform:translateY(0);transition:opacity ", "ms,transform ", "ms;}&.c-sheet__animation-exit{opacity:1;}&.c-sheet__animation-exit-active{opacity:0;transform:translateY(-100%);transition:opacity ", "ms,transform ", "ms;}"], SHEET_ENTER_MS, SHEET_ENTER_MS, SHEET_ENTER_MS, SHEET_ENTER_MS, SHEET_EXIT_MS, SHEET_EXIT_MS), props => props.$direction === "bottom" && css(["&.c-sheet__animation-enter{opacity:0;transform:translateY(100%);}&.c-sheet__animation-enter-active{opacity:1;transform:translateY(0);transition:opacity ", "ms,transform ", "ms;}&.c-sheet__animation-appear{opacity:0;transform:translateY(100%);}&.c-sheet__animation-appear-active{opacity:1;transform:translateY(0);transition:opacity ", "ms,transform ", "ms;}&.c-sheet__animation-exit{opacity:1;}&.c-sheet__animation-exit-active{opacity:0;transform:translateY(100%);transition:opacity ", "ms,transform ", "ms;}"], SHEET_ENTER_MS, SHEET_ENTER_MS, SHEET_ENTER_MS, SHEET_ENTER_MS, SHEET_EXIT_MS, SHEET_EXIT_MS), props => props.$direction === "left" && css(["&.c-sheet__animation-enter{opacity:0;transform:translateX(-100%);}&.c-sheet__animation-enter-active{opacity:1;transform:translateX(0);transition:opacity ", "ms,transform ", "ms;}&.c-sheet__animation-appear{opacity:0;transform:translateX(-100%);}&.c-sheet__animation-appear-active{opacity:1;transform:translateX(0);transition:opacity ", "ms,transform ", "ms;}&.c-sheet__animation-exit{opacity:1;}&.c-sheet__animation-exit-active{opacity:0;transform:translateX(-100%);transition:opacity ", "ms,transform ", "ms;}"], SHEET_ENTER_MS, SHEET_ENTER_MS, SHEET_ENTER_MS, SHEET_ENTER_MS, SHEET_EXIT_MS, SHEET_EXIT_MS), props => props.$direction === "right" && css(["&.c-sheet__animation-enter{opacity:0;transform:translateX(100%);}&.c-sheet__animation-enter-active{opacity:1;transform:translateX(0);transition:opacity ", "ms,transform ", "ms;}&.c-sheet__animation-appear{opacity:0;transform:translateX(100%);}&.c-sheet__animation-appear-active{opacity:1;transform:translateX(0);transition:opacity ", "ms,transform ", "ms;}&.c-sheet__animation-exit{opacity:1;}&.c-sheet__animation-exit-active{opacity:0;transform:translateX(100%);transition:opacity ", "ms,transform ", "ms;}"], SHEET_ENTER_MS, SHEET_ENTER_MS, SHEET_ENTER_MS, SHEET_ENTER_MS, SHEET_EXIT_MS, SHEET_EXIT_MS));
 StyledCssTransition.displayName = "StyledCssTransition";
 export const StyledListSeparator = styled(ListSeparator).withConfig({
   displayName: "Styles__StyledListSeparator",

package/dist/esm/components/Sheet/Styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["CSSTransition","styled","css","BoxSizingStyle","FontStyle","ListSeparator","StyledSheetIcons","div","withConfig","displayName","componentId","StyledSheetWrapper","props","$mode","$position","StyledSheetSurface","StyledSheetWrapperPaper","attrs","className","paperClass","StyledAnimatedSpan","span","$disabled","StyledCssTransition","$direction","StyledListSeparator","StyledIconsWrapperSmall","StyledHeader"],"sources":["../../../../src/components/Sheet/Styles.ts"],"sourcesContent":["import { CSSTransition } from \"react-transition-group\";\n\nimport styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\nimport { ListSeparator } from \"../List\";\n\nexport const StyledSheetIcons = styled.div`\n  display: flex;\n  height: 0;\n  position: relative;\n\n  span {\n    position: relative;\n    background-color: var(--page-paper-main);\n    box-shadow: var(--shadow-secondary);\n    cursor: pointer;\n    border-radius: 100%;\n    width: 40px;\n    height: 40px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    & > * {\n      height: 40px;\n      width: 40px;\n      padding: 8px;\n      fill: var(--color-theme-600);\n    }\n  }\n\n  @media (max-width: 640px) {\n    display: none;\n  }\n`;\n\nStyledSheetIcons.displayName = \"StyledSheetIcons\";\n\ninterface IStyledSheetWrapper {\n  $position?: \"center\" | \"left\" | \"right\";\n  $mode?: \"normal\" | \"stretch\";\n}\n\nexport const StyledSheetWrapper = styled.div<IStyledSheetWrapper>`\n  ${BoxSizingStyle}\n  ${FontStyle}\n\n  position: relative;\n  max-width: 95vw;\n  display: flex;\n  flex-direction: row;\n\n  ${(props) =>\n    props.$mode === \"stretch\"\n      ? css`\n          margin-top: 8px;\n          height: calc(100vh - 16px);\n          width: calc(100vw - 100px);\n          max-width: 1000px;\n          ${StyledSheetIcons} {\n            flex-direction: column;\n            width: 0;\n            height: calc(100vh - 32px);\n            & > * {\n              margin-bottom: 8px;\n            }\n            span {\n              top: 8px;\n            }\n          }\n        `\n      : css`\n          max-height: calc(100vh - 156px);\n          margin-top: 126px;\n          margin-bottom: 30px;\n          width: 540px;\n          flex-direction: column;\n\n          ${StyledSheetIcons} {\n            flex-direction: row-reverse;\n            & > * {\n              margin-left: 8px;\n            }\n            span {\n              top: -48px;\n              right: 8px;\n            }\n          }\n        `}\n\n  ${(props) =>\n    props.$mode === \"stretch\" &&\n    css`\n      @media (max-width: 640px) {\n        width: 100%;\n        height: 100%;\n      }\n    `}\n\n  ${(props) =>\n    props.$position === \"center\" &&\n    css`\n      ${tw`tw-mx-auto`}\n    `}\n\n  ${(props) =>\n    props.$position === \"left\" &&\n    css`\n      ${tw`tw-ml-2 tw-mr-auto`}\n    `}\n\n  ${(props) =>\n    props.$position === \"right\" &&\n    css`\n      ${tw`tw-mr-2 tw-ml-auto`}\n    `}\n\n  ${(props) =>\n    props.$mode === \"stretch\" &&\n    props.$position !== \"left\" &&\n    css`\n      ${StyledSheetIcons} {\n        span {\n          right: 48px;\n        }\n      }\n    `}\n\n  ${(props) =>\n    props.$mode === \"stretch\" &&\n    props.$position === \"left\" &&\n    css`\n      flex-direction: row-reverse;\n\n      ${StyledSheetIcons} {\n        span {\n          right: -8px;\n        }\n      }\n    `}\n`;\n\nStyledSheetWrapper.displayName = \"StyledSheetWrapper\";\n\ninterface IStyledSheetWrapperPaper {\n  paperClass?: string;\n}\n\nexport const StyledSheetSurface = styled.div`\n  display: flex;\n  flex-direction: inherit;\n  flex: 1 1 auto;\n  min-width: 0;\n  min-height: 0;\n`;\n\nStyledSheetSurface.displayName = \"StyledSheetSurface\";\n\nexport const StyledSheetWrapperPaper = styled.div.attrs<IStyledSheetWrapperPaper>(\n  (props) => ({\n    className: props.paperClass,\n  })\n)<IStyledSheetWrapperPaper>`\n  background-color: var(--page-paper-main);\n  color: var(--color-theme-900);\n  box-shadow: var(--shadow-primary);\n  border-radius: 6px;\n  overflow: auto;\n  animation: 0.3s linear ease-out;\n  /* Scrolling here must not dirty the blurred overlays below, which already clip to this box. */\n  transform: translateZ(0);\n  contain: paint;\n  /* A scroll that runs off the end must stop here. Chained to the page, it moves what the blur samples. */\n  overscroll-behavior: contain;\n\n  ${tw`tw-flex-auto`}\n`;\n\nStyledSheetWrapperPaper.displayName = \"StyledSheetWrapperPaper\";\n\ninterface IStyledAnimatedSpan {\n  $disabled?: boolean;\n}\n\nexport const StyledAnimatedSpan = styled.span<IStyledAnimatedSpan>`\n  &:hover svg {\n    fill: var(--color-primary);\n  }\n\n  ${(props) =>\n    props.$disabled &&\n    css`\n      pointer-events: none;\n\n      svg {\n        opacity: 0.5;\n      }\n    `}\n`;\n\nStyledAnimatedSpan.displayName = \"StyledAnimatedSpan\";\n\nexport const StyledCssTransition = styled(CSSTransition)<{\n  $direction: string;\n}>`\n  ${(props) =>\n    props.$direction === \"top\" &&\n    css`\n      &.c-sheet__animation-enter {\n        opacity: 0;\n        transform: translateY(-100%);\n      }\n      &.c-sheet__animation-enter-active {\n        opacity: 1;\n        transform: translateY(0);\n        transition: opacity 400ms, transform 400ms;\n      }\n      &.c-sheet__animation-appear {\n        opacity: 0;\n        transform: translateY(-100%);\n      }\n      &.c-sheet__animation-appear-active {\n        opacity: 1;\n        transform: translateY(0);\n        transition: opacity 400ms, transform 400ms;\n      }\n      &.c-sheet__animation-exit {\n        opacity: 1;\n      }\n      &.c-sheet__animation-exit-active {\n        opacity: 0;\n        transform: translateY(-100%);\n        transition: opacity 200ms, transform 200ms;\n      }\n    `}\n\n  ${(props) =>\n    props.$direction === \"bottom\" &&\n    css`\n      &.c-sheet__animation-enter {\n        opacity: 0;\n        transform: translateY(100%);\n      }\n      &.c-sheet__animation-enter-active {\n        opacity: 1;\n        transform: translateY(0);\n        transition: opacity 400ms, transform 400ms;\n      }\n      &.c-sheet__animation-appear {\n        opacity: 0;\n        transform: translateY(100%);\n      }\n      &.c-sheet__animation-appear-active {\n        opacity: 1;\n        transform: translateY(0);\n        transition: opacity 400ms, transform 400ms;\n      }\n      &.c-sheet__animation-exit {\n        opacity: 1;\n      }\n      &.c-sheet__animation-exit-active {\n        opacity: 0;\n        transform: translateY(100%);\n        transition: opacity 200ms, transform 200ms;\n      }\n    `}\n\n  ${(props) =>\n    props.$direction === \"left\" &&\n    css`\n      &.c-sheet__animation-enter {\n        opacity: 0;\n        transform: translateX(-100%);\n      }\n      &.c-sheet__animation-enter-active {\n        opacity: 1;\n        transform: translateX(0);\n        transition: opacity 400ms, transform 400ms;\n      }\n      &.c-sheet__animation-appear {\n        opacity: 0;\n        transform: translateX(-100%);\n      }\n      &.c-sheet__animation-appear-active {\n        opacity: 1;\n        transform: translateX(0);\n        transition: opacity 400ms, transform 400ms;\n      }\n      &.c-sheet__animation-exit {\n        opacity: 1;\n      }\n      &.c-sheet__animation-exit-active {\n        opacity: 0;\n        transform: translateX(-100%);\n        transition: opacity 200ms, transform 200ms;\n      }\n    `}\n\n  ${(props) =>\n    props.$direction === \"right\" &&\n    css`\n      &.c-sheet__animation-enter {\n        opacity: 0;\n        transform: translateX(100%);\n      }\n      &.c-sheet__animation-enter-active {\n        opacity: 1;\n        transform: translateX(0);\n        transition: opacity 400ms, transform 400ms;\n      }\n      &.c-sheet__animation-appear {\n        opacity: 0;\n        transform: translateX(100%);\n      }\n      &.c-sheet__animation-appear-active {\n        opacity: 1;\n        transform: translateX(0);\n        transition: opacity 400ms, transform 400ms;\n      }\n      &.c-sheet__animation-exit {\n        opacity: 1;\n      }\n      &.c-sheet__animation-exit-active {\n        opacity: 0;\n        transform: translateX(100%);\n        transition: opacity 200ms, transform 200ms;\n      }\n    `}\n`;\n\nStyledCssTransition.displayName = \"StyledCssTransition\";\n\nexport const StyledListSeparator = styled(ListSeparator)`\n  margin: 0;\n`;\n\nStyledListSeparator.displayName = \"StyledListSeparator\";\n\nexport const StyledIconsWrapperSmall = styled.div`\n  height: 40px;\n  display: flex;\n  gap: 8px;\n  padding-left: 16px;\n  padding-right: 16px;\n  align-items: center;\n  place-content: end;\n  flex-direction: row-reverse;\n`;\n\nStyledIconsWrapperSmall.displayName = \"StyledIconsWrapperSmall\";\n\nexport const StyledHeader = styled.div`\n  @media (min-width: 640px) {\n    display: none;\n  }\n`;\n\nStyledHeader.displayName = \"StyledHeader\";\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Styles.js","names":["CSSTransition","styled","css","BoxSizingStyle","FontStyle","ListSeparator","SHEET_ENTER_MS","SHEET_EXIT_MS","StyledSheetIcons","div","withConfig","displayName","componentId","StyledSheetWrapper","props","$mode","$position","StyledSheetSurface","StyledSheetWrapperPaper","attrs","className","paperClass","StyledAnimatedSpan","span","$disabled","StyledCssTransition","$direction","StyledListSeparator","StyledIconsWrapperSmall","StyledHeader"],"sources":["../../../../src/components/Sheet/Styles.ts"],"sourcesContent":["import { CSSTransition } from \"react-transition-group\";\n\nimport styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\nimport { ListSeparator } from \"../List\";\n\nexport const SHEET_ENTER_MS = 400;\nexport const SHEET_EXIT_MS = 200;\n\nexport const StyledSheetIcons = styled.div`\n  display: flex;\n  height: 0;\n  position: relative;\n\n  span {\n    position: relative;\n    background-color: var(--page-paper-main);\n    box-shadow: var(--shadow-secondary);\n    cursor: pointer;\n    border-radius: 100%;\n    width: 40px;\n    height: 40px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    & > * {\n      height: 40px;\n      width: 40px;\n      padding: 8px;\n      fill: var(--color-theme-600);\n    }\n  }\n\n  @media (max-width: 640px) {\n    display: none;\n  }\n`;\n\nStyledSheetIcons.displayName = \"StyledSheetIcons\";\n\ninterface IStyledSheetWrapper {\n  $position?: \"center\" | \"left\" | \"right\";\n  $mode?: \"normal\" | \"stretch\";\n}\n\nexport const StyledSheetWrapper = styled.div<IStyledSheetWrapper>`\n  ${BoxSizingStyle}\n  ${FontStyle}\n\n  position: relative;\n  max-width: 95vw;\n  display: flex;\n  flex-direction: row;\n\n  ${(props) =>\n    props.$mode === \"stretch\"\n      ? css`\n          margin-top: 8px;\n          height: calc(100vh - 16px);\n          width: calc(100vw - 100px);\n          max-width: 1000px;\n          ${StyledSheetIcons} {\n            flex-direction: column;\n            width: 0;\n            height: calc(100vh - 32px);\n            & > * {\n              margin-bottom: 8px;\n            }\n            span {\n              top: 8px;\n            }\n          }\n        `\n      : css`\n          max-height: calc(100vh - 156px);\n          margin-top: 126px;\n          margin-bottom: 30px;\n          width: 540px;\n          flex-direction: column;\n\n          ${StyledSheetIcons} {\n            flex-direction: row-reverse;\n            & > * {\n              margin-left: 8px;\n            }\n            span {\n              top: -48px;\n              right: 8px;\n            }\n          }\n        `}\n\n  ${(props) =>\n    props.$mode === \"stretch\" &&\n    css`\n      @media (max-width: 640px) {\n        width: 100%;\n        height: 100%;\n      }\n    `}\n\n  ${(props) =>\n    props.$position === \"center\" &&\n    css`\n      ${tw`tw-mx-auto`}\n    `}\n\n  ${(props) =>\n    props.$position === \"left\" &&\n    css`\n      ${tw`tw-ml-2 tw-mr-auto`}\n    `}\n\n  ${(props) =>\n    props.$position === \"right\" &&\n    css`\n      ${tw`tw-mr-2 tw-ml-auto`}\n    `}\n\n  ${(props) =>\n    props.$mode === \"stretch\" &&\n    props.$position !== \"left\" &&\n    css`\n      ${StyledSheetIcons} {\n        span {\n          right: 48px;\n        }\n      }\n    `}\n\n  ${(props) =>\n    props.$mode === \"stretch\" &&\n    props.$position === \"left\" &&\n    css`\n      flex-direction: row-reverse;\n\n      ${StyledSheetIcons} {\n        span {\n          right: -8px;\n        }\n      }\n    `}\n`;\n\nStyledSheetWrapper.displayName = \"StyledSheetWrapper\";\n\ninterface IStyledSheetWrapperPaper {\n  paperClass?: string;\n}\n\nexport const StyledSheetSurface = styled.div`\n  display: flex;\n  flex-direction: inherit;\n  flex: 1 1 auto;\n  min-width: 0;\n  min-height: 0;\n`;\n\nStyledSheetSurface.displayName = \"StyledSheetSurface\";\n\nexport const StyledSheetWrapperPaper = styled.div.attrs<IStyledSheetWrapperPaper>(\n  (props) => ({\n    className: props.paperClass,\n  })\n)<IStyledSheetWrapperPaper>`\n  background-color: var(--page-paper-main);\n  color: var(--color-theme-900);\n  box-shadow: var(--shadow-primary);\n  border-radius: 6px;\n  overflow: auto;\n  animation: 0.3s linear ease-out;\n  /* Scrolling here must not dirty the blurred overlays below, which already clip to this box. */\n  transform: translateZ(0);\n  contain: paint;\n  /* A scroll that runs off the end must stop here. Chained to the page, it moves what the blur samples. */\n  overscroll-behavior: contain;\n\n  ${tw`tw-flex-auto`}\n`;\n\nStyledSheetWrapperPaper.displayName = \"StyledSheetWrapperPaper\";\n\ninterface IStyledAnimatedSpan {\n  $disabled?: boolean;\n}\n\nexport const StyledAnimatedSpan = styled.span<IStyledAnimatedSpan>`\n  &:hover svg {\n    fill: var(--color-primary);\n  }\n\n  ${(props) =>\n    props.$disabled &&\n    css`\n      pointer-events: none;\n\n      svg {\n        opacity: 0.5;\n      }\n    `}\n`;\n\nStyledAnimatedSpan.displayName = \"StyledAnimatedSpan\";\n\nexport const StyledCssTransition = styled(CSSTransition)<{\n  $direction: string;\n}>`\n  ${(props) =>\n    props.$direction === \"top\" &&\n    css`\n      &.c-sheet__animation-enter {\n        opacity: 0;\n        transform: translateY(-100%);\n      }\n      &.c-sheet__animation-enter-active {\n        opacity: 1;\n        transform: translateY(0);\n        transition: opacity ${SHEET_ENTER_MS}ms, transform ${SHEET_ENTER_MS}ms;\n      }\n      &.c-sheet__animation-appear {\n        opacity: 0;\n        transform: translateY(-100%);\n      }\n      &.c-sheet__animation-appear-active {\n        opacity: 1;\n        transform: translateY(0);\n        transition: opacity ${SHEET_ENTER_MS}ms, transform ${SHEET_ENTER_MS}ms;\n      }\n      &.c-sheet__animation-exit {\n        opacity: 1;\n      }\n      &.c-sheet__animation-exit-active {\n        opacity: 0;\n        transform: translateY(-100%);\n        transition: opacity ${SHEET_EXIT_MS}ms, transform ${SHEET_EXIT_MS}ms;\n      }\n    `}\n\n  ${(props) =>\n    props.$direction === \"bottom\" &&\n    css`\n      &.c-sheet__animation-enter {\n        opacity: 0;\n        transform: translateY(100%);\n      }\n      &.c-sheet__animation-enter-active {\n        opacity: 1;\n        transform: translateY(0);\n        transition: opacity ${SHEET_ENTER_MS}ms, transform ${SHEET_ENTER_MS}ms;\n      }\n      &.c-sheet__animation-appear {\n        opacity: 0;\n        transform: translateY(100%);\n      }\n      &.c-sheet__animation-appear-active {\n        opacity: 1;\n        transform: translateY(0);\n        transition: opacity ${SHEET_ENTER_MS}ms, transform ${SHEET_ENTER_MS}ms;\n      }\n      &.c-sheet__animation-exit {\n        opacity: 1;\n      }\n      &.c-sheet__animation-exit-active {\n        opacity: 0;\n        transform: translateY(100%);\n        transition: opacity ${SHEET_EXIT_MS}ms, transform ${SHEET_EXIT_MS}ms;\n      }\n    `}\n\n  ${(props) =>\n    props.$direction === \"left\" &&\n    css`\n      &.c-sheet__animation-enter {\n        opacity: 0;\n        transform: translateX(-100%);\n      }\n      &.c-sheet__animation-enter-active {\n        opacity: 1;\n        transform: translateX(0);\n        transition: opacity ${SHEET_ENTER_MS}ms, transform ${SHEET_ENTER_MS}ms;\n      }\n      &.c-sheet__animation-appear {\n        opacity: 0;\n        transform: translateX(-100%);\n      }\n      &.c-sheet__animation-appear-active {\n        opacity: 1;\n        transform: translateX(0);\n        transition: opacity ${SHEET_ENTER_MS}ms, transform ${SHEET_ENTER_MS}ms;\n      }\n      &.c-sheet__animation-exit {\n        opacity: 1;\n      }\n      &.c-sheet__animation-exit-active {\n        opacity: 0;\n        transform: translateX(-100%);\n        transition: opacity ${SHEET_EXIT_MS}ms, transform ${SHEET_EXIT_MS}ms;\n      }\n    `}\n\n  ${(props) =>\n    props.$direction === \"right\" &&\n    css`\n      &.c-sheet__animation-enter {\n        opacity: 0;\n        transform: translateX(100%);\n      }\n      &.c-sheet__animation-enter-active {\n        opacity: 1;\n        transform: translateX(0);\n        transition: opacity ${SHEET_ENTER_MS}ms, transform ${SHEET_ENTER_MS}ms;\n      }\n      &.c-sheet__animation-appear {\n        opacity: 0;\n        transform: translateX(100%);\n      }\n      &.c-sheet__animation-appear-active {\n        opacity: 1;\n        transform: translateX(0);\n        transition: opacity ${SHEET_ENTER_MS}ms, transform ${SHEET_ENTER_MS}ms;\n      }\n      &.c-sheet__animation-exit {\n        opacity: 1;\n      }\n      &.c-sheet__animation-exit-active {\n        opacity: 0;\n        transform: translateX(100%);\n        transition: opacity ${SHEET_EXIT_MS}ms, transform ${SHEET_EXIT_MS}ms;\n      }\n    `}\n`;\n\nStyledCssTransition.displayName = \"StyledCssTransition\";\n\nexport const StyledListSeparator = styled(ListSeparator)`\n  margin: 0;\n`;\n\nStyledListSeparator.displayName = \"StyledListSeparator\";\n\nexport const StyledIconsWrapperSmall = styled.div`\n  height: 40px;\n  display: flex;\n  gap: 8px;\n  padding-left: 16px;\n  padding-right: 16px;\n  align-items: center;\n  place-content: end;\n  flex-direction: row-reverse;\n`;\n\nStyledIconsWrapperSmall.displayName = \"StyledIconsWrapperSmall\";\n\nexport const StyledHeader = styled.div`\n  @media (min-width: 640px) {\n    display: none;\n  }\n`;\n\nStyledHeader.displayName = \"StyledHeader\";\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/presentation/whiteboard/canvasElements.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"canvasElements.d.ts","sourceRoot":"","sources":["../../../../src/presentation/whiteboard/canvasElements.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,YAAY,EAKb,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,SAAS,EAMV,MAAM,cAAc,CAAC;AACtB,OAAO,EAEL,gBAAgB,EAChB,QAAQ,EAGR,iBAAiB,EAEjB,eAAe,EAShB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAGL,cAAc,EAIf,MAAM,eAAe,CAAC;AACvB,OAAO,EAIL,cAAc,EAMf,MAAM,eAAe,CAAC;AAEvB,OAAO,EAIL,iBAAiB,EAWlB,MAAM,mBAAmB,CAAC;AAE3B;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB,+CAA+C,CAAC;AAE7E;;;;;;;;;GASG;AACH,eAAO,MAAM,qBAAqB,wBAAwB,CAAC;AAE3D,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,QAAQ,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,SAAS,CAAC;IACtB,UAAU,EAAE,MAAM,IAAI,CAAC;IAKvB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,kBAAkB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;IAKxE,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACpD,YAAY,EAAE,KAAK,CAAC,QAAQ,CAC1B,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAC/D,CAAC;IACF,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC;IAC1C,SAAS,EAAE,KAAK,CAAC,QAAQ,CACvB,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC,CACxD,CAAC;IACF,WAAW,EAAE,eAAe,CAAC;IAC7B,cAAc,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,CAAC;IAGtE,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC;IACjE,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC;IAGjE,eAAe,EAAE,iBAAiB,EAAE,CAAC;IACrC,kBAAkB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,iBAAiB,EAAE,CAAC,CAAC,CAAC;IAG9E,aAAa,EAAE,gBAAgB,EAAE,CAAC;IAClC,gBAAgB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC;IAE3E,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACzD,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAGlC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;CACzE;AAUD,eAAO,MAAM,cAAc,GAAI,sTAyB5B,mBAAmB,KAAG,YAitCxB,CAAC"}
+{"version":3,"file":"canvasElements.d.ts","sourceRoot":"","sources":["../../../../src/presentation/whiteboard/canvasElements.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,YAAY,EAKb,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,SAAS,EAMV,MAAM,cAAc,CAAC;AACtB,OAAO,EAEL,gBAAgB,EAChB,QAAQ,EAGR,iBAAiB,EAEjB,eAAe,EAShB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAGL,cAAc,EAIf,MAAM,eAAe,CAAC;AACvB,OAAO,EAIL,cAAc,EAMf,MAAM,eAAe,CAAC;AAEvB,OAAO,EAIL,iBAAiB,EAWlB,MAAM,mBAAmB,CAAC;AAE3B;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB,+CAA+C,CAAC;AAE7E;;;;;;;;;GASG;AACH,eAAO,MAAM,qBAAqB,wBAAwB,CAAC;AAE3D,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,QAAQ,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,SAAS,CAAC;IACtB,UAAU,EAAE,MAAM,IAAI,CAAC;IAKvB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,kBAAkB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;IAKxE,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACpD,YAAY,EAAE,KAAK,CAAC,QAAQ,CAC1B,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAC/D,CAAC;IACF,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC;IAC1C,SAAS,EAAE,KAAK,CAAC,QAAQ,CACvB,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC,CACxD,CAAC;IACF,WAAW,EAAE,eAAe,CAAC;IAC7B,cAAc,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,CAAC;IAGtE,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC;IACjE,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC;IAGjE,eAAe,EAAE,iBAAiB,EAAE,CAAC;IACrC,kBAAkB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,iBAAiB,EAAE,CAAC,CAAC,CAAC;IAG9E,aAAa,EAAE,gBAAgB,EAAE,CAAC;IAClC,gBAAgB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC;IAE3E,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACzD,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAGlC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;CACzE;AAUD,eAAO,MAAM,cAAc,GAAI,sTAyB5B,mBAAmB,KAAG,YAutCxB,CAAC"}

package/dist/esm/presentation/whiteboard/canvasElements.js

@@ -467,14 +467,15 @@ export const CanvasElements = _ref => {
     resolveTimersRef.current.push(timer);
   }, [setProjectElements]);
 
-  /* Esc, or a click on the overlay. The placeholder was only ever the first
-     half of the gesture, so cancelling throws it away rather than leaving a
-     blank card on the board. */
-  const cancelProjectElement = useCallback(id => {
+  /* Esc, or a click on the overlay. The drawn box stays on the board as a
+     placeholder, selected where it was drawn; a click on it opens the picker
+     again. Deleting it is the element's own Delete, like any other element. */
+  const cancelProjectElement = useCallback(() => {
     setPickerFor(null);
-    setProjectElements(current => current.filter(entry => entry.id !== id));
-    setSelectedId(selected => selected === id ? null : selected);
-  }, [setProjectElements, setSelectedId]);
+  }, []);
+
+  /* A placeholder's own frame reopens its picker. */
+  const pickForPlaceholder = useCallback(entry => entry.status === "placeholder" && !entry.limited ? () => setPickerFor(entry.id) : undefined, []);
   const pickerElement = (_projectElements$find = projectElements.find(entry => entry.id === pickerFor)) != null ? _projectElements$find : null;
 
   /* A selected element's Delete, the same removal the link and file cards' own
@@ -845,7 +846,8 @@ export const CanvasElements = _ref => {
       onClick: event => event.stopPropagation()
     }, /*#__PURE__*/React.createElement(ProjectElementNode, {
       element: entry,
-      selected: selected
+      selected: selected,
+      onPick: pickForPlaceholder(entry)
     }), selected && entry.kind === "person" && entry.status === "resolved" && !entry.limited && entry.person ? /*#__PURE__*/React.createElement(PersonCardToolbar, {
       onDetails: () => setDetailsId(entry.id),
       locked: (_locks$entry$id = locks[entry.id]) != null ? _locks$entry$id : false,
@@ -960,7 +962,7 @@ export const CanvasElements = _ref => {
       task: null,
       person
     }),
-    onCancel: () => cancelProjectElement(pickerElement.id)
+    onCancel: cancelProjectElement
   }) : null);
 };
 //# sourceMappingURL=canvasElements.js.map