npm - @apia/components - Versions diffs - 2.0.11 → 2.0.12 - Mend

@apia/components 2.0.11 → 2.0.12

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 (5) hide show

package/dist/components/Toolbar/ToolbarIconButton.js CHANGED Viewed

@@ -81,12 +81,12 @@ const ToolbarIconButton = ({
       if (context.itemsState[id].toggled !== void 0) {
         setInnerIsToggled(!!context.itemsState[id].toggled);
       }
-    } else
+    } else {
       context.itemsState[id] = {
         disabled: isDisabled,
-        toggled: innerIsToggled,
-        ...context.itemsState[id]
+        toggled: innerIsToggled
       };
+    }
   });
   return /* @__PURE__ */ jsx(
     IconButton,

package/dist/components/Toolbar/ToolbarIconButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ToolbarIconButton.js","sources":["../../../src/components/Toolbar/ToolbarIconButton.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\r\nimport { useToolbarControllerContext } from './ToolbarController';\r\nimport { TToolbarIconButton } from './types';\r\nimport { useMount, usePrevious } from '@apia/util';\r\nimport { IconButton } from '../forms';\r\n\r\nexport const ToolbarIconButton = ({\r\n id,\r\n action,\r\n allowToggle,\r\n defaultToggled,\r\n disabled,\r\n icon,\r\n iconSize,\r\n isLoading: outerIsLoading,\r\n title,\r\n toggled: toggledProp,\r\n}: TToolbarIconButton) => {\r\n const [innerIsToggled, setInnerIsToggled] = useState<boolean>(\r\n toggledProp ?? (allowToggle ? defaultToggled ?? false : false),\r\n );\r\n const [isDisabled, setIsDisabled] = useState(!!disabled);\r\n const context = useToolbarControllerContext();\r\n const [isLoading, setIsLoading] = useState(false);\r\n\r\n const previousIsLoading = usePrevious(outerIsLoading);\r\n if (previousIsLoading.current !== outerIsLoading)\r\n setIsLoading(!!outerIsLoading);\r\n\r\n const lastDisabledProp = usePrevious(disabled);\r\n if (lastDisabledProp.current !== disabled) {\r\n setIsDisabled(!!disabled);\r\n }\r\n\r\n /*\r\n Si la prop toggled cambia y no está undefined, se debe actualizar el\r\n * estado interno.\r\n /\r\n const lastToggledProp = useRef<boolean \| undefined>(toggledProp);\r\n if (\r\n toggledProp !== undefined &&\r\n innerIsToggled !== toggledProp &&\r\n lastToggledProp.current !== toggledProp\r\n ) {\r\n lastToggledProp.current = toggledProp;\r\n setInnerIsToggled(toggledProp);\r\n }\r\n\r\n const handleClick = useCallback(async () => {\r\n setIsLoading(true);\r\n try {\r\n if (lastToggledProp.current !== undefined) {\r\n await action(\r\n { isToggled: !lastToggledProp.current, isLoading },\r\n context,\r\n );\r\n } else if (allowToggle) {\r\n let isToggled = false;\r\n setInnerIsToggled((current) => {\r\n isToggled = !current;\r\n return isToggled;\r\n });\r\n await action({ isToggled, isLoading }, context);\r\n } else {\r\n await action({ isToggled: false, isLoading }, context);\r\n }\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n setIsLoading(false);\r\n }, [action, allowToggle, context, isLoading]);\r\n\r\n /\r\n Se maneja el uso de teclado para hacer click sobre el elemento\r\n */\r\n useEffect(() => {\r\n const unsuscribe1 = context.on('updateItemState', (evId) => {\r\n if (evId === id) {\r\n setInnerIsToggled(!!context.itemsState[evId].toggled);\r\n setIsDisabled(!!context.itemsState[evId].disabled);\r\n }\r\n });\r\n const unsuscribe2 = context.on('pressEnter', (evId) => {\r\n if (evId === id) void handleClick();\r\n });\r\n\r\n return () => {\r\n unsuscribe1();\r\n unsuscribe2();\r\n };\r\n }, [context, id, handleClick]);\r\n\r\n useMount(() => {\r\n if (context.itemsState[id]) {\r\n if (context.itemsState[id].disabled !== undefined) {\r\n setIsDisabled(!!context.itemsState[id].disabled);\r\n }\r\n if (context.itemsState[id].toggled !== undefined) {\r\n setInnerIsToggled(!!context.itemsState[id].toggled);\r\n }\r\n } else\r\n context.itemsState[id] = {\r\n disabled: isDisabled,\r\n toggled: innerIsToggled,\r\n ~~...context.itemsState[id],\~~r\n };\r\n });\r\n\r\n return (\r\n <IconButton\r\n className={`toolbar__button ${innerIsToggled ? 'toggled' : ''}`}\r\n size={iconSize ?? 'Md'}\r\n icon={icon}\r\n onClick={handleClick}\r\n data-id={id}\r\n title={title}\r\n disabled={isDisabled}\r\n variant=\"icon-outline\"\r\n isLoading={isLoading}\r\n />\r\n );\r\n};\r\n"],"names":[],"mappings":"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~~KACF~~;~~AACE~~,MAAQ,OAAA,CAAA,UAAA,CAAW,EAAE,CAAI,GAAA;AAAA,QACvB,QAAU,EAAA,UAAA;AAAA,QACV,OAAS,EAAA,cAAA;AAAA,~~QACT~~,~~GAAG,OAAQ,~~CAAA~~,UAAA,CAAW,EAAE,CAAA~~;AAAA,~~OAC1B,CAAA~~;AAAA,~~GACH~~,CAAA,CAAA;AAED,EACE,uBAAA,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,CAAA,gBAAA,EAAmB,cAAiB,GAAA,SAAA,GAAY,EAAE,CAAA,CAAA;AAAA,MAC7D,MAAM,QAAY,IAAA,IAAA;AAAA,MAClB,IAAA;AAAA,MACA,OAAS,EAAA,WAAA;AAAA,MACT,SAAS,EAAA,EAAA;AAAA,MACT,KAAA;AAAA,MACA,QAAU,EAAA,UAAA;AAAA,MACV,OAAQ,EAAA,cAAA;AAAA,MACR,SAAA;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"ToolbarIconButton.js","sources":["../../../src/components/Toolbar/ToolbarIconButton.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\r\nimport { useToolbarControllerContext } from './ToolbarController';\r\nimport { TToolbarIconButton } from './types';\r\nimport { useMount, usePrevious } from '@apia/util';\r\nimport { IconButton } from '../forms';\r\n\r\nexport const ToolbarIconButton = ({\r\n id,\r\n action,\r\n allowToggle,\r\n defaultToggled,\r\n disabled,\r\n icon,\r\n iconSize,\r\n isLoading: outerIsLoading,\r\n title,\r\n toggled: toggledProp,\r\n}: TToolbarIconButton) => {\r\n const [innerIsToggled, setInnerIsToggled] = useState<boolean>(\r\n toggledProp ?? (allowToggle ? defaultToggled ?? false : false),\r\n );\r\n const [isDisabled, setIsDisabled] = useState(!!disabled);\r\n const context = useToolbarControllerContext();\r\n const [isLoading, setIsLoading] = useState(false);\r\n\r\n const previousIsLoading = usePrevious(outerIsLoading);\r\n if (previousIsLoading.current !== outerIsLoading)\r\n setIsLoading(!!outerIsLoading);\r\n\r\n const lastDisabledProp = usePrevious(disabled);\r\n if (lastDisabledProp.current !== disabled) {\r\n setIsDisabled(!!disabled);\r\n }\r\n\r\n /*\r\n Si la prop toggled cambia y no está undefined, se debe actualizar el\r\n * estado interno.\r\n /\r\n const lastToggledProp = useRef<boolean \| undefined>(toggledProp);\r\n if (\r\n toggledProp !== undefined &&\r\n innerIsToggled !== toggledProp &&\r\n lastToggledProp.current !== toggledProp\r\n ) {\r\n lastToggledProp.current = toggledProp;\r\n setInnerIsToggled(toggledProp);\r\n }\r\n\r\n const handleClick = useCallback(async () => {\r\n setIsLoading(true);\r\n try {\r\n if (lastToggledProp.current !== undefined) {\r\n await action(\r\n { isToggled: !lastToggledProp.current, isLoading },\r\n context,\r\n );\r\n } else if (allowToggle) {\r\n let isToggled = false;\r\n setInnerIsToggled((current) => {\r\n isToggled = !current;\r\n return isToggled;\r\n });\r\n await action({ isToggled, isLoading }, context);\r\n } else {\r\n await action({ isToggled: false, isLoading }, context);\r\n }\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n setIsLoading(false);\r\n }, [action, allowToggle, context, isLoading]);\r\n\r\n /\r\n Se maneja el uso de teclado para hacer click sobre el elemento\r\n */\r\n useEffect(() => {\r\n const unsuscribe1 = context.on('updateItemState', (evId) => {\r\n if (evId === id) {\r\n setInnerIsToggled(!!context.itemsState[evId].toggled);\r\n setIsDisabled(!!context.itemsState[evId].disabled);\r\n }\r\n });\r\n const unsuscribe2 = context.on('pressEnter', (evId) => {\r\n if (evId === id) void handleClick();\r\n });\r\n\r\n return () => {\r\n unsuscribe1();\r\n unsuscribe2();\r\n };\r\n }, [context, id, handleClick]);\r\n\r\n useMount(() => {\r\n if (context.itemsState[id]) {\r\n if (context.itemsState[id].disabled !== undefined) {\r\n setIsDisabled(!!context.itemsState[id].disabled);\r\n }\r\n if (context.itemsState[id].toggled !== undefined) {\r\n setInnerIsToggled(!!context.itemsState[id].toggled);\r\n }\r\n } else {\r\n context.itemsState[id] = {\r\n disabled: isDisabled,\r\n toggled: innerIsToggled,\r\n };\r\n }\r\n });\r\n\r\n return (\r\n <IconButton\r\n className={`toolbar__button ${innerIsToggled ? 'toggled' : ''}`}\r\n size={iconSize ?? 'Md'}\r\n icon={icon}\r\n onClick={handleClick}\r\n data-id={id}\r\n title={title}\r\n disabled={isDisabled}\r\n variant=\"icon-outline\"\r\n isLoading={isLoading}\r\n />\r\n );\r\n};\r\n"],"names":[],"mappings":";;;;;;AAMO,MAAM,oBAAoB,CAAC;AAAA,EAChC,EAAA;AAAA,EACA,MAAA;AAAA,EACA,WAAA;AAAA,EACA,cAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAW,EAAA,cAAA;AAAA,EACX,KAAA;AAAA,EACA,OAAS,EAAA,WAAA;AACX,CAA0B,KAAA;AACxB,EAAM,MAAA,CAAC,cAAgB,EAAA,iBAAiB,CAAI,GAAA,QAAA;AAAA,IAC1C,WAAA,KAAgB,WAAc,GAAA,cAAA,IAAkB,KAAQ,GAAA,KAAA,CAAA;AAAA,GAC1D,CAAA;AACA,EAAA,MAAM,CAAC,UAAY,EAAA,aAAa,IAAI,QAAS,CAAA,CAAC,CAAC,QAAQ,CAAA,CAAA;AACvD,EAAA,MAAM,UAAU,2BAA4B,EAAA,CAAA;AAC5C,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAEhD,EAAM,MAAA,iBAAA,GAAoB,YAAY,cAAc,CAAA,CAAA;AACpD,EAAA,IAAI,kBAAkB,OAAY,KAAA,cAAA;AAChC,IAAa,YAAA,CAAA,CAAC,CAAC,cAAc,CAAA,CAAA;AAE/B,EAAM,MAAA,gBAAA,GAAmB,YAAY,QAAQ,CAAA,CAAA;AAC7C,EAAI,IAAA,gBAAA,CAAiB,YAAY,QAAU,EAAA;AACzC,IAAc,aAAA,CAAA,CAAC,CAAC,QAAQ,CAAA,CAAA;AAAA,GAC1B;AAMA,EAAM,MAAA,eAAA,GAAkB,OAA4B,WAAW,CAAA,CAAA;AAC/D,EAAA,IACE,gBAAgB,KAChB,CAAA,IAAA,cAAA,KAAmB,WACnB,IAAA,eAAA,CAAgB,YAAY,WAC5B,EAAA;AACA,IAAA,eAAA,CAAgB,OAAU,GAAA,WAAA,CAAA;AAC1B,IAAA,iBAAA,CAAkB,WAAW,CAAA,CAAA;AAAA,GAC/B;AAEA,EAAM,MAAA,WAAA,GAAc,YAAY,YAAY;AAC1C,IAAA,YAAA,CAAa,IAAI,CAAA,CAAA;AACjB,IAAI,IAAA;AACF,MAAI,IAAA,eAAA,CAAgB,YAAY,KAAW,CAAA,EAAA;AACzC,QAAM,MAAA,MAAA;AAAA,UACJ,EAAE,SAAA,EAAW,CAAC,eAAA,CAAgB,SAAS,SAAU,EAAA;AAAA,UACjD,OAAA;AAAA,SACF,CAAA;AAAA,iBACS,WAAa,EAAA;AACtB,QAAA,IAAI,SAAY,GAAA,KAAA,CAAA;AAChB,QAAA,iBAAA,CAAkB,CAAC,OAAY,KAAA;AAC7B,UAAA,SAAA,GAAY,CAAC,OAAA,CAAA;AACb,UAAO,OAAA,SAAA,CAAA;AAAA,SACR,CAAA,CAAA;AACD,QAAA,MAAM,MAAO,CAAA,EAAE,SAAW,EAAA,SAAA,IAAa,OAAO,CAAA,CAAA;AAAA,OACzC,MAAA;AACL,QAAA,MAAM,OAAO,EAAE,SAAA,EAAW,KAAO,EAAA,SAAA,IAAa,OAAO,CAAA,CAAA;AAAA,OACvD;AAAA,aACO,CAAG,EAAA;AACV,MAAA,OAAA,CAAQ,MAAM,CAAC,CAAA,CAAA;AAAA,KACjB;AACA,IAAA,YAAA,CAAa,KAAK,CAAA,CAAA;AAAA,KACjB,CAAC,MAAA,EAAQ,WAAa,EAAA,OAAA,EAAS,SAAS,CAAC,CAAA,CAAA;AAK5C,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,WAAc,GAAA,OAAA,CAAQ,EAAG,CAAA,iBAAA,EAAmB,CAAC,IAAS,KAAA;AAC1D,MAAA,IAAI,SAAS,EAAI,EAAA;AACf,QAAA,iBAAA,CAAkB,CAAC,CAAC,OAAA,CAAQ,UAAW,CAAA,IAAI,EAAE,OAAO,CAAA,CAAA;AACpD,QAAA,aAAA,CAAc,CAAC,CAAC,OAAA,CAAQ,UAAW,CAAA,IAAI,EAAE,QAAQ,CAAA,CAAA;AAAA,OACnD;AAAA,KACD,CAAA,CAAA;AACD,IAAA,MAAM,WAAc,GAAA,OAAA,CAAQ,EAAG,CAAA,YAAA,EAAc,CAAC,IAAS,KAAA;AACrD,MAAA,IAAI,IAAS,KAAA,EAAA;AAAI,QAAA,KAAK,WAAY,EAAA,CAAA;AAAA,KACnC,CAAA,CAAA;AAED,IAAA,OAAO,MAAM;AACX,MAAY,WAAA,EAAA,CAAA;AACZ,MAAY,WAAA,EAAA,CAAA;AAAA,KACd,CAAA;AAAA,GACC,EAAA,CAAC,OAAS,EAAA,EAAA,EAAI,WAAW,CAAC,CAAA,CAAA;AAE7B,EAAA,QAAA,CAAS,MAAM;AACb,IAAI,IAAA,OAAA,CAAQ,UAAW,CAAA,EAAE,CAAG,EAAA;AAC1B,MAAA,IAAI,OAAQ,CAAA,UAAA,CAAW,EAAE,CAAA,CAAE,aAAa,KAAW,CAAA,EAAA;AACjD,QAAA,aAAA,CAAc,CAAC,CAAC,OAAA,CAAQ,UAAW,CAAA,EAAE,EAAE,QAAQ,CAAA,CAAA;AAAA,OACjD;AACA,MAAA,IAAI,OAAQ,CAAA,UAAA,CAAW,EAAE,CAAA,CAAE,YAAY,KAAW,CAAA,EAAA;AAChD,QAAA,iBAAA,CAAkB,CAAC,CAAC,OAAA,CAAQ,UAAW,CAAA,EAAE,EAAE,OAAO,CAAA,CAAA;AAAA,OACpD;AAAA,KACK,MAAA;AACL,MAAQ,OAAA,CAAA,UAAA,CAAW,EAAE,CAAI,GAAA;AAAA,QACvB,QAAU,EAAA,UAAA;AAAA,QACV,OAAS,EAAA,cAAA;AAAA,OACX,CAAA;AAAA,KACF;AAAA,GACD,CAAA,CAAA;AAED,EACE,uBAAA,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,CAAA,gBAAA,EAAmB,cAAiB,GAAA,SAAA,GAAY,EAAE,CAAA,CAAA;AAAA,MAC7D,MAAM,QAAY,IAAA,IAAA;AAAA,MAClB,IAAA;AAAA,MACA,OAAS,EAAA,WAAA;AAAA,MACT,SAAS,EAAA,EAAA;AAAA,MACT,KAAA;AAAA,MACA,QAAU,EAAA,UAAA;AAAA,MACV,OAAQ,EAAA,cAAA;AAAA,MACR,SAAA;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ;;;;"}

package/dist/components/modals/WindowModal.js CHANGED Viewed

@@ -9,6 +9,7 @@ import { useInitialFocus } from './hooks/useInitialFocus.js';
 import { useCombinedRefs, addBoundary } from '@apia/util';
 import { useStyleState } from './hooks/useStyleState.js';
 import { uniqueId } from '@apia/notifications';
+import { FreeFocusInside } from 'react-focus-lock';
 const WindowModal = forwardRef(
   ({
@@ -117,7 +118,7 @@ const WindowModal = forwardRef(
                 id: `modal__${innerId}`,
                 ...variant ? getVariant(variant) : {},
                 sx: { zIndex: "modal" },
-                children: /* @__PURE__ */ jsxs(
+                children: /* @__PURE__ */ jsx(FreeFocusInside, { children: /* @__PURE__ */ jsxs(
                   Box,
                   {
                     id,
@@ -187,7 +188,10 @@ const WindowModal = forwardRef(
                               "mousemove",
                               handleMouseMove
                             );
-                            document.removeEventListener("mouseup", handleMouseUp);
+                            document.removeEventListener(
+                              "mouseup",
+                              handleMouseUp
+                            );
                           };
                         }
                       },
@@ -215,7 +219,7 @@ const WindowModal = forwardRef(
                       )
                     ]
                   }
-                )
+                ) })
               }
             )
           }

