npm - @activecollab/components - Versions diffs - 2.0.499 → 2.0.501 - Mend

@activecollab/components 2.0.499 → 2.0.501

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (34) hide show

package/dist/esm/components/ObjectLayout/Styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Styles.js","names":["styled","ResizeHandle","CONTAINER_CSS","StyledObjectLayout","div","withConfig","displayName","componentId","_ref","$fill","StyledHeader","_ref2","$panel","StyledTopBar","StyledBand","StyledColumns","StyledLeft","StyledMain","_ref3","$padded","StyledStream","StyledRail","StyledSplit","_ref4","$ownScroll","StyledPart","StyledPartColumns","StyledProperties","StyledPanel","StyledPanelHandle"],"sources":["../../../../src/components/ObjectLayout/Styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { ResizeHandle } from \"../ResizeHandle\";\n\nexport const CONTAINER_CSS = `\n@container (min-width: 900px) {\n .c-object-layout .c-object-layout__header,\n .c-object-layout .c-object-layout__band {\n position: sticky;\n z-index: 6;\n background-color: var(--surface-sheet);\n }\n .c-object-layout .c-object-layout__header { top: 0; }\n .c-object-layout .c-object-layout__band { top: 41px; padding: 8px 32px 16px; }\n .c-object-layout .c-object-layout__columns {\n grid-template-columns: minmax(0, 1fr) 300px;\n column-gap: 32px;\n padding-top: 0;\n padding-left: 32px;\n }\n .c-object-layout .c-object-layout__left {\n display: flex;\n flex-direction: column;\n align-self: stretch;\n gap: 16px;\n min-width: 0;\n min-height: var(--opening-rail-height);\n }\n .c-object-layout .c-object-layout__rail { padding-bottom: 24px; }\n .c-object-layout .c-object-layout__split {\n display: grid;\n grid-template-columns: minmax(0, 1fr) min(var(--panel-width), calc(100% - var(--main-min)));\n }\n .c-object-layout--own-scroll .c-object-layout__split { grid-template-rows: minmax(0, 1fr); }\n .c-object-layout--own-scroll .c-object-layout__part { min-height: 0; overflow-y: auto; }\n .c-object-layout .c-object-layout__part-columns { padding: 0 32px; }\n .c-object-layout .c-object-layout__panel { padding: 0; }\n .c-object-layout .c-object-layout__handle { display: block; }\n}\n@container (max-width: 899px) {\n .c-object-layout .c-object-layout__columns { align-content: start; }\n .c-object-layout--panel .c-object-layout__header { border-top-right-radius: inherit; }\n .c-object-layout--own-scroll .c-object-layout__split { overflow-y: auto; }\n}\n`;\n\nexport const StyledObjectLayout = styled.div<{ $fill: boolean }>`\n container-type: inline-size;\n display: flex;\n flex-direction: column;\n width: 100%;\n ${({ $fill }) => ($fill ? \"height: 100%;\" : \"min-height: 100%;\")}\n border-radius: inherit;\n color: var(--color-theme-900);\n background-color: var(--surface-sheet);\n`;\n\nexport const StyledHeader = styled.div<{ $panel: boolean }>`\n border-top-left-radius: inherit;\n ${({ $panel }) => !$panel && \"border-top-right-radius: inherit;\"}\n`;\n\nexport const StyledTopBar = styled.div`\n padding: 9px 12px 0;\n`;\n\nexport const StyledBand = styled.div`\n min-width: 0;\n padding: 16px 16px 0;\n`;\n\nexport const StyledColumns = styled.div`\n display: grid;\n flex: 1 1 0%;\n grid-template-columns: repeat(1, minmax(0, 1fr));\n align-items: start;\n row-gap: 24px;\n padding: 16px 16px 0;\n`;\n\nexport const StyledLeft = styled.div`\n display: contents;\n`;\n\nexport const StyledMain = styled.div<{ $padded: boolean }>`\n order: 1;\n display: flex;\n flex-direction: column;\n gap: 24px;\n min-width: 0;\n ${({ $padded }) => $padded && \"padding-bottom: 24px;\"}\n`;\n\nexport const StyledStream = styled.div`\n display: contents;\n`;\n\nexport const StyledRail = styled.div`\n order: 2;\n display: flex;\n flex-direction: column;\n gap: 16px;\n min-width: 0;\n`;\n\nexport const StyledSplit = styled.div<{ $ownScroll: boolean }>`\n display: flex;\n flex: 1 1 0%;\n flex-direction: column;\n ${({ $ownScroll }) => $ownScroll && \"min-height: 0;\"}\n`;\n\nexport const StyledPart = styled.div`\n display: flex;\n flex-direction: column;\n min-width: 0;\n`;\n\nexport const StyledPartColumns = styled.div`\n display: flex;\n flex-direction: column;\n gap: 16px;\n min-width: 0;\n padding: 16px 16px 0;\n`;\n\nexport const StyledProperties = styled.div`\n min-width: 0;\n`;\n\nexport const StyledPanel = styled.div`\n position: relative;\n min-width: 0;\n padding: 0 16px;\n`;\n\nexport const StyledPanelHandle = styled(ResizeHandle)`\n display: none;\n z-index: 7;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,SAASC,YAAY,QAAQ,iBAAiB;AAE9C,OAAO,MAAMC,aAAa,~~umDAwCzB~~;AAED,OAAO,MAAMC,kBAAkB,GAAGH,MAAM,CAACI,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,gLAKxCC,IAAA;EAAA,IAAGC,KAAK,GAAAD,IAAA,CAALC,KAAK;EAAA,OAAQA,KAAK,GAAG,eAAe,GAAG,mBAAmB;AAAA,CAAC,CAIjE;AAED,OAAO,MAAMC,YAAY,GAAGV,MAAM,CAACI,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,4CAElCI,KAAA;EAAA,IAAGC,MAAM,GAAAD,KAAA,CAANC,MAAM;EAAA,OAAO,CAACA,MAAM,IAAI,mCAAmC;AAAA,EACjE;AAED,OAAO,MAAMC,YAAY,GAAGb,MAAM,CAACI,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,2BAErC;AAED,OAAO,MAAMO,UAAU,GAAGd,MAAM,CAACI,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,wCAGnC;AAED,OAAO,MAAMQ,aAAa,GAAGf,MAAM,CAACI,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,kIAOtC;AAED,OAAO,MAAMS,UAAU,GAAGhB,MAAM,CAACI,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,yBAEnC;AAED,OAAO,MAAMU,UAAU,GAAGjB,MAAM,CAACI,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,6EAMhCW,KAAA;EAAA,IAAGC,OAAO,GAAAD,KAAA,CAAPC,OAAO;EAAA,OAAOA,OAAO,IAAI,uBAAuB;AAAA,EACtD;AAED,OAAO,MAAMC,YAAY,GAAGpB,MAAM,CAACI,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,yBAErC;AAED,OAAO,MAAMc,UAAU,GAAGrB,MAAM,CAACI,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,wEAMnC;AAED,OAAO,MAAMe,WAAW,GAAGtB,MAAM,CAACI,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,4DAIjCgB,KAAA;EAAA,IAAGC,UAAU,GAAAD,KAAA,CAAVC,UAAU;EAAA,OAAOA,UAAU,IAAI,gBAAgB;AAAA,EACrD;AAED,OAAO,MAAMC,UAAU,GAAGzB,MAAM,CAACI,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,uDAInC;AAED,OAAO,MAAMmB,iBAAiB,GAAG1B,MAAM,CAACI,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,oFAM1C;AAED,OAAO,MAAMoB,gBAAgB,GAAG3B,MAAM,CAACI,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,oBAEzC;AAED,OAAO,MAAMqB,WAAW,GAAG5B,MAAM,CAACI,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,qDAIpC;AAED,OAAO,MAAMsB,iBAAiB,GAAG7B,MAAM,CAACC,YAAY,CAAC,CAAAI,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,+BAGpD","ignoreList":[]}
1	+ {"version":3,"file":"Styles.js","names":["styled","ResizeHandle","CONTAINER_CSS","StyledObjectLayout","div","withConfig","displayName","componentId","_ref","$fill","StyledHeader","_ref2","$panel","StyledTopBar","StyledBand","StyledColumns","StyledLeft","StyledMain","_ref3","$padded","StyledStream","StyledRail","StyledSplit","_ref4","$ownScroll","StyledPart","StyledPartColumns","StyledProperties","StyledPanel","StyledPanelHandle"],"sources":["../../../../src/components/ObjectLayout/Styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { ResizeHandle } from \"../ResizeHandle\";\n\nexport const CONTAINER_CSS = `\n@container (min-width: 900px) {\n .c-object-layout .c-object-layout__header,\n .c-object-layout .c-object-layout__band {\n position: sticky;\n z-index: 6;\n background-color: var(--surface-sheet);\n }\n .c-object-layout .c-object-layout__header { top: 0; }\n .c-object-layout .c-object-layout__band { top: 41px; padding: 8px 32px 16px; }\n .c-object-layout .c-object-layout__columns {\n grid-template-columns: minmax(0, 1fr) 300px;\n column-gap: 32px;\n padding-top: 0;\n padding-left: 32px;\n }\n .c-object-layout--single .c-object-layout__columns {\n grid-template-columns: minmax(0, 1fr);\n padding-right: 32px;\n }\n .c-object-layout .c-object-layout__left {\n display: flex;\n flex-direction: column;\n align-self: stretch;\n gap: 16px;\n min-width: 0;\n min-height: var(--opening-rail-height);\n }\n .c-object-layout .c-object-layout__rail { padding-bottom: 24px; }\n .c-object-layout .c-object-layout__split {\n display: grid;\n grid-template-columns: minmax(0, 1fr) min(var(--panel-width), calc(100% - var(--main-min)));\n }\n .c-object-layout--own-scroll .c-object-layout__split { grid-template-rows: minmax(0, 1fr); }\n .c-object-layout--own-scroll .c-object-layout__part { min-height: 0; overflow-y: auto; }\n .c-object-layout .c-object-layout__part-columns { padding: 0 32px; }\n .c-object-layout .c-object-layout__panel { padding: 0; }\n .c-object-layout .c-object-layout__handle { display: block; }\n}\n@container (max-width: 899px) {\n .c-object-layout .c-object-layout__columns { align-content: start; }\n .c-object-layout--panel .c-object-layout__header { border-top-right-radius: inherit; }\n .c-object-layout--own-scroll .c-object-layout__split { overflow-y: auto; }\n}\n`;\n\nexport const StyledObjectLayout = styled.div<{ $fill: boolean }>`\n container-type: inline-size;\n display: flex;\n flex-direction: column;\n width: 100%;\n ${({ $fill }) => ($fill ? \"height: 100%;\" : \"min-height: 100%;\")}\n border-radius: inherit;\n color: var(--color-theme-900);\n background-color: var(--surface-sheet);\n`;\n\nexport const StyledHeader = styled.div<{ $panel: boolean }>`\n border-top-left-radius: inherit;\n ${({ $panel }) => !$panel && \"border-top-right-radius: inherit;\"}\n`;\n\nexport const StyledTopBar = styled.div`\n padding: 9px 12px 0;\n`;\n\nexport const StyledBand = styled.div`\n min-width: 0;\n padding: 16px 16px 0;\n`;\n\nexport const StyledColumns = styled.div`\n display: grid;\n flex: 1 1 0%;\n grid-template-columns: repeat(1, minmax(0, 1fr));\n align-items: start;\n row-gap: 24px;\n padding: 16px 16px 0;\n`;\n\nexport const StyledLeft = styled.div`\n display: contents;\n`;\n\nexport const StyledMain = styled.div<{ $padded: boolean }>`\n order: 1;\n display: flex;\n flex-direction: column;\n gap: 24px;\n min-width: 0;\n ${({ $padded }) => $padded && \"padding-bottom: 24px;\"}\n`;\n\nexport const StyledStream = styled.div`\n display: contents;\n`;\n\nexport const StyledRail = styled.div`\n order: 2;\n display: flex;\n flex-direction: column;\n gap: 16px;\n min-width: 0;\n`;\n\nexport const StyledSplit = styled.div<{ $ownScroll: boolean }>`\n display: flex;\n flex: 1 1 0%;\n flex-direction: column;\n ${({ $ownScroll }) => $ownScroll && \"min-height: 0;\"}\n`;\n\nexport const StyledPart = styled.div`\n display: flex;\n flex-direction: column;\n min-width: 0;\n`;\n\nexport const StyledPartColumns = styled.div`\n display: flex;\n flex-direction: column;\n gap: 16px;\n min-width: 0;\n padding: 16px 16px 0;\n`;\n\nexport const StyledProperties = styled.div`\n min-width: 0;\n`;\n\nexport const StyledPanel = styled.div`\n position: relative;\n min-width: 0;\n padding: 0 16px;\n`;\n\nexport const StyledPanelHandle = styled(ResizeHandle)`\n display: none;\n z-index: 7;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,SAASC,YAAY,QAAQ,iBAAiB;AAE9C,OAAO,MAAMC,aAAa,0uDA4CzB;AAED,OAAO,MAAMC,kBAAkB,GAAGH,MAAM,CAACI,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,gLAKxCC,IAAA;EAAA,IAAGC,KAAK,GAAAD,IAAA,CAALC,KAAK;EAAA,OAAQA,KAAK,GAAG,eAAe,GAAG,mBAAmB;AAAA,CAAC,CAIjE;AAED,OAAO,MAAMC,YAAY,GAAGV,MAAM,CAACI,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,4CAElCI,KAAA;EAAA,IAAGC,MAAM,GAAAD,KAAA,CAANC,MAAM;EAAA,OAAO,CAACA,MAAM,IAAI,mCAAmC;AAAA,EACjE;AAED,OAAO,MAAMC,YAAY,GAAGb,MAAM,CAACI,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,2BAErC;AAED,OAAO,MAAMO,UAAU,GAAGd,MAAM,CAACI,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,wCAGnC;AAED,OAAO,MAAMQ,aAAa,GAAGf,MAAM,CAACI,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,kIAOtC;AAED,OAAO,MAAMS,UAAU,GAAGhB,MAAM,CAACI,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,yBAEnC;AAED,OAAO,MAAMU,UAAU,GAAGjB,MAAM,CAACI,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,6EAMhCW,KAAA;EAAA,IAAGC,OAAO,GAAAD,KAAA,CAAPC,OAAO;EAAA,OAAOA,OAAO,IAAI,uBAAuB;AAAA,EACtD;AAED,OAAO,MAAMC,YAAY,GAAGpB,MAAM,CAACI,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,yBAErC;AAED,OAAO,MAAMc,UAAU,GAAGrB,MAAM,CAACI,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,wEAMnC;AAED,OAAO,MAAMe,WAAW,GAAGtB,MAAM,CAACI,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,4DAIjCgB,KAAA;EAAA,IAAGC,UAAU,GAAAD,KAAA,CAAVC,UAAU;EAAA,OAAOA,UAAU,IAAI,gBAAgB;AAAA,EACrD;AAED,OAAO,MAAMC,UAAU,GAAGzB,MAAM,CAACI,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,uDAInC;AAED,OAAO,MAAMmB,iBAAiB,GAAG1B,MAAM,CAACI,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,oFAM1C;AAED,OAAO,MAAMoB,gBAAgB,GAAG3B,MAAM,CAACI,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,oBAEzC;AAED,OAAO,MAAMqB,WAAW,GAAG5B,MAAM,CAACI,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,qDAIpC;AAED,OAAO,MAAMsB,iBAAiB,GAAG7B,MAAM,CAACC,YAAY,CAAC,CAAAI,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,+BAGpD","ignoreList":[]}

package/dist/esm/components/Window/Window.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Window.d.ts","sourceRoot":"","sources":["../../../../src/components/Window/Window.tsx"],"names":[],"mappings":"AAAA,OAAO,~~KAAyD~~,MAAM,OAAO,CAAC;~~AAW9E~~,MAAM,WAAW,OAAO;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,gEAAgE;IAChE,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,mFAAmF;IACnF,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAID,eAAO,MAAM,MAAM,~~kMAgFlB~~,CAAC"}
1	+ {"version":3,"file":"Window.d.ts","sourceRoot":"","sources":["../../../../src/components/Window/Window.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAWf,MAAM,WAAW,OAAO;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,gEAAgE;IAChE,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,mFAAmF;IACnF,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAID,eAAO,MAAM,MAAM,kMA0GlB,CAAC"}

package/dist/esm/components/Window/Window.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["children", "onClose", "className", "style", "onKeyDown", "disableFocusLock", "disableScrollLock", "disableCloseOnEsc", "disableReturnFocus", "isolateScroll", "onClick"];
-import React, { useCallback, useRef, forwardRef } from "react";
+import React, { useCallback, useEffect, useRef, forwardRef } from "react";
 import FocusLock from "react-focus-lock";
 import { RemoveScroll } from "react-remove-scroll";
 import classnames from "classnames";
@@ -47,6 +47,23 @@ export const Window = /*#__PURE__*/forwardRef((_ref, ref) => {
       onKeyDown(event);
     }
   }, [disableCloseOnEsc, onClose, onKeyDown]);
+  // Focus that falls to the body, when the focused node unmounts, sends no key to the window.
+  useEffect(() => {
+    if (disableCloseOnEsc || !onClose) {
+      return undefined;
+    }
+    const handleBodyKeyDown = event => {
+      const windows = document.querySelectorAll(".c-window");
+      const isTopWindow = windows[windows.length - 1] === innerRef.current;
+      if (event.target === document.body && !event.defaultPrevented && (event.key === "Esc" || event.key === "Escape") && isTopWindow) {
+        event.preventDefault();
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", handleBodyKeyDown);
+    return () => document.removeEventListener("keydown", handleBodyKeyDown);
+  }, [disableCloseOnEsc, onClose]);
   const handleClick = useCallback(event => {
     event == null || event.stopPropagation();
     typeof onClick === "function" && onClick(event);

package/dist/esm/components/Window/Window.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Window.js","names":["React","useCallback","useRef","forwardRef","FocusLock","RemoveScroll","classnames","StyledWindow","Portal","useLayerContext","layers","useForkRef","returnFocus","preventScroll","Window","_ref","ref","children","onClose","className","style","onKeyDown","_ref$disableFocusLock","disableFocusLock","_ref$disableScrollLoc","disableScrollLock","_ref$disableCloseOnEs","disableCloseOnEsc","_ref$disableReturnFoc","disableReturnFocus","_ref$isolateScroll","isolateScroll","onClick","rest","_objectWithoutPropertiesLoose","_excluded","innerRef","handleRef","_useLayerContext","_useLayerContext$zInd","zIndex","skyscraper","handleKeyDown","event","defaultPrevented","key","preventDefault","stopPropagation","handleClick","createElement","disabled","forwardProps","enabled","noIsolation","_extends","tabIndex","displayName"],"sources":["../../../../src/components/Window/Window.tsx"],"sourcesContent":["import React, { useCallback, useRef, forwardRef, KeyboardEvent } from \"react\";\nimport FocusLock from \"react-focus-lock\";\nimport { RemoveScroll } from \"react-remove-scroll\";\n\nimport classnames from \"classnames\";\n\nimport { StyledWindow } from \"./Style\";\nimport { Portal, useLayerContext } from \"../../helpers\";\nimport { layers } from \"../../utils\";\nimport useForkRef from \"../../utils/useForkRef\";\n\nexport interface IWindow {\n onClose?: () => void;\n disableFocusLock?: boolean;\n disableScrollLock?: boolean;\n disableCloseOnEsc?: boolean;\n /** Leave the focus where it is when the focus lock turns off /\n disableReturnFocus?: boolean;\n /* With the scroll lock on, also stop the scroll that starts outside the window */\n isolateScroll?: boolean;\n}\n\nconst returnFocus = { preventScroll: true };\n\nexport const Window = forwardRef<\n HTMLDivElement,\n IWindow & Omit<React.ComponentPropsWithoutRef<\"div\">, keyof IWindow>\n>(\n (\n {\n children,\n onClose,\n className,\n style,\n onKeyDown,\n disableFocusLock = false,\n disableScrollLock = false,\n disableCloseOnEsc = false,\n disableReturnFocus = false,\n isolateScroll = false,\n onClick,\n ...rest\n },\n ref\n ) => {\n const innerRef = useRef<HTMLDivElement>(null);\n const handleRef = useForkRef(innerRef, ref);\n const { zIndex = layers.skyscraper } = useLayerContext();\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent<HTMLDivElement>) => {\n if (\n !event.defaultPrevented &&\n (event.key === \"Esc\" \|\| event.key === \"Escape\") &&\n !disableCloseOnEsc\n ) {\n event.preventDefault();\n event.stopPropagation();\n if (onClose) {\n onClose();\n }\n }\n if (typeof onKeyDown === \"function\") {\n onKeyDown(event);\n }\n },\n [disableCloseOnEsc, onClose, onKeyDown]\n );\n\n const handleClick = useCallback(\n (event) => {\n event?.stopPropagation();\n typeof onClick === \"function\" && onClick(event);\n },\n [onClick]\n );\n\n return (\n <Portal>\n <FocusLock\n returnFocus={disableReturnFocus ? false : returnFocus}\n disabled={disableFocusLock}\n >\n <RemoveScroll\n forwardProps\n ref={handleRef}\n enabled={!disableScrollLock}\n noIsolation={!isolateScroll}\n >\n <StyledWindow\n {...rest}\n style={{ zIndex, ...style }}\n onKeyDown={handleKeyDown}\n tabIndex={0}\n className={classnames(\"c-window\", className)}\n onClick={handleClick}\n >\n {children}\n </StyledWindow>\n </RemoveScroll>\n </FocusLock>\n </Portal>\n );\n }\n);\n\nWindow.displayName = \"Window\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,~~IAAIC~~,WAAW,~~EAAEC~~,MAAM,~~EAAEC~~,UAAU,~~QAAuB~~,OAAO;~~AAC7E~~,OAAOC,SAAS,MAAM,kBAAkB;AACxC,SAASC,YAAY,QAAQ,qBAAqB;AAElD,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,YAAY,QAAQ,SAAS;AACtC,SAASC,MAAM,EAAEC,eAAe,QAAQ,eAAe;AACvD,SAASC,MAAM,QAAQ,aAAa;AACpC,OAAOC,UAAU,MAAM,wBAAwB;AAa/C,MAAMC,WAAW,GAAG;EAAEC,aAAa,EAAE;AAAK,CAAC;AAE3C,OAAO,MAAMC,MAAM,gBAAGX,UAAU,CAI9B,CAAAY,IAAA,EAeEC,GAAG,KACA;EAAA,IAdDC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACRC,OAAO,GAAAH,IAAA,CAAPG,OAAO;IACPC,SAAS,GAAAJ,IAAA,CAATI,SAAS;IACTC,KAAK,GAAAL,IAAA,CAALK,KAAK;IACLC,SAAS,GAAAN,IAAA,CAATM,SAAS;IAAAC,qBAAA,GAAAP,IAAA,CACTQ,gBAAgB;IAAhBA,gBAAgB,GAAAD,qBAAA,cAAG,KAAK,GAAAA,qBAAA;IAAAE,qBAAA,GAAAT,IAAA,CACxBU,iBAAiB;IAAjBA,iBAAiB,GAAAD,qBAAA,cAAG,KAAK,GAAAA,qBAAA;IAAAE,qBAAA,GAAAX,IAAA,CACzBY,iBAAiB;IAAjBA,iBAAiB,GAAAD,qBAAA,cAAG,KAAK,GAAAA,qBAAA;IAAAE,qBAAA,GAAAb,IAAA,CACzBc,kBAAkB;IAAlBA,kBAAkB,GAAAD,qBAAA,cAAG,KAAK,GAAAA,qBAAA;IAAAE,kBAAA,GAAAf,IAAA,CAC1BgB,aAAa;IAAbA,aAAa,GAAAD,kBAAA,cAAG,KAAK,GAAAA,kBAAA;IACrBE,OAAO,GAAAjB,IAAA,CAAPiB,OAAO;IACJC,IAAI,GAAAC,6BAAA,CAAAnB,IAAA,EAAAoB,SAAA;EAIT,MAAMC,QAAQ,GAAGlC,MAAM,CAAiB,IAAI,CAAC;EAC7C,MAAMmC,SAAS,GAAG1B,UAAU,CAACyB,QAAQ,EAAEpB,GAAG,CAAC;EAC3C,MAAAsB,gBAAA,GAAuC7B,eAAe,CAAC,CAAC;IAAA8B,qBAAA,GAAAD,gBAAA,CAAhDE,MAAM;IAANA,MAAM,GAAAD,qBAAA,cAAG7B,MAAM,CAAC+B,UAAU,GAAAF,qBAAA;EAElC,MAAMG,aAAa,~~GAAGzC~~,WAAW,~~CAC9B0C~~,KAAoC,IAAK;IACxC,IACE,CAACA,KAAK,CAACC,gBAAgB,KACtBD,KAAK,CAACE,GAAG,KAAK,KAAK,IAAIF,KAAK,CAACE,GAAG,KAAK,QAAQ,CAAC,IAC/C,CAAClB,iBAAiB,EAClB;MACAgB,KAAK,CAACG,cAAc,CAAC,CAAC;MACtBH,KAAK,CAACI,eAAe,CAAC,CAAC;MACvB,IAAI7B,OAAO,EAAE;QACXA,OAAO,CAAC,CAAC;MACX;IACF;IACA,IAAI,OAAOG,SAAS,KAAK,UAAU,EAAE;MACnCA,SAAS,CAACsB,KAAK,CAAC;IAClB;EACF,CAAC,EACD,CAAChB,iBAAiB,EAAET,OAAO,EAAEG,SAAS,CACxC,CAAC;~~EAED~~,~~MAAM2B~~,WAAW,GAAG/C,WAAW,~~CAC5B0C~~,KAAK,IAAK;IACTA,KAAK,YAALA,KAAK,CAAEI,eAAe,CAAC,CAAC;IACxB,OAAOf,OAAO,KAAK,UAAU,IAAIA,OAAO,CAACW,KAAK,CAAC;EACjD,CAAC,EACD,CAACX,OAAO,CACV,CAAC;EAED,~~oBACEhC~~,KAAA,~~CAAAiD~~,aAAA,~~CAACzC~~,MAAM,~~qBACLR~~,KAAA,~~CAAAiD~~,aAAA,~~CAAC7C~~,SAAS;IACRQ,WAAW,EAAEiB,kBAAkB,GAAG,KAAK,GAAGjB,WAAY;~~IACtDsC~~,QAAQ,~~EAAE3B~~;EAAiB,~~gBAE3BvB~~,KAAA,~~CAAAiD~~,aAAA,~~CAAC5C~~,YAAY;~~IACX8C~~,YAAY;~~IACZnC~~,GAAG,EAAEqB,SAAU;~~IACfe~~,OAAO,EAAE,~~CAAC3B~~,iBAAkB;~~IAC5B4B~~,WAAW,EAAE,~~CAACtB~~;EAAc,~~gBAE5B/B~~,KAAA,~~CAAAiD~~,aAAA,~~CAAC1C~~,YAAY,~~EAAA+C~~,QAAA,~~KACPrB~~,IAAI;IACRb,KAAK,~~EAAAkC~~,QAAA;~~MAAId~~;IAAM,GAAKpB,KAAK,CAAG;IAC5BC,SAAS,EAAEqB,aAAc;~~IACzBa~~,QAAQ,EAAE,CAAE;~~IACZpC~~,SAAS,EAAEb,UAAU,CAAC,UAAU,EAAEa,SAAS,CAAE;IAC7Ca,OAAO,~~EAAEgB~~;EAAY,~~IAEpB/B~~,QACW,CACF,CACL,CACL,CAAC;AAEb,CACF,CAAC;AAEDH,MAAM,~~CAAC0C~~,WAAW,GAAG,QAAQ","ignoreList":[]}
1	+ {"version":3,"file":"Window.js","names":["React","useCallback","useEffect","useRef","forwardRef","FocusLock","RemoveScroll","classnames","StyledWindow","Portal","useLayerContext","layers","useForkRef","returnFocus","preventScroll","Window","_ref","ref","children","onClose","className","style","onKeyDown","_ref$disableFocusLock","disableFocusLock","_ref$disableScrollLoc","disableScrollLock","_ref$disableCloseOnEs","disableCloseOnEsc","_ref$disableReturnFoc","disableReturnFocus","_ref$isolateScroll","isolateScroll","onClick","rest","_objectWithoutPropertiesLoose","_excluded","innerRef","handleRef","_useLayerContext","_useLayerContext$zInd","zIndex","skyscraper","handleKeyDown","event","defaultPrevented","key","preventDefault","stopPropagation","undefined","handleBodyKeyDown","windows","document","querySelectorAll","isTopWindow","length","current","target","body","addEventListener","removeEventListener","handleClick","createElement","disabled","forwardProps","enabled","noIsolation","_extends","tabIndex","displayName"],"sources":["../../../../src/components/Window/Window.tsx"],"sourcesContent":["import React, {\n useCallback,\n useEffect,\n useRef,\n forwardRef,\n KeyboardEvent,\n} from \"react\";\nimport FocusLock from \"react-focus-lock\";\nimport { RemoveScroll } from \"react-remove-scroll\";\n\nimport classnames from \"classnames\";\n\nimport { StyledWindow } from \"./Style\";\nimport { Portal, useLayerContext } from \"../../helpers\";\nimport { layers } from \"../../utils\";\nimport useForkRef from \"../../utils/useForkRef\";\n\nexport interface IWindow {\n onClose?: () => void;\n disableFocusLock?: boolean;\n disableScrollLock?: boolean;\n disableCloseOnEsc?: boolean;\n /** Leave the focus where it is when the focus lock turns off /\n disableReturnFocus?: boolean;\n /* With the scroll lock on, also stop the scroll that starts outside the window */\n isolateScroll?: boolean;\n}\n\nconst returnFocus = { preventScroll: true };\n\nexport const Window = forwardRef<\n HTMLDivElement,\n IWindow & Omit<React.ComponentPropsWithoutRef<\"div\">, keyof IWindow>\n>(\n (\n {\n children,\n onClose,\n className,\n style,\n onKeyDown,\n disableFocusLock = false,\n disableScrollLock = false,\n disableCloseOnEsc = false,\n disableReturnFocus = false,\n isolateScroll = false,\n onClick,\n ...rest\n },\n ref\n ) => {\n const innerRef = useRef<HTMLDivElement>(null);\n const handleRef = useForkRef(innerRef, ref);\n const { zIndex = layers.skyscraper } = useLayerContext();\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent<HTMLDivElement>) => {\n if (\n !event.defaultPrevented &&\n (event.key === \"Esc\" \|\| event.key === \"Escape\") &&\n !disableCloseOnEsc\n ) {\n event.preventDefault();\n event.stopPropagation();\n if (onClose) {\n onClose();\n }\n }\n if (typeof onKeyDown === \"function\") {\n onKeyDown(event);\n }\n },\n [disableCloseOnEsc, onClose, onKeyDown]\n );\n\n // Focus that falls to the body, when the focused node unmounts, sends no key to the window.\n useEffect(() => {\n if (disableCloseOnEsc \|\| !onClose) {\n return undefined;\n }\n\n const handleBodyKeyDown = (event: globalThis.KeyboardEvent) => {\n const windows = document.querySelectorAll(\".c-window\");\n const isTopWindow = windows[windows.length - 1] === innerRef.current;\n\n if (\n event.target === document.body &&\n !event.defaultPrevented &&\n (event.key === \"Esc\" \|\| event.key === \"Escape\") &&\n isTopWindow\n ) {\n event.preventDefault();\n onClose();\n }\n };\n\n document.addEventListener(\"keydown\", handleBodyKeyDown);\n\n return () => document.removeEventListener(\"keydown\", handleBodyKeyDown);\n }, [disableCloseOnEsc, onClose]);\n\n const handleClick = useCallback(\n (event) => {\n event?.stopPropagation();\n typeof onClick === \"function\" && onClick(event);\n },\n [onClick]\n );\n\n return (\n <Portal>\n <FocusLock\n returnFocus={disableReturnFocus ? false : returnFocus}\n disabled={disableFocusLock}\n >\n <RemoveScroll\n forwardProps\n ref={handleRef}\n enabled={!disableScrollLock}\n noIsolation={!isolateScroll}\n >\n <StyledWindow\n {...rest}\n style={{ zIndex, ...style }}\n onKeyDown={handleKeyDown}\n tabIndex={0}\n className={classnames(\"c-window\", className)}\n onClick={handleClick}\n >\n {children}\n </StyledWindow>\n </RemoveScroll>\n </FocusLock>\n </Portal>\n );\n }\n);\n\nWindow.displayName = \"Window\";\n"],"mappings":"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","ignoreList":[]}