@vibe/core 3.50.1-alpha-b401f.0 → 3.50.1-alpha-1be71.0

package/dist/components/DropdownNew/Dropdown.types.d.ts

@@ -1,9 +1,42 @@
 import React from "react";
 import { ListGroup } from "../BaseList";
 import { VibeComponentProps } from "../../types";
-import { BaseListItemData } from "../BaseListItem/BaseListItem.types";
+import { BaseListItemData } from "../BaseListItem";
 export type DropdownGroupOption<Item = Record<string, unknown>> = ListGroup<Item>[] | BaseListItemData<Item>[];
-export interface BaseDropdownProps<Item extends BaseListItemData<Record<string, unknown>>> extends VibeComponentProps {
+interface MultiSelectSpecifics<Item extends BaseListItemData<Record<string, unknown>>> {
+    /**
+     * If true, the dropdown allows multiple selections.
+     */
+    multi: true;
+    multiline?: boolean;
+    /**
+     * Callback fired when an option is removed in multi-select mode. Only available when multi is true.
+     */
+    onOptionRemove?: (option: BaseListItemData<Item>) => void;
+    /**
+     * The function to call to render the selected value on single select mode.
+     */
+    valueRenderer?: never;
+}
+interface SingleSelectSpecifics<Item extends BaseListItemData<Record<string, unknown>>> {
+    /**
+     * If true, the dropdown allows multiple selections. Defaults to false.
+     */
+    multi?: false;
+    /**
+     * If true, the dropdown allows multiple lines of selected items. (Not available for single select)
+     */
+    multiline?: never;
+    /**
+     * Callback fired when an option is removed in multi-select mode. (Not available for single select)
+     */
+    onOptionRemove?: never;
+    /**
+     * The function to call to render the selected value on single select mode.
+     */
+    valueRenderer?: (option: BaseListItemData<Item>) => React.ReactNode;
+}
+export type BaseDropdownProps<Item extends BaseListItemData<Record<string, unknown>>> = VibeComponentProps & {
     /**
      * The list of options available in the list.
      */
@@ -32,10 +65,6 @@ export interface BaseDropdownProps<Item extends BaseListItemData<Record<string,
      * The function to call to render an option.
      */
     optionRenderer?: (option: BaseListItemData<Item>) => React.ReactNode;
-    /**
-     * The function to call to render the selected value
-     */
-    valueRenderer?: (option: BaseListItemData<Item>) => React.ReactNode;
     /**
      * The message to display when there are no options.
      */
@@ -88,11 +117,6 @@ export interface BaseDropdownProps<Item extends BaseListItemData<Record<string,
      * If true, the dropdown will have a clear button.
      */
     clearable?: boolean;
-    /**
-     * If true, the dropdown allows multiple selections.
-     */
-    multi?: boolean;
-    multiline?: boolean;
     /**
      * Callback fired when the dropdown loses focus.
      */
@@ -129,14 +153,16 @@ export interface BaseDropdownProps<Item extends BaseListItemData<Record<string,
      * Callback fired when an option is selected.
      */
     onOptionSelect?: (option: BaseListItemData<Item>) => void;
-    /**
-     * Callback fired when an option is removed in multi-select mode.
-     */
-    onOptionRemove?: (option: BaseListItemData<Item>) => void;
     /**
      * Callback fired when scrolling inside the dropdown.
      */
     onScroll?: (event: React.UIEvent<HTMLUListElement>) => void;
-}
+    /**
+     * A function to customize the filtering of options.
+     * It receives an option and the current input value, and should return true if the option should be included, false otherwise.
+     */
+    filterOption?: (option: Item, inputValue: string) => boolean;
+} & (MultiSelectSpecifics<Item> | SingleSelectSpecifics<Item>);
 export type DropdownSizes = "small" | "medium" | "large";
 export type DropdownDirection = "ltr" | "rtl" | "auto";
+export {};

package/dist/components/DropdownNew/hooks/useDropdownCombobox.d.ts

@@ -1,6 +1,6 @@
 import { BaseListItemData } from "../../BaseListItem";
 import { DropdownGroupOption } from "../Dropdown.types";
