@apia/components 1.0.4 → 2.0.0

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';\nimport { TTabRenderer } from '../types';\nimport { useTabsContext } from '../util';\nimport { Icon, TIconName, isIconName } from '@apia/icons';\nimport { IconButton, SimpleButton } from '../../components';\nimport { getLabel } from '@apia/util';\n\nfunction makeIcon(name: TIconName) {\n  return function IconComponent() {\n    return <Icon title=\"\" name={name} />;\n  };\n}\n\nexport const DefaultTabsLabelRenderer: TTabRenderer = ({ tab }) => {\n  const { onCloseTab } = useTabsContext();\n  const ActualIcon = React.useMemo(() => {\n    if (tab.icon) {\n      if (isIconName(tab.icon)) {\n        return makeIcon(tab.icon);\n      }\n      return tab.icon;\n    }\n    return function C() {\n      return null;\n    };\n  }, [tab.icon]);\n\n  const handleClose = React.useCallback(\n    (ev: MouseEvent) => {\n      ev.preventDefault();\n      ev.stopPropagation();\n      onCloseTab(tab);\n    },\n    [onCloseTab, tab],\n  );\n\n  return (\n    <>\n      {tab.isIconTab ? (\n        <IconButton\n          className=\"tabs__item__button\"\n          as=\"div\"\n          icon={tab.icon as TIconName}\n          variant=\"null\"\n          iconSize=\"Sm\"\n          size=\"Lg\"\n        />\n      ) : (\n        <SimpleButton className=\"tabs__item__button\" as=\"div\" variant=\"null\">\n          <ActualIcon />\n          {tab.label}\n        </SimpleButton>\n      )}\n\n      {tab.isClosable && (\n        <IconButton\n          as=\"div\"\n          onMouseDown={(e) => {\n            e.stopPropagation();\n            e.preventDefault();\n          }}\n          onClick={handleClose}\n          className=\"tabs__item__close\"\n          icon=\"Close\"\n          variant=\"null\"\n          title={\n            getLabel('lblCloseSpecificTab', { text: { TOK1: tab.label } }).text\n          }\n          size=\"Lg\"\n          iconSize=\"Sm\"\n        />\n      )}\n    </>\n  );\n};\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":""}

package/dist/tabs/tabsController.js

