@apia/components 2.0.6 → 2.0.8

package/dist/components/modals/WindowModal.js

@@ -1,8 +1,229 @@
-import { forwardRef } from 'react';
+import { jsx, jsxs } from '@apia/theme/jsx-runtime';
+import { forwardRef, useMemo, useRef, useState, useEffect, useCallback, Fragment } from 'react';
+import { CSSTransition } from 'react-transition-group';
+import { Box, getVariant } from '@apia/theme';
+import DialogHeader from './layout/DialogHeader.js';
+import { ModalContext } from './ModalContext.js';
+import { useEscapeKey } from './hooks/useEscapeKey.js';
+import { useInitialFocus } from './hooks/useInitialFocus.js';
+import { useCombinedRefs, addBoundary } from '@apia/util';
+import { useStyleState } from './hooks/useStyleState.js';
+import { uniqueId } from '@apia/notifications';
 
-const WindowModal = forwardRef((props, ref) => {
-  return null;
-});
+const WindowModal = forwardRef(
+  ({
+    animationDuration = 150,
+    children = null,
+    className,
+    defaultPosition,
+    hideCloseButton,
+    id,
+    initialFocusConfiguration,
+    initialFocusGetter,
+    initialFocusRef,
+    isOpen = false,
+    maxWidth,
+    NavBar,
+    noFocus,
+    noHeader = false,
+    onClose = () => {
+    },
+    onDragStart = () => {
+    },
+    onExited = () => {
+    },
+    Portal,
+    shouldCloseOnEsc = true,
+    size = "md",
+    title = "",
+    variant
+  }, ref) => {
+    const innerId = useMemo(() => {
+      return `Modal${uniqueId()}`;
+    }, []);
+    const nodeRef = useRef(null);
+    const lastTitle = useRef(title);
+    const [innerTitle, setInnerTitle] = useState(title);
+    if (lastTitle.current !== title && innerTitle !== title) {
+      setInnerTitle(title);
+    }
+    const [isOpenInner, setIsOpen] = useState(isOpen);
+    useEffect(() => {
+      setIsOpen(isOpen);
+    }, [isOpen]);
+    const closeHandler = useCallback(() => {
+      setIsOpen(false);
+      onClose();
+    }, [onClose]);
+    useEscapeKey({ closeHandler, id: innerId, isOpenInner, shouldCloseOnEsc });
+    useInitialFocus({
+      isOpenInner,
+      initialFocusConfiguration,
+      initialFocusGetter,
+      initialFocusRef,
+      noFocus,
+      parentElement: nodeRef.current
+    });
+    const Wrapper = useMemo(() => {
+      return Portal ?? Fragment;
+    }, []);
+    const { ref: stylesRef, setState: setStyle } = useStyleState(() => {
+      return {
+        position: "fixed",
+        ...defaultPosition ?? {
+          left: "50%",
+          top: "50%"
+        }
+      };
+    });
+    const unSubscribe = useRef(() => {
+    });
+    const initialPosition = useRef(null);
+    const initialMousePosition = useRef(null);
+    const assignRefs = useCombinedRefs(
+      nodeRef,
+      ref,
+      stylesRef
+    );
+    return /* @__PURE__ */ jsx(Wrapper, { children: /* @__PURE__ */ jsx(
+      ModalContext.Provider,
+      {
+        value: useMemo(() => {
+          return {
+            changeTitle: (newTitle) => {
+              setInnerTitle(newTitle);
+            },
+            close: () => {
+              closeHandler();
+            },
+            descriptionId: `${innerId}_Description`
+          };
+        }, [closeHandler, innerId]),
+        children: /* @__PURE__ */ jsx(
+          CSSTransition,
+          {
+            in: isOpen,
+            timeout: animationDuration,
+            classNames: "modal",
+            appear: true,
+            unmountOnExit: true,
+            nodeRef,
+            onExited,
+            children: /* @__PURE__ */ jsx(
+              Box,
+              {
+                ref: assignRefs,
+                className: `modal__variantWrapper window__modal ${className ?? ""}`,
+                id: `modal__${innerId}`,
+                ...variant ? getVariant(variant) : {},
+                sx: { zIndex: "modal" },
+                children: /* @__PURE__ */ jsxs(
+                  Box,
+                  {
+                    id,
+                    role: "dialog",
+                    "aria-modal": "true",
+                    "aria-label": title,
+                    "aria-describedby": `${innerId}_Description`,
+                    "aria-hidden": "false",
+                    className: "modal__main",
+                    "data-scroll-lock-scrollable": true,
+                    sx: useMemo(() => {
+                      return {
+                        variant: `layout.common.modals.${size}`,
+                        ...maxWidth !== void 0 ? { maxWidth } : {}
+                      };
+                    }, [maxWidth, size]),
+                    "data-variant": `layout.common.modals.${size}`,
+                    ref: useCallback(
+                      (el) => {
+                        unSubscribe.current();
+                        unSubscribe.current = () => {
+                        };
+                        if (el) {
+                          const handleMouseDown = (ev) => {
+                            const res = onDragStart?.(ev);
+                            if (res === false)
+                              return;
+                            const rect = el.getBoundingClientRect();
+                            initialPosition.current = rect;
+                            initialMousePosition.current = {
+                              x: ev.clientX,
+                              y: ev.clientY
+                            };
+                          };
+                          const handleMouseMove = (ev) => {
+                            if (initialPosition.current) {
+                              ev.preventDefault();
+                              const diffX = ev.clientX - initialMousePosition.current.x;
+                              const diffY = ev.clientY - initialMousePosition.current.y;
+                              const newLeft = addBoundary(
+                                initialPosition.current.left + diffX,
+                                0,
+                                window.innerWidth - 50
+                              );
+                              const newTop = addBoundary(
+                                initialPosition.current.top + diffY,
+                                0,
+                                window.innerHeight - 50
+                              );
+                              setStyle({
+                                left: `${newLeft}px`,
+                                top: `${newTop}px`,
+                                right: "unset",
+                                bottom: "unset"
+                              });
+                            }
+                          };
+                          const handleMouseUp = () => {
+                            initialPosition.current = null;
+                          };
+                          el.addEventListener("mousedown", handleMouseDown);
+                          document.addEventListener("mousemove", handleMouseMove);
+                          document.addEventListener("mouseup", handleMouseUp);
+                          unSubscribe.current = () => {
+                            el.removeEventListener("mousedown", handleMouseDown);
+                            document.removeEventListener(
+                              "mousemove",
+                              handleMouseMove
+                            );
+                            document.removeEventListener("mouseup", handleMouseUp);
+                          };
+                        }
+                      },
+                      [onDragStart, setStyle]
+                    ),
+                    children: [
+                      !noHeader && /* @__PURE__ */ jsx(
+                        DialogHeader,
+                        {
+                          className: "modal__header",
+                          NavBar,
+                          title: innerTitle,
+                          close: closeHandler,
+                          hideCloseButton,
+                          id: `${innerId}_Header`
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        Box,
+                        {
+                          className: "modal__content",
+                          id: typeof children === "string" ? `${innerId}_Description` : void 0,
+                          children
+                        }
+                      )
+                    ]
+                  }
+                )
+              }
+            )
+          }
+        )
+      }
+    ) });
+  }
+);
 
 export { WindowModal };
 //# sourceMappingURL=WindowModal.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"WindowModal.js","sources":["../../../src/components/modals/WindowModal.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { TModal } from './Modal';\n\nexport const WindowModal = forwardRef<HTMLDivElement, TModal>((props, ref) => {\n  props;\n  ref;\n\n  return null;\n});\n"],"names":[],"mappings":";;AAGO,MAAM,WAAc,GAAA,UAAA,CAAmC,CAAC,KAAA,EAAO,GAAQ,KAAA;AAI5E,EAAO,OAAA,IAAA,CAAA;AACT,CAAC;;;;"}
+{"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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"}

package/dist/components/modals/hooks/useEscapeKey.js

@@ -0,0 +1,36 @@
+import { useEffect } from 'react';
+
+function useEscapeKey({
+  closeHandler,
+  id,
+  isOpenInner,
+  shouldCloseOnEsc
+}) {
+  useEffect(() => {
+    function handleEscape(event) {
+      if (event.code !== "Escape")
+        return;
+      const overlays = [
+        ...document.querySelectorAll(".overlay, .window__modal")
+      ];
+      const modal = event.target.closest(`#modal__${id}`);
+      if (modal) {
+        event.preventDefault();
+        event.stopPropagation();
+        closeHandler();
+      } else if (overlays.length > 0 && (overlays[overlays.length - 1]?.id === id || overlays[overlays.length - 1]?.id === `modal__${id}`)) {
+        event.preventDefault();
+        event.stopPropagation();
+        closeHandler();
+      }
+    }
+    if (isOpenInner && shouldCloseOnEsc)
+      document.addEventListener("keydown", handleEscape, false);
+    return () => {
+      document.removeEventListener("keydown", handleEscape, false);
+    };
+  }, [shouldCloseOnEsc, isOpenInner, closeHandler, id]);
+}
+
+export { useEscapeKey };
+//# sourceMappingURL=useEscapeKey.js.map

package/dist/components/modals/hooks/useEscapeKey.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEscapeKey.js","sources":["../../../../src/components/modals/hooks/useEscapeKey.ts"],"sourcesContent":["import { useEffect } from 'react';\r\n\r\n/**\r\n * Contorla la lógica encargada de cerrar el modal al presionar la tecla escape.\r\n */\r\nexport function useEscapeKey({\r\n  closeHandler,\r\n  id,\r\n  isOpenInner,\r\n  shouldCloseOnEsc,\r\n}: {\r\n  id: string;\r\n  closeHandler: () => void;\r\n  isOpenInner: boolean;\r\n  shouldCloseOnEsc?: boolean;\r\n}) {\r\n  useEffect(() => {\r\n    function handleEscape(event: KeyboardEvent) {\r\n      if (event.code !== 'Escape') return;\r\n\r\n      const overlays = [\r\n        ...document.querySelectorAll('.overlay, .window__modal'),\r\n      ];\r\n\r\n      const modal = (event.target as HTMLElement).closest(`#modal__${id}`);\r\n      if (modal) {\r\n        /**\r\n         * Funcionamiento para el WindowModal\r\n         */\r\n        event.preventDefault();\r\n        event.stopPropagation();\r\n\r\n        closeHandler();\r\n      } else if (\r\n        overlays.length > 0 &&\r\n        (overlays[overlays.length - 1]?.id === id ||\r\n          overlays[overlays.length - 1]?.id === `modal__${id}`)\r\n      ) {\r\n        /**\r\n         * Legacy, para el StaticModal\r\n         */\r\n        event.preventDefault();\r\n        event.stopPropagation();\r\n\r\n        closeHandler();\r\n      }\r\n    }\r\n    if (isOpenInner && shouldCloseOnEsc)\r\n      document.addEventListener('keydown', handleEscape, false);\r\n    return () => {\r\n      document.removeEventListener('keydown', handleEscape, false);\r\n    };\r\n  }, [shouldCloseOnEsc, isOpenInner, closeHandler, id]);\r\n}\r\n"],"names":[],"mappings":";;AAKO,SAAS,YAAa,CAAA;AAAA,EAC3B,YAAA;AAAA,EACA,EAAA;AAAA,EACA,WAAA;AAAA,EACA,gBAAA;AACF,CAKG,EAAA;AACD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,SAAS,aAAa,KAAsB,EAAA;AAC1C,MAAA,IAAI,MAAM,IAAS,KAAA,QAAA;AAAU,QAAA,OAAA;AAE7B,MAAA,MAAM,QAAW,GAAA;AAAA,QACf,GAAG,QAAS,CAAA,gBAAA,CAAiB,0BAA0B,CAAA;AAAA,OACzD,CAAA;AAEA,MAAA,MAAM,QAAS,KAAM,CAAA,MAAA,CAAuB,OAAQ,CAAA,CAAA,QAAA,EAAW,EAAE,CAAE,CAAA,CAAA,CAAA;AACnE,MAAA,IAAI,KAAO,EAAA;AAIT,QAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AACrB,QAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AAEtB,QAAa,YAAA,EAAA,CAAA;AAAA,iBAEb,QAAS,CAAA,MAAA,GAAS,MACjB,QAAS,CAAA,QAAA,CAAS,SAAS,CAAC,CAAA,EAAG,OAAO,EACrC,IAAA,QAAA,CAAS,SAAS,MAAS,GAAA,CAAC,GAAG,EAAO,KAAA,CAAA,OAAA,EAAU,EAAE,CACpD,CAAA,CAAA,EAAA;AAIA,QAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AACrB,QAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AAEtB,QAAa,YAAA,EAAA,CAAA;AAAA,OACf;AAAA,KACF;AACA,IAAA,IAAI,WAAe,IAAA,gBAAA;AACjB,MAAS,QAAA,CAAA,gBAAA,CAAiB,SAAW,EAAA,YAAA,EAAc,KAAK,CAAA,CAAA;AAC1D,IAAA,OAAO,MAAM;AACX,MAAS,QAAA,CAAA,mBAAA,CAAoB,SAAW,EAAA,YAAA,EAAc,KAAK,CAAA,CAAA;AAAA,KAC7D,CAAA;AAAA,KACC,CAAC,gBAAA,EAAkB,WAAa,EAAA,YAAA,EAAc,EAAE,CAAC,CAAA,CAAA;AACtD;;;;"}

package/dist/components/modals/hooks/useInitialFocus.js

@@ -0,0 +1,37 @@
+import { useEffect } from 'react';
+import { focus, focusSelector, getFocusSelector } from '@apia/util';
+
+function useInitialFocus({
+  isOpenInner,
+  initialFocusConfiguration,
+  initialFocusGetter,
+  initialFocusRef,
+  noFocus,
+  parentElement
+}) {
+  useEffect(
+    () => {
+      if (!noFocus && isOpenInner) {
+        if (parentElement) {
+          void focus.on(
+            () => {
+              if (initialFocusGetter)
+                return initialFocusGetter(parentElement);
+              if (initialFocusRef?.current)
+                return (initialFocusRef?.current || parentElement).querySelector(focusSelector);
+              return parentElement.querySelector(
+                getFocusSelector(":not(.modal__closeButton)")
+              );
+            },
+            { ...initialFocusConfiguration, focusEvenWhenScreenLocked: true }
+          );
+        }
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [parentElement]
+  );
+}
+
+export { useInitialFocus };
+//# sourceMappingURL=useInitialFocus.js.map

package/dist/components/modals/hooks/useInitialFocus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInitialFocus.js","sources":["../../../../src/components/modals/hooks/useInitialFocus.ts"],"sourcesContent":["import { useEffect } from 'react';\r\nimport { TModal } from '../Modal';\r\nimport { focus, focusSelector, getFocusSelector } from '@apia/util';\r\n\r\nexport function useInitialFocus({\r\n  isOpenInner,\r\n  initialFocusConfiguration,\r\n  initialFocusGetter,\r\n  initialFocusRef,\r\n  noFocus,\r\n  parentElement,\r\n}: { isOpenInner: boolean; parentElement?: HTMLElement | null } & Pick<\r\n  TModal,\r\n  | 'noFocus'\r\n  | 'initialFocusGetter'\r\n  | 'initialFocusRef'\r\n  | 'initialFocusConfiguration'\r\n>) {\r\n  useEffect(\r\n    () => {\r\n      if (!noFocus && isOpenInner) {\r\n        if (parentElement) {\r\n          void focus.on(\r\n            () => {\r\n              if (initialFocusGetter) return initialFocusGetter(parentElement);\r\n              if (initialFocusRef?.current)\r\n                return (\r\n                  (initialFocusRef?.current || parentElement) as HTMLElement\r\n                ).querySelector(focusSelector) as HTMLElement;\r\n              return parentElement.querySelector(\r\n                getFocusSelector(':not(.modal__closeButton)'),\r\n              ) as HTMLElement;\r\n            },\r\n            { ...initialFocusConfiguration, focusEvenWhenScreenLocked: true },\r\n          );\r\n        }\r\n      }\r\n    },\r\n    // eslint-disable-next-line react-hooks/exhaustive-deps\r\n    [parentElement],\r\n  );\r\n}\r\n"],"names":[],"mappings":";;;AAIO,SAAS,eAAgB,CAAA;AAAA,EAC9B,WAAA;AAAA,EACA,yBAAA;AAAA,EACA,kBAAA;AAAA,EACA,eAAA;AAAA,EACA,OAAA;AAAA,EACA,aAAA;AACF,CAMG,EAAA;AACD,EAAA,SAAA;AAAA,IACE,MAAM;AACJ,MAAI,IAAA,CAAC,WAAW,WAAa,EAAA;AAC3B,QAAA,IAAI,aAAe,EAAA;AACjB,UAAA,KAAK,KAAM,CAAA,EAAA;AAAA,YACT,MAAM;AACJ,cAAI,IAAA,kBAAA;AAAoB,gBAAA,OAAO,mBAAmB,aAAa,CAAA,CAAA;AAC/D,cAAA,IAAI,eAAiB,EAAA,OAAA;AACnB,gBAAA,OAAA,CACG,eAAiB,EAAA,OAAA,IAAW,aAC7B,EAAA,aAAA,CAAc,aAAa,CAAA,CAAA;AAC/B,cAAA,OAAO,aAAc,CAAA,aAAA;AAAA,gBACnB,iBAAiB,2BAA2B,CAAA;AAAA,eAC9C,CAAA;AAAA,aACF;AAAA,YACA,EAAE,GAAG,yBAA2B,EAAA,yBAAA,EAA2B,IAAK,EAAA;AAAA,WAClE,CAAA;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAAA;AAAA,IAEA,CAAC,aAAa,CAAA;AAAA,GAChB,CAAA;AACF;;;;"}

package/dist/components/modals/hooks/useModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"useModal.js","sources":["../../../../src/components/modals/hooks/useModal.tsx"],"sourcesContent":["import { useUpdateEffect } from '@apia/util';\nimport React from 'react';\nimport usePortal, { Args } from 'react-cool-portal';\nimport { TModal } from '../Modal';\n\nexport type TUseModalConfiguration = Pick<TModal, 'onClose' | 'onExited'> & {\n  debugPerformanceName?: string;\n  isDefaultOpen?: boolean;\n  onOpen?: () => unknown;\n  portalArgs?: Omit<Args, 'containerId'>;\n  preFetcher?: () => Promise<void>;\n};\n\n/**\n * Este hook provee una forma muy sencilla de utilizar nuestro modal. Provee\n * varias funcionalidades interesantes para poder manipular el modal en\n * distintas circunstancias:\n *\n * Objeto parámetro:\n *\n * - **defaultOpen**, Boolean, si es true el modal aparecerá abierto al montar\n * y sino aparecerá cerrado.\n * - **onOpen**: Event listener que será llamado en el momento exacto en que la\n * orden de apertura del modal fue dada.\n * - **onClose**: Event listener que será llamado en el momento exacto en que\n * el modal es cerrado, ya sea por un click en el overlay o porque la tecla\n * escape fue presionada.\n * - **onExited**, Event listener que será llamado luego de que la animación de\n * cierre del modal terminó.\n * - **preFetcher**, este método deberá devolver una promesa y en dicha promesa\n * deberá realizar cualquier operación que fuera necesaria antes de abrir el\n * modal, ejemplo: cargar la información que el modal debe mostrar. Si este\n * método es pasado, será llamado antes de abrir el modal y la vista se pondrá\n * en modo de carga (la propiedad isLoading devuelta y la propiedad isLoading\n * del OpenModalContextProvider estarán en true), hasta que la promesa sea\n * resuelta, momento en que se abrirá el modal e isLoading será puesto en false.\n * - **portalArgs**, objeto de configuración aceptado por el hook usePortal de\n * **react-cool-portal**.\n *\n * Objeto devuelto:\n *\n * - Para un modal en donde el botón de abrir el modal esté inserto dentro del\n * componente que lo utiliza, se devuelven los métodos **show** y **hide**.\n * - Para un modal en donde el botón de abrir el modal esté fuera del\n * componente, se devuelve **openModalContextValue**, que es el valor que debe\n * pasarse al contexto de tipo OpenModalContextProvider, un contexto que\n * puede ser utilizado para renderizar el botón encargado de abrir el modal,\n * fuera del alcance del componente que define el modal en sí. Se muestra un\n * ejemplo más abajo.\n * - Todos los demás elementos devueltos son para pasar directamente al modal,\n * entre ellos se encuentran las propiedades que el modal utiliza para saber si\n * debe estar abierto, los event listeners correspondientes y un portal, que el\n * modal usará para mostrarse dentro del área de modales, lo cual es sumamente\n * importante para que el focusController funcione correctamente.\n *\n * @see OpenModalContextProvider\n * @see usePortal\n *\n * @example\n *\n  const { openModalContextValue, ...modalProps } = useModal(\n    React.useMemo(() => ({\n      onClose: () => console.log(\"Al presionar en cerrar.\"),\n      onExited: () => console.log(\"Al terminar la animación de cierre.\"),\n      onOpen: () => console.log(\"Al abrir.\"),\n    }), [])\n  );\n\n  return (\n    <OpenModalContext.Provider value={openModalContextValue}>\n      <OpenModalContext.Consumer>\n        {({ isLoading, show }) => (\n          <Button isLoading={isLoading} onClick={show}>Open modal</Button>\n        )}\n      </OpenModalContext.Consumer>\n      <Modal shouldCloseOnEsc shouldCloseOnOverlayClick {...modalProps}>\n        Hello world\n      </Modal>\n    </OpenModalContext.Provider>\n  );\n */\nexport function useModal(configuration?: TUseModalConfiguration) {\n  const [isLoading, setIsLoading] = React.useState(false);\n  const [isOpen, setIsOpen] = React.useState(\n    configuration?.portalArgs?.defaultShow ??\n      configuration?.isDefaultOpen ??\n      false,\n  );\n\n  const {\n    Portal,\n    hide: hidePortal,\n    show: showPortal,\n  } = usePortal({\n    ...configuration?.portalArgs,\n    containerId: 'AppModals',\n    autoRemoveContainer: false,\n    escToHide: false,\n    clickOutsideToHide: false,\n    defaultShow: false,\n    internalShowHide: false,\n  });\n\n  const hide = React.useCallback(() => {\n    setIsOpen(false);\n  }, []);\n  const show = React.useCallback(() => {\n    if (configuration?.preFetcher) {\n      setIsLoading(true);\n      configuration\n        .preFetcher()\n        .then(() => {\n          setIsOpen(true);\n          setIsLoading(false);\n        })\n        .catch(console.error);\n    } else setIsOpen(true);\n  }, [configuration]);\n  const onClose = React.useCallback(() => {\n    setIsOpen(false);\n    if (configuration?.onClose) configuration.onClose();\n  }, [configuration]);\n  const onExited = React.useCallback(() => {\n    hidePortal();\n    if (configuration?.onExited) configuration.onExited();\n  }, [configuration, hidePortal]);\n  const openModalContextValue = React.useMemo(() => {\n    return {\n      isLoading,\n      show,\n    };\n  }, [isLoading, show]);\n\n  useUpdateEffect(() => {\n    if (isOpen) {\n      if (configuration?.onOpen) configuration.onOpen();\n      showPortal();\n    } else onClose?.();\n  }, [isOpen]);\n\n  return {\n    hide,\n    isLoading,\n    isOpen,\n    onClose,\n    onExited,\n    openModalContextValue,\n    Portal,\n    show,\n  };\n}\n"],"names":["React"],"mappings":";;;;AAiFO,SAAS,SAAS,aAAwC,EAAA;AAC/D,EAAA,MAAM,CAAC,SAAW,EAAA,YAAY,CAAI,GAAAA,cAAA,CAAM,SAAS,KAAK,CAAA,CAAA;AACtD,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAIA,cAAM,CAAA,QAAA;AAAA,IAChC,aAAe,EAAA,UAAA,EAAY,WACzB,IAAA,aAAA,EAAe,aACf,IAAA,KAAA;AAAA,GACJ,CAAA;AAEA,EAAM,MAAA;AAAA,IACJ,MAAA;AAAA,IACA,IAAM,EAAA,UAAA;AAAA,IACN,IAAM,EAAA,UAAA;AAAA,MACJ,SAAU,CAAA;AAAA,IACZ,GAAG,aAAe,EAAA,UAAA;AAAA,IAClB,WAAa,EAAA,WAAA;AAAA,IACb,mBAAqB,EAAA,KAAA;AAAA,IACrB,SAAW,EAAA,KAAA;AAAA,IACX,kBAAoB,EAAA,KAAA;AAAA,IACpB,WAAa,EAAA,KAAA;AAAA,IACb,gBAAkB,EAAA,KAAA;AAAA,GACnB,CAAA,CAAA;AAED,EAAM,MAAA,IAAA,GAAOA,cAAM,CAAA,WAAA,CAAY,MAAM;AACnC,IAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AAAA,GACjB,EAAG,EAAE,CAAA,CAAA;AACL,EAAM,MAAA,IAAA,GAAOA,cAAM,CAAA,WAAA,CAAY,MAAM;AACnC,IAAA,IAAI,eAAe,UAAY,EAAA;AAC7B,MAAA,YAAA,CAAa,IAAI,CAAA,CAAA;AACjB,MACG,aAAA,CAAA,UAAA,EACA,CAAA,IAAA,CAAK,MAAM;AACV,QAAA,SAAA,CAAU,IAAI,CAAA,CAAA;AACd,QAAA,YAAA,CAAa,KAAK,CAAA,CAAA;AAAA,OACnB,CAAA,CACA,KAAM,CAAA,OAAA,CAAQ,KAAK,CAAA,CAAA;AAAA,KACxB;AAAO,MAAA,SAAA,CAAU,IAAI,CAAA,CAAA;AAAA,GACvB,EAAG,CAAC,aAAa,CAAC,CAAA,CAAA;AAClB,EAAM,MAAA,OAAA,GAAUA,cAAM,CAAA,WAAA,CAAY,MAAM;AACtC,IAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AACf,IAAA,IAAI,aAAe,EAAA,OAAA;AAAS,MAAA,aAAA,CAAc,OAAQ,EAAA,CAAA;AAAA,GACpD,EAAG,CAAC,aAAa,CAAC,CAAA,CAAA;AAClB,EAAM,MAAA,QAAA,GAAWA,cAAM,CAAA,WAAA,CAAY,MAAM;AACvC,IAAW,UAAA,EAAA,CAAA;AACX,IAAA,IAAI,aAAe,EAAA,QAAA;AAAU,MAAA,aAAA,CAAc,QAAS,EAAA,CAAA;AAAA,GACnD,EAAA,CAAC,aAAe,EAAA,UAAU,CAAC,CAAA,CAAA;AAC9B,EAAM,MAAA,qBAAA,GAAwBA,cAAM,CAAA,OAAA,CAAQ,MAAM;AAChD,IAAO,OAAA;AAAA,MACL,SAAA;AAAA,MACA,IAAA;AAAA,KACF,CAAA;AAAA,GACC,EAAA,CAAC,SAAW,EAAA,IAAI,CAAC,CAAA,CAAA;AAEpB,EAAA,eAAA,CAAgB,MAAM;AACpB,IAAA,IAAI,MAAQ,EAAA;AACV,MAAA,IAAI,aAAe,EAAA,MAAA;AAAQ,QAAA,aAAA,CAAc,MAAO,EAAA,CAAA;AAChD,MAAW,UAAA,EAAA,CAAA;AAAA,KACb;AAAO,MAAU,OAAA,IAAA,CAAA;AAAA,GACnB,EAAG,CAAC,MAAM,CAAC,CAAA,CAAA;AAEX,EAAO,OAAA;AAAA,IACL,IAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAA;AAAA,IACA,qBAAA;AAAA,IACA,MAAA;AAAA,IACA,IAAA;AAAA,GACF,CAAA;AACF;;;;"}
+{"version":3,"file":"useModal.js","sources":["../../../../src/components/modals/hooks/useModal.tsx"],"sourcesContent":["import { useUpdateEffect } from '@apia/util';\r\nimport React from 'react';\r\nimport usePortal, { Args } from 'react-cool-portal';\r\nimport { TModal } from '../Modal';\r\n\r\nexport type TUseModalConfiguration = Pick<TModal, 'onClose' | 'onExited'> & {\r\n  debugPerformanceName?: string;\r\n  isDefaultOpen?: boolean;\r\n  onOpen?: () => unknown;\r\n  portalArgs?: Omit<Args, 'containerId'>;\r\n  preFetcher?: () => Promise<void>;\r\n};\r\n\r\n/**\r\n * Este hook provee una forma muy sencilla de utilizar nuestro modal. Provee\r\n * varias funcionalidades interesantes para poder manipular el modal en\r\n * distintas circunstancias:\r\n *\r\n * Objeto parámetro:\r\n *\r\n * - **defaultOpen**, Boolean, si es true el modal aparecerá abierto al montar\r\n * y sino aparecerá cerrado.\r\n * - **onOpen**: Event listener que será llamado en el momento exacto en que la\r\n * orden de apertura del modal fue dada.\r\n * - **onClose**: Event listener que será llamado en el momento exacto en que\r\n * el modal es cerrado, ya sea por un click en el overlay o porque la tecla\r\n * escape fue presionada.\r\n * - **onExited**, Event listener que será llamado luego de que la animación de\r\n * cierre del modal terminó.\r\n * - **preFetcher**, este método deberá devolver una promesa y en dicha promesa\r\n * deberá realizar cualquier operación que fuera necesaria antes de abrir el\r\n * modal, ejemplo: cargar la información que el modal debe mostrar. Si este\r\n * método es pasado, será llamado antes de abrir el modal y la vista se pondrá\r\n * en modo de carga (la propiedad isLoading devuelta y la propiedad isLoading\r\n * del OpenModalContextProvider estarán en true), hasta que la promesa sea\r\n * resuelta, momento en que se abrirá el modal e isLoading será puesto en false.\r\n * - **portalArgs**, objeto de configuración aceptado por el hook usePortal de\r\n * **react-cool-portal**.\r\n *\r\n * Objeto devuelto:\r\n *\r\n * - Para un modal en donde el botón de abrir el modal esté inserto dentro del\r\n * componente que lo utiliza, se devuelven los métodos **show** y **hide**.\r\n * - Para un modal en donde el botón de abrir el modal esté fuera del\r\n * componente, se devuelve **openModalContextValue**, que es el valor que debe\r\n * pasarse al contexto de tipo OpenModalContextProvider, un contexto que\r\n * puede ser utilizado para renderizar el botón encargado de abrir el modal,\r\n * fuera del alcance del componente que define el modal en sí. Se muestra un\r\n * ejemplo más abajo.\r\n * - Todos los demás elementos devueltos son para pasar directamente al modal,\r\n * entre ellos se encuentran las propiedades que el modal utiliza para saber si\r\n * debe estar abierto, los event listeners correspondientes y un portal, que el\r\n * modal usará para mostrarse dentro del área de modales, lo cual es sumamente\r\n * importante para que el focusController funcione correctamente.\r\n *\r\n * @see OpenModalContextProvider\r\n * @see usePortal\r\n *\r\n * @example\r\n *\r\n  const { openModalContextValue, ...modalProps } = useModal(\r\n    React.useMemo(() => ({\r\n      onClose: () => console.log(\"Al presionar en cerrar.\"),\r\n      onExited: () => console.log(\"Al terminar la animación de cierre.\"),\r\n      onOpen: () => console.log(\"Al abrir.\"),\r\n    }), [])\r\n  );\r\n\r\n  return (\r\n    <OpenModalContext.Provider value={openModalContextValue}>\r\n      <OpenModalContext.Consumer>\r\n        {({ isLoading, show }) => (\r\n          <Button isLoading={isLoading} onClick={show}>Open modal</Button>\r\n        )}\r\n      </OpenModalContext.Consumer>\r\n      <Modal shouldCloseOnEsc shouldCloseOnOverlayClick {...modalProps}>\r\n        Hello world\r\n      </Modal>\r\n    </OpenModalContext.Provider>\r\n  );\r\n */\r\nexport function useModal(configuration?: TUseModalConfiguration) {\r\n  const [isLoading, setIsLoading] = React.useState(false);\r\n  const [isOpen, setIsOpen] = React.useState(\r\n    configuration?.portalArgs?.defaultShow ??\r\n      configuration?.isDefaultOpen ??\r\n      false,\r\n  );\r\n\r\n  const {\r\n    Portal,\r\n    hide: hidePortal,\r\n    show: showPortal,\r\n  } = usePortal({\r\n    ...configuration?.portalArgs,\r\n    containerId: 'AppModals',\r\n    autoRemoveContainer: false,\r\n    escToHide: false,\r\n    clickOutsideToHide: false,\r\n    defaultShow: false,\r\n    internalShowHide: false,\r\n  });\r\n\r\n  const hide = React.useCallback(() => {\r\n    setIsOpen(false);\r\n  }, []);\r\n  const show = React.useCallback(() => {\r\n    if (configuration?.preFetcher) {\r\n      setIsLoading(true);\r\n      configuration\r\n        .preFetcher()\r\n        .then(() => {\r\n          setIsOpen(true);\r\n          setIsLoading(false);\r\n        })\r\n        .catch(console.error);\r\n    } else setIsOpen(true);\r\n  }, [configuration]);\r\n  const onClose = React.useCallback(() => {\r\n    setIsOpen(false);\r\n    if (configuration?.onClose) configuration.onClose();\r\n  }, [configuration]);\r\n  const onExited = React.useCallback(() => {\r\n    hidePortal();\r\n    if (configuration?.onExited) configuration.onExited();\r\n  }, [configuration, hidePortal]);\r\n  const openModalContextValue = React.useMemo(() => {\r\n    return {\r\n      isLoading,\r\n      show,\r\n    };\r\n  }, [isLoading, show]);\r\n\r\n  useUpdateEffect(() => {\r\n    if (isOpen) {\r\n      if (configuration?.onOpen) configuration.onOpen();\r\n      showPortal();\r\n    } else onClose?.();\r\n  }, [isOpen]);\r\n\r\n  return {\r\n    hide,\r\n    isLoading,\r\n    isOpen,\r\n    onClose,\r\n    onExited,\r\n    openModalContextValue,\r\n    Portal,\r\n    show,\r\n  };\r\n}\r\n"],"names":["React"],"mappings":";;;;AAiFO,SAAS,SAAS,aAAwC,EAAA;AAC/D,EAAA,MAAM,CAAC,SAAW,EAAA,YAAY,CAAI,GAAAA,cAAA,CAAM,SAAS,KAAK,CAAA,CAAA;AACtD,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAIA,cAAM,CAAA,QAAA;AAAA,IAChC,aAAe,EAAA,UAAA,EAAY,WACzB,IAAA,aAAA,EAAe,aACf,IAAA,KAAA;AAAA,GACJ,CAAA;AAEA,EAAM,MAAA;AAAA,IACJ,MAAA;AAAA,IACA,IAAM,EAAA,UAAA;AAAA,IACN,IAAM,EAAA,UAAA;AAAA,MACJ,SAAU,CAAA;AAAA,IACZ,GAAG,aAAe,EAAA,UAAA;AAAA,IAClB,WAAa,EAAA,WAAA;AAAA,IACb,mBAAqB,EAAA,KAAA;AAAA,IACrB,SAAW,EAAA,KAAA;AAAA,IACX,kBAAoB,EAAA,KAAA;AAAA,IACpB,WAAa,EAAA,KAAA;AAAA,IACb,gBAAkB,EAAA,KAAA;AAAA,GACnB,CAAA,CAAA;AAED,EAAM,MAAA,IAAA,GAAOA,cAAM,CAAA,WAAA,CAAY,MAAM;AACnC,IAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AAAA,GACjB,EAAG,EAAE,CAAA,CAAA;AACL,EAAM,MAAA,IAAA,GAAOA,cAAM,CAAA,WAAA,CAAY,MAAM;AACnC,IAAA,IAAI,eAAe,UAAY,EAAA;AAC7B,MAAA,YAAA,CAAa,IAAI,CAAA,CAAA;AACjB,MACG,aAAA,CAAA,UAAA,EACA,CAAA,IAAA,CAAK,MAAM;AACV,QAAA,SAAA,CAAU,IAAI,CAAA,CAAA;AACd,QAAA,YAAA,CAAa,KAAK,CAAA,CAAA;AAAA,OACnB,CAAA,CACA,KAAM,CAAA,OAAA,CAAQ,KAAK,CAAA,CAAA;AAAA,KACxB;AAAO,MAAA,SAAA,CAAU,IAAI,CAAA,CAAA;AAAA,GACvB,EAAG,CAAC,aAAa,CAAC,CAAA,CAAA;AAClB,EAAM,MAAA,OAAA,GAAUA,cAAM,CAAA,WAAA,CAAY,MAAM;AACtC,IAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AACf,IAAA,IAAI,aAAe,EAAA,OAAA;AAAS,MAAA,aAAA,CAAc,OAAQ,EAAA,CAAA;AAAA,GACpD,EAAG,CAAC,aAAa,CAAC,CAAA,CAAA;AAClB,EAAM,MAAA,QAAA,GAAWA,cAAM,CAAA,WAAA,CAAY,MAAM;AACvC,IAAW,UAAA,EAAA,CAAA;AACX,IAAA,IAAI,aAAe,EAAA,QAAA;AAAU,MAAA,aAAA,CAAc,QAAS,EAAA,CAAA;AAAA,GACnD,EAAA,CAAC,aAAe,EAAA,UAAU,CAAC,CAAA,CAAA;AAC9B,EAAM,MAAA,qBAAA,GAAwBA,cAAM,CAAA,OAAA,CAAQ,MAAM;AAChD,IAAO,OAAA;AAAA,MACL,SAAA;AAAA,MACA,IAAA;AAAA,KACF,CAAA;AAAA,GACC,EAAA,CAAC,SAAW,EAAA,IAAI,CAAC,CAAA,CAAA;AAEpB,EAAA,eAAA,CAAgB,MAAM;AACpB,IAAA,IAAI,MAAQ,EAAA;AACV,MAAA,IAAI,aAAe,EAAA,MAAA;AAAQ,QAAA,aAAA,CAAc,MAAO,EAAA,CAAA;AAChD,MAAW,UAAA,EAAA,CAAA;AAAA,KACb;AAAO,MAAU,OAAA,IAAA,CAAA;AAAA,GACnB,EAAG,CAAC,MAAM,CAAC,CAAA,CAAA;AAEX,EAAO,OAAA;AAAA,IACL,IAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAA;AAAA,IACA,qBAAA;AAAA,IACA,MAAA;AAAA,IACA,IAAA;AAAA,GACF,CAAA;AACF;;;;"}

package/dist/components/modals/hooks/useStyleState.js

@@ -0,0 +1,44 @@
+import { useRef, useCallback } from 'react';
+
+function useStyleState(initialStyle) {
+  const element = useRef(null);
+  const state = useRef(
+    typeof initialStyle === "object" ? initialStyle : {}
+  );
+  const applyStyles = useCallback(() => {
+    if (element.current) {
+      Object.entries(state.current).forEach(([name, value]) => {
+        if (Object.getOwnPropertyDescriptor(element.current.style, name)?.writable) {
+          element.current.style[name] = value;
+        }
+      });
+    }
+  }, []);
+  const hasInitializedState = useRef(typeof initialStyle !== "function");
+  return {
+    ref: useCallback(
+      (el) => {
+        element.current = el;
+        if (el) {
+          if (!hasInitializedState.current) {
+            hasInitializedState.current = true;
+            state.current = initialStyle(el);
+          }
+          applyStyles();
+        }
+      },
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [applyStyles]
+    ),
+    setState: useCallback(
+      (newState) => {
+        state.current = typeof newState === "function" ? newState(state.current) : newState;
+        applyStyles();
+      },
+      [applyStyles]
+    )
+  };
+}
+
+export { useStyleState };
+//# sourceMappingURL=useStyleState.js.map

package/dist/components/modals/hooks/useStyleState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStyleState.js","sources":["../../../../src/components/modals/hooks/useStyleState.ts"],"sourcesContent":["import { SetStateAction, useCallback, useRef } from 'react';\r\n\r\ntype InitialStyleAssigner = (el: HTMLElement) => Partial<CSSStyleDeclaration>;\r\ntype CSSState = Partial<CSSStyleDeclaration>;\r\n\r\n/**\r\n * Este hook permite mantener un estado de estilos, para utilizar en un elemento del DOM.\r\n *\r\n * A diferencia de un setState común, al realizar setState en este hook no se re-renderiza el componente, sino que se aplican los estilos directamente en el DOM.\r\n *\r\n * Se garantiza además que estos estados no se perderán en los re-renderizados provocados por causas externas a este hook.\r\n */\r\nexport function useStyleState(initialStyle?: CSSState | InitialStyleAssigner) {\r\n  const element = useRef<null | HTMLElement>(null);\r\n  const state = useRef<CSSState>(\r\n    typeof initialStyle === 'object' ? initialStyle : ({} as CSSState),\r\n  );\r\n\r\n  const applyStyles = useCallback(() => {\r\n    if (element.current) {\r\n      Object.entries(state.current).forEach(([name, value]) => {\r\n        if (\r\n          Object.getOwnPropertyDescriptor(element.current!.style, name)\r\n            ?.writable\r\n        ) {\r\n          element.current!.style[name as 'width'] = value as any;\r\n        }\r\n      });\r\n    }\r\n  }, []);\r\n\r\n  const hasInitializedState = useRef(typeof initialStyle !== 'function');\r\n  return {\r\n    ref: useCallback(\r\n      (el: HTMLElement | null) => {\r\n        element.current = el;\r\n        if (el) {\r\n          if (!hasInitializedState.current) {\r\n            hasInitializedState.current = true;\r\n            state.current = (initialStyle as InitialStyleAssigner)(el);\r\n          }\r\n          applyStyles();\r\n        }\r\n      },\r\n      // eslint-disable-next-line react-hooks/exhaustive-deps\r\n      [applyStyles],\r\n    ),\r\n    setState: useCallback(\r\n      (newState: SetStateAction<CSSState>) => {\r\n        state.current =\r\n          typeof newState === 'function' ? newState(state.current) : newState;\r\n        applyStyles();\r\n      },\r\n      [applyStyles],\r\n    ),\r\n  };\r\n}\r\n"],"names":[],"mappings":";;AAYO,SAAS,cAAc,YAAgD,EAAA;AAC5E,EAAM,MAAA,OAAA,GAAU,OAA2B,IAAI,CAAA,CAAA;AAC/C,EAAA,MAAM,KAAQ,GAAA,MAAA;AAAA,IACZ,OAAO,YAAA,KAAiB,QAAW,GAAA,YAAA,GAAgB,EAAC;AAAA,GACtD,CAAA;AAEA,EAAM,MAAA,WAAA,GAAc,YAAY,MAAM;AACpC,IAAA,IAAI,QAAQ,OAAS,EAAA;AACnB,MAAO,MAAA,CAAA,OAAA,CAAQ,MAAM,OAAO,CAAA,CAAE,QAAQ,CAAC,CAAC,IAAM,EAAA,KAAK,CAAM,KAAA;AACvD,QAAA,IACE,OAAO,wBAAyB,CAAA,OAAA,CAAQ,QAAS,KAAO,EAAA,IAAI,GACxD,QACJ,EAAA;AACA,UAAQ,OAAA,CAAA,OAAA,CAAS,KAAM,CAAA,IAAe,CAAI,GAAA,KAAA,CAAA;AAAA,SAC5C;AAAA,OACD,CAAA,CAAA;AAAA,KACH;AAAA,GACF,EAAG,EAAE,CAAA,CAAA;AAEL,EAAA,MAAM,mBAAsB,GAAA,MAAA,CAAO,OAAO,YAAA,KAAiB,UAAU,CAAA,CAAA;AACrE,EAAO,OAAA;AAAA,IACL,GAAK,EAAA,WAAA;AAAA,MACH,CAAC,EAA2B,KAAA;AAC1B,QAAA,OAAA,CAAQ,OAAU,GAAA,EAAA,CAAA;AAClB,QAAA,IAAI,EAAI,EAAA;AACN,UAAI,IAAA,CAAC,oBAAoB,OAAS,EAAA;AAChC,YAAA,mBAAA,CAAoB,OAAU,GAAA,IAAA,CAAA;AAC9B,YAAM,KAAA,CAAA,OAAA,GAAW,aAAsC,EAAE,CAAA,CAAA;AAAA,WAC3D;AACA,UAAY,WAAA,EAAA,CAAA;AAAA,SACd;AAAA,OACF;AAAA;AAAA,MAEA,CAAC,WAAW,CAAA;AAAA,KACd;AAAA,IACA,QAAU,EAAA,WAAA;AAAA,MACR,CAAC,QAAuC,KAAA;AACtC,QAAA,KAAA,CAAM,UACJ,OAAO,QAAA,KAAa,aAAa,QAAS,CAAA,KAAA,CAAM,OAAO,CAAI,GAAA,QAAA,CAAA;AAC7D,QAAY,WAAA,EAAA,CAAA;AAAA,OACd;AAAA,MACA,CAAC,WAAW,CAAA;AAAA,KACd;AAAA,GACF,CAAA;AACF;;;;"}

package/dist/components/modals/layout/Confirm.js.map

@@ -1 +1 @@
-{"version":3,"file":"Confirm.js","sources":["../../../../src/components/modals/layout/Confirm.tsx"],"sourcesContent":["import { Box, getVariant } from '@apia/theme';\nimport { IConfirm } from '../../dialogs';\nimport { getLabel } from '@apia/util';\nimport { MouseEvent, useCallback } from 'react';\nimport { DialogButtonBar } from './DialogButtonBar';\nimport { SimpleButton } from '../../forms/buttons/SimpleButton';\nimport { useModalContext } from '../ModalContext';\n\nexport const Confirm = ({\n  children,\n  additionalButtons,\n  additionalButtonsOnRight,\n  cancelButtonText: cancelText = getLabel('btnCan').text,\n  className,\n  confirmButtonText: confirmText = getLabel('btnCon').text,\n  confirmButtonVariant = 'primary',\n  contentRef,\n  disabled,\n  hideCancelButton,\n  hideConfirmButton,\n  isLoading,\n  onCancel,\n  onConfirm,\n  variant,\n}: Omit<IConfirm, 'title'>) => {\n  const { descriptionId } = useModalContext();\n\n  return (\n    <Box\n      {...getVariant(variant ?? 'layout.common.modals.confirm')}\n      className={`${className ?? ''} confirm`}\n    >\n      <Box ref={contentRef} className=\"confirm__content\" id={descriptionId}>\n        {children}\n      </Box>\n      <DialogButtonBar className=\"confirm__buttonBar\">\n        <Box\n          className=\"confirm__customButtons\"\n          onClick={useCallback(\n            (ev: MouseEvent) => {\n              if ((ev.target as HTMLElement).closest('button')) onCancel?.();\n            },\n            [onCancel],\n          )}\n        >\n          {additionalButtons}\n        </Box>\n\n        <Box className=\"confirm__defaultButtons\">\n          <Box\n            className=\"confirm__customButtonsOnRight\"\n            onClick={useCallback(\n              (ev: MouseEvent) => {\n                if ((ev.target as HTMLElement).closest('button')) onCancel?.();\n              },\n              [onCancel],\n            )}\n          >\n            {additionalButtonsOnRight}\n          </Box>\n          {!hideConfirmButton && (\n            <SimpleButton\n              onClick={onConfirm}\n              title={confirmText}\n              variant={confirmButtonVariant}\n              disabled={isLoading ?? disabled}\n              isLoading={isLoading}\n              className=\"confirm__confirmButton\"\n              type=\"submit\"\n            >\n              {confirmText}\n            </SimpleButton>\n          )}\n          {onCancel && !hideCancelButton && (\n            <SimpleButton\n              onClick={onCancel}\n              title={cancelText}\n              {...getVariant('secondary')}\n              disabled={isLoading}\n              className=\"confirm__cancelButton\"\n            >\n              {cancelText}\n            </SimpleButton>\n          )}\n        </Box>\n      </DialogButtonBar>\n    </Box>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Confirm.js","sources":["../../../../src/components/modals/layout/Confirm.tsx"],"sourcesContent":["import { Box, getVariant } from '@apia/theme';\r\nimport { IConfirm } from '../../dialogs';\r\nimport { getLabel } from '@apia/util';\r\nimport { MouseEvent, useCallback } from 'react';\r\nimport { DialogButtonBar } from './DialogButtonBar';\r\nimport { SimpleButton } from '../../forms/buttons/SimpleButton';\r\nimport { useModalContext } from '../ModalContext';\r\n\r\nexport const Confirm = ({\r\n  children,\r\n  additionalButtons,\r\n  additionalButtonsOnRight,\r\n  cancelButtonText: cancelText = getLabel('btnCan').text,\r\n  className,\r\n  confirmButtonText: confirmText = getLabel('btnCon').text,\r\n  confirmButtonVariant = 'primary',\r\n  contentRef,\r\n  disabled,\r\n  hideCancelButton,\r\n  hideConfirmButton,\r\n  isLoading,\r\n  onCancel,\r\n  onConfirm,\r\n  variant,\r\n}: Omit<IConfirm, 'title'>) => {\r\n  const { descriptionId } = useModalContext();\r\n\r\n  return (\r\n    <Box\r\n      {...getVariant(variant ?? 'layout.common.modals.confirm')}\r\n      className={`${className ?? ''} confirm`}\r\n    >\r\n      <Box ref={contentRef} className=\"confirm__content\" id={descriptionId}>\r\n        {children}\r\n      </Box>\r\n      <DialogButtonBar className=\"confirm__buttonBar\">\r\n        <Box\r\n          className=\"confirm__customButtons\"\r\n          onClick={useCallback(\r\n            (ev: MouseEvent) => {\r\n              if ((ev.target as HTMLElement).closest('button')) onCancel?.();\r\n            },\r\n            [onCancel],\r\n          )}\r\n        >\r\n          {additionalButtons}\r\n        </Box>\r\n\r\n        <Box className=\"confirm__defaultButtons\">\r\n          <Box\r\n            className=\"confirm__customButtonsOnRight\"\r\n            onClick={useCallback(\r\n              (ev: MouseEvent) => {\r\n                if ((ev.target as HTMLElement).closest('button')) onCancel?.();\r\n              },\r\n              [onCancel],\r\n            )}\r\n          >\r\n            {additionalButtonsOnRight}\r\n          </Box>\r\n          {!hideConfirmButton && (\r\n            <SimpleButton\r\n              onClick={onConfirm}\r\n              title={confirmText}\r\n              variant={confirmButtonVariant}\r\n              disabled={isLoading ?? disabled}\r\n              isLoading={isLoading}\r\n              className=\"confirm__confirmButton\"\r\n              type=\"submit\"\r\n            >\r\n              {confirmText}\r\n            </SimpleButton>\r\n          )}\r\n          {onCancel && !hideCancelButton && (\r\n            <SimpleButton\r\n              onClick={onCancel}\r\n              title={cancelText}\r\n              {...getVariant('secondary')}\r\n              disabled={isLoading}\r\n              className=\"confirm__cancelButton\"\r\n            >\r\n              {cancelText}\r\n            </SimpleButton>\r\n          )}\r\n        </Box>\r\n      </DialogButtonBar>\r\n    </Box>\r\n  );\r\n};\r\n"],"names":[],"mappings":"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"}

package/dist/components/modals/layout/DialogButtonBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogButtonBar.js","sources":["../../../../src/components/modals/layout/DialogButtonBar.tsx"],"sourcesContent":["import { getVariant } from '@apia/theme';\nimport * as React from 'react';\nimport { Box } from '@apia/theme';\n\nexport interface IDialogButtonBar {\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport const DialogButtonBar: React.FC<IDialogButtonBar> = ({\n  children,\n  className,\n}) => {\n  return (\n    <Box\n      className={`${className ?? ''} buttonsBar`}\n      {...getVariant('layout.common.modals.buttonsBar')}\n    >\n      {children}\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;AASO,MAAM,kBAA8C,CAAC;AAAA,EAC1D,QAAA;AAAA,EACA,SAAA;AACF,CAAM,KAAA;AACJ,EACE,uBAAA,GAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,CAAG,EAAA,SAAA,IAAa,EAAE,CAAA,WAAA,CAAA;AAAA,MAC5B,GAAG,WAAW,iCAAiC,CAAA;AAAA,MAE/C,QAAA;AAAA,KAAA;AAAA,GACH,CAAA;AAEJ;;;;"}
+{"version":3,"file":"DialogButtonBar.js","sources":["../../../../src/components/modals/layout/DialogButtonBar.tsx"],"sourcesContent":["import { getVariant } from '@apia/theme';\r\nimport * as React from 'react';\r\nimport { Box } from '@apia/theme';\r\n\r\nexport interface IDialogButtonBar {\r\n  children: React.ReactNode;\r\n  className?: string;\r\n}\r\n\r\nexport const DialogButtonBar: React.FC<IDialogButtonBar> = ({\r\n  children,\r\n  className,\r\n}) => {\r\n  return (\r\n    <Box\r\n      className={`${className ?? ''} buttonsBar`}\r\n      {...getVariant('layout.common.modals.buttonsBar')}\r\n    >\r\n      {children}\r\n    </Box>\r\n  );\r\n};\r\n"],"names":[],"mappings":";;;AASO,MAAM,kBAA8C,CAAC;AAAA,EAC1D,QAAA;AAAA,EACA,SAAA;AACF,CAAM,KAAA;AACJ,EACE,uBAAA,GAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,CAAG,EAAA,SAAA,IAAa,EAAE,CAAA,WAAA,CAAA;AAAA,MAC5B,GAAG,WAAW,iCAAiC,CAAA;AAAA,MAE/C,QAAA;AAAA,KAAA;AAAA,GACH,CAAA;AAEJ;;;;"}

package/dist/components/modals/layout/DialogHeader.js

@@ -111,7 +111,6 @@ const DialogHeader = ({
     }
   );
 };
-var DialogHeader$1 = DialogHeader;
 
-export { DialogHeader$1 as default };
+export { DialogHeader as default };
 //# sourceMappingURL=DialogHeader.js.map

package/dist/components/modals/layout/DialogHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogHeader.js","sources":["../../../../src/components/modals/layout/DialogHeader.tsx"],"sourcesContent":["import { Box, Close, Heading, useBreakpointIndex } from '@apia/theme';\nimport React, { FC } from 'react';\nimport { responsive, spacing } from '@apia/theme';\n\nexport interface IDialogHeader {\n  className?: string;\n  close: () => void;\n  hideCloseButton?: boolean;\n  id?: string;\n  NavBar?: React.ReactNode;\n  title?: string;\n}\n\ndeclare global {\n  interface Window {\n    BTN_CLOSE: string;\n  }\n}\n\nconst DialogHeader: FC<IDialogHeader> = ({\n  className,\n  close,\n  hideCloseButton,\n  id,\n  NavBar,\n  title = '',\n}) => {\n  const breakpointIndex = useBreakpointIndex();\n\n  const Title = (\n    <Heading\n      as=\"h3\"\n      sx={{\n        wordBreak: 'break-word',\n        m: '0',\n        flex: '2 0',\n        color: 'title',\n      }}\n      className=\"modal__title\"\n      id={id ? `modal-${id}-title` : ''}\n    >\n      {title}\n    </Heading>\n  );\n\n  const CloseButton = React.useMemo(\n    () =>\n      hideCloseButton ? null : (\n        <Close\n          role=\"button\"\n          type=\"button\"\n          aria-label={window.BTN_CLOSE}\n          onClick={close}\n          title={window.BTN_CLOSE}\n          sx={{\n            mr: 'unset',\n          }}\n          className=\"modal__closeButton\"\n        />\n      ),\n    [close, hideCloseButton],\n  );\n\n  const NavBarElement = NavBar && (\n    <Box\n      sx={{\n        display: 'flex',\n        gap: responsive({ 0: 2, 1: '3px', 2: 2 }),\n        justifyContent: 'end',\n        flexDirection: responsive({ 0: 'row', 1: 'column', 3: 'row' }),\n        width: responsive({ 0: 'auto', 1: '100%', 2: 'auto' }),\n        flexBasis: 'max-content',\n        height: '100%',\n      }}\n      className=\"modal__headerBar\"\n    >\n      {NavBar}\n    </Box>\n  );\n\n  return breakpointIndex > 3 ? (\n    <Box\n      className={className}\n      sx={{\n        display: 'flex',\n        flexDirection: 'row',\n        alignItems: 'start',\n        mb: spacing(0),\n        justifyContent: 'space-between',\n        width: '100%',\n        gap: spacing(2),\n        flexWrap: 'nowrap',\n      }}\n    >\n      {Title}\n      {NavBarElement}\n      {CloseButton}\n    </Box>\n  ) : (\n    <Box\n      className={className}\n      sx={{\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: responsive({ 0: 'center', 2: 'end' }),\n        mb: spacing(0),\n        justifyContent: 'space-between',\n        width: '100%',\n        gap: spacing(2),\n      }}\n    >\n      <Box\n        sx={{\n          display: 'flex',\n          width: '100%',\n        }}\n      >\n        {Title}\n        {CloseButton}\n      </Box>\n      {NavBarElement}\n    </Box>\n  );\n};\n\nexport default DialogHeader;\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"DialogHeader.js","sources":["../../../../src/components/modals/layout/DialogHeader.tsx"],"sourcesContent":["import { Box, Close, Heading, useBreakpointIndex } from '@apia/theme';\r\nimport React, { FC } from 'react';\r\nimport { responsive, spacing } from '@apia/theme';\r\n\r\nexport interface IDialogHeader {\r\n  className?: string;\r\n  close: () => void;\r\n  hideCloseButton?: boolean;\r\n  id?: string;\r\n  NavBar?: React.ReactNode;\r\n  title?: string;\r\n}\r\n\r\ndeclare global {\r\n  interface Window {\r\n    BTN_CLOSE: string;\r\n  }\r\n}\r\n\r\nconst DialogHeader: FC<IDialogHeader> = ({\r\n  className,\r\n  close,\r\n  hideCloseButton,\r\n  id,\r\n  NavBar,\r\n  title = '',\r\n}) => {\r\n  const breakpointIndex = useBreakpointIndex();\r\n\r\n  const Title = (\r\n    <Heading\r\n      as=\"h3\"\r\n      sx={{\r\n        wordBreak: 'break-word',\r\n        m: '0',\r\n        flex: '2 0',\r\n        color: 'title',\r\n      }}\r\n      className=\"modal__title\"\r\n      id={id ? `modal-${id}-title` : ''}\r\n    >\r\n      {title}\r\n    </Heading>\r\n  );\r\n\r\n  const CloseButton = React.useMemo(\r\n    () =>\r\n      hideCloseButton ? null : (\r\n        <Close\r\n          role=\"button\"\r\n          type=\"button\"\r\n          aria-label={window.BTN_CLOSE}\r\n          onClick={close}\r\n          title={window.BTN_CLOSE}\r\n          sx={{\r\n            mr: 'unset',\r\n          }}\r\n          className=\"modal__closeButton\"\r\n        />\r\n      ),\r\n    [close, hideCloseButton],\r\n  );\r\n\r\n  const NavBarElement = NavBar && (\r\n    <Box\r\n      sx={{\r\n        display: 'flex',\r\n        gap: responsive({ 0: 2, 1: '3px', 2: 2 }),\r\n        justifyContent: 'end',\r\n        flexDirection: responsive({ 0: 'row', 1: 'column', 3: 'row' }),\r\n        width: responsive({ 0: 'auto', 1: '100%', 2: 'auto' }),\r\n        flexBasis: 'max-content',\r\n        height: '100%',\r\n      }}\r\n      className=\"modal__headerBar\"\r\n    >\r\n      {NavBar}\r\n    </Box>\r\n  );\r\n\r\n  return breakpointIndex > 3 ? (\r\n    <Box\r\n      className={className}\r\n      sx={{\r\n        display: 'flex',\r\n        flexDirection: 'row',\r\n        alignItems: 'start',\r\n        mb: spacing(0),\r\n        justifyContent: 'space-between',\r\n        width: '100%',\r\n        gap: spacing(2),\r\n        flexWrap: 'nowrap',\r\n      }}\r\n    >\r\n      {Title}\r\n      {NavBarElement}\r\n      {CloseButton}\r\n    </Box>\r\n  ) : (\r\n    <Box\r\n      className={className}\r\n      sx={{\r\n        display: 'flex',\r\n        flexDirection: 'column',\r\n        alignItems: responsive({ 0: 'center', 2: 'end' }),\r\n        mb: spacing(0),\r\n        justifyContent: 'space-between',\r\n        width: '100%',\r\n        gap: spacing(2),\r\n      }}\r\n    >\r\n      <Box\r\n        sx={{\r\n          display: 'flex',\r\n          width: '100%',\r\n        }}\r\n      >\r\n        {Title}\r\n        {CloseButton}\r\n      </Box>\r\n      {NavBarElement}\r\n    </Box>\r\n  );\r\n};\r\n\r\nexport default DialogHeader;\r\n"],"names":["React"],"mappings":"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"}

package/dist/components/responsive/AutoEllipsis.js.map

@@ -1 +1 @@
-{"version":3,"file":"AutoEllipsis.js","sources":["../../../src/components/responsive/AutoEllipsis.tsx"],"sourcesContent":["/* eslint-disable no-param-reassign */\nimport { isChild } from '@apia/util';\nimport { useEffect, ReactNode, useRef, useCallback } from 'react';\nimport { Box } from '@apia/theme';\n\nexport const AutoEllipsis = ({\n  children,\n  findParent,\n  overrideStyles,\n}: {\n  children: ReactNode;\n  /**\n   * Si se pasa el método findParent, será invocado con el nodo de AutoEllipsis\n   * para dar control sobre cuál es el elemento al que se le clonarán los\n   * estilos.\n   */\n  findParent?: (currentElement: HTMLElement) => HTMLElement;\n  /**\n   * Si se pasa overrideStyles, será invocado con el nodo actual de\n   * AutoEllipsis para tomar decisiones acerca de cuáles estilos serán\n   * aplicados.\n   */\n  overrideStyles?: (\n    currentElement: HTMLElement,\n  ) => Partial<CSSStyleDeclaration>;\n}) => {\n  const unsuscribe = useRef(() => {});\n  const clone = useRef<HTMLElement | null>(null);\n  const timeout = useRef(0);\n  const ref = useCallback(\n    (el: HTMLElement) => {\n      if (!el) return;\n\n      unsuscribe.current();\n\n      function showBox() {\n        clone.current = el.cloneNode(true) as HTMLElement;\n        Object.entries(window.getComputedStyle(findParent?.(el) ?? el)).forEach(\n          ([name, value]) => {\n            if (name.match(/webkit/)) return;\n            try {\n              // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-explicit-any\n              (clone.current as HTMLElement).style[name as any] = value;\n            } catch (e) {}\n          },\n        );\n\n        const bound = el.getBoundingClientRect();\n        clone.current.style.position = 'fixed';\n        clone.current.style.left = `${bound.left - 1}px`;\n        clone.current.style.top = `${bound.top - 1}px`;\n        clone.current.style.width = `${bound.width + 8}px`;\n        clone.current.style.whiteSpace = 'break-spaces';\n        clone.current.style.overflow = 'visible';\n        clone.current.style.textOverflow = 'unset';\n        clone.current.style.background =\n          'var(--theme-ui-colors-palette-background-paper)';\n        clone.current.style.color =\n          'var(--theme-ui-colors-palette-text-primary)';\n        clone.current.style.border = '1px solid';\n        clone.current.style.borderColor =\n          'var(--theme-ui-colors-palette-border-field)';\n        clone.current.style.zIndex = '1000000';\n        clone.current.style.height = 'auto';\n        clone.current.style.fill =\n          'var(--theme-ui-colors-palette-text-primary)';\n        clone.current.style.pointerEvents = 'none';\n\n        const overridenStyles = overrideStyles?.(el);\n\n        if (overridenStyles) {\n          Object.entries(overridenStyles).forEach(([name, value]) => {\n            if (name.match(/webkit/)) return;\n\n            try {\n              // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-explicit-any\n              (clone.current as HTMLElement).style[name as any] =\n                value as string;\n            } catch (e) {}\n          });\n        }\n\n        clone.current.addEventListener('mouseleave', (ev) => {\n          if (\n            isChild(\n              ev.relatedTarget as HTMLElement,\n              (current) => current === el,\n            )\n          )\n            return;\n\n          clone.current?.remove();\n        });\n\n        function close() {\n          clone.current?.remove();\n          document.removeEventListener('scroll', close);\n        }\n        document.addEventListener('scroll', close);\n        document.body.append(clone.current);\n\n        const cloneBounding = clone.current.getBoundingClientRect();\n\n        const difX = Math.abs(cloneBounding.width - bound.width);\n        const difY = Math.abs(cloneBounding.height - bound.height);\n\n        if (difX < 50 && difY < 10) {\n          clone.current.remove();\n        }\n      }\n\n      function hideBox(ev: MouseEvent) {\n        if (\n          isChild(\n            ev.relatedTarget as HTMLElement,\n            (current) => current === clone.current,\n          )\n        )\n          return;\n\n        clone.current?.remove();\n      }\n\n      function handleMouseEnter() {\n        timeout.current = setTimeout(() => {\n          showBox();\n        }, 500) as unknown as number;\n      }\n      function handleMouseLeave(ev: MouseEvent) {\n        clearTimeout(timeout.current);\n        hideBox(ev);\n      }\n\n      el.addEventListener('mouseenter', handleMouseEnter);\n      el.addEventListener('mouseleave', handleMouseLeave);\n\n      unsuscribe.current = () => {\n        el.removeEventListener('mouseenter', handleMouseEnter);\n        el.removeEventListener('mouseleave', handleMouseLeave);\n        clearTimeout(timeout.current);\n      };\n    },\n    [findParent, overrideStyles],\n  );\n\n  useEffect(() => {\n    return () => {\n      clone.current?.remove();\n    };\n  }, []);\n\n  return (\n    <Box\n      ref={ref}\n      sx={{\n        overflow: 'hidden',\n        textOverflow: 'ellipsis',\n        whiteSpace: 'nowrap',\n      }}\n      className=\"autoellipsis__container\"\n    >\n      {children}\n    </Box>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"AutoEllipsis.js","sources":["../../../src/components/responsive/AutoEllipsis.tsx"],"sourcesContent":["/* eslint-disable no-param-reassign */\r\nimport { isChild } from '@apia/util';\r\nimport { useEffect, ReactNode, useRef, useCallback } from 'react';\r\nimport { Box } from '@apia/theme';\r\n\r\nexport const AutoEllipsis = ({\r\n  children,\r\n  findParent,\r\n  overrideStyles,\r\n}: {\r\n  children: ReactNode;\r\n  /**\r\n   * Si se pasa el método findParent, será invocado con el nodo de AutoEllipsis\r\n   * para dar control sobre cuál es el elemento al que se le clonarán los\r\n   * estilos.\r\n   */\r\n  findParent?: (currentElement: HTMLElement) => HTMLElement;\r\n  /**\r\n   * Si se pasa overrideStyles, será invocado con el nodo actual de\r\n   * AutoEllipsis para tomar decisiones acerca de cuáles estilos serán\r\n   * aplicados.\r\n   */\r\n  overrideStyles?: (\r\n    currentElement: HTMLElement,\r\n  ) => Partial<CSSStyleDeclaration>;\r\n}) => {\r\n  const unsuscribe = useRef(() => {});\r\n  const clone = useRef<HTMLElement | null>(null);\r\n  const timeout = useRef(0);\r\n  const ref = useCallback(\r\n    (el: HTMLElement) => {\r\n      if (!el) return;\r\n\r\n      unsuscribe.current();\r\n\r\n      function showBox() {\r\n        clone.current = el.cloneNode(true) as HTMLElement;\r\n        Object.entries(window.getComputedStyle(findParent?.(el) ?? el)).forEach(\r\n          ([name, value]) => {\r\n            if (name.match(/webkit/)) return;\r\n            try {\r\n              // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-explicit-any\r\n              (clone.current as HTMLElement).style[name as any] = value;\r\n            } catch (e) {}\r\n          },\r\n        );\r\n\r\n        const bound = el.getBoundingClientRect();\r\n        clone.current.style.position = 'fixed';\r\n        clone.current.style.left = `${bound.left - 1}px`;\r\n        clone.current.style.top = `${bound.top - 1}px`;\r\n        clone.current.style.width = `${bound.width + 8}px`;\r\n        clone.current.style.whiteSpace = 'break-spaces';\r\n        clone.current.style.overflow = 'visible';\r\n        clone.current.style.textOverflow = 'unset';\r\n        clone.current.style.background =\r\n          'var(--theme-ui-colors-palette-background-paper)';\r\n        clone.current.style.color =\r\n          'var(--theme-ui-colors-palette-text-primary)';\r\n        clone.current.style.border = '1px solid';\r\n        clone.current.style.borderColor =\r\n          'var(--theme-ui-colors-palette-border-field)';\r\n        clone.current.style.zIndex = '1000000';\r\n        clone.current.style.height = 'auto';\r\n        clone.current.style.fill =\r\n          'var(--theme-ui-colors-palette-text-primary)';\r\n        clone.current.style.pointerEvents = 'none';\r\n\r\n        const overridenStyles = overrideStyles?.(el);\r\n\r\n        if (overridenStyles) {\r\n          Object.entries(overridenStyles).forEach(([name, value]) => {\r\n            if (name.match(/webkit/)) return;\r\n\r\n            try {\r\n              // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-explicit-any\r\n              (clone.current as HTMLElement).style[name as any] =\r\n                value as string;\r\n            } catch (e) {}\r\n          });\r\n        }\r\n\r\n        clone.current.addEventListener('mouseleave', (ev) => {\r\n          if (\r\n            isChild(\r\n              ev.relatedTarget as HTMLElement,\r\n              (current) => current === el,\r\n            )\r\n          )\r\n            return;\r\n\r\n          clone.current?.remove();\r\n        });\r\n\r\n        function close() {\r\n          clone.current?.remove();\r\n          document.removeEventListener('scroll', close);\r\n        }\r\n        document.addEventListener('scroll', close);\r\n        document.body.append(clone.current);\r\n\r\n        const cloneBounding = clone.current.getBoundingClientRect();\r\n\r\n        const difX = Math.abs(cloneBounding.width - bound.width);\r\n        const difY = Math.abs(cloneBounding.height - bound.height);\r\n\r\n        if (difX < 50 && difY < 10) {\r\n          clone.current.remove();\r\n        }\r\n      }\r\n\r\n      function hideBox(ev: MouseEvent) {\r\n        if (\r\n          isChild(\r\n            ev.relatedTarget as HTMLElement,\r\n            (current) => current === clone.current,\r\n          )\r\n        )\r\n          return;\r\n\r\n        clone.current?.remove();\r\n      }\r\n\r\n      function handleMouseEnter() {\r\n        timeout.current = setTimeout(() => {\r\n          showBox();\r\n        }, 500) as unknown as number;\r\n      }\r\n      function handleMouseLeave(ev: MouseEvent) {\r\n        clearTimeout(timeout.current);\r\n        hideBox(ev);\r\n      }\r\n\r\n      el.addEventListener('mouseenter', handleMouseEnter);\r\n      el.addEventListener('mouseleave', handleMouseLeave);\r\n\r\n      unsuscribe.current = () => {\r\n        el.removeEventListener('mouseenter', handleMouseEnter);\r\n        el.removeEventListener('mouseleave', handleMouseLeave);\r\n        clearTimeout(timeout.current);\r\n      };\r\n    },\r\n    [findParent, overrideStyles],\r\n  );\r\n\r\n  useEffect(() => {\r\n    return () => {\r\n      clone.current?.remove();\r\n    };\r\n  }, []);\r\n\r\n  return (\r\n    <Box\r\n      ref={ref}\r\n      sx={{\r\n        overflow: 'hidden',\r\n        textOverflow: 'ellipsis',\r\n        whiteSpace: 'nowrap',\r\n      }}\r\n      className=\"autoellipsis__container\"\r\n    >\r\n      {children}\r\n    </Box>\r\n  );\r\n};\r\n"],"names":[],"mappings":"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"}