@apia/components 1.0.2 → 2.0.0

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

@@ -0,0 +1,73 @@
+import { useUpdateEffect } from '@apia/util';
+import React__default from 'react';
+import usePortal from 'react-cool-portal';
+
+function useModal(configuration) {
+  const [isLoading, setIsLoading] = React__default.useState(false);
+  const [isOpen, setIsOpen] = React__default.useState(
+    configuration?.portalArgs?.defaultShow ?? configuration?.isDefaultOpen ?? false
+  );
+  const {
+    Portal,
+    hide: hidePortal,
+    show: showPortal
+  } = usePortal({
+    ...configuration?.portalArgs,
+    containerId: "AppModals",
+    autoRemoveContainer: false,
+    escToHide: false,
+    clickOutsideToHide: false,
+    defaultShow: false,
+    internalShowHide: false
+  });
+  const hide = React__default.useCallback(() => {
+    setIsOpen(false);
+  }, []);
+  const show = React__default.useCallback(() => {
+    if (configuration?.preFetcher) {
+      setIsLoading(true);
+      configuration.preFetcher().then(() => {
+        setIsOpen(true);
+        setIsLoading(false);
+      }).catch(console.error);
+    } else
+      setIsOpen(true);
+  }, [configuration]);
+  const onClose = React__default.useCallback(() => {
+    setIsOpen(false);
+    if (configuration?.onClose)
+      configuration.onClose();
+  }, [configuration]);
+  const onExited = React__default.useCallback(() => {
+    hidePortal();
+    if (configuration?.onExited)
+      configuration.onExited();
+  }, [configuration, hidePortal]);
+  const openModalContextValue = React__default.useMemo(() => {
+    return {
+      isLoading,
+      show
+    };
+  }, [isLoading, show]);
+  useUpdateEffect(() => {
+    if (isOpen) {
+      if (configuration?.onOpen)
+        configuration.onOpen();
+      showPortal();
+    } else
+      onClose?.();
+  }, [isOpen]);
+  return {
+    hide,
+    isLoading,
+    isOpen,
+    onClose,
+    onExited,
+    openModalContextValue,
+    Portal,
+    show
+  };
+}
+
+export { useModal };
+//# sourceMappingURL=useModal.js.map

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

@@ -0,0 +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;;;;"}

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\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":";;AAKO,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.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { IConfirm } from '../../dialogs/ConfirmModal.js';
+
+declare const Confirm: ({ children, additionalButtons, additionalButtonsOnRight, cancelButtonText: cancelText, className, confirmButtonText: confirmText, confirmButtonVariant, contentRef, disabled, hideCancelButton, hideConfirmButton, isLoading, onCancel, onConfirm, variant, }: Omit<IConfirm, 'title'>) => React.JSX.Element;
+
+export { Confirm };
+//# sourceMappingURL=Confirm.d.ts.map

package/dist/components/modals/layout/Confirm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Confirm.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

