@apia/components 2.0.9 → 2.0.11

package/dist/tabs/Item.js

@@ -0,0 +1,64 @@
+import { jsx } from '@apia/theme/jsx-runtime';
+import { useUpdateEffect } from 'ahooks';
+import React__default from 'react';
+import { shallowEqual } from 'react-redux';
+import { useTabsContext } from './util.js';
+import { usePropsSelector, getSpecificParent } from '@apia/util';
+import { DefaultTabsLabelRenderer } from './renderers/DefaultTabsLabelRenderer.js';
+import { SimpleButton } from '../components/forms/buttons/SimpleButton.js';
+
+const Item = ({ tabId }) => {
+  const { handler, id, onCloseTab, onOpenTab } = useTabsContext();
+  const tab = usePropsSelector(tabId, {
+    propsStore: handler.propsStore,
+    comparator: shallowEqual
+  });
+  const Renderer = React__default.useMemo(
+    () => tab.labelRenderer ?? null,
+    [tab.labelRenderer]
+  );
+  const ref = React__default.useRef({});
+  useUpdateEffect(() => {
+    if (tab.isFocused) {
+      ref.current?.focus({
+        preventScroll: true
+      });
+    }
+  }, [tab.isFocused]);
+  React__default.useEffect(() => {
+    if (tab.isOpen) {
+      const scrollParent = getSpecificParent(
+        ref.current,
+        (current) => current.classList.contains("tabs__list")
+      );
+      scrollParent?.scroll({
+        left: ref.current.offsetLeft - 100
+      });
+    }
+  }, [tab.isOpen]);
+  const handleOpen = React__default.useCallback(() => onOpenTab(tab), [onOpenTab, tab]);
+  const buttonProps = {
+    className: `tabs__item__wrapper ${tab.isOpen ? "open" : ""} ${tab.isDisabled ? "disabled" : ""}`,
+    title: tab.title ?? tab.label,
+    onMouseDown: React__default.useCallback(
+      (ev) => {
+        if (ev.button === 1) {
+          onCloseTab(tab);
+        } else if (ev.button === 0)
+          handleOpen();
+      },
+      [handleOpen, onCloseTab, tab]
+    ),
+    "aria-controls": `tabpanel-${id}-${tab.id}`,
+    "aria-selected": tab.isOpen ?? false,
+    id: `tab-${id}-${tab.id}`,
+    tabIndex: tab.isFocused ? 0 : -1,
+    role: "tab",
+    variant: "inherit"
+  };
+  return /* @__PURE__ */ jsx(SimpleButton, { "data-id": tabId, ref, ...buttonProps, children: Renderer ? /* @__PURE__ */ jsx(Renderer, { tab }) : /* @__PURE__ */ jsx(DefaultTabsLabelRenderer, { tab }) });
+};
+var Item$1 = Item;
+
+export { Item$1 as default };
+//# sourceMappingURL=Item.js.map

package/dist/tabs/Item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Item.js","sources":["../../src/tabs/Item.tsx"],"sourcesContent":["import { useUpdateEffect } from 'ahooks';\r\nimport React from 'react';\r\nimport { shallowEqual } from 'react-redux';\r\nimport { TTab, TTabsItem } from './types';\r\nimport { useTabsContext } from './util';\r\nimport { getSpecificParent, usePropsSelector } from '@apia/util';\r\nimport { SimpleButton } from '../components';\r\nimport { DefaultTabsLabelRenderer } from './renderers/DefaultTabsLabelRenderer';\r\n\r\nconst Item = ({ tabId }: TTabsItem) => {\r\n  const { handler, id, onCloseTab, onOpenTab } = useTabsContext();\r\n\r\n  const tab = usePropsSelector<TTab, TTab>(tabId, {\r\n    propsStore: handler.propsStore,\r\n    comparator: shallowEqual,\r\n  });\r\n\r\n  const Renderer = React.useMemo(\r\n    () => tab.labelRenderer ?? null,\r\n    [tab.labelRenderer],\r\n  );\r\n\r\n  const ref = React.useRef<HTMLButtonElement>({} as HTMLButtonElement);\r\n  useUpdateEffect(() => {\r\n    if (tab.isFocused) {\r\n      ref.current?.focus({\r\n        preventScroll: true,\r\n      });\r\n    }\r\n  }, [tab.isFocused]);\r\n  React.useEffect(() => {\r\n    if (tab.isOpen) {\r\n      const scrollParent = getSpecificParent(ref.current, (current) =>\r\n        current.classList.contains('tabs__list'),\r\n      ) as HTMLElement;\r\n\r\n      scrollParent?.scroll({\r\n        left: ref.current.offsetLeft - 100,\r\n      });\r\n    }\r\n  }, [tab.isOpen]);\r\n\r\n  const handleOpen = React.useCallback(() => onOpenTab(tab), [onOpenTab, tab]);\r\n  const buttonProps = {\r\n    className: `tabs__item__wrapper ${tab.isOpen ? 'open' : ''} ${\r\n      tab.isDisabled ? 'disabled' : ''\r\n    }`,\r\n    title: tab.title ?? tab.label,\r\n    onMouseDown: React.useCallback(\r\n      (ev: React.MouseEvent) => {\r\n        if (ev.button === 1) {\r\n          onCloseTab(tab);\r\n        } else if (ev.button === 0) handleOpen();\r\n      },\r\n      [handleOpen, onCloseTab, tab],\r\n    ),\r\n    'aria-controls': `tabpanel-${id}-${tab.id}`,\r\n    'aria-selected': tab.isOpen ?? false,\r\n    id: `tab-${id}-${tab.id}`,\r\n    tabIndex: tab.isFocused ? 0 : -1,\r\n    role: 'tab',\r\n    variant: 'inherit',\r\n  };\r\n\r\n  return (\r\n    <SimpleButton data-id={tabId} ref={ref} {...buttonProps}>\r\n      {Renderer ? (\r\n        <Renderer tab={tab} />\r\n      ) : (\r\n        <DefaultTabsLabelRenderer tab={tab} />\r\n      )}\r\n    </SimpleButton>\r\n  );\r\n};\r\n\r\nexport default Item;\r\n"],"names":["React"],"mappings":"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"}