-declare function useDropdownCombobox<T extends BaseListItemData<Record<string, unknown>>>(options: DropdownGroupOption<T>, autoFocus?: boolean, isMenuOpen?: boolean, closeMenuOnSelect?: boolean, onChange?: (option: T | T[]) => void, onInputChange?: (value: string) => void, onMenuOpen?: () => void, onMenuClose?: () => void, onOptionSelect?: (option: T) => void): {
+declare function useDropdownCombobox<T extends BaseListItemData<Record<string, unknown>>>(options: DropdownGroupOption<T>, autoFocus?: boolean, isMenuOpen?: boolean, closeMenuOnSelect?: boolean, onChange?: (option: T | T[]) => void, onInputChange?: (value: string) => void, onMenuOpen?: () => void, onMenuClose?: () => void, onOptionSelect?: (option: T) => void, filterOption?: (option: T, inputValue: string) => boolean): {
     isOpen: boolean;
     inputValue: string;
     highlightedIndex: number;

package/dist/components/DropdownNew/hooks/useDropdownFiltering.d.ts

@@ -1,7 +1,7 @@
 import { BaseListItemData } from "../../BaseListItem";
 import { ListGroup } from "../../BaseList";
 import { DropdownGroupOption } from "../Dropdown.types";
-declare function useDropdownFiltering<Item extends BaseListItemData>(options: DropdownGroupOption<Item>): {
+declare function useDropdownFiltering<Item extends BaseListItemData>(options: DropdownGroupOption<Item>, filterOption?: (option: Item, inputValue: string) => boolean): {
     filteredOptions: ListGroup<Item>[];
     filterOptions: (inputValue: string) => void;
     setFilteredOptions: import("react").Dispatch<import("react").SetStateAction<ListGroup<Item>[]>>;

package/dist/components/DropdownNew/hooks/useDropdownMultiCombobox.d.ts

@@ -1,6 +1,6 @@
 import { DropdownGroupOption } from "../Dropdown.types";
 import { BaseListItemData } from "../../BaseListItem";
-declare function useDropdownMultiCombobox<T extends BaseListItemData<Record<string, unknown>>>(options: DropdownGroupOption<T>, selectedItems: T[], setSelectedItems: (items: T[]) => void, autoFocus?: boolean, onChange?: (options: T[]) => void, onInputChange?: (value: string) => void, onMenuOpen?: () => void, onMenuClose?: () => void, onOptionSelect?: (option: T) => void): {
+declare function useDropdownMultiCombobox<T extends BaseListItemData<Record<string, unknown>>>(options: DropdownGroupOption<T>, selectedItems: T[], setSelectedItems: (items: T[]) => void, autoFocus?: boolean, onChange?: (options: T[]) => void, onInputChange?: (value: string) => void, onMenuOpen?: () => void, onMenuClose?: () => void, onOptionSelect?: (option: T) => void, filterOption?: (option: T, inputValue: string) => boolean): {
     isOpen: boolean;
     inputValue: string;
     highlightedIndex: number;

package/dist/components/DropdownNew/utils/dropdownUtils.d.ts

@@ -1,3 +1,3 @@
 import { BaseListItemData } from "../../BaseListItem";
 import { ListGroup } from "../../BaseList";
-export declare function normalizeOptions<Item extends BaseListItemData>(options: ListGroup<Item>[] | BaseListItemData<Item>[], filter?: string): ListGroup<Item>[];
+export declare function normalizeOptions<Item extends BaseListItemData>(options: ListGroup<Item>[] | BaseListItemData<Item>[], filter?: string, filterOption?: (option: Item, inputValue: string) => boolean): ListGroup<Item>[];

package/dist/hooks/useGridKeyboardNavigation/gridKeyboardNavigationHelper.d.ts

@@ -4,13 +4,12 @@ export declare function getActiveIndexFromInboundNavigation({ direction, numberO
     numberOfItemsInLine: number;
     itemsCount: number;
 }): number;
-export declare function calcActiveIndexAfterArrowNavigation({ activeIndex, itemsCount, numberOfItemsInLine, direction, disabledIndexes, circularNavigation }: {
+export declare function calcActiveIndexAfterArrowNavigation({ activeIndex, itemsCount, numberOfItemsInLine, direction, disabledIndexes }: {
     activeIndex: number;
     itemsCount: number;
     numberOfItemsInLine: number;
     direction: NavDirections;
     disabledIndexes?: number[];
-    circularNavigation?: boolean;
 }): {
     isOutbound: boolean;
     nextIndex?: undefined;

package/dist/hooks/useGridKeyboardNavigation/useGridKeyboardNavigation.d.ts

@@ -13,7 +13,6 @@ import { MutableRefObject, ReactElement } from "react";
  * @param {boolean=} options.focusOnMount - if true, the referenced element will be focused when mounted
  * @param {number=} options.focusItemIndexOnMount - optional item index to focus when mounted. Only works with "options.focusOnMount".
  * @param {number[]=} options.disabledIndexes - optional array of disabled indices, which will be skipped while navigating.
- * @param {boolean=} options.circularNavigation - if true, the navigation will wrap around the grid
  * @returns {useGridKeyboardNavigationResult}
  *
  * @typedef useGridKeyboardNavigationResult
@@ -24,7 +23,7 @@ import { MutableRefObject, ReactElement } from "react";
  * The "isKeyboardAction" can be used to indicate a keyboard selection, which will affect the currently active index.
  */
 export default function useGridKeyboardNavigation({ ref, itemsCount, numberOfItemsInLine, onItemClicked, // the callback to call when an item is selected
-entryFocusStrategy, getItemByIndex, focusOnMount, focusItemIndexOnMount, disabledIndexes, circularNavigation }: {
+entryFocusStrategy, getItemByIndex, focusOnMount, focusItemIndexOnMount, disabledIndexes }: {
     ref: MutableRefObject<HTMLElement>;
     itemsCount: number;
     numberOfItemsInLine: number;
@@ -34,7 +33,6 @@ entryFocusStrategy, getItemByIndex, focusOnMount, focusItemIndexOnMount, disable
     focusOnMount?: boolean;
     focusItemIndexOnMount?: number;
     disabledIndexes?: number[];
-    circularNavigation?: boolean;
 }): {
     activeIndex: number;
     onSelectionAction: (index: number, isKeyboardAction?: boolean) => void;

package/dist/mocked_classnames/components/DropdownNew/Dropdown.types.d.ts

@@ -1,9 +1,42 @@
 import React from "react";
 import { ListGroup } from "../BaseList";
 import { VibeComponentProps } from "../../types";
-import { BaseListItemData } from "../BaseListItem/BaseListItem.types";
+import { BaseListItemData } from "../BaseListItem";
 export type DropdownGroupOption<Item = Record<string, unknown>> = ListGroup<Item>[] | BaseListItemData<Item>[];
-export interface BaseDropdownProps<Item extends BaseListItemData<Record<string, unknown>>> extends VibeComponentProps {
+interface MultiSelectSpecifics<Item extends BaseListItemData<Record<string, unknown>>> {
+    /**
+     * If true, the dropdown allows multiple selections.
+     */
+    multi: true;
+    multiline?: boolean;
+    /**
+     * Callback fired when an option is removed in multi-select mode. Only available when multi is true.
+     */
+    onOptionRemove?: (option: BaseListItemData<Item>) => void;
+    /**
+     * The function to call to render the selected value on single select mode.
+     */
+    valueRenderer?: never;
+}
+interface SingleSelectSpecifics<Item extends BaseListItemData<Record<string, unknown>>> {
+    /**
+     * If true, the dropdown allows multiple selections. Defaults to false.
+     */
+    multi?: false;
+    /**
+     * If true, the dropdown allows multiple lines of selected items. (Not available for single select)
+     */
+    multiline?: never;
+    /**
+     * Callback fired when an option is removed in multi-select mode. (Not available for single select)
+     */
+    onOptionRemove?: never;
+    /**
+     * The function to call to render the selected value on single select mode.
+     */
+    valueRenderer?: (option: BaseListItemData<Item>) => React.ReactNode;
+}
+export type BaseDropdownProps<Item extends BaseListItemData<Record<string, unknown>>> = VibeComponentProps & {
     /**
      * The list of options available in the list.
      */
@@ -32,10 +65,6 @@ export interface BaseDropdownProps<Item extends BaseListItemData<Record<string,
      * The function to call to render an option.
      */
     optionRenderer?: (option: BaseListItemData<Item>) => React.ReactNode;
-    /**
-     * The function to call to render the selected value
-     */
-    valueRenderer?: (option: BaseListItemData<Item>) => React.ReactNode;
     /**
      * The message to display when there are no options.
      */
@@ -88,11 +117,6 @@ export interface BaseDropdownProps<Item extends BaseListItemData<Record<string,
      * If true, the dropdown will have a clear button.
      */
     clearable?: boolean;
-    /**
-     * If true, the dropdown allows multiple selections.
-     */
-    multi?: boolean;
-    multiline?: boolean;
     /**
      * Callback fired when the dropdown loses focus.
      */
@@ -129,14 +153,16 @@ export interface BaseDropdownProps<Item extends BaseListItemData<Record<string,
      * Callback fired when an option is selected.
      */
     onOptionSelect?: (option: BaseListItemData<Item>) => void;
-    /**
-     * Callback fired when an option is removed in multi-select mode.
-     */
-    onOptionRemove?: (option: BaseListItemData<Item>) => void;
     /**
      * Callback fired when scrolling inside the dropdown.
      */
     onScroll?: (event: React.UIEvent<HTMLUListElement>) => void;
-}
+    /**
+     * A function to customize the filtering of options.
+     * It receives an option and the current input value, and should return true if the option should be included, false otherwise.
+     */
+    filterOption?: (option: Item, inputValue: string) => boolean;
+} & (MultiSelectSpecifics<Item> | SingleSelectSpecifics<Item>);
 export type DropdownSizes = "small" | "medium" | "large";
 export type DropdownDirection = "ltr" | "rtl" | "auto";
+export {};

package/dist/mocked_classnames/components/DropdownNew/hooks/useDropdownCombobox.d.ts

@@ -1,6 +1,6 @@
 import { BaseListItemData } from "../../BaseListItem";
 import { DropdownGroupOption } from "../Dropdown.types";
-declare function useDropdownCombobox<T extends BaseListItemData<Record<string, unknown>>>(options: DropdownGroupOption<T>, autoFocus?: boolean, isMenuOpen?: boolean, closeMenuOnSelect?: boolean, onChange?: (option: T | T[]) => void, onInputChange?: (value: string) => void, onMenuOpen?: () => void, onMenuClose?: () => void, onOptionSelect?: (option: T) => void): {
+declare function useDropdownCombobox<T extends BaseListItemData<Record<string, unknown>>>(options: DropdownGroupOption<T>, autoFocus?: boolean, isMenuOpen?: boolean, closeMenuOnSelect?: boolean, onChange?: (option: T | T[]) => void, onInputChange?: (value: string) => void, onMenuOpen?: () => void, onMenuClose?: () => void, onOptionSelect?: (option: T) => void, filterOption?: (option: T, inputValue: string) => boolean): {
     isOpen: boolean;
     inputValue: string;
     highlightedIndex: number;

package/dist/mocked_classnames/components/DropdownNew/hooks/useDropdownFiltering.d.ts

@@ -1,7 +1,7 @@
 import { BaseListItemData } from "../../BaseListItem";
 import { ListGroup } from "../../BaseList";
 import { DropdownGroupOption } from "../Dropdown.types";
-declare function useDropdownFiltering<Item extends BaseListItemData>(options: DropdownGroupOption<Item>): {
+declare function useDropdownFiltering<Item extends BaseListItemData>(options: DropdownGroupOption<Item>, filterOption?: (option: Item, inputValue: string) => boolean): {
     filteredOptions: ListGroup<Item>[];
     filterOptions: (inputValue: string) => void;
     setFilteredOptions: import("react").Dispatch<import("react").SetStateAction<ListGroup<Item>[]>>;

package/dist/mocked_classnames/components/DropdownNew/hooks/useDropdownMultiCombobox.d.ts

@@ -1,6 +1,6 @@
 import { DropdownGroupOption } from "../Dropdown.types";
 import { BaseListItemData } from "../../BaseListItem";
-declare function useDropdownMultiCombobox<T extends BaseListItemData<Record<string, unknown>>>(options: DropdownGroupOption<T>, selectedItems: T[], setSelectedItems: (items: T[]) => void, autoFocus?: boolean, onChange?: (options: T[]) => void, onInputChange?: (value: string) => void, onMenuOpen?: () => void, onMenuClose?: () => void, onOptionSelect?: (option: T) => void): {
+declare function useDropdownMultiCombobox<T extends BaseListItemData<Record<string, unknown>>>(options: DropdownGroupOption<T>, selectedItems: T[], setSelectedItems: (items: T[]) => void, autoFocus?: boolean, onChange?: (options: T[]) => void, onInputChange?: (value: string) => void, onMenuOpen?: () => void, onMenuClose?: () => void, onOptionSelect?: (option: T) => void, filterOption?: (option: T, inputValue: string) => boolean): {
     isOpen: boolean;
     inputValue: string;
     highlightedIndex: number;

package/dist/mocked_classnames/components/DropdownNew/utils/dropdownUtils.d.ts

@@ -1,3 +1,3 @@
 import { BaseListItemData } from "../../BaseListItem";
 import { ListGroup } from "../../BaseList";
-export declare function normalizeOptions<Item extends BaseListItemData>(options: ListGroup<Item>[] | BaseListItemData<Item>[], filter?: string): ListGroup<Item>[];
+export declare function normalizeOptions<Item extends BaseListItemData>(options: ListGroup<Item>[] | BaseListItemData<Item>[], filter?: string, filterOption?: (option: Item, inputValue: string) => boolean): ListGroup<Item>[];

package/dist/mocked_classnames/hooks/useGridKeyboardNavigation/gridKeyboardNavigationHelper.d.ts

@@ -4,13 +4,12 @@ export declare function getActiveIndexFromInboundNavigation({ direction, numberO
     numberOfItemsInLine: number;
     itemsCount: number;
 }): number;
-export declare function calcActiveIndexAfterArrowNavigation({ activeIndex, itemsCount, numberOfItemsInLine, direction, disabledIndexes, circularNavigation }: {
+export declare function calcActiveIndexAfterArrowNavigation({ activeIndex, itemsCount, numberOfItemsInLine, direction, disabledIndexes }: {
     activeIndex: number;
     itemsCount: number;
     numberOfItemsInLine: number;
     direction: NavDirections;
     disabledIndexes?: number[];
-    circularNavigation?: boolean;
 }): {
     isOutbound: boolean;
     nextIndex?: undefined;

package/dist/mocked_classnames/hooks/useGridKeyboardNavigation/useGridKeyboardNavigation.d.ts

@@ -13,7 +13,6 @@ import { MutableRefObject, ReactElement } from "react";
  * @param {boolean=} options.focusOnMount - if true, the referenced element will be focused when mounted
  * @param {number=} options.focusItemIndexOnMount - optional item index to focus when mounted. Only works with "options.focusOnMount".
  * @param {number[]=} options.disabledIndexes - optional array of disabled indices, which will be skipped while navigating.
- * @param {boolean=} options.circularNavigation - if true, the navigation will wrap around the grid
  * @returns {useGridKeyboardNavigationResult}
  *
  * @typedef useGridKeyboardNavigationResult
@@ -24,7 +23,7 @@ import { MutableRefObject, ReactElement } from "react";
  * The "isKeyboardAction" can be used to indicate a keyboard selection, which will affect the currently active index.
  */
 export default function useGridKeyboardNavigation({ ref, itemsCount, numberOfItemsInLine, onItemClicked, // the callback to call when an item is selected
-entryFocusStrategy, getItemByIndex, focusOnMount, focusItemIndexOnMount, disabledIndexes, circularNavigation }: {
+entryFocusStrategy, getItemByIndex, focusOnMount, focusItemIndexOnMount, disabledIndexes }: {
     ref: MutableRefObject<HTMLElement>;
     itemsCount: number;
     numberOfItemsInLine: number;
@@ -34,7 +33,6 @@ entryFocusStrategy, getItemByIndex, focusOnMount, focusItemIndexOnMount, disable
     focusOnMount?: boolean;
     focusItemIndexOnMount?: number;
     disabledIndexes?: number[];
-    circularNavigation?: boolean;
 }): {
     activeIndex: number;
     onSelectionAction: (index: number, isKeyboardAction?: boolean) => void;

package/dist/mocked_classnames/src/components/Table/TableContainer/TableContainer.module.scss.js

@@ -1,2 +1,2 @@
-var e={tableContainer:"tableContainer",menuContainer:"menuContainer"};!function(e){const n="s_id-545d156e3798_3_50_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const i=document.createElement("style");i.id=n,t.firstChild?t.insertBefore(i,t.firstChild):t.appendChild(i),i.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".tableContainer {\n  width: 100%;\n  height: 100%;\n  position: relative;\n}\n.tableContainer .menuContainer {\n  --cell-width: 40px;\n  position: absolute;\n  overflow: hidden;\n  left: calc(var(--cell-width) * -1);\n  width: var(--cell-width);\n  height: 100%;\n}");export{e as default};
+var e={tableContainer:"tableContainer",menuContainer:"menuContainer"};!function(e){const n="s_id-b17c334ca26e_3_50_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const i=document.createElement("style");i.id=n,t.firstChild?t.insertBefore(i,t.firstChild):t.appendChild(i),i.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".tableContainer {\n  width: 100%;\n  height: 100%;\n  position: relative;\n}\n.tableContainer .menuContainer {\n  --cell-width: 40px;\n  position: absolute;\n  overflow: hidden;\n  left: calc(var(--cell-width) * -1 + 1px);\n  width: var(--cell-width);\n  height: 100%;\n}");export{e as default};
 //# sourceMappingURL=TableContainer.module.scss.js.map

package/dist/mocked_classnames/src/components/Table/context/TableRowMenuContext/TableRowMenuContext.js

@@ -1,2 +1,2 @@
-import{slicedToArray as e}from"../../../../../_virtual/_rollupPluginBabelHelpers.js";import n,{useContext as o,createContext as r,useRef as u,useState as t,useCallback as i,useMemo as l}from"react";var c=r(void 0),d=function(o){var r=o.value,d=o.children,v=r.tableRootRef,a=r.hoveredRowRef,s=r.isMenuOpen,f=r.resetHoveredRow,R=r.setHoveredRowRef,w=r.setIsMenuOpen,m=u(null),M=t(0),p=e(M,2),T=p[0],b=p[1],h=u(null),g=i((function(){clearTimeout(m.current),m.current=null}),[]),H=i((function(e){if(!1!==h.current&&!s&&(null==a?void 0:a.current)!==e.current){g(),R(e);var n=v.current.getBoundingClientRect().top,o=e.current.getBoundingClientRect().top;b(o-n),null===h.current&&setTimeout((function(){h.current=!!(null===document||void 0===document?void 0:document.querySelector("[data-row-menu-id]"))}))}}),[s,a,g,R,v]),B=i((function(){s||(m.current=setTimeout((function(){R(null)}),400))}),[s,R]),O=i((function(){s||g()}),[s,g]),P=i((function(){s||R(null)}),[s,R]),C=l((function(){var e;return{hoveredRowId:null===(e=null==a?void 0:a.current)||void 0===e?void 0:e.id,resetHoveredRow:f,menuButtonPosition:T,onMouseOverRow:H,onMouseLeaveRow:B,onMouseOverRowMenu:O,onMouseLeaveRowMenu:P,setTableMenuShown:function(){return w(!0)},setTableMenuHidden:function(){return w(!1)}}}),[a,f,T,B,P,H,O,w]);return n.createElement(c.Provider,{value:C},d)},v=function(){var e=o(c);if(!e)throw Error("useTableRowMenuContext must be used within a TableRowMenuProvider");return e};export{d as TableRowMenuProvider,v as useTableRowMenu};
+import{slicedToArray as e}from"../../../../../_virtual/_rollupPluginBabelHelpers.js";import n,{useContext as o,createContext as r,useState as t,useRef as u,useCallback as i,useMemo as l}from"react";var v=r(void 0),c=function(o){var r=o.value,c=o.children,a=r.tableRootRef,d=r.hoveredRowRef,s=r.isMenuOpen,R=r.resetHoveredRow,f=r.setHoveredRowRef,w=r.setIsMenuOpen,M=t(0),p=e(M,2),b=p[0],m=p[1],h=u(!1),g=i((function(e){if(!s){f(e);var n=a.current.getBoundingClientRect().top,o=e.current.getBoundingClientRect().top;m(o-n)}}),[s,f,a]),H=i((function(){s||h.current||f(null)}),[s,f]),T=i((function(){h.current=!0}),[]),B=i((function(){h.current=!1,s||(null==d?void 0:d.current)||f(null)}),[s,d,f]),O=i((function(){w(!0)}),[w]),P=i((function(){w(!1)}),[w]),C=l((function(){var e;return{hoveredRowId:null===(e=null==d?void 0:d.current)||void 0===e?void 0:e.id,resetHoveredRow:R,menuButtonPosition:b,onMouseOverRow:g,onMouseLeaveRow:H,onMouseOverRowMenu:T,onMouseLeaveRowMenu:B,setTableMenuShown:O,setTableMenuHidden:P}}),[d,R,b,H,B,g,T,O,P]);return n.createElement(v.Provider,{value:C},c)},a=function(){var e=o(v);if(!e)throw Error("useTableRowMenuContext must be used within a TableRowMenuProvider");return e};export{c as TableRowMenuProvider,a as useTableRowMenu};
 //# sourceMappingURL=TableRowMenuContext.js.map

package/dist/mocked_classnames/src/components/Table/context/TableRowMenuContext/TableRowMenuContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableRowMenuContext.js","sources":["../../../../../../../src/components/Table/context/TableRowMenuContext/TableRowMenuContext.tsx"],"sourcesContent":["import React, { createContext, useCallback, useContext, useMemo, useRef, useState } from \"react\";\nimport { TableRowMenuContext as ITableRowMenuContext, TableRowMenuProviderProps } from \"./TableRowMenuContext.types\";\n\nconst TableRowMenuContext = createContext<ITableRowMenuContext | undefined>(undefined);\n\nexport const TableRowMenuProvider = ({ value, children }: TableRowMenuProviderProps) => {\n  const { tableRootRef, hoveredRowRef, isMenuOpen, resetHoveredRow, setHoveredRowRef, setIsMenuOpen } = value;\n  const rowMouseLeaveTimeoutId = useRef<ReturnType<typeof setTimeout>>(null);\n  const [menuButtonPosition, setMenuButtonPosition] = useState(0);\n  const hasMenuRef = useRef<boolean | null>(null);\n\n  const resetTimeout = useCallback(() => {\n    clearTimeout(rowMouseLeaveTimeoutId.current);\n    rowMouseLeaveTimeoutId.current = null;\n  }, []);\n\n  const onMouseOverRow = useCallback(\n    (rowRef: React.RefObject<HTMLDivElement>) => {\n      if (hasMenuRef.current === false || isMenuOpen || hoveredRowRef?.current === rowRef.current) return;\n\n      resetTimeout();\n      setHoveredRowRef(rowRef);\n      const tableRootTop = tableRootRef.current.getBoundingClientRect().top;\n      const rowTop = rowRef.current.getBoundingClientRect().top;\n      setMenuButtonPosition(rowTop - tableRootTop);\n      if (hasMenuRef.current === null) {\n        setTimeout(() => {\n          hasMenuRef.current = !!document?.querySelector(`[data-row-menu-id]`);\n        });\n      }\n    },\n    [isMenuOpen, hoveredRowRef, resetTimeout, setHoveredRowRef, tableRootRef]\n  );\n\n  const onMouseLeaveRow = useCallback(() => {\n    if (isMenuOpen) return;\n    rowMouseLeaveTimeoutId.current = setTimeout(() => {\n      setHoveredRowRef(null);\n    }, 400);\n  }, [isMenuOpen, setHoveredRowRef]);\n\n  const onMouseOverRowMenu = useCallback(() => {\n    if (isMenuOpen) return;\n    resetTimeout();\n  }, [isMenuOpen, resetTimeout]);\n\n  const onMouseLeaveRowMenu = useCallback(() => {\n    if (isMenuOpen) return;\n    setHoveredRowRef(null);\n  }, [isMenuOpen, setHoveredRowRef]);\n\n  const contextValue = useMemo<ITableRowMenuContext>(\n    () => ({\n      hoveredRowId: hoveredRowRef?.current?.id,\n      resetHoveredRow,\n      menuButtonPosition,\n      onMouseOverRow,\n      onMouseLeaveRow,\n      onMouseOverRowMenu,\n      onMouseLeaveRowMenu,\n      setTableMenuShown: () => setIsMenuOpen(true),\n      setTableMenuHidden: () => setIsMenuOpen(false)\n    }),\n    [\n      hoveredRowRef,\n      resetHoveredRow,\n      menuButtonPosition,\n      onMouseLeaveRow,\n      onMouseLeaveRowMenu,\n      onMouseOverRow,\n      onMouseOverRowMenu,\n      setIsMenuOpen\n    ]\n  );\n\n  return <TableRowMenuContext.Provider value={contextValue}>{children}</TableRowMenuContext.Provider>;\n};\n\nexport const useTableRowMenu = () => {\n  const context = useContext(TableRowMenuContext);\n  if (!context) {\n    throw new Error(\"useTableRowMenuContext must be used within a TableRowMenuProvider\");\n  }\n  return context;\n};\n"],"names":["TableRowMenuContext","createContext","undefined","TableRowMenuProvider","_ref","value","children","tableRootRef","hoveredRowRef","isMenuOpen","resetHoveredRow","setHoveredRowRef","setIsMenuOpen","rowMouseLeaveTimeoutId","useRef","_useState","useState","_useState2","_slicedToArray","menuButtonPosition","setMenuButtonPosition","hasMenuRef","resetTimeout","useCallback","clearTimeout","current","onMouseOverRow","rowRef","tableRootTop","getBoundingClientRect","top","rowTop","setTimeout","document","querySelector","onMouseLeaveRow","onMouseOverRowMenu","onMouseLeaveRowMenu","contextValue","useMemo","hoveredRowId","_a","id","setTableMenuShown","setTableMenuHidden","React","createElement","Provider","useTableRowMenu","context","useContext","Error"],"mappings":"sMAGA,IAAMA,EAAsBC,OAAgDC,GAE/DC,EAAuB,SAAHC,GAAsD,IAAhDC,EAAKD,EAALC,MAAOC,EAAQF,EAARE,SACpCC,EAA8FF,EAA9FE,aAAcC,EAAgFH,EAAhFG,cAAeC,EAAiEJ,EAAjEI,WAAYC,EAAqDL,EAArDK,gBAAiBC,EAAoCN,EAApCM,iBAAkBC,EAAkBP,EAAlBO,cAC9EC,EAAyBC,EAAsC,MACrEC,EAAoDC,EAAS,GAAEC,EAAAC,EAAAH,EAAA,GAAxDI,EAAkBF,EAAA,GAAEG,EAAqBH,EAAA,GAC1CI,EAAaP,EAAuB,MAEpCQ,EAAeC,GAAY,WAC/BC,aAAaX,EAAuBY,SACpCZ,EAAuBY,QAAU,IAClC,GAAE,IAEGC,EAAiBH,GACrB,SAACI,GACC,IAA2B,IAAvBN,EAAWI,UAAqBhB,IAAcD,eAAAA,EAAeiB,WAAYE,EAAOF,QAApF,CAEAH,IACAX,EAAiBgB,GACjB,IAAMC,EAAerB,EAAakB,QAAQI,wBAAwBC,IAC5DC,EAASJ,EAAOF,QAAQI,wBAAwBC,IACtDV,EAAsBW,EAASH,GACJ,OAAvBP,EAAWI,SACbO,YAAW,WACTX,EAAWI,WAAoB,OAARQ,eAAQ,IAARA,cAAQ,EAARA,SAAUC,cAAkC,sBACrE,GAV2F,CAY/F,GACA,CAACzB,EAAYD,EAAec,EAAcX,EAAkBJ,IAGxD4B,EAAkBZ,GAAY,WAC9Bd,IACJI,EAAuBY,QAAUO,YAAW,WAC1CrB,EAAiB,KAClB,GAAE,KACL,GAAG,CAACF,EAAYE,IAEVyB,EAAqBb,GAAY,WACjCd,GACJa,GACF,GAAG,CAACb,EAAYa,IAEVe,EAAsBd,GAAY,WAClCd,GACJE,EAAiB,KACnB,GAAG,CAACF,EAAYE,IAEV2B,EAAeC,GACnB,iBAAM,MAAC,CACLC,aAAoC,QAAtBC,EAAAjC,eAAAA,EAAeiB,eAAO,IAAAgB,OAAA,EAAAA,EAAEC,GACtChC,gBAAAA,EACAS,mBAAAA,EACAO,eAAAA,EACAS,gBAAAA,EACAC,mBAAAA,EACAC,oBAAAA,EACAM,kBAAmB,WAAA,OAAM/B,GAAc,EAAK,EAC5CgC,mBAAoB,WAAA,OAAMhC,GAAc,EAAM,KAEhD,CACEJ,EACAE,EACAS,EACAgB,EACAE,EACAX,EACAU,EACAxB,IAIJ,OAAOiC,EAAAC,cAAC9C,EAAoB+C,SAAQ,CAAC1C,MAAOiC,GAAehC,EAC7D,EAEa0C,EAAkB,WAC7B,IAAMC,EAAUC,EAAWlD,GAC3B,IAAKiD,EACH,MAAUE,MAAM,qEAElB,OAAOF,CACT"}
+{"version":3,"file":"TableRowMenuContext.js","sources":["../../../../../../../src/components/Table/context/TableRowMenuContext/TableRowMenuContext.tsx"],"sourcesContent":["import React, { createContext, useCallback, useContext, useMemo, useRef, useState } from \"react\";\nimport { TableRowMenuContext as ITableRowMenuContext, TableRowMenuProviderProps } from \"./TableRowMenuContext.types\";\n\nconst TableRowMenuContext = createContext<ITableRowMenuContext | undefined>(undefined);\n\nexport const TableRowMenuProvider = ({ value, children }: TableRowMenuProviderProps) => {\n  const { tableRootRef, hoveredRowRef, isMenuOpen, resetHoveredRow, setHoveredRowRef, setIsMenuOpen } = value;\n  const [menuButtonPosition, setMenuButtonPosition] = useState(0);\n  const isMenuHovered = useRef(false);\n\n  const onMouseOverRow = useCallback(\n    (rowRef: React.RefObject<HTMLDivElement>) => {\n      if (isMenuOpen) return;\n\n      setHoveredRowRef(rowRef);\n      const tableRootTop = tableRootRef.current.getBoundingClientRect().top;\n      const rowTop = rowRef.current.getBoundingClientRect().top;\n      setMenuButtonPosition(rowTop - tableRootTop);\n    },\n    [isMenuOpen, setHoveredRowRef, tableRootRef]\n  );\n\n  const onMouseLeaveRow = useCallback(() => {\n    if (isMenuOpen || isMenuHovered.current) return;\n    setHoveredRowRef(null);\n  }, [isMenuOpen, setHoveredRowRef]);\n\n  const onMouseOverRowMenu = useCallback(() => {\n    isMenuHovered.current = true;\n  }, []);\n\n  const onMouseLeaveRowMenu = useCallback(() => {\n    isMenuHovered.current = false;\n    if (isMenuOpen) return;\n\n    if (!hoveredRowRef?.current) {\n      setHoveredRowRef(null);\n    }\n  }, [isMenuOpen, hoveredRowRef, setHoveredRowRef]);\n\n  const setTableMenuShown = useCallback(() => {\n    setIsMenuOpen(true);\n  }, [setIsMenuOpen]);\n\n  const setTableMenuHidden = useCallback(() => {\n    setIsMenuOpen(false);\n  }, [setIsMenuOpen]);\n\n  const contextValue = useMemo<ITableRowMenuContext>(\n    () => ({\n      hoveredRowId: hoveredRowRef?.current?.id,\n      resetHoveredRow,\n      menuButtonPosition,\n      onMouseOverRow,\n      onMouseLeaveRow,\n      onMouseOverRowMenu,\n      onMouseLeaveRowMenu,\n      setTableMenuShown,\n      setTableMenuHidden\n    }),\n    [\n      hoveredRowRef,\n      resetHoveredRow,\n      menuButtonPosition,\n      onMouseLeaveRow,\n      onMouseLeaveRowMenu,\n      onMouseOverRow,\n      onMouseOverRowMenu,\n      setTableMenuShown,\n      setTableMenuHidden\n    ]\n  );\n\n  return <TableRowMenuContext.Provider value={contextValue}>{children}</TableRowMenuContext.Provider>;\n};\n\nexport const useTableRowMenu = () => {\n  const context = useContext(TableRowMenuContext);\n  if (!context) {\n    throw new Error(\"useTableRowMenuContext must be used within a TableRowMenuProvider\");\n  }\n  return context;\n};\n"],"names":["TableRowMenuContext","createContext","undefined","TableRowMenuProvider","_ref","value","children","tableRootRef","hoveredRowRef","isMenuOpen","resetHoveredRow","setHoveredRowRef","setIsMenuOpen","_useState","useState","_useState2","_slicedToArray","menuButtonPosition","setMenuButtonPosition","isMenuHovered","useRef","onMouseOverRow","useCallback","rowRef","tableRootTop","current","getBoundingClientRect","top","rowTop","onMouseLeaveRow","onMouseOverRowMenu","onMouseLeaveRowMenu","setTableMenuShown","setTableMenuHidden","contextValue","useMemo","hoveredRowId","_a","id","React","createElement","Provider","useTableRowMenu","context","useContext","Error"],"mappings":"sMAGA,IAAMA,EAAsBC,OAAgDC,GAE/DC,EAAuB,SAAHC,GAAsD,IAAhDC,EAAKD,EAALC,MAAOC,EAAQF,EAARE,SACpCC,EAA8FF,EAA9FE,aAAcC,EAAgFH,EAAhFG,cAAeC,EAAiEJ,EAAjEI,WAAYC,EAAqDL,EAArDK,gBAAiBC,EAAoCN,EAApCM,iBAAkBC,EAAkBP,EAAlBO,cACpFC,EAAoDC,EAAS,GAAEC,EAAAC,EAAAH,EAAA,GAAxDI,EAAkBF,EAAA,GAAEG,EAAqBH,EAAA,GAC1CI,EAAgBC,GAAO,GAEvBC,EAAiBC,GACrB,SAACC,GACC,IAAId,EAAJ,CAEAE,EAAiBY,GACjB,IAAMC,EAAejB,EAAakB,QAAQC,wBAAwBC,IAC5DC,EAASL,EAAOE,QAAQC,wBAAwBC,IACtDT,EAAsBU,EAASJ,EALf,CAMjB,GACD,CAACf,EAAYE,EAAkBJ,IAG3BsB,EAAkBP,GAAY,WAC9Bb,GAAcU,EAAcM,SAChCd,EAAiB,KACnB,GAAG,CAACF,EAAYE,IAEVmB,EAAqBR,GAAY,WACrCH,EAAcM,SAAU,CACzB,GAAE,IAEGM,EAAsBT,GAAY,WACtCH,EAAcM,SAAU,EACpBhB,IAECD,eAAAA,EAAeiB,UAClBd,EAAiB,KAEpB,GAAE,CAACF,EAAYD,EAAeG,IAEzBqB,EAAoBV,GAAY,WACpCV,GAAc,EAChB,GAAG,CAACA,IAEEqB,EAAqBX,GAAY,WACrCV,GAAc,EAChB,GAAG,CAACA,IAEEsB,EAAeC,GACnB,iBAAM,MAAC,CACLC,aAAoC,QAAtBC,EAAA7B,eAAAA,EAAeiB,eAAO,IAAAY,OAAA,EAAAA,EAAEC,GACtC5B,gBAAAA,EACAO,mBAAAA,EACAI,eAAAA,EACAQ,gBAAAA,EACAC,mBAAAA,EACAC,oBAAAA,EACAC,kBAAAA,EACAC,mBAAAA,EACA,GACF,CACEzB,EACAE,EACAO,EACAY,EACAE,EACAV,EACAS,EACAE,EACAC,IAIJ,OAAOM,EAAAC,cAACxC,EAAoByC,SAAQ,CAACpC,MAAO6B,GAAe5B,EAC7D,EAEaoC,EAAkB,WAC7B,IAAMC,EAAUC,EAAW5C,GAC3B,IAAK2C,EACH,MAAUE,MAAM,qEAElB,OAAOF,CACT"}

package/dist/mocked_classnames/src/components/Tabs/Tab/Tab.js

@@ -1,2 +1,2 @@
-import{defineProperty as e,toConsumableArray as t}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import o from"classnames";import s,{forwardRef as r,useRef as i}from"react";import{noop as a}from"lodash-es";import n from"../../../hooks/useMergeRef.js";import{getStyle as c}from"../../../helpers/typesciptCssModulesHelper.js";import l from"../../Icon/Icon.js";import{getTestId as m,ComponentDefaultTestId as d}from"../../../tests/testIds.js";import p from"./Tab.module.scss.js";import f from"../../Tooltip/Tooltip.js";import{ComponentVibeId as u}from"../../../tests/constants.js";import{keyCodes as v}from"../../../constants/keyCodes.js";import"../../../constants/sizes.js";var b=r((function(r,b){var y=r.className,j=r.tabInnerClassName,C=r.id,T=r.value,k=void 0===T?0:T,E=r.disabled,I=void 0!==E&&E,N=r.active,h=void 0!==N&&N,A=r.focus,g=void 0!==A&&A,P=r.onClick,S=void 0===P?a:P,B=r.tooltipProps,H=void 0===B?{}:B,z=r.icon,D=r.iconType,F=r.iconSide,M=void 0===F?"left":F,R=r.children,_=r["data-testid"],w=i(null),x=n(b,w);return s.createElement(f,Object.assign({},H,{content:H.content}),s.createElement("li",{ref:x,key:C,className:o(p.tabWrapper,y,e(e(e({},p.active,h),p.disabled,I),p.tabFocusVisibleInset,g)),id:C,role:"tab","aria-selected":h,"aria-disabled":I,"data-testid":_||m(d.TAB,C),"data-vibe":u.TAB,onClick:function(){return!I&&S(k)},onKeyDown:function(e){e.key!==v.ENTER&&e.key!==v.SPACE||(e.preventDefault(),!I&&S(k))}},s.createElement("div",{className:o(p.tabInner,j)},function(){if(!z)return R;var e=s.createElement(l,{ariaHidden:!0,iconType:D,icon:z,className:o(p.tabIcon,c(p,M)),iconSize:18,ignoreFocusStyle:!0}),r=s.Children.toArray(R);return"left"===M?[e].concat(t(r)):[].concat(t(r),[e])}())))}));export{b as default};
+import{defineProperty as e,toConsumableArray as t}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import o from"classnames";import r,{forwardRef as a,useRef as i}from"react";import{noop as s}from"lodash-es";import n from"../../../hooks/useMergeRef.js";import{getStyle as l}from"../../../helpers/typesciptCssModulesHelper.js";import c from"../../Icon/Icon.js";import{getTestId as m,ComponentDefaultTestId as d}from"../../../tests/testIds.js";import p from"./Tab.module.scss.js";import f from"../../Tooltip/Tooltip.js";import{ComponentVibeId as u}from"../../../tests/constants.js";var b=a((function(a,b){var v=a.className,j=a.tabInnerClassName,y=a.id,I=a.value,T=void 0===I?0:I,C=a.disabled,h=void 0!==C&&C,N=a.active,g=void 0!==N&&N,k=a.focus,A=void 0!==k&&k,E=a.onClick,B=void 0===E?s:E,H=a.tooltipProps,P=void 0===H?{}:H,S=a.icon,F=a.iconType,M=a.iconSide,_=void 0===M?"left":M,x=a.children,z=a["data-testid"],O=i(null),R=n(b,O);return r.createElement(f,Object.assign({},P,{content:P.content}),r.createElement("li",{ref:R,key:y,className:o(p.tabWrapper,v,e(e(e({},p.active,g),p.disabled,h),p.tabFocusVisibleInset,A)),id:y,role:"tab","aria-selected":g,"aria-disabled":h,"data-testid":z||m(d.TAB,y),"data-vibe":u.TAB},r.createElement("a",{className:o(p.tabInner,j),onClick:function(){return!h&&B(T)}},function(){if(!S)return x;var e=r.createElement(c,{ariaHidden:!0,iconType:F,icon:S,className:o(p.tabIcon,l(p,_)),iconSize:18,ignoreFocusStyle:!0}),a=r.Children.toArray(x);return"left"===_?[e].concat(t(a)):[].concat(t(a),[e])}())))}));export{b as default};
 //# sourceMappingURL=Tab.js.map

package/dist/mocked_classnames/src/components/Tabs/Tab/Tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sources":["../../../../../../src/components/Tabs/Tab/Tab.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { FC, forwardRef, ReactElement, useRef } from \"react\";\nimport { noop as NOOP } from \"lodash-es\";\nimport useMergeRef from \"../../../hooks/useMergeRef\";\nimport { getStyle } from \"../../../helpers/typesciptCssModulesHelper\";\nimport Icon from \"../../Icon/Icon\";\nimport VibeComponentProps from \"../../../types/VibeComponentProps\";\nimport { IconType } from \"../../Icon\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../tests/test-ids-utils\";\nimport styles from \"./Tab.module.scss\";\nimport { SubIcon } from \"../../../types/SubIcon\";\nimport Tooltip, { TooltipProps } from \"../../Tooltip/Tooltip\";\nimport { ComponentVibeId } from \"../../../tests/constants\";\nimport { keyCodes } from \"../../../constants\";\n\nexport interface TabProps extends VibeComponentProps {\n  /**\n   * Class name applied to the inner tab content.\n   */\n  tabInnerClassName?: string;\n  /**\n   * The index value of the tab.\n   */\n  value?: number;\n  /**\n   * If true, disables the tab.\n   */\n  disabled?: boolean;\n  /**\n   * If true, marks the tab as active.\n   */\n  active?: boolean;\n  /**\n   * If true, applies focus styles to the tab.\n   */\n  focus?: boolean;\n  /**\n   * The icon displayed in the tab.\n   */\n  icon?: SubIcon;\n  /**\n   * The type of icon.\n   */\n  iconType?: IconType;\n  /**\n   * The position of the icon relative to the text.\n   */\n  iconSide?: string;\n  /**\n   * Callback fired when the tab is clicked.\n   */\n  onClick?: (value: number) => void;\n  /**\n   * Props passed to the tab's tooltip.\n   */\n  tooltipProps?: Partial<TooltipProps>;\n  /**\n   * The content displayed inside the tab.\n   */\n  children?: string | ReactElement | ReactElement[];\n}\n\nconst Tab: FC<TabProps> = forwardRef(\n  (\n    {\n      className,\n      tabInnerClassName,\n      id,\n      value = 0,\n      disabled = false,\n      active = false,\n      focus = false,\n      onClick = NOOP,\n      tooltipProps = {} as TooltipProps,\n      icon,\n      iconType,\n      iconSide = \"left\",\n      children,\n      \"data-testid\": dataTestId\n    }: TabProps,\n    ref\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    function renderIconAndChildren() {\n      if (!icon) return children;\n\n      const iconElement = (\n        <Icon\n          ariaHidden={true}\n          iconType={iconType}\n          icon={icon}\n          className={cx(styles.tabIcon, getStyle(styles, iconSide))}\n          iconSize={18}\n          ignoreFocusStyle\n        />\n      );\n\n      const childrenArray = React.Children.toArray(children);\n\n      if (iconSide === \"left\") {\n        return [iconElement, ...childrenArray];\n      }\n\n      return [...childrenArray, iconElement];\n    }\n\n    function handleKeyDown(event: React.KeyboardEvent) {\n      if (event.key === keyCodes.ENTER || event.key === keyCodes.SPACE) {\n        event.preventDefault();\n        !disabled && onClick(value);\n      }\n    }\n\n    return (\n      <Tooltip {...tooltipProps} content={tooltipProps.content}>\n        <li\n          ref={mergedRef}\n          key={id}\n          className={cx(styles.tabWrapper, className, {\n            [styles.active]: active,\n            [styles.disabled]: disabled,\n            [styles.tabFocusVisibleInset]: focus\n          })}\n          id={id}\n          role=\"tab\"\n          aria-selected={active}\n          aria-disabled={disabled}\n          data-testid={dataTestId || getTestId(ComponentDefaultTestId.TAB, id)}\n          data-vibe={ComponentVibeId.TAB}\n          onClick={() => !disabled && onClick(value)}\n          onKeyDown={handleKeyDown}\n        >\n          <div className={cx(styles.tabInner, tabInnerClassName)}>{renderIconAndChildren()}</div>\n        </li>\n      </Tooltip>\n    );\n  }\n);\n\nexport default Tab;\n"],"names":["Tab","forwardRef","_ref","ref","className","tabInnerClassName","id","_ref$value","value","_ref$disabled","disabled","_ref$active","active","_ref$focus","focus","_ref$onClick","onClick","NOOP","_ref$tooltipProps","tooltipProps","icon","iconType","_ref$iconSide","iconSide","children","dataTestId","componentRef","useRef","mergedRef","useMergeRef","React","createElement","Tooltip","Object","assign","content","key","cx","styles","tabWrapper","_defineProperty","tabFocusVisibleInset","role","getTestId","ComponentDefaultTestId","TAB","ComponentVibeId","onKeyDown","event","keyCodes","ENTER","SPACE","preventDefault","tabInner","iconElement","Icon","ariaHidden","tabIcon","getStyle","iconSize","ignoreFocusStyle","childrenArray","Children","toArray","concat","_toConsumableArray","renderIconAndChildren"],"mappings":"yqBA8DMA,IAAAA,EAAoBC,GACxB,SAAAC,EAiBEC,GACE,IAhBAC,EAASF,EAATE,UACAC,EAAiBH,EAAjBG,kBACAC,EAAEJ,EAAFI,GAAEC,EAAAL,EACFM,MAAAA,OAAQ,IAAHD,EAAG,EAACA,EAAAE,EAAAP,EACTQ,SAAAA,OAAW,IAAHD,GAAQA,EAAAE,EAAAT,EAChBU,OAAAA,OAAS,IAAHD,GAAQA,EAAAE,EAAAX,EACdY,MAAAA,OAAQ,IAAHD,GAAQA,EAAAE,EAAAb,EACbc,QAAAA,OAAUC,IAAHF,EAAGE,EAAIF,EAAAG,EAAAhB,EACdiB,aAAAA,OAAY,IAAAD,EAAG,CAAkB,EAAAA,EACjCE,EAAIlB,EAAJkB,KACAC,EAAQnB,EAARmB,SAAQC,EAAApB,EACRqB,SAAAA,OAAW,IAAHD,EAAG,OAAMA,EACjBE,EAAQtB,EAARsB,SACeC,EAAUvB,EAAzB,eAIIwB,EAAeC,EAAO,MACtBC,EAAYC,EAAY1B,EAAKuB,GAgCnC,OACEI,EAACC,cAAAC,EAAYC,OAAAC,OAAA,CAAA,EAAAf,GAAcgB,QAAShB,EAAagB,UAC/CL,EAAAC,cAAA,KAAA,CACE5B,IAAKyB,EACLQ,IAAK9B,EACLF,UAAWiC,EAAGC,EAAOC,WAAYnC,EAASoC,EAAAA,EAAAA,EACvCF,GAAAA,EAAO1B,OAASA,GAChB0B,EAAO5B,SAAWA,GAClB4B,EAAOG,qBAAuB3B,IAEjCR,GAAIA,EACJoC,KAAK,MAAK,gBACK9B,EACA,gBAAAF,gBACFe,GAAckB,EAAUC,EAAuBC,IAAKvC,GAAG,YACzDwC,EAAgBD,IAC3B7B,QAAS,WAAA,OAAON,GAAYM,EAAQR,EAAM,EAC1CuC,UAxBN,SAAuBC,GACjBA,EAAMZ,MAAQa,EAASC,OAASF,EAAMZ,MAAQa,EAASE,QACzDH,EAAMI,kBACL1C,GAAYM,EAAQR,GAEzB,GAqBMsB,EAAAC,cAAA,MAAA,CAAK3B,UAAWiC,EAAGC,EAAOe,SAAUhD,IAjD1C,WACE,IAAKe,EAAM,OAAOI,EAElB,IAAM8B,EACJxB,gBAACyB,EAAI,CACHC,YAAY,EACZnC,SAAUA,EACVD,KAAMA,EACNhB,UAAWiC,EAAGC,EAAOmB,QAASC,EAASpB,EAAQf,IAC/CoC,SAAU,GACVC,kBAAgB,IAIdC,EAAgB/B,EAAMgC,SAASC,QAAQvC,GAE7C,MAAiB,SAAbD,EACF,CAAQ+B,GAAWU,OAAAC,EAAKJ,IAG1B,GAAAG,OAAAC,EAAWJ,IAAeP,GAC5B,CA4B+DY,KAIjE"}
+{"version":3,"file":"Tab.js","sources":["../../../../../../src/components/Tabs/Tab/Tab.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { FC, forwardRef, ReactElement, useRef } from \"react\";\nimport { noop as NOOP } from \"lodash-es\";\nimport useMergeRef from \"../../../hooks/useMergeRef\";\nimport { getStyle } from \"../../../helpers/typesciptCssModulesHelper\";\nimport Icon from \"../../Icon/Icon\";\nimport VibeComponentProps from \"../../../types/VibeComponentProps\";\nimport { IconType } from \"../../Icon\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../tests/test-ids-utils\";\nimport styles from \"./Tab.module.scss\";\nimport { SubIcon } from \"../../../types/SubIcon\";\nimport Tooltip, { TooltipProps } from \"../../Tooltip/Tooltip\";\nimport { ComponentVibeId } from \"../../../tests/constants\";\n\nexport interface TabProps extends VibeComponentProps {\n  /**\n   * Class name applied to the inner tab content.\n   */\n  tabInnerClassName?: string;\n  /**\n   * The index value of the tab.\n   */\n  value?: number;\n  /**\n   * If true, disables the tab.\n   */\n  disabled?: boolean;\n  /**\n   * If true, marks the tab as active.\n   */\n  active?: boolean;\n  /**\n   * If true, applies focus styles to the tab.\n   */\n  focus?: boolean;\n  /**\n   * The icon displayed in the tab.\n   */\n  icon?: SubIcon;\n  /**\n   * The type of icon.\n   */\n  iconType?: IconType;\n  /**\n   * The position of the icon relative to the text.\n   */\n  iconSide?: string;\n  /**\n   * Callback fired when the tab is clicked.\n   */\n  onClick?: (value: number) => void;\n  /**\n   * Props passed to the tab's tooltip.\n   */\n  tooltipProps?: Partial<TooltipProps>;\n  /**\n   * The content displayed inside the tab.\n   */\n  children?: string | ReactElement | ReactElement[];\n}\n\nconst Tab: FC<TabProps> = forwardRef(\n  (\n    {\n      className,\n      tabInnerClassName,\n      id,\n      value = 0,\n      disabled = false,\n      active = false,\n      focus = false,\n      onClick = NOOP,\n      tooltipProps = {} as TooltipProps,\n      icon,\n      iconType,\n      iconSide = \"left\",\n      children,\n      \"data-testid\": dataTestId\n    }: TabProps,\n    ref\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    function renderIconAndChildren() {\n      if (!icon) return children;\n\n      const iconElement = (\n        <Icon\n          ariaHidden={true}\n          iconType={iconType}\n          icon={icon}\n          className={cx(styles.tabIcon, getStyle(styles, iconSide))}\n          iconSize={18}\n          ignoreFocusStyle\n        />\n      );\n\n      const childrenArray = React.Children.toArray(children);\n\n      if (iconSide === \"left\") {\n        return [iconElement, ...childrenArray];\n      }\n\n      return [...childrenArray, iconElement];\n    }\n    return (\n      <Tooltip {...tooltipProps} content={tooltipProps.content}>\n        <li\n          ref={mergedRef}\n          key={id}\n          className={cx(styles.tabWrapper, className, {\n            [styles.active]: active,\n            [styles.disabled]: disabled,\n            [styles.tabFocusVisibleInset]: focus\n          })}\n          id={id}\n          role=\"tab\"\n          aria-selected={active}\n          aria-disabled={disabled}\n          data-testid={dataTestId || getTestId(ComponentDefaultTestId.TAB, id)}\n          data-vibe={ComponentVibeId.TAB}\n        >\n          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid,jsx-a11y/click-events-have-key-events */}\n          <a className={cx(styles.tabInner, tabInnerClassName)} onClick={() => !disabled && onClick(value)}>\n            {renderIconAndChildren()}\n          </a>\n        </li>\n      </Tooltip>\n    );\n  }\n);\n\nexport default Tab;\n"],"names":["Tab","forwardRef","_ref","ref","className","tabInnerClassName","id","_ref$value","value","_ref$disabled","disabled","_ref$active","active","_ref$focus","focus","_ref$onClick","onClick","NOOP","_ref$tooltipProps","tooltipProps","icon","iconType","_ref$iconSide","iconSide","children","dataTestId","componentRef","useRef","mergedRef","useMergeRef","React","createElement","Tooltip","Object","assign","content","key","cx","styles","tabWrapper","_defineProperty","tabFocusVisibleInset","role","getTestId","ComponentDefaultTestId","TAB","ComponentVibeId","tabInner","iconElement","Icon","ariaHidden","tabIcon","getStyle","iconSize","ignoreFocusStyle","childrenArray","Children","toArray","concat","_toConsumableArray","renderIconAndChildren"],"mappings":"2kBA6DMA,IAAAA,EAAoBC,GACxB,SAAAC,EAiBEC,GACE,IAhBAC,EAASF,EAATE,UACAC,EAAiBH,EAAjBG,kBACAC,EAAEJ,EAAFI,GAAEC,EAAAL,EACFM,MAAAA,OAAQ,IAAHD,EAAG,EAACA,EAAAE,EAAAP,EACTQ,SAAAA,OAAW,IAAHD,GAAQA,EAAAE,EAAAT,EAChBU,OAAAA,OAAS,IAAHD,GAAQA,EAAAE,EAAAX,EACdY,MAAAA,OAAQ,IAAHD,GAAQA,EAAAE,EAAAb,EACbc,QAAAA,OAAUC,IAAHF,EAAGE,EAAIF,EAAAG,EAAAhB,EACdiB,aAAAA,OAAY,IAAAD,EAAG,CAAkB,EAAAA,EACjCE,EAAIlB,EAAJkB,KACAC,EAAQnB,EAARmB,SAAQC,EAAApB,EACRqB,SAAAA,OAAW,IAAHD,EAAG,OAAMA,EACjBE,EAAQtB,EAARsB,SACeC,EAAUvB,EAAzB,eAIIwB,EAAeC,EAAO,MACtBC,EAAYC,EAAY1B,EAAKuB,GAwBnC,OACEI,EAACC,cAAAC,EAAYC,OAAAC,OAAA,CAAA,EAAAf,GAAcgB,QAAShB,EAAagB,UAC/CL,EAAAC,cAAA,KAAA,CACE5B,IAAKyB,EACLQ,IAAK9B,EACLF,UAAWiC,EAAGC,EAAOC,WAAYnC,EAASoC,EAAAA,EAAAA,EACvCF,GAAAA,EAAO1B,OAASA,GAChB0B,EAAO5B,SAAWA,GAClB4B,EAAOG,qBAAuB3B,IAEjCR,GAAIA,EACJoC,KAAK,MAAK,gBACK9B,EAAM,gBACNF,EAAQ,cACVe,GAAckB,EAAUC,EAAuBC,IAAKvC,GAAG,YACzDwC,EAAgBD,KAG3Bf,EAAAC,cAAA,IAAA,CAAG3B,UAAWiC,EAAGC,EAAOS,SAAU1C,GAAoBW,QAAS,WAAA,OAAON,GAAYM,EAAQR,EAAM,GAxCtG,WACE,IAAKY,EAAM,OAAOI,EAElB,IAAMwB,EACJlB,gBAACmB,EAAI,CACHC,YAAY,EACZ7B,SAAUA,EACVD,KAAMA,EACNhB,UAAWiC,EAAGC,EAAOa,QAASC,EAASd,EAAQf,IAC/C8B,SAAU,GACVC,kBAAgB,IAIdC,EAAgBzB,EAAM0B,SAASC,QAAQjC,GAE7C,MAAiB,SAAbD,EACF,CAAQyB,GAAWU,OAAAC,EAAKJ,IAG1B,GAAAG,OAAAC,EAAWJ,IAAeP,GAC5B,CAoBSY,KAKX"}

package/dist/mocked_classnames/src/components/Tabs/TabList/TabList.js

@@ -1,2 +1,2 @@
-import{slicedToArray as e}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import t from"classnames";import{camelCase as r}from"lodash-es";import s,{forwardRef as a,useRef as o,useState as i,useEffect as n,useMemo as l,useCallback as m}from"react";import d from"../../../hooks/useGridKeyboardNavigation/useGridKeyboardNavigation.js";import u from"../../../hooks/useMergeRef.js";import c from"../../../hooks/usePrevious/index.js";import{NOOP as p}from"../../../utils/function-utils.js";import{getTestId as f,ComponentDefaultTestId as b}from"../../../tests/testIds.js";import{getStyle as v}from"../../../helpers/typesciptCssModulesHelper.js";import h from"./TabList.module.scss.js";var I=a((function(a,I){var C=a.className,g=a.id,N=a.onTabChange,T=void 0===N?p:N,j=a.activeTabId,y=void 0===j?0:j,L=a.tabType,k=void 0===L?"Compact":L,x=a.size,A=a.children,E=a["data-testid"],B=o(null),S=u(I,B),_=i(y),G=e(_,2),H=G[0],K=G[1],M=c(y);n((function(){y!==M&&y!==H&&K(y)}),[y,M,H,K]);var O=l((function(){var e=new Set;return s.Children.forEach(A,(function(t,r){t.props.disabled&&e.add(r)})),e}),[A]),P=m((function(e){O.has(e)||(K(e),T&&T(e))}),[T,O]),W=m((function(e,t){var r,s=null===(r=A[t].props)||void 0===r?void 0:r.onClick;O.has(t)||(s&&s(t),P(t))}),[A,O,P]),w=m((function(e){return A[e]}),[A]),z=l((function(){return Array.from(O)}),[O]),R=o(),q=d({ref:R,numberOfItemsInLine:null==A?void 0:A.length,itemsCount:null==A?void 0:A.length,getItemByIndex:w,onItemClicked:W,disabledIndexes:z,circularNavigation:!0}),D=q.activeIndex,F=q.onSelectionAction,J=l((function(){return s.Children.map(A,(function(e,r){return s.cloneElement(e,{value:r,active:H===r,focus:D===r,onClick:F,className:t(h.tabListTabWrapper,e.props.className),tabInnerClassName:t(h.tabListTabInner,e.props.tabInnerClassName)})}))}),[A,H,D,F]);return s.createElement("div",{ref:S,className:t(h.tabsWrapper,C,[v(h,r(k))]),id:g,"data-testid":E||f(b.TAB_LIST,g)},s.createElement("ul",{ref:R,tabIndex:0,className:t(h.tabsList,[v(h,x)]),role:"tablist"},J))}));Object.assign(I,{isTabList:!0});export{I as default};
+import{slicedToArray as e}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import t from"classnames";import{camelCase as r}from"lodash-es";import s,{forwardRef as o,useRef as a,useState as i,useEffect as n,useMemo as l,useCallback as m}from"react";import d from"../../../hooks/useGridKeyboardNavigation/useGridKeyboardNavigation.js";import u from"../../../hooks/useMergeRef.js";import c from"../../../hooks/usePrevious/index.js";import{NOOP as p}from"../../../utils/function-utils.js";import{getTestId as f,ComponentDefaultTestId as b}from"../../../tests/testIds.js";import{getStyle as v}from"../../../helpers/typesciptCssModulesHelper.js";import h from"./TabList.module.scss.js";var I=o((function(o,I){var C=o.className,T=o.id,g=o.onTabChange,j=void 0===g?p:g,N=o.activeTabId,y=void 0===N?0:N,L=o.tabType,k=void 0===L?"Compact":L,x=o.size,A=o.children,E=o["data-testid"],B=a(null),S=u(I,B),_=i(y),G=e(_,2),H=G[0],K=G[1],M=c(y);n((function(){y!==M&&y!==H&&K(y)}),[y,M,H,K]);var O=l((function(){var e=new Set;return s.Children.forEach(A,(function(t,r){t.props.disabled&&e.add(r)})),e}),[A]),P=m((function(e){O.has(e)||(K(e),j&&j(e))}),[j,O]),W=m((function(e,t){var r,s=null===(r=A[t].props)||void 0===r?void 0:r.onClick;O.has(t)||(s&&s(t),P(t))}),[A,O,P]),w=m((function(e){return A[e]}),[A]),z=l((function(){return Array.from(O)}),[O]),R=a(),q=d({ref:R,numberOfItemsInLine:null==A?void 0:A.length,itemsCount:null==A?void 0:A.length,getItemByIndex:w,onItemClicked:W,disabledIndexes:z}),D=q.activeIndex,F=q.onSelectionAction,J=l((function(){return s.Children.map(A,(function(e,r){return s.cloneElement(e,{value:r,active:H===r,focus:D===r,onClick:F,className:t(h.tabListTabWrapper,e.props.className),tabInnerClassName:t(h.tabListTabInner,e.props.tabInnerClassName)})}))}),[A,H,D,F]);return s.createElement("div",{ref:S,className:t(h.tabsWrapper,C,[v(h,r(k))]),id:T,"data-testid":E||f(b.TAB_LIST,T)},s.createElement("ul",{ref:R,tabIndex:0,className:t(h.tabsList,[v(h,x)]),role:"tablist"},J))}));Object.assign(I,{isTabList:!0});export{I as default};
 //# sourceMappingURL=TabList.js.map

package/dist/mocked_classnames/src/components/Tabs/TabList/TabList.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabList.js","sources":["../../../../../../src/components/Tabs/TabList/TabList.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport { camelCase } from \"lodash-es\";\nimport React, { FC, forwardRef, ReactElement, useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport useGridKeyboardNavigation from \"../../../hooks/useGridKeyboardNavigation/useGridKeyboardNavigation\";\nimport useMergeRef from \"../../../hooks/useMergeRef\";\nimport usePrevious from \"../../../hooks/usePrevious\";\nimport VibeComponentProps from \"../../../types/VibeComponentProps\";\nimport { NOOP } from \"../../../utils/function-utils\";\nimport { TabProps } from \"../Tab/Tab\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../tests/test-ids-utils\";\nimport { getStyle } from \"../../../helpers/typesciptCssModulesHelper\";\nimport styles from \"./TabList.module.scss\";\n\nexport interface TabListProps extends VibeComponentProps {\n  /**\n   * Callback fired when the active tab changes.\n   */\n  onTabChange?: (tabId: number) => void;\n  /**\n   * The index of the currently active tab.\n   */\n  activeTabId?: number;\n  /**\n   * The type of tab style.\n   */\n  tabType?: string;\n  /**\n   * The size of the tab list.\n   */\n  size?: string;\n  /**\n   * The child elements representing tabs.\n   */\n  children?: ReactElement<TabProps>[];\n}\n\nconst TabList: FC<TabListProps> = forwardRef(\n  (\n    {\n      className,\n      id,\n      onTabChange = NOOP,\n      activeTabId = 0,\n      tabType = \"Compact\",\n      size,\n      children,\n      \"data-testid\": dataTestId\n    },\n    ref\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    const [activeTabState, setActiveTabState] = useState<number>(activeTabId);\n\n    const prevActiveTabIdProp = usePrevious(activeTabId);\n\n    useEffect(() => {\n      // Update active tab if changed from props\n      if (activeTabId !== prevActiveTabIdProp && activeTabId !== activeTabState) {\n        setActiveTabState(activeTabId);\n      }\n    }, [activeTabId, prevActiveTabIdProp, activeTabState, setActiveTabState]);\n\n    const disabledTabIds = useMemo(() => {\n      const disabledIds = new Set<number>();\n      React.Children.forEach(children, (child, index) => {\n        if (child.props.disabled) {\n          disabledIds.add(index);\n        }\n      });\n      return disabledIds;\n    }, [children]);\n\n    const onTabSelect = useCallback(\n      (tabId: number) => {\n        if (disabledTabIds.has(tabId)) return;\n        setActiveTabState(tabId);\n        onTabChange && onTabChange(tabId);\n      },\n      [onTabChange, disabledTabIds]\n    );\n\n    const onTabClick = useCallback(\n      (value: HTMLElement | void, tabId: number) => {\n        const tabCallbackFunc = children[tabId].props?.onClick;\n        if (disabledTabIds.has(tabId)) return;\n        if (tabCallbackFunc) tabCallbackFunc(tabId);\n        onTabSelect(tabId);\n      },\n      [children, disabledTabIds, onTabSelect]\n    );\n\n    const getItemByIndex = useCallback((index: number): ReactElement<TabProps> => children[index], [children]);\n    const disabledIndexes = useMemo(() => Array.from(disabledTabIds), [disabledTabIds]);\n    const ulRef = useRef();\n    const { activeIndex: focusIndex, onSelectionAction } = useGridKeyboardNavigation({\n      ref: ulRef,\n      numberOfItemsInLine: children?.length,\n      itemsCount: children?.length,\n      getItemByIndex,\n      onItemClicked: onTabClick,\n      disabledIndexes,\n      circularNavigation: true\n    });\n\n    const tabsToRender = useMemo(() => {\n      const childrenToRender = React.Children.map(children, (child, index) => {\n        return React.cloneElement(child, {\n          value: index,\n          active: activeTabState === index,\n          focus: focusIndex === index,\n          onClick: onSelectionAction,\n          className: cx(styles.tabListTabWrapper, child.props.className),\n          tabInnerClassName: cx(styles.tabListTabInner, child.props.tabInnerClassName)\n        });\n      });\n      return childrenToRender;\n    }, [children, activeTabState, focusIndex, onSelectionAction]);\n\n    return (\n      <div\n        ref={mergedRef}\n        className={cx(styles.tabsWrapper, className, [getStyle(styles, camelCase(tabType))])}\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.TAB_LIST, id)}\n      >\n        <ul ref={ulRef} tabIndex={0} className={cx(styles.tabsList, [getStyle(styles, size)])} role=\"tablist\">\n          {tabsToRender}\n        </ul>\n      </div>\n    );\n  }\n);\n\nObject.assign(TabList, {\n  isTabList: true\n});\n\nexport default TabList;\n"],"names":["TabList","forwardRef","_ref","ref","className","id","_ref$onTabChange","onTabChange","NOOP","_ref$activeTabId","activeTabId","_ref$tabType","tabType","size","children","dataTestId","componentRef","useRef","mergedRef","useMergeRef","_useState","useState","_useState2","_slicedToArray","activeTabState","setActiveTabState","prevActiveTabIdProp","usePrevious","useEffect","disabledTabIds","useMemo","disabledIds","Set","React","Children","forEach","child","index","props","disabled","add","onTabSelect","useCallback","tabId","has","onTabClick","value","tabCallbackFunc","_a","onClick","getItemByIndex","disabledIndexes","Array","from","ulRef","_useGridKeyboardNavig","useGridKeyboardNavigation","numberOfItemsInLine","length","itemsCount","onItemClicked","circularNavigation","focusIndex","activeIndex","onSelectionAction","tabsToRender","map","cloneElement","active","focus","cx","styles","tabListTabWrapper","tabInnerClassName","tabListTabInner","createElement","tabsWrapper","getStyle","camelCase","getTestId","ComponentDefaultTestId","TAB_LIST","tabIndex","tabsList","role","Object","assign","isTabList"],"mappings":"+qBAoCMA,IAAAA,EAA4BC,GAChC,SAAAC,EAWEC,GACE,IAVAC,EAASF,EAATE,UACAC,EAAEH,EAAFG,GAAEC,EAAAJ,EACFK,YAAAA,OAAcC,IAAHF,EAAGE,EAAIF,EAAAG,EAAAP,EAClBQ,YAAAA,OAAc,IAAHD,EAAG,EAACA,EAAAE,EAAAT,EACfU,QAAAA,OAAU,IAAHD,EAAG,UAASA,EACnBE,EAAIX,EAAJW,KACAC,EAAQZ,EAARY,SACeC,EAAUb,EAAzB,eAIIc,EAAeC,EAAO,MACtBC,EAAYC,EAAYhB,EAAKa,GAEnCI,EAA4CC,EAAiBX,GAAYY,EAAAC,EAAAH,EAAA,GAAlEI,EAAcF,EAAA,GAAEG,EAAiBH,EAAA,GAElCI,EAAsBC,EAAYjB,GAExCkB,GAAU,WAEJlB,IAAgBgB,GAAuBhB,IAAgBc,GACzDC,EAAkBf,EAErB,GAAE,CAACA,EAAagB,EAAqBF,EAAgBC,IAEtD,IAAMI,EAAiBC,GAAQ,WAC7B,IAAMC,EAAc,IAAIC,IAMxB,OALAC,EAAMC,SAASC,QAAQrB,GAAU,SAACsB,EAAOC,GACnCD,EAAME,MAAMC,UACdR,EAAYS,IAAIH,EAEpB,IACON,CACT,GAAG,CAACjB,IAEE2B,EAAcC,GAClB,SAACC,GACKd,EAAee,IAAID,KACvBlB,EAAkBkB,GAClBpC,GAAeA,EAAYoC,GAC7B,GACA,CAACpC,EAAasB,IAGVgB,EAAaH,GACjB,SAACI,EAA2BH,SACpBI,EAAyC,QAAvBC,EAAAlC,EAAS6B,GAAOL,aAAO,IAAAU,OAAA,EAAAA,EAAAC,QAC3CpB,EAAee,IAAID,KACnBI,GAAiBA,EAAgBJ,GACrCF,EAAYE,GACb,GACD,CAAC7B,EAAUe,EAAgBY,IAGvBS,EAAiBR,GAAY,SAACL,GAAa,OAA6BvB,EAASuB,KAAQ,CAACvB,IAC1FqC,EAAkBrB,GAAQ,WAAA,OAAMsB,MAAMC,KAAKxB,KAAiB,CAACA,IAC7DyB,EAAQrC,IACdsC,EAAuDC,EAA0B,CAC/ErD,IAAKmD,EACLG,oBAAqB3C,aAAA,EAAAA,EAAU4C,OAC/BC,WAAY7C,aAAA,EAAAA,EAAU4C,OACtBR,eAAAA,EACAU,cAAef,EACfM,gBAAAA,EACAU,oBAAoB,IAPDC,EAAUP,EAAvBQ,YAAyBC,EAAiBT,EAAjBS,kBAU3BC,EAAenC,GAAQ,WAW3B,OAVyBG,EAAMC,SAASgC,IAAIpD,GAAU,SAACsB,EAAOC,GAC5D,OAAOJ,EAAMkC,aAAa/B,EAAO,CAC/BU,MAAOT,EACP+B,OAAQ5C,IAAmBa,EAC3BgC,MAAOP,IAAezB,EACtBY,QAASe,EACT5D,UAAWkE,EAAGC,EAAOC,kBAAmBpC,EAAME,MAAMlC,WACpDqE,kBAAmBH,EAAGC,EAAOG,gBAAiBtC,EAAME,MAAMmC,oBAE9D,GAED,GAAE,CAAC3D,EAAUU,EAAgBsC,EAAYE,IAE1C,OACE/B,EACE0C,cAAA,MAAA,CAAAxE,IAAKe,EACLd,UAAWkE,EAAGC,EAAOK,YAAaxE,EAAW,CAACyE,EAASN,EAAQO,EAAUlE,MACzEP,GAAIA,gBACSU,GAAcgE,EAAUC,EAAuBC,SAAU5E,IAEtE4B,EAAA0C,cAAA,KAAA,CAAIxE,IAAKmD,EAAO4B,SAAU,EAAG9E,UAAWkE,EAAGC,EAAOY,SAAU,CAACN,EAASN,EAAQ1D,KAASuE,KAAK,WACzFnB,GAIT,IAGFoB,OAAOC,OAAOtF,EAAS,CACrBuF,WAAW"}
+{"version":3,"file":"TabList.js","sources":["../../../../../../src/components/Tabs/TabList/TabList.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport { camelCase } from \"lodash-es\";\nimport React, { FC, forwardRef, ReactElement, useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport useGridKeyboardNavigation from \"../../../hooks/useGridKeyboardNavigation/useGridKeyboardNavigation\";\nimport useMergeRef from \"../../../hooks/useMergeRef\";\nimport usePrevious from \"../../../hooks/usePrevious\";\nimport VibeComponentProps from \"../../../types/VibeComponentProps\";\nimport { NOOP } from \"../../../utils/function-utils\";\nimport { TabProps } from \"../Tab/Tab\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../tests/test-ids-utils\";\nimport { getStyle } from \"../../../helpers/typesciptCssModulesHelper\";\nimport styles from \"./TabList.module.scss\";\n\nexport interface TabListProps extends VibeComponentProps {\n  /**\n   * Callback fired when the active tab changes.\n   */\n  onTabChange?: (tabId: number) => void;\n  /**\n   * The index of the currently active tab.\n   */\n  activeTabId?: number;\n  /**\n   * The type of tab style.\n   */\n  tabType?: string;\n  /**\n   * The size of the tab list.\n   */\n  size?: string;\n  /**\n   * The child elements representing tabs.\n   */\n  children?: ReactElement<TabProps>[];\n}\n\nconst TabList: FC<TabListProps> = forwardRef(\n  (\n    {\n      className,\n      id,\n      onTabChange = NOOP,\n      activeTabId = 0,\n      tabType = \"Compact\",\n      size,\n      children,\n      \"data-testid\": dataTestId\n    },\n    ref\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    const [activeTabState, setActiveTabState] = useState<number>(activeTabId);\n\n    const prevActiveTabIdProp = usePrevious(activeTabId);\n\n    useEffect(() => {\n      // Update active tab if changed from props\n      if (activeTabId !== prevActiveTabIdProp && activeTabId !== activeTabState) {\n        setActiveTabState(activeTabId);\n      }\n    }, [activeTabId, prevActiveTabIdProp, activeTabState, setActiveTabState]);\n\n    const disabledTabIds = useMemo(() => {\n      const disabledIds = new Set<number>();\n      React.Children.forEach(children, (child, index) => {\n        if (child.props.disabled) {\n          disabledIds.add(index);\n        }\n      });\n      return disabledIds;\n    }, [children]);\n\n    const onTabSelect = useCallback(\n      (tabId: number) => {\n        if (disabledTabIds.has(tabId)) return;\n        setActiveTabState(tabId);\n        onTabChange && onTabChange(tabId);\n      },\n      [onTabChange, disabledTabIds]\n    );\n\n    const onTabClick = useCallback(\n      (value: HTMLElement | void, tabId: number) => {\n        const tabCallbackFunc = children[tabId].props?.onClick;\n        if (disabledTabIds.has(tabId)) return;\n        if (tabCallbackFunc) tabCallbackFunc(tabId);\n        onTabSelect(tabId);\n      },\n      [children, disabledTabIds, onTabSelect]\n    );\n\n    const getItemByIndex = useCallback((index: number): ReactElement<TabProps> => children[index], [children]);\n    const disabledIndexes = useMemo(() => Array.from(disabledTabIds), [disabledTabIds]);\n    const ulRef = useRef();\n    const { activeIndex: focusIndex, onSelectionAction } = useGridKeyboardNavigation({\n      ref: ulRef,\n      numberOfItemsInLine: children?.length,\n      itemsCount: children?.length,\n      getItemByIndex,\n      onItemClicked: onTabClick,\n      disabledIndexes\n    });\n\n    const tabsToRender = useMemo(() => {\n      const childrenToRender = React.Children.map(children, (child, index) => {\n        return React.cloneElement(child, {\n          value: index,\n          active: activeTabState === index,\n          focus: focusIndex === index,\n          onClick: onSelectionAction,\n          className: cx(styles.tabListTabWrapper, child.props.className),\n          tabInnerClassName: cx(styles.tabListTabInner, child.props.tabInnerClassName)\n        });\n      });\n      return childrenToRender;\n    }, [children, activeTabState, focusIndex, onSelectionAction]);\n\n    return (\n      <div\n        ref={mergedRef}\n        className={cx(styles.tabsWrapper, className, [getStyle(styles, camelCase(tabType))])}\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.TAB_LIST, id)}\n      >\n        <ul ref={ulRef} tabIndex={0} className={cx(styles.tabsList, [getStyle(styles, size)])} role=\"tablist\">\n          {tabsToRender}\n        </ul>\n      </div>\n    );\n  }\n);\n\nObject.assign(TabList, {\n  isTabList: true\n});\n\nexport default TabList;\n"],"names":["TabList","forwardRef","_ref","ref","className","id","_ref$onTabChange","onTabChange","NOOP","_ref$activeTabId","activeTabId","_ref$tabType","tabType","size","children","dataTestId","componentRef","useRef","mergedRef","useMergeRef","_useState","useState","_useState2","_slicedToArray","activeTabState","setActiveTabState","prevActiveTabIdProp","usePrevious","useEffect","disabledTabIds","useMemo","disabledIds","Set","React","Children","forEach","child","index","props","disabled","add","onTabSelect","useCallback","tabId","has","onTabClick","value","tabCallbackFunc","_a","onClick","getItemByIndex","disabledIndexes","Array","from","ulRef","_useGridKeyboardNavig","useGridKeyboardNavigation","numberOfItemsInLine","length","itemsCount","onItemClicked","focusIndex","activeIndex","onSelectionAction","tabsToRender","map","cloneElement","active","focus","cx","styles","tabListTabWrapper","tabInnerClassName","tabListTabInner","createElement","tabsWrapper","getStyle","camelCase","getTestId","ComponentDefaultTestId","TAB_LIST","tabIndex","tabsList","role","Object","assign","isTabList"],"mappings":"+qBAoCMA,IAAAA,EAA4BC,GAChC,SAAAC,EAWEC,GACE,IAVAC,EAASF,EAATE,UACAC,EAAEH,EAAFG,GAAEC,EAAAJ,EACFK,YAAAA,OAAcC,IAAHF,EAAGE,EAAIF,EAAAG,EAAAP,EAClBQ,YAAAA,OAAc,IAAHD,EAAG,EAACA,EAAAE,EAAAT,EACfU,QAAAA,OAAU,IAAHD,EAAG,UAASA,EACnBE,EAAIX,EAAJW,KACAC,EAAQZ,EAARY,SACeC,EAAUb,EAAzB,eAIIc,EAAeC,EAAO,MACtBC,EAAYC,EAAYhB,EAAKa,GAEnCI,EAA4CC,EAAiBX,GAAYY,EAAAC,EAAAH,EAAA,GAAlEI,EAAcF,EAAA,GAAEG,EAAiBH,EAAA,GAElCI,EAAsBC,EAAYjB,GAExCkB,GAAU,WAEJlB,IAAgBgB,GAAuBhB,IAAgBc,GACzDC,EAAkBf,EAErB,GAAE,CAACA,EAAagB,EAAqBF,EAAgBC,IAEtD,IAAMI,EAAiBC,GAAQ,WAC7B,IAAMC,EAAc,IAAIC,IAMxB,OALAC,EAAMC,SAASC,QAAQrB,GAAU,SAACsB,EAAOC,GACnCD,EAAME,MAAMC,UACdR,EAAYS,IAAIH,EAEpB,IACON,CACT,GAAG,CAACjB,IAEE2B,EAAcC,GAClB,SAACC,GACKd,EAAee,IAAID,KACvBlB,EAAkBkB,GAClBpC,GAAeA,EAAYoC,GAC7B,GACA,CAACpC,EAAasB,IAGVgB,EAAaH,GACjB,SAACI,EAA2BH,SACpBI,EAAyC,QAAvBC,EAAAlC,EAAS6B,GAAOL,aAAO,IAAAU,OAAA,EAAAA,EAAAC,QAC3CpB,EAAee,IAAID,KACnBI,GAAiBA,EAAgBJ,GACrCF,EAAYE,GACb,GACD,CAAC7B,EAAUe,EAAgBY,IAGvBS,EAAiBR,GAAY,SAACL,GAAa,OAA6BvB,EAASuB,KAAQ,CAACvB,IAC1FqC,EAAkBrB,GAAQ,WAAA,OAAMsB,MAAMC,KAAKxB,KAAiB,CAACA,IAC7DyB,EAAQrC,IACdsC,EAAuDC,EAA0B,CAC/ErD,IAAKmD,EACLG,oBAAqB3C,aAAA,EAAAA,EAAU4C,OAC/BC,WAAY7C,aAAA,EAAAA,EAAU4C,OACtBR,eAAAA,EACAU,cAAef,EACfM,gBAAAA,IANmBU,EAAUN,EAAvBO,YAAyBC,EAAiBR,EAAjBQ,kBAS3BC,EAAelC,GAAQ,WAW3B,OAVyBG,EAAMC,SAAS+B,IAAInD,GAAU,SAACsB,EAAOC,GAC5D,OAAOJ,EAAMiC,aAAa9B,EAAO,CAC/BU,MAAOT,EACP8B,OAAQ3C,IAAmBa,EAC3B+B,MAAOP,IAAexB,EACtBY,QAASc,EACT3D,UAAWiE,EAAGC,EAAOC,kBAAmBnC,EAAME,MAAMlC,WACpDoE,kBAAmBH,EAAGC,EAAOG,gBAAiBrC,EAAME,MAAMkC,oBAE9D,GAED,GAAE,CAAC1D,EAAUU,EAAgBqC,EAAYE,IAE1C,OACE9B,EACEyC,cAAA,MAAA,CAAAvE,IAAKe,EACLd,UAAWiE,EAAGC,EAAOK,YAAavE,EAAW,CAACwE,EAASN,EAAQO,EAAUjE,MACzEP,GAAIA,gBACSU,GAAc+D,EAAUC,EAAuBC,SAAU3E,IAEtE4B,EAAAyC,cAAA,KAAA,CAAIvE,IAAKmD,EAAO2B,SAAU,EAAG7E,UAAWiE,EAAGC,EAAOY,SAAU,CAACN,EAASN,EAAQzD,KAASsE,KAAK,WACzFnB,GAIT,IAGFoB,OAAOC,OAAOrF,EAAS,CACrBsF,WAAW"}

package/dist/mocked_classnames/src/hooks/useGridKeyboardNavigation/gridKeyboardNavigationHelper.js

@@ -1,2 +1,2 @@
-import{NavDirections as n}from"../useFullKeyboardListeners.js";function e(e){var t=e.direction,i=e.numberOfItemsInLine,r=e.itemsCount,u=function(){var e=Math.floor(i/2);if(t===n.UP)return(Math.ceil(r/i)-1)*i+e;if(t===n.DOWN)return e;if(t===n.LEFT){for(var u=i-1,o=Math.floor((r-1)/2);o>u;)u+=i;return u}if(t===n.RIGHT){for(var a=0,c=Math.floor((r-1)/2);c>a+i;)a+=i;return a}}();return Math.max(0,Math.min(u,r-1))}function t(e){var t=e.activeIndex,i=e.itemsCount,r=e.numberOfItemsInLine,u=e.circularNavigation,o=void 0!==u&&u,a=function(n){return Math.ceil((n+1)/r)},c=function(n){var e=t+(n?1:-1);if(0>e||e>=i){if(!o)return{isOutbound:!0};0>e?e=i-1:i>e||(e=0)}return a(t)!==a(e)?{isOutbound:!0}:{isOutbound:!1,nextIndex:e}},s=function(n){var e=t+r*(n?1:-1);return 0>e||e>=i?{isOutbound:!0}:{isOutbound:!1,nextIndex:e}};switch(e.direction){case n.RIGHT:return c(!0);case n.LEFT:return c(!1);case n.DOWN:return s(!0);case n.UP:return s(!1)}}function i(n){for(var e=n.itemsCount,i=n.numberOfItemsInLine,r=n.direction,u=n.disabledIndexes,o=void 0===u?[]:u,a=n.circularNavigation,c=void 0!==a&&a,s=t({activeIndex:n.activeIndex,itemsCount:e,numberOfItemsInLine:i,direction:r,circularNavigation:c});!s.isOutbound&&o.includes(s.nextIndex);)s=t({activeIndex:s.nextIndex,itemsCount:e,numberOfItemsInLine:i,direction:r,circularNavigation:c});return s}export{i as calcActiveIndexAfterArrowNavigation,e as getActiveIndexFromInboundNavigation};
+import{NavDirections as n}from"../useFullKeyboardListeners.js";function e(e){var t=e.direction,r=e.numberOfItemsInLine,i=e.itemsCount,u=function(){var e=Math.floor(r/2);if(t===n.UP)return(Math.ceil(i/r)-1)*r+e;if(t===n.DOWN)return e;if(t===n.LEFT){for(var u=r-1,o=Math.floor((i-1)/2);o>u;)u+=r;return u}if(t===n.RIGHT){for(var s=0,a=Math.floor((i-1)/2);a>s+r;)s+=r;return s}}();return Math.max(0,Math.min(u,i-1))}function t(e){var t=e.activeIndex,r=e.itemsCount,i=e.numberOfItemsInLine,u=function(n){return Math.ceil((n+1)/i)},o=function(n){var e=t+(n?1:-1);return 0>e||e>=r||u(t)!==u(e)?{isOutbound:!0}:{isOutbound:!1,nextIndex:e}},s=function(n){var e=t+i*(n?1:-1);return 0>e||e>=r?{isOutbound:!0}:{isOutbound:!1,nextIndex:e}};switch(e.direction){case n.RIGHT:return o(!0);case n.LEFT:return o(!1);case n.DOWN:return s(!0);case n.UP:return s(!1)}}function r(n){for(var e=n.itemsCount,r=n.numberOfItemsInLine,i=n.direction,u=n.disabledIndexes,o=void 0===u?[]:u,s=t({activeIndex:n.activeIndex,itemsCount:e,numberOfItemsInLine:r,direction:i});!s.isOutbound&&o.includes(s.nextIndex);)s=t({activeIndex:s.nextIndex,itemsCount:e,numberOfItemsInLine:r,direction:i});return s}export{r as calcActiveIndexAfterArrowNavigation,e as getActiveIndexFromInboundNavigation};
 //# sourceMappingURL=gridKeyboardNavigationHelper.js.map

package/dist/mocked_classnames/src/hooks/useGridKeyboardNavigation/gridKeyboardNavigationHelper.js.map

@@ -1 +1 @@
-{"version":3,"file":"gridKeyboardNavigationHelper.js","sources":["../../../../../src/hooks/useGridKeyboardNavigation/gridKeyboardNavigationHelper.ts"],"sourcesContent":["import { NavDirections } from \"../useFullKeyboardListeners\";\n\nexport function getActiveIndexFromInboundNavigation({\n  direction,\n  numberOfItemsInLine,\n  itemsCount\n}: {\n  direction: NavDirections;\n  numberOfItemsInLine: number;\n  itemsCount: number;\n}) {\n  const getRawIndex = () => {\n    const firstLineMiddleIndex = Math.floor(numberOfItemsInLine / 2);\n    if (direction === NavDirections.UP) {\n      // last line, middle\n      const rowCount = Math.ceil(itemsCount / numberOfItemsInLine);\n      return (rowCount - 1) * numberOfItemsInLine + firstLineMiddleIndex;\n    }\n    if (direction === NavDirections.DOWN) {\n      // first line, middle\n      return firstLineMiddleIndex;\n    }\n    if (direction === NavDirections.LEFT) {\n      // middle line, last item\n      let result = numberOfItemsInLine - 1;\n      const midIndex = Math.floor((itemsCount - 1) / 2);\n      while (result < midIndex) {\n        result += numberOfItemsInLine;\n      }\n      return result;\n    }\n    if (direction === NavDirections.RIGHT) {\n      // middle line, first item\n      let result = 0;\n      const midIndex = Math.floor((itemsCount - 1) / 2);\n      while (result + numberOfItemsInLine < midIndex) {\n        result += numberOfItemsInLine;\n      }\n      return result;\n    }\n  };\n\n  const rawIndex = getRawIndex();\n  return Math.max(0, Math.min(rawIndex, itemsCount - 1));\n}\n\nfunction calcRawNewIndexAfterArrowNavigation({\n  activeIndex,\n  itemsCount,\n  numberOfItemsInLine,\n  direction,\n  circularNavigation = false\n}: {\n  activeIndex: number;\n  itemsCount: number;\n  numberOfItemsInLine: number;\n  direction: NavDirections;\n  circularNavigation?: boolean;\n}) {\n  const getIndexLine = (index: number) => Math.ceil((index + 1) / numberOfItemsInLine);\n\n  const horizontalChange = (isIndexIncrease: boolean) => {\n    let nextIndex = activeIndex + (isIndexIncrease ? 1 : -1);\n\n    if (nextIndex < 0 || nextIndex >= itemsCount) {\n      if (circularNavigation) {\n        if (nextIndex < 0) {\n          nextIndex = itemsCount - 1;\n        } else if (nextIndex >= itemsCount) {\n          nextIndex = 0;\n        }\n      } else {\n        return { isOutbound: true };\n      }\n    }\n\n    const currentLine = getIndexLine(activeIndex);\n    const nextIndexLine = getIndexLine(nextIndex);\n    if (currentLine !== nextIndexLine) {\n      return { isOutbound: true };\n    }\n\n    return { isOutbound: false, nextIndex };\n  };\n\n  const verticalChange = (isIndexIncrease: boolean) => {\n    const nextIndex = activeIndex + numberOfItemsInLine * (isIndexIncrease ? 1 : -1);\n    if (nextIndex < 0 || itemsCount <= nextIndex) {\n      return { isOutbound: true };\n    }\n    return { isOutbound: false, nextIndex };\n  };\n\n  switch (direction) {\n    case NavDirections.RIGHT:\n      return horizontalChange(true);\n    case NavDirections.LEFT:\n      return horizontalChange(false);\n    case NavDirections.DOWN:\n      return verticalChange(true);\n    case NavDirections.UP:\n      return verticalChange(false);\n  }\n}\n\nexport function calcActiveIndexAfterArrowNavigation({\n  activeIndex,\n  itemsCount,\n  numberOfItemsInLine,\n  direction,\n  disabledIndexes = [],\n  circularNavigation = false\n}: {\n  activeIndex: number;\n  itemsCount: number;\n  numberOfItemsInLine: number;\n  direction: NavDirections;\n  disabledIndexes?: number[];\n  circularNavigation?: boolean;\n}) {\n  let result = calcRawNewIndexAfterArrowNavigation({\n    activeIndex,\n    itemsCount,\n    numberOfItemsInLine,\n    direction,\n    circularNavigation\n  });\n  while (!result.isOutbound && disabledIndexes.includes(result.nextIndex)) {\n    result = calcRawNewIndexAfterArrowNavigation({\n      activeIndex: result.nextIndex,\n      itemsCount,\n      numberOfItemsInLine,\n      direction,\n      circularNavigation\n    });\n  }\n\n  return result;\n}\n"],"names":["getActiveIndexFromInboundNavigation","_ref","direction","numberOfItemsInLine","itemsCount","rawIndex","firstLineMiddleIndex","Math","floor","NavDirections","UP","ceil","DOWN","LEFT","result","midIndex","RIGHT","getRawIndex","max","min","calcRawNewIndexAfterArrowNavigation","_ref2","activeIndex","_ref2$circularNavigat","circularNavigation","getIndexLine","index","horizontalChange","isIndexIncrease","nextIndex","isOutbound","verticalChange","calcActiveIndexAfterArrowNavigation","_ref3","_ref3$disabledIndexes","disabledIndexes","_ref3$circularNavigat","includes"],"mappings":"+DAEM,SAAUA,EAAmCC,GAQlD,IAPCC,EAASD,EAATC,UACAC,EAAmBF,EAAnBE,oBACAC,EAAUH,EAAVG,WAqCMC,EA/Bc,WAClB,IAAMC,EAAuBC,KAAKC,MAAML,EAAsB,GAC9D,GAAID,IAAcO,EAAcC,GAG9B,OADiBH,KAAKI,KAAKP,EAAaD,GACrB,GAAKA,EAAsBG,EAEhD,GAAIJ,IAAcO,EAAcG,KAE9B,OAAON,EAET,GAAIJ,IAAcO,EAAcI,KAAM,CAIpC,IAFA,IAAIC,EAASX,EAAsB,EAC7BY,EAAWR,KAAKC,OAAOJ,EAAa,GAAK,GAC/BW,EAATD,GACLA,GAAUX,EAEZ,OAAOW,CACR,CACD,GAAIZ,IAAcO,EAAcO,MAAO,CAIrC,IAFA,IAAIF,EAAS,EACPC,EAAWR,KAAKC,OAAOJ,EAAa,GAAK,GACTW,EAA/BD,EAASX,GACdW,GAAUX,EAEZ,OAAOW,CACR,EAGcG,GACjB,OAAOV,KAAKW,IAAI,EAAGX,KAAKY,IAAId,EAAUD,EAAa,GACrD,CAEA,SAASgB,EAAmCC,GAY3C,IAXCC,EAAWD,EAAXC,YACAlB,EAAUiB,EAAVjB,WACAD,EAAmBkB,EAAnBlB,oBACSoB,EAAAF,EACTG,mBAAAA,OAAqB,IAAHD,GAAQA,EAQpBE,EAAe,SAACC,GAAa,OAAKnB,KAAKI,MAAMe,EAAQ,GAAKvB,EAAoB,EAE9EwB,EAAmB,SAACC,GACxB,IAAIC,EAAYP,GAAeM,EAAkB,GAAK,GAEtD,GAAgB,EAAZC,GAAiBA,GAAazB,EAAY,CAC5C,IAAIoB,EAOF,MAAO,CAAEM,YAAY,GANL,EAAZD,EACFA,EAAYzB,EAAa,EACHA,EAAbyB,IACTA,EAAY,EAKjB,CAID,OAFoBJ,EAAaH,KACXG,EAAaI,GAE1B,CAAEC,YAAY,GAGhB,CAAEA,YAAY,EAAOD,UAAAA,IAGxBE,EAAiB,SAACH,GACtB,IAAMC,EAAYP,EAAcnB,GAAuByB,EAAkB,GAAK,GAC9E,OAAgB,EAAZC,GAA+BA,GAAdzB,EACZ,CAAE0B,YAAY,GAEhB,CAAEA,YAAY,EAAOD,UAAAA,IAG9B,OA3CSR,EAATnB,WA4CE,KAAKO,EAAcO,MACjB,OAAOW,GAAiB,GAC1B,KAAKlB,EAAcI,KACjB,OAAOc,GAAiB,GAC1B,KAAKlB,EAAcG,KACjB,OAAOmB,GAAe,GACxB,KAAKtB,EAAcC,GACjB,OAAOqB,GAAe,GAE5B,UAEgBC,EAAmCC,GAsBjD,IARD,IAZC7B,EAAU6B,EAAV7B,WACAD,EAAmB8B,EAAnB9B,oBACAD,EAAS+B,EAAT/B,UAASgC,EAAAD,EACTE,gBAAAA,OAAkB,IAAHD,EAAG,GAAEA,EAAAE,EAAAH,EACpBT,mBAAAA,OAAqB,IAAHY,GAAQA,EAStBtB,EAASM,EAAoC,CAC/CE,YAfSW,EAAXX,YAgBElB,WAAAA,EACAD,oBAAAA,EACAD,UAAAA,EACAsB,mBAAAA,KAEMV,EAAOgB,YAAcK,EAAgBE,SAASvB,EAAOe,YAC3Df,EAASM,EAAoC,CAC3CE,YAAaR,EAAOe,UACpBzB,WAAAA,EACAD,oBAAAA,EACAD,UAAAA,EACAsB,mBAAAA,IAIJ,OAAOV,CACT"}
+{"version":3,"file":"gridKeyboardNavigationHelper.js","sources":["../../../../../src/hooks/useGridKeyboardNavigation/gridKeyboardNavigationHelper.ts"],"sourcesContent":["import { NavDirections } from \"../useFullKeyboardListeners\";\n\nexport function getActiveIndexFromInboundNavigation({\n  direction,\n  numberOfItemsInLine,\n  itemsCount\n}: {\n  direction: NavDirections;\n  numberOfItemsInLine: number;\n  itemsCount: number;\n}) {\n  const getRawIndex = () => {\n    const firstLineMiddleIndex = Math.floor(numberOfItemsInLine / 2);\n    if (direction === NavDirections.UP) {\n      // last line, middle\n      const rowCount = Math.ceil(itemsCount / numberOfItemsInLine);\n      return (rowCount - 1) * numberOfItemsInLine + firstLineMiddleIndex;\n    }\n    if (direction === NavDirections.DOWN) {\n      // first line, middle\n      return firstLineMiddleIndex;\n    }\n    if (direction === NavDirections.LEFT) {\n      // middle line, last item\n      let result = numberOfItemsInLine - 1;\n      const midIndex = Math.floor((itemsCount - 1) / 2);\n      while (result < midIndex) {\n        result += numberOfItemsInLine;\n      }\n      return result;\n    }\n    if (direction === NavDirections.RIGHT) {\n      // middle line, first item\n      let result = 0;\n      const midIndex = Math.floor((itemsCount - 1) / 2);\n      while (result + numberOfItemsInLine < midIndex) {\n        result += numberOfItemsInLine;\n      }\n      return result;\n    }\n  };\n\n  const rawIndex = getRawIndex();\n  return Math.max(0, Math.min(rawIndex, itemsCount - 1));\n}\n\nfunction calcRawNewIndexAfterArrowNavigation({\n  activeIndex,\n  itemsCount,\n  numberOfItemsInLine,\n  direction\n}: {\n  activeIndex: number;\n  itemsCount: number;\n  numberOfItemsInLine: number;\n  direction: NavDirections;\n}) {\n  const getIndexLine = (index: number) => Math.ceil((index + 1) / numberOfItemsInLine);\n\n  const horizontalChange = (isIndexIncrease: boolean) => {\n    const nextIndex = activeIndex + (isIndexIncrease ? 1 : -1);\n    if (nextIndex < 0 || itemsCount <= nextIndex) {\n      return { isOutbound: true };\n    }\n    const currentLine = getIndexLine(activeIndex);\n    const nextIndexLine = getIndexLine(nextIndex);\n    if (currentLine !== nextIndexLine) {\n      return { isOutbound: true };\n    }\n\n    return { isOutbound: false, nextIndex };\n  };\n\n  const verticalChange = (isIndexIncrease: boolean) => {\n    const nextIndex = activeIndex + numberOfItemsInLine * (isIndexIncrease ? 1 : -1);\n    if (nextIndex < 0 || itemsCount <= nextIndex) {\n      return { isOutbound: true };\n    }\n    return { isOutbound: false, nextIndex };\n  };\n\n  switch (direction) {\n    case NavDirections.RIGHT:\n      return horizontalChange(true);\n    case NavDirections.LEFT:\n      return horizontalChange(false);\n    case NavDirections.DOWN:\n      return verticalChange(true);\n    case NavDirections.UP:\n      return verticalChange(false);\n  }\n}\n\nexport function calcActiveIndexAfterArrowNavigation({\n  activeIndex,\n  itemsCount,\n  numberOfItemsInLine,\n  direction,\n  disabledIndexes = []\n}: {\n  activeIndex: number;\n  itemsCount: number;\n  numberOfItemsInLine: number;\n  direction: NavDirections;\n  disabledIndexes?: number[];\n}) {\n  let result = calcRawNewIndexAfterArrowNavigation({ activeIndex, itemsCount, numberOfItemsInLine, direction });\n  while (!result.isOutbound && disabledIndexes.includes(result.nextIndex)) {\n    result = calcRawNewIndexAfterArrowNavigation({\n      activeIndex: result.nextIndex,\n      itemsCount,\n      numberOfItemsInLine,\n      direction\n    });\n  }\n\n  return result;\n}\n"],"names":["getActiveIndexFromInboundNavigation","_ref","direction","numberOfItemsInLine","itemsCount","rawIndex","firstLineMiddleIndex","Math","floor","NavDirections","UP","ceil","DOWN","LEFT","result","midIndex","RIGHT","getRawIndex","max","min","calcRawNewIndexAfterArrowNavigation","_ref2","activeIndex","getIndexLine","index","horizontalChange","isIndexIncrease","nextIndex","isOutbound","verticalChange","calcActiveIndexAfterArrowNavigation","_ref3","_ref3$disabledIndexes","disabledIndexes","includes"],"mappings":"+DAEM,SAAUA,EAAmCC,GAQlD,IAPCC,EAASD,EAATC,UACAC,EAAmBF,EAAnBE,oBACAC,EAAUH,EAAVG,WAqCMC,EA/Bc,WAClB,IAAMC,EAAuBC,KAAKC,MAAML,EAAsB,GAC9D,GAAID,IAAcO,EAAcC,GAG9B,OADiBH,KAAKI,KAAKP,EAAaD,GACrB,GAAKA,EAAsBG,EAEhD,GAAIJ,IAAcO,EAAcG,KAE9B,OAAON,EAET,GAAIJ,IAAcO,EAAcI,KAAM,CAIpC,IAFA,IAAIC,EAASX,EAAsB,EAC7BY,EAAWR,KAAKC,OAAOJ,EAAa,GAAK,GAC/BW,EAATD,GACLA,GAAUX,EAEZ,OAAOW,CACR,CACD,GAAIZ,IAAcO,EAAcO,MAAO,CAIrC,IAFA,IAAIF,EAAS,EACPC,EAAWR,KAAKC,OAAOJ,EAAa,GAAK,GACTW,EAA/BD,EAASX,GACdW,GAAUX,EAEZ,OAAOW,CACR,EAGcG,GACjB,OAAOV,KAAKW,IAAI,EAAGX,KAAKY,IAAId,EAAUD,EAAa,GACrD,CAEA,SAASgB,EAAmCC,GAU3C,IATCC,EAAWD,EAAXC,YACAlB,EAAUiB,EAAVjB,WACAD,EAAmBkB,EAAnBlB,oBAQMoB,EAAe,SAACC,GAAa,OAAKjB,KAAKI,MAAMa,EAAQ,GAAKrB,EAAoB,EAE9EsB,EAAmB,SAACC,GACxB,IAAMC,EAAYL,GAAeI,EAAkB,GAAK,GACxD,OAAgB,EAAZC,GAA+BA,GAAdvB,GAGDmB,EAAaD,KACXC,EAAaI,GAH1B,CAAEC,YAAY,GAQhB,CAAEA,YAAY,EAAOD,UAAAA,IAGxBE,EAAiB,SAACH,GACtB,IAAMC,EAAYL,EAAcnB,GAAuBuB,EAAkB,GAAK,GAC9E,OAAgB,EAAZC,GAA+BA,GAAdvB,EACZ,CAAEwB,YAAY,GAEhB,CAAEA,YAAY,EAAOD,UAAAA,IAG9B,OA/BSN,EAATnB,WAgCE,KAAKO,EAAcO,MACjB,OAAOS,GAAiB,GAC1B,KAAKhB,EAAcI,KACjB,OAAOY,GAAiB,GAC1B,KAAKhB,EAAcG,KACjB,OAAOiB,GAAe,GACxB,KAAKpB,EAAcC,GACjB,OAAOmB,GAAe,GAE5B,CAEgB,SAAAC,EAAmCC,GAcjD,IAFD,IAVC3B,EAAU2B,EAAV3B,WACAD,EAAmB4B,EAAnB5B,oBACAD,EAAS6B,EAAT7B,UAAS8B,EAAAD,EACTE,gBAAAA,OAAkB,IAAHD,EAAG,GAAEA,EAQhBlB,EAASM,EAAoC,CAAEE,YAZxCS,EAAXT,YAYgElB,WAAAA,EAAYD,oBAAAA,EAAqBD,UAAAA,KACzFY,EAAOc,YAAcK,EAAgBC,SAASpB,EAAOa,YAC3Db,EAASM,EAAoC,CAC3CE,YAAaR,EAAOa,UACpBvB,WAAAA,EACAD,oBAAAA,EACAD,UAAAA,IAIJ,OAAOY,CACT"}

package/dist/mocked_classnames/src/hooks/useGridKeyboardNavigation/useGridKeyboardNavigation.js

@@ -1,2 +1,2 @@
-import{slicedToArray as n}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{useState as e,useRef as i,useContext as o,useEffect as t,useCallback as r}from"react";import{GridKeyboardNavigationContext as a}from"../../components/GridKeyboardNavigationContext/GridKeyboardNavigationContext.js";import u from"../useFullKeyboardListeners.js";import c from"../useEventListener/index.js";import{getActiveIndexFromInboundNavigation as s,calcActiveIndexAfterArrowNavigation as d}from"./gridKeyboardNavigationHelper.js";import{useLastNavigationDirection as l}from"../../components/Menu/Menu/hooks/useLastNavigationDirection.js";var f=-1;function v(v){var m=v.ref,b=v.itemsCount,I=v.numberOfItemsInLine,g=v.onItemClicked,p=v.entryFocusStrategy,x=void 0===p?"directional":p,N=v.getItemByIndex,y=void 0===N?function(n){}:N,O=v.focusOnMount,j=void 0!==O&&O,C=v.focusItemIndexOnMount,L=void 0===C?f:C,k=v.disabledIndexes,K=void 0===k?[]:k,M=v.circularNavigation,A=void 0!==M&&M,S=e(j&&L!==f),h=n(S,2),w=h[0],B=h[1],D=i(!1),E=e(w?L:f),F=n(E,2),G=F[0],H=F[1],_=e(!0),P=n(_,2),R=P[0],T=P[1],q=o(a);t((function(){D.current?B(!1):D.current=!0}),[G]);var z=r((function(){var n;return null===(n=m.current)||void 0===n?void 0:n.blur()}),[m]),J=l().lastNavigationDirectionRef,Q=r((function(){if(G===f){var n=J.current;H("directional"===x&&n?s({direction:n,numberOfItemsInLine:I,itemsCount:b}):0),T(!0)}else T(!0)}),[G,x,b,J,I,H,T]),U=r((function(){T(!1)}),[T]),V=r((function(){T(!0),H(f)}),[H]);c({eventName:"focus",callback:Q,ref:m}),c({eventName:"mousedown",callback:U,ref:m}),c({eventName:"blur",callback:V,ref:m}),t((function(){var n;G>-1&&(null===(n=m.current)||void 0===n||n.focus())}),[G,m]);var W=r((function(n){T(arguments.length>1&&void 0!==arguments[1]&&arguments[1]),H(n),g(y(n),n)}),[H,g,y]),X=r((function(){if(R)return W(G,!0)}),[R,W,G]);return u({ref:m,onSelectionKey:X,onArrowNavigation:function(n){if(T(!0),G!==f){var e=d({activeIndex:G,itemsCount:b,numberOfItemsInLine:I,direction:n,disabledIndexes:K,circularNavigation:A}),i=e.nextIndex;e.isOutbound?null==q||q.onOutboundNavigation(m,n):H(i)}else H(0)},onEscape:z,focusOnMount:j}),{activeIndex:R?G:f,onSelectionAction:W,isInitialActiveState:w}}export{v as default};
+import{slicedToArray as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{useState as n,useRef as t,useContext as o,useEffect as i,useCallback as r}from"react";import{GridKeyboardNavigationContext as a}from"../../components/GridKeyboardNavigationContext/GridKeyboardNavigationContext.js";import u from"../useFullKeyboardListeners.js";import c from"../useEventListener/index.js";import{getActiveIndexFromInboundNavigation as s,calcActiveIndexAfterArrowNavigation as d}from"./gridKeyboardNavigationHelper.js";import{useLastNavigationDirection as l}from"../../components/Menu/Menu/hooks/useLastNavigationDirection.js";var f=-1;function m(m){var v=m.ref,b=m.itemsCount,I=m.numberOfItemsInLine,p=m.onItemClicked,g=m.entryFocusStrategy,x=void 0===g?"directional":g,N=m.getItemByIndex,y=void 0===N?function(e){}:N,O=m.focusOnMount,j=void 0!==O&&O,C=m.focusItemIndexOnMount,L=void 0===C?f:C,k=m.disabledIndexes,K=void 0===k?[]:k,M=n(j&&L!==f),A=e(M,2),S=A[0],h=A[1],w=t(!1),B=n(S?L:f),D=e(B,2),E=D[0],F=D[1],G=n(!0),H=e(G,2),_=H[0],P=H[1],R=o(a);i((function(){w.current?h(!1):w.current=!0}),[E]);var T=r((function(){var e;return null===(e=v.current)||void 0===e?void 0:e.blur()}),[v]),q=l().lastNavigationDirectionRef,z=r((function(){if(E===f){var e=q.current;F("directional"===x&&e?s({direction:e,numberOfItemsInLine:I,itemsCount:b}):0),P(!0)}else P(!0)}),[E,x,b,q,I,F,P]),J=r((function(){P(!1)}),[P]),Q=r((function(){P(!0),F(f)}),[F]);c({eventName:"focus",callback:z,ref:v}),c({eventName:"mousedown",callback:J,ref:v}),c({eventName:"blur",callback:Q,ref:v}),i((function(){var e;E>-1&&(null===(e=v.current)||void 0===e||e.focus())}),[E,v]);var U=r((function(e){P(arguments.length>1&&void 0!==arguments[1]&&arguments[1]),F(e),p(y(e),e)}),[F,p,y]),V=r((function(){if(_)return U(E,!0)}),[_,U,E]);return u({ref:v,onSelectionKey:V,onArrowNavigation:function(e){if(P(!0),E!==f){var n=d({activeIndex:E,itemsCount:b,numberOfItemsInLine:I,direction:e,disabledIndexes:K}),t=n.nextIndex;n.isOutbound?null==R||R.onOutboundNavigation(v,e):F(t)}else F(0)},onEscape:T,focusOnMount:j}),{activeIndex:_?E:f,onSelectionAction:U,isInitialActiveState:S}}export{m as default};
 //# sourceMappingURL=useGridKeyboardNavigation.js.map

package/dist/mocked_classnames/src/hooks/useGridKeyboardNavigation/useGridKeyboardNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"useGridKeyboardNavigation.js","sources":["../../../../../src/hooks/useGridKeyboardNavigation/useGridKeyboardNavigation.ts"],"sourcesContent":["import { MutableRefObject, ReactElement, useCallback, useContext, useEffect, useRef, useState } from \"react\";\nimport { GridKeyboardNavigationContext } from \"../../components/GridKeyboardNavigationContext/GridKeyboardNavigationContext\";\nimport useFullKeyboardListeners, { NavDirections } from \"../../hooks/useFullKeyboardListeners\";\nimport useEventListener from \"../../hooks/useEventListener\";\nimport {\n  calcActiveIndexAfterArrowNavigation,\n  getActiveIndexFromInboundNavigation\n} from \"./gridKeyboardNavigationHelper\";\nimport { useLastNavigationDirection } from \"../../components/Menu/Menu/hooks/useLastNavigationDirection\";\n\nconst NO_ACTIVE_INDEX = -1;\n\n/**\n * A hook which is used for accessible keyboard navigation. Useful for components rendering a list of items that can be navigated and selected with a keyboard.\n * @param {Object} options\n * @param {React.MutableRefObject} options.ref - the reference for the component that listens to keyboard\n * @param {number} options.itemsCount - the number of items\n * @param {number} options.numberOfItemsInLine - the number of items on each line of the grid\n * @param {function} options.onItemClicked - the callback for selecting an item. It will be called when an active item is selected, for example with \"Enter\".\n * @param {function} options.getItemByIndex - a function which gets an index as a param, and returns the item on that index\n * @param {\"directional\" | \"first\"} options.entryFocusStrategy - Determines how the first item is focused when entering the grid via keyboard.\n *   - \"directional\": Tries to focus based on the entry direction (Tab vs Shift+Tab). This is the default.\n *   - \"first\": Always focuses the first item.\n * @param {boolean=} options.focusOnMount - if true, the referenced element will be focused when mounted\n * @param {number=} options.focusItemIndexOnMount - optional item index to focus when mounted. Only works with \"options.focusOnMount\".\n * @param {number[]=} options.disabledIndexes - optional array of disabled indices, which will be skipped while navigating.\n * @param {boolean=} options.circularNavigation - if true, the navigation will wrap around the grid\n * @returns {useGridKeyboardNavigationResult}\n *\n * @typedef useGridKeyboardNavigationResult\n * @property {number} activeIndex - the currently active index\n * @property {boolean} isInitialActiveState - if true, the currently active element was due to an initial mounting index option. See \"options.focusItemIndexOnMount\".\n * @property {(index: number, isKeyboardAction?: boolean) => void} onSelectionAction - the callback which should be used to select an item.\n * It should be called with the selected item's index. Use this callback for onClick handlers, for example.\n * The \"isKeyboardAction\" can be used to indicate a keyboard selection, which will affect the currently active index.\n */\nexport default function useGridKeyboardNavigation({\n  ref,\n  itemsCount,\n  numberOfItemsInLine,\n  onItemClicked, // the callback to call when an item is selected\n  entryFocusStrategy = \"directional\",\n  getItemByIndex = (_index: number) => {},\n  focusOnMount = false,\n  focusItemIndexOnMount = NO_ACTIVE_INDEX,\n  disabledIndexes = [],\n  circularNavigation = false\n}: {\n  ref: MutableRefObject<HTMLElement>;\n  itemsCount: number;\n  numberOfItemsInLine: number;\n  onItemClicked: (element: HTMLElement | ReactElement | void | string, index: number) => void;\n  entryFocusStrategy?: \"directional\" | \"first\";\n  getItemByIndex: (index: number | void) => HTMLElement | ReactElement | void | string;\n  focusOnMount?: boolean;\n  focusItemIndexOnMount?: number;\n  disabledIndexes?: number[];\n  circularNavigation?: boolean;\n}) {\n  const [isInitialActiveState, setIsInitialActiveState] = useState(\n    focusOnMount && focusItemIndexOnMount !== NO_ACTIVE_INDEX\n  );\n  const skippedInitialActiveIndexChange = useRef(false);\n  const [activeIndex, setActiveIndex] = useState(isInitialActiveState ? focusItemIndexOnMount : NO_ACTIVE_INDEX);\n  const [isUsingKeyboardNav, setIsUsingKeyboardNav] = useState(true);\n\n  const keyboardContext = useContext(GridKeyboardNavigationContext);\n\n  const onArrowNavigation = (direction: NavDirections) => {\n    setIsUsingKeyboardNav(true);\n    if (activeIndex === NO_ACTIVE_INDEX) {\n      setActiveIndex(0);\n      return;\n    }\n\n    const { isOutbound, nextIndex } = calcActiveIndexAfterArrowNavigation({\n      activeIndex,\n      itemsCount,\n      numberOfItemsInLine,\n      direction,\n      disabledIndexes,\n      circularNavigation\n    });\n    if (isOutbound) {\n      keyboardContext?.onOutboundNavigation(ref, direction);\n    } else {\n      setActiveIndex(nextIndex);\n    }\n  };\n\n  useEffect(() => {\n    if (!skippedInitialActiveIndexChange.current) {\n      skippedInitialActiveIndexChange.current = true;\n      return;\n    }\n    // if the active state changes, this is no longer the initial active state\n    setIsInitialActiveState(false);\n  }, [activeIndex]);\n\n  const blurTargetElement = useCallback(() => ref.current?.blur(), [ref]);\n\n  const { lastNavigationDirectionRef } = useLastNavigationDirection();\n  const onFocus = useCallback(() => {\n    if (activeIndex !== NO_ACTIVE_INDEX) {\n      setIsUsingKeyboardNav(true);\n      return;\n    }\n\n    const direction = lastNavigationDirectionRef.current;\n    setActiveIndex(\n      entryFocusStrategy === \"directional\" && direction\n        ? getActiveIndexFromInboundNavigation({ direction, numberOfItemsInLine, itemsCount })\n        : 0\n    );\n    setIsUsingKeyboardNav(true);\n  }, [\n    activeIndex,\n    entryFocusStrategy,\n    itemsCount,\n    lastNavigationDirectionRef,\n    numberOfItemsInLine,\n    setActiveIndex,\n    setIsUsingKeyboardNav\n  ]);\n\n  const onMouseDown = useCallback(() => {\n    // If the user clicked on the grid element we assume that that what will caused the focus\n    setIsUsingKeyboardNav(false);\n  }, [setIsUsingKeyboardNav]);\n\n  const onBlur = useCallback(() => {\n    // If we lose focus we will return to isUsingKeyboardNav default mode which is that any interaction\n    // with the grid always done by keyboard, unless we clicked on the grid element before that with a mouse\n    setIsUsingKeyboardNav(true);\n    setActiveIndex(NO_ACTIVE_INDEX);\n  }, [setActiveIndex]);\n\n  useEventListener({ eventName: \"focus\", callback: onFocus, ref });\n  useEventListener({ eventName: \"mousedown\", callback: onMouseDown, ref });\n  useEventListener({ eventName: \"blur\", callback: onBlur, ref });\n\n  useEffect(() => {\n    if (activeIndex > -1) {\n      ref.current?.focus();\n    }\n  }, [activeIndex, ref]);\n\n  const onSelectionAction = useCallback(\n    (index: number, isKeyboardAction = false) => {\n      setIsUsingKeyboardNav(isKeyboardAction);\n      setActiveIndex(index);\n\n      onItemClicked(getItemByIndex(index), index);\n    },\n    [setActiveIndex, onItemClicked, getItemByIndex]\n  );\n\n  const onKeyboardSelection = useCallback(() => {\n    if (!isUsingKeyboardNav) {\n      return;\n    }\n    return onSelectionAction(activeIndex, true);\n  }, [isUsingKeyboardNav, onSelectionAction, activeIndex]);\n\n  useFullKeyboardListeners({\n    ref,\n    onSelectionKey: onKeyboardSelection,\n    onArrowNavigation,\n    onEscape: blurTargetElement,\n    focusOnMount\n  });\n\n  // if the user is not using keyboard nav, the consumers should not treat the index as active\n  const externalActiveIndex = isUsingKeyboardNav ? activeIndex : NO_ACTIVE_INDEX;\n  return {\n    activeIndex: externalActiveIndex,\n    onSelectionAction,\n    isInitialActiveState\n  };\n}\n"],"names":["NO_ACTIVE_INDEX","useGridKeyboardNavigation","_ref","ref","itemsCount","numberOfItemsInLine","onItemClicked","_ref$entryFocusStrate","entryFocusStrategy","_ref$getItemByIndex","getItemByIndex","_index","_ref$focusOnMount","focusOnMount","_ref$focusItemIndexOn","focusItemIndexOnMount","_ref$disabledIndexes","disabledIndexes","_ref$circularNavigati","circularNavigation","_useState","useState","_useState2","_slicedToArray","isInitialActiveState","setIsInitialActiveState","skippedInitialActiveIndexChange","useRef","_useState3","_useState4","activeIndex","setActiveIndex","_useState5","_useState6","isUsingKeyboardNav","setIsUsingKeyboardNav","keyboardContext","useContext","GridKeyboardNavigationContext","useEffect","current","blurTargetElement","useCallback","_a","blur","lastNavigationDirectionRef","useLastNavigationDirection","onFocus","direction","getActiveIndexFromInboundNavigation","onMouseDown","onBlur","useEventListener","eventName","callback","focus","onSelectionAction","index","arguments","length","undefined","onKeyboardSelection","useFullKeyboardListeners","onSelectionKey","onArrowNavigation","_calcActiveIndexAfter","calcActiveIndexAfterArrowNavigation","nextIndex","isOutbound","onOutboundNavigation","onEscape"],"mappings":"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"}
+{"version":3,"file":"useGridKeyboardNavigation.js","sources":["../../../../../src/hooks/useGridKeyboardNavigation/useGridKeyboardNavigation.ts"],"sourcesContent":["import { MutableRefObject, ReactElement, useCallback, useContext, useEffect, useRef, useState } from \"react\";\nimport { GridKeyboardNavigationContext } from \"../../components/GridKeyboardNavigationContext/GridKeyboardNavigationContext\";\nimport useFullKeyboardListeners, { NavDirections } from \"../../hooks/useFullKeyboardListeners\";\nimport useEventListener from \"../../hooks/useEventListener\";\nimport {\n  calcActiveIndexAfterArrowNavigation,\n  getActiveIndexFromInboundNavigation\n} from \"./gridKeyboardNavigationHelper\";\nimport { useLastNavigationDirection } from \"../../components/Menu/Menu/hooks/useLastNavigationDirection\";\n\nconst NO_ACTIVE_INDEX = -1;\n\n/**\n * A hook which is used for accessible keyboard navigation. Useful for components rendering a list of items that can be navigated and selected with a keyboard.\n * @param {Object} options\n * @param {React.MutableRefObject} options.ref - the reference for the component that listens to keyboard\n * @param {number} options.itemsCount - the number of items\n * @param {number} options.numberOfItemsInLine - the number of items on each line of the grid\n * @param {function} options.onItemClicked - the callback for selecting an item. It will be called when an active item is selected, for example with \"Enter\".\n * @param {function} options.getItemByIndex - a function which gets an index as a param, and returns the item on that index\n * @param {\"directional\" | \"first\"} options.entryFocusStrategy - Determines how the first item is focused when entering the grid via keyboard.\n *   - \"directional\": Tries to focus based on the entry direction (Tab vs Shift+Tab). This is the default.\n *   - \"first\": Always focuses the first item.\n * @param {boolean=} options.focusOnMount - if true, the referenced element will be focused when mounted\n * @param {number=} options.focusItemIndexOnMount - optional item index to focus when mounted. Only works with \"options.focusOnMount\".\n * @param {number[]=} options.disabledIndexes - optional array of disabled indices, which will be skipped while navigating.\n * @returns {useGridKeyboardNavigationResult}\n *\n * @typedef useGridKeyboardNavigationResult\n * @property {number} activeIndex - the currently active index\n * @property {boolean} isInitialActiveState - if true, the currently active element was due to an initial mounting index option. See \"options.focusItemIndexOnMount\".\n * @property {(index: number, isKeyboardAction?: boolean) => void} onSelectionAction - the callback which should be used to select an item.\n * It should be called with the selected item's index. Use this callback for onClick handlers, for example.\n * The \"isKeyboardAction\" can be used to indicate a keyboard selection, which will affect the currently active index.\n */\nexport default function useGridKeyboardNavigation({\n  ref,\n  itemsCount,\n  numberOfItemsInLine,\n  onItemClicked, // the callback to call when an item is selected\n  entryFocusStrategy = \"directional\",\n  getItemByIndex = (_index: number) => {},\n  focusOnMount = false,\n  focusItemIndexOnMount = NO_ACTIVE_INDEX,\n  disabledIndexes = []\n}: {\n  ref: MutableRefObject<HTMLElement>;\n  itemsCount: number;\n  numberOfItemsInLine: number;\n  onItemClicked: (element: HTMLElement | ReactElement | void | string, index: number) => void;\n  entryFocusStrategy?: \"directional\" | \"first\";\n  getItemByIndex: (index: number | void) => HTMLElement | ReactElement | void | string;\n  focusOnMount?: boolean;\n  focusItemIndexOnMount?: number;\n  disabledIndexes?: number[];\n}) {\n  const [isInitialActiveState, setIsInitialActiveState] = useState(\n    focusOnMount && focusItemIndexOnMount !== NO_ACTIVE_INDEX\n  );\n  const skippedInitialActiveIndexChange = useRef(false);\n  const [activeIndex, setActiveIndex] = useState(isInitialActiveState ? focusItemIndexOnMount : NO_ACTIVE_INDEX);\n  const [isUsingKeyboardNav, setIsUsingKeyboardNav] = useState(true);\n\n  const keyboardContext = useContext(GridKeyboardNavigationContext);\n\n  const onArrowNavigation = (direction: NavDirections) => {\n    setIsUsingKeyboardNav(true);\n    if (activeIndex === NO_ACTIVE_INDEX) {\n      setActiveIndex(0);\n      return;\n    }\n\n    const { isOutbound, nextIndex } = calcActiveIndexAfterArrowNavigation({\n      activeIndex,\n      itemsCount,\n      numberOfItemsInLine,\n      direction,\n      disabledIndexes\n    });\n    if (isOutbound) {\n      keyboardContext?.onOutboundNavigation(ref, direction);\n    } else {\n      setActiveIndex(nextIndex);\n    }\n  };\n\n  useEffect(() => {\n    if (!skippedInitialActiveIndexChange.current) {\n      skippedInitialActiveIndexChange.current = true;\n      return;\n    }\n    // if the active state changes, this is no longer the initial active state\n    setIsInitialActiveState(false);\n  }, [activeIndex]);\n\n  const blurTargetElement = useCallback(() => ref.current?.blur(), [ref]);\n\n  const { lastNavigationDirectionRef } = useLastNavigationDirection();\n  const onFocus = useCallback(() => {\n    if (activeIndex !== NO_ACTIVE_INDEX) {\n      setIsUsingKeyboardNav(true);\n      return;\n    }\n\n    const direction = lastNavigationDirectionRef.current;\n    setActiveIndex(\n      entryFocusStrategy === \"directional\" && direction\n        ? getActiveIndexFromInboundNavigation({ direction, numberOfItemsInLine, itemsCount })\n        : 0\n    );\n    setIsUsingKeyboardNav(true);\n  }, [\n    activeIndex,\n    entryFocusStrategy,\n    itemsCount,\n    lastNavigationDirectionRef,\n    numberOfItemsInLine,\n    setActiveIndex,\n    setIsUsingKeyboardNav\n  ]);\n\n  const onMouseDown = useCallback(() => {\n    // If the user clicked on the grid element we assume that that what will caused the focus\n    setIsUsingKeyboardNav(false);\n  }, [setIsUsingKeyboardNav]);\n\n  const onBlur = useCallback(() => {\n    // If we lose focus we will return to isUsingKeyboardNav default mode which is that any interaction\n    // with the grid always done by keyboard, unless we clicked on the grid element before that with a mouse\n    setIsUsingKeyboardNav(true);\n    setActiveIndex(NO_ACTIVE_INDEX);\n  }, [setActiveIndex]);\n\n  useEventListener({ eventName: \"focus\", callback: onFocus, ref });\n  useEventListener({ eventName: \"mousedown\", callback: onMouseDown, ref });\n  useEventListener({ eventName: \"blur\", callback: onBlur, ref });\n\n  useEffect(() => {\n    if (activeIndex > -1) {\n      ref.current?.focus();\n    }\n  }, [activeIndex, ref]);\n\n  const onSelectionAction = useCallback(\n    (index: number, isKeyboardAction = false) => {\n      setIsUsingKeyboardNav(isKeyboardAction);\n      setActiveIndex(index);\n\n      onItemClicked(getItemByIndex(index), index);\n    },\n    [setActiveIndex, onItemClicked, getItemByIndex]\n  );\n\n  const onKeyboardSelection = useCallback(() => {\n    if (!isUsingKeyboardNav) {\n      return;\n    }\n    return onSelectionAction(activeIndex, true);\n  }, [isUsingKeyboardNav, onSelectionAction, activeIndex]);\n\n  useFullKeyboardListeners({\n    ref,\n    onSelectionKey: onKeyboardSelection,\n    onArrowNavigation,\n    onEscape: blurTargetElement,\n    focusOnMount\n  });\n\n  // if the user is not using keyboard nav, the consumers should not treat the index as active\n  const externalActiveIndex = isUsingKeyboardNav ? activeIndex : NO_ACTIVE_INDEX;\n  return {\n    activeIndex: externalActiveIndex,\n    onSelectionAction,\n    isInitialActiveState\n  };\n}\n"],"names":["NO_ACTIVE_INDEX","useGridKeyboardNavigation","_ref","ref","itemsCount","numberOfItemsInLine","onItemClicked","_ref$entryFocusStrate","entryFocusStrategy","_ref$getItemByIndex","getItemByIndex","_index","_ref$focusOnMount","focusOnMount","_ref$focusItemIndexOn","focusItemIndexOnMount","_ref$disabledIndexes","disabledIndexes","_useState","useState","_useState2","_slicedToArray","isInitialActiveState","setIsInitialActiveState","skippedInitialActiveIndexChange","useRef","_useState3","_useState4","activeIndex","setActiveIndex","_useState5","_useState6","isUsingKeyboardNav","setIsUsingKeyboardNav","keyboardContext","useContext","GridKeyboardNavigationContext","useEffect","current","blurTargetElement","useCallback","_a","blur","lastNavigationDirectionRef","useLastNavigationDirection","onFocus","direction","getActiveIndexFromInboundNavigation","onMouseDown","onBlur","useEventListener","eventName","callback","focus","onSelectionAction","index","arguments","length","undefined","onKeyboardSelection","useFullKeyboardListeners","onSelectionKey","onArrowNavigation","_calcActiveIndexAfter","calcActiveIndexAfterArrowNavigation","nextIndex","isOutbound","onOutboundNavigation","onEscape"],"mappings":"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"}

package/dist/src/components/Table/TableContainer/TableContainer.module.scss.js

@@ -1,2 +1,2 @@
-var e={tableContainer:"tableContainer_8ef3d5be9b",menuContainer:"menuContainer_4fd7ba8c45"};!function(e){const n="s_id-545d156e3798_3_50_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const i=document.createElement("style");i.id=n,t.firstChild?t.insertBefore(i,t.firstChild):t.appendChild(i),i.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".tableContainer_8ef3d5be9b {\n  width: 100%;\n  height: 100%;\n  position: relative;\n}\n.tableContainer_8ef3d5be9b .menuContainer_4fd7ba8c45 {\n  --cell-width: 40px;\n  position: absolute;\n  overflow: hidden;\n  left: calc(var(--cell-width) * -1);\n  width: var(--cell-width);\n  height: 100%;\n}");export{e as default};
+var e={tableContainer:"tableContainer_8ef3d5be9b",menuContainer:"menuContainer_1ba119ac51"};!function(e){const n="s_id-b17c334ca26e_3_50_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const i=document.createElement("style");i.id=n,t.firstChild?t.insertBefore(i,t.firstChild):t.appendChild(i),i.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".tableContainer_8ef3d5be9b {\n  width: 100%;\n  height: 100%;\n  position: relative;\n}\n.tableContainer_8ef3d5be9b .menuContainer_1ba119ac51 {\n  --cell-width: 40px;\n  position: absolute;\n  overflow: hidden;\n  left: calc(var(--cell-width) * -1 + 1px);\n  width: var(--cell-width);\n  height: 100%;\n}");export{e as default};
 //# sourceMappingURL=TableContainer.module.scss.js.map

package/dist/src/components/Table/context/TableRowMenuContext/TableRowMenuContext.js

@@ -1,2 +1,2 @@
-import{slicedToArray as e}from"../../../../../_virtual/_rollupPluginBabelHelpers.js";import n,{useContext as o,createContext as r,useRef as u,useState as t,useCallback as i,useMemo as l}from"react";var c=r(void 0),d=function(o){var r=o.value,d=o.children,v=r.tableRootRef,a=r.hoveredRowRef,s=r.isMenuOpen,f=r.resetHoveredRow,R=r.setHoveredRowRef,w=r.setIsMenuOpen,m=u(null),M=t(0),p=e(M,2),T=p[0],b=p[1],h=u(null),g=i((function(){clearTimeout(m.current),m.current=null}),[]),H=i((function(e){if(!1!==h.current&&!s&&(null==a?void 0:a.current)!==e.current){g(),R(e);var n=v.current.getBoundingClientRect().top,o=e.current.getBoundingClientRect().top;b(o-n),null===h.current&&setTimeout((function(){h.current=!!(null===document||void 0===document?void 0:document.querySelector("[data-row-menu-id]"))}))}}),[s,a,g,R,v]),B=i((function(){s||(m.current=setTimeout((function(){R(null)}),400))}),[s,R]),O=i((function(){s||g()}),[s,g]),P=i((function(){s||R(null)}),[s,R]),C=l((function(){var e;return{hoveredRowId:null===(e=null==a?void 0:a.current)||void 0===e?void 0:e.id,resetHoveredRow:f,menuButtonPosition:T,onMouseOverRow:H,onMouseLeaveRow:B,onMouseOverRowMenu:O,onMouseLeaveRowMenu:P,setTableMenuShown:function(){return w(!0)},setTableMenuHidden:function(){return w(!1)}}}),[a,f,T,B,P,H,O,w]);return n.createElement(c.Provider,{value:C},d)},v=function(){var e=o(c);if(!e)throw Error("useTableRowMenuContext must be used within a TableRowMenuProvider");return e};export{d as TableRowMenuProvider,v as useTableRowMenu};
+import{slicedToArray as e}from"../../../../../_virtual/_rollupPluginBabelHelpers.js";import n,{useContext as o,createContext as r,useState as t,useRef as u,useCallback as i,useMemo as l}from"react";var v=r(void 0),c=function(o){var r=o.value,c=o.children,a=r.tableRootRef,d=r.hoveredRowRef,s=r.isMenuOpen,R=r.resetHoveredRow,f=r.setHoveredRowRef,w=r.setIsMenuOpen,M=t(0),p=e(M,2),b=p[0],m=p[1],h=u(!1),g=i((function(e){if(!s){f(e);var n=a.current.getBoundingClientRect().top,o=e.current.getBoundingClientRect().top;m(o-n)}}),[s,f,a]),H=i((function(){s||h.current||f(null)}),[s,f]),T=i((function(){h.current=!0}),[]),B=i((function(){h.current=!1,s||(null==d?void 0:d.current)||f(null)}),[s,d,f]),O=i((function(){w(!0)}),[w]),P=i((function(){w(!1)}),[w]),C=l((function(){var e;return{hoveredRowId:null===(e=null==d?void 0:d.current)||void 0===e?void 0:e.id,resetHoveredRow:R,menuButtonPosition:b,onMouseOverRow:g,onMouseLeaveRow:H,onMouseOverRowMenu:T,onMouseLeaveRowMenu:B,setTableMenuShown:O,setTableMenuHidden:P}}),[d,R,b,H,B,g,T,O,P]);return n.createElement(v.Provider,{value:C},c)},a=function(){var e=o(v);if(!e)throw Error("useTableRowMenuContext must be used within a TableRowMenuProvider");return e};export{c as TableRowMenuProvider,a as useTableRowMenu};
 //# sourceMappingURL=TableRowMenuContext.js.map

package/dist/src/components/Table/context/TableRowMenuContext/TableRowMenuContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableRowMenuContext.js","sources":["../../../../../../src/components/Table/context/TableRowMenuContext/TableRowMenuContext.tsx"],"sourcesContent":["import React, { createContext, useCallback, useContext, useMemo, useRef, useState } from \"react\";\nimport { TableRowMenuContext as ITableRowMenuContext, TableRowMenuProviderProps } from \"./TableRowMenuContext.types\";\n\nconst TableRowMenuContext = createContext<ITableRowMenuContext | undefined>(undefined);\n\nexport const TableRowMenuProvider = ({ value, children }: TableRowMenuProviderProps) => {\n  const { tableRootRef, hoveredRowRef, isMenuOpen, resetHoveredRow, setHoveredRowRef, setIsMenuOpen } = value;\n  const rowMouseLeaveTimeoutId = useRef<ReturnType<typeof setTimeout>>(null);\n  const [menuButtonPosition, setMenuButtonPosition] = useState(0);\n  const hasMenuRef = useRef<boolean | null>(null);\n\n  const resetTimeout = useCallback(() => {\n    clearTimeout(rowMouseLeaveTimeoutId.current);\n    rowMouseLeaveTimeoutId.current = null;\n  }, []);\n\n  const onMouseOverRow = useCallback(\n    (rowRef: React.RefObject<HTMLDivElement>) => {\n      if (hasMenuRef.current === false || isMenuOpen || hoveredRowRef?.current === rowRef.current) return;\n\n      resetTimeout();\n      setHoveredRowRef(rowRef);\n      const tableRootTop = tableRootRef.current.getBoundingClientRect().top;\n      const rowTop = rowRef.current.getBoundingClientRect().top;\n      setMenuButtonPosition(rowTop - tableRootTop);\n      if (hasMenuRef.current === null) {\n        setTimeout(() => {\n          hasMenuRef.current = !!document?.querySelector(`[data-row-menu-id]`);\n        });\n      }\n    },\n    [isMenuOpen, hoveredRowRef, resetTimeout, setHoveredRowRef, tableRootRef]\n  );\n\n  const onMouseLeaveRow = useCallback(() => {\n    if (isMenuOpen) return;\n    rowMouseLeaveTimeoutId.current = setTimeout(() => {\n      setHoveredRowRef(null);\n    }, 400);\n  }, [isMenuOpen, setHoveredRowRef]);\n\n  const onMouseOverRowMenu = useCallback(() => {\n    if (isMenuOpen) return;\n    resetTimeout();\n  }, [isMenuOpen, resetTimeout]);\n\n  const onMouseLeaveRowMenu = useCallback(() => {\n    if (isMenuOpen) return;\n    setHoveredRowRef(null);\n  }, [isMenuOpen, setHoveredRowRef]);\n\n  const contextValue = useMemo<ITableRowMenuContext>(\n    () => ({\n      hoveredRowId: hoveredRowRef?.current?.id,\n      resetHoveredRow,\n      menuButtonPosition,\n      onMouseOverRow,\n      onMouseLeaveRow,\n      onMouseOverRowMenu,\n      onMouseLeaveRowMenu,\n      setTableMenuShown: () => setIsMenuOpen(true),\n      setTableMenuHidden: () => setIsMenuOpen(false)\n    }),\n    [\n      hoveredRowRef,\n      resetHoveredRow,\n      menuButtonPosition,\n      onMouseLeaveRow,\n      onMouseLeaveRowMenu,\n      onMouseOverRow,\n      onMouseOverRowMenu,\n      setIsMenuOpen\n    ]\n  );\n\n  return <TableRowMenuContext.Provider value={contextValue}>{children}</TableRowMenuContext.Provider>;\n};\n\nexport const useTableRowMenu = () => {\n  const context = useContext(TableRowMenuContext);\n  if (!context) {\n    throw new Error(\"useTableRowMenuContext must be used within a TableRowMenuProvider\");\n  }\n  return context;\n};\n"],"names":["TableRowMenuContext","createContext","undefined","TableRowMenuProvider","_ref","value","children","tableRootRef","hoveredRowRef","isMenuOpen","resetHoveredRow","setHoveredRowRef","setIsMenuOpen","rowMouseLeaveTimeoutId","useRef","_useState","useState","_useState2","_slicedToArray","menuButtonPosition","setMenuButtonPosition","hasMenuRef","resetTimeout","useCallback","clearTimeout","current","onMouseOverRow","rowRef","tableRootTop","getBoundingClientRect","top","rowTop","setTimeout","document","querySelector","onMouseLeaveRow","onMouseOverRowMenu","onMouseLeaveRowMenu","contextValue","useMemo","hoveredRowId","_a","id","setTableMenuShown","setTableMenuHidden","React","createElement","Provider","useTableRowMenu","context","useContext","Error"],"mappings":"sMAGA,IAAMA,EAAsBC,OAAgDC,GAE/DC,EAAuB,SAAHC,GAAsD,IAAhDC,EAAKD,EAALC,MAAOC,EAAQF,EAARE,SACpCC,EAA8FF,EAA9FE,aAAcC,EAAgFH,EAAhFG,cAAeC,EAAiEJ,EAAjEI,WAAYC,EAAqDL,EAArDK,gBAAiBC,EAAoCN,EAApCM,iBAAkBC,EAAkBP,EAAlBO,cAC9EC,EAAyBC,EAAsC,MACrEC,EAAoDC,EAAS,GAAEC,EAAAC,EAAAH,EAAA,GAAxDI,EAAkBF,EAAA,GAAEG,EAAqBH,EAAA,GAC1CI,EAAaP,EAAuB,MAEpCQ,EAAeC,GAAY,WAC/BC,aAAaX,EAAuBY,SACpCZ,EAAuBY,QAAU,IAClC,GAAE,IAEGC,EAAiBH,GACrB,SAACI,GACC,IAA2B,IAAvBN,EAAWI,UAAqBhB,IAAcD,eAAAA,EAAeiB,WAAYE,EAAOF,QAApF,CAEAH,IACAX,EAAiBgB,GACjB,IAAMC,EAAerB,EAAakB,QAAQI,wBAAwBC,IAC5DC,EAASJ,EAAOF,QAAQI,wBAAwBC,IACtDV,EAAsBW,EAASH,GACJ,OAAvBP,EAAWI,SACbO,YAAW,WACTX,EAAWI,WAAoB,OAARQ,eAAQ,IAARA,cAAQ,EAARA,SAAUC,cAAkC,sBACrE,GAV2F,CAY/F,GACA,CAACzB,EAAYD,EAAec,EAAcX,EAAkBJ,IAGxD4B,EAAkBZ,GAAY,WAC9Bd,IACJI,EAAuBY,QAAUO,YAAW,WAC1CrB,EAAiB,KAClB,GAAE,KACL,GAAG,CAACF,EAAYE,IAEVyB,EAAqBb,GAAY,WACjCd,GACJa,GACF,GAAG,CAACb,EAAYa,IAEVe,EAAsBd,GAAY,WAClCd,GACJE,EAAiB,KACnB,GAAG,CAACF,EAAYE,IAEV2B,EAAeC,GACnB,iBAAM,MAAC,CACLC,aAAoC,QAAtBC,EAAAjC,eAAAA,EAAeiB,eAAO,IAAAgB,OAAA,EAAAA,EAAEC,GACtChC,gBAAAA,EACAS,mBAAAA,EACAO,eAAAA,EACAS,gBAAAA,EACAC,mBAAAA,EACAC,oBAAAA,EACAM,kBAAmB,WAAA,OAAM/B,GAAc,EAAK,EAC5CgC,mBAAoB,WAAA,OAAMhC,GAAc,EAAM,KAEhD,CACEJ,EACAE,EACAS,EACAgB,EACAE,EACAX,EACAU,EACAxB,IAIJ,OAAOiC,EAAAC,cAAC9C,EAAoB+C,SAAQ,CAAC1C,MAAOiC,GAAehC,EAC7D,EAEa0C,EAAkB,WAC7B,IAAMC,EAAUC,EAAWlD,GAC3B,IAAKiD,EACH,MAAUE,MAAM,qEAElB,OAAOF,CACT"}
+{"version":3,"file":"TableRowMenuContext.js","sources":["../../../../../../src/components/Table/context/TableRowMenuContext/TableRowMenuContext.tsx"],"sourcesContent":["import React, { createContext, useCallback, useContext, useMemo, useRef, useState } from \"react\";\nimport { TableRowMenuContext as ITableRowMenuContext, TableRowMenuProviderProps } from \"./TableRowMenuContext.types\";\n\nconst TableRowMenuContext = createContext<ITableRowMenuContext | undefined>(undefined);\n\nexport const TableRowMenuProvider = ({ value, children }: TableRowMenuProviderProps) => {\n  const { tableRootRef, hoveredRowRef, isMenuOpen, resetHoveredRow, setHoveredRowRef, setIsMenuOpen } = value;\n  const [menuButtonPosition, setMenuButtonPosition] = useState(0);\n  const isMenuHovered = useRef(false);\n\n  const onMouseOverRow = useCallback(\n    (rowRef: React.RefObject<HTMLDivElement>) => {\n      if (isMenuOpen) return;\n\n      setHoveredRowRef(rowRef);\n      const tableRootTop = tableRootRef.current.getBoundingClientRect().top;\n      const rowTop = rowRef.current.getBoundingClientRect().top;\n      setMenuButtonPosition(rowTop - tableRootTop);\n    },\n    [isMenuOpen, setHoveredRowRef, tableRootRef]\n  );\n\n  const onMouseLeaveRow = useCallback(() => {\n    if (isMenuOpen || isMenuHovered.current) return;\n    setHoveredRowRef(null);\n  }, [isMenuOpen, setHoveredRowRef]);\n\n  const onMouseOverRowMenu = useCallback(() => {\n    isMenuHovered.current = true;\n  }, []);\n\n  const onMouseLeaveRowMenu = useCallback(() => {\n    isMenuHovered.current = false;\n    if (isMenuOpen) return;\n\n    if (!hoveredRowRef?.current) {\n      setHoveredRowRef(null);\n    }\n  }, [isMenuOpen, hoveredRowRef, setHoveredRowRef]);\n\n  const setTableMenuShown = useCallback(() => {\n    setIsMenuOpen(true);\n  }, [setIsMenuOpen]);\n\n  const setTableMenuHidden = useCallback(() => {\n    setIsMenuOpen(false);\n  }, [setIsMenuOpen]);\n\n  const contextValue = useMemo<ITableRowMenuContext>(\n    () => ({\n      hoveredRowId: hoveredRowRef?.current?.id,\n      resetHoveredRow,\n      menuButtonPosition,\n      onMouseOverRow,\n      onMouseLeaveRow,\n      onMouseOverRowMenu,\n      onMouseLeaveRowMenu,\n      setTableMenuShown,\n      setTableMenuHidden\n    }),\n    [\n      hoveredRowRef,\n      resetHoveredRow,\n      menuButtonPosition,\n      onMouseLeaveRow,\n      onMouseLeaveRowMenu,\n      onMouseOverRow,\n      onMouseOverRowMenu,\n      setTableMenuShown,\n      setTableMenuHidden\n    ]\n  );\n\n  return <TableRowMenuContext.Provider value={contextValue}>{children}</TableRowMenuContext.Provider>;\n};\n\nexport const useTableRowMenu = () => {\n  const context = useContext(TableRowMenuContext);\n  if (!context) {\n    throw new Error(\"useTableRowMenuContext must be used within a TableRowMenuProvider\");\n  }\n  return context;\n};\n"],"names":["TableRowMenuContext","createContext","undefined","TableRowMenuProvider","_ref","value","children","tableRootRef","hoveredRowRef","isMenuOpen","resetHoveredRow","setHoveredRowRef","setIsMenuOpen","_useState","useState","_useState2","_slicedToArray","menuButtonPosition","setMenuButtonPosition","isMenuHovered","useRef","onMouseOverRow","useCallback","rowRef","tableRootTop","current","getBoundingClientRect","top","rowTop","onMouseLeaveRow","onMouseOverRowMenu","onMouseLeaveRowMenu","setTableMenuShown","setTableMenuHidden","contextValue","useMemo","hoveredRowId","_a","id","React","createElement","Provider","useTableRowMenu","context","useContext","Error"],"mappings":"sMAGA,IAAMA,EAAsBC,OAAgDC,GAE/DC,EAAuB,SAAHC,GAAsD,IAAhDC,EAAKD,EAALC,MAAOC,EAAQF,EAARE,SACpCC,EAA8FF,EAA9FE,aAAcC,EAAgFH,EAAhFG,cAAeC,EAAiEJ,EAAjEI,WAAYC,EAAqDL,EAArDK,gBAAiBC,EAAoCN,EAApCM,iBAAkBC,EAAkBP,EAAlBO,cACpFC,EAAoDC,EAAS,GAAEC,EAAAC,EAAAH,EAAA,GAAxDI,EAAkBF,EAAA,GAAEG,EAAqBH,EAAA,GAC1CI,EAAgBC,GAAO,GAEvBC,EAAiBC,GACrB,SAACC,GACC,IAAId,EAAJ,CAEAE,EAAiBY,GACjB,IAAMC,EAAejB,EAAakB,QAAQC,wBAAwBC,IAC5DC,EAASL,EAAOE,QAAQC,wBAAwBC,IACtDT,EAAsBU,EAASJ,EALf,CAMjB,GACD,CAACf,EAAYE,EAAkBJ,IAG3BsB,EAAkBP,GAAY,WAC9Bb,GAAcU,EAAcM,SAChCd,EAAiB,KACnB,GAAG,CAACF,EAAYE,IAEVmB,EAAqBR,GAAY,WACrCH,EAAcM,SAAU,CACzB,GAAE,IAEGM,EAAsBT,GAAY,WACtCH,EAAcM,SAAU,EACpBhB,IAECD,eAAAA,EAAeiB,UAClBd,EAAiB,KAEpB,GAAE,CAACF,EAAYD,EAAeG,IAEzBqB,EAAoBV,GAAY,WACpCV,GAAc,EAChB,GAAG,CAACA,IAEEqB,EAAqBX,GAAY,WACrCV,GAAc,EAChB,GAAG,CAACA,IAEEsB,EAAeC,GACnB,iBAAM,MAAC,CACLC,aAAoC,QAAtBC,EAAA7B,eAAAA,EAAeiB,eAAO,IAAAY,OAAA,EAAAA,EAAEC,GACtC5B,gBAAAA,EACAO,mBAAAA,EACAI,eAAAA,EACAQ,gBAAAA,EACAC,mBAAAA,EACAC,oBAAAA,EACAC,kBAAAA,EACAC,mBAAAA,EACA,GACF,CACEzB,EACAE,EACAO,EACAY,EACAE,EACAV,EACAS,EACAE,EACAC,IAIJ,OAAOM,EAAAC,cAACxC,EAAoByC,SAAQ,CAACpC,MAAO6B,GAAe5B,EAC7D,EAEaoC,EAAkB,WAC7B,IAAMC,EAAUC,EAAW5C,GAC3B,IAAK2C,EACH,MAAUE,MAAM,qEAElB,OAAOF,CACT"}

package/dist/src/components/Tabs/Tab/Tab.js

@@ -1,2 +1,2 @@
-import{defineProperty as e,toConsumableArray as t}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import o from"classnames";import s,{forwardRef as r,useRef as i}from"react";import{noop as a}from"lodash-es";import n from"../../../hooks/useMergeRef.js";import{getStyle as c}from"../../../helpers/typesciptCssModulesHelper.js";import l from"../../Icon/Icon.js";import{getTestId as m,ComponentDefaultTestId as d}from"../../../tests/testIds.js";import p from"./Tab.module.scss.js";import f from"../../Tooltip/Tooltip.js";import{ComponentVibeId as u}from"../../../tests/constants.js";import{keyCodes as v}from"../../../constants/keyCodes.js";import"../../../constants/sizes.js";var b=r((function(r,b){var y=r.className,j=r.tabInnerClassName,C=r.id,T=r.value,k=void 0===T?0:T,E=r.disabled,I=void 0!==E&&E,N=r.active,h=void 0!==N&&N,A=r.focus,g=void 0!==A&&A,P=r.onClick,S=void 0===P?a:P,B=r.tooltipProps,H=void 0===B?{}:B,z=r.icon,D=r.iconType,F=r.iconSide,M=void 0===F?"left":F,R=r.children,_=r["data-testid"],w=i(null),x=n(b,w);return s.createElement(f,Object.assign({},H,{content:H.content}),s.createElement("li",{ref:x,key:C,className:o(p.tabWrapper,y,e(e(e({},p.active,h),p.disabled,I),p.tabFocusVisibleInset,g)),id:C,role:"tab","aria-selected":h,"aria-disabled":I,"data-testid":_||m(d.TAB,C),"data-vibe":u.TAB,onClick:function(){return!I&&S(k)},onKeyDown:function(e){e.key!==v.ENTER&&e.key!==v.SPACE||(e.preventDefault(),!I&&S(k))}},s.createElement("div",{className:o(p.tabInner,j)},function(){if(!z)return R;var e=s.createElement(l,{ariaHidden:!0,iconType:D,icon:z,className:o(p.tabIcon,c(p,M)),iconSize:18,ignoreFocusStyle:!0}),r=s.Children.toArray(R);return"left"===M?[e].concat(t(r)):[].concat(t(r),[e])}())))}));export{b as default};
+import{defineProperty as e,toConsumableArray as t}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import o from"classnames";import r,{forwardRef as a,useRef as i}from"react";import{noop as s}from"lodash-es";import n from"../../../hooks/useMergeRef.js";import{getStyle as l}from"../../../helpers/typesciptCssModulesHelper.js";import c from"../../Icon/Icon.js";import{getTestId as m,ComponentDefaultTestId as d}from"../../../tests/testIds.js";import p from"./Tab.module.scss.js";import f from"../../Tooltip/Tooltip.js";import{ComponentVibeId as u}from"../../../tests/constants.js";var b=a((function(a,b){var v=a.className,j=a.tabInnerClassName,y=a.id,I=a.value,T=void 0===I?0:I,C=a.disabled,h=void 0!==C&&C,N=a.active,g=void 0!==N&&N,k=a.focus,A=void 0!==k&&k,E=a.onClick,B=void 0===E?s:E,H=a.tooltipProps,P=void 0===H?{}:H,S=a.icon,F=a.iconType,M=a.iconSide,_=void 0===M?"left":M,x=a.children,z=a["data-testid"],O=i(null),R=n(b,O);return r.createElement(f,Object.assign({},P,{content:P.content}),r.createElement("li",{ref:R,key:y,className:o(p.tabWrapper,v,e(e(e({},p.active,g),p.disabled,h),p.tabFocusVisibleInset,A)),id:y,role:"tab","aria-selected":g,"aria-disabled":h,"data-testid":z||m(d.TAB,y),"data-vibe":u.TAB},r.createElement("a",{className:o(p.tabInner,j),onClick:function(){return!h&&B(T)}},function(){if(!S)return x;var e=r.createElement(c,{ariaHidden:!0,iconType:F,icon:S,className:o(p.tabIcon,l(p,_)),iconSize:18,ignoreFocusStyle:!0}),a=r.Children.toArray(x);return"left"===_?[e].concat(t(a)):[].concat(t(a),[e])}())))}));export{b as default};
 //# sourceMappingURL=Tab.js.map

package/dist/src/components/Tabs/Tab/Tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sources":["../../../../../src/components/Tabs/Tab/Tab.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { FC, forwardRef, ReactElement, useRef } from \"react\";\nimport { noop as NOOP } from \"lodash-es\";\nimport useMergeRef from \"../../../hooks/useMergeRef\";\nimport { getStyle } from \"../../../helpers/typesciptCssModulesHelper\";\nimport Icon from \"../../Icon/Icon\";\nimport VibeComponentProps from \"../../../types/VibeComponentProps\";\nimport { IconType } from \"../../Icon\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../tests/test-ids-utils\";\nimport styles from \"./Tab.module.scss\";\nimport { SubIcon } from \"../../../types/SubIcon\";\nimport Tooltip, { TooltipProps } from \"../../Tooltip/Tooltip\";\nimport { ComponentVibeId } from \"../../../tests/constants\";\nimport { keyCodes } from \"../../../constants\";\n\nexport interface TabProps extends VibeComponentProps {\n  /**\n   * Class name applied to the inner tab content.\n   */\n  tabInnerClassName?: string;\n  /**\n   * The index value of the tab.\n   */\n  value?: number;\n  /**\n   * If true, disables the tab.\n   */\n  disabled?: boolean;\n  /**\n   * If true, marks the tab as active.\n   */\n  active?: boolean;\n  /**\n   * If true, applies focus styles to the tab.\n   */\n  focus?: boolean;\n  /**\n   * The icon displayed in the tab.\n   */\n  icon?: SubIcon;\n  /**\n   * The type of icon.\n   */\n  iconType?: IconType;\n  /**\n   * The position of the icon relative to the text.\n   */\n  iconSide?: string;\n  /**\n   * Callback fired when the tab is clicked.\n   */\n  onClick?: (value: number) => void;\n  /**\n   * Props passed to the tab's tooltip.\n   */\n  tooltipProps?: Partial<TooltipProps>;\n  /**\n   * The content displayed inside the tab.\n   */\n  children?: string | ReactElement | ReactElement[];\n}\n\nconst Tab: FC<TabProps> = forwardRef(\n  (\n    {\n      className,\n      tabInnerClassName,\n      id,\n      value = 0,\n      disabled = false,\n      active = false,\n      focus = false,\n      onClick = NOOP,\n      tooltipProps = {} as TooltipProps,\n      icon,\n      iconType,\n      iconSide = \"left\",\n      children,\n      \"data-testid\": dataTestId\n    }: TabProps,\n    ref\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    function renderIconAndChildren() {\n      if (!icon) return children;\n\n      const iconElement = (\n        <Icon\n          ariaHidden={true}\n          iconType={iconType}\n          icon={icon}\n          className={cx(styles.tabIcon, getStyle(styles, iconSide))}\n          iconSize={18}\n          ignoreFocusStyle\n        />\n      );\n\n      const childrenArray = React.Children.toArray(children);\n\n      if (iconSide === \"left\") {\n        return [iconElement, ...childrenArray];\n      }\n\n      return [...childrenArray, iconElement];\n    }\n\n    function handleKeyDown(event: React.KeyboardEvent) {\n      if (event.key === keyCodes.ENTER || event.key === keyCodes.SPACE) {\n        event.preventDefault();\n        !disabled && onClick(value);\n      }\n    }\n\n    return (\n      <Tooltip {...tooltipProps} content={tooltipProps.content}>\n        <li\n          ref={mergedRef}\n          key={id}\n          className={cx(styles.tabWrapper, className, {\n            [styles.active]: active,\n            [styles.disabled]: disabled,\n            [styles.tabFocusVisibleInset]: focus\n          })}\n          id={id}\n          role=\"tab\"\n          aria-selected={active}\n          aria-disabled={disabled}\n          data-testid={dataTestId || getTestId(ComponentDefaultTestId.TAB, id)}\n          data-vibe={ComponentVibeId.TAB}\n          onClick={() => !disabled && onClick(value)}\n          onKeyDown={handleKeyDown}\n        >\n          <div className={cx(styles.tabInner, tabInnerClassName)}>{renderIconAndChildren()}</div>\n        </li>\n      </Tooltip>\n    );\n  }\n);\n\nexport default Tab;\n"],"names":["Tab","forwardRef","_ref","ref","className","tabInnerClassName","id","_ref$value","value","_ref$disabled","disabled","_ref$active","active","_ref$focus","focus","_ref$onClick","onClick","NOOP","_ref$tooltipProps","tooltipProps","icon","iconType","_ref$iconSide","iconSide","children","dataTestId","componentRef","useRef","mergedRef","useMergeRef","React","createElement","Tooltip","Object","assign","content","key","cx","styles","tabWrapper","_defineProperty","tabFocusVisibleInset","role","getTestId","ComponentDefaultTestId","TAB","ComponentVibeId","onKeyDown","event","keyCodes","ENTER","SPACE","preventDefault","tabInner","iconElement","Icon","ariaHidden","tabIcon","getStyle","iconSize","ignoreFocusStyle","childrenArray","Children","toArray","concat","_toConsumableArray","renderIconAndChildren"],"mappings":"yqBA8DMA,IAAAA,EAAoBC,GACxB,SAAAC,EAiBEC,GACE,IAhBAC,EAASF,EAATE,UACAC,EAAiBH,EAAjBG,kBACAC,EAAEJ,EAAFI,GAAEC,EAAAL,EACFM,MAAAA,OAAQ,IAAHD,EAAG,EAACA,EAAAE,EAAAP,EACTQ,SAAAA,OAAW,IAAHD,GAAQA,EAAAE,EAAAT,EAChBU,OAAAA,OAAS,IAAHD,GAAQA,EAAAE,EAAAX,EACdY,MAAAA,OAAQ,IAAHD,GAAQA,EAAAE,EAAAb,EACbc,QAAAA,OAAUC,IAAHF,EAAGE,EAAIF,EAAAG,EAAAhB,EACdiB,aAAAA,OAAY,IAAAD,EAAG,CAAkB,EAAAA,EACjCE,EAAIlB,EAAJkB,KACAC,EAAQnB,EAARmB,SAAQC,EAAApB,EACRqB,SAAAA,OAAW,IAAHD,EAAG,OAAMA,EACjBE,EAAQtB,EAARsB,SACeC,EAAUvB,EAAzB,eAIIwB,EAAeC,EAAO,MACtBC,EAAYC,EAAY1B,EAAKuB,GAgCnC,OACEI,EAACC,cAAAC,EAAYC,OAAAC,OAAA,CAAA,EAAAf,GAAcgB,QAAShB,EAAagB,UAC/CL,EAAAC,cAAA,KAAA,CACE5B,IAAKyB,EACLQ,IAAK9B,EACLF,UAAWiC,EAAGC,EAAOC,WAAYnC,EAASoC,EAAAA,EAAAA,EACvCF,GAAAA,EAAO1B,OAASA,GAChB0B,EAAO5B,SAAWA,GAClB4B,EAAOG,qBAAuB3B,IAEjCR,GAAIA,EACJoC,KAAK,MAAK,gBACK9B,EACA,gBAAAF,gBACFe,GAAckB,EAAUC,EAAuBC,IAAKvC,GAAG,YACzDwC,EAAgBD,IAC3B7B,QAAS,WAAA,OAAON,GAAYM,EAAQR,EAAM,EAC1CuC,UAxBN,SAAuBC,GACjBA,EAAMZ,MAAQa,EAASC,OAASF,EAAMZ,MAAQa,EAASE,QACzDH,EAAMI,kBACL1C,GAAYM,EAAQR,GAEzB,GAqBMsB,EAAAC,cAAA,MAAA,CAAK3B,UAAWiC,EAAGC,EAAOe,SAAUhD,IAjD1C,WACE,IAAKe,EAAM,OAAOI,EAElB,IAAM8B,EACJxB,gBAACyB,EAAI,CACHC,YAAY,EACZnC,SAAUA,EACVD,KAAMA,EACNhB,UAAWiC,EAAGC,EAAOmB,QAASC,EAASpB,EAAQf,IAC/CoC,SAAU,GACVC,kBAAgB,IAIdC,EAAgB/B,EAAMgC,SAASC,QAAQvC,GAE7C,MAAiB,SAAbD,EACF,CAAQ+B,GAAWU,OAAAC,EAAKJ,IAG1B,GAAAG,OAAAC,EAAWJ,IAAeP,GAC5B,CA4B+DY,KAIjE"}
+{"version":3,"file":"Tab.js","sources":["../../../../../src/components/Tabs/Tab/Tab.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { FC, forwardRef, ReactElement, useRef } from \"react\";\nimport { noop as NOOP } from \"lodash-es\";\nimport useMergeRef from \"../../../hooks/useMergeRef\";\nimport { getStyle } from \"../../../helpers/typesciptCssModulesHelper\";\nimport Icon from \"../../Icon/Icon\";\nimport VibeComponentProps from \"../../../types/VibeComponentProps\";\nimport { IconType } from \"../../Icon\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../tests/test-ids-utils\";\nimport styles from \"./Tab.module.scss\";\nimport { SubIcon } from \"../../../types/SubIcon\";\nimport Tooltip, { TooltipProps } from \"../../Tooltip/Tooltip\";\nimport { ComponentVibeId } from \"../../../tests/constants\";\n\nexport interface TabProps extends VibeComponentProps {\n  /**\n   * Class name applied to the inner tab content.\n   */\n  tabInnerClassName?: string;\n  /**\n   * The index value of the tab.\n   */\n  value?: number;\n  /**\n   * If true, disables the tab.\n   */\n  disabled?: boolean;\n  /**\n   * If true, marks the tab as active.\n   */\n  active?: boolean;\n  /**\n   * If true, applies focus styles to the tab.\n   */\n  focus?: boolean;\n  /**\n   * The icon displayed in the tab.\n   */\n  icon?: SubIcon;\n  /**\n   * The type of icon.\n   */\n  iconType?: IconType;\n  /**\n   * The position of the icon relative to the text.\n   */\n  iconSide?: string;\n  /**\n   * Callback fired when the tab is clicked.\n   */\n  onClick?: (value: number) => void;\n  /**\n   * Props passed to the tab's tooltip.\n   */\n  tooltipProps?: Partial<TooltipProps>;\n  /**\n   * The content displayed inside the tab.\n   */\n  children?: string | ReactElement | ReactElement[];\n}\n\nconst Tab: FC<TabProps> = forwardRef(\n  (\n    {\n      className,\n      tabInnerClassName,\n      id,\n      value = 0,\n      disabled = false,\n      active = false,\n      focus = false,\n      onClick = NOOP,\n      tooltipProps = {} as TooltipProps,\n      icon,\n      iconType,\n      iconSide = \"left\",\n      children,\n      \"data-testid\": dataTestId\n    }: TabProps,\n    ref\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    function renderIconAndChildren() {\n      if (!icon) return children;\n\n      const iconElement = (\n        <Icon\n          ariaHidden={true}\n          iconType={iconType}\n          icon={icon}\n          className={cx(styles.tabIcon, getStyle(styles, iconSide))}\n          iconSize={18}\n          ignoreFocusStyle\n        />\n      );\n\n      const childrenArray = React.Children.toArray(children);\n\n      if (iconSide === \"left\") {\n        return [iconElement, ...childrenArray];\n      }\n\n      return [...childrenArray, iconElement];\n    }\n    return (\n      <Tooltip {...tooltipProps} content={tooltipProps.content}>\n        <li\n          ref={mergedRef}\n          key={id}\n          className={cx(styles.tabWrapper, className, {\n            [styles.active]: active,\n            [styles.disabled]: disabled,\n            [styles.tabFocusVisibleInset]: focus\n          })}\n          id={id}\n          role=\"tab\"\n          aria-selected={active}\n          aria-disabled={disabled}\n          data-testid={dataTestId || getTestId(ComponentDefaultTestId.TAB, id)}\n          data-vibe={ComponentVibeId.TAB}\n        >\n          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid,jsx-a11y/click-events-have-key-events */}\n          <a className={cx(styles.tabInner, tabInnerClassName)} onClick={() => !disabled && onClick(value)}>\n            {renderIconAndChildren()}\n          </a>\n        </li>\n      </Tooltip>\n    );\n  }\n);\n\nexport default Tab;\n"],"names":["Tab","forwardRef","_ref","ref","className","tabInnerClassName","id","_ref$value","value","_ref$disabled","disabled","_ref$active","active","_ref$focus","focus","_ref$onClick","onClick","NOOP","_ref$tooltipProps","tooltipProps","icon","iconType","_ref$iconSide","iconSide","children","dataTestId","componentRef","useRef","mergedRef","useMergeRef","React","createElement","Tooltip","Object","assign","content","key","cx","styles","tabWrapper","_defineProperty","tabFocusVisibleInset","role","getTestId","ComponentDefaultTestId","TAB","ComponentVibeId","tabInner","iconElement","Icon","ariaHidden","tabIcon","getStyle","iconSize","ignoreFocusStyle","childrenArray","Children","toArray","concat","_toConsumableArray","renderIconAndChildren"],"mappings":"2kBA6DMA,IAAAA,EAAoBC,GACxB,SAAAC,EAiBEC,GACE,IAhBAC,EAASF,EAATE,UACAC,EAAiBH,EAAjBG,kBACAC,EAAEJ,EAAFI,GAAEC,EAAAL,EACFM,MAAAA,OAAQ,IAAHD,EAAG,EAACA,EAAAE,EAAAP,EACTQ,SAAAA,OAAW,IAAHD,GAAQA,EAAAE,EAAAT,EAChBU,OAAAA,OAAS,IAAHD,GAAQA,EAAAE,EAAAX,EACdY,MAAAA,OAAQ,IAAHD,GAAQA,EAAAE,EAAAb,EACbc,QAAAA,OAAUC,IAAHF,EAAGE,EAAIF,EAAAG,EAAAhB,EACdiB,aAAAA,OAAY,IAAAD,EAAG,CAAkB,EAAAA,EACjCE,EAAIlB,EAAJkB,KACAC,EAAQnB,EAARmB,SAAQC,EAAApB,EACRqB,SAAAA,OAAW,IAAHD,EAAG,OAAMA,EACjBE,EAAQtB,EAARsB,SACeC,EAAUvB,EAAzB,eAIIwB,EAAeC,EAAO,MACtBC,EAAYC,EAAY1B,EAAKuB,GAwBnC,OACEI,EAACC,cAAAC,EAAYC,OAAAC,OAAA,CAAA,EAAAf,GAAcgB,QAAShB,EAAagB,UAC/CL,EAAAC,cAAA,KAAA,CACE5B,IAAKyB,EACLQ,IAAK9B,EACLF,UAAWiC,EAAGC,EAAOC,WAAYnC,EAASoC,EAAAA,EAAAA,EACvCF,GAAAA,EAAO1B,OAASA,GAChB0B,EAAO5B,SAAWA,GAClB4B,EAAOG,qBAAuB3B,IAEjCR,GAAIA,EACJoC,KAAK,MAAK,gBACK9B,EAAM,gBACNF,EAAQ,cACVe,GAAckB,EAAUC,EAAuBC,IAAKvC,GAAG,YACzDwC,EAAgBD,KAG3Bf,EAAAC,cAAA,IAAA,CAAG3B,UAAWiC,EAAGC,EAAOS,SAAU1C,GAAoBW,QAAS,WAAA,OAAON,GAAYM,EAAQR,EAAM,GAxCtG,WACE,IAAKY,EAAM,OAAOI,EAElB,IAAMwB,EACJlB,gBAACmB,EAAI,CACHC,YAAY,EACZ7B,SAAUA,EACVD,KAAMA,EACNhB,UAAWiC,EAAGC,EAAOa,QAASC,EAASd,EAAQf,IAC/C8B,SAAU,GACVC,kBAAgB,IAIdC,EAAgBzB,EAAM0B,SAASC,QAAQjC,GAE7C,MAAiB,SAAbD,EACF,CAAQyB,GAAWU,OAAAC,EAAKJ,IAG1B,GAAAG,OAAAC,EAAWJ,IAAeP,GAC5B,CAoBSY,KAKX"}

package/dist/src/components/Tabs/TabList/TabList.js

@@ -1,2 +1,2 @@
-import{slicedToArray as e}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import t from"classnames";import{camelCase as r}from"lodash-es";import s,{forwardRef as a,useRef as o,useState as i,useEffect as n,useMemo as l,useCallback as m}from"react";import d from"../../../hooks/useGridKeyboardNavigation/useGridKeyboardNavigation.js";import u from"../../../hooks/useMergeRef.js";import c from"../../../hooks/usePrevious/index.js";import{NOOP as p}from"../../../utils/function-utils.js";import{getTestId as f,ComponentDefaultTestId as b}from"../../../tests/testIds.js";import{getStyle as v}from"../../../helpers/typesciptCssModulesHelper.js";import h from"./TabList.module.scss.js";var I=a((function(a,I){var C=a.className,g=a.id,N=a.onTabChange,T=void 0===N?p:N,j=a.activeTabId,y=void 0===j?0:j,L=a.tabType,k=void 0===L?"Compact":L,x=a.size,A=a.children,E=a["data-testid"],B=o(null),S=u(I,B),_=i(y),G=e(_,2),H=G[0],K=G[1],M=c(y);n((function(){y!==M&&y!==H&&K(y)}),[y,M,H,K]);var O=l((function(){var e=new Set;return s.Children.forEach(A,(function(t,r){t.props.disabled&&e.add(r)})),e}),[A]),P=m((function(e){O.has(e)||(K(e),T&&T(e))}),[T,O]),W=m((function(e,t){var r,s=null===(r=A[t].props)||void 0===r?void 0:r.onClick;O.has(t)||(s&&s(t),P(t))}),[A,O,P]),w=m((function(e){return A[e]}),[A]),z=l((function(){return Array.from(O)}),[O]),R=o(),q=d({ref:R,numberOfItemsInLine:null==A?void 0:A.length,itemsCount:null==A?void 0:A.length,getItemByIndex:w,onItemClicked:W,disabledIndexes:z,circularNavigation:!0}),D=q.activeIndex,F=q.onSelectionAction,J=l((function(){return s.Children.map(A,(function(e,r){return s.cloneElement(e,{value:r,active:H===r,focus:D===r,onClick:F,className:t(h.tabListTabWrapper,e.props.className),tabInnerClassName:t(h.tabListTabInner,e.props.tabInnerClassName)})}))}),[A,H,D,F]);return s.createElement("div",{ref:S,className:t(h.tabsWrapper,C,[v(h,r(k))]),id:g,"data-testid":E||f(b.TAB_LIST,g)},s.createElement("ul",{ref:R,tabIndex:0,className:t(h.tabsList,[v(h,x)]),role:"tablist"},J))}));Object.assign(I,{isTabList:!0});export{I as default};
+import{slicedToArray as e}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import t from"classnames";import{camelCase as r}from"lodash-es";import s,{forwardRef as o,useRef as a,useState as i,useEffect as n,useMemo as l,useCallback as m}from"react";import d from"../../../hooks/useGridKeyboardNavigation/useGridKeyboardNavigation.js";import u from"../../../hooks/useMergeRef.js";import c from"../../../hooks/usePrevious/index.js";import{NOOP as p}from"../../../utils/function-utils.js";import{getTestId as f,ComponentDefaultTestId as b}from"../../../tests/testIds.js";import{getStyle as v}from"../../../helpers/typesciptCssModulesHelper.js";import h from"./TabList.module.scss.js";var I=o((function(o,I){var C=o.className,T=o.id,g=o.onTabChange,j=void 0===g?p:g,N=o.activeTabId,y=void 0===N?0:N,L=o.tabType,k=void 0===L?"Compact":L,x=o.size,A=o.children,E=o["data-testid"],B=a(null),S=u(I,B),_=i(y),G=e(_,2),H=G[0],K=G[1],M=c(y);n((function(){y!==M&&y!==H&&K(y)}),[y,M,H,K]);var O=l((function(){var e=new Set;return s.Children.forEach(A,(function(t,r){t.props.disabled&&e.add(r)})),e}),[A]),P=m((function(e){O.has(e)||(K(e),j&&j(e))}),[j,O]),W=m((function(e,t){var r,s=null===(r=A[t].props)||void 0===r?void 0:r.onClick;O.has(t)||(s&&s(t),P(t))}),[A,O,P]),w=m((function(e){return A[e]}),[A]),z=l((function(){return Array.from(O)}),[O]),R=a(),q=d({ref:R,numberOfItemsInLine:null==A?void 0:A.length,itemsCount:null==A?void 0:A.length,getItemByIndex:w,onItemClicked:W,disabledIndexes:z}),D=q.activeIndex,F=q.onSelectionAction,J=l((function(){return s.Children.map(A,(function(e,r){return s.cloneElement(e,{value:r,active:H===r,focus:D===r,onClick:F,className:t(h.tabListTabWrapper,e.props.className),tabInnerClassName:t(h.tabListTabInner,e.props.tabInnerClassName)})}))}),[A,H,D,F]);return s.createElement("div",{ref:S,className:t(h.tabsWrapper,C,[v(h,r(k))]),id:T,"data-testid":E||f(b.TAB_LIST,T)},s.createElement("ul",{ref:R,tabIndex:0,className:t(h.tabsList,[v(h,x)]),role:"tablist"},J))}));Object.assign(I,{isTabList:!0});export{I as default};
 //# sourceMappingURL=TabList.js.map

package/dist/src/components/Tabs/TabList/TabList.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabList.js","sources":["../../../../../src/components/Tabs/TabList/TabList.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport { camelCase } from \"lodash-es\";\nimport React, { FC, forwardRef, ReactElement, useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport useGridKeyboardNavigation from \"../../../hooks/useGridKeyboardNavigation/useGridKeyboardNavigation\";\nimport useMergeRef from \"../../../hooks/useMergeRef\";\nimport usePrevious from \"../../../hooks/usePrevious\";\nimport VibeComponentProps from \"../../../types/VibeComponentProps\";\nimport { NOOP } from \"../../../utils/function-utils\";\nimport { TabProps } from \"../Tab/Tab\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../tests/test-ids-utils\";\nimport { getStyle } from \"../../../helpers/typesciptCssModulesHelper\";\nimport styles from \"./TabList.module.scss\";\n\nexport interface TabListProps extends VibeComponentProps {\n  /**\n   * Callback fired when the active tab changes.\n   */\n  onTabChange?: (tabId: number) => void;\n  /**\n   * The index of the currently active tab.\n   */\n  activeTabId?: number;\n  /**\n   * The type of tab style.\n   */\n  tabType?: string;\n  /**\n   * The size of the tab list.\n   */\n  size?: string;\n  /**\n   * The child elements representing tabs.\n   */\n  children?: ReactElement<TabProps>[];\n}\n\nconst TabList: FC<TabListProps> = forwardRef(\n  (\n    {\n      className,\n      id,\n      onTabChange = NOOP,\n      activeTabId = 0,\n      tabType = \"Compact\",\n      size,\n      children,\n      \"data-testid\": dataTestId\n    },\n    ref\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    const [activeTabState, setActiveTabState] = useState<number>(activeTabId);\n\n    const prevActiveTabIdProp = usePrevious(activeTabId);\n\n    useEffect(() => {\n      // Update active tab if changed from props\n      if (activeTabId !== prevActiveTabIdProp && activeTabId !== activeTabState) {\n        setActiveTabState(activeTabId);\n      }\n    }, [activeTabId, prevActiveTabIdProp, activeTabState, setActiveTabState]);\n\n    const disabledTabIds = useMemo(() => {\n      const disabledIds = new Set<number>();\n      React.Children.forEach(children, (child, index) => {\n        if (child.props.disabled) {\n          disabledIds.add(index);\n        }\n      });\n      return disabledIds;\n    }, [children]);\n\n    const onTabSelect = useCallback(\n      (tabId: number) => {\n        if (disabledTabIds.has(tabId)) return;\n        setActiveTabState(tabId);\n        onTabChange && onTabChange(tabId);\n      },\n      [onTabChange, disabledTabIds]\n    );\n\n    const onTabClick = useCallback(\n      (value: HTMLElement | void, tabId: number) => {\n        const tabCallbackFunc = children[tabId].props?.onClick;\n        if (disabledTabIds.has(tabId)) return;\n        if (tabCallbackFunc) tabCallbackFunc(tabId);\n        onTabSelect(tabId);\n      },\n      [children, disabledTabIds, onTabSelect]\n    );\n\n    const getItemByIndex = useCallback((index: number): ReactElement<TabProps> => children[index], [children]);\n    const disabledIndexes = useMemo(() => Array.from(disabledTabIds), [disabledTabIds]);\n    const ulRef = useRef();\n    const { activeIndex: focusIndex, onSelectionAction } = useGridKeyboardNavigation({\n      ref: ulRef,\n      numberOfItemsInLine: children?.length,\n      itemsCount: children?.length,\n      getItemByIndex,\n      onItemClicked: onTabClick,\n      disabledIndexes,\n      circularNavigation: true\n    });\n\n    const tabsToRender = useMemo(() => {\n      const childrenToRender = React.Children.map(children, (child, index) => {\n        return React.cloneElement(child, {\n          value: index,\n          active: activeTabState === index,\n          focus: focusIndex === index,\n          onClick: onSelectionAction,\n          className: cx(styles.tabListTabWrapper, child.props.className),\n          tabInnerClassName: cx(styles.tabListTabInner, child.props.tabInnerClassName)\n        });\n      });\n      return childrenToRender;\n    }, [children, activeTabState, focusIndex, onSelectionAction]);\n\n    return (\n      <div\n        ref={mergedRef}\n        className={cx(styles.tabsWrapper, className, [getStyle(styles, camelCase(tabType))])}\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.TAB_LIST, id)}\n      >\n        <ul ref={ulRef} tabIndex={0} className={cx(styles.tabsList, [getStyle(styles, size)])} role=\"tablist\">\n          {tabsToRender}\n        </ul>\n      </div>\n    );\n  }\n);\n\nObject.assign(TabList, {\n  isTabList: true\n});\n\nexport default TabList;\n"],"names":["TabList","forwardRef","_ref","ref","className","id","_ref$onTabChange","onTabChange","NOOP","_ref$activeTabId","activeTabId","_ref$tabType","tabType","size","children","dataTestId","componentRef","useRef","mergedRef","useMergeRef","_useState","useState","_useState2","_slicedToArray","activeTabState","setActiveTabState","prevActiveTabIdProp","usePrevious","useEffect","disabledTabIds","useMemo","disabledIds","Set","React","Children","forEach","child","index","props","disabled","add","onTabSelect","useCallback","tabId","has","onTabClick","value","tabCallbackFunc","_a","onClick","getItemByIndex","disabledIndexes","Array","from","ulRef","_useGridKeyboardNavig","useGridKeyboardNavigation","numberOfItemsInLine","length","itemsCount","onItemClicked","circularNavigation","focusIndex","activeIndex","onSelectionAction","tabsToRender","map","cloneElement","active","focus","cx","styles","tabListTabWrapper","tabInnerClassName","tabListTabInner","createElement","tabsWrapper","getStyle","camelCase","getTestId","ComponentDefaultTestId","TAB_LIST","tabIndex","tabsList","role","Object","assign","isTabList"],"mappings":"+qBAoCMA,IAAAA,EAA4BC,GAChC,SAAAC,EAWEC,GACE,IAVAC,EAASF,EAATE,UACAC,EAAEH,EAAFG,GAAEC,EAAAJ,EACFK,YAAAA,OAAcC,IAAHF,EAAGE,EAAIF,EAAAG,EAAAP,EAClBQ,YAAAA,OAAc,IAAHD,EAAG,EAACA,EAAAE,EAAAT,EACfU,QAAAA,OAAU,IAAHD,EAAG,UAASA,EACnBE,EAAIX,EAAJW,KACAC,EAAQZ,EAARY,SACeC,EAAUb,EAAzB,eAIIc,EAAeC,EAAO,MACtBC,EAAYC,EAAYhB,EAAKa,GAEnCI,EAA4CC,EAAiBX,GAAYY,EAAAC,EAAAH,EAAA,GAAlEI,EAAcF,EAAA,GAAEG,EAAiBH,EAAA,GAElCI,EAAsBC,EAAYjB,GAExCkB,GAAU,WAEJlB,IAAgBgB,GAAuBhB,IAAgBc,GACzDC,EAAkBf,EAErB,GAAE,CAACA,EAAagB,EAAqBF,EAAgBC,IAEtD,IAAMI,EAAiBC,GAAQ,WAC7B,IAAMC,EAAc,IAAIC,IAMxB,OALAC,EAAMC,SAASC,QAAQrB,GAAU,SAACsB,EAAOC,GACnCD,EAAME,MAAMC,UACdR,EAAYS,IAAIH,EAEpB,IACON,CACT,GAAG,CAACjB,IAEE2B,EAAcC,GAClB,SAACC,GACKd,EAAee,IAAID,KACvBlB,EAAkBkB,GAClBpC,GAAeA,EAAYoC,GAC7B,GACA,CAACpC,EAAasB,IAGVgB,EAAaH,GACjB,SAACI,EAA2BH,SACpBI,EAAyC,QAAvBC,EAAAlC,EAAS6B,GAAOL,aAAO,IAAAU,OAAA,EAAAA,EAAAC,QAC3CpB,EAAee,IAAID,KACnBI,GAAiBA,EAAgBJ,GACrCF,EAAYE,GACb,GACD,CAAC7B,EAAUe,EAAgBY,IAGvBS,EAAiBR,GAAY,SAACL,GAAa,OAA6BvB,EAASuB,KAAQ,CAACvB,IAC1FqC,EAAkBrB,GAAQ,WAAA,OAAMsB,MAAMC,KAAKxB,KAAiB,CAACA,IAC7DyB,EAAQrC,IACdsC,EAAuDC,EAA0B,CAC/ErD,IAAKmD,EACLG,oBAAqB3C,aAAA,EAAAA,EAAU4C,OAC/BC,WAAY7C,aAAA,EAAAA,EAAU4C,OACtBR,eAAAA,EACAU,cAAef,EACfM,gBAAAA,EACAU,oBAAoB,IAPDC,EAAUP,EAAvBQ,YAAyBC,EAAiBT,EAAjBS,kBAU3BC,EAAenC,GAAQ,WAW3B,OAVyBG,EAAMC,SAASgC,IAAIpD,GAAU,SAACsB,EAAOC,GAC5D,OAAOJ,EAAMkC,aAAa/B,EAAO,CAC/BU,MAAOT,EACP+B,OAAQ5C,IAAmBa,EAC3BgC,MAAOP,IAAezB,EACtBY,QAASe,EACT5D,UAAWkE,EAAGC,EAAOC,kBAAmBpC,EAAME,MAAMlC,WACpDqE,kBAAmBH,EAAGC,EAAOG,gBAAiBtC,EAAME,MAAMmC,oBAE9D,GAED,GAAE,CAAC3D,EAAUU,EAAgBsC,EAAYE,IAE1C,OACE/B,EACE0C,cAAA,MAAA,CAAAxE,IAAKe,EACLd,UAAWkE,EAAGC,EAAOK,YAAaxE,EAAW,CAACyE,EAASN,EAAQO,EAAUlE,MACzEP,GAAIA,gBACSU,GAAcgE,EAAUC,EAAuBC,SAAU5E,IAEtE4B,EAAA0C,cAAA,KAAA,CAAIxE,IAAKmD,EAAO4B,SAAU,EAAG9E,UAAWkE,EAAGC,EAAOY,SAAU,CAACN,EAASN,EAAQ1D,KAASuE,KAAK,WACzFnB,GAIT,IAGFoB,OAAOC,OAAOtF,EAAS,CACrBuF,WAAW"}
+{"version":3,"file":"TabList.js","sources":["../../../../../src/components/Tabs/TabList/TabList.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport { camelCase } from \"lodash-es\";\nimport React, { FC, forwardRef, ReactElement, useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport useGridKeyboardNavigation from \"../../../hooks/useGridKeyboardNavigation/useGridKeyboardNavigation\";\nimport useMergeRef from \"../../../hooks/useMergeRef\";\nimport usePrevious from \"../../../hooks/usePrevious\";\nimport VibeComponentProps from \"../../../types/VibeComponentProps\";\nimport { NOOP } from \"../../../utils/function-utils\";\nimport { TabProps } from \"../Tab/Tab\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../tests/test-ids-utils\";\nimport { getStyle } from \"../../../helpers/typesciptCssModulesHelper\";\nimport styles from \"./TabList.module.scss\";\n\nexport interface TabListProps extends VibeComponentProps {\n  /**\n   * Callback fired when the active tab changes.\n   */\n  onTabChange?: (tabId: number) => void;\n  /**\n   * The index of the currently active tab.\n   */\n  activeTabId?: number;\n  /**\n   * The type of tab style.\n   */\n  tabType?: string;\n  /**\n   * The size of the tab list.\n   */\n  size?: string;\n  /**\n   * The child elements representing tabs.\n   */\n  children?: ReactElement<TabProps>[];\n}\n\nconst TabList: FC<TabListProps> = forwardRef(\n  (\n    {\n      className,\n      id,\n      onTabChange = NOOP,\n      activeTabId = 0,\n      tabType = \"Compact\",\n      size,\n      children,\n      \"data-testid\": dataTestId\n    },\n    ref\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    const [activeTabState, setActiveTabState] = useState<number>(activeTabId);\n\n    const prevActiveTabIdProp = usePrevious(activeTabId);\n\n    useEffect(() => {\n      // Update active tab if changed from props\n      if (activeTabId !== prevActiveTabIdProp && activeTabId !== activeTabState) {\n        setActiveTabState(activeTabId);\n      }\n    }, [activeTabId, prevActiveTabIdProp, activeTabState, setActiveTabState]);\n\n    const disabledTabIds = useMemo(() => {\n      const disabledIds = new Set<number>();\n      React.Children.forEach(children, (child, index) => {\n        if (child.props.disabled) {\n          disabledIds.add(index);\n        }\n      });\n      return disabledIds;\n    }, [children]);\n\n    const onTabSelect = useCallback(\n      (tabId: number) => {\n        if (disabledTabIds.has(tabId)) return;\n        setActiveTabState(tabId);\n        onTabChange && onTabChange(tabId);\n      },\n      [onTabChange, disabledTabIds]\n    );\n\n    const onTabClick = useCallback(\n      (value: HTMLElement | void, tabId: number) => {\n        const tabCallbackFunc = children[tabId].props?.onClick;\n        if (disabledTabIds.has(tabId)) return;\n        if (tabCallbackFunc) tabCallbackFunc(tabId);\n        onTabSelect(tabId);\n      },\n      [children, disabledTabIds, onTabSelect]\n    );\n\n    const getItemByIndex = useCallback((index: number): ReactElement<TabProps> => children[index], [children]);\n    const disabledIndexes = useMemo(() => Array.from(disabledTabIds), [disabledTabIds]);\n    const ulRef = useRef();\n    const { activeIndex: focusIndex, onSelectionAction } = useGridKeyboardNavigation({\n      ref: ulRef,\n      numberOfItemsInLine: children?.length,\n      itemsCount: children?.length,\n      getItemByIndex,\n      onItemClicked: onTabClick,\n      disabledIndexes\n    });\n\n    const tabsToRender = useMemo(() => {\n      const childrenToRender = React.Children.map(children, (child, index) => {\n        return React.cloneElement(child, {\n          value: index,\n          active: activeTabState === index,\n          focus: focusIndex === index,\n          onClick: onSelectionAction,\n          className: cx(styles.tabListTabWrapper, child.props.className),\n          tabInnerClassName: cx(styles.tabListTabInner, child.props.tabInnerClassName)\n        });\n      });\n      return childrenToRender;\n    }, [children, activeTabState, focusIndex, onSelectionAction]);\n\n    return (\n      <div\n        ref={mergedRef}\n        className={cx(styles.tabsWrapper, className, [getStyle(styles, camelCase(tabType))])}\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.TAB_LIST, id)}\n      >\n        <ul ref={ulRef} tabIndex={0} className={cx(styles.tabsList, [getStyle(styles, size)])} role=\"tablist\">\n          {tabsToRender}\n        </ul>\n      </div>\n    );\n  }\n);\n\nObject.assign(TabList, {\n  isTabList: true\n});\n\nexport default TabList;\n"],"names":["TabList","forwardRef","_ref","ref","className","id","_ref$onTabChange","onTabChange","NOOP","_ref$activeTabId","activeTabId","_ref$tabType","tabType","size","children","dataTestId","componentRef","useRef","mergedRef","useMergeRef","_useState","useState","_useState2","_slicedToArray","activeTabState","setActiveTabState","prevActiveTabIdProp","usePrevious","useEffect","disabledTabIds","useMemo","disabledIds","Set","React","Children","forEach","child","index","props","disabled","add","onTabSelect","useCallback","tabId","has","onTabClick","value","tabCallbackFunc","_a","onClick","getItemByIndex","disabledIndexes","Array","from","ulRef","_useGridKeyboardNavig","useGridKeyboardNavigation","numberOfItemsInLine","length","itemsCount","onItemClicked","focusIndex","activeIndex","onSelectionAction","tabsToRender","map","cloneElement","active","focus","cx","styles","tabListTabWrapper","tabInnerClassName","tabListTabInner","createElement","tabsWrapper","getStyle","camelCase","getTestId","ComponentDefaultTestId","TAB_LIST","tabIndex","tabsList","role","Object","assign","isTabList"],"mappings":"+qBAoCMA,IAAAA,EAA4BC,GAChC,SAAAC,EAWEC,GACE,IAVAC,EAASF,EAATE,UACAC,EAAEH,EAAFG,GAAEC,EAAAJ,EACFK,YAAAA,OAAcC,IAAHF,EAAGE,EAAIF,EAAAG,EAAAP,EAClBQ,YAAAA,OAAc,IAAHD,EAAG,EAACA,EAAAE,EAAAT,EACfU,QAAAA,OAAU,IAAHD,EAAG,UAASA,EACnBE,EAAIX,EAAJW,KACAC,EAAQZ,EAARY,SACeC,EAAUb,EAAzB,eAIIc,EAAeC,EAAO,MACtBC,EAAYC,EAAYhB,EAAKa,GAEnCI,EAA4CC,EAAiBX,GAAYY,EAAAC,EAAAH,EAAA,GAAlEI,EAAcF,EAAA,GAAEG,EAAiBH,EAAA,GAElCI,EAAsBC,EAAYjB,GAExCkB,GAAU,WAEJlB,IAAgBgB,GAAuBhB,IAAgBc,GACzDC,EAAkBf,EAErB,GAAE,CAACA,EAAagB,EAAqBF,EAAgBC,IAEtD,IAAMI,EAAiBC,GAAQ,WAC7B,IAAMC,EAAc,IAAIC,IAMxB,OALAC,EAAMC,SAASC,QAAQrB,GAAU,SAACsB,EAAOC,GACnCD,EAAME,MAAMC,UACdR,EAAYS,IAAIH,EAEpB,IACON,CACT,GAAG,CAACjB,IAEE2B,EAAcC,GAClB,SAACC,GACKd,EAAee,IAAID,KACvBlB,EAAkBkB,GAClBpC,GAAeA,EAAYoC,GAC7B,GACA,CAACpC,EAAasB,IAGVgB,EAAaH,GACjB,SAACI,EAA2BH,SACpBI,EAAyC,QAAvBC,EAAAlC,EAAS6B,GAAOL,aAAO,IAAAU,OAAA,EAAAA,EAAAC,QAC3CpB,EAAee,IAAID,KACnBI,GAAiBA,EAAgBJ,GACrCF,EAAYE,GACb,GACD,CAAC7B,EAAUe,EAAgBY,IAGvBS,EAAiBR,GAAY,SAACL,GAAa,OAA6BvB,EAASuB,KAAQ,CAACvB,IAC1FqC,EAAkBrB,GAAQ,WAAA,OAAMsB,MAAMC,KAAKxB,KAAiB,CAACA,IAC7DyB,EAAQrC,IACdsC,EAAuDC,EAA0B,CAC/ErD,IAAKmD,EACLG,oBAAqB3C,aAAA,EAAAA,EAAU4C,OAC/BC,WAAY7C,aAAA,EAAAA,EAAU4C,OACtBR,eAAAA,EACAU,cAAef,EACfM,gBAAAA,IANmBU,EAAUN,EAAvBO,YAAyBC,EAAiBR,EAAjBQ,kBAS3BC,EAAelC,GAAQ,WAW3B,OAVyBG,EAAMC,SAAS+B,IAAInD,GAAU,SAACsB,EAAOC,GAC5D,OAAOJ,EAAMiC,aAAa9B,EAAO,CAC/BU,MAAOT,EACP8B,OAAQ3C,IAAmBa,EAC3B+B,MAAOP,IAAexB,EACtBY,QAASc,EACT3D,UAAWiE,EAAGC,EAAOC,kBAAmBnC,EAAME,MAAMlC,WACpDoE,kBAAmBH,EAAGC,EAAOG,gBAAiBrC,EAAME,MAAMkC,oBAE9D,GAED,GAAE,CAAC1D,EAAUU,EAAgBqC,EAAYE,IAE1C,OACE9B,EACEyC,cAAA,MAAA,CAAAvE,IAAKe,EACLd,UAAWiE,EAAGC,EAAOK,YAAavE,EAAW,CAACwE,EAASN,EAAQO,EAAUjE,MACzEP,GAAIA,gBACSU,GAAc+D,EAAUC,EAAuBC,SAAU3E,IAEtE4B,EAAAyC,cAAA,KAAA,CAAIvE,IAAKmD,EAAO2B,SAAU,EAAG7E,UAAWiE,EAAGC,EAAOY,SAAU,CAACN,EAASN,EAAQzD,KAASsE,KAAK,WACzFnB,GAIT,IAGFoB,OAAOC,OAAOrF,EAAS,CACrBsF,WAAW"}

package/dist/src/hooks/useGridKeyboardNavigation/gridKeyboardNavigationHelper.js

@@ -1,2 +1,2 @@
-import{NavDirections as n}from"../useFullKeyboardListeners.js";function e(e){var t=e.direction,i=e.numberOfItemsInLine,r=e.itemsCount,u=function(){var e=Math.floor(i/2);if(t===n.UP)return(Math.ceil(r/i)-1)*i+e;if(t===n.DOWN)return e;if(t===n.LEFT){for(var u=i-1,o=Math.floor((r-1)/2);o>u;)u+=i;return u}if(t===n.RIGHT){for(var a=0,c=Math.floor((r-1)/2);c>a+i;)a+=i;return a}}();return Math.max(0,Math.min(u,r-1))}function t(e){var t=e.activeIndex,i=e.itemsCount,r=e.numberOfItemsInLine,u=e.circularNavigation,o=void 0!==u&&u,a=function(n){return Math.ceil((n+1)/r)},c=function(n){var e=t+(n?1:-1);if(0>e||e>=i){if(!o)return{isOutbound:!0};0>e?e=i-1:i>e||(e=0)}return a(t)!==a(e)?{isOutbound:!0}:{isOutbound:!1,nextIndex:e}},s=function(n){var e=t+r*(n?1:-1);return 0>e||e>=i?{isOutbound:!0}:{isOutbound:!1,nextIndex:e}};switch(e.direction){case n.RIGHT:return c(!0);case n.LEFT:return c(!1);case n.DOWN:return s(!0);case n.UP:return s(!1)}}function i(n){for(var e=n.itemsCount,i=n.numberOfItemsInLine,r=n.direction,u=n.disabledIndexes,o=void 0===u?[]:u,a=n.circularNavigation,c=void 0!==a&&a,s=t({activeIndex:n.activeIndex,itemsCount:e,numberOfItemsInLine:i,direction:r,circularNavigation:c});!s.isOutbound&&o.includes(s.nextIndex);)s=t({activeIndex:s.nextIndex,itemsCount:e,numberOfItemsInLine:i,direction:r,circularNavigation:c});return s}export{i as calcActiveIndexAfterArrowNavigation,e as getActiveIndexFromInboundNavigation};
+import{NavDirections as n}from"../useFullKeyboardListeners.js";function e(e){var t=e.direction,r=e.numberOfItemsInLine,i=e.itemsCount,u=function(){var e=Math.floor(r/2);if(t===n.UP)return(Math.ceil(i/r)-1)*r+e;if(t===n.DOWN)return e;if(t===n.LEFT){for(var u=r-1,o=Math.floor((i-1)/2);o>u;)u+=r;return u}if(t===n.RIGHT){for(var s=0,a=Math.floor((i-1)/2);a>s+r;)s+=r;return s}}();return Math.max(0,Math.min(u,i-1))}function t(e){var t=e.activeIndex,r=e.itemsCount,i=e.numberOfItemsInLine,u=function(n){return Math.ceil((n+1)/i)},o=function(n){var e=t+(n?1:-1);return 0>e||e>=r||u(t)!==u(e)?{isOutbound:!0}:{isOutbound:!1,nextIndex:e}},s=function(n){var e=t+i*(n?1:-1);return 0>e||e>=r?{isOutbound:!0}:{isOutbound:!1,nextIndex:e}};switch(e.direction){case n.RIGHT:return o(!0);case n.LEFT:return o(!1);case n.DOWN:return s(!0);case n.UP:return s(!1)}}function r(n){for(var e=n.itemsCount,r=n.numberOfItemsInLine,i=n.direction,u=n.disabledIndexes,o=void 0===u?[]:u,s=t({activeIndex:n.activeIndex,itemsCount:e,numberOfItemsInLine:r,direction:i});!s.isOutbound&&o.includes(s.nextIndex);)s=t({activeIndex:s.nextIndex,itemsCount:e,numberOfItemsInLine:r,direction:i});return s}export{r as calcActiveIndexAfterArrowNavigation,e as getActiveIndexFromInboundNavigation};
 //# sourceMappingURL=gridKeyboardNavigationHelper.js.map

package/dist/src/hooks/useGridKeyboardNavigation/gridKeyboardNavigationHelper.js.map

@@ -1 +1 @@
-{"version":3,"file":"gridKeyboardNavigationHelper.js","sources":["../../../../src/hooks/useGridKeyboardNavigation/gridKeyboardNavigationHelper.ts"],"sourcesContent":["import { NavDirections } from \"../useFullKeyboardListeners\";\n\nexport function getActiveIndexFromInboundNavigation({\n  direction,\n  numberOfItemsInLine,\n  itemsCount\n}: {\n  direction: NavDirections;\n  numberOfItemsInLine: number;\n  itemsCount: number;\n}) {\n  const getRawIndex = () => {\n    const firstLineMiddleIndex = Math.floor(numberOfItemsInLine / 2);\n    if (direction === NavDirections.UP) {\n      // last line, middle\n      const rowCount = Math.ceil(itemsCount / numberOfItemsInLine);\n      return (rowCount - 1) * numberOfItemsInLine + firstLineMiddleIndex;\n    }\n    if (direction === NavDirections.DOWN) {\n      // first line, middle\n      return firstLineMiddleIndex;\n    }\n    if (direction === NavDirections.LEFT) {\n      // middle line, last item\n      let result = numberOfItemsInLine - 1;\n      const midIndex = Math.floor((itemsCount - 1) / 2);\n      while (result < midIndex) {\n        result += numberOfItemsInLine;\n      }\n      return result;\n    }\n    if (direction === NavDirections.RIGHT) {\n      // middle line, first item\n      let result = 0;\n      const midIndex = Math.floor((itemsCount - 1) / 2);\n      while (result + numberOfItemsInLine < midIndex) {\n        result += numberOfItemsInLine;\n      }\n      return result;\n    }\n  };\n\n  const rawIndex = getRawIndex();\n  return Math.max(0, Math.min(rawIndex, itemsCount - 1));\n}\n\nfunction calcRawNewIndexAfterArrowNavigation({\n  activeIndex,\n  itemsCount,\n  numberOfItemsInLine,\n  direction,\n  circularNavigation = false\n}: {\n  activeIndex: number;\n  itemsCount: number;\n  numberOfItemsInLine: number;\n  direction: NavDirections;\n  circularNavigation?: boolean;\n}) {\n  const getIndexLine = (index: number) => Math.ceil((index + 1) / numberOfItemsInLine);\n\n  const horizontalChange = (isIndexIncrease: boolean) => {\n    let nextIndex = activeIndex + (isIndexIncrease ? 1 : -1);\n\n    if (nextIndex < 0 || nextIndex >= itemsCount) {\n      if (circularNavigation) {\n        if (nextIndex < 0) {\n          nextIndex = itemsCount - 1;\n        } else if (nextIndex >= itemsCount) {\n          nextIndex = 0;\n        }\n      } else {\n        return { isOutbound: true };\n      }\n    }\n\n    const currentLine = getIndexLine(activeIndex);\n    const nextIndexLine = getIndexLine(nextIndex);\n    if (currentLine !== nextIndexLine) {\n      return { isOutbound: true };\n    }\n\n    return { isOutbound: false, nextIndex };\n  };\n\n  const verticalChange = (isIndexIncrease: boolean) => {\n    const nextIndex = activeIndex + numberOfItemsInLine * (isIndexIncrease ? 1 : -1);\n    if (nextIndex < 0 || itemsCount <= nextIndex) {\n      return { isOutbound: true };\n    }\n    return { isOutbound: false, nextIndex };\n  };\n\n  switch (direction) {\n    case NavDirections.RIGHT:\n      return horizontalChange(true);\n    case NavDirections.LEFT:\n      return horizontalChange(false);\n    case NavDirections.DOWN:\n      return verticalChange(true);\n    case NavDirections.UP:\n      return verticalChange(false);\n  }\n}\n\nexport function calcActiveIndexAfterArrowNavigation({\n  activeIndex,\n  itemsCount,\n  numberOfItemsInLine,\n  direction,\n  disabledIndexes = [],\n  circularNavigation = false\n}: {\n  activeIndex: number;\n  itemsCount: number;\n  numberOfItemsInLine: number;\n  direction: NavDirections;\n  disabledIndexes?: number[];\n  circularNavigation?: boolean;\n}) {\n  let result = calcRawNewIndexAfterArrowNavigation({\n    activeIndex,\n    itemsCount,\n    numberOfItemsInLine,\n    direction,\n    circularNavigation\n  });\n  while (!result.isOutbound && disabledIndexes.includes(result.nextIndex)) {\n    result = calcRawNewIndexAfterArrowNavigation({\n      activeIndex: result.nextIndex,\n      itemsCount,\n      numberOfItemsInLine,\n      direction,\n      circularNavigation\n    });\n  }\n\n  return result;\n}\n"],"names":["getActiveIndexFromInboundNavigation","_ref","direction","numberOfItemsInLine","itemsCount","rawIndex","firstLineMiddleIndex","Math","floor","NavDirections","UP","ceil","DOWN","LEFT","result","midIndex","RIGHT","getRawIndex","max","min","calcRawNewIndexAfterArrowNavigation","_ref2","activeIndex","_ref2$circularNavigat","circularNavigation","getIndexLine","index","horizontalChange","isIndexIncrease","nextIndex","isOutbound","verticalChange","calcActiveIndexAfterArrowNavigation","_ref3","_ref3$disabledIndexes","disabledIndexes","_ref3$circularNavigat","includes"],"mappings":"+DAEM,SAAUA,EAAmCC,GAQlD,IAPCC,EAASD,EAATC,UACAC,EAAmBF,EAAnBE,oBACAC,EAAUH,EAAVG,WAqCMC,EA/Bc,WAClB,IAAMC,EAAuBC,KAAKC,MAAML,EAAsB,GAC9D,GAAID,IAAcO,EAAcC,GAG9B,OADiBH,KAAKI,KAAKP,EAAaD,GACrB,GAAKA,EAAsBG,EAEhD,GAAIJ,IAAcO,EAAcG,KAE9B,OAAON,EAET,GAAIJ,IAAcO,EAAcI,KAAM,CAIpC,IAFA,IAAIC,EAASX,EAAsB,EAC7BY,EAAWR,KAAKC,OAAOJ,EAAa,GAAK,GAC/BW,EAATD,GACLA,GAAUX,EAEZ,OAAOW,CACR,CACD,GAAIZ,IAAcO,EAAcO,MAAO,CAIrC,IAFA,IAAIF,EAAS,EACPC,EAAWR,KAAKC,OAAOJ,EAAa,GAAK,GACTW,EAA/BD,EAASX,GACdW,GAAUX,EAEZ,OAAOW,CACR,EAGcG,GACjB,OAAOV,KAAKW,IAAI,EAAGX,KAAKY,IAAId,EAAUD,EAAa,GACrD,CAEA,SAASgB,EAAmCC,GAY3C,IAXCC,EAAWD,EAAXC,YACAlB,EAAUiB,EAAVjB,WACAD,EAAmBkB,EAAnBlB,oBACSoB,EAAAF,EACTG,mBAAAA,OAAqB,IAAHD,GAAQA,EAQpBE,EAAe,SAACC,GAAa,OAAKnB,KAAKI,MAAMe,EAAQ,GAAKvB,EAAoB,EAE9EwB,EAAmB,SAACC,GACxB,IAAIC,EAAYP,GAAeM,EAAkB,GAAK,GAEtD,GAAgB,EAAZC,GAAiBA,GAAazB,EAAY,CAC5C,IAAIoB,EAOF,MAAO,CAAEM,YAAY,GANL,EAAZD,EACFA,EAAYzB,EAAa,EACHA,EAAbyB,IACTA,EAAY,EAKjB,CAID,OAFoBJ,EAAaH,KACXG,EAAaI,GAE1B,CAAEC,YAAY,GAGhB,CAAEA,YAAY,EAAOD,UAAAA,IAGxBE,EAAiB,SAACH,GACtB,IAAMC,EAAYP,EAAcnB,GAAuByB,EAAkB,GAAK,GAC9E,OAAgB,EAAZC,GAA+BA,GAAdzB,EACZ,CAAE0B,YAAY,GAEhB,CAAEA,YAAY,EAAOD,UAAAA,IAG9B,OA3CSR,EAATnB,WA4CE,KAAKO,EAAcO,MACjB,OAAOW,GAAiB,GAC1B,KAAKlB,EAAcI,KACjB,OAAOc,GAAiB,GAC1B,KAAKlB,EAAcG,KACjB,OAAOmB,GAAe,GACxB,KAAKtB,EAAcC,GACjB,OAAOqB,GAAe,GAE5B,UAEgBC,EAAmCC,GAsBjD,IARD,IAZC7B,EAAU6B,EAAV7B,WACAD,EAAmB8B,EAAnB9B,oBACAD,EAAS+B,EAAT/B,UAASgC,EAAAD,EACTE,gBAAAA,OAAkB,IAAHD,EAAG,GAAEA,EAAAE,EAAAH,EACpBT,mBAAAA,OAAqB,IAAHY,GAAQA,EAStBtB,EAASM,EAAoC,CAC/CE,YAfSW,EAAXX,YAgBElB,WAAAA,EACAD,oBAAAA,EACAD,UAAAA,EACAsB,mBAAAA,KAEMV,EAAOgB,YAAcK,EAAgBE,SAASvB,EAAOe,YAC3Df,EAASM,EAAoC,CAC3CE,YAAaR,EAAOe,UACpBzB,WAAAA,EACAD,oBAAAA,EACAD,UAAAA,EACAsB,mBAAAA,IAIJ,OAAOV,CACT"}
+{"version":3,"file":"gridKeyboardNavigationHelper.js","sources":["../../../../src/hooks/useGridKeyboardNavigation/gridKeyboardNavigationHelper.ts"],"sourcesContent":["import { NavDirections } from \"../useFullKeyboardListeners\";\n\nexport function getActiveIndexFromInboundNavigation({\n  direction,\n  numberOfItemsInLine,\n  itemsCount\n}: {\n  direction: NavDirections;\n  numberOfItemsInLine: number;\n  itemsCount: number;\n}) {\n  const getRawIndex = () => {\n    const firstLineMiddleIndex = Math.floor(numberOfItemsInLine / 2);\n    if (direction === NavDirections.UP) {\n      // last line, middle\n      const rowCount = Math.ceil(itemsCount / numberOfItemsInLine);\n      return (rowCount - 1) * numberOfItemsInLine + firstLineMiddleIndex;\n    }\n    if (direction === NavDirections.DOWN) {\n      // first line, middle\n      return firstLineMiddleIndex;\n    }\n    if (direction === NavDirections.LEFT) {\n      // middle line, last item\n      let result = numberOfItemsInLine - 1;\n      const midIndex = Math.floor((itemsCount - 1) / 2);\n      while (result < midIndex) {\n        result += numberOfItemsInLine;\n      }\n      return result;\n    }\n    if (direction === NavDirections.RIGHT) {\n      // middle line, first item\n      let result = 0;\n      const midIndex = Math.floor((itemsCount - 1) / 2);\n      while (result + numberOfItemsInLine < midIndex) {\n        result += numberOfItemsInLine;\n      }\n      return result;\n    }\n  };\n\n  const rawIndex = getRawIndex();\n  return Math.max(0, Math.min(rawIndex, itemsCount - 1));\n}\n\nfunction calcRawNewIndexAfterArrowNavigation({\n  activeIndex,\n  itemsCount,\n  numberOfItemsInLine,\n  direction\n}: {\n  activeIndex: number;\n  itemsCount: number;\n  numberOfItemsInLine: number;\n  direction: NavDirections;\n}) {\n  const getIndexLine = (index: number) => Math.ceil((index + 1) / numberOfItemsInLine);\n\n  const horizontalChange = (isIndexIncrease: boolean) => {\n    const nextIndex = activeIndex + (isIndexIncrease ? 1 : -1);\n    if (nextIndex < 0 || itemsCount <= nextIndex) {\n      return { isOutbound: true };\n    }\n    const currentLine = getIndexLine(activeIndex);\n    const nextIndexLine = getIndexLine(nextIndex);\n    if (currentLine !== nextIndexLine) {\n      return { isOutbound: true };\n    }\n\n    return { isOutbound: false, nextIndex };\n  };\n\n  const verticalChange = (isIndexIncrease: boolean) => {\n    const nextIndex = activeIndex + numberOfItemsInLine * (isIndexIncrease ? 1 : -1);\n    if (nextIndex < 0 || itemsCount <= nextIndex) {\n      return { isOutbound: true };\n    }\n    return { isOutbound: false, nextIndex };\n  };\n\n  switch (direction) {\n    case NavDirections.RIGHT:\n      return horizontalChange(true);\n    case NavDirections.LEFT:\n      return horizontalChange(false);\n    case NavDirections.DOWN:\n      return verticalChange(true);\n    case NavDirections.UP:\n      return verticalChange(false);\n  }\n}\n\nexport function calcActiveIndexAfterArrowNavigation({\n  activeIndex,\n  itemsCount,\n  numberOfItemsInLine,\n  direction,\n  disabledIndexes = []\n}: {\n  activeIndex: number;\n  itemsCount: number;\n  numberOfItemsInLine: number;\n  direction: NavDirections;\n  disabledIndexes?: number[];\n}) {\n  let result = calcRawNewIndexAfterArrowNavigation({ activeIndex, itemsCount, numberOfItemsInLine, direction });\n  while (!result.isOutbound && disabledIndexes.includes(result.nextIndex)) {\n    result = calcRawNewIndexAfterArrowNavigation({\n      activeIndex: result.nextIndex,\n      itemsCount,\n      numberOfItemsInLine,\n      direction\n    });\n  }\n\n  return result;\n}\n"],"names":["getActiveIndexFromInboundNavigation","_ref","direction","numberOfItemsInLine","itemsCount","rawIndex","firstLineMiddleIndex","Math","floor","NavDirections","UP","ceil","DOWN","LEFT","result","midIndex","RIGHT","getRawIndex","max","min","calcRawNewIndexAfterArrowNavigation","_ref2","activeIndex","getIndexLine","index","horizontalChange","isIndexIncrease","nextIndex","isOutbound","verticalChange","calcActiveIndexAfterArrowNavigation","_ref3","_ref3$disabledIndexes","disabledIndexes","includes"],"mappings":"+DAEM,SAAUA,EAAmCC,GAQlD,IAPCC,EAASD,EAATC,UACAC,EAAmBF,EAAnBE,oBACAC,EAAUH,EAAVG,WAqCMC,EA/Bc,WAClB,IAAMC,EAAuBC,KAAKC,MAAML,EAAsB,GAC9D,GAAID,IAAcO,EAAcC,GAG9B,OADiBH,KAAKI,KAAKP,EAAaD,GACrB,GAAKA,EAAsBG,EAEhD,GAAIJ,IAAcO,EAAcG,KAE9B,OAAON,EAET,GAAIJ,IAAcO,EAAcI,KAAM,CAIpC,IAFA,IAAIC,EAASX,EAAsB,EAC7BY,EAAWR,KAAKC,OAAOJ,EAAa,GAAK,GAC/BW,EAATD,GACLA,GAAUX,EAEZ,OAAOW,CACR,CACD,GAAIZ,IAAcO,EAAcO,MAAO,CAIrC,IAFA,IAAIF,EAAS,EACPC,EAAWR,KAAKC,OAAOJ,EAAa,GAAK,GACTW,EAA/BD,EAASX,GACdW,GAAUX,EAEZ,OAAOW,CACR,EAGcG,GACjB,OAAOV,KAAKW,IAAI,EAAGX,KAAKY,IAAId,EAAUD,EAAa,GACrD,CAEA,SAASgB,EAAmCC,GAU3C,IATCC,EAAWD,EAAXC,YACAlB,EAAUiB,EAAVjB,WACAD,EAAmBkB,EAAnBlB,oBAQMoB,EAAe,SAACC,GAAa,OAAKjB,KAAKI,MAAMa,EAAQ,GAAKrB,EAAoB,EAE9EsB,EAAmB,SAACC,GACxB,IAAMC,EAAYL,GAAeI,EAAkB,GAAK,GACxD,OAAgB,EAAZC,GAA+BA,GAAdvB,GAGDmB,EAAaD,KACXC,EAAaI,GAH1B,CAAEC,YAAY,GAQhB,CAAEA,YAAY,EAAOD,UAAAA,IAGxBE,EAAiB,SAACH,GACtB,IAAMC,EAAYL,EAAcnB,GAAuBuB,EAAkB,GAAK,GAC9E,OAAgB,EAAZC,GAA+BA,GAAdvB,EACZ,CAAEwB,YAAY,GAEhB,CAAEA,YAAY,EAAOD,UAAAA,IAG9B,OA/BSN,EAATnB,WAgCE,KAAKO,EAAcO,MACjB,OAAOS,GAAiB,GAC1B,KAAKhB,EAAcI,KACjB,OAAOY,GAAiB,GAC1B,KAAKhB,EAAcG,KACjB,OAAOiB,GAAe,GACxB,KAAKpB,EAAcC,GACjB,OAAOmB,GAAe,GAE5B,CAEgB,SAAAC,EAAmCC,GAcjD,IAFD,IAVC3B,EAAU2B,EAAV3B,WACAD,EAAmB4B,EAAnB5B,oBACAD,EAAS6B,EAAT7B,UAAS8B,EAAAD,EACTE,gBAAAA,OAAkB,IAAHD,EAAG,GAAEA,EAQhBlB,EAASM,EAAoC,CAAEE,YAZxCS,EAAXT,YAYgElB,WAAAA,EAAYD,oBAAAA,EAAqBD,UAAAA,KACzFY,EAAOc,YAAcK,EAAgBC,SAASpB,EAAOa,YAC3Db,EAASM,EAAoC,CAC3CE,YAAaR,EAAOa,UACpBvB,WAAAA,EACAD,oBAAAA,EACAD,UAAAA,IAIJ,OAAOY,CACT"}

package/dist/src/hooks/useGridKeyboardNavigation/useGridKeyboardNavigation.js

@@ -1,2 +1,2 @@
-import{slicedToArray as n}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{useState as e,useRef as i,useContext as o,useEffect as t,useCallback as r}from"react";import{GridKeyboardNavigationContext as a}from"../../components/GridKeyboardNavigationContext/GridKeyboardNavigationContext.js";import u from"../useFullKeyboardListeners.js";import c from"../useEventListener/index.js";import{getActiveIndexFromInboundNavigation as s,calcActiveIndexAfterArrowNavigation as d}from"./gridKeyboardNavigationHelper.js";import{useLastNavigationDirection as l}from"../../components/Menu/Menu/hooks/useLastNavigationDirection.js";var f=-1;function v(v){var m=v.ref,b=v.itemsCount,I=v.numberOfItemsInLine,g=v.onItemClicked,p=v.entryFocusStrategy,x=void 0===p?"directional":p,N=v.getItemByIndex,y=void 0===N?function(n){}:N,O=v.focusOnMount,j=void 0!==O&&O,C=v.focusItemIndexOnMount,L=void 0===C?f:C,k=v.disabledIndexes,K=void 0===k?[]:k,M=v.circularNavigation,A=void 0!==M&&M,S=e(j&&L!==f),h=n(S,2),w=h[0],B=h[1],D=i(!1),E=e(w?L:f),F=n(E,2),G=F[0],H=F[1],_=e(!0),P=n(_,2),R=P[0],T=P[1],q=o(a);t((function(){D.current?B(!1):D.current=!0}),[G]);var z=r((function(){var n;return null===(n=m.current)||void 0===n?void 0:n.blur()}),[m]),J=l().lastNavigationDirectionRef,Q=r((function(){if(G===f){var n=J.current;H("directional"===x&&n?s({direction:n,numberOfItemsInLine:I,itemsCount:b}):0),T(!0)}else T(!0)}),[G,x,b,J,I,H,T]),U=r((function(){T(!1)}),[T]),V=r((function(){T(!0),H(f)}),[H]);c({eventName:"focus",callback:Q,ref:m}),c({eventName:"mousedown",callback:U,ref:m}),c({eventName:"blur",callback:V,ref:m}),t((function(){var n;G>-1&&(null===(n=m.current)||void 0===n||n.focus())}),[G,m]);var W=r((function(n){T(arguments.length>1&&void 0!==arguments[1]&&arguments[1]),H(n),g(y(n),n)}),[H,g,y]),X=r((function(){if(R)return W(G,!0)}),[R,W,G]);return u({ref:m,onSelectionKey:X,onArrowNavigation:function(n){if(T(!0),G!==f){var e=d({activeIndex:G,itemsCount:b,numberOfItemsInLine:I,direction:n,disabledIndexes:K,circularNavigation:A}),i=e.nextIndex;e.isOutbound?null==q||q.onOutboundNavigation(m,n):H(i)}else H(0)},onEscape:z,focusOnMount:j}),{activeIndex:R?G:f,onSelectionAction:W,isInitialActiveState:w}}export{v as default};
+import{slicedToArray as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{useState as n,useRef as t,useContext as o,useEffect as i,useCallback as r}from"react";import{GridKeyboardNavigationContext as a}from"../../components/GridKeyboardNavigationContext/GridKeyboardNavigationContext.js";import u from"../useFullKeyboardListeners.js";import c from"../useEventListener/index.js";import{getActiveIndexFromInboundNavigation as s,calcActiveIndexAfterArrowNavigation as d}from"./gridKeyboardNavigationHelper.js";import{useLastNavigationDirection as l}from"../../components/Menu/Menu/hooks/useLastNavigationDirection.js";var f=-1;function m(m){var v=m.ref,b=m.itemsCount,I=m.numberOfItemsInLine,p=m.onItemClicked,g=m.entryFocusStrategy,x=void 0===g?"directional":g,N=m.getItemByIndex,y=void 0===N?function(e){}:N,O=m.focusOnMount,j=void 0!==O&&O,C=m.focusItemIndexOnMount,L=void 0===C?f:C,k=m.disabledIndexes,K=void 0===k?[]:k,M=n(j&&L!==f),A=e(M,2),S=A[0],h=A[1],w=t(!1),B=n(S?L:f),D=e(B,2),E=D[0],F=D[1],G=n(!0),H=e(G,2),_=H[0],P=H[1],R=o(a);i((function(){w.current?h(!1):w.current=!0}),[E]);var T=r((function(){var e;return null===(e=v.current)||void 0===e?void 0:e.blur()}),[v]),q=l().lastNavigationDirectionRef,z=r((function(){if(E===f){var e=q.current;F("directional"===x&&e?s({direction:e,numberOfItemsInLine:I,itemsCount:b}):0),P(!0)}else P(!0)}),[E,x,b,q,I,F,P]),J=r((function(){P(!1)}),[P]),Q=r((function(){P(!0),F(f)}),[F]);c({eventName:"focus",callback:z,ref:v}),c({eventName:"mousedown",callback:J,ref:v}),c({eventName:"blur",callback:Q,ref:v}),i((function(){var e;E>-1&&(null===(e=v.current)||void 0===e||e.focus())}),[E,v]);var U=r((function(e){P(arguments.length>1&&void 0!==arguments[1]&&arguments[1]),F(e),p(y(e),e)}),[F,p,y]),V=r((function(){if(_)return U(E,!0)}),[_,U,E]);return u({ref:v,onSelectionKey:V,onArrowNavigation:function(e){if(P(!0),E!==f){var n=d({activeIndex:E,itemsCount:b,numberOfItemsInLine:I,direction:e,disabledIndexes:K}),t=n.nextIndex;n.isOutbound?null==R||R.onOutboundNavigation(v,e):F(t)}else F(0)},onEscape:T,focusOnMount:j}),{activeIndex:_?E:f,onSelectionAction:U,isInitialActiveState:S}}export{m as default};
 //# sourceMappingURL=useGridKeyboardNavigation.js.map

package/dist/src/hooks/useGridKeyboardNavigation/useGridKeyboardNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"useGridKeyboardNavigation.js","sources":["../../../../src/hooks/useGridKeyboardNavigation/useGridKeyboardNavigation.ts"],"sourcesContent":["import { MutableRefObject, ReactElement, useCallback, useContext, useEffect, useRef, useState } from \"react\";\nimport { GridKeyboardNavigationContext } from \"../../components/GridKeyboardNavigationContext/GridKeyboardNavigationContext\";\nimport useFullKeyboardListeners, { NavDirections } from \"../../hooks/useFullKeyboardListeners\";\nimport useEventListener from \"../../hooks/useEventListener\";\nimport {\n  calcActiveIndexAfterArrowNavigation,\n  getActiveIndexFromInboundNavigation\n} from \"./gridKeyboardNavigationHelper\";\nimport { useLastNavigationDirection } from \"../../components/Menu/Menu/hooks/useLastNavigationDirection\";\n\nconst NO_ACTIVE_INDEX = -1;\n\n/**\n * A hook which is used for accessible keyboard navigation. Useful for components rendering a list of items that can be navigated and selected with a keyboard.\n * @param {Object} options\n * @param {React.MutableRefObject} options.ref - the reference for the component that listens to keyboard\n * @param {number} options.itemsCount - the number of items\n * @param {number} options.numberOfItemsInLine - the number of items on each line of the grid\n * @param {function} options.onItemClicked - the callback for selecting an item. It will be called when an active item is selected, for example with \"Enter\".\n * @param {function} options.getItemByIndex - a function which gets an index as a param, and returns the item on that index\n * @param {\"directional\" | \"first\"} options.entryFocusStrategy - Determines how the first item is focused when entering the grid via keyboard.\n *   - \"directional\": Tries to focus based on the entry direction (Tab vs Shift+Tab). This is the default.\n *   - \"first\": Always focuses the first item.\n * @param {boolean=} options.focusOnMount - if true, the referenced element will be focused when mounted\n * @param {number=} options.focusItemIndexOnMount - optional item index to focus when mounted. Only works with \"options.focusOnMount\".\n * @param {number[]=} options.disabledIndexes - optional array of disabled indices, which will be skipped while navigating.\n * @param {boolean=} options.circularNavigation - if true, the navigation will wrap around the grid\n * @returns {useGridKeyboardNavigationResult}\n *\n * @typedef useGridKeyboardNavigationResult\n * @property {number} activeIndex - the currently active index\n * @property {boolean} isInitialActiveState - if true, the currently active element was due to an initial mounting index option. See \"options.focusItemIndexOnMount\".\n * @property {(index: number, isKeyboardAction?: boolean) => void} onSelectionAction - the callback which should be used to select an item.\n * It should be called with the selected item's index. Use this callback for onClick handlers, for example.\n * The \"isKeyboardAction\" can be used to indicate a keyboard selection, which will affect the currently active index.\n */\nexport default function useGridKeyboardNavigation({\n  ref,\n  itemsCount,\n  numberOfItemsInLine,\n  onItemClicked, // the callback to call when an item is selected\n  entryFocusStrategy = \"directional\",\n  getItemByIndex = (_index: number) => {},\n  focusOnMount = false,\n  focusItemIndexOnMount = NO_ACTIVE_INDEX,\n  disabledIndexes = [],\n  circularNavigation = false\n}: {\n  ref: MutableRefObject<HTMLElement>;\n  itemsCount: number;\n  numberOfItemsInLine: number;\n  onItemClicked: (element: HTMLElement | ReactElement | void | string, index: number) => void;\n  entryFocusStrategy?: \"directional\" | \"first\";\n  getItemByIndex: (index: number | void) => HTMLElement | ReactElement | void | string;\n  focusOnMount?: boolean;\n  focusItemIndexOnMount?: number;\n  disabledIndexes?: number[];\n  circularNavigation?: boolean;\n}) {\n  const [isInitialActiveState, setIsInitialActiveState] = useState(\n    focusOnMount && focusItemIndexOnMount !== NO_ACTIVE_INDEX\n  );\n  const skippedInitialActiveIndexChange = useRef(false);\n  const [activeIndex, setActiveIndex] = useState(isInitialActiveState ? focusItemIndexOnMount : NO_ACTIVE_INDEX);\n  const [isUsingKeyboardNav, setIsUsingKeyboardNav] = useState(true);\n\n  const keyboardContext = useContext(GridKeyboardNavigationContext);\n\n  const onArrowNavigation = (direction: NavDirections) => {\n    setIsUsingKeyboardNav(true);\n    if (activeIndex === NO_ACTIVE_INDEX) {\n      setActiveIndex(0);\n      return;\n    }\n\n    const { isOutbound, nextIndex } = calcActiveIndexAfterArrowNavigation({\n      activeIndex,\n      itemsCount,\n      numberOfItemsInLine,\n      direction,\n      disabledIndexes,\n      circularNavigation\n    });\n    if (isOutbound) {\n      keyboardContext?.onOutboundNavigation(ref, direction);\n    } else {\n      setActiveIndex(nextIndex);\n    }\n  };\n\n  useEffect(() => {\n    if (!skippedInitialActiveIndexChange.current) {\n      skippedInitialActiveIndexChange.current = true;\n      return;\n    }\n    // if the active state changes, this is no longer the initial active state\n    setIsInitialActiveState(false);\n  }, [activeIndex]);\n\n  const blurTargetElement = useCallback(() => ref.current?.blur(), [ref]);\n\n  const { lastNavigationDirectionRef } = useLastNavigationDirection();\n  const onFocus = useCallback(() => {\n    if (activeIndex !== NO_ACTIVE_INDEX) {\n      setIsUsingKeyboardNav(true);\n      return;\n    }\n\n    const direction = lastNavigationDirectionRef.current;\n    setActiveIndex(\n      entryFocusStrategy === \"directional\" && direction\n        ? getActiveIndexFromInboundNavigation({ direction, numberOfItemsInLine, itemsCount })\n        : 0\n    );\n    setIsUsingKeyboardNav(true);\n  }, [\n    activeIndex,\n    entryFocusStrategy,\n    itemsCount,\n    lastNavigationDirectionRef,\n    numberOfItemsInLine,\n    setActiveIndex,\n    setIsUsingKeyboardNav\n  ]);\n\n  const onMouseDown = useCallback(() => {\n    // If the user clicked on the grid element we assume that that what will caused the focus\n    setIsUsingKeyboardNav(false);\n  }, [setIsUsingKeyboardNav]);\n\n  const onBlur = useCallback(() => {\n    // If we lose focus we will return to isUsingKeyboardNav default mode which is that any interaction\n    // with the grid always done by keyboard, unless we clicked on the grid element before that with a mouse\n    setIsUsingKeyboardNav(true);\n    setActiveIndex(NO_ACTIVE_INDEX);\n  }, [setActiveIndex]);\n\n  useEventListener({ eventName: \"focus\", callback: onFocus, ref });\n  useEventListener({ eventName: \"mousedown\", callback: onMouseDown, ref });\n  useEventListener({ eventName: \"blur\", callback: onBlur, ref });\n\n  useEffect(() => {\n    if (activeIndex > -1) {\n      ref.current?.focus();\n    }\n  }, [activeIndex, ref]);\n\n  const onSelectionAction = useCallback(\n    (index: number, isKeyboardAction = false) => {\n      setIsUsingKeyboardNav(isKeyboardAction);\n      setActiveIndex(index);\n\n      onItemClicked(getItemByIndex(index), index);\n    },\n    [setActiveIndex, onItemClicked, getItemByIndex]\n  );\n\n  const onKeyboardSelection = useCallback(() => {\n    if (!isUsingKeyboardNav) {\n      return;\n    }\n    return onSelectionAction(activeIndex, true);\n  }, [isUsingKeyboardNav, onSelectionAction, activeIndex]);\n\n  useFullKeyboardListeners({\n    ref,\n    onSelectionKey: onKeyboardSelection,\n    onArrowNavigation,\n    onEscape: blurTargetElement,\n    focusOnMount\n  });\n\n  // if the user is not using keyboard nav, the consumers should not treat the index as active\n  const externalActiveIndex = isUsingKeyboardNav ? activeIndex : NO_ACTIVE_INDEX;\n  return {\n    activeIndex: externalActiveIndex,\n    onSelectionAction,\n    isInitialActiveState\n  };\n}\n"],"names":["NO_ACTIVE_INDEX","useGridKeyboardNavigation","_ref","ref","itemsCount","numberOfItemsInLine","onItemClicked","_ref$entryFocusStrate","entryFocusStrategy","_ref$getItemByIndex","getItemByIndex","_index","_ref$focusOnMount","focusOnMount","_ref$focusItemIndexOn","focusItemIndexOnMount","_ref$disabledIndexes","disabledIndexes","_ref$circularNavigati","circularNavigation","_useState","useState","_useState2","_slicedToArray","isInitialActiveState","setIsInitialActiveState","skippedInitialActiveIndexChange","useRef","_useState3","_useState4","activeIndex","setActiveIndex","_useState5","_useState6","isUsingKeyboardNav","setIsUsingKeyboardNav","keyboardContext","useContext","GridKeyboardNavigationContext","useEffect","current","blurTargetElement","useCallback","_a","blur","lastNavigationDirectionRef","useLastNavigationDirection","onFocus","direction","getActiveIndexFromInboundNavigation","onMouseDown","onBlur","useEventListener","eventName","callback","focus","onSelectionAction","index","arguments","length","undefined","onKeyboardSelection","useFullKeyboardListeners","onSelectionKey","onArrowNavigation","_calcActiveIndexAfter","calcActiveIndexAfterArrowNavigation","nextIndex","isOutbound","onOutboundNavigation","onEscape"],"mappings":"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"}
+{"version":3,"file":"useGridKeyboardNavigation.js","sources":["../../../../src/hooks/useGridKeyboardNavigation/useGridKeyboardNavigation.ts"],"sourcesContent":["import { MutableRefObject, ReactElement, useCallback, useContext, useEffect, useRef, useState } from \"react\";\nimport { GridKeyboardNavigationContext } from \"../../components/GridKeyboardNavigationContext/GridKeyboardNavigationContext\";\nimport useFullKeyboardListeners, { NavDirections } from \"../../hooks/useFullKeyboardListeners\";\nimport useEventListener from \"../../hooks/useEventListener\";\nimport {\n  calcActiveIndexAfterArrowNavigation,\n  getActiveIndexFromInboundNavigation\n} from \"./gridKeyboardNavigationHelper\";\nimport { useLastNavigationDirection } from \"../../components/Menu/Menu/hooks/useLastNavigationDirection\";\n\nconst NO_ACTIVE_INDEX = -1;\n\n/**\n * A hook which is used for accessible keyboard navigation. Useful for components rendering a list of items that can be navigated and selected with a keyboard.\n * @param {Object} options\n * @param {React.MutableRefObject} options.ref - the reference for the component that listens to keyboard\n * @param {number} options.itemsCount - the number of items\n * @param {number} options.numberOfItemsInLine - the number of items on each line of the grid\n * @param {function} options.onItemClicked - the callback for selecting an item. It will be called when an active item is selected, for example with \"Enter\".\n * @param {function} options.getItemByIndex - a function which gets an index as a param, and returns the item on that index\n * @param {\"directional\" | \"first\"} options.entryFocusStrategy - Determines how the first item is focused when entering the grid via keyboard.\n *   - \"directional\": Tries to focus based on the entry direction (Tab vs Shift+Tab). This is the default.\n *   - \"first\": Always focuses the first item.\n * @param {boolean=} options.focusOnMount - if true, the referenced element will be focused when mounted\n * @param {number=} options.focusItemIndexOnMount - optional item index to focus when mounted. Only works with \"options.focusOnMount\".\n * @param {number[]=} options.disabledIndexes - optional array of disabled indices, which will be skipped while navigating.\n * @returns {useGridKeyboardNavigationResult}\n *\n * @typedef useGridKeyboardNavigationResult\n * @property {number} activeIndex - the currently active index\n * @property {boolean} isInitialActiveState - if true, the currently active element was due to an initial mounting index option. See \"options.focusItemIndexOnMount\".\n * @property {(index: number, isKeyboardAction?: boolean) => void} onSelectionAction - the callback which should be used to select an item.\n * It should be called with the selected item's index. Use this callback for onClick handlers, for example.\n * The \"isKeyboardAction\" can be used to indicate a keyboard selection, which will affect the currently active index.\n */\nexport default function useGridKeyboardNavigation({\n  ref,\n  itemsCount,\n  numberOfItemsInLine,\n  onItemClicked, // the callback to call when an item is selected\n  entryFocusStrategy = \"directional\",\n  getItemByIndex = (_index: number) => {},\n  focusOnMount = false,\n  focusItemIndexOnMount = NO_ACTIVE_INDEX,\n  disabledIndexes = []\n}: {\n  ref: MutableRefObject<HTMLElement>;\n  itemsCount: number;\n  numberOfItemsInLine: number;\n  onItemClicked: (element: HTMLElement | ReactElement | void | string, index: number) => void;\n  entryFocusStrategy?: \"directional\" | \"first\";\n  getItemByIndex: (index: number | void) => HTMLElement | ReactElement | void | string;\n  focusOnMount?: boolean;\n  focusItemIndexOnMount?: number;\n  disabledIndexes?: number[];\n}) {\n  const [isInitialActiveState, setIsInitialActiveState] = useState(\n    focusOnMount && focusItemIndexOnMount !== NO_ACTIVE_INDEX\n  );\n  const skippedInitialActiveIndexChange = useRef(false);\n  const [activeIndex, setActiveIndex] = useState(isInitialActiveState ? focusItemIndexOnMount : NO_ACTIVE_INDEX);\n  const [isUsingKeyboardNav, setIsUsingKeyboardNav] = useState(true);\n\n  const keyboardContext = useContext(GridKeyboardNavigationContext);\n\n  const onArrowNavigation = (direction: NavDirections) => {\n    setIsUsingKeyboardNav(true);\n    if (activeIndex === NO_ACTIVE_INDEX) {\n      setActiveIndex(0);\n      return;\n    }\n\n    const { isOutbound, nextIndex } = calcActiveIndexAfterArrowNavigation({\n      activeIndex,\n      itemsCount,\n      numberOfItemsInLine,\n      direction,\n      disabledIndexes\n    });\n    if (isOutbound) {\n      keyboardContext?.onOutboundNavigation(ref, direction);\n    } else {\n      setActiveIndex(nextIndex);\n    }\n  };\n\n  useEffect(() => {\n    if (!skippedInitialActiveIndexChange.current) {\n      skippedInitialActiveIndexChange.current = true;\n      return;\n    }\n    // if the active state changes, this is no longer the initial active state\n    setIsInitialActiveState(false);\n  }, [activeIndex]);\n\n  const blurTargetElement = useCallback(() => ref.current?.blur(), [ref]);\n\n  const { lastNavigationDirectionRef } = useLastNavigationDirection();\n  const onFocus = useCallback(() => {\n    if (activeIndex !== NO_ACTIVE_INDEX) {\n      setIsUsingKeyboardNav(true);\n      return;\n    }\n\n    const direction = lastNavigationDirectionRef.current;\n    setActiveIndex(\n      entryFocusStrategy === \"directional\" && direction\n        ? getActiveIndexFromInboundNavigation({ direction, numberOfItemsInLine, itemsCount })\n        : 0\n    );\n    setIsUsingKeyboardNav(true);\n  }, [\n    activeIndex,\n    entryFocusStrategy,\n    itemsCount,\n    lastNavigationDirectionRef,\n    numberOfItemsInLine,\n    setActiveIndex,\n    setIsUsingKeyboardNav\n  ]);\n\n  const onMouseDown = useCallback(() => {\n    // If the user clicked on the grid element we assume that that what will caused the focus\n    setIsUsingKeyboardNav(false);\n  }, [setIsUsingKeyboardNav]);\n\n  const onBlur = useCallback(() => {\n    // If we lose focus we will return to isUsingKeyboardNav default mode which is that any interaction\n    // with the grid always done by keyboard, unless we clicked on the grid element before that with a mouse\n    setIsUsingKeyboardNav(true);\n    setActiveIndex(NO_ACTIVE_INDEX);\n  }, [setActiveIndex]);\n\n  useEventListener({ eventName: \"focus\", callback: onFocus, ref });\n  useEventListener({ eventName: \"mousedown\", callback: onMouseDown, ref });\n  useEventListener({ eventName: \"blur\", callback: onBlur, ref });\n\n  useEffect(() => {\n    if (activeIndex > -1) {\n      ref.current?.focus();\n    }\n  }, [activeIndex, ref]);\n\n  const onSelectionAction = useCallback(\n    (index: number, isKeyboardAction = false) => {\n      setIsUsingKeyboardNav(isKeyboardAction);\n      setActiveIndex(index);\n\n      onItemClicked(getItemByIndex(index), index);\n    },\n    [setActiveIndex, onItemClicked, getItemByIndex]\n  );\n\n  const onKeyboardSelection = useCallback(() => {\n    if (!isUsingKeyboardNav) {\n      return;\n    }\n    return onSelectionAction(activeIndex, true);\n  }, [isUsingKeyboardNav, onSelectionAction, activeIndex]);\n\n  useFullKeyboardListeners({\n    ref,\n    onSelectionKey: onKeyboardSelection,\n    onArrowNavigation,\n    onEscape: blurTargetElement,\n    focusOnMount\n  });\n\n  // if the user is not using keyboard nav, the consumers should not treat the index as active\n  const externalActiveIndex = isUsingKeyboardNav ? activeIndex : NO_ACTIVE_INDEX;\n  return {\n    activeIndex: externalActiveIndex,\n    onSelectionAction,\n    isInitialActiveState\n  };\n}\n"],"names":["NO_ACTIVE_INDEX","useGridKeyboardNavigation","_ref","ref","itemsCount","numberOfItemsInLine","onItemClicked","_ref$entryFocusStrate","entryFocusStrategy","_ref$getItemByIndex","getItemByIndex","_index","_ref$focusOnMount","focusOnMount","_ref$focusItemIndexOn","focusItemIndexOnMount","_ref$disabledIndexes","disabledIndexes","_useState","useState","_useState2","_slicedToArray","isInitialActiveState","setIsInitialActiveState","skippedInitialActiveIndexChange","useRef","_useState3","_useState4","activeIndex","setActiveIndex","_useState5","_useState6","isUsingKeyboardNav","setIsUsingKeyboardNav","keyboardContext","useContext","GridKeyboardNavigationContext","useEffect","current","blurTargetElement","useCallback","_a","blur","lastNavigationDirectionRef","useLastNavigationDirection","onFocus","direction","getActiveIndexFromInboundNavigation","onMouseDown","onBlur","useEventListener","eventName","callback","focus","onSelectionAction","index","arguments","length","undefined","onKeyboardSelection","useFullKeyboardListeners","onSelectionKey","onArrowNavigation","_calcActiveIndexAfter","calcActiveIndexAfterArrowNavigation","nextIndex","isOutbound","onOutboundNavigation","onEscape"],"mappings":"mnBAUA,IAAMA,GAAmB,EAyBD,SAAAC,EAAyBC,GAoBhD,IAnBCC,EAAGD,EAAHC,IACAC,EAAUF,EAAVE,WACAC,EAAmBH,EAAnBG,oBACAC,EAAaJ,EAAbI,cAAaC,EAAAL,EACbM,mBAAAA,OAAqB,IAAHD,EAAG,cAAaA,EAAAE,EAAAP,EAClCQ,eAAAA,OAAiB,IAAHD,EAAG,SAACE,GAAqB,EAAAF,EAAAG,EAAAV,EACvCW,aAAAA,OAAe,IAAHD,GAAQA,EAAAE,EAAAZ,EACpBa,sBAAAA,OAAwBf,IAAHc,EAAGd,EAAec,EAAAE,EAAAd,EACvCe,gBAAAA,OAAkB,IAAHD,EAAG,GAAEA,EAYpBE,EAAwDC,EACtDN,GAAgBE,IAA0Bf,GAC3CoB,EAAAC,EAAAH,EAAA,GAFMI,EAAoBF,EAAA,GAAEG,EAAuBH,EAAA,GAG9CI,EAAkCC,GAAO,GAC/CC,EAAsCP,EAASG,EAAuBP,EAAwBf,GAAgB2B,EAAAN,EAAAK,EAAA,GAAvGE,EAAWD,EAAA,GAAEE,EAAcF,EAAA,GAClCG,EAAoDX,GAAS,GAAKY,EAAAV,EAAAS,EAAA,GAA3DE,EAAkBD,EAAA,GAAEE,EAAqBF,EAAA,GAE1CG,EAAkBC,EAAWC,GAuBnCC,GAAU,WACHb,EAAgCc,QAKrCf,GAAwB,GAJtBC,EAAgCc,SAAU,CAK9C,GAAG,CAACV,IAEJ,IAAMW,EAAoBC,GAAY,WAAK,IAAAC,EAAC,OAAa,QAAbA,EAAAtC,EAAImC,eAAS,IAAAG,OAAA,EAAAA,EAAAC,MAAM,GAAE,CAACvC,IAE1DwC,EAA+BC,IAA/BD,2BACFE,EAAUL,GAAY,WAC1B,GAAIZ,IAAgB5B,EAApB,CAKA,IAAM8C,EAAYH,EAA2BL,QAC7CT,EACyB,gBAAvBrB,GAAwCsC,EACpCC,EAAoC,CAAED,UAAAA,EAAWzC,oBAAAA,EAAqBD,WAAAA,IACtE,GAEN6B,GAAsB,EARrB,MAFCA,GAAsB,EAW1B,GAAG,CACDL,EACApB,EACAJ,EACAuC,EACAtC,EACAwB,EACAI,IAGIe,EAAcR,GAAY,WAE9BP,GAAsB,EACxB,GAAG,CAACA,IAEEgB,EAAST,GAAY,WAGzBP,GAAsB,GACtBJ,EAAe7B,EACjB,GAAG,CAAC6B,IAEJqB,EAAiB,CAAEC,UAAW,QAASC,SAAUP,EAAS1C,IAAAA,IAC1D+C,EAAiB,CAAEC,UAAW,YAAaC,SAAUJ,EAAa7C,IAAAA,IAClE+C,EAAiB,CAAEC,UAAW,OAAQC,SAAUH,EAAQ9C,IAAAA,IAExDkC,GAAU,iBACJT,GAAe,IACJ,QAAba,EAAAtC,EAAImC,eAAS,IAAAG,GAAAA,EAAAY,QAEjB,GAAG,CAACzB,EAAazB,IAEjB,IAAMmD,EAAoBd,GACxB,SAACe,GACCtB,EAD8BuB,UAAAC,OAAA,QAAAC,IAAAF,UAAA,IAAAA,UAAA,IAE9B3B,EAAe0B,GAEfjD,EAAcI,EAAe6C,GAAQA,EACtC,GACD,CAAC1B,EAAgBvB,EAAeI,IAG5BiD,EAAsBnB,GAAY,WACtC,GAAKR,EAGL,OAAOsB,EAAkB1B,GAAa,EACvC,GAAE,CAACI,EAAoBsB,EAAmB1B,IAY3C,OAVAgC,EAAyB,CACvBzD,IAAAA,EACA0D,eAAgBF,EAChBG,kBAlGwB,SAAChB,GAEzB,GADAb,GAAsB,GAClBL,IAAgB5B,EAApB,CAKA,IAAA+D,EAAkCC,EAAoC,CACpEpC,YAAAA,EACAxB,WAAAA,EACAC,oBAAAA,EACAyC,UAAAA,EACA7B,gBAAAA,IALkBgD,EAASF,EAATE,UAAFF,EAAVG,WAQNhC,SAAAA,EAAiBiC,qBAAqBhE,EAAK2C,GAE3CjB,EAAeoC,EAZhB,MAFCpC,EAAe,IAgGjBuC,SAAU7B,EACV1B,aAAAA,IAKK,CACLe,YAF0BI,EAAqBJ,EAAc5B,EAG7DsD,kBAAAA,EACAhC,qBAAAA,EAEJ"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vibe/core",
-  "version": "3.50.1-alpha-b401f.0",
+  "version": "3.50.1-alpha-1be71.0",
   "description": "Official monday.com UI resources for application development in React.js",
   "repository": {
     "type": "git",
@@ -88,7 +88,7 @@
   },
   "dependencies": {
     "@popperjs/core": "2.11.6",
-    "@vibe/icons": "1.7.3-alpha-b401f.0",
+    "@vibe/icons": "1.7.2",
     "a11y-dialog": "^7.5.2",
     "body-scroll-lock": "^4.0.0-beta.0",
     "browserslist-config-monday": "1.0.6",
@@ -287,5 +287,5 @@
       "gzip": true
     }
   ],
-  "gitHead": "ef89547a9d6a8682c0fe7c9a04e992ee36530cce"
+  "gitHead": "52aa1cf920964116a5055c2f5a65a8592d6c3cbb"
 }