@@ -0,0 +1,96 @@
+import { jsxs, jsx } from '@apia/theme/jsx-runtime';
+import { Box, getVariant } from '@apia/theme';
+import { getLabel } from '@apia/util';
+import { useCallback } from 'react';
+import { DialogButtonBar } from './DialogButtonBar.js';
+import { SimpleButton } from '../../forms/buttons/SimpleButton.js';
+import { useModalContext } from '../ModalContext.js';
+
+const Confirm = ({
+  children,
+  additionalButtons,
+  additionalButtonsOnRight,
+  cancelButtonText: cancelText = getLabel("btnCan").text,
+  className,
+  confirmButtonText: confirmText = getLabel("btnCon").text,
+  confirmButtonVariant = "primary",
+  contentRef,
+  disabled,
+  hideCancelButton,
+  hideConfirmButton,
+  isLoading,
+  onCancel,
+  onConfirm,
+  variant
+}) => {
+  const { descriptionId } = useModalContext();
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      ...getVariant(variant ?? "layout.common.modals.confirm"),
+      className: `${className ?? ""} confirm`,
+      children: [
+        /* @__PURE__ */ jsx(Box, { ref: contentRef, className: "confirm__content", id: descriptionId, children }),
+        /* @__PURE__ */ jsxs(DialogButtonBar, { className: "confirm__buttonBar", children: [
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              className: "confirm__customButtons",
+              onClick: useCallback(
+                (ev) => {
+                  if (ev.target.closest("button"))
+                    onCancel?.();
+                },
+                [onCancel]
+              ),
+              children: additionalButtons
+            }
+          ),
+          /* @__PURE__ */ jsxs(Box, { className: "confirm__defaultButtons", children: [
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                className: "confirm__customButtonsOnRight",
+                onClick: useCallback(
+                  (ev) => {
+                    if (ev.target.closest("button"))
+                      onCancel?.();
+                  },
+                  [onCancel]
+                ),
+                children: additionalButtonsOnRight
+              }
+            ),
+            !hideConfirmButton && /* @__PURE__ */ jsx(
+              SimpleButton,
+              {
+                onClick: onConfirm,
+                title: confirmText,
+                variant: confirmButtonVariant,
+                disabled: isLoading ?? disabled,
+                isLoading,
+                className: "confirm__confirmButton",
+                type: "submit",
+                children: confirmText
+              }
+            ),
+            onCancel && !hideCancelButton && /* @__PURE__ */ jsx(
+              SimpleButton,
+              {
+                onClick: onCancel,
+                title: cancelText,
+                ...getVariant("secondary"),
+                disabled: isLoading,
+                className: "confirm__cancelButton",
+                children: cancelText
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+
+export { Confirm };
+//# sourceMappingURL=Confirm.js.map

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

@@ -0,0 +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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"}

package/dist/components/modals/layout/DialogButtonBar.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+
+interface IDialogButtonBar {
+    children: React.ReactNode;
+    className?: string;
+}
+declare const DialogButtonBar: React.FC<IDialogButtonBar>;
+
+export { DialogButtonBar, type IDialogButtonBar };
+//# sourceMappingURL=DialogButtonBar.d.ts.map

package/dist/components/modals/layout/DialogButtonBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogButtonBar.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

@@ -0,0 +1,19 @@
+import { jsx } from '@apia/theme/jsx-runtime';
+import { Box, getVariant } from '@apia/theme';
+
+const DialogButtonBar = ({
+  children,
+  className
+}) => {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      className: `${className ?? ""} buttonsBar`,
+      ...getVariant("layout.common.modals.buttonsBar"),
+      children
+    }
+  );
+};
+
+export { DialogButtonBar };
+//# sourceMappingURL=DialogButtonBar.js.map

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

@@ -0,0 +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;;;;"}

package/dist/components/modals/layout/DialogHeader.d.ts

@@ -0,0 +1,18 @@
+import React__default from 'react';
+
+interface IDialogHeader {
+    className?: string;
+    close: () => void;
+    hideCloseButton?: boolean;
+    id?: string;
+    NavBar?: React__default.ReactNode;
+    title?: string;
+}
+declare global {
+    interface Window {
+        BTN_CLOSE: string;
+    }
+}
+
+export type { IDialogHeader };
+//# sourceMappingURL=DialogHeader.d.ts.map

package/dist/components/modals/layout/DialogHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogHeader.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

@@ -0,0 +1,117 @@
+import { jsx, jsxs } from '@apia/theme/jsx-runtime';
+import { useBreakpointIndex, Close, Box, responsive, spacing, Heading } from '@apia/theme';
+import React__default from 'react';
+
+const DialogHeader = ({
+  className,
+  close,
+  hideCloseButton,
+  id,
+  NavBar,
+  title = ""
+}) => {
+  const breakpointIndex = useBreakpointIndex();
+  const Title = /* @__PURE__ */ jsx(
+    Heading,
+    {
+      as: "h3",
+      sx: {
+        wordBreak: "break-word",
+        m: "0",
+        flex: "2 0",
+        color: "title"
+      },
+      className: "modal__title",
+      id: id ? `modal-${id}-title` : "",
+      children: title
+    }
+  );
+  const CloseButton = React__default.useMemo(
+    () => hideCloseButton ? null : /* @__PURE__ */ jsx(
+      Close,
+      {
+        role: "button",
+        type: "button",
+        "aria-label": window.BTN_CLOSE,
+        onClick: close,
+        title: window.BTN_CLOSE,
+        sx: {
+          mr: "unset"
+        },
+        className: "modal__closeButton"
+      }
+    ),
+    [close, hideCloseButton]
+  );
+  const NavBarElement = NavBar && /* @__PURE__ */ jsx(
+    Box,
+    {
+      sx: {
+        display: "flex",
+        gap: responsive({ 0: 2, 1: "3px", 2: 2 }),
+        justifyContent: "end",
+        flexDirection: responsive({ 0: "row", 1: "column", 3: "row" }),
+        width: responsive({ 0: "auto", 1: "100%", 2: "auto" }),
+        flexBasis: "max-content",
+        height: "100%"
+      },
+      className: "modal__headerBar",
+      children: NavBar
+    }
+  );
+  return breakpointIndex > 3 ? /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className: `${className} modal__header`,
+      sx: {
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "start",
+        mb: spacing(0),
+        justifyContent: "space-between",
+        width: "100%",
+        gap: spacing(2),
+        flexWrap: "nowrap"
+      },
+      children: [
+        Title,
+        NavBarElement,
+        CloseButton
+      ]
+    }
+  ) : /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className: `${className} modal__header`,
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: responsive({ 0: "center", 2: "end" }),
+        mb: spacing(0),
+        justifyContent: "space-between",
+        width: "100%",
+        gap: spacing(2)
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            sx: {
+              display: "flex",
+              width: "100%"
+            },
+            children: [
+              Title,
+              CloseButton
+            ]
+          }
+        ),
+        NavBarElement
+      ]
+    }
+  );
+};
+var DialogHeader$1 = DialogHeader;
+
+export { DialogHeader$1 as default };
+//# sourceMappingURL=DialogHeader.js.map

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

@@ -0,0 +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} modal__header`}\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} modal__header`}\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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"}