package/dist/tabs/Tabs.d.ts

@@ -0,0 +1,8 @@
+import React__default from 'react';
+import { BoxProps } from '@apia/theme';
+import { TTabs } from './types.js';
+
+declare const Tabs: <AdditionalPropsType extends Record<string, unknown> = Record<string, unknown>>({ id, onCloseTab, onOpenTab, onRequestClose, className, orientation, getHandler, initialTabs, isMultiple, onKeyDown, ...props }: TTabs<AdditionalPropsType> & Omit<BoxProps, 'id' | 'as' | 'role'>, ref: React__default.ForwardedRef<HTMLDivElement>) => React__default.JSX.Element;
+
+export { Tabs };
+//# sourceMappingURL=Tabs.d.ts.map

package/dist/tabs/Tabs.d.ts.map

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

package/dist/tabs/Tabs.js

@@ -0,0 +1,78 @@
+import { jsx } from '@apia/theme/jsx-runtime';
+import React__default from 'react';
+import { Box } from '@apia/theme';
+import TabsController from './tabsController.js';
+import { TabsContext } from './util.js';
+import { useMount } from '@apia/util';
+
+const NonForwardedTabs = ({
+  id,
+  onCloseTab,
+  onOpenTab,
+  onRequestClose,
+  className,
+  orientation,
+  getHandler,
+  initialTabs,
+  isMultiple,
+  onKeyDown,
+  ...props
+}, ref) => {
+  const [handler, setHandler] = React__default.useState({});
+  useMount(() => {
+    const newHandler = new TabsController(String(id), {
+      id,
+      onCloseTab,
+      onOpenTab,
+      onRequestClose,
+      orientation,
+      initialTabs,
+      isMultiple
+    });
+    setHandler(newHandler);
+    getHandler?.(newHandler);
+  });
+  const Context = React__default.useMemo(() => {
+    return TabsContext;
+  }, []);
+  return /* @__PURE__ */ jsx(
+    Context.Provider,
+    {
+      value: React__default.useMemo(
+        () => ({
+          handler,
+          id,
+          onCloseTab(tab) {
+            void handler.closeTab(tab.id);
+          },
+          onOpenTab(tab) {
+            handler.openTab(tab.id, !isMultiple);
+            onOpenTab?.(tab);
+          },
+          orientation: orientation ?? "horizontal"
+        }),
+        [handler, id, isMultiple, onOpenTab, orientation]
+      ),
+      children: /* @__PURE__ */ jsx(
+        Box,
+        {
+          ...props,
+          onKeyDown: React__default.useCallback(
+            (ev) => {
+              onKeyDown?.(ev);
+              handler.handleKeyDown(ev);
+            },
+            [handler, onKeyDown]
+          ),
+          ref
+        }
+      )
+    }
+  );
+};
+const Tabs = React__default.forwardRef(
+  NonForwardedTabs
+);
+
+export { Tabs };
+//# sourceMappingURL=Tabs.js.map