package/dist/components/modals/WindowModal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"WindowModal.js","sources":["../../../src/components/modals/WindowModal.tsx"],"sourcesContent":["import {\r\n forwardRef,\r\n useCallback,\r\n useEffect,\r\n useMemo,\r\n useRef,\r\n useState,\r\n Fragment,\r\n} from 'react';\r\nimport { TModal } from './Modal';\r\nimport { CSSTransition } from 'react-transition-group';\r\nimport { Box, getVariant } from '@apia/theme';\r\nimport DialogHeader from './layout/DialogHeader';\r\nimport { ModalContext } from './ModalContext';\r\nimport { useEscapeKey } from './hooks/useEscapeKey';\r\nimport { useInitialFocus } from './hooks/useInitialFocus';\r\nimport { addBoundary, useCombinedRefs } from '@apia/util';\r\nimport { useStyleState } from './hooks/useStyleState';\r\nimport { uniqueId } from '@apia/notifications';\r\n\r\nexport const WindowModal = forwardRef<HTMLDivElement, TModal>(\r\n (\r\n {\r\n animationDuration = 150,\r\n children = null,\r\n className,\r\n defaultPosition,\r\n hideCloseButton,\r\n id,\r\n initialFocusConfiguration,\r\n initialFocusGetter,\r\n initialFocusRef,\r\n isOpen = false,\r\n maxWidth,\r\n NavBar,\r\n noFocus,\r\n noHeader = false,\r\n onClose = () => {},\r\n onDragStart = () => {},\r\n onExited = () => {},\r\n Portal,\r\n shouldCloseOnEsc = true,\r\n size = 'md',\r\n title = '',\r\n variant,\r\n },\r\n ref,\r\n ) => {\r\n const innerId = useMemo(() => {\r\n return `Modal${uniqueId()}`;\r\n }, []);\r\n const nodeRef = useRef<HTMLElement \| null>(null);\r\n\r\n const lastTitle = useRef(title);\r\n const [innerTitle, setInnerTitle] = useState(title);\r\n if (lastTitle.current !== title && innerTitle !== title) {\r\n setInnerTitle(title);\r\n }\r\n const [isOpenInner, setIsOpen] = useState(isOpen);\r\n useEffect(() => {\r\n setIsOpen(isOpen);\r\n }, [isOpen]);\r\n\r\n const closeHandler = useCallback(() => {\r\n setIsOpen(false);\r\n onClose();\r\n }, [onClose]);\r\n\r\n useEscapeKey({ closeHandler, id: innerId, isOpenInner, shouldCloseOnEsc });\r\n useInitialFocus({\r\n isOpenInner,\r\n initialFocusConfiguration,\r\n initialFocusGetter,\r\n initialFocusRef,\r\n noFocus,\r\n parentElement: nodeRef.current,\r\n });\r\n\r\n const Wrapper = useMemo(() => {\r\n return Portal ?? Fragment;\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, []);\r\n\r\n const { ref: stylesRef, setState: setStyle } = useStyleState(() => {\r\n return {\r\n position: 'fixed',\r\n ...(defaultPosition ?? {\r\n left: '50%',\r\n top: '50%',\r\n }),\r\n };\r\n });\r\n\r\n const unSubscribe = useRef(() => {});\r\n const initialPosition = useRef<null \| DOMRect>(null);\r\n const initialMousePosition = useRef<null \| { x: number; y: number }>(null);\r\n const assignRefs = useCombinedRefs(\r\n nodeRef as unknown as React.ForwardedRef<unknown>,\r\n ref as unknown as React.Ref<unknown>,\r\n stylesRef as unknown as React.Ref<unknown>,\r\n );\r\n\r\n return (\r\n <Wrapper>\r\n <ModalContext.Provider\r\n value={useMemo(() => {\r\n return {\r\n changeTitle: (newTitle) => {\r\n setInnerTitle(newTitle);\r\n },\r\n close: () => {\r\n closeHandler();\r\n },\r\n descriptionId: `${innerId}_Description`,\r\n };\r\n }, [closeHandler, innerId])}\r\n >\r\n <CSSTransition\r\n in={isOpen}\r\n timeout={animationDuration}\r\n classNames=\"modal\"\r\n appear\r\n unmountOnExit\r\n nodeRef={nodeRef}\r\n onExited={onExited}\r\n >\r\n <Box\r\n ref={assignRefs}\r\n className={`modal__variantWrapper window__modal ${className ?? ''}`}\r\n id={`modal__${innerId}`}\r\n {...(variant ? getVariant(variant) : {})}\r\n sx={{ zIndex: 'modal' }}\r\n >\r\n <Box\r\n id={id}\r\n role=\"dialog\"\r\n aria-modal=\"true\"\r\n aria-label={title}\r\n aria-describedby={`${innerId}_Description`}\r\n aria-hidden=\"false\"\r\n className=\"modal__main\"\r\n // allows scrolling within element, despite body lock\r\n data-scroll-lock-scrollable\r\n sx={useMemo(() => {\r\n return {\r\n variant: `layout.common.modals.${size}`,\r\n ...(maxWidth !== undefined ? { maxWidth } : {}),\r\n };\r\n }, [maxWidth, size])}\r\n data-variant={`layout.common.modals.${size}`}\r\n ref={useCallback(\r\n (el: null \| HTMLElement) => {\r\n unSubscribe.current();\r\n unSubscribe.current = () => {};\r\n\r\n if (el) {\r\n const handleMouseDown = (ev: MouseEvent) => {\r\n const res = onDragStart?.(ev);\r\n if (res === false) return;\r\n\r\n const rect = el.getBoundingClientRect();\r\n initialPosition.current = rect;\r\n initialMousePosition.current = {\r\n x: ev.clientX,\r\n y: ev.clientY,\r\n };\r\n };\r\n const handleMouseMove = (ev: MouseEvent) => {\r\n if (initialPosition.current) {\r\n ev.preventDefault();\r\n const diffX =\r\n ev.clientX - initialMousePosition.current!.x;\r\n const diffY =\r\n ev.clientY - initialMousePosition.current!.y;\r\n\r\n const newLeft = addBoundary(\r\n initialPosition.current.left + diffX,\r\n 0,\r\n window.innerWidth - 50,\r\n );\r\n const newTop = addBoundary(\r\n initialPosition.current.top + diffY,\r\n 0,\r\n window.innerHeight - 50,\r\n );\r\n\r\n setStyle({\r\n left: `${newLeft}px`,\r\n top: `${newTop}px`,\r\n right: 'unset',\r\n bottom: 'unset',\r\n });\r\n }\r\n };\r\n\r\n const handleMouseUp = () => {\r\n initialPosition.current = null;\r\n };\r\n\r\n el.addEventListener('mousedown', handleMouseDown);\r\n document.addEventListener('mousemove', handleMouseMove);\r\n document.addEventListener('mouseup', handleMouseUp);\r\n\r\n unSubscribe.current = () => {\r\n el.removeEventListener('mousedown', handleMouseDown);\r\n document.removeEventListener(\r\n 'mousemove',\r\n handleMouseMove,\r\n );\r\n document.removeEventListener('mouseup', handleMouseUp);\r\n };\r\n }\r\n },\r\n [onDragStart, setStyle],\r\n )}\r\n >\r\n {!noHeader && (\r\n <DialogHeader\r\n className=\"modal__header\"\r\n NavBar={NavBar}\r\n title={innerTitle}\r\n close={closeHandler}\r\n hideCloseButton={hideCloseButton}\r\n id={`${innerId}_Header`}\r\n />\r\n )}\r\n <Box\r\n className=\"modal__content\"\r\n id={\r\n typeof children === 'string'\r\n ? `${innerId}_Description`\r\n : undefined\r\n }\r\n >\r\n {children}\r\n </Box>\r\n </Box>\r\n </Box>\r\n </CSSTransition>\r\n </ModalContext.Provider>\r\n </Wrapper>\r\n );\r\n },\r\n);\r\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"WindowModal.js","sources":["../../../src/components/modals/WindowModal.tsx"],"sourcesContent":["import {\r\n forwardRef,\r\n useCallback,\r\n useEffect,\r\n useMemo,\r\n useRef,\r\n useState,\r\n Fragment,\r\n} from 'react';\r\nimport { TModal } from './Modal';\r\nimport { CSSTransition } from 'react-transition-group';\r\nimport { Box, getVariant } from '@apia/theme';\r\nimport DialogHeader from './layout/DialogHeader';\r\nimport { ModalContext } from './ModalContext';\r\nimport { useEscapeKey } from './hooks/useEscapeKey';\r\nimport { useInitialFocus } from './hooks/useInitialFocus';\r\nimport { addBoundary, useCombinedRefs } from '@apia/util';\r\nimport { useStyleState } from './hooks/useStyleState';\r\nimport { uniqueId } from '@apia/notifications';\r\nimport { FreeFocusInside } from 'react-focus-lock';\r\n\r\nexport const WindowModal = forwardRef<HTMLDivElement, TModal>(\r\n (\r\n {\r\n animationDuration = 150,\r\n children = null,\r\n className,\r\n defaultPosition,\r\n hideCloseButton,\r\n id,\r\n initialFocusConfiguration,\r\n initialFocusGetter,\r\n initialFocusRef,\r\n isOpen = false,\r\n maxWidth,\r\n NavBar,\r\n noFocus,\r\n noHeader = false,\r\n onClose = () => {},\r\n onDragStart = () => {},\r\n onExited = () => {},\r\n Portal,\r\n shouldCloseOnEsc = true,\r\n size = 'md',\r\n title = '',\r\n variant,\r\n },\r\n ref,\r\n ) => {\r\n const innerId = useMemo(() => {\r\n return `Modal${uniqueId()}`;\r\n }, []);\r\n const nodeRef = useRef<HTMLElement \| null>(null);\r\n\r\n const lastTitle = useRef(title);\r\n const [innerTitle, setInnerTitle] = useState(title);\r\n if (lastTitle.current !== title && innerTitle !== title) {\r\n setInnerTitle(title);\r\n }\r\n const [isOpenInner, setIsOpen] = useState(isOpen);\r\n useEffect(() => {\r\n setIsOpen(isOpen);\r\n }, [isOpen]);\r\n\r\n const closeHandler = useCallback(() => {\r\n setIsOpen(false);\r\n onClose();\r\n }, [onClose]);\r\n\r\n useEscapeKey({ closeHandler, id: innerId, isOpenInner, shouldCloseOnEsc });\r\n useInitialFocus({\r\n isOpenInner,\r\n initialFocusConfiguration,\r\n initialFocusGetter,\r\n initialFocusRef,\r\n noFocus,\r\n parentElement: nodeRef.current,\r\n });\r\n\r\n const Wrapper = useMemo(() => {\r\n return Portal ?? Fragment;\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, []);\r\n\r\n const { ref: stylesRef, setState: setStyle } = useStyleState(() => {\r\n return {\r\n position: 'fixed',\r\n ...(defaultPosition ?? {\r\n left: '50%',\r\n top: '50%',\r\n }),\r\n };\r\n });\r\n\r\n const unSubscribe = useRef(() => {});\r\n const initialPosition = useRef<null \| DOMRect>(null);\r\n const initialMousePosition = useRef<null \| { x: number; y: number }>(null);\r\n const assignRefs = useCombinedRefs(\r\n nodeRef as unknown as React.ForwardedRef<unknown>,\r\n ref as unknown as React.Ref<unknown>,\r\n stylesRef as unknown as React.Ref<unknown>,\r\n );\r\n\r\n return (\r\n <Wrapper>\r\n <ModalContext.Provider\r\n value={useMemo(() => {\r\n return {\r\n changeTitle: (newTitle) => {\r\n setInnerTitle(newTitle);\r\n },\r\n close: () => {\r\n closeHandler();\r\n },\r\n descriptionId: `${innerId}_Description`,\r\n };\r\n }, [closeHandler, innerId])}\r\n >\r\n <CSSTransition\r\n in={isOpen}\r\n timeout={animationDuration}\r\n classNames=\"modal\"\r\n appear\r\n unmountOnExit\r\n nodeRef={nodeRef}\r\n onExited={onExited}\r\n >\r\n <Box\r\n ref={assignRefs}\r\n className={`modal__variantWrapper window__modal ${className ?? ''}`}\r\n id={`modal__${innerId}`}\r\n {...(variant ? getVariant(variant) : {})}\r\n sx={{ zIndex: 'modal' }}\r\n >\r\n <FreeFocusInside>\r\n <Box\r\n id={id}\r\n role=\"dialog\"\r\n aria-modal=\"true\"\r\n aria-label={title}\r\n aria-describedby={`${innerId}_Description`}\r\n aria-hidden=\"false\"\r\n className=\"modal__main\"\r\n // allows scrolling within element, despite body lock\r\n data-scroll-lock-scrollable\r\n sx={useMemo(() => {\r\n return {\r\n variant: `layout.common.modals.${size}`,\r\n ...(maxWidth !== undefined ? { maxWidth } : {}),\r\n };\r\n }, [maxWidth, size])}\r\n data-variant={`layout.common.modals.${size}`}\r\n ref={useCallback(\r\n (el: null \| HTMLElement) => {\r\n unSubscribe.current();\r\n unSubscribe.current = () => {};\r\n\r\n if (el) {\r\n const handleMouseDown = (ev: MouseEvent) => {\r\n const res = onDragStart?.(ev);\r\n if (res === false) return;\r\n\r\n const rect = el.getBoundingClientRect();\r\n initialPosition.current = rect;\r\n initialMousePosition.current = {\r\n x: ev.clientX,\r\n y: ev.clientY,\r\n };\r\n };\r\n const handleMouseMove = (ev: MouseEvent) => {\r\n if (initialPosition.current) {\r\n ev.preventDefault();\r\n const diffX =\r\n ev.clientX - initialMousePosition.current!.x;\r\n const diffY =\r\n ev.clientY - initialMousePosition.current!.y;\r\n\r\n const newLeft = addBoundary(\r\n initialPosition.current.left + diffX,\r\n 0,\r\n window.innerWidth - 50,\r\n );\r\n const newTop = addBoundary(\r\n initialPosition.current.top + diffY,\r\n 0,\r\n window.innerHeight - 50,\r\n );\r\n\r\n setStyle({\r\n left: `${newLeft}px`,\r\n top: `${newTop}px`,\r\n right: 'unset',\r\n bottom: 'unset',\r\n });\r\n }\r\n };\r\n\r\n const handleMouseUp = () => {\r\n initialPosition.current = null;\r\n };\r\n\r\n el.addEventListener('mousedown', handleMouseDown);\r\n document.addEventListener('mousemove', handleMouseMove);\r\n document.addEventListener('mouseup', handleMouseUp);\r\n\r\n unSubscribe.current = () => {\r\n el.removeEventListener('mousedown', handleMouseDown);\r\n document.removeEventListener(\r\n 'mousemove',\r\n handleMouseMove,\r\n );\r\n document.removeEventListener(\r\n 'mouseup',\r\n handleMouseUp,\r\n );\r\n };\r\n }\r\n },\r\n [onDragStart, setStyle],\r\n )}\r\n >\r\n {!noHeader && (\r\n <DialogHeader\r\n className=\"modal__header\"\r\n NavBar={NavBar}\r\n title={innerTitle}\r\n close={closeHandler}\r\n hideCloseButton={hideCloseButton}\r\n id={`${innerId}_Header`}\r\n />\r\n )}\r\n <Box\r\n className=\"modal__content\"\r\n id={\r\n typeof children === 'string'\r\n ? `${innerId}_Description`\r\n : undefined\r\n }\r\n >\r\n {children}\r\n </Box>\r\n </Box>\r\n </FreeFocusInside>\r\n </Box>\r\n </CSSTransition>\r\n </ModalContext.Provider>\r\n </Wrapper>\r\n );\r\n },\r\n);\r\n"],"names":[],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@apia/components",
-  "version": "2.0.11",
+  "version": "2.0.12",
   "sideEffects": false,
   "author": "Alexis Leite <alexisleite@live.com>",
   "main": "dist/index.js",
@@ -13,12 +13,12 @@
     "libWatch": "rollup --watch --config ../../config/rollup.common.mjs --environment MODE:development,ENTRY:index.tsx,WATCH:true"
   },
   "dependencies": {
-    "@apia/dom-store": "^2.0.11",
-    "@apia/icons": "^2.0.11",
-    "@apia/notifications": "^2.0.11",
-    "@apia/store": "^2.0.11",
-    "@apia/theme": "^2.0.11",
-    "@apia/util": "^2.0.11",
+    "@apia/dom-store": "^2.0.12",
+    "@apia/icons": "^2.0.12",
+    "@apia/notifications": "^2.0.12",
+    "@apia/store": "^2.0.12",
+    "@apia/theme": "^2.0.12",
+    "@apia/util": "^2.0.12",
     "@theme-ui/color": "0.16.2",
     "@theme-ui/match-media": "0.16.2",
     "react-animate-height": "^3.2.2",
@@ -47,5 +47,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "2baba9f15d947ff574605579b8593604886f690f"
+  "gitHead": "15cb0d39b557de0e9b6ce2439f6bef5d8da5758f"
 }