@@ -0,0 +1,303 @@
+import clone from 'lodash-es/clone';
+import uniqueId from 'lodash-es/uniqueId';
+import { PropsStore, getLabel, isChild, getSpecificParent } from '@apia/util';
+import { ApiaUtil } from '../objects/ApiaUtil/index.js';
+
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+var __accessCheck = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateAdd = (obj, member, value) => {
+  if (member.has(obj))
+    throw TypeError("Cannot add the same private member more than once");
+  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+};
+var __privateMethod = (obj, member, method) => {
+  __accessCheck(obj, member, "access private method");
+  return method;
+};
+var _innerAppend, innerAppend_fn, _setState, setState_fn;
+class TabsController {
+  constructor(name, props, initialTabs) {
+    this.props = props;
+    __privateAdd(this, _innerAppend);
+    __privateAdd(this, _setState);
+    __publicField(this, "propsStore");
+    __publicField(this, "stateKey", "state");
+    this.propsStore = new PropsStore({
+      logCommands: { propsStore: `tabs_${name}` }
+    });
+    __privateMethod(this, _setState, setState_fn).call(this, {
+      focusedTab: null,
+      openTabs: [],
+      tabs: initialTabs?.map((current) => current.id) ?? []
+    });
+    if (initialTabs && initialTabs.length > 0)
+      this.focusTab(initialTabs[0].id);
+  }
+  get stateStore() {
+    return this.propsStore;
+  }
+  get activeTabs() {
+    return clone(this.state.openTabs);
+  }
+  get tabsList() {
+    return clone(this.state.tabs);
+  }
+  /**
+   * Obviamente agrega un tab al listado de tabs
+   */
+  append(tab) {
+    if (this.propsStore.getFieldProps(tab.id)) {
+      void ApiaUtil.instance.dialogs.confirm({
+        children: getLabel("msgTabIsOpen").text,
+        title: getLabel("titMsgWarning").text
+      }).then((hasConfirmed) => {
+        if (hasConfirmed)
+          __privateMethod(this, _innerAppend, innerAppend_fn).call(this, {
+            ...tab,
+            id: `${tab.id}_${uniqueId()}`,
+            tabAdditionalProps: tab.tabAdditionalProps ?? {}
+          });
+      });
+    } else
+      __privateMethod(this, _innerAppend, innerAppend_fn).call(this, {
+        ...tab,
+        tabAdditionalProps: tab.tabAdditionalProps ?? {}
+      });
+  }
+  async closeAll(closeFixedTabsAsWell = false, force = false) {
+    for (let i = this.tabsList.length - 1; i >= 0; i--) {
+      const current = this.tabsList[i];
+      if (!this.propsStore.getFieldProps(current).isFixed || closeFixedTabsAsWell)
+        await this.closeTab(current, force);
+    }
+  }
+  async closeToRight(targetId) {
+    const targetIndex = this.tabsList.indexOf(targetId);
+    for (let i = this.tabsList.length - 1; i > targetIndex; i--) {
+      const current = this.tabsList[i];
+      if (!this.propsStore.getFieldProps(current).isFixed && current !== targetId)
+        await this.closeTab(current);
+    }
+  }
+  async closeToLeft(targetId) {
+    const targetIndex = this.tabsList.indexOf(targetId);
+    if (targetIndex > -1) {
+      for (let i = targetIndex - 1; i >= 0; i--) {
+        const current = this.tabsList[i];
+        if (!this.propsStore.getFieldProps(current).isFixed) {
+          await this.closeTab(current);
+        }
+      }
+    }
+  }
+  async closeOthers(targetId) {
+    for (let i = this.tabsList.length - 1; i >= 0; i--) {
+      const current = this.tabsList[i];
+      if (!this.propsStore.getFieldProps(current).isFixed && current !== targetId)
+        await this.closeTab(current);
+    }
+  }
+  async closeTab(tabId, force = false) {
+    const tabProps = this.propsStore.getFieldProps(tabId);
+    if (!tabProps.isClosable || !force && this.props.onRequestClose && !await this.props.onRequestClose(tabProps))
+      return false;
+    const { onBeforeClose } = tabProps;
+    if (onBeforeClose) {
+      const canClose = await onBeforeClose();
+      const message = canClose === false ? getLabel("msgPerDatIng").text : canClose;
+      if (message !== true && !force) {
+        const hasConfirmed = await ApiaUtil.instance.dialogs.confirm({
+          children: message,
+          title: getLabel("lbl_atention").text
+        });
+        if (!hasConfirmed)
+          return false;
+      }
+    }
+    let newOpenTab = null;
+    if (this.state.openTabs.includes(tabId)) {
+      const tabIndex = this.tabsList.findIndex((current) => current === tabId);
+      newOpenTab = tabIndex > 0 ? this.tabsList[tabIndex - 1] : this.tabsList[1];
+    }
+    __privateMethod(this, _setState, setState_fn).call(this, {
+      tabs: this.state.tabs.filter((current) => current !== tabId)
+    });
+    this.props.onCloseTab?.(tabProps);
+    this.propsStore.removeField(tabId);
+    if (newOpenTab) {
+      this.openTab(newOpenTab);
+      this.focusTab(newOpenTab);
+    }
+    return true;
+  }
+  focusNextTab() {
+    const { tabs } = this.state;
+    const focusedIndex = tabs.findIndex(
+      (current) => current === this.state.focusedTab
+    );
+    if (focusedIndex === tabs.length - 1 || focusedIndex === -1)
+      return null;
+    const newFocusIndex = focusedIndex + 1;
+    this.focusTab(tabs[newFocusIndex]);
+    return tabs[newFocusIndex];
+  }
+  focusPreviousTab() {
+    const { tabs } = this.state;
+    const focusedIndex = tabs.findIndex(
+      (current) => current === this.state.focusedTab
+    );
+    if (focusedIndex <= 0)
+      return null;
+    const newFocusIndex = focusedIndex - 1;
+    this.focusTab(tabs[newFocusIndex]);
+    return tabs[newFocusIndex];
+  }
+  focusTab(tabId) {
+    if (this.state.focusedTab)
+      this.propsStore.updateField(this.state.focusedTab, { isFocused: false });
+    __privateMethod(this, _setState, setState_fn).call(this, { focusedTab: tabId });
+    this.propsStore.updateField(tabId, { isFocused: true });
+    const tabProps = this.propsStore.getFieldProps(tabId);
+    tabProps?.onFocus?.(tabProps);
+  }
+  getTabById(tabId) {
+    return this.propsStore.getFieldProps(tabId);
+  }
+  getTabElement(tabId) {
+    return document.querySelector(`#tabpanel-${this.props.id}-${tabId}`);
+  }
+  handleKeyDown(ev) {
+    if (!isChild(
+      ev.target,
+      (current) => current.id === `tabsList-${this.props.id}`
+    ))
+      return;
+    switch (ev.code) {
+      case "ArrowDown":
+      case "ArrowRight": {
+        if (this.props.orientation === "horizontal" && ev.code === "ArrowDown" || this.props.orientation === "vertical" && ev.code === "ArrowRight")
+          return;
+        this.focusNextTab();
+        break;
+      }
+      case "ArrowUp":
+      case "ArrowLeft": {
+        if (this.props.orientation === "horizontal" && ev.code === "ArrowUp" || this.props.orientation === "vertical" && ev.code === "ArrowLeft")
+          return;
+        this.focusPreviousTab();
+        break;
+      }
+      case "Delete": {
+        const tabId = getSpecificParent(
+          ev.target,
+          (current) => !!current.getAttribute("data-id")
+        )?.getAttribute("data-id");
+        if (tabId) {
+          if (!this.propsStore.getFieldProps(tabId).isClosable)
+            return;
+          void this.closeTab(tabId);
+        }
+        break;
+      }
+      case "Enter":
+      case "Space": {
+        const tabId = getSpecificParent(
+          ev.target,
+          (current) => !!current.getAttribute("data-id")
+        )?.getAttribute("data-id");
+        if (tabId) {
+          this.openTab(tabId);
+        }
+        break;
+      }
+      case "End": {
+        this.focusTab(this.state.tabs[this.state.tabs.length - 1]);
+        break;
+      }
+      case "Home": {
+        this.focusTab(this.state.tabs[0]);
+        break;
+      }
+    }
+  }
+  openNextTab() {
+    const { tabs } = this.state;
+    const openIndex = tabs.findIndex(
+      (current) => current === this.state.openTabs[0]
+    );
+    if (openIndex >= this.tabsList.length)
+      return null;
+    const newOpenIndex = openIndex + 1;
+    this.openTab(tabs[newOpenIndex]);
+    return tabs[newOpenIndex];
+  }
+  openPreviousTab() {
+    const { tabs } = this.state;
+    const openIndex = tabs.findIndex(
+      (current) => current === this.state.openTabs[0]
+    );
+    if (openIndex <= 0)
+      return null;
+    const newOpenIndex = openIndex - 1;
+    this.openTab(tabs[newOpenIndex]);
+    return tabs[newOpenIndex];
+  }
+  get state() {
+    return this.propsStore.getFieldProps(this.stateKey);
+  }
+  /**
+   * 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, justThis = true) {
+    const tabProps = this.propsStore.getFieldProps(tabId);
+    if (!tabProps) {
+      console.warn(`There is no tab with such id: ${tabId}`);
+    } else {
+      window.dispatchEvent(
+        new CustomEvent("tabOpen", {
+          detail: { tabId, justThis }
+        })
+      );
+      if (justThis) {
+        window.requestAnimationFrame(() => {
+          window.scrollTo(0, 0);
+        });
+        this.state.openTabs.forEach(
+          (current) => this.propsStore.updateField(current, { isOpen: false })
+        );
+      }
+      this.propsStore.updateField(tabId, { isOpen: true });
+      __privateMethod(this, _setState, setState_fn).call(this, {
+        openTabs: justThis ? [tabId] : [...this.state.openTabs, tabId]
+      });
+      this.focusTab(tabId);
+      this.props.onOpenTab?.(tabProps);
+    }
+  }
+}
+_innerAppend = new WeakSet();
+innerAppend_fn = function(tab) {
+  __privateMethod(this, _setState, setState_fn).call(this, { tabs: [...this.state.tabs, tab.id] });
+  this.propsStore.updateField(tab.id, tab);
+  if (tab.isOpen) {
+    this.openTab(tab.id);
+    this.focusTab(tab.id);
+  }
+};
+_setState = new WeakSet();
+setState_fn = function(state) {
+  this.propsStore.updateField(this.stateKey, state);
+};
+
+export { TabsController as default };
+//# sourceMappingURL=tabsController.js.map

package/dist/tabs/tabsController.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabsController.js","sources":["../../src/tabs/tabsController.ts"],"sourcesContent":["import clone from 'lodash-es/clone';\nimport uniqueId from 'lodash-es/uniqueId';\nimport React from 'react';\nimport { TTab, TTabs, TTabsListState } from './types';\nimport {\n  PropsStore,\n  TId,\n  getLabel,\n  getSpecificParent,\n  isChild,\n} from '@apia/util';\nimport { ApiaUtil } from '../objects/ApiaUtil';\n\nexport default class TabsController<\n  AdditionalPropsType extends Record<string, unknown> = Record<string, unknown>,\n  TabType extends TTab<AdditionalPropsType> = TTab<AdditionalPropsType>,\n> {\n  propsStore: PropsStore<TTab<AdditionalPropsType>>;\n\n  stateKey = 'state';\n\n  get stateStore() {\n    return this.propsStore as unknown as PropsStore<TTabsListState>;\n  }\n\n  get activeTabs() {\n    return clone(this.state.openTabs);\n  }\n\n  get tabsList() {\n    return clone(this.state.tabs);\n  }\n\n  constructor(\n    name: string,\n    private props: TTabs<AdditionalPropsType>,\n    initialTabs?: TabType[],\n  ) {\n    this.propsStore = new PropsStore<TTab<AdditionalPropsType>>({\n      logCommands: { propsStore: `tabs_${name}` },\n    });\n    this.#setState({\n      focusedTab: null,\n      openTabs: [],\n      tabs: initialTabs?.map((current) => current.id) ?? [],\n    });\n    if (initialTabs && initialTabs.length > 0) this.focusTab(initialTabs[0].id);\n  }\n\n  #innerAppend(tab: TabType) {\n    this.#setState({ tabs: [...this.state.tabs, tab.id] });\n    this.propsStore.updateField(tab.id, tab);\n    if (tab.isOpen) {\n      this.openTab(tab.id);\n      this.focusTab(tab.id);\n    }\n  }\n\n  /**\n   * Obviamente agrega un tab al listado de tabs\n   */\n  append(\n    tab: Omit<TabType, 'tabAdditionalProps'> &\n      Partial<Pick<TabType, 'tabAdditionalProps'>>,\n  ) {\n    if (this.propsStore.getFieldProps(tab.id)) {\n      void ApiaUtil.instance.dialogs\n        .confirm({\n          children: getLabel('msgTabIsOpen').text,\n          title: getLabel('titMsgWarning').text,\n        })\n        .then((hasConfirmed) => {\n          if (hasConfirmed)\n            this.#innerAppend({\n              ...tab,\n              id: `${tab.id}_${uniqueId()}`,\n              tabAdditionalProps: tab.tabAdditionalProps ?? {},\n            } as TabType);\n        });\n    } else\n      this.#innerAppend({\n        ...tab,\n        tabAdditionalProps: tab.tabAdditionalProps ?? {},\n      } as TabType);\n  }\n\n  async closeAll(closeFixedTabsAsWell = false, force = false) {\n    for (let i = this.tabsList.length - 1; i >= 0; i--) {\n      const current = this.tabsList[i];\n      if (\n        !this.propsStore.getFieldProps(current).isFixed ||\n        closeFixedTabsAsWell\n      )\n        await this.closeTab(current, force);\n    }\n  }\n\n  async closeToRight(targetId: TId) {\n    const targetIndex = this.tabsList.indexOf(targetId);\n    for (let i = this.tabsList.length - 1; i > targetIndex; i--) {\n      const current = this.tabsList[i];\n      if (\n        !this.propsStore.getFieldProps(current).isFixed &&\n        current !== targetId\n      )\n        await this.closeTab(current);\n    }\n  }\n\n  async closeToLeft(targetId: TId) {\n    const targetIndex = this.tabsList.indexOf(targetId);\n    if (targetIndex > -1) {\n      for (let i = targetIndex - 1; i >= 0; i--) {\n        const current = this.tabsList[i];\n        if (!this.propsStore.getFieldProps(current).isFixed) {\n          await this.closeTab(current);\n        }\n      }\n    }\n  }\n\n  async closeOthers(targetId: TId) {\n    for (let i = this.tabsList.length - 1; i >= 0; i--) {\n      const current = this.tabsList[i];\n      if (\n        !this.propsStore.getFieldProps(current).isFixed &&\n        current !== targetId\n      )\n        await this.closeTab(current);\n    }\n  }\n\n  async closeTab(tabId: TId, force = false) {\n    const tabProps = this.propsStore.getFieldProps(tabId);\n    if (\n      !tabProps.isClosable ||\n      (!force &&\n        this.props.onRequestClose &&\n        !(await this.props.onRequestClose(tabProps)))\n    )\n      return false;\n\n    const { onBeforeClose } = tabProps;\n    if (onBeforeClose) {\n      const canClose = await onBeforeClose();\n      const message =\n        canClose === false ? getLabel('msgPerDatIng').text : canClose;\n      if (message !== true && !force) {\n        const hasConfirmed = await ApiaUtil.instance.dialogs.confirm({\n          children: message,\n          title: getLabel('lbl_atention').text,\n        });\n        if (!hasConfirmed) return false;\n      }\n    }\n\n    let newOpenTab: null | TId = null;\n    if (this.state.openTabs.includes(tabId)) {\n      const tabIndex = this.tabsList.findIndex((current) => current === tabId);\n      newOpenTab =\n        tabIndex > 0 ? this.tabsList[tabIndex - 1] : this.tabsList[1];\n    }\n\n    this.#setState({\n      tabs: this.state.tabs.filter((current) => current !== tabId),\n    });\n    this.props.onCloseTab?.(tabProps);\n    this.propsStore.removeField(tabId);\n\n    if (newOpenTab) {\n      this.openTab(newOpenTab);\n      this.focusTab(newOpenTab);\n    }\n\n    return true;\n  }\n\n  focusNextTab() {\n    const { tabs } = this.state;\n    const focusedIndex = tabs.findIndex(\n      (current) => current === this.state.focusedTab,\n    );\n\n    if (focusedIndex === tabs.length - 1 || focusedIndex === -1) return null;\n\n    const newFocusIndex: number = focusedIndex + 1;\n    this.focusTab(tabs[newFocusIndex]);\n\n    return tabs[newFocusIndex];\n  }\n\n  focusPreviousTab() {\n    const { tabs } = this.state;\n    const focusedIndex = tabs.findIndex(\n      (current) => current === this.state.focusedTab,\n    );\n\n    if (focusedIndex <= 0) return null;\n\n    const newFocusIndex: number = focusedIndex - 1;\n    this.focusTab(tabs[newFocusIndex]);\n\n    return tabs[newFocusIndex];\n  }\n\n  focusTab(tabId: TId) {\n    if (this.state.focusedTab)\n      this.propsStore.updateField(this.state.focusedTab, { isFocused: false });\n    this.#setState({ focusedTab: tabId });\n    this.propsStore.updateField(tabId, { isFocused: true });\n    const tabProps = this.propsStore.getFieldProps(tabId);\n    tabProps?.onFocus?.(tabProps);\n  }\n\n  getTabById(tabId: TId) {\n    return this.propsStore.getFieldProps(tabId);\n  }\n\n  getTabElement(tabId: TId) {\n    return document.querySelector(`#tabpanel-${this.props.id}-${tabId}`);\n  }\n\n  handleKeyDown(ev: React.KeyboardEvent) {\n    if (\n      !isChild(\n        ev.target as HTMLElement,\n        (current) => current.id === `tabsList-${this.props.id}`,\n      )\n    )\n      return;\n\n    switch (ev.code) {\n      case 'ArrowDown':\n      case 'ArrowRight': {\n        if (\n          (this.props.orientation === 'horizontal' &&\n            ev.code === 'ArrowDown') ||\n          (this.props.orientation === 'vertical' && ev.code === 'ArrowRight')\n        )\n          return;\n\n        this.focusNextTab();\n\n        break;\n      }\n      case 'ArrowUp':\n      case 'ArrowLeft': {\n        if (\n          (this.props.orientation === 'horizontal' && ev.code === 'ArrowUp') ||\n          (this.props.orientation === 'vertical' && ev.code === 'ArrowLeft')\n        )\n          return;\n\n        this.focusPreviousTab();\n\n        break;\n      }\n      case 'Delete': {\n        const tabId = getSpecificParent(\n          ev.target as HTMLElement,\n          (current) => !!current.getAttribute('data-id'),\n        )?.getAttribute('data-id');\n\n        if (tabId) {\n          if (!this.propsStore.getFieldProps(tabId).isClosable) return;\n\n          void this.closeTab(tabId);\n        }\n        break;\n      }\n      case 'Enter':\n      case 'Space': {\n        const tabId = getSpecificParent(\n          ev.target as HTMLElement,\n          (current) => !!current.getAttribute('data-id'),\n        )?.getAttribute('data-id');\n\n        if (tabId) {\n          this.openTab(tabId);\n        }\n\n        break;\n      }\n      case 'End': {\n        this.focusTab(this.state.tabs[this.state.tabs.length - 1]);\n        break;\n      }\n      case 'Home': {\n        this.focusTab(this.state.tabs[0]);\n        break;\n      }\n      default: {\n        break;\n      }\n    }\n  }\n\n  openNextTab() {\n    const { tabs } = this.state;\n    const openIndex = tabs.findIndex(\n      (current) => current === this.state.openTabs[0],\n    );\n\n    if (openIndex >= this.tabsList.length) return null;\n\n    const newOpenIndex: number = openIndex + 1;\n    this.openTab(tabs[newOpenIndex]);\n\n    return tabs[newOpenIndex];\n  }\n\n  openPreviousTab() {\n    const { tabs } = this.state;\n    const openIndex = tabs.findIndex(\n      (current) => current === this.state.openTabs[0],\n    );\n\n    if (openIndex <= 0) return null;\n\n    const newOpenIndex: number = openIndex - 1;\n    this.openTab(tabs[newOpenIndex]);\n\n    return tabs[newOpenIndex];\n  }\n\n  get state() {\n    return this.propsStore.getFieldProps<TTabsListState>(this.stateKey);\n  }\n\n  #setState(state: Partial<TTabsListState>) {\n    this.propsStore.updateField<TTabsListState>(this.stateKey, state);\n  }\n\n  /**\n   * Se utiliza para hacer que el tab aparezca visible en el listado\n   *\n   * @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.\n   */\n  openTab(tabId: TId, justThis = true) {\n    const tabProps = this.propsStore.getFieldProps(tabId);\n    if (!tabProps) {\n      console.warn(`There is no tab with such id: ${tabId}`);\n    } else {\n      window.dispatchEvent(\n        new CustomEvent('tabOpen', {\n          detail: { tabId, justThis },\n        }),\n      );\n\n      if (justThis) {\n        window.requestAnimationFrame(() => {\n          window.scrollTo(0, 0);\n        });\n        this.state.openTabs.forEach((current) =>\n          this.propsStore.updateField(current, { isOpen: false }),\n        );\n      }\n      this.propsStore.updateField(tabId, { isOpen: true });\n      this.#setState({\n        openTabs: justThis ? [tabId] : [...this.state.openTabs, tabId],\n      });\n      this.focusTab(tabId);\n      this.props.onOpenTab?.(tabProps);\n    }\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/tabs/types.d.ts

@@ -0,0 +1,115 @@
+import React__default from 'react';
+import TabsController from './tabsController.js';
+import { TIconName, TIconType } from '@apia/icons';
+import { TId } from '@apia/util';
+
+type TTab<AdditionalPropsType extends Record<string, unknown> = Record<string, unknown>> = {
+    addEvent?: (ev: 'onFocusTab', cb: (ev: {
+        stop: () => void;
+    }) => unknown) => unknown;
+    content: React__default.FunctionComponent<{
+        tab: TTab<AdditionalPropsType>;
+    }>;
+    icon?: TIconName | TIconType;
+    /**
+     * El id es importante ya que se utiliza por temas de accesibilidad. Es
+     * importante asegurarse de que sea único.
+     */
+    id: TId;
+    isClosable?: boolean;
+    isDisabled?: boolean;
+    /**
+     * Los tabs que estén marcados como fixed aparecerán al inicio del listado.
+     */
+    isFixed?: boolean;
+    isFocused?: boolean;
+    /**
+     * Si se marca como iconTab, se oculta el label y solamente se muestra el
+     * ícono.
+     */
+    isIconTab?: boolean;
+    isLoading?: boolean;
+    isOpen?: boolean;
+    /**
+     * Si un tab se marca como lazy, el iframe no se inicializará hasta que no
+     * sea abierta por primera vez.
+     */
+    lazy?: boolean;
+    /**
+     * Cuando se cierra un tab que tiene un método onBeforeClose, el mismo será
+     * llamado y deberá devolver un boolean o un string. Si devuelve true, se
+     * cierra. Si devuelve false, se muestra un cartel de confirmación genérico y
+     * si se devuelve un string, se muestra un cartel de confirmación con el
+     * string devuelto. En caso de que el usuario confirme el cuadro de diálogo,
+     * el tab será cerrado de todas formas. Es decir, no hay forma de evitar que
+     * el tab sea cerrado si el usuario decide continuar con la acción. Para
+     * evitar que un tab sea cerrado, debe pasarse isClosable=false
+     */
+    onBeforeClose?: () => boolean | string | Promise<boolean | string>;
+    /**
+     * Este callback será llamado cada vez que el tab sea abierto
+     */
+    onFocus?: (ev: TTab<AdditionalPropsType>) => unknown;
+    /**
+     * Es el texto que se va a mostrar en el tab
+     */
+    label: string;
+    labelRenderer?: TTabRenderer;
+    /**
+     * Se pueden pasar propiedades adicionales que serán recibidas en cada
+     * evento, de forma de poder compartir piezas de información útiles en las
+     * distintas partes de la aplicación.
+     */
+    tabAdditionalProps: AdditionalPropsType;
+    tabId: TId;
+    title?: string;
+};
+type TTabs<AdditionalPropsType extends Record<string, unknown> = Record<string, unknown>> = {
+    getHandler?: (handler: TabsController<AdditionalPropsType>) => unknown;
+    /**
+     * Este id se utiliza para asignar un prefijo a los ids de los distintos
+     * grupos de tabs, de forma que aún habiendo dos tabs con mismo id en
+     * distintos grupos, el id generado sea distinto.
+     */
+    id: TId;
+    /**
+     * Permite abrir varias tabs al mismo tiempo
+     */
+    isMultiple?: boolean;
+    /**
+     * Este evento es llamado cada vez que un tab fue cerrado. En caso de que el
+     * callback onRequestClose haya sido provisto, el orden de llamado es:
+     * onRequestClose === true ? onCloseTab : doNothing
+     */
+    onCloseTab?: (tab: TTab<AdditionalPropsType>) => unknown;
+    /**
+     * Este evento es llamado cada vez que un tab es abierto por acción del
+     * usuario, es decir, cuando se hace click en su label y éste es mostrado.
+     */
+    onOpenTab?: (tab: TTab<AdditionalPropsType>) => unknown;
+    /**
+     * Este callback es llamado cada vez que se hace click en el botón cerrar. Se
+     * utiliza para permitir o denegar el cierre del tab, por lo que debe
+     * retornar un boolean o una promesa de booleano. Es útil por ejemplo para
+     * abrir un cuadro de diálogo de confirmación antes de continuar.
+     */
+    onRequestClose?: (tab: TTab<AdditionalPropsType>) => boolean | Promise<boolean>;
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Esta prop solo será tomada en cuenta al montar. Para agregar tabs luego,
+     * es necesario hacer uso de getHandler.
+     */
+    initialTabs?: TTab<AdditionalPropsType>[];
+};
+type TTabRenderer<AdditionalPropsType extends Record<string, unknown> = Record<string, unknown>> = (props: {
+    tab: TTab<AdditionalPropsType>;
+}) => React__default.ReactElement;
+type TTabsListState = {
+    focusedTab: TId | null;
+    openTabs: TId[];
+    tabs: TId[];
+    timestamp: number;
+};
+
+export type { TTab, TTabRenderer, TTabs, TTabsListState };
+//# sourceMappingURL=types.d.ts.map

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

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

package/dist/tabs/useTabsList.js

@@ -0,0 +1,20 @@
+import React__default from 'react';
+import { shallowEqual } from 'react-redux';
+import { useTabsContext } from './util.js';
+import { usePropsSelector } from '@apia/util';
+
+function useTabsList() {
+  const { handler } = useTabsContext();
+  const tabsIds = usePropsSelector("state", {
+    propsStore: handler.stateStore,
+    selector: (props) => props.tabs,
+    comparator: shallowEqual
+  });
+  const tabs = React__default.useMemo(() => {
+    return handler.getTabById !== void 0 && tabsIds ? tabsIds.map((current) => handler.getTabById(current)) : [];
+  }, [handler, tabsIds]);
+  return tabs;
+}
+
+export { useTabsList as default };
+//# sourceMappingURL=useTabsList.js.map

package/dist/tabs/useTabsList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTabsList.js","sources":["../../src/tabs/useTabsList.ts"],"sourcesContent":["import React from 'react';\nimport { shallowEqual } from 'react-redux';\nimport { TTabsListState } from './types';\nimport { useTabsContext } from './util';\nimport { TId, usePropsSelector } from '@apia/util';\n\nexport default function useTabsList() {\n  const { handler } = useTabsContext();\n\n  const tabsIds = usePropsSelector<TId[], TTabsListState>('state', {\n    propsStore: handler.stateStore,\n    selector: (props) => props.tabs,\n    comparator: shallowEqual,\n  });\n\n  const tabs = React.useMemo(() => {\n    return handler.getTabById !== undefined && tabsIds\n      ? tabsIds.map((current) => handler.getTabById(current))\n      : [];\n  }, [handler, tabsIds]);\n\n  return tabs;\n}\n"],"names":["React"],"mappings":";;;;;AAMA,SAAwB,WAAc,GAAA;AACpC,EAAM,MAAA,EAAE,OAAQ,EAAA,GAAI,cAAe,EAAA,CAAA;AAEnC,EAAM,MAAA,OAAA,GAAU,iBAAwC,OAAS,EAAA;AAAA,IAC/D,YAAY,OAAQ,CAAA,UAAA;AAAA,IACpB,QAAA,EAAU,CAAC,KAAA,KAAU,KAAM,CAAA,IAAA;AAAA,IAC3B,UAAY,EAAA,YAAA;AAAA,GACb,CAAA,CAAA;AAED,EAAM,MAAA,IAAA,GAAOA,cAAM,CAAA,OAAA,CAAQ,MAAM;AAC/B,IAAA,OAAO,OAAQ,CAAA,UAAA,KAAe,KAAa,CAAA,IAAA,OAAA,GACvC,OAAQ,CAAA,GAAA,CAAI,CAAC,OAAA,KAAY,OAAQ,CAAA,UAAA,CAAW,OAAO,CAAC,IACpD,EAAC,CAAA;AAAA,GACJ,EAAA,CAAC,OAAS,EAAA,OAAO,CAAC,CAAA,CAAA;AAErB,EAAO,OAAA,IAAA,CAAA;AACT;;;;"}

package/dist/tabs/util.js

@@ -0,0 +1,11 @@
+import React__default from 'react';
+
+const TabsContext = React__default.createContext(
+  {}
+);
+function useTabsContext() {
+  return React__default.useContext(TabsContext);
+}
+
+export { TabsContext, useTabsContext };
+//# sourceMappingURL=util.js.map

package/dist/tabs/util.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.js","sources":["../../src/tabs/util.ts"],"sourcesContent":["import React from 'react';\nimport { TTabsContext } from './types';\n\nexport const TabsContext = React.createContext<TTabsContext>(\n  {} as TTabsContext,\n);\n\nexport function makeTabsContext<\n  AdditionalPropsType extends Record<string, unknown> = Record<string, unknown>,\n>() {\n  return React.createContext<TTabsContext<AdditionalPropsType>>(\n    {} as TTabsContext<AdditionalPropsType>,\n  );\n}\n\nexport function defaultOnRequestClose() {\n  return new Promise((resolve) => {\n    resolve(true);\n  });\n}\n\nexport function useTabsContext() {\n  return React.useContext(TabsContext);\n}\n"],"names":["React"],"mappings":";;AAGO,MAAM,cAAcA,cAAM,CAAA,aAAA;AAAA,EAC/B,EAAC;AACH,EAAA;AAgBO,SAAS,cAAiB,GAAA;AAC/B,EAAO,OAAAA,cAAA,CAAM,WAAW,WAAW,CAAA,CAAA;AACrC;;;;"}