package/dist/tabs/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","sources":["../../src/tabs/Tabs.tsx"],"sourcesContent":["import React from 'react';\r\nimport { Box, BoxProps } from '@apia/theme';\r\nimport TabsController from './tabsController';\r\nimport { TTabs, TTabsContext } from './types';\r\nimport { TabsContext } from './util';\r\nimport { useMount } from '@apia/util';\r\n\r\nconst NonForwardedTabs = <\r\n  AdditionalPropsType extends Record<string, unknown> = Record<string, unknown>,\r\n>(\r\n  {\r\n    id,\r\n    onCloseTab,\r\n    onOpenTab,\r\n    onRequestClose,\r\n    className,\r\n    orientation,\r\n    getHandler,\r\n    initialTabs,\r\n    isMultiple,\r\n    onKeyDown,\r\n    ...props\r\n  }: TTabs<AdditionalPropsType> & Omit<BoxProps, 'id' | 'as' | 'role'>,\r\n  ref: React.ForwardedRef<HTMLDivElement>,\r\n) => {\r\n  const [handler, setHandler] = React.useState<\r\n    TabsController<AdditionalPropsType>\r\n  >({} as TabsController<AdditionalPropsType>);\r\n\r\n  useMount(() => {\r\n    const newHandler = new TabsController<AdditionalPropsType>(String(id), {\r\n      id,\r\n      onCloseTab,\r\n      onOpenTab,\r\n      onRequestClose,\r\n      orientation,\r\n      initialTabs,\r\n      isMultiple,\r\n    });\r\n    setHandler(newHandler);\r\n    getHandler?.(newHandler);\r\n  });\r\n\r\n  const Context = React.useMemo(() => {\r\n    return TabsContext as React.Context<TTabsContext<AdditionalPropsType>>;\r\n  }, []);\r\n\r\n  return (\r\n    <Context.Provider\r\n      value={React.useMemo(\r\n        () => ({\r\n          handler,\r\n          id,\r\n          onCloseTab(tab) {\r\n            void handler.closeTab(tab.id);\r\n          },\r\n          onOpenTab(tab) {\r\n            handler.openTab(tab.id, !isMultiple);\r\n            onOpenTab?.(tab);\r\n          },\r\n          orientation: orientation ?? 'horizontal',\r\n        }),\r\n        [handler, id, isMultiple, onOpenTab, orientation],\r\n      )}\r\n    >\r\n      <Box\r\n        {...props}\r\n        onKeyDown={React.useCallback(\r\n          (ev: React.KeyboardEvent<HTMLDivElement>) => {\r\n            onKeyDown?.(ev);\r\n            handler.handleKeyDown(ev);\r\n          },\r\n          [handler, onKeyDown],\r\n        )}\r\n        ref={ref}\r\n      />\r\n    </Context.Provider>\r\n  );\r\n};\r\n\r\nexport const Tabs = React.forwardRef<HTMLDivElement, TTabs>(\r\n  NonForwardedTabs,\r\n) as unknown as typeof NonForwardedTabs;\r\n"],"names":["React"],"mappings":";;;;;;;AAOA,MAAM,mBAAmB,CAGvB;AAAA,EACE,EAAA;AAAA,EACA,UAAA;AAAA,EACA,SAAA;AAAA,EACA,cAAA;AAAA,EACA,SAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG,KAAA;AACL,CAAA,EACA,GACG,KAAA;AACH,EAAA,MAAM,CAAC,OAAS,EAAA,UAAU,IAAIA,cAAM,CAAA,QAAA,CAElC,EAAyC,CAAA,CAAA;AAE3C,EAAA,QAAA,CAAS,MAAM;AACb,IAAA,MAAM,UAAa,GAAA,IAAI,cAAoC,CAAA,MAAA,CAAO,EAAE,CAAG,EAAA;AAAA,MACrE,EAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,MACA,cAAA;AAAA,MACA,WAAA;AAAA,MACA,WAAA;AAAA,MACA,UAAA;AAAA,KACD,CAAA,CAAA;AACD,IAAA,UAAA,CAAW,UAAU,CAAA,CAAA;AACrB,IAAA,UAAA,GAAa,UAAU,CAAA,CAAA;AAAA,GACxB,CAAA,CAAA;AAED,EAAM,MAAA,OAAA,GAAUA,cAAM,CAAA,OAAA,CAAQ,MAAM;AAClC,IAAO,OAAA,WAAA,CAAA;AAAA,GACT,EAAG,EAAE,CAAA,CAAA;AAEL,EACE,uBAAA,GAAA;AAAA,IAAC,OAAQ,CAAA,QAAA;AAAA,IAAR;AAAA,MACC,OAAOA,cAAM,CAAA,OAAA;AAAA,QACX,OAAO;AAAA,UACL,OAAA;AAAA,UACA,EAAA;AAAA,UACA,WAAW,GAAK,EAAA;AACd,YAAK,KAAA,OAAA,CAAQ,QAAS,CAAA,GAAA,CAAI,EAAE,CAAA,CAAA;AAAA,WAC9B;AAAA,UACA,UAAU,GAAK,EAAA;AACb,YAAA,OAAA,CAAQ,OAAQ,CAAA,GAAA,CAAI,EAAI,EAAA,CAAC,UAAU,CAAA,CAAA;AACnC,YAAA,SAAA,GAAY,GAAG,CAAA,CAAA;AAAA,WACjB;AAAA,UACA,aAAa,WAAe,IAAA,YAAA;AAAA,SAC9B,CAAA;AAAA,QACA,CAAC,OAAA,EAAS,EAAI,EAAA,UAAA,EAAY,WAAW,WAAW,CAAA;AAAA,OAClD;AAAA,MAEA,QAAA,kBAAA,GAAA;AAAA,QAAC,GAAA;AAAA,QAAA;AAAA,UACE,GAAG,KAAA;AAAA,UACJ,WAAWA,cAAM,CAAA,WAAA;AAAA,YACf,CAAC,EAA4C,KAAA;AAC3C,cAAA,SAAA,GAAY,EAAE,CAAA,CAAA;AACd,cAAA,OAAA,CAAQ,cAAc,EAAE,CAAA,CAAA;AAAA,aAC1B;AAAA,YACA,CAAC,SAAS,SAAS,CAAA;AAAA,WACrB;AAAA,UACA,GAAA;AAAA,SAAA;AAAA,OACF;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ,CAAA,CAAA;AAEO,MAAM,OAAOA,cAAM,CAAA,UAAA;AAAA,EACxB,gBAAA;AACF;;;;"}