package/dist/components/responsive/AutoEllipsis.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+
+declare const AutoEllipsis: ({ children, findParent, overrideStyles, }: {
+    children: ReactNode;
+    /**
+     * Si se pasa el método findParent, será invocado con el nodo de AutoEllipsis
+     * para dar control sobre cuál es el elemento al que se le clonarán los
+     * estilos.
+     */
+    findParent?: ((currentElement: HTMLElement) => HTMLElement) | undefined;
+    /**
+     * Si se pasa overrideStyles, será invocado con el nodo actual de
+     * AutoEllipsis para tomar decisiones acerca de cuáles estilos serán
+     * aplicados.
+     */
+    overrideStyles?: ((currentElement: HTMLElement) => Partial<CSSStyleDeclaration>) | undefined;
+}) => React.JSX.Element;
+
+export { AutoEllipsis };
+//# sourceMappingURL=AutoEllipsis.d.ts.map

package/dist/components/responsive/AutoEllipsis.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutoEllipsis.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/responsive/AutoEllipsis.js

@@ -0,0 +1,128 @@
+import { jsx } from '@apia/theme/jsx-runtime';
+import { isChild } from '@apia/util';
+import { useRef, useCallback, useEffect } from 'react';
+import { Box } from '@apia/theme';
+
+const AutoEllipsis = ({
+  children,
+  findParent,
+  overrideStyles
+}) => {
+  const unsuscribe = useRef(() => {
+  });
+  const clone = useRef(null);
+  const timeout = useRef(0);
+  const ref = useCallback(
+    (el) => {
+      if (!el)
+        return;
+      unsuscribe.current();
+      function showBox() {
+        clone.current = el.cloneNode(true);
+        Object.entries(window.getComputedStyle(findParent?.(el) ?? el)).forEach(
+          ([name, value]) => {
+            if (name.match(/webkit/))
+              return;
+            try {
+              clone.current.style[name] = value;
+            } catch (e) {
+            }
+          }
+        );
+        const bound = el.getBoundingClientRect();
+        clone.current.style.position = "fixed";
+        clone.current.style.left = `${bound.left - 1}px`;
+        clone.current.style.top = `${bound.top - 1}px`;
+        clone.current.style.width = `${bound.width + 8}px`;
+        clone.current.style.whiteSpace = "break-spaces";
+        clone.current.style.overflow = "visible";
+        clone.current.style.textOverflow = "unset";
+        clone.current.style.background = "var(--theme-ui-colors-palette-background-paper)";
+        clone.current.style.color = "var(--theme-ui-colors-palette-text-primary)";
+        clone.current.style.border = "1px solid";
+        clone.current.style.borderColor = "var(--theme-ui-colors-palette-border-field)";
+        clone.current.style.zIndex = "1000000";
+        clone.current.style.height = "auto";
+        clone.current.style.fill = "var(--theme-ui-colors-palette-text-primary)";
+        clone.current.style.pointerEvents = "none";
+        const overridenStyles = overrideStyles?.(el);
+        if (overridenStyles) {
+          Object.entries(overridenStyles).forEach(([name, value]) => {
+            if (name.match(/webkit/))
+              return;
+            try {
+              clone.current.style[name] = value;
+            } catch (e) {
+            }
+          });
+        }
+        clone.current.addEventListener("mouseleave", (ev) => {
+          if (isChild(
+            ev.relatedTarget,
+            (current) => current === el
+          ))
+            return;
+          clone.current?.remove();
+        });
+        function close() {
+          clone.current?.remove();
+          document.removeEventListener("scroll", close);
+        }
+        document.addEventListener("scroll", close);
+        document.body.append(clone.current);
+        const cloneBounding = clone.current.getBoundingClientRect();
+        const difX = Math.abs(cloneBounding.width - bound.width);
+        const difY = Math.abs(cloneBounding.height - bound.height);
+        if (difX < 50 && difY < 10) {
+          clone.current.remove();
+        }
+      }
+      function hideBox(ev) {
+        if (isChild(
+          ev.relatedTarget,
+          (current) => current === clone.current
+        ))
+          return;
+        clone.current?.remove();
+      }
+      function handleMouseEnter() {
+        timeout.current = setTimeout(() => {
+          showBox();
+        }, 500);
+      }
+      function handleMouseLeave(ev) {
+        clearTimeout(timeout.current);
+        hideBox(ev);
+      }
+      el.addEventListener("mouseenter", handleMouseEnter);
+      el.addEventListener("mouseleave", handleMouseLeave);
+      unsuscribe.current = () => {
+        el.removeEventListener("mouseenter", handleMouseEnter);
+        el.removeEventListener("mouseleave", handleMouseLeave);
+        clearTimeout(timeout.current);
+      };
+    },
+    [findParent, overrideStyles]
+  );
+  useEffect(() => {
+    return () => {
+      clone.current?.remove();
+    };
+  }, []);
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      ref,
+      sx: {
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap"
+      },
+      className: "autoellipsis__container",
+      children
+    }
+  );
+};
+
+export { AutoEllipsis };
+//# sourceMappingURL=AutoEllipsis.js.map

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

@@ -0,0 +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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"}