@apia/components 2.0.0 → 2.0.2

package/dist/components/IconsList/KeyHandler.js

@@ -25,7 +25,7 @@ const KeyHandler = ({
   const showIconDetails = useCallback(
     (icon) => {
       if (onIconGetDetails) {
-        ApiaUtil.instance.tooltips.open({
+        new ApiaUtil().tooltips.open({
           attachToElement: () => document.querySelector(
             `#${storeId} .iconsList__iconWrapper[data-id="${icon.id}"]`
           ),

package/dist/components/IconsList/KeyHandler.js.map

@@ -1 +1 @@
-{"version":3,"file":"KeyHandler.js","sources":["../../../src/components/IconsList/KeyHandler.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { Box } from '@apia/theme';\nimport {\n  FocusEvent,\n  KeyboardEvent,\n  MouseEvent,\n  ReactNode,\n  useCallback,\n} from 'react';\nimport { useIconsListStoreContext } from './store/context';\nimport { isChild, TId, noNaN } from '@apia/util';\nimport { TIcon, TIconsList } from './types';\nimport { ApiaUtil } from '../../objects/ApiaUtil';\n\nfunction findIcon(icons: TIcon[], arg: EventTarget | TId) {\n  const iconId =\n    arg instanceof HTMLElement\n      ? arg.closest<HTMLElement>('.iconsList__iconWrapper[data-id]')?.dataset\n          ?.id\n      : arg;\n\n  if (iconId !== undefined) {\n    const icon = icons.find((current) => String(current.id) === iconId);\n\n    return icon ?? null;\n  }\n}\n\nexport const KeyHandler = ({\n  children,\n  icons,\n  onIconClick,\n  onIconDoubleClick,\n  onIconGetDetails,\n  onIconKeyDown,\n  storeId,\n}: { children: ReactNode; storeId: TId } & Pick<\n  TIconsList<any>,\n  | 'icons'\n  | 'onIconClick'\n  | 'onIconDoubleClick'\n  | 'onIconGetDetails'\n  | 'onIconKeyDown'\n>) => {\n  const { actions, getState } = useIconsListStoreContext();\n\n  const showIconDetails = useCallback(\n    (icon: TIcon) => {\n      if (onIconGetDetails) {\n        ApiaUtil.instance.tooltips.open({\n          attachToElement: () =>\n            document.querySelector(\n              `#${storeId} .iconsList__iconWrapper[data-id=\"${icon.id}\"]`,\n            ) as HTMLElement,\n          children: onIconGetDetails(icon),\n          closeOnClick: false,\n          minSize: { width: 200, height: 0 },\n        });\n      }\n    },\n    [onIconGetDetails, storeId],\n  );\n\n  return (\n    <Box\n      className=\"iconsList__keyHandler\"\n      tabIndex={0}\n      onFocus={useCallback(\n        (ev: FocusEvent) => {\n          if (\n            !isChild(ev.target as HTMLElement, (current) =>\n              current.classList?.contains('iconsList__keyHandler'),\n            )\n          )\n            return;\n          const icon = findIcon(icons, getState().focusedId);\n          if (icon) {\n            showIconDetails(icon);\n          }\n        },\n        [getState, icons, showIconDetails],\n      )}\n      onMouseDown={useCallback(\n        (ev: MouseEvent) => {\n          if (ev.target instanceof HTMLElement) {\n            const colIndex = noNaN(\n              ev.target.closest('[aria-colindex]')?.ariaColIndex,\n              -1,\n            );\n            const rowIndex = noNaN(\n              ev.target.closest('[aria-rowindex]')?.ariaRowIndex,\n              -1,\n            );\n\n            if (colIndex >= 0 && rowIndex >= 0) {\n              actions.setFocused({\n                colIndex,\n                rowIndex,\n              });\n            }\n          }\n        },\n        [actions],\n      )}\n      onClick={useCallback(\n        (ev: MouseEvent<HTMLElement>) => {\n          const icon = findIcon(icons, ev.target);\n\n          if (icon) showIconDetails(icon);\n          if (onIconClick && icon) {\n            onIconClick(ev, icon);\n          }\n        },\n        [icons, onIconClick, showIconDetails],\n      )}\n      onDoubleClick={useCallback(\n        (ev: MouseEvent<HTMLElement>) => {\n          if (onIconDoubleClick) {\n            const icon = findIcon(icons, ev.target);\n            if (icon) onIconDoubleClick(ev, icon);\n          }\n        },\n        [icons, onIconDoubleClick],\n      )}\n      onKeyDown={useCallback(\n        (ev: KeyboardEvent<HTMLElement>) => {\n          function showIconByFocusChange() {\n            const icon = findIcon(icons, getState().focusedId);\n\n            if (icon) showIconDetails(icon);\n            if (icon && onIconKeyDown) {\n              onIconKeyDown(ev, icon);\n            }\n          }\n\n          function shoutKeyDown() {\n            const icon = findIcon(icons, getState().focusedId);\n            if (icon && onIconKeyDown) {\n              onIconKeyDown(ev, icon);\n            }\n          }\n\n          switch (ev.code) {\n            case 'ArrowUp':\n              actions.arrowUp();\n              showIconByFocusChange();\n              break;\n            case 'ArrowDown':\n              actions.arrowDown();\n              showIconByFocusChange();\n              break;\n            case 'ArrowRight':\n              actions.arrowRight();\n              showIconByFocusChange();\n              break;\n            case 'ArrowLeft':\n              actions.arrowLeft();\n              showIconByFocusChange();\n              break;\n            default:\n              shoutKeyDown();\n              break;\n          }\n        },\n        [actions, getState, icons, onIconKeyDown, showIconDetails],\n      )}\n    >\n      {children}\n    </Box>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"KeyHandler.js","sources":["../../../src/components/IconsList/KeyHandler.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { Box } from '@apia/theme';\nimport {\n  FocusEvent,\n  KeyboardEvent,\n  MouseEvent,\n  ReactNode,\n  useCallback,\n} from 'react';\nimport { useIconsListStoreContext } from './store/context';\nimport { isChild, TId, noNaN } from '@apia/util';\nimport { TIcon, TIconsList } from './types';\nimport { ApiaUtil } from '../../objects/ApiaUtil';\n\nfunction findIcon(icons: TIcon[], arg: EventTarget | TId) {\n  const iconId =\n    arg instanceof HTMLElement\n      ? arg.closest<HTMLElement>('.iconsList__iconWrapper[data-id]')?.dataset\n          ?.id\n      : arg;\n\n  if (iconId !== undefined) {\n    const icon = icons.find((current) => String(current.id) === iconId);\n\n    return icon ?? null;\n  }\n}\n\nexport const KeyHandler = ({\n  children,\n  icons,\n  onIconClick,\n  onIconDoubleClick,\n  onIconGetDetails,\n  onIconKeyDown,\n  storeId,\n}: { children: ReactNode; storeId: TId } & Pick<\n  TIconsList<any>,\n  | 'icons'\n  | 'onIconClick'\n  | 'onIconDoubleClick'\n  | 'onIconGetDetails'\n  | 'onIconKeyDown'\n>) => {\n  const { actions, getState } = useIconsListStoreContext();\n\n  const showIconDetails = useCallback(\n    (icon: TIcon) => {\n      if (onIconGetDetails) {\n        new ApiaUtil().tooltips.open({\n          attachToElement: () =>\n            document.querySelector(\n              `#${storeId} .iconsList__iconWrapper[data-id=\"${icon.id}\"]`,\n            ) as HTMLElement,\n          children: onIconGetDetails(icon),\n          closeOnClick: false,\n          minSize: { width: 200, height: 0 },\n        });\n      }\n    },\n    [onIconGetDetails, storeId],\n  );\n\n  return (\n    <Box\n      className=\"iconsList__keyHandler\"\n      tabIndex={0}\n      onFocus={useCallback(\n        (ev: FocusEvent) => {\n          if (\n            !isChild(ev.target as HTMLElement, (current) =>\n              current.classList?.contains('iconsList__keyHandler'),\n            )\n          )\n            return;\n          const icon = findIcon(icons, getState().focusedId);\n          if (icon) {\n            showIconDetails(icon);\n          }\n        },\n        [getState, icons, showIconDetails],\n      )}\n      onMouseDown={useCallback(\n        (ev: MouseEvent) => {\n          if (ev.target instanceof HTMLElement) {\n            const colIndex = noNaN(\n              ev.target.closest('[aria-colindex]')?.ariaColIndex,\n              -1,\n            );\n            const rowIndex = noNaN(\n              ev.target.closest('[aria-rowindex]')?.ariaRowIndex,\n              -1,\n            );\n\n            if (colIndex >= 0 && rowIndex >= 0) {\n              actions.setFocused({\n                colIndex,\n                rowIndex,\n              });\n            }\n          }\n        },\n        [actions],\n      )}\n      onClick={useCallback(\n        (ev: MouseEvent<HTMLElement>) => {\n          const icon = findIcon(icons, ev.target);\n\n          if (icon) showIconDetails(icon);\n          if (onIconClick && icon) {\n            onIconClick(ev, icon);\n          }\n        },\n        [icons, onIconClick, showIconDetails],\n      )}\n      onDoubleClick={useCallback(\n        (ev: MouseEvent<HTMLElement>) => {\n          if (onIconDoubleClick) {\n            const icon = findIcon(icons, ev.target);\n            if (icon) onIconDoubleClick(ev, icon);\n          }\n        },\n        [icons, onIconDoubleClick],\n      )}\n      onKeyDown={useCallback(\n        (ev: KeyboardEvent<HTMLElement>) => {\n          function showIconByFocusChange() {\n            const icon = findIcon(icons, getState().focusedId);\n\n            if (icon) showIconDetails(icon);\n            if (icon && onIconKeyDown) {\n              onIconKeyDown(ev, icon);\n            }\n          }\n\n          function shoutKeyDown() {\n            const icon = findIcon(icons, getState().focusedId);\n            if (icon && onIconKeyDown) {\n              onIconKeyDown(ev, icon);\n            }\n          }\n\n          switch (ev.code) {\n            case 'ArrowUp':\n              actions.arrowUp();\n              showIconByFocusChange();\n              break;\n            case 'ArrowDown':\n              actions.arrowDown();\n              showIconByFocusChange();\n              break;\n            case 'ArrowRight':\n              actions.arrowRight();\n              showIconByFocusChange();\n              break;\n            case 'ArrowLeft':\n              actions.arrowLeft();\n              showIconByFocusChange();\n              break;\n            default:\n              shoutKeyDown();\n              break;\n          }\n        },\n        [actions, getState, icons, onIconKeyDown, showIconDetails],\n      )}\n    >\n      {children}\n    </Box>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/Toolbar/ToolbarIconButton.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { TToolbarIconButton } from './types.js';
 
-declare const ToolbarIconButton: ({ id, action, actionSource, allowToggle, defaultToggled, disabled, icon, iconSize, isLoading: outerIsLoading, title, toggled: toggledProp, }: TToolbarIconButton) => React.JSX.Element;
+declare const ToolbarIconButton: ({ id, action, allowToggle, defaultToggled, disabled, icon, iconSize, isLoading: outerIsLoading, title, toggled: toggledProp, }: TToolbarIconButton) => React.JSX.Element;
 
 export { ToolbarIconButton };
 //# sourceMappingURL=ToolbarIconButton.d.ts.map

package/dist/components/Toolbar/ToolbarIconButton.js

@@ -7,7 +7,6 @@ import { IconButton } from '../forms/buttons/IconButton.js';
 const ToolbarIconButton = ({
   id,
   action,
-  actionSource,
   allowToggle,
   defaultToggled,
   disabled,
@@ -93,15 +92,14 @@ const ToolbarIconButton = ({
     IconButton,
     {
       className: `toolbar__button ${innerIsToggled ? "toggled" : ""}`,
-      "data-id": id,
-      disabled: isDisabled,
-      icon,
-      onClick: actionSource !== "mousedown" ? handleClick : void 0,
-      isLoading,
-      onMouseDown: actionSource === "mousedown" ? handleClick : void 0,
       size: iconSize ?? "Md",
+      icon,
+      onClick: handleClick,
+      "data-id": id,
       title,
-      variant: "icon-outline"
+      disabled: isDisabled,
+      variant: "icon-outline",
+      isLoading
     }
   );
 };

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

@@ -1 +1 @@
-{"version":3,"file":"ToolbarIconButton.js","sources":["../../../src/components/Toolbar/ToolbarIconButton.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport { useToolbarControllerContext } from './ToolbarController';\nimport { TToolbarIconButton } from './types';\nimport { useMount, usePrevious } from '@apia/util';\nimport { IconButton } from '../forms';\n\nexport const ToolbarIconButton = ({\n  id,\n  action,\n  actionSource,\n  allowToggle,\n  defaultToggled,\n  disabled,\n  icon,\n  iconSize,\n  isLoading: outerIsLoading,\n  title,\n  toggled: toggledProp,\n}: TToolbarIconButton) => {\n  const [innerIsToggled, setInnerIsToggled] = useState<boolean>(\n    toggledProp ?? (allowToggle ? defaultToggled ?? false : false),\n  );\n  const [isDisabled, setIsDisabled] = useState(!!disabled);\n  const context = useToolbarControllerContext();\n  const [isLoading, setIsLoading] = useState(false);\n\n  const previousIsLoading = usePrevious(outerIsLoading);\n  if (previousIsLoading.current !== outerIsLoading)\n    setIsLoading(!!outerIsLoading);\n\n  const lastDisabledProp = usePrevious(disabled);\n  if (lastDisabledProp.current !== disabled) {\n    setIsDisabled(!!disabled);\n  }\n\n  /**\n   * Si la prop toggled cambia y no está undefined, se debe actualizar el\n   * estado interno.\n   */\n  const lastToggledProp = useRef<boolean | undefined>(toggledProp);\n  if (\n    toggledProp !== undefined &&\n    innerIsToggled !== toggledProp &&\n    lastToggledProp.current !== toggledProp\n  ) {\n    lastToggledProp.current = toggledProp;\n    setInnerIsToggled(toggledProp);\n  }\n\n  const handleClick = useCallback(async () => {\n    setIsLoading(true);\n    try {\n      if (lastToggledProp.current !== undefined) {\n        await action(\n          { isToggled: !lastToggledProp.current, isLoading },\n          context,\n        );\n      } else if (allowToggle) {\n        let isToggled = false;\n        setInnerIsToggled((current) => {\n          isToggled = !current;\n          return isToggled;\n        });\n        await action({ isToggled, isLoading }, context);\n      } else {\n        await action({ isToggled: false, isLoading }, context);\n      }\n    } catch (e) {\n      console.error(e);\n    }\n    setIsLoading(false);\n  }, [action, allowToggle, context, isLoading]);\n\n  /**\n   * Se maneja el uso de teclado para hacer click sobre el elemento\n   */\n  useEffect(() => {\n    const unsuscribe1 = context.on('updateItemState', (evId) => {\n      if (evId === id) {\n        setInnerIsToggled(!!context.itemsState[evId].toggled);\n        setIsDisabled(!!context.itemsState[evId].disabled);\n      }\n    });\n    const unsuscribe2 = context.on('pressEnter', (evId) => {\n      if (evId === id) void handleClick();\n    });\n\n    return () => {\n      unsuscribe1();\n      unsuscribe2();\n    };\n  }, [context, id, handleClick]);\n\n  useMount(() => {\n    if (context.itemsState[id]) {\n      if (context.itemsState[id].disabled !== undefined) {\n        setIsDisabled(!!context.itemsState[id].disabled);\n      }\n      if (context.itemsState[id].toggled !== undefined) {\n        setInnerIsToggled(!!context.itemsState[id].toggled);\n      }\n    } else\n      context.itemsState[id] = {\n        disabled: isDisabled,\n        toggled: innerIsToggled,\n        ...context.itemsState[id],\n      };\n  });\n\n  return (\n    <IconButton\n      className={`toolbar__button ${innerIsToggled ? 'toggled' : ''}`}\n      data-id={id}\n      disabled={isDisabled}\n      icon={icon}\n      onClick={actionSource !== 'mousedown' ? handleClick : undefined}\n      isLoading={isLoading}\n      onMouseDown={actionSource === 'mousedown' ? handleClick : undefined}\n      size={iconSize ?? 'Md'}\n      title={title}\n      variant=\"icon-outline\"\n    />\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ToolbarIconButton.js","sources":["../../../src/components/Toolbar/ToolbarIconButton.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport { useToolbarControllerContext } from './ToolbarController';\nimport { TToolbarIconButton } from './types';\nimport { useMount, usePrevious } from '@apia/util';\nimport { IconButton } from '../forms';\n\nexport const ToolbarIconButton = ({\n  id,\n  action,\n  allowToggle,\n  defaultToggled,\n  disabled,\n  icon,\n  iconSize,\n  isLoading: outerIsLoading,\n  title,\n  toggled: toggledProp,\n}: TToolbarIconButton) => {\n  const [innerIsToggled, setInnerIsToggled] = useState<boolean>(\n    toggledProp ?? (allowToggle ? defaultToggled ?? false : false),\n  );\n  const [isDisabled, setIsDisabled] = useState(!!disabled);\n  const context = useToolbarControllerContext();\n  const [isLoading, setIsLoading] = useState(false);\n\n  const previousIsLoading = usePrevious(outerIsLoading);\n  if (previousIsLoading.current !== outerIsLoading)\n    setIsLoading(!!outerIsLoading);\n\n  const lastDisabledProp = usePrevious(disabled);\n  if (lastDisabledProp.current !== disabled) {\n    setIsDisabled(!!disabled);\n  }\n\n  /**\n   * Si la prop toggled cambia y no está undefined, se debe actualizar el\n   * estado interno.\n   */\n  const lastToggledProp = useRef<boolean | undefined>(toggledProp);\n  if (\n    toggledProp !== undefined &&\n    innerIsToggled !== toggledProp &&\n    lastToggledProp.current !== toggledProp\n  ) {\n    lastToggledProp.current = toggledProp;\n    setInnerIsToggled(toggledProp);\n  }\n\n  const handleClick = useCallback(async () => {\n    setIsLoading(true);\n    try {\n      if (lastToggledProp.current !== undefined) {\n        await action(\n          { isToggled: !lastToggledProp.current, isLoading },\n          context,\n        );\n      } else if (allowToggle) {\n        let isToggled = false;\n        setInnerIsToggled((current) => {\n          isToggled = !current;\n          return isToggled;\n        });\n        await action({ isToggled, isLoading }, context);\n      } else {\n        await action({ isToggled: false, isLoading }, context);\n      }\n    } catch (e) {\n      console.error(e);\n    }\n    setIsLoading(false);\n  }, [action, allowToggle, context, isLoading]);\n\n  /**\n   * Se maneja el uso de teclado para hacer click sobre el elemento\n   */\n  useEffect(() => {\n    const unsuscribe1 = context.on('updateItemState', (evId) => {\n      if (evId === id) {\n        setInnerIsToggled(!!context.itemsState[evId].toggled);\n        setIsDisabled(!!context.itemsState[evId].disabled);\n      }\n    });\n    const unsuscribe2 = context.on('pressEnter', (evId) => {\n      if (evId === id) void handleClick();\n    });\n\n    return () => {\n      unsuscribe1();\n      unsuscribe2();\n    };\n  }, [context, id, handleClick]);\n\n  useMount(() => {\n    if (context.itemsState[id]) {\n      if (context.itemsState[id].disabled !== undefined) {\n        setIsDisabled(!!context.itemsState[id].disabled);\n      }\n      if (context.itemsState[id].toggled !== undefined) {\n        setInnerIsToggled(!!context.itemsState[id].toggled);\n      }\n    } else\n      context.itemsState[id] = {\n        disabled: isDisabled,\n        toggled: innerIsToggled,\n        ...context.itemsState[id],\n      };\n  });\n\n  return (\n    <IconButton\n      className={`toolbar__button ${innerIsToggled ? 'toggled' : ''}`}\n      size={iconSize ?? 'Md'}\n      icon={icon}\n      onClick={handleClick}\n      data-id={id}\n      title={title}\n      disabled={isDisabled}\n      variant=\"icon-outline\"\n      isLoading={isLoading}\n    />\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/Toolbar/index.d.ts

@@ -4,14 +4,16 @@ import { ToolbarController } from './ToolbarController.js';
 import '../forms/DateInput.js';
 import '../forms/NumberInput.js';
 
-declare const Toolbar: ({ children, getController, }: {
+declare const Toolbar: ((props: {
     children: ReactNode;
     /**
      * El controlador permite gestionar el estado de los distintos elementos de
      * la toolbar
      */
     getController?: ((newController: ToolbarController) => unknown) | undefined;
-}) => React.JSX.Element;
+}) => React.JSX.Element) & {
+    displayName: string;
+};
 
 export { Toolbar, ToolbarController };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Toolbar/index.js

@@ -1,26 +1,23 @@
 import { jsx } from '@apia/theme/jsx-runtime';
 import { useMount } from '@apia/util';
-import { Box, getVariant } from '@apia/theme';
+import { makeStyledComponent, Box, getVariant } from '@apia/theme';
+import { styles } from './styles.js';
 import { useMemo } from 'react';
 import { ToolbarController } from './ToolbarController.js';
 
-const Toolbar = ({
-  children,
-  getController
-}) => {
-  const controller = useMemo(() => new ToolbarController(), []);
-  useMount(() => {
-    getController?.(controller);
-  });
-  return /* @__PURE__ */ jsx(controller.Context, { children: /* @__PURE__ */ jsx(
-    Box,
-    {
-      className: "toolbar",
-      ...getVariant("layout.common.components.toolbar"),
-      children
-    }
-  ) });
-};
+const Toolbar = makeStyledComponent(
+  "toolbar",
+  "layout.components.toolbar",
+  styles,
+  ({ children, getController }) => {
+    const controller = useMemo(() => new ToolbarController(), []);
+    useMount(() => {
+      getController?.(controller);
+    });
+    return /* @__PURE__ */ jsx(controller.Context, { children: /* @__PURE__ */ jsx(Box, { className: "toolbar", ...getVariant("layout.components.toolbar"), children }) });
+  },
+  true
+);
 
 export { Toolbar, ToolbarController };
 //# sourceMappingURL=index.js.map

package/dist/components/Toolbar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Toolbar/index.tsx"],"sourcesContent":["import { useMount } from '@apia/util';\nimport { TToolbarIconButton } from './types';\nimport { Box, getVariant } from '@apia/theme';\nimport { ReactNode, useMemo } from 'react';\nimport { ToolbarController } from './ToolbarController';\nimport { ToolbarTextButton } from './ToolbarTextButton';\nimport { ToolbarIconButton } from './ToolbarIconButton';\nimport { ToolbarInput } from './ToolbarInput';\nimport { ToolbarSeparator } from './ToolbarSeparator';\nimport { ToolbarSelect } from './ToolbarSelect';\n\nconst Toolbar = ({\n  children,\n  getController,\n}: {\n  children: ReactNode;\n  /**\n   * El controlador permite gestionar el estado de los distintos elementos de\n   * la toolbar\n   */\n  getController?: (newController: ToolbarController) => unknown;\n}) => {\n  const controller = useMemo(() => new ToolbarController(), []);\n\n  useMount(() => {\n    getController?.(controller);\n  });\n\n  return (\n    <controller.Context>\n      <Box\n        className=\"toolbar\"\n        {...getVariant('layout.common.components.toolbar')}\n      >\n        {children}\n      </Box>\n    </controller.Context>\n  );\n};\n\nexport type { TToolbarIconButton as TToolDefinition };\nexport {\n  ToolbarIconButton,\n  ToolbarInput,\n  ToolbarTextButton,\n  Toolbar,\n  ToolbarController,\n  ToolbarSeparator,\n  ToolbarSelect,\n};\n"],"names":[],"mappings":";;;;;;AAWA,MAAM,UAAU,CAAC;AAAA,EACf,QAAA;AAAA,EACA,aAAA;AACF,CAOM,KAAA;AACJ,EAAA,MAAM,aAAa,OAAQ,CAAA,MAAM,IAAI,iBAAkB,EAAA,EAAG,EAAE,CAAA,CAAA;AAE5D,EAAA,QAAA,CAAS,MAAM;AACb,IAAA,aAAA,GAAgB,UAAU,CAAA,CAAA;AAAA,GAC3B,CAAA,CAAA;AAED,EACE,uBAAA,GAAA,CAAC,UAAW,CAAA,OAAA,EAAX,EACC,QAAA,kBAAA,GAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,SAAU,EAAA,SAAA;AAAA,MACT,GAAG,WAAW,kCAAkC,CAAA;AAAA,MAEhD,QAAA;AAAA,KAAA;AAAA,GAEL,EAAA,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Toolbar/index.tsx"],"sourcesContent":["import { useMount } from '@apia/util';\nimport { TToolbarIconButton } from './types';\nimport { Box, getVariant, makeStyledComponent } from '@apia/theme';\nimport { styles } from './styles';\nimport { ReactNode, useMemo } from 'react';\nimport { ToolbarController } from './ToolbarController';\nimport { ToolbarTextButton } from './ToolbarTextButton';\nimport { ToolbarIconButton } from './ToolbarIconButton';\nimport { ToolbarInput } from './ToolbarInput';\nimport { ToolbarSeparator } from './ToolbarSeparator';\nimport { ToolbarSelect } from './ToolbarSelect';\n\nconst Toolbar = makeStyledComponent<{\n  children: ReactNode;\n  /**\n   * El controlador permite gestionar el estado de los distintos elementos de\n   * la toolbar\n   */\n  getController?: (newController: ToolbarController) => unknown;\n}>(\n  'toolbar',\n  'layout.components.toolbar',\n  styles,\n  ({ children, getController }) => {\n    const controller = useMemo(() => new ToolbarController(), []);\n\n    useMount(() => {\n      getController?.(controller);\n    });\n\n    return (\n      <controller.Context>\n        <Box className=\"toolbar\" {...getVariant('layout.components.toolbar')}>\n          {children}\n        </Box>\n      </controller.Context>\n    );\n  },\n  true,\n);\n\nexport type { TToolbarIconButton as TToolDefinition };\nexport {\n  ToolbarIconButton,\n  ToolbarInput,\n  ToolbarTextButton,\n  Toolbar,\n  ToolbarController,\n  ToolbarSeparator,\n  ToolbarSelect,\n};\n"],"names":[],"mappings":";;;;;;;AAYA,MAAM,OAAU,GAAA,mBAAA;AAAA,EAQd,SAAA;AAAA,EACA,2BAAA;AAAA,EACA,MAAA;AAAA,EACA,CAAC,EAAE,QAAU,EAAA,aAAA,EAAoB,KAAA;AAC/B,IAAA,MAAM,aAAa,OAAQ,CAAA,MAAM,IAAI,iBAAkB,EAAA,EAAG,EAAE,CAAA,CAAA;AAE5D,IAAA,QAAA,CAAS,MAAM;AACb,MAAA,aAAA,GAAgB,UAAU,CAAA,CAAA;AAAA,KAC3B,CAAA,CAAA;AAED,IAAA,uBACG,GAAA,CAAA,UAAA,CAAW,OAAX,EAAA,EACC,QAAC,kBAAA,GAAA,CAAA,GAAA,EAAA,EAAI,SAAU,EAAA,SAAA,EAAW,GAAG,UAAA,CAAW,2BAA2B,CAAA,EAChE,UACH,CACF,EAAA,CAAA,CAAA;AAAA,GAEJ;AAAA,EACA,IAAA;AACF;;;;"}

package/dist/components/Toolbar/types.d.ts

@@ -8,7 +8,6 @@ type TToolEventState = {
 };
 type TToolbarIconButton = {
     action: (props: TToolEventState, controller: ToolbarController) => unknown;
-    actionSource?: 'click' | 'mousedown';
     /**
      * Si se pasa allowToggle y no se pasa toggled ( ni en true ni en false ),
      * entonces el estado de toggle será controlado internamente en el toolbar
@@ -20,10 +19,10 @@ type TToolbarIconButton = {
     defaultToggled?: boolean;
     disabled?: boolean;
     icon: TIconType | TIconName;
-    iconSize?: 'Xs' | 'Sm' | 'Md' | 'Lg' | 'Xl' | undefined;
     id: string;
     isLoading?: boolean;
     title: string;
+    iconSize?: 'Xs' | 'Sm' | 'Md' | 'Lg' | 'Xl' | undefined;
     /**
      * Siempre que se pase toggled, no importa si en true o en false, el
      * usuario del toolbar deberá mantener la lógica de persistencia del

package/dist/components/modals/Modal.d.ts

@@ -9,7 +9,7 @@ type TModal = {
      * Si esta variable está en true, el modal se comportará más como una ventana
      * que como un modal
      */
-    draggable?: boolean;
+    asWindow?: boolean;
     children?: React__default.ReactNode;
     className?: string;
     id?: string;
@@ -46,10 +46,6 @@ type TModal = {
      * el botón cerrar del header (La X).
      */
     onClose?: () => void;
-    /**
-     * Este método recibe el evento del mousedown utilizado para controllar el dragstart. Si el usuario devuelve false, el drag no será realizado.
-     */
-    onDragStart?: (ev: MouseEvent) => boolean;
     /**
      * Permite definir un callback que será llamado siempre que el modal se
      * cierre, una vez que la animación haya terminado.
@@ -85,7 +81,7 @@ declare const Modal: React__default.ForwardRefExoticComponent<{
      * Si esta variable está en true, el modal se comportará más como una ventana
      * que como un modal
      */
-    draggable?: boolean | undefined;
+    asWindow?: boolean | undefined;
     children?: React__default.ReactNode;
     className?: string | undefined;
     id?: string | undefined;
@@ -122,10 +118,6 @@ declare const Modal: React__default.ForwardRefExoticComponent<{
      * el botón cerrar del header (La X).
      */
     onClose?: (() => void) | undefined;
-    /**
-     * Este método recibe el evento del mousedown utilizado para controllar el dragstart. Si el usuario devuelve false, el drag no será realizado.
-     */
-    onDragStart?: ((ev: MouseEvent) => boolean) | undefined;
     /**
      * Permite definir un callback que será llamado siempre que el modal se
      * cierre, una vez que la animación haya terminado.

package/dist/components/modals/Modal.js

@@ -5,7 +5,7 @@ import { StaticModal } from './StaticModal.js';
 
 const Modal = forwardRef(
   (props, ref) => {
-    if (props.draggable) {
+    if (props.asWindow) {
       return /* @__PURE__ */ jsx(WindowModal, { ...props, ref });
     }
     return /* @__PURE__ */ jsx(StaticModal, { ...props, ref });

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../../../src/components/modals/Modal.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { IOnFocusConfiguration, TFocusRetriever } from '@apia/util';\nimport { TModalSize } from '../types';\nimport { IDialogHeader } from './layout/DialogHeader';\nimport { WindowModal } from './WindowModal';\nimport { StaticModal } from './StaticModal';\n\nexport type TModal = {\n  animationDuration?: number;\n  /**\n   * Si esta variable está en true, el modal se comportará más como una ventana\n   * que como un modal\n   */\n  draggable?: boolean;\n  children?: React.ReactNode;\n  className?: string;\n  id?: string;\n  initialFocusConfiguration?: IOnFocusConfiguration;\n  /**\n   * Este retriever será pasado al método focus.on para realizar el foco en el\n   * elemento inicial del modal.\n   *\n   * @see focus\n   */\n  initialFocusGetter?: (\n    modalInnerRef: HTMLElement,\n  ) => ReturnType<TFocusRetriever>;\n  /**\n   * Si se pasa un ref, el modal hará foco sobre el elemento una vez que haya\n   * abierto.\n   */\n  initialFocusRef?: React.RefObject<unknown>;\n  /**\n   * Controla el estado del modal, indicando a la transición de apertura o\n   * cierre que debe comenzar, dependiendo de si cambia a true o false\n   * respectivamente.\n   */\n  isOpen?: boolean;\n  maxWidth?: number | string;\n  /**\n   * Permite pasar un componente React que se mostrará a la derecha del título,\n   * con el fin de incorporar botones en el header del modal.\n   */\n  NavBar?: React.ReactNode;\n  noFocus?: boolean;\n  noHeader?: boolean;\n  /**\n   * Permite definir un callback que será llamado solamente cuando el modal se\n   * cierre por medio del click en el overlay, al presionar escape o mediante\n   * el botón cerrar del header (La X).\n   */\n  onClose?: () => void;\n  /**\n   * Este método recibe el evento del mousedown utilizado para controllar el dragstart. Si el usuario devuelve false, el drag no será realizado.\n   */\n  onDragStart?: (ev: MouseEvent) => boolean;\n  /**\n   * Permite definir un callback que será llamado siempre que el modal se\n   * cierre, una vez que la animación haya terminado.\n   */\n  onExited?: () => unknown;\n  /**\n   * Al pasar un Portal, el modal se abrirá dentro de éste y no directamente en\n   * la posición actual dentro del árbol de componentes. Normalmente, este\n   * Portal es pasado automáticamente por el hook useModal (No el de la\n   * librería, sino el nuestro).\n   *\n   * @see useModal\n   */\n  Portal?: React.FC<{\n    children: React.ReactNode;\n  }>;\n  /**\n   * Si es true, el modal será cerrado al presionar escape.\n   */\n  shouldCloseOnEsc?: boolean;\n  /**\n   * Si es true, el modal será cerrado al hacer clic en el overlay.\n   */\n  shouldCloseOnOverlayClick?: boolean;\n  size?: TModalSize;\n  stretch?: boolean;\n  title?: string;\n  variant?: string;\n} & Pick<IDialogHeader, 'hideCloseButton'>;\n\nexport const Modal = forwardRef(\n  (props: TModal, ref: React.Ref<HTMLDivElement>) => {\n    if (props.draggable) {\n      return <WindowModal {...props} ref={ref} />;\n    }\n    return <StaticModal {...props} ref={ref} />;\n  },\n);\n\nModal.displayName = 'Modal';\n"],"names":[],"mappings":";;;;;AAsFO,MAAM,KAAQ,GAAA,UAAA;AAAA,EACnB,CAAC,OAAe,GAAmC,KAAA;AACjD,IAAA,IAAI,MAAM,SAAW,EAAA;AACnB,MAAA,uBAAQ,GAAA,CAAA,WAAA,EAAA,EAAa,GAAG,KAAA,EAAO,GAAU,EAAA,CAAA,CAAA;AAAA,KAC3C;AACA,IAAA,uBAAQ,GAAA,CAAA,WAAA,EAAA,EAAa,GAAG,KAAA,EAAO,GAAU,EAAA,CAAA,CAAA;AAAA,GAC3C;AACF,EAAA;AAEA,KAAA,CAAM,WAAc,GAAA,OAAA;;;;"}
+{"version":3,"file":"Modal.js","sources":["../../../src/components/modals/Modal.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { IOnFocusConfiguration, TFocusRetriever } from '@apia/util';\nimport { TModalSize } from '../types';\nimport { IDialogHeader } from './layout/DialogHeader';\nimport { WindowModal } from './WindowModal';\nimport { StaticModal } from './StaticModal';\n\nexport type TModal = {\n  animationDuration?: number;\n  /**\n   * Si esta variable está en true, el modal se comportará más como una ventana\n   * que como un modal\n   */\n  asWindow?: boolean;\n  children?: React.ReactNode;\n  className?: string;\n  id?: string;\n  initialFocusConfiguration?: IOnFocusConfiguration;\n  /**\n   * Este retriever será pasado al método focus.on para realizar el foco en el\n   * elemento inicial del modal.\n   *\n   * @see focus\n   */\n  initialFocusGetter?: (\n    modalInnerRef: HTMLElement,\n  ) => ReturnType<TFocusRetriever>;\n  /**\n   * Si se pasa un ref, el modal hará foco sobre el elemento una vez que haya\n   * abierto.\n   */\n  initialFocusRef?: React.RefObject<unknown>;\n  /**\n   * Controla el estado del modal, indicando a la transición de apertura o\n   * cierre que debe comenzar, dependiendo de si cambia a true o false\n   * respectivamente.\n   */\n  isOpen?: boolean;\n  maxWidth?: number | string;\n  /**\n   * Permite pasar un componente React que se mostrará a la derecha del título,\n   * con el fin de incorporar botones en el header del modal.\n   */\n  NavBar?: React.ReactNode;\n  noFocus?: boolean;\n  noHeader?: boolean;\n  /**\n   * Permite definir un callback que será llamado solamente cuando el modal se\n   * cierre por medio del click en el overlay, al presionar escape o mediante\n   * el botón cerrar del header (La X).\n   */\n  onClose?: () => void;\n  /**\n   * Permite definir un callback que será llamado siempre que el modal se\n   * cierre, una vez que la animación haya terminado.\n   */\n  onExited?: () => unknown;\n  /**\n   * Al pasar un Portal, el modal se abrirá dentro de éste y no directamente en\n   * la posición actual dentro del árbol de componentes. Normalmente, este\n   * Portal es pasado automáticamente por el hook useModal (No el de la\n   * librería, sino el nuestro).\n   *\n   * @see useModal\n   */\n  Portal?: React.FC<{\n    children: React.ReactNode;\n  }>;\n  /**\n   * Si es true, el modal será cerrado al presionar escape.\n   */\n  shouldCloseOnEsc?: boolean;\n  /**\n   * Si es true, el modal será cerrado al hacer clic en el overlay.\n   */\n  shouldCloseOnOverlayClick?: boolean;\n  size?: TModalSize;\n  stretch?: boolean;\n  title?: string;\n  variant?: string;\n} & Pick<IDialogHeader, 'hideCloseButton'>;\n\nexport const Modal = forwardRef(\n  (props: TModal, ref: React.Ref<HTMLDivElement>) => {\n    if (props.asWindow) {\n      return <WindowModal {...props} ref={ref} />;\n    }\n    return <StaticModal {...props} ref={ref} />;\n  },\n);\n\nModal.displayName = 'Modal';\n"],"names":[],"mappings":";;;;;AAkFO,MAAM,KAAQ,GAAA,UAAA;AAAA,EACnB,CAAC,OAAe,GAAmC,KAAA;AACjD,IAAA,IAAI,MAAM,QAAU,EAAA;AAClB,MAAA,uBAAQ,GAAA,CAAA,WAAA,EAAA,EAAa,GAAG,KAAA,EAAO,GAAU,EAAA,CAAA,CAAA;AAAA,KAC3C;AACA,IAAA,uBAAQ,GAAA,CAAA,WAAA,EAAA,EAAa,GAAG,KAAA,EAAO,GAAU,EAAA,CAAA,CAAA;AAAA,GAC3C;AACF,EAAA;AAEA,KAAA,CAAM,WAAc,GAAA,OAAA;;;;"}

package/dist/components/modals/Overlay.js

@@ -55,10 +55,9 @@ const Overlay = React.forwardRef(
                 autoFocus: shouldAvoidInitialFocusTrap ? false : void 0,
                 returnFocus: false,
                 crossFrame: false,
+                disabled: document.activeElement?.classList.contains("filter") && document.activeElement.tagName === "INPUT",
                 whiteList: (el) => {
-                  return !el.closest(
-                    '[role="menu"], .modal__variantWrapper, .filter'
-                  );
+                  return !el.closest('[role="menu"]');
                 },
                 children
               }

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

@@ -1 +1 @@
-{"version":3,"file":"Overlay.js","sources":["../../../src/components/modals/Overlay.tsx"],"sourcesContent":["import * as React from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport { Box, BoxProps } from '@apia/theme';\nimport ReactFocusLock from 'react-focus-lock';\nimport { getVariant } from '@apia/theme';\nimport { useCombinedRefs } from '@apia/util';\nimport { useBodyScrollLock } from '../../hooks';\n\nexport interface IOverlay extends BoxProps {\n  children: React.ReactNode;\n  className?: string;\n  onOverlayClicked: (event: React.MouseEvent<HTMLDivElement>) => void;\n  /**\n   * Permite pasar un callback que será llamado una vez que el overlay termine\n   * de cerrarse.\n   */\n  onExited: () => void;\n  isOpen?: boolean;\n  shouldAvoidInitialFocusTrap?: boolean;\n  stretch?: boolean;\n  transitionDuration?: number;\n}\n\nexport const Overlay = React.forwardRef<unknown, IOverlay>(\n  (\n    {\n      children,\n      className = '',\n      onExited,\n      onOverlayClicked,\n      isOpen: open = false,\n      shouldAvoidInitialFocusTrap,\n      stretch,\n      transitionDuration = 150,\n      ...props\n    },\n    ref,\n  ) => {\n    const innerRef = React.useRef<HTMLDivElement>(null);\n    const assignRefs = useCombinedRefs(innerRef, ref);\n    useBodyScrollLock(open);\n    return (\n      <CSSTransition\n        in={open}\n        timeout={transitionDuration}\n        onExited={onExited}\n        classNames=\"overlayAnimation\"\n        appear\n        nodeRef={innerRef}\n        unmountOnExit\n      >\n        <Box\n          className={`${className} overlay`}\n          ref={assignRefs}\n          {...props}\n          data-type=\"overlay\"\n          role=\"presentation\"\n          onClick={React.useCallback(\n            (ev: React.MouseEvent<HTMLDivElement>) => {\n              if (ev.target === innerRef.current) onOverlayClicked(ev);\n            },\n            [onOverlayClicked],\n          )}\n          {...getVariant(\n            props.variant ??\n              `layout.common.modals.overlay${stretch ? '--stretch' : ''}`,\n          )}\n        >\n          <ReactFocusLock\n            autoFocus={shouldAvoidInitialFocusTrap ? false : undefined}\n            returnFocus={false}\n            crossFrame={false}\n            whiteList={(el) => {\n              return !el.closest(\n                '[role=\"menu\"], .modal__variantWrapper, .filter',\n              );\n            }}\n          >\n            {children}\n          </ReactFocusLock>\n        </Box>\n      </CSSTransition>\n    );\n  },\n);\n\nOverlay.displayName = 'Overlay';\n"],"names":[],"mappings":";;;;;;;;AAuBO,MAAM,UAAU,KAAM,CAAA,UAAA;AAAA,EAC3B,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAY,GAAA,EAAA;AAAA,IACZ,QAAA;AAAA,IACA,gBAAA;AAAA,IACA,QAAQ,IAAO,GAAA,KAAA;AAAA,IACf,2BAAA;AAAA,IACA,OAAA;AAAA,IACA,kBAAqB,GAAA,GAAA;AAAA,IACrB,GAAG,KAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAM,MAAA,QAAA,GAAW,KAAM,CAAA,MAAA,CAAuB,IAAI,CAAA,CAAA;AAClD,IAAM,MAAA,UAAA,GAAa,eAAgB,CAAA,QAAA,EAAU,GAAG,CAAA,CAAA;AAChD,IAAA,iBAAA,CAAkB,IAAI,CAAA,CAAA;AACtB,IACE,uBAAA,GAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,EAAI,EAAA,IAAA;AAAA,QACJ,OAAS,EAAA,kBAAA;AAAA,QACT,QAAA;AAAA,QACA,UAAW,EAAA,kBAAA;AAAA,QACX,MAAM,EAAA,IAAA;AAAA,QACN,OAAS,EAAA,QAAA;AAAA,QACT,aAAa,EAAA,IAAA;AAAA,QAEb,QAAA,kBAAA,GAAA;AAAA,UAAC,GAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,GAAG,SAAS,CAAA,QAAA,CAAA;AAAA,YACvB,GAAK,EAAA,UAAA;AAAA,YACJ,GAAG,KAAA;AAAA,YACJ,WAAU,EAAA,SAAA;AAAA,YACV,IAAK,EAAA,cAAA;AAAA,YACL,SAAS,KAAM,CAAA,WAAA;AAAA,cACb,CAAC,EAAyC,KAAA;AACxC,gBAAI,IAAA,EAAA,CAAG,WAAW,QAAS,CAAA,OAAA;AAAS,kBAAA,gBAAA,CAAiB,EAAE,CAAA,CAAA;AAAA,eACzD;AAAA,cACA,CAAC,gBAAgB,CAAA;AAAA,aACnB;AAAA,YACC,GAAG,UAAA;AAAA,cACF,KAAM,CAAA,OAAA,IACJ,CAA+B,4BAAA,EAAA,OAAA,GAAU,cAAc,EAAE,CAAA,CAAA;AAAA,aAC7D;AAAA,YAEA,QAAA,kBAAA,GAAA;AAAA,cAAC,cAAA;AAAA,cAAA;AAAA,gBACC,SAAA,EAAW,8BAA8B,KAAQ,GAAA,KAAA,CAAA;AAAA,gBACjD,WAAa,EAAA,KAAA;AAAA,gBACb,UAAY,EAAA,KAAA;AAAA,gBACZ,SAAA,EAAW,CAAC,EAAO,KAAA;AACjB,kBAAA,OAAO,CAAC,EAAG,CAAA,OAAA;AAAA,oBACT,gDAAA;AAAA,mBACF,CAAA;AAAA,iBACF;AAAA,gBAEC,QAAA;AAAA,eAAA;AAAA,aACH;AAAA,WAAA;AAAA,SACF;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAEJ;AACF,EAAA;AAEA,OAAA,CAAQ,WAAc,GAAA,SAAA;;;;"}
+{"version":3,"file":"Overlay.js","sources":["../../../src/components/modals/Overlay.tsx"],"sourcesContent":["import * as React from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport { Box, BoxProps } from '@apia/theme';\nimport ReactFocusLock from 'react-focus-lock';\nimport { getVariant } from '@apia/theme';\nimport { useCombinedRefs } from '@apia/util';\nimport { useBodyScrollLock } from '../../hooks';\n\nexport interface IOverlay extends BoxProps {\n  children: React.ReactNode;\n  className?: string;\n  onOverlayClicked: (event: React.MouseEvent<HTMLDivElement>) => void;\n  /**\n   * Permite pasar un callback que será llamado una vez que el overlay termine\n   * de cerrarse.\n   */\n  onExited: () => void;\n  isOpen?: boolean;\n  shouldAvoidInitialFocusTrap?: boolean;\n  stretch?: boolean;\n  transitionDuration?: number;\n}\n\nexport const Overlay = React.forwardRef<unknown, IOverlay>(\n  (\n    {\n      children,\n      className = '',\n      onExited,\n      onOverlayClicked,\n      isOpen: open = false,\n      shouldAvoidInitialFocusTrap,\n      stretch,\n      transitionDuration = 150,\n      ...props\n    },\n    ref,\n  ) => {\n    const innerRef = React.useRef<HTMLDivElement>(null);\n    const assignRefs = useCombinedRefs(innerRef, ref);\n    useBodyScrollLock(open);\n    return (\n      <CSSTransition\n        in={open}\n        timeout={transitionDuration}\n        onExited={onExited}\n        classNames=\"overlayAnimation\"\n        appear\n        nodeRef={innerRef}\n        unmountOnExit\n      >\n        <Box\n          className={`${className} overlay`}\n          ref={assignRefs}\n          {...props}\n          data-type=\"overlay\"\n          role=\"presentation\"\n          onClick={React.useCallback(\n            (ev: React.MouseEvent<HTMLDivElement>) => {\n              if (ev.target === innerRef.current) onOverlayClicked(ev);\n            },\n            [onOverlayClicked],\n          )}\n          {...getVariant(\n            props.variant ??\n              `layout.common.modals.overlay${stretch ? '--stretch' : ''}`,\n          )}\n        >\n          <ReactFocusLock\n            autoFocus={shouldAvoidInitialFocusTrap ? false : undefined}\n            returnFocus={false}\n            crossFrame={false}\n            disabled={\n              document.activeElement?.classList.contains('filter') &&\n              document.activeElement.tagName === 'INPUT'\n            }\n            whiteList={(el) => {\n              return !el.closest('[role=\"menu\"]');\n            }}\n          >\n            {children}\n          </ReactFocusLock>\n        </Box>\n      </CSSTransition>\n    );\n  },\n);\n\nOverlay.displayName = 'Overlay';\n"],"names":[],"mappings":";;;;;;;;AAuBO,MAAM,UAAU,KAAM,CAAA,UAAA;AAAA,EAC3B,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAY,GAAA,EAAA;AAAA,IACZ,QAAA;AAAA,IACA,gBAAA;AAAA,IACA,QAAQ,IAAO,GAAA,KAAA;AAAA,IACf,2BAAA;AAAA,IACA,OAAA;AAAA,IACA,kBAAqB,GAAA,GAAA;AAAA,IACrB,GAAG,KAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAM,MAAA,QAAA,GAAW,KAAM,CAAA,MAAA,CAAuB,IAAI,CAAA,CAAA;AAClD,IAAM,MAAA,UAAA,GAAa,eAAgB,CAAA,QAAA,EAAU,GAAG,CAAA,CAAA;AAChD,IAAA,iBAAA,CAAkB,IAAI,CAAA,CAAA;AACtB,IACE,uBAAA,GAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,EAAI,EAAA,IAAA;AAAA,QACJ,OAAS,EAAA,kBAAA;AAAA,QACT,QAAA;AAAA,QACA,UAAW,EAAA,kBAAA;AAAA,QACX,MAAM,EAAA,IAAA;AAAA,QACN,OAAS,EAAA,QAAA;AAAA,QACT,aAAa,EAAA,IAAA;AAAA,QAEb,QAAA,kBAAA,GAAA;AAAA,UAAC,GAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,GAAG,SAAS,CAAA,QAAA,CAAA;AAAA,YACvB,GAAK,EAAA,UAAA;AAAA,YACJ,GAAG,KAAA;AAAA,YACJ,WAAU,EAAA,SAAA;AAAA,YACV,IAAK,EAAA,cAAA;AAAA,YACL,SAAS,KAAM,CAAA,WAAA;AAAA,cACb,CAAC,EAAyC,KAAA;AACxC,gBAAI,IAAA,EAAA,CAAG,WAAW,QAAS,CAAA,OAAA;AAAS,kBAAA,gBAAA,CAAiB,EAAE,CAAA,CAAA;AAAA,eACzD;AAAA,cACA,CAAC,gBAAgB,CAAA;AAAA,aACnB;AAAA,YACC,GAAG,UAAA;AAAA,cACF,KAAM,CAAA,OAAA,IACJ,CAA+B,4BAAA,EAAA,OAAA,GAAU,cAAc,EAAE,CAAA,CAAA;AAAA,aAC7D;AAAA,YAEA,QAAA,kBAAA,GAAA;AAAA,cAAC,cAAA;AAAA,cAAA;AAAA,gBACC,SAAA,EAAW,8BAA8B,KAAQ,GAAA,KAAA,CAAA;AAAA,gBACjD,WAAa,EAAA,KAAA;AAAA,gBACb,UAAY,EAAA,KAAA;AAAA,gBACZ,QAAA,EACE,SAAS,aAAe,EAAA,SAAA,CAAU,SAAS,QAAQ,CAAA,IACnD,QAAS,CAAA,aAAA,CAAc,OAAY,KAAA,OAAA;AAAA,gBAErC,SAAA,EAAW,CAAC,EAAO,KAAA;AACjB,kBAAO,OAAA,CAAC,EAAG,CAAA,OAAA,CAAQ,eAAe,CAAA,CAAA;AAAA,iBACpC;AAAA,gBAEC,QAAA;AAAA,eAAA;AAAA,aACH;AAAA,WAAA;AAAA,SACF;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAEJ;AACF,EAAA;AAEA,OAAA,CAAQ,WAAc,GAAA,SAAA;;;;"}

package/dist/components/modals/StaticModal.js

@@ -3,12 +3,10 @@ import React__default, { forwardRef, useRef, useState, useEffect, useCallback }
 import { CSSTransition } from 'react-transition-group';
 import { Box, getVariant } from '@apia/theme';
 import uniqueId from 'lodash-es/uniqueId';
-import { useCombinedRefs } from '@apia/util';
+import { useCombinedRefs, focus, focusSelector, getFocusSelector } from '@apia/util';
 import { Overlay } from './Overlay.js';
 import DialogHeader from './layout/DialogHeader.js';
 import { ModalContext } from './ModalContext.js';
-import { useEscapeKey } from './hooks/useEscapeKey.js';
-import { useInitialFocus } from './hooks/useInitialFocus.js';
 
 const StaticModal = forwardRef(
   ({
@@ -65,15 +63,45 @@ const StaticModal = forwardRef(
         }
       }
     };
-    useEscapeKey({ closeHandler, id: innerId, isOpenInner, shouldCloseOnEsc });
-    useInitialFocus({
-      isOpenInner,
-      initialFocusConfiguration,
-      initialFocusGetter,
-      initialFocusRef,
-      noFocus,
-      parentElement: overlayElement
-    });
+    useEffect(() => {
+      function handleEscape(event) {
+        const overlays = [...document.querySelectorAll(".overlay")];
+        if (overlays.length > 0 && overlays[overlays.length - 1]?.id === innerId && event.key === "Escape") {
+          event.preventDefault();
+          event.stopPropagation();
+          closeHandler();
+          return false;
+        }
+        return true;
+      }
+      if (isOpenInner && shouldCloseOnEsc)
+        document.addEventListener("keydown", handleEscape, false);
+      return () => {
+        document.removeEventListener("keydown", handleEscape, false);
+      };
+    }, [shouldCloseOnEsc, isOpenInner, closeHandler, innerId]);
+    React__default.useEffect(
+      () => {
+        if (!noFocus && isOpenInner) {
+          if (overlayElement) {
+            void focus.on(
+              () => {
+                if (initialFocusGetter)
+                  return initialFocusGetter(overlayElement);
+                if (initialFocusRef?.current)
+                  return (initialFocusRef?.current || overlayElement).querySelector(focusSelector);
+                return overlayElement.querySelector(
+                  getFocusSelector(":not(.modal__closeButton)")
+                );
+              },
+              { ...initialFocusConfiguration, focusEvenWhenScreenLocked: true }
+            );
+          }
+        }
+      },
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [overlayElement]
+    );
     const Wrapper = React__default.useMemo(() => {
       return Portal ?? React__default.Fragment;
     }, []);

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

@@ -1 +1 @@
-{"version":3,"file":"StaticModal.js","sources":["../../../src/components/modals/StaticModal.tsx"],"sourcesContent":["import React, {\n  useEffect,\n  useState,\n  useCallback,\n  forwardRef,\n  useRef,\n} from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport { Box } from '@apia/theme';\nimport uniqueId from 'lodash-es/uniqueId';\nimport { useCombinedRefs } from '@apia/util';\nimport { getVariant } from '@apia/theme';\nimport { Overlay } from './Overlay';\nimport DialogHeader from './layout/DialogHeader';\nimport { ModalContext } from './ModalContext';\nimport { TModal } from './Modal';\nimport { useEscapeKey } from './hooks/useEscapeKey';\nimport { useInitialFocus } from './hooks/useInitialFocus';\n\nexport const StaticModal = forwardRef(\n  (\n    {\n      animationDuration = 150,\n      children = null,\n      className,\n      hideCloseButton,\n      id,\n      initialFocusConfiguration,\n      initialFocusGetter,\n      initialFocusRef,\n      isOpen = false,\n      maxWidth,\n      NavBar,\n      noFocus,\n      noHeader = false,\n      onClose = () => {},\n      onExited = () => {},\n      Portal,\n      shouldCloseOnEsc = true,\n      shouldCloseOnOverlayClick = true,\n      size = 'md',\n      stretch,\n      title = '',\n      variant,\n    }: Omit<TModal, 'asWindow'>,\n    ref: React.Ref<HTMLDivElement>,\n  ) => {\n    const lastTitle = useRef(title);\n    const [innerTitle, setInnerTitle] = useState(title);\n    if (lastTitle.current !== title && innerTitle !== title) {\n      setInnerTitle(title);\n    }\n    const [isOpenInner, setIsOpen] = useState(isOpen);\n    const innerId = React.useMemo(() => {\n      return `Modal${uniqueId()}`;\n    }, []);\n\n    useEffect(() => {\n      setIsOpen(isOpen);\n    }, [isOpen]);\n\n    const closeHandler = useCallback(() => {\n      setIsOpen(false);\n      onClose();\n    }, [onClose]);\n    const [overlayElement, setInnerRef] = React.useState<HTMLElement>();\n    const assignRefs = useCombinedRefs(\n      setInnerRef as unknown as React.ForwardedRef<unknown>,\n      ref as unknown as React.Ref<unknown>,\n    );\n\n    const overlayClickedHandle = (event: React.MouseEvent<HTMLDivElement>) => {\n      if (shouldCloseOnOverlayClick) {\n        if (\n          (event.target as HTMLDivElement).getAttribute('data-type') ===\n          'overlay'\n        ) {\n          closeHandler();\n        }\n      }\n    };\n\n    useEscapeKey({ closeHandler, id: innerId, isOpenInner, shouldCloseOnEsc });\n    useInitialFocus({\n      isOpenInner,\n      initialFocusConfiguration,\n      initialFocusGetter,\n      initialFocusRef,\n      noFocus,\n      parentElement: overlayElement,\n    });\n\n    const Wrapper = React.useMemo(() => {\n      return Portal ?? React.Fragment;\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n\n    const nodeRef = useRef<HTMLElement | null>(null);\n\n    return (\n      <ModalContext.Provider\n        value={React.useMemo(() => {\n          return {\n            changeTitle: (newTitle) => {\n              setInnerTitle(newTitle);\n            },\n            close: () => {\n              closeHandler();\n            },\n            descriptionId: `${innerId}_Description`,\n          };\n        }, [closeHandler, innerId])}\n      >\n        <Wrapper>\n          <Overlay\n            onOverlayClicked={overlayClickedHandle}\n            isOpen={isOpen}\n            className={className}\n            stretch={stretch}\n            ref={assignRefs}\n            onExited={onExited}\n            id={innerId}\n            shouldAvoidInitialFocusTrap={noFocus}\n          >\n            <CSSTransition\n              in={isOpen}\n              timeout={animationDuration}\n              classNames=\"modal\"\n              appear\n              unmountOnExit\n              nodeRef={nodeRef}\n            >\n              <Box\n                ref={nodeRef}\n                className=\"modal__variantWrapper\"\n                {...(variant ? getVariant(variant) : {})}\n              >\n                <Box\n                  id={id}\n                  role=\"dialog\"\n                  aria-modal=\"true\"\n                  aria-label={title}\n                  aria-describedby={`${innerId}_Description`}\n                  aria-hidden=\"false\"\n                  className=\"modal__main\"\n                  // allows scrolling within element, despite body lock\n                  data-scroll-lock-scrollable\n                  sx={React.useMemo(() => {\n                    return {\n                      variant: `layout.common.modals.${size}`,\n                      ...(maxWidth !== undefined ? { maxWidth } : {}),\n                    };\n                  }, [maxWidth, size])}\n                  data-variant={`layout.common.modals.${size}`}\n                >\n                  {!noHeader && (\n                    <DialogHeader\n                      className=\"modal__header\"\n                      NavBar={NavBar}\n                      title={innerTitle}\n                      close={closeHandler}\n                      hideCloseButton={hideCloseButton}\n                      id={`${innerId}_Header`}\n                    />\n                  )}\n                  <Box\n                    className=\"modal__content\"\n                    id={\n                      typeof children === 'string'\n                        ? `${innerId}_Description`\n                        : undefined\n                    }\n                  >\n                    {children}\n                  </Box>\n                </Box>\n              </Box>\n            </CSSTransition>\n          </Overlay>\n        </Wrapper>\n      </ModalContext.Provider>\n    );\n  },\n);\n\nStaticModal.displayName = 'StaticModal';\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"StaticModal.js","sources":["../../../src/components/modals/StaticModal.tsx"],"sourcesContent":["import React, {\n  useEffect,\n  useState,\n  useCallback,\n  forwardRef,\n  useRef,\n} from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport { Box } from '@apia/theme';\nimport uniqueId from 'lodash-es/uniqueId';\nimport {\n  focus,\n  focusSelector,\n  getFocusSelector,\n  useCombinedRefs,\n} from '@apia/util';\nimport { getVariant } from '@apia/theme';\nimport { Overlay } from './Overlay';\nimport DialogHeader from './layout/DialogHeader';\nimport { ModalContext } from './ModalContext';\nimport { TModal } from './Modal';\n\nexport const StaticModal = forwardRef(\n  (\n    {\n      animationDuration = 150,\n      children = null,\n      className,\n      hideCloseButton,\n      id,\n      initialFocusConfiguration,\n      initialFocusGetter,\n      initialFocusRef,\n      isOpen = false,\n      maxWidth,\n      NavBar,\n      noFocus,\n      noHeader = false,\n      onClose = () => {},\n      onExited = () => {},\n      Portal,\n      shouldCloseOnEsc = true,\n      shouldCloseOnOverlayClick = true,\n      size = 'md',\n      stretch,\n      title = '',\n      variant,\n    }: Omit<TModal, 'asWindow'>,\n    ref: React.Ref<HTMLDivElement>,\n  ) => {\n    const lastTitle = useRef(title);\n    const [innerTitle, setInnerTitle] = useState(title);\n    if (lastTitle.current !== title && innerTitle !== title) {\n      setInnerTitle(title);\n    }\n    const [isOpenInner, setIsOpen] = useState(isOpen);\n    const innerId = React.useMemo(() => {\n      return `Modal${uniqueId()}`;\n    }, []);\n\n    useEffect(() => {\n      setIsOpen(isOpen);\n    }, [isOpen]);\n\n    const closeHandler = useCallback(() => {\n      setIsOpen(false);\n      onClose();\n    }, [onClose]);\n    const [overlayElement, setInnerRef] = React.useState<HTMLElement>();\n    const assignRefs = useCombinedRefs(\n      setInnerRef as unknown as React.ForwardedRef<unknown>,\n      ref as unknown as React.Ref<unknown>,\n    );\n\n    const overlayClickedHandle = (event: React.MouseEvent<HTMLDivElement>) => {\n      if (shouldCloseOnOverlayClick) {\n        if (\n          (event.target as HTMLDivElement).getAttribute('data-type') ===\n          'overlay'\n        ) {\n          closeHandler();\n        }\n      }\n    };\n\n    useEffect(() => {\n      function handleEscape(event: KeyboardEvent) {\n        const overlays = [...document.querySelectorAll('.overlay')];\n\n        if (\n          overlays.length > 0 &&\n          overlays[overlays.length - 1]?.id === innerId &&\n          event.key === 'Escape'\n        ) {\n          event.preventDefault();\n          event.stopPropagation();\n\n          closeHandler();\n\n          return false;\n        }\n\n        return true;\n      }\n      if (isOpenInner && shouldCloseOnEsc)\n        document.addEventListener('keydown', handleEscape, false);\n      return () => {\n        document.removeEventListener('keydown', handleEscape, false);\n      };\n    }, [shouldCloseOnEsc, isOpenInner, closeHandler, innerId]);\n\n    React.useEffect(\n      () => {\n        if (!noFocus && isOpenInner) {\n          if (overlayElement) {\n            void focus.on(\n              () => {\n                if (initialFocusGetter)\n                  return initialFocusGetter(overlayElement);\n                if (initialFocusRef?.current)\n                  return (\n                    (initialFocusRef?.current || overlayElement) as HTMLElement\n                  ).querySelector(focusSelector) as HTMLElement;\n                return overlayElement.querySelector(\n                  getFocusSelector(':not(.modal__closeButton)'),\n                ) as HTMLElement;\n              },\n              { ...initialFocusConfiguration, focusEvenWhenScreenLocked: true },\n            );\n          }\n        }\n      },\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [overlayElement],\n    );\n\n    const Wrapper = React.useMemo(() => {\n      return Portal ?? React.Fragment;\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n\n    const nodeRef = useRef<HTMLElement | null>(null);\n\n    return (\n      <ModalContext.Provider\n        value={React.useMemo(() => {\n          return {\n            changeTitle: (newTitle) => {\n              setInnerTitle(newTitle);\n            },\n            close: () => {\n              closeHandler();\n            },\n            descriptionId: `${innerId}_Description`,\n          };\n        }, [closeHandler, innerId])}\n      >\n        <Wrapper>\n          <Overlay\n            onOverlayClicked={overlayClickedHandle}\n            isOpen={isOpen}\n            className={className}\n            stretch={stretch}\n            ref={assignRefs}\n            onExited={onExited}\n            id={innerId}\n            shouldAvoidInitialFocusTrap={noFocus}\n          >\n            <CSSTransition\n              in={isOpen}\n              timeout={animationDuration}\n              classNames=\"modal\"\n              appear\n              unmountOnExit\n              nodeRef={nodeRef}\n            >\n              <Box\n                ref={nodeRef}\n                className=\"modal__variantWrapper\"\n                {...(variant ? getVariant(variant) : {})}\n              >\n                <Box\n                  id={id}\n                  role=\"dialog\"\n                  aria-modal=\"true\"\n                  aria-label={title}\n                  aria-describedby={`${innerId}_Description`}\n                  aria-hidden=\"false\"\n                  className=\"modal__main\"\n                  // allows scrolling within element, despite body lock\n                  data-scroll-lock-scrollable\n                  sx={React.useMemo(() => {\n                    return {\n                      variant: `layout.common.modals.${size}`,\n                      ...(maxWidth !== undefined ? { maxWidth } : {}),\n                    };\n                  }, [maxWidth, size])}\n                  data-variant={`layout.common.modals.${size}`}\n                >\n                  {!noHeader && (\n                    <DialogHeader\n                      className=\"modal__header\"\n                      NavBar={NavBar}\n                      title={innerTitle}\n                      close={closeHandler}\n                      hideCloseButton={hideCloseButton}\n                      id={`${innerId}_Header`}\n                    />\n                  )}\n                  <Box\n                    className=\"modal__content\"\n                    id={\n                      typeof children === 'string'\n                        ? `${innerId}_Description`\n                        : undefined\n                    }\n                  >\n                    {children}\n                  </Box>\n                </Box>\n              </Box>\n            </CSSTransition>\n          </Overlay>\n        </Wrapper>\n      </ModalContext.Provider>\n    );\n  },\n);\n\nStaticModal.displayName = 'StaticModal';\n"],"names":["React"],"mappings":"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"}