package/dist/tabs/TabsList.d.ts

@@ -0,0 +1,8 @@
+import React__default from 'react';
+
+declare const TabsList: ({ arrowsBehavior, }: {
+    arrowsBehavior?: "open" | "focus" | undefined;
+}) => React__default.JSX.Element;
+
+export { TabsList };
+//# sourceMappingURL=TabsList.d.ts.map

package/dist/tabs/TabsList.d.ts.map

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

package/dist/tabs/TabsList.js

@@ -0,0 +1,138 @@
+import { jsxs, jsx, Fragment } from '@apia/theme/jsx-runtime';
+import React__default from 'react';
+import { Box, getVariant } from '@apia/theme';
+import ContextMenu from './ContextMenu.js';
+import Item from './Item.js';
+import useTabsList from './useTabsList.js';
+import { useTabsContext } from './util.js';
+import { isChild, getSpecificParent, getLabel } from '@apia/util';
+import { IconButton } from '../components/forms/buttons/IconButton.js';
+
+const TabsList = ({
+  arrowsBehavior = "focus"
+}) => {
+  const { id, orientation, handler } = useTabsContext();
+  const tabs = useTabsList();
+  const fixedTabs = React__default.useMemo(
+    () => (tabs ?? []).filter((current) => current.isFixed),
+    [tabs]
+  );
+  const nonFixedTabs = React__default.useMemo(
+    () => (tabs ?? []).filter((current) => !current.isFixed),
+    [tabs]
+  );
+  const [showScrollButtons, setShowScrollButtons] = React__default.useState(true);
+  const [ref, setRef] = React__default.useState(null);
+  React__default.useEffect(() => {
+    if (ref) {
+      const observer = new MutationObserver(([{ addedNodes }]) => {
+        const fixedTabsElement = ref.querySelector(".tabsList__fixedTabs");
+        const hasFixedTabsScroll = (fixedTabsElement?.clientWidth ?? 0) < (fixedTabsElement?.scrollWidth ?? 0);
+        const nonFixedTabsElement = ref.querySelector(".tabs__list");
+        const hasFixedNonTabsScroll = (nonFixedTabsElement?.clientWidth ?? 0) < (nonFixedTabsElement?.scrollWidth ?? 0);
+        setShowScrollButtons(hasFixedTabsScroll || hasFixedNonTabsScroll);
+        if (addedNodes) {
+          ref.querySelector(".tabs__list").scrollLeft = 9999999;
+        }
+      });
+      observer.observe(ref, { childList: true, subtree: true });
+      return () => {
+        observer.disconnect();
+      };
+    }
+    return () => {
+    };
+  }, [ref]);
+  const onClickPrev = React__default.useCallback(() => {
+    if (arrowsBehavior === "focus")
+      handler.focusPreviousTab();
+    if (arrowsBehavior === "open")
+      handler.openPreviousTab();
+  }, [arrowsBehavior, handler]);
+  const onClickNext = React__default.useCallback(() => {
+    if (arrowsBehavior === "focus")
+      handler.focusNextTab();
+    if (arrowsBehavior === "open")
+      handler.openNextTab();
+  }, [arrowsBehavior, handler]);
+  const [anchorPoint, setAnchorPoint] = React__default.useState({ x: 0, y: 0 });
+  const [isOpen, setIsOpen] = React__default.useState(false);
+  const [targetId, setTargetId] = React__default.useState("");
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      id: `tabsList-${id}`,
+      className: "tabsList__wrapper",
+      role: "tablist",
+      ...getVariant("layout.common.tabs.primary"),
+      ref: setRef,
+      onBlur: React__default.useCallback((ev) => {
+        if (!isChild(
+          ev.relatedTarget,
+          (current) => current.classList.contains("tabsList__wrapper")
+        )) ;
+      }, []),
+      children: [
+        /* @__PURE__ */ jsx(Box, { className: "tabsList__fixedTabs", children: fixedTabs.map((current) => /* @__PURE__ */ jsx(Item, { tabId: current.id }, current.id)) }),
+        /* @__PURE__ */ jsx(
+          ContextMenu,
+          {
+            anchorPoint,
+            isOpen,
+            onClose: React__default.useCallback(() => setIsOpen(false), []),
+            targetId
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            className: `noScrollbar tabs__list ${orientation === "vertical" ? "vertical" : ""}`,
+            onContextMenu: React__default.useCallback((e) => {
+              const tabElement = getSpecificParent(
+                e.target,
+                (current) => current.classList.contains("tabs__item__wrapper")
+              );
+              if (tabElement) {
+                e.preventDefault();
+                e.stopPropagation();
+                setTargetId(tabElement.dataset.id);
+                setAnchorPoint({ x: e.clientX, y: e.clientY });
+                setIsOpen(true);
+              }
+            }, []),
+            children: nonFixedTabs.map((current) => /* @__PURE__ */ jsx(Item, { tabId: current.id }, current.id))
+          }
+        ),
+        showScrollButtons && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              "aria-label": getLabel("lblTogglePrevTab").text,
+              className: "tabs__switch__left",
+              icon: "ArrowLeft",
+              iconSize: "Xs",
+              onClick: onClickPrev,
+              title: getLabel("lblTogglePrevTab").text,
+              ...getVariant("icon-primary")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              "aria-label": getLabel("lblToggleNextTab").text,
+              className: "tabs__switch__right",
+              icon: "ArrowRight",
+              iconSize: "Xs",
+              onClick: onClickNext,
+              title: getLabel("lblToggleNextTab").text,
+              ...getVariant("icon-primary")
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+
+export { TabsList };
+//# sourceMappingURL=TabsList.js.map

package/dist/tabs/TabsList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsList.js","sources":["../../src/tabs/TabsList.tsx"],"sourcesContent":["import React from 'react';\r\nimport { Box, getVariant } from '@apia/theme';\r\nimport ContextMenu from './ContextMenu';\r\nimport Item from './Item';\r\nimport useTabsList from './useTabsList';\r\nimport { useTabsContext } from './util';\r\nimport { TId, getLabel, getSpecificParent, isChild } from '@apia/util';\r\nimport { IconButton } from '../components';\r\n\r\nexport const TabsList = ({\r\n  arrowsBehavior = 'focus',\r\n}: {\r\n  arrowsBehavior?: 'open' | 'focus';\r\n}) => {\r\n  const { id, orientation, handler } = useTabsContext();\r\n  const tabs = useTabsList();\r\n\r\n  const fixedTabs = React.useMemo(\r\n    () => (tabs ?? []).filter((current) => current.isFixed),\r\n    [tabs],\r\n  );\r\n  const nonFixedTabs = React.useMemo(\r\n    () => (tabs ?? []).filter((current) => !current.isFixed),\r\n    [tabs],\r\n  );\r\n\r\n  const [showScrollButtons, setShowScrollButtons] = React.useState(true);\r\n\r\n  const [ref, setRef] = React.useState<HTMLDivElement | null>(null);\r\n  React.useEffect(() => {\r\n    if (ref) {\r\n      const observer = new MutationObserver(([{ addedNodes }]) => {\r\n        const fixedTabsElement = ref.querySelector('.tabsList__fixedTabs');\r\n        const hasFixedTabsScroll =\r\n          (fixedTabsElement?.clientWidth ?? 0) <\r\n          (fixedTabsElement?.scrollWidth ?? 0);\r\n        const nonFixedTabsElement = ref.querySelector('.tabs__list');\r\n        const hasFixedNonTabsScroll =\r\n          (nonFixedTabsElement?.clientWidth ?? 0) <\r\n          (nonFixedTabsElement?.scrollWidth ?? 0);\r\n\r\n        setShowScrollButtons(hasFixedTabsScroll || hasFixedNonTabsScroll);\r\n\r\n        if (addedNodes) {\r\n          (\r\n            ref.querySelector('.tabs__list') as HTMLElement\r\n          ).scrollLeft = 9999999;\r\n        }\r\n      });\r\n      observer.observe(ref, { childList: true, subtree: true });\r\n      return () => {\r\n        observer.disconnect();\r\n      };\r\n    }\r\n\r\n    return () => {};\r\n  }, [ref]);\r\n\r\n  const onClickPrev = React.useCallback(() => {\r\n    if (arrowsBehavior === 'focus') handler.focusPreviousTab();\r\n    if (arrowsBehavior === 'open') handler.openPreviousTab();\r\n  }, [arrowsBehavior, handler]);\r\n\r\n  const onClickNext = React.useCallback(() => {\r\n    if (arrowsBehavior === 'focus') handler.focusNextTab();\r\n    if (arrowsBehavior === 'open') handler.openNextTab();\r\n  }, [arrowsBehavior, handler]);\r\n\r\n  const [anchorPoint, setAnchorPoint] = React.useState({ x: 0, y: 0 });\r\n  const [isOpen, setIsOpen] = React.useState(false);\r\n  const [targetId, setTargetId] = React.useState<TId>('');\r\n\r\n  return (\r\n    <Box\r\n      id={`tabsList-${id}`}\r\n      className=\"tabsList__wrapper\"\r\n      role=\"tablist\"\r\n      {...getVariant('layout.common.tabs.primary')}\r\n      ref={setRef}\r\n      onBlur={React.useCallback((ev: React.FocusEvent) => {\r\n        if (\r\n          !isChild(ev.relatedTarget as HTMLElement, (current) =>\r\n            current.classList.contains('tabsList__wrapper'),\r\n          )\r\n        ) {\r\n        }\r\n      }, [])}\r\n    >\r\n      <Box className=\"tabsList__fixedTabs\">\r\n        {fixedTabs.map((current) => (\r\n          <Item key={current.id} tabId={current.id} />\r\n        ))}\r\n      </Box>\r\n      <ContextMenu\r\n        anchorPoint={anchorPoint}\r\n        isOpen={isOpen}\r\n        onClose={React.useCallback(() => setIsOpen(false), [])}\r\n        targetId={targetId}\r\n      />\r\n      <Box\r\n        className={`noScrollbar tabs__list ${\r\n          orientation === 'vertical' ? 'vertical' : ''\r\n        }`}\r\n        onContextMenu={React.useCallback((e: React.MouseEvent) => {\r\n          const tabElement = getSpecificParent(\r\n            e.target as HTMLElement,\r\n            (current) => current.classList.contains('tabs__item__wrapper'),\r\n          );\r\n          if (tabElement) {\r\n            e.preventDefault();\r\n            e.stopPropagation();\r\n            setTargetId(tabElement.dataset.id as string);\r\n            setAnchorPoint({ x: e.clientX, y: e.clientY });\r\n            setIsOpen(true);\r\n          }\r\n        }, [])}\r\n      >\r\n        {nonFixedTabs.map((current) => (\r\n          <Item key={current.id} tabId={current.id} />\r\n        ))}\r\n      </Box>\r\n      {showScrollButtons && (\r\n        <>\r\n          <IconButton\r\n            aria-label={getLabel('lblTogglePrevTab').text}\r\n            className=\"tabs__switch__left\"\r\n            icon=\"ArrowLeft\"\r\n            iconSize=\"Xs\"\r\n            onClick={onClickPrev}\r\n            title={getLabel('lblTogglePrevTab').text}\r\n            {...getVariant('icon-primary')}\r\n          />\r\n          <IconButton\r\n            aria-label={getLabel('lblToggleNextTab').text}\r\n            className=\"tabs__switch__right\"\r\n            icon=\"ArrowRight\"\r\n            iconSize=\"Xs\"\r\n            onClick={onClickNext}\r\n            title={getLabel('lblToggleNextTab').text}\r\n            {...getVariant('icon-primary')}\r\n          />\r\n        </>\r\n      )}\r\n    </Box>\r\n  );\r\n};\r\n"],"names":["React"],"mappings":"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"}

package/dist/tabs/renderers/DefaultTabsLabelRenderer.d.ts

@@ -0,0 +1,6 @@
+import { TTabRenderer } from '../types.js';
+
+declare const DefaultTabsLabelRenderer: TTabRenderer;
+
+export { DefaultTabsLabelRenderer };
+//# sourceMappingURL=DefaultTabsLabelRenderer.d.ts.map

package/dist/tabs/renderers/DefaultTabsLabelRenderer.d.ts.map

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

package/dist/tabs/renderers/DefaultTabsLabelRenderer.js

@@ -0,0 +1,71 @@
+import { jsxs, Fragment, jsx } from '@apia/theme/jsx-runtime';
+import React__default from 'react';
+import { useTabsContext } from '../util.js';
+import { isIconName, Icon } from '@apia/icons';
+import { getLabel } from '@apia/util';
+import { IconButton } from '../../components/forms/buttons/IconButton.js';
+import { SimpleButton } from '../../components/forms/buttons/SimpleButton.js';
+
+function makeIcon(name) {
+  return function IconComponent() {
+    return /* @__PURE__ */ jsx(Icon, { title: "", name });
+  };
+}
+const DefaultTabsLabelRenderer = ({ tab }) => {
+  const { onCloseTab } = useTabsContext();
+  const ActualIcon = React__default.useMemo(() => {
+    if (tab.icon) {
+      if (isIconName(tab.icon)) {
+        return makeIcon(tab.icon);
+      }
+      return tab.icon;
+    }
+    return function C() {
+      return null;
+    };
+  }, [tab.icon]);
+  const handleClose = React__default.useCallback(
+    (ev) => {
+      ev.preventDefault();
+      ev.stopPropagation();
+      onCloseTab(tab);
+    },
+    [onCloseTab, tab]
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    tab.isIconTab ? /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        className: "tabs__item__button",
+        as: "div",
+        icon: tab.icon,
+        variant: "null",
+        iconSize: "Sm",
+        size: "Lg"
+      }
+    ) : /* @__PURE__ */ jsxs(SimpleButton, { className: "tabs__item__button", as: "div", variant: "null", children: [
+      /* @__PURE__ */ jsx(ActualIcon, {}),
+      tab.label
+    ] }),
+    tab.isClosable && /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        as: "div",
+        onMouseDown: (e) => {
+          e.stopPropagation();
+          e.preventDefault();
+        },
+        onClick: handleClose,
+        className: "tabs__item__close",
+        icon: "Close",
+        variant: "null",
+        title: getLabel("lblCloseSpecificTab", { text: { TOK1: tab.label } }).text,
+        size: "Lg",
+        iconSize: "Sm"
+      }
+    )
+  ] });
+};
+
+export { DefaultTabsLabelRenderer };
+//# sourceMappingURL=DefaultTabsLabelRenderer.js.map

package/dist/tabs/renderers/DefaultTabsLabelRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultTabsLabelRenderer.js","sources":["../../../src/tabs/renderers/DefaultTabsLabelRenderer.tsx"],"sourcesContent":["import React, { MouseEvent } from 'react';\r\nimport { TTabRenderer } from '../types';\r\nimport { useTabsContext } from '../util';\r\nimport { Icon, TIconName, isIconName } from '@apia/icons';\r\nimport { IconButton, SimpleButton } from '../../components';\r\nimport { getLabel } from '@apia/util';\r\n\r\nfunction makeIcon(name: TIconName) {\r\n  return function IconComponent() {\r\n    return <Icon title=\"\" name={name} />;\r\n  };\r\n}\r\n\r\nexport const DefaultTabsLabelRenderer: TTabRenderer = ({ tab }) => {\r\n  const { onCloseTab } = useTabsContext();\r\n  const ActualIcon = React.useMemo(() => {\r\n    if (tab.icon) {\r\n      if (isIconName(tab.icon)) {\r\n        return makeIcon(tab.icon);\r\n      }\r\n      return tab.icon;\r\n    }\r\n    return function C() {\r\n      return null;\r\n    };\r\n  }, [tab.icon]);\r\n\r\n  const handleClose = React.useCallback(\r\n    (ev: MouseEvent) => {\r\n      ev.preventDefault();\r\n      ev.stopPropagation();\r\n      onCloseTab(tab);\r\n    },\r\n    [onCloseTab, tab],\r\n  );\r\n\r\n  return (\r\n    <>\r\n      {tab.isIconTab ? (\r\n        <IconButton\r\n          className=\"tabs__item__button\"\r\n          as=\"div\"\r\n          icon={tab.icon as TIconName}\r\n          variant=\"null\"\r\n          iconSize=\"Sm\"\r\n          size=\"Lg\"\r\n        />\r\n      ) : (\r\n        <SimpleButton className=\"tabs__item__button\" as=\"div\" variant=\"null\">\r\n          <ActualIcon />\r\n          {tab.label}\r\n        </SimpleButton>\r\n      )}\r\n\r\n      {tab.isClosable && (\r\n        <IconButton\r\n          as=\"div\"\r\n          onMouseDown={(e) => {\r\n            e.stopPropagation();\r\n            e.preventDefault();\r\n          }}\r\n          onClick={handleClose}\r\n          className=\"tabs__item__close\"\r\n          icon=\"Close\"\r\n          variant=\"null\"\r\n          title={\r\n            getLabel('lblCloseSpecificTab', { text: { TOK1: tab.label } }).text\r\n          }\r\n          size=\"Lg\"\r\n          iconSize=\"Sm\"\r\n        />\r\n      )}\r\n    </>\r\n  );\r\n};\r\n"],"names":["React"],"mappings":";;;;;;;;AAOA,SAAS,SAAS,IAAiB,EAAA;AACjC,EAAA,OAAO,SAAS,aAAgB,GAAA;AAC9B,IAAA,uBAAQ,GAAA,CAAA,IAAA,EAAA,EAAK,KAAM,EAAA,EAAA,EAAG,IAAY,EAAA,CAAA,CAAA;AAAA,GACpC,CAAA;AACF,CAAA;AAEO,MAAM,wBAAyC,GAAA,CAAC,EAAE,GAAA,EAAU,KAAA;AACjE,EAAM,MAAA,EAAE,UAAW,EAAA,GAAI,cAAe,EAAA,CAAA;AACtC,EAAM,MAAA,UAAA,GAAaA,cAAM,CAAA,OAAA,CAAQ,MAAM;AACrC,IAAA,IAAI,IAAI,IAAM,EAAA;AACZ,MAAI,IAAA,UAAA,CAAW,GAAI,CAAA,IAAI,CAAG,EAAA;AACxB,QAAO,OAAA,QAAA,CAAS,IAAI,IAAI,CAAA,CAAA;AAAA,OAC1B;AACA,MAAA,OAAO,GAAI,CAAA,IAAA,CAAA;AAAA,KACb;AACA,IAAA,OAAO,SAAS,CAAI,GAAA;AAClB,MAAO,OAAA,IAAA,CAAA;AAAA,KACT,CAAA;AAAA,GACC,EAAA,CAAC,GAAI,CAAA,IAAI,CAAC,CAAA,CAAA;AAEb,EAAA,MAAM,cAAcA,cAAM,CAAA,WAAA;AAAA,IACxB,CAAC,EAAmB,KAAA;AAClB,MAAA,EAAA,CAAG,cAAe,EAAA,CAAA;AAClB,MAAA,EAAA,CAAG,eAAgB,EAAA,CAAA;AACnB,MAAA,UAAA,CAAW,GAAG,CAAA,CAAA;AAAA,KAChB;AAAA,IACA,CAAC,YAAY,GAAG,CAAA;AAAA,GAClB,CAAA;AAEA,EAAA,uBAEK,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,IAAA,GAAA,CAAI,SACH,mBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,SAAU,EAAA,oBAAA;AAAA,QACV,EAAG,EAAA,KAAA;AAAA,QACH,MAAM,GAAI,CAAA,IAAA;AAAA,QACV,OAAQ,EAAA,MAAA;AAAA,QACR,QAAS,EAAA,IAAA;AAAA,QACT,IAAK,EAAA,IAAA;AAAA,OAAA;AAAA,KACP,wBAEC,YAAa,EAAA,EAAA,SAAA,EAAU,sBAAqB,EAAG,EAAA,KAAA,EAAM,SAAQ,MAC5D,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,CAAA;AAAA,MACX,GAAI,CAAA,KAAA;AAAA,KACP,EAAA,CAAA;AAAA,IAGD,IAAI,UACH,oBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,EAAG,EAAA,KAAA;AAAA,QACH,WAAA,EAAa,CAAC,CAAM,KAAA;AAClB,UAAA,CAAA,CAAE,eAAgB,EAAA,CAAA;AAClB,UAAA,CAAA,CAAE,cAAe,EAAA,CAAA;AAAA,SACnB;AAAA,QACA,OAAS,EAAA,WAAA;AAAA,QACT,SAAU,EAAA,mBAAA;AAAA,QACV,IAAK,EAAA,OAAA;AAAA,QACL,OAAQ,EAAA,MAAA;AAAA,QACR,KAAA,EACE,QAAS,CAAA,qBAAA,EAAuB,EAAE,IAAA,EAAM,EAAE,IAAA,EAAM,GAAI,CAAA,KAAA,EAAQ,EAAC,CAAE,CAAA,IAAA;AAAA,QAEjE,IAAK,EAAA,IAAA;AAAA,QACL,QAAS,EAAA,IAAA;AAAA,OAAA;AAAA,KACX;AAAA,GAEJ,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/dist/tabs/tabsController.d.ts

@@ -0,0 +1,41 @@
+import React__default from 'react';
+import { TTab, TTabsListState, TTabs } from './types.js';
+import { PropsStore, TId } from '@apia/util';
+
+declare class TabsController<AdditionalPropsType extends Record<string, unknown> = Record<string, unknown>, TabType extends TTab<AdditionalPropsType> = TTab<AdditionalPropsType>> {
+    #private;
+    private props;
+    propsStore: PropsStore<TTab<AdditionalPropsType>>;
+    stateKey: string;
+    get stateStore(): PropsStore<TTabsListState>;
+    get activeTabs(): TId[];
+    get tabsList(): TId[];
+    constructor(name: string, props: TTabs<AdditionalPropsType>, initialTabs?: TabType[]);
+    /**
+     * Obviamente agrega un tab al listado de tabs
+     */
+    append(tab: Omit<TabType, 'tabAdditionalProps'> & Partial<Pick<TabType, 'tabAdditionalProps'>>): void;
+    closeAll(closeFixedTabsAsWell?: boolean, force?: boolean): Promise<void>;
+    closeToRight(targetId: TId): Promise<void>;
+    closeToLeft(targetId: TId): Promise<void>;
+    closeOthers(targetId: TId): Promise<void>;
+    closeTab(tabId: TId, force?: boolean): Promise<boolean>;
+    focusNextTab(): TId | null;
+    focusPreviousTab(): TId | null;
+    focusTab(tabId: TId): void;
+    getTabById(tabId: TId): TTab<AdditionalPropsType>;
+    getTabElement(tabId: TId): Element | null;
+    handleKeyDown(ev: React__default.KeyboardEvent): void;
+    openNextTab(): TId | null;
+    openPreviousTab(): TId | null;
+    get state(): TTabsListState;
+    /**
+     * Se utiliza para hacer que el tab aparezca visible en el listado
+     *
+     * @param justThis Normalmente las tabs se abren de a una, pero si este parámetro se pasa en false, es posible abrir más de una a la vez.
+     */
+    openTab(tabId: TId, justThis?: boolean): void;
+}
+
+export { TabsController as default };
+//# sourceMappingURL=tabsController.d.ts.map

package/dist/tabs/tabsController.d.ts.map

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