npm - @vibe/core - Versions diffs - 4.2.1 → 4.2.3 - Mend

@vibe/core 4.2.1 → 4.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1121) hide show

package/dist/src/components/Table/TableVirtualizedBody/TableVirtualizedBody.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{defineProperty as e}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import{__rest as t}from"../../../../_virtual/_tslib.js";import r,{forwardRef as n,useCallback as o,useEffect as i,useMemo as l}from"react";import a from"../TableBody/TableBody.js";import s from"./TableVirtualizedBody.module.scss.js";import{FixedSizeList as c}from"react-window";import{useTable as d}from"../context/TableContext/TableContext.js";import m from"classnames";import{getTestId as u}from"../../../tests/testIds.js";import{ComponentDefaultTestId as f}from"../../../tests/constants.js";import{RowHeights as v}from"../Table/TableConsts.js";import p from"react-virtualized-auto-sizer";import{useTableRowMenu as b}from"../context/TableRowMenuContext/TableRowMenuContext.js";var T=r.memo((function(e){var n,o=e.style,i=(0,e.rowRenderer)(e.item),l=t(o,["width"]);return r.cloneElement(i,{style:Object.assign(Object.assign({},l),null===(n=i.props)||void 0===n?void 0:n.style)})})),h=n((function(h,E){var g=h.items,w=h.rowRenderer,y=h.onScroll,j=h.columns,R=h.headerRenderer,B=h.id,L=h.className,x=h["data-testid"],z=h.overscanCount,C=void 0===z?1:z,_=d(),I=_.size,O=_.virtualizedListRef,A=_.onVirtualizedListScroll,D=_.markTableAsVirtualized,S=_.dataState,V=b().resetHoveredRow,H=!!j&&!!R,N=(S||{}).isLoading,U=o((function(e){var t=e.target;V(),A({target:t,currentTarget:t})}),[V,A]);i((function(){var e=O.current;if(e)return e.addEventListener("scroll",U),function(){e.removeEventListener("scroll",U)}}),[U,O]);var M=o((function(e){H||null==y||y(e.scrollDirection,e.scrollOffset,e.scrollUpdateWasRequested)}),[y,H]),P=o((function(e){var t=e.index;return H&&0===t?null:r.createElement(T,{item:g[H?t-1:t],rowRenderer:w,style:e.style})}),[g,w,H]);i((function(){H||D()}),[D,H]);var Y=l((function(){return H?n((function(e,n){var o=e.children,i=t(e,["children"]);return r.createElement("div",Object.assign({ref:n},i),R(j),o)})):void 0}),[H,R,j]);return N&&H?r.createElement("div",{ref:E,id:B,className:m(s.tableBody,s.withHeader,L),"data-testid":x||u(f.TABLE_VIRTUALIZED_BODY,B)},R(j),r.createElement(a,null)):r.createElement(a,{className:m(s.tableBody,e({},s.withHeader,H),L),id:B,"data-testid":x||u(f.TABLE_VIRTUALIZED_BODY,B),ref:E},(null==g?void 0:g.length)&&r.createElement(p,null,(function(e){return r.createElement(c,{className:s.tableBodyItems,itemSize:v[I],height:e.height,itemCount:H?g.length+1:g.length,width:e.width,overscanCount:C,onScroll:M,outerRef:function(e){O.current=e},innerElementType:Y},P)})))}));export{h as default};
+import{defineProperty as e}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import{__rest as t}from"../../../../_virtual/_tslib.js";import r,{forwardRef as n,useCallback as o,useEffect as i,useMemo as l}from"react";import a from"../TableBody/TableBody.js";import s from"./TableVirtualizedBody.module.scss.js";import{FixedSizeList as c}from"react-window";import{useTable as d}from"../context/TableContext/TableContext.js";import m from"classnames";import{getTestId as u}from"../../../../testIds.js";import{ComponentDefaultTestId as f}from"../../../tests/constants.js";import{RowHeights as v}from"../Table/TableConsts.js";import p from"react-virtualized-auto-sizer";import{useTableRowMenu as b}from"../context/TableRowMenuContext/TableRowMenuContext.js";var T=r.memo((function(e){var n,o=e.style,i=(0,e.rowRenderer)(e.item),l=t(o,["width"]);return r.cloneElement(i,{style:Object.assign(Object.assign({},l),null===(n=i.props)||void 0===n?void 0:n.style)})})),h=n((function(h,E){var g=h.items,w=h.rowRenderer,y=h.onScroll,j=h.columns,R=h.headerRenderer,B=h.id,L=h.className,x=h["data-testid"],z=h.overscanCount,C=void 0===z?1:z,_=d(),I=_.size,O=_.virtualizedListRef,A=_.onVirtualizedListScroll,D=_.markTableAsVirtualized,S=_.dataState,V=b().resetHoveredRow,H=!!j&&!!R,N=(S||{}).isLoading,U=o((function(e){var t=e.target;V(),A({target:t,currentTarget:t})}),[V,A]);i((function(){var e=O.current;if(e)return e.addEventListener("scroll",U),function(){e.removeEventListener("scroll",U)}}),[U,O]);var M=o((function(e){H||null==y||y(e.scrollDirection,e.scrollOffset,e.scrollUpdateWasRequested)}),[y,H]),P=o((function(e){var t=e.index;return H&&0===t?null:r.createElement(T,{item:g[H?t-1:t],rowRenderer:w,style:e.style})}),[g,w,H]);i((function(){H||D()}),[D,H]);var Y=l((function(){return H?n((function(e,n){var o=e.children,i=t(e,["children"]);return r.createElement("div",Object.assign({ref:n},i),R(j),o)})):void 0}),[H,R,j]);return N&&H?r.createElement("div",{ref:E,id:B,className:m(s.tableBody,s.withHeader,L),"data-testid":x||u(f.TABLE_VIRTUALIZED_BODY,B)},R(j),r.createElement(a,null)):r.createElement(a,{className:m(s.tableBody,e({},s.withHeader,H),L),id:B,"data-testid":x||u(f.TABLE_VIRTUALIZED_BODY,B),ref:E},(null==g?void 0:g.length)&&r.createElement(p,null,(function(e){return r.createElement(c,{className:s.tableBodyItems,itemSize:v[I],height:e.height,itemCount:H?g.length+1:g.length,width:e.width,overscanCount:C,onScroll:M,outerRef:function(e){O.current=e},innerElementType:Y},P)})))}));export{h as default};
 //# sourceMappingURL=TableVirtualizedBody.js.map

package/dist/src/components/Table/TableVirtualizedBody/TableVirtualizedBody.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TableVirtualizedBody.js","sources":["../../../../../src/components/Table/TableVirtualizedBody/TableVirtualizedBody.tsx"],"sourcesContent":["import React, { type ComponentType, forwardRef, useCallback, useEffect, useMemo } from \"react\";\nimport { type VibeComponentProps } from \"../../../types\";\nimport TableBody from \"../TableBody/TableBody\";\nimport styles from \"./TableVirtualizedBody.module.scss\";\nimport { FixedSizeList as List, type ListChildComponentProps, type ScrollDirection } from \"react-window\";\nimport { useTable } from \"../context/TableContext/TableContext\";\nimport cx from \"classnames\";\nimport { getTestId } from \"../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../../tests/constants\";\nimport { RowHeights } from \"../Table/TableConsts\";\nimport AutoSizer, { type Size as AutoSizerSize } from \"react-virtualized-auto-sizer\";\nimport { useTableRowMenu } from \"../context/TableRowMenuContext/TableRowMenuContext\";\nimport { type TableColumn } from \"../Table/Table\";\n\nexport type TableVirtualizedRow = Record<string, unknown> & { id: string };\n\nexport interface TableVirtualizedBodyProps<T extends TableVirtualizedRow = TableVirtualizedRow>\n extends VibeComponentProps {\n /*\n The list of items to render in the virtualized table.\n /\n items: T[];\n /\n Function to render a row in the table.\n /\n rowRenderer: (item: T) => JSX.Element;\n /\n Callback function triggered on scroll.\n /\n onScroll?: (horizontalScrollDirection: ScrollDirection, scrollTop: number, scrollUpdateWasRequested: boolean) => void;\n /\n The columns configuration for the table.\n /\n columns?: TableColumn[];\n /\n Function to render the table header.\n /\n headerRenderer?: (columns: TableColumn[]) => JSX.Element;\n /\n Number of rows to render above/below the visible area.\n */\n overscanCount?: number;\n}\n\nconst MemoizedRow = React.memo(\n <T extends TableVirtualizedRow>({\n item,\n rowRenderer,\n style\n }: {\n item: T;\n rowRenderer: (item: T) => JSX.Element;\n style: React.CSSProperties;\n }) => {\n const element = rowRenderer(item);\n const { width: _width, ...styleWithoutWidth } = style;\n return React.cloneElement(element, {\n style: { ...styleWithoutWidth, ...element.props?.style }\n });\n }\n);\n\nconst TableVirtualizedBody = forwardRef(\n <T extends TableVirtualizedRow = TableVirtualizedRow>(\n {\n items,\n rowRenderer,\n onScroll,\n columns,\n headerRenderer,\n id,\n className,\n \"data-testid\": dataTestId,\n overscanCount = 1\n }: TableVirtualizedBodyProps<T>,\n ref: React.ForwardedRef<HTMLDivElement>\n ) => {\n const { size, virtualizedListRef, onVirtualizedListScroll, markTableAsVirtualized, dataState } = useTable();\n const { resetHoveredRow } = useTableRowMenu();\n const virtualizedWithHeader = !!columns && !!headerRenderer;\n const { isLoading } = dataState \|\| {};\n\n const handleOuterScroll = useCallback(\n (e: Event) => {\n const target = e.target as HTMLDivElement;\n resetHoveredRow();\n onVirtualizedListScroll({\n target,\n currentTarget: target\n } as unknown as React.UIEvent<HTMLDivElement>);\n },\n [resetHoveredRow, onVirtualizedListScroll]\n );\n\n useEffect(() => {\n const scrollElement = virtualizedListRef.current;\n if (!scrollElement) return;\n\n scrollElement.addEventListener(\"scroll\", handleOuterScroll);\n\n return () => {\n scrollElement.removeEventListener(\"scroll\", handleOuterScroll);\n };\n }, [handleOuterScroll, virtualizedListRef]);\n\n const handleVirtualizedVerticalScroll = useCallback(\n ({\n scrollDirection,\n scrollOffset,\n scrollUpdateWasRequested\n }: {\n scrollDirection: ScrollDirection;\n scrollOffset: number;\n scrollUpdateWasRequested: boolean;\n }) => {\n if (virtualizedWithHeader) return;\n onScroll?.(scrollDirection, scrollOffset, scrollUpdateWasRequested);\n },\n [onScroll, virtualizedWithHeader]\n );\n\n const itemRenderer = useCallback<ComponentType<ListChildComponentProps<T>>>(\n ({ index, style }) => {\n if (virtualizedWithHeader && index === 0) {\n return null; //placeholder for virtualized with header\n }\n const currentIndex = virtualizedWithHeader ? index - 1 : index;\n const currentItem = items[currentIndex];\n\n return <MemoizedRow item={currentItem} rowRenderer={rowRenderer} style={style} />;\n },\n [items, rowRenderer, virtualizedWithHeader]\n );\n\n useEffect(() => {\n if (!virtualizedWithHeader) markTableAsVirtualized();\n }, [markTableAsVirtualized, virtualizedWithHeader]);\n\n const memoizedInnerElementType = useMemo(\n () =>\n virtualizedWithHeader\n ? forwardRef(({ children, ...rest }: any, ref: React.Ref<HTMLDivElement>) => (\n <div ref={ref} {...rest}>\n {headerRenderer!(columns!)}\n {children}\n </div>\n ))\n : undefined,\n [virtualizedWithHeader, headerRenderer, columns]\n );\n\n // When in loading state and we have a header renderer, render header separately\n if (isLoading && virtualizedWithHeader) {\n return (\n <div\n ref={ref}\n id={id}\n className={cx(styles.tableBody, styles.withHeader, className)}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.TABLE_VIRTUALIZED_BODY, id)}\n >\n {headerRenderer!(columns!)}\n <TableBody />\n </div>\n );\n }\n\n return (\n <TableBody\n className={cx(\n styles.tableBody,\n {\n [styles.withHeader]: virtualizedWithHeader\n },\n className\n )}\n id={id}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.TABLE_VIRTUALIZED_BODY, id)}\n ref={ref}\n >\n {items?.length && (\n <AutoSizer>\n {({ height, width }: AutoSizerSize) => (\n <List\n className={styles.tableBodyItems}\n itemSize={RowHeights[size]}\n height={height}\n itemCount={virtualizedWithHeader ? items.length + 1 : items.length}\n width={width}\n overscanCount={overscanCount}\n onScroll={handleVirtualizedVerticalScroll}\n outerRef={element => {\n virtualizedListRef.current = element;\n }}\n innerElementType={memoizedInnerElementType}\n >\n {itemRenderer}\n </List>\n )}\n </AutoSizer>\n )}\n </TableBody>\n );\n }\n);\n\nexport default TableVirtualizedBody;\n"],"names":["MemoizedRow","React","memo","_ref","style","element","rowRenderer","item","styleWithoutWidth","__rest","cloneElement","Object","assign","_a","props","TableVirtualizedBody","forwardRef","_ref2","ref","items","onScroll","columns","headerRenderer","id","className","dataTestId","_ref2$overscanCount","overscanCount","_useTable","useTable","size","virtualizedListRef","onVirtualizedListScroll","markTableAsVirtualized","dataState","resetHoveredRow","useTableRowMenu","virtualizedWithHeader","isLoading","handleOuterScroll","useCallback","e","target","currentTarget","useEffect","scrollElement","current","addEventListener","removeEventListener","handleVirtualizedVerticalScroll","_ref4","scrollDirection","scrollOffset","scrollUpdateWasRequested","itemRenderer","_ref5","index","createElement","memoizedInnerElementType","useMemo","children","rest","undefined","cx","styles","tableBody","withHeader","getTestId","ComponentDefaultTestId","TABLE_VIRTUALIZED_BODY","TableBody","_defineProperty","length","AutoSizer","_ref6","List","tableBodyItems","itemSize","RowHeights","height","itemCount","width","outerRef","innerElementType"],"mappings":"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"}
1	+ {"version":3,"file":"TableVirtualizedBody.js","sources":["../../../../../src/components/Table/TableVirtualizedBody/TableVirtualizedBody.tsx"],"sourcesContent":["import React, { type ComponentType, forwardRef, useCallback, useEffect, useMemo } from \"react\";\nimport { type VibeComponentProps } from \"../../../types\";\nimport TableBody from \"../TableBody/TableBody\";\nimport styles from \"./TableVirtualizedBody.module.scss\";\nimport { FixedSizeList as List, type ListChildComponentProps, type ScrollDirection } from \"react-window\";\nimport { useTable } from \"../context/TableContext/TableContext\";\nimport cx from \"classnames\";\nimport { getTestId } from \"../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../../tests/constants\";\nimport { RowHeights } from \"../Table/TableConsts\";\nimport AutoSizer, { type Size as AutoSizerSize } from \"react-virtualized-auto-sizer\";\nimport { useTableRowMenu } from \"../context/TableRowMenuContext/TableRowMenuContext\";\nimport { type TableColumn } from \"../Table/Table\";\n\nexport type TableVirtualizedRow = Record<string, unknown> & { id: string };\n\nexport interface TableVirtualizedBodyProps<T extends TableVirtualizedRow = TableVirtualizedRow>\n extends VibeComponentProps {\n /*\n The list of items to render in the virtualized table.\n /\n items: T[];\n /\n Function to render a row in the table.\n /\n rowRenderer: (item: T) => JSX.Element;\n /\n Callback function triggered on scroll.\n /\n onScroll?: (horizontalScrollDirection: ScrollDirection, scrollTop: number, scrollUpdateWasRequested: boolean) => void;\n /\n The columns configuration for the table.\n /\n columns?: TableColumn[];\n /\n Function to render the table header.\n /\n headerRenderer?: (columns: TableColumn[]) => JSX.Element;\n /\n Number of rows to render above/below the visible area.\n */\n overscanCount?: number;\n}\n\nconst MemoizedRow = React.memo(\n <T extends TableVirtualizedRow>({\n item,\n rowRenderer,\n style\n }: {\n item: T;\n rowRenderer: (item: T) => JSX.Element;\n style: React.CSSProperties;\n }) => {\n const element = rowRenderer(item);\n const { width: _width, ...styleWithoutWidth } = style;\n return React.cloneElement(element, {\n style: { ...styleWithoutWidth, ...element.props?.style }\n });\n }\n);\n\nconst TableVirtualizedBody = forwardRef(\n <T extends TableVirtualizedRow = TableVirtualizedRow>(\n {\n items,\n rowRenderer,\n onScroll,\n columns,\n headerRenderer,\n id,\n className,\n \"data-testid\": dataTestId,\n overscanCount = 1\n }: TableVirtualizedBodyProps<T>,\n ref: React.ForwardedRef<HTMLDivElement>\n ) => {\n const { size, virtualizedListRef, onVirtualizedListScroll, markTableAsVirtualized, dataState } = useTable();\n const { resetHoveredRow } = useTableRowMenu();\n const virtualizedWithHeader = !!columns && !!headerRenderer;\n const { isLoading } = dataState \|\| {};\n\n const handleOuterScroll = useCallback(\n (e: Event) => {\n const target = e.target as HTMLDivElement;\n resetHoveredRow();\n onVirtualizedListScroll({\n target,\n currentTarget: target\n } as unknown as React.UIEvent<HTMLDivElement>);\n },\n [resetHoveredRow, onVirtualizedListScroll]\n );\n\n useEffect(() => {\n const scrollElement = virtualizedListRef.current;\n if (!scrollElement) return;\n\n scrollElement.addEventListener(\"scroll\", handleOuterScroll);\n\n return () => {\n scrollElement.removeEventListener(\"scroll\", handleOuterScroll);\n };\n }, [handleOuterScroll, virtualizedListRef]);\n\n const handleVirtualizedVerticalScroll = useCallback(\n ({\n scrollDirection,\n scrollOffset,\n scrollUpdateWasRequested\n }: {\n scrollDirection: ScrollDirection;\n scrollOffset: number;\n scrollUpdateWasRequested: boolean;\n }) => {\n if (virtualizedWithHeader) return;\n onScroll?.(scrollDirection, scrollOffset, scrollUpdateWasRequested);\n },\n [onScroll, virtualizedWithHeader]\n );\n\n const itemRenderer = useCallback<ComponentType<ListChildComponentProps<T>>>(\n ({ index, style }) => {\n if (virtualizedWithHeader && index === 0) {\n return null; //placeholder for virtualized with header\n }\n const currentIndex = virtualizedWithHeader ? index - 1 : index;\n const currentItem = items[currentIndex];\n\n return <MemoizedRow item={currentItem} rowRenderer={rowRenderer} style={style} />;\n },\n [items, rowRenderer, virtualizedWithHeader]\n );\n\n useEffect(() => {\n if (!virtualizedWithHeader) markTableAsVirtualized();\n }, [markTableAsVirtualized, virtualizedWithHeader]);\n\n const memoizedInnerElementType = useMemo(\n () =>\n virtualizedWithHeader\n ? forwardRef(({ children, ...rest }: any, ref: React.Ref<HTMLDivElement>) => (\n <div ref={ref} {...rest}>\n {headerRenderer!(columns!)}\n {children}\n </div>\n ))\n : undefined,\n [virtualizedWithHeader, headerRenderer, columns]\n );\n\n // When in loading state and we have a header renderer, render header separately\n if (isLoading && virtualizedWithHeader) {\n return (\n <div\n ref={ref}\n id={id}\n className={cx(styles.tableBody, styles.withHeader, className)}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.TABLE_VIRTUALIZED_BODY, id)}\n >\n {headerRenderer!(columns!)}\n <TableBody />\n </div>\n );\n }\n\n return (\n <TableBody\n className={cx(\n styles.tableBody,\n {\n [styles.withHeader]: virtualizedWithHeader\n },\n className\n )}\n id={id}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.TABLE_VIRTUALIZED_BODY, id)}\n ref={ref}\n >\n {items?.length && (\n <AutoSizer>\n {({ height, width }: AutoSizerSize) => (\n <List\n className={styles.tableBodyItems}\n itemSize={RowHeights[size]}\n height={height}\n itemCount={virtualizedWithHeader ? items.length + 1 : items.length}\n width={width}\n overscanCount={overscanCount}\n onScroll={handleVirtualizedVerticalScroll}\n outerRef={element => {\n virtualizedListRef.current = element;\n }}\n innerElementType={memoizedInnerElementType}\n >\n {itemRenderer}\n </List>\n )}\n </AutoSizer>\n )}\n </TableBody>\n );\n }\n);\n\nexport default TableVirtualizedBody;\n"],"names":["MemoizedRow","React","memo","_ref","style","element","rowRenderer","item","styleWithoutWidth","__rest","cloneElement","Object","assign","_a","props","TableVirtualizedBody","forwardRef","_ref2","ref","items","onScroll","columns","headerRenderer","id","className","dataTestId","_ref2$overscanCount","overscanCount","_useTable","useTable","size","virtualizedListRef","onVirtualizedListScroll","markTableAsVirtualized","dataState","resetHoveredRow","useTableRowMenu","virtualizedWithHeader","isLoading","handleOuterScroll","useCallback","e","target","currentTarget","useEffect","scrollElement","current","addEventListener","removeEventListener","handleVirtualizedVerticalScroll","_ref4","scrollDirection","scrollOffset","scrollUpdateWasRequested","itemRenderer","_ref5","index","createElement","memoizedInnerElementType","useMemo","children","rest","undefined","cx","styles","tableBody","withHeader","getTestId","ComponentDefaultTestId","TABLE_VIRTUALIZED_BODY","TableBody","_defineProperty","length","AutoSizer","_ref6","List","tableBodyItems","itemSize","RowHeights","height","itemCount","width","outerRef","innerElementType"],"mappings":"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"}

package/dist/src/components/Table/TableVirtualizedBody/TableVirtualizedBody.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={tableBody:"tableBody_89a8072826",tableBodyItems:"tableBodyItems_d3f391aa82",withHeader:"withHeader_a16ba0acb0"};!function(e){const t="s_id-e63e6a70f113_4_2_0";if("undefined"!=typeof document){const a=document.head||document.getElementsByTagName("head")[0];if(a.querySelector("#"+t))return;const d=document.createElement("style");d.id=t,a.firstChild?a.insertBefore(d,a.firstChild):a.appendChild(d),d.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}("/* stylelint-disable */\n/* stylelint-enable */\n.tableBody_89a8072826 {\n  height: calc(100% - var(--table-row-size));\n}\n.tableBody_89a8072826 .tableBodyItems_d3f391aa82::-webkit-scrollbar {\n  width: 6px;\n  height: 6px;\n}\n.tableBody_89a8072826 .tableBodyItems_d3f391aa82::-webkit-scrollbar-thumb {\n  background-color: var(--ui-border-color);\n  border-radius: 4px;\n}\n.tableBody_89a8072826.withHeader_a16ba0acb0 {\n  height: 100%;\n  overflow: hidden;\n}");export{e as default};
+var e={tableBody:"tableBody_82f2dc7273",tableBodyItems:"tableBodyItems_e7de147102",withHeader:"withHeader_37f0ead6be"};!function(e){const t="s_id-e63e6a70f113_4_2_2";if("undefined"!=typeof document){const d=document.head||document.getElementsByTagName("head")[0];if(d.querySelector("#"+t))return;const l=document.createElement("style");l.id=t,d.firstChild?d.insertBefore(l,d.firstChild):d.appendChild(l),l.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}("/* stylelint-disable */\n/* stylelint-enable */\n.tableBody_82f2dc7273 {\n  height: calc(100% - var(--table-row-size));\n}\n.tableBody_82f2dc7273 .tableBodyItems_e7de147102::-webkit-scrollbar {\n  width: 6px;\n  height: 6px;\n}\n.tableBody_82f2dc7273 .tableBodyItems_e7de147102::-webkit-scrollbar-thumb {\n  background-color: var(--ui-border-color);\n  border-radius: 4px;\n}\n.tableBody_82f2dc7273.withHeader_37f0ead6be {\n  height: 100%;\n  overflow: hidden;\n}");export{e as default};
 //# sourceMappingURL=TableVirtualizedBody.module.scss.js.map

package/dist/src/components/Table/context/TableContext/TableContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TableContext.js","sources":["../../../../../../src/components/Table/context/TableContext/TableContext.tsx"],"sourcesContent":["import React, { createContext, type UIEventHandler, useCallback, useContext, useMemo, useRef } from \"react\";\nimport { type TableContext as ITableContext, type TableProviderProps } from \"./TableContext.types\";\n\nconst TableContext = createContext<ITableContext \| undefined>(undefined);\n\nexport const TableProvider = ({ value, children }: TableProviderProps) => {\n const { setIsScrolled } = value;\n const headRef = useRef<HTMLDivElement>(null);\n const virtualizedListRef = useRef<HTMLDivElement>(null);\n const lastScrollLeft = useRef<number>(0);\n\n const syncScroll = useCallback(\n (newScrollLeft: number, source: \"head\" \| \"body\") => {\n if (newScrollLeft === lastScrollLeft.current) return;\n\n if (source === \"body\" && headRef.current) {\n headRef.current.scrollLeft = newScrollLeft;\n }\n if (source === \"head\" && virtualizedListRef.current) {\n virtualizedListRef.current.scrollLeft = newScrollLeft;\n }\n\n const hasScroll = newScrollLeft > 0;\n setIsScrolled(prevScroll => (prevScroll !== hasScroll ? hasScroll : prevScroll));\n\n lastScrollLeft.current = newScrollLeft;\n },\n [setIsScrolled]\n );\n\n const onHeadScroll: UIEventHandler<HTMLDivElement> = useCallback(\n e => {\n const newLeft = (e.target as HTMLDivElement).scrollLeft;\n syncScroll(newLeft, \"head\");\n },\n [syncScroll]\n );\n\n const onVirtualizedListScroll = useCallback<UIEventHandler<HTMLDivElement>>(\n e => {\n const newLeft = (e.target as HTMLDivElement).scrollLeft;\n syncScroll(newLeft, \"body\");\n },\n [syncScroll]\n );\n\n const contextValue = useMemo<ITableContext>(\n () => ({\n ...value,\n headRef,\n onHeadScroll,\n virtualizedListRef,\n onVirtualizedListScroll\n }),\n [value, onHeadScroll, onVirtualizedListScroll]\n );\n\n return <TableContext.Provider value={contextValue}>{children}</TableContext.Provider>;\n};\n\nexport const useTable = () => {\n const context = useContext(TableContext);\n if (context === undefined) {\n throw new Error(\"useTable must be used within a TableProvider\");\n }\n return context;\n};\n"],"names":["TableContext","createContext","undefined","TableProvider","_ref","value","children","setIsScrolled","headRef","useRef","virtualizedListRef","lastScrollLeft","syncScroll","useCallback","newScrollLeft","source","current","scrollLeft","hasScroll","prevScroll","onHeadScroll","e","target","onVirtualizedListScroll","contextValue","useMemo","Object","assign","React","createElement","Provider","useTable","context","useContext","Error"],"mappings":"mGAGA,IAAMA,EAAeC,OAAyCC,GAEjDC,EAAgB,SAAHC,GAA+C,IAAzCC,EAAKD,EAALC,MAAOC,EAAQF,EAARE,SAC7BC,EAAkBF,EAAlBE,cACFC,EAAUC,EAAuB,MACjCC,EAAqBD,EAAuB,MAC5CE,EAAiBF,EAAe,GAEhCG,EAAaC,GACjB,SAACC,EAAuBC,GACtB,GAAID,IAAkBH,EAAeK,QAArC,CAEe,SAAXD,GAAqBP,EAAQQ,UAC/BR,EAAQQ,QAAQC,WAAaH,GAEhB,SAAXC,GAAqBL,EAAmBM,UAC1CN,EAAmBM,QAAQC,WAAaH,GAG1C,IAAMI,EAAYJ,EAAgB,EAClCP,GAAc,SAAAY,GAAU,OAAKA,IAAeD,EAAYA,EAAYC,CAAU,IAE9ER,EAAeK,QAAUF,CAZqB,CAahD,GACA,CAACP,IAGGa,EAA+CP,GACnD,SAAAQ,GAEET,EADiBS,EAAEC,OAA0BL,WACzB,OACtB,GACA,CAACL,IAGGW,EAA0BV,GAC9B,SAAAQ,GAEET,EADiBS,EAAEC,OAA0BL,WACzB,OACtB,GACA,CAACL,IAGGY,EAAeC,GACnB,WAAA,OAAMC,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACDtB,GAAK,CACRG,QAAAA,EACAY,aAAAA,EACAV,mBAAAA,EACAa,wBAAAA,~~GACA~~,~~GACF~~,CAAClB,EAAOe,EAAcG,IAGxB,OAAOK,EAAAC,cAAC7B,EAAa8B,SAAQ,CAACzB,MAAOmB,GAAelB,EACtD,EAEayB,EAAW,WACtB,IAAMC,EAAUC,EAAWjC,GAC3B,QAAgBE,IAAZ8B,EACF,MAAUE,MAAM,gDAElB,OAAOF,CACT"}
1	+ {"version":3,"file":"TableContext.js","sources":["../../../../../../src/components/Table/context/TableContext/TableContext.tsx"],"sourcesContent":["import React, { createContext, type UIEventHandler, useCallback, useContext, useMemo, useRef } from \"react\";\nimport { type TableContext as ITableContext, type TableProviderProps } from \"./TableContext.types\";\n\nconst TableContext = createContext<ITableContext \| undefined>(undefined);\n\nexport const TableProvider = ({ value, children }: TableProviderProps) => {\n const { setIsScrolled } = value;\n const headRef = useRef<HTMLDivElement>(null);\n const virtualizedListRef = useRef<HTMLDivElement>(null);\n const lastScrollLeft = useRef<number>(0);\n\n const syncScroll = useCallback(\n (newScrollLeft: number, source: \"head\" \| \"body\") => {\n if (newScrollLeft === lastScrollLeft.current) return;\n\n if (source === \"body\" && headRef.current) {\n headRef.current.scrollLeft = newScrollLeft;\n }\n if (source === \"head\" && virtualizedListRef.current) {\n virtualizedListRef.current.scrollLeft = newScrollLeft;\n }\n\n const hasScroll = newScrollLeft > 0;\n setIsScrolled(prevScroll => (prevScroll !== hasScroll ? hasScroll : prevScroll));\n\n lastScrollLeft.current = newScrollLeft;\n },\n [setIsScrolled]\n );\n\n const onHeadScroll: UIEventHandler<HTMLDivElement> = useCallback(\n e => {\n const newLeft = (e.target as HTMLDivElement).scrollLeft;\n syncScroll(newLeft, \"head\");\n },\n [syncScroll]\n );\n\n const onVirtualizedListScroll = useCallback<UIEventHandler<HTMLDivElement>>(\n e => {\n const newLeft = (e.target as HTMLDivElement).scrollLeft;\n syncScroll(newLeft, \"body\");\n },\n [syncScroll]\n );\n\n const contextValue = useMemo<ITableContext>(\n () => ({\n ...value,\n headRef,\n onHeadScroll,\n virtualizedListRef,\n onVirtualizedListScroll\n }),\n [value, onHeadScroll, onVirtualizedListScroll]\n );\n\n return <TableContext.Provider value={contextValue}>{children}</TableContext.Provider>;\n};\n\nexport const useTable = () => {\n const context = useContext(TableContext);\n if (context === undefined) {\n throw new Error(\"useTable must be used within a TableProvider\");\n }\n return context;\n};\n"],"names":["TableContext","createContext","undefined","TableProvider","_ref","value","children","setIsScrolled","headRef","useRef","virtualizedListRef","lastScrollLeft","syncScroll","useCallback","newScrollLeft","source","current","scrollLeft","hasScroll","prevScroll","onHeadScroll","e","target","onVirtualizedListScroll","contextValue","useMemo","Object","assign","React","createElement","Provider","useTable","context","useContext","Error"],"mappings":"mGAGA,IAAMA,EAAeC,OAAyCC,GAEjDC,EAAgB,SAAHC,GAA+C,IAAzCC,EAAKD,EAALC,MAAOC,EAAQF,EAARE,SAC7BC,EAAkBF,EAAlBE,cACFC,EAAUC,EAAuB,MACjCC,EAAqBD,EAAuB,MAC5CE,EAAiBF,EAAe,GAEhCG,EAAaC,GACjB,SAACC,EAAuBC,GACtB,GAAID,IAAkBH,EAAeK,QAArC,CAEe,SAAXD,GAAqBP,EAAQQ,UAC/BR,EAAQQ,QAAQC,WAAaH,GAEhB,SAAXC,GAAqBL,EAAmBM,UAC1CN,EAAmBM,QAAQC,WAAaH,GAG1C,IAAMI,EAAYJ,EAAgB,EAClCP,GAAc,SAAAY,GAAU,OAAKA,IAAeD,EAAYA,EAAYC,CAAU,IAE9ER,EAAeK,QAAUF,CAZqB,CAahD,GACA,CAACP,IAGGa,EAA+CP,GACnD,SAAAQ,GAEET,EADiBS,EAAEC,OAA0BL,WACzB,OACtB,GACA,CAACL,IAGGW,EAA0BV,GAC9B,SAAAQ,GAEET,EADiBS,EAAEC,OAA0BL,WACzB,OACtB,GACA,CAACL,IAGGY,EAAeC,GACnB,WAAA,OAAMC,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACDtB,GAAK,CACRG,QAAAA,EACAY,aAAAA,EACAV,mBAAAA,EACAa,wBAAAA,GAAuB,GAEzB,CAAClB,EAAOe,EAAcG,IAGxB,OAAOK,EAAAC,cAAC7B,EAAa8B,SAAQ,CAACzB,MAAOmB,GAAelB,EACtD,EAEayB,EAAW,WACtB,IAAMC,EAAUC,EAAWjC,GAC3B,QAAgBE,IAAZ8B,EACF,MAAUE,MAAM,gDAElB,OAAOF,CACT"}

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

	@@ -1 +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 {\n type TableRowMenuContext as ITableRowMenuContext,\n type TableRowMenuProviderProps\n} 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":"sMAMA,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,~~aAAA~~,~~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"}
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 {\n type TableRowMenuContext as ITableRowMenuContext,\n type TableRowMenuProviderProps\n} 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":"sMAMA,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,CAMlB,GACA,CAACf,EAAYE,EAAkBJ,IAG3BsB,EAAkBP,GAAY,WAC9Bb,GAAcU,EAAcM,SAChCd,EAAiB,KACnB,GAAG,CAACF,EAAYE,IAEVmB,EAAqBR,GAAY,WACrCH,EAAcM,SAAU,CAC1B,GAAG,IAEGM,EAAsBT,GAAY,WACtCH,EAAcM,SAAU,EACpBhB,IAECD,aAAa,EAAbA,EAAeiB,UAClBd,EAAiB,KAErB,GAAG,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,KAEF,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 CHANGED Viewed

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Tab.js","sources":["../../../../../src/components/Tabs/Tab/Tab.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { type FC, forwardRef, type ReactElement, useRef } from \"react\";\nimport { noop as NOOP } from \"es-toolkit\";\nimport { useMergeRef, getStyle } from \"@vibe/shared\";\n\nimport { Icon, type IconType, type SubIcon } from \"@vibe/icon\";\nimport type VibeComponentProps from \"../../../types/VibeComponentProps\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../tests/test-ids-utils\";\nimport styles from \"./Tab.module.scss\";\nimport { Tooltip, type TooltipProps } from \"@vibe/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 If true, hides the individual tab border when using stretched underline.\n /\n stretchedUnderline?: 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 Tab index for focus management.\n /\n tabIndex?: number;\n /\n The id of the associated TabPanel for aria-controls attribute.\n */\n \"aria-controls\"?: string;\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 stretchedUnderline = false,\n onClick = NOOP,\n tooltipProps = {} as TooltipProps,\n icon,\n iconType,\n iconSide = \"left\",\n children,\n \"data-testid\": dataTestId,\n tabIndex,\n \"aria-controls\": ariaControls\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 aria-hidden={true}\n type={iconType}\n icon={icon}\n className={cx(styles.tabIcon, getStyle(styles, iconSide))}\n size={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 [styles.stretchedUnderline]: stretchedUnderline\n })}\n id={id}\n role=\"tab\"\n aria-selected={active}\n aria-disabled={disabled}\n aria-controls={ariaControls \|\| undefined}\n tabIndex={tabIndex}\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$stretchedUnderli","stretchedUnderline","_ref$onClick","onClick","NOOP","_ref$tooltipProps","tooltipProps","icon","iconType","_ref$iconSide","iconSide","children","dataTestId","tabIndex","ariaControls","componentRef","useRef","mergedRef","useMergeRef","React","createElement","Tooltip","Object","assign","content","key","cx","styles","tabWrapper","_defineProperty","tabFocusVisibleInset","role","undefined","getTestId","ComponentDefaultTestId","TAB","ComponentVibeId","onKeyDown","event","keyCodes","ENTER","SPACE","preventDefault","tabInner","iconElement","Icon","type","tabIcon","getStyle","size","ignoreFocusStyle","childrenArray","Children","toArray","concat","_toConsumableArray","renderIconAndChildren"],"mappings":"~~8wBAwEMA~~,~~IAAAA~~,EAAoBC,GACxB,SAAAC,EAoBEC,GACE,IAnBAC,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,mBAAAA,~~OAAqB~~,~~IAAHD~~,GAAQA,EAAAE,EAAAf,EAC1BgB,QAAAA,~~OAAUC~~,~~IAAHF~~,EAAGE,EAAIF,EAAAG,EAAAlB,EACdmB,aAAAA,OAAY,IAAAD,EAAG,~~CAAkB~~,~~EAAAA~~,EACjCE,EAAIpB,EAAJoB,KACAC,EAAQrB,EAARqB,SAAQC,EAAAtB,EACRuB,SAAAA,~~OAAW~~,~~IAAHD~~,EAAG,OAAMA,EACjBE,EAAQxB,EAARwB,SACeC,EAAUzB,EAAzB,eACA0B,EAAQ1B,EAAR0B,SACiBC,EAAY3B,EAA7B,iBAII4B,EAAeC,EAAO,MACtBC,EAAYC,EAAY9B,EAAK2B,GAgCnC,OACEI,~~EAACC~~,~~cAAAC~~,~~EAAYC~~,OAAAC,OAAA,CAAA,~~EAAAjB~~,GAAckB,QAASlB,EAAakB,UAC/CL,EAAAC,cAAA,KAAA,CACEhC,IAAK6B,EACLQ,IAAKlC,EACLF,UAAWqC,EAAGC,EAAOC,WAAYvC,EAASwC,EAAAA,EAAAA,EAAAA,EAAA,CAAA,EACvCF,EAAO9B,OAASA,GAChB8B,EAAOhC,SAAWA,GAClBgC,EAAOG,qBAAuB/B,GAC9B4B,EAAO1B,mBAAqBA,IAE/BV,GAAIA,EACJwC,KAAK,MAAK,gBACKlC,EAAM,gBACNF,~~EACA~~,~~gBAAAmB~~,QAAgBkB,EAC/BnB,SAAUA,EAAQ,cACLD,GAAcqB,EAAUC,EAAuBC,IAAK5C,GAAG,YACzD6C,EAAgBD,IAC3BhC,QAAS,WAAA,OAAOR,GAAYQ,EAAQV,EAAM,EAC1C4C,UA3BN,SAAuBC,GACjBA,EAAMb,MAAQc,EAASC,OAASF,EAAMb,MAAQc,EAASE,QACzDH,EAAMI,kBACL/C,GAAYQ,EAAQV,GAEzB,GAwBM0B,EAAAC,cAAA,MAAA,CAAK/B,UAAWqC,EAAGC,EAAOgB,SAAUrD,IApD1C,WACE,IAAKiB,EAAM,OAAOI,EAElB,IAAMiC,EACJzB,~~EAACC~~,~~cAAAyB~~,kBACc,EACbC,KAAMtC,EACND,KAAMA,EACNlB,UAAWqC,EAAGC,EAAOoB,QAASC,EAASrB,EAAQjB,IAC/CuC,KAAM,GACNC,kBAAgB,IAIdC,EAAgBhC,EAAMiC,SAASC,QAAQ1C,GAE7C,MAAiB,SAAbD,EACF,CAAQkC,GAAWU,OAAAC,EAAKJ,IAG1B,GAAAG,OAAAC,EAAWJ,IAAeP,GAC5B,CA+B+DY,KAIjE"}
1	+ {"version":3,"file":"Tab.js","sources":["../../../../../src/components/Tabs/Tab/Tab.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { type FC, forwardRef, type ReactElement, useRef } from \"react\";\nimport { noop as NOOP } from \"es-toolkit\";\nimport { useMergeRef, getStyle } from \"@vibe/shared\";\n\nimport { Icon, type IconType, type SubIcon } from \"@vibe/icon\";\nimport type VibeComponentProps from \"../../../types/VibeComponentProps\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../tests/test-ids-utils\";\nimport styles from \"./Tab.module.scss\";\nimport { Tooltip, type TooltipProps } from \"@vibe/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 If true, hides the individual tab border when using stretched underline.\n /\n stretchedUnderline?: 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 Tab index for focus management.\n /\n tabIndex?: number;\n /\n The id of the associated TabPanel for aria-controls attribute.\n */\n \"aria-controls\"?: string;\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 stretchedUnderline = false,\n onClick = NOOP,\n tooltipProps = {} as TooltipProps,\n icon,\n iconType,\n iconSide = \"left\",\n children,\n \"data-testid\": dataTestId,\n tabIndex,\n \"aria-controls\": ariaControls\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 aria-hidden={true}\n type={iconType}\n icon={icon}\n className={cx(styles.tabIcon, getStyle(styles, iconSide))}\n size={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 [styles.stretchedUnderline]: stretchedUnderline\n })}\n id={id}\n role=\"tab\"\n aria-selected={active}\n aria-disabled={disabled}\n aria-controls={ariaControls \|\| undefined}\n tabIndex={tabIndex}\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$stretchedUnderli","stretchedUnderline","_ref$onClick","onClick","NOOP","_ref$tooltipProps","tooltipProps","icon","iconType","_ref$iconSide","iconSide","children","dataTestId","tabIndex","ariaControls","componentRef","useRef","mergedRef","useMergeRef","React","createElement","Tooltip","Object","assign","content","key","cx","styles","tabWrapper","_defineProperty","tabFocusVisibleInset","role","undefined","getTestId","ComponentDefaultTestId","TAB","ComponentVibeId","onKeyDown","event","keyCodes","ENTER","SPACE","preventDefault","tabInner","iconElement","Icon","type","tabIcon","getStyle","size","ignoreFocusStyle","childrenArray","Children","toArray","concat","_toConsumableArray","renderIconAndChildren"],"mappings":"2wBAwEA,IAAMA,EAAoBC,GACxB,SAAAC,EAoBEC,GACE,IAnBAC,EAASF,EAATE,UACAC,EAAiBH,EAAjBG,kBACAC,EAAEJ,EAAFI,GAAEC,EAAAL,EACFM,MAAAA,OAAK,IAAAD,EAAG,EAACA,EAAAE,EAAAP,EACTQ,SAAAA,OAAQ,IAAAD,GAAQA,EAAAE,EAAAT,EAChBU,OAAAA,OAAM,IAAAD,GAAQA,EAAAE,EAAAX,EACdY,MAAAA,OAAK,IAAAD,GAAQA,EAAAE,EAAAb,EACbc,mBAAAA,OAAkB,IAAAD,GAAQA,EAAAE,EAAAf,EAC1BgB,QAAAA,OAAO,IAAAD,EAAGE,EAAIF,EAAAG,EAAAlB,EACdmB,aAAAA,OAAY,IAAAD,EAAG,CAAA,EAAkBA,EACjCE,EAAIpB,EAAJoB,KACAC,EAAQrB,EAARqB,SAAQC,EAAAtB,EACRuB,SAAAA,OAAQ,IAAAD,EAAG,OAAMA,EACjBE,EAAQxB,EAARwB,SACeC,EAAUzB,EAAzB,eACA0B,EAAQ1B,EAAR0B,SACiBC,EAAY3B,EAA7B,iBAII4B,EAAeC,EAAO,MACtBC,EAAYC,EAAY9B,EAAK2B,GAgCnC,OACEI,EAAAC,cAACC,EAAOC,OAAAC,OAAA,CAAA,EAAKjB,GAAckB,QAASlB,EAAakB,UAC/CL,EAAAC,cAAA,KAAA,CACEhC,IAAK6B,EACLQ,IAAKlC,EACLF,UAAWqC,EAAGC,EAAOC,WAAYvC,EAASwC,EAAAA,EAAAA,EAAAA,EAAA,CAAA,EACvCF,EAAO9B,OAASA,GAChB8B,EAAOhC,SAAWA,GAClBgC,EAAOG,qBAAuB/B,GAC9B4B,EAAO1B,mBAAqBA,IAE/BV,GAAIA,EACJwC,KAAK,MAAK,gBACKlC,EAAM,gBACNF,EAAQ,gBACRmB,QAAgBkB,EAC/BnB,SAAUA,EAAQ,cACLD,GAAcqB,EAAUC,EAAuBC,IAAK5C,GAAG,YACzD6C,EAAgBD,IAC3BhC,QAAS,WAAA,OAAOR,GAAYQ,EAAQV,EAAM,EAC1C4C,UA3BN,SAAuBC,GACjBA,EAAMb,MAAQc,EAASC,OAASF,EAAMb,MAAQc,EAASE,QACzDH,EAAMI,kBACL/C,GAAYQ,EAAQV,GAEzB,GAwBM0B,EAAAC,cAAA,MAAA,CAAK/B,UAAWqC,EAAGC,EAAOgB,SAAUrD,IApD1C,WACE,IAAKiB,EAAM,OAAOI,EAElB,IAAMiC,EACJzB,EAAAC,cAACyB,kBACc,EACbC,KAAMtC,EACND,KAAMA,EACNlB,UAAWqC,EAAGC,EAAOoB,QAASC,EAASrB,EAAQjB,IAC/CuC,KAAM,GACNC,kBAAgB,IAIdC,EAAgBhC,EAAMiC,SAASC,QAAQ1C,GAE7C,MAAiB,SAAbD,EACF,CAAQkC,GAAWU,OAAAC,EAAKJ,IAG1B,GAAAG,OAAAC,EAAWJ,IAAeP,GAC5B,CA+B+DY,KAIjE"}

package/dist/src/components/Tabs/Tab/Tab.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={tabWrapper:"tabWrapper_b0db8e0cbb",stretchedUnderline:"stretchedUnderline_423e06a399",tabInner:"tabInner_b3730e703e",tabIcon:"tabIcon_4b8813aed6",right:"right_35303781d6",tabFocusVisibleInset:"tabFocusVisibleInset_db4fa2c1d6",active:"active_87885b58a8",disabled:"disabled_48f79b93ff"};!function(e){const n="s_id-bfaa9c7255c3_4_2_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const r=document.createElement("style");r.id=n,t.firstChild?t.insertBefore(r,t.firstChild):t.appendChild(r),r.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}('/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable selector-class-pattern */\n/* stylelint-disable */\n/* stylelint-enable */\n.tabWrapper_b0db8e0cbb {\n  position: relative;\n  display: inline-block;\n  padding-inline: 1px;\n  border-top: 1px solid transparent;\n  border-bottom: 2px solid;\n  border-bottom-color: var(--ui-background-color);\n  color: var(--primary-text-color);\n  text-align: center;\n  height: 100%;\n  margin: 0;\n}\n.tabWrapper_b0db8e0cbb.stretchedUnderline_423e06a399 {\n  border-bottom: 0;\n}\n.tabWrapper_b0db8e0cbb:after {\n  display: block;\n  position: absolute;\n  inset-inline: 0;\n  content: "";\n  border-bottom: solid 2px;\n  border-bottom-color: var(--primary-color);\n  transform: scaleX(0);\n  z-index: 0;\n}\n.tabWrapper_b0db8e0cbb .tabInner_b3730e703e {\n  height: calc(100% - 1px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-decoration: none;\n  padding: 4px 16px;\n  font: var(--font-text1-normal);\n  user-select: none;\n  margin-bottom: 1px;\n  cursor: pointer;\n  color: var(--primary-text-color);\n}\n.tabWrapper_b0db8e0cbb .tabInner_b3730e703e:focus {\n  outline: none;\n}\n.tabWrapper_b0db8e0cbb .tabInner_b3730e703e .tabIcon_4b8813aed6 {\n  color: var(--icon-color);\n  margin-inline-end: var(--space-8);\n}\n.tabWrapper_b0db8e0cbb .tabInner_b3730e703e .tabIcon_4b8813aed6.right_35303781d6 {\n  margin-inline-end: 0;\n  margin-inline-start: var(--space-8);\n}\n.tabWrapper_b0db8e0cbb.tabFocusVisibleInset_db4fa2c1d6 {\n  outline: none;\n  z-index: 11;\n  border-radius: 3px;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5) inset, 0 0 0 1px var(--primary-hover-color) inset;\n  position: relative;\n}\n.tabWrapper_b0db8e0cbb.active_87885b58a8:after {\n  transform: scaleX(1);\n  transition: transform var(--motion-productive-medium) var(--motion-timing-enter);\n}\n.tabWrapper_b0db8e0cbb.disabled_48f79b93ff .tabInner_b3730e703e {\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n}\n.tabWrapper_b0db8e0cbb:not(.disabled_48f79b93ff) .tabInner_b3730e703e:hover {\n  border-radius: 4px;\n  background-color: var(--primary-background-hover-color);\n}');export{e as default};
+var n={tabWrapper:"tabWrapper_e9dc8b8442",stretchedUnderline:"stretchedUnderline_8a8e742796",tabInner:"tabInner_b050a34a64",tabIcon:"tabIcon_2778004bd4",right:"right_4a96a5b39d",tabFocusVisibleInset:"tabFocusVisibleInset_955de6095f",active:"active_225ecc7555",disabled:"disabled_2106bff241"};!function(n){const e="s_id-bfaa9c7255c3_4_2_2";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+e))return;const r=document.createElement("style");r.id=e,t.firstChild?t.insertBefore(r,t.firstChild):t.appendChild(r),r.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=n)}('/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable selector-class-pattern */\n/* stylelint-disable */\n/* stylelint-enable */\n.tabWrapper_e9dc8b8442 {\n  position: relative;\n  display: inline-block;\n  padding-inline: 1px;\n  border-top: 1px solid transparent;\n  border-bottom: 2px solid;\n  border-bottom-color: var(--ui-background-color);\n  color: var(--primary-text-color);\n  text-align: center;\n  height: 100%;\n  margin: 0;\n}\n.tabWrapper_e9dc8b8442.stretchedUnderline_8a8e742796 {\n  border-bottom: 0;\n}\n.tabWrapper_e9dc8b8442:after {\n  display: block;\n  position: absolute;\n  inset-inline: 0;\n  content: "";\n  border-bottom: solid 2px;\n  border-bottom-color: var(--primary-color);\n  transform: scaleX(0);\n  z-index: 0;\n}\n.tabWrapper_e9dc8b8442 .tabInner_b050a34a64 {\n  height: calc(100% - 1px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-decoration: none;\n  padding: 4px 16px;\n  font: var(--font-text1-normal);\n  user-select: none;\n  margin-bottom: 1px;\n  cursor: pointer;\n  color: var(--primary-text-color);\n}\n.tabWrapper_e9dc8b8442 .tabInner_b050a34a64:focus {\n  outline: none;\n}\n.tabWrapper_e9dc8b8442 .tabInner_b050a34a64 .tabIcon_2778004bd4 {\n  color: var(--icon-color);\n  margin-inline-end: var(--space-8);\n}\n.tabWrapper_e9dc8b8442 .tabInner_b050a34a64 .tabIcon_2778004bd4.right_4a96a5b39d {\n  margin-inline-end: 0;\n  margin-inline-start: var(--space-8);\n}\n.tabWrapper_e9dc8b8442.tabFocusVisibleInset_955de6095f {\n  outline: none;\n  z-index: 11;\n  border-radius: 3px;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5) inset, 0 0 0 1px var(--primary-hover-color) inset;\n  position: relative;\n}\n.tabWrapper_e9dc8b8442.active_225ecc7555:after {\n  transform: scaleX(1);\n  transition: transform var(--motion-productive-medium) var(--motion-timing-enter);\n}\n.tabWrapper_e9dc8b8442.disabled_2106bff241 .tabInner_b050a34a64 {\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n}\n.tabWrapper_e9dc8b8442:not(.disabled_2106bff241) .tabInner_b050a34a64:hover {\n  border-radius: 4px;\n  background-color: var(--primary-background-hover-color);\n}');export{n as default};
 //# sourceMappingURL=Tab.module.scss.js.map

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TabList.js","sources":["../../../../../src/components/Tabs/TabList/TabList.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport { camelCase } from \"es-toolkit\";\nimport React, {\n type FC,\n forwardRef,\n type ReactElement,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState\n} from \"react\";\nimport useGridKeyboardNavigation from \"../../../hooks/useGridKeyboardNavigation/useGridKeyboardNavigation\";\nimport { useMergeRef, NOOP, getStyle } from \"@vibe/shared\";\nimport usePrevious from \"../../../hooks/usePrevious\";\nimport type VibeComponentProps from \"../../../types/VibeComponentProps\";\n\nimport { type TabProps } from \"../Tab/Tab\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../tests/test-ids-utils\";\n\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 If true, Sets an E2E underline under the whole tabs component.\n /\n stretchedUnderline?: boolean;\n /\n Array of corresponding TabPanel ids for aria-controls relationship.\n /\n tabPanelIds?: string[];\n /\n The child elements representing tabs.\n */\n children?: ReactElement<TabProps>[];\n}\nconst TabList: FC<TabListProps> = forwardRef(\n (\n {\n className,\n id,\n onTabChange = NOOP,\n activeTabId = 0,\n tabType = \"Compact\",\n size,\n stretchedUnderline = false,\n tabPanelIds = [],\n children,\n \"data-testid\": dataTestId\n },\n ref\n ) => {\n const componentRef = useRef(null);\n const mergedRef = useMergeRef(ref, componentRef);\n const tabRefs = useRef<Record<number, HTMLElement \| null>>({});\n\n const [activeTabState, setActiveTabState] = useState<number>(activeTabId);\n\n const prevActiveTabIdProp = usePrevious(activeTabId);\n const prevActiveTabState = usePrevious(activeTabState);\n\n useEffect(() => {\n // Update active tab if changed from props\n\n if (activeTabId !== prevActiveTabIdProp && activeTabId !== activeTabState) {\n setActiveTabState(activeTabId);\n }\n }, [activeTabId, prevActiveTabIdProp, activeTabState, setActiveTabState]);\n\n // Focus management: when activeTabState changes, focus the active tab\n useEffect(() => {\n if (\n prevActiveTabState !== undefined &&\n prevActiveTabState !== activeTabState &&\n tabRefs.current[activeTabState]\n ) {\n tabRefs.current[activeTabState]?.focus();\n }\n }, [activeTabState, prevActiveTabState]);\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 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 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 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 // Focus management: when focusIndex changes during keyboard navigation, focus the focused tab\n const prevFocusIndex = usePrevious(focusIndex);\n useEffect(() => {\n if (focusIndex !== undefined && focusIndex >= 0 && prevFocusIndex !== focusIndex && tabRefs.current[focusIndex]) {\n tabRefs.current[focusIndex]?.focus();\n }\n }, [focusIndex, prevFocusIndex]);\n\n const tabsToRender = useMemo(() => {\n const childrenToRender = React.Children.map(children, (child, index) => {\n const isActive = activeTabState === index;\n\n const shouldBeFocusable = focusIndex !== undefined && focusIndex >= 0 ? focusIndex === index : isActive;\n\n return React.cloneElement(child, {\n value: index,\n active: isActive,\n focus: focusIndex === index,\n onClick: onSelectionAction,\n stretchedUnderline,\n className: cx(styles.tabListTabWrapper, child.props.className),\n tabInnerClassName: cx(styles.tabListTabInner, child.props.tabInnerClassName),\n tabIndex: shouldBeFocusable ? 0 : -1,\n \"aria-controls\": tabPanelIds[index],\n ref: (element: HTMLElement \| null) => {\n tabRefs.current[index] = element;\n }\n } as Partial<TabProps> & { ref: React.Ref<HTMLElement>; tabInnerLabelId?: string });\n });\n return childrenToRender;\n }, [children, activeTabState, focusIndex, onSelectionAction, stretchedUnderline, tabPanelIds, id]);\n\n return (\n <div\n ref={mergedRef}\n className={cx(styles.tabsWrapper, className, [getStyle(styles, camelCase(tabType))], {\n [styles.stretchedUnderline]: stretchedUnderline\n })}\n id={id}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.TAB_LIST, id)}\n >\n <ul ref={ulRef} className={cx(styles.tabsList, [getStyle(styles, size)])} role=\"tablist\">\n {tabsToRender}\n </ul>\n </div>\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","_ref$stretchedUnderli","stretchedUnderline","_ref$tabPanelIds","tabPanelIds","children","dataTestId","componentRef","useRef","mergedRef","useMergeRef","tabRefs","_useState","useState","_useState2","_slicedToArray","activeTabState","setActiveTabState","prevActiveTabIdProp","usePrevious","prevActiveTabState","useEffect","undefined","current","_a","focus","disabledTabIds","useMemo","disabledIds","Set","React","Children","forEach","child","index","props","disabled","add","onTabSelect","useCallback","tabId","has","onTabClick","value","tabCallbackFunc","onClick","getItemByIndex","disabledIndexes","Array","from","ulRef","_useGridKeyboardNavig","useGridKeyboardNavigation","numberOfItemsInLine","length","itemsCount","onItemClicked","circularNavigation","focusIndex","activeIndex","onSelectionAction","prevFocusIndex","tabsToRender","map","isActive","shouldBeFocusable","cloneElement","active","cx","styles","tabListTabWrapper","tabInnerClassName","tabListTabInner","tabIndex","element","createElement","tabsWrapper","getStyle","camelCase","_defineProperty","getTestId","ComponentDefaultTestId","TAB_LIST","tabsList","role","Object","assign","isTabList"],"mappings":"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"}
1	+ {"version":3,"file":"TabList.js","sources":["../../../../../src/components/Tabs/TabList/TabList.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport { camelCase } from \"es-toolkit\";\nimport React, {\n type FC,\n forwardRef,\n type ReactElement,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState\n} from \"react\";\nimport useGridKeyboardNavigation from \"../../../hooks/useGridKeyboardNavigation/useGridKeyboardNavigation\";\nimport { useMergeRef, NOOP, getStyle } from \"@vibe/shared\";\nimport usePrevious from \"../../../hooks/usePrevious\";\nimport type VibeComponentProps from \"../../../types/VibeComponentProps\";\n\nimport { type TabProps } from \"../Tab/Tab\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../tests/test-ids-utils\";\n\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 If true, Sets an E2E underline under the whole tabs component.\n /\n stretchedUnderline?: boolean;\n /\n Array of corresponding TabPanel ids for aria-controls relationship.\n /\n tabPanelIds?: string[];\n /\n The child elements representing tabs.\n */\n children?: ReactElement<TabProps>[];\n}\nconst TabList: FC<TabListProps> = forwardRef(\n (\n {\n className,\n id,\n onTabChange = NOOP,\n activeTabId = 0,\n tabType = \"Compact\",\n size,\n stretchedUnderline = false,\n tabPanelIds = [],\n children,\n \"data-testid\": dataTestId\n },\n ref\n ) => {\n const componentRef = useRef(null);\n const mergedRef = useMergeRef(ref, componentRef);\n const tabRefs = useRef<Record<number, HTMLElement \| null>>({});\n\n const [activeTabState, setActiveTabState] = useState<number>(activeTabId);\n\n const prevActiveTabIdProp = usePrevious(activeTabId);\n const prevActiveTabState = usePrevious(activeTabState);\n\n useEffect(() => {\n // Update active tab if changed from props\n\n if (activeTabId !== prevActiveTabIdProp && activeTabId !== activeTabState) {\n setActiveTabState(activeTabId);\n }\n }, [activeTabId, prevActiveTabIdProp, activeTabState, setActiveTabState]);\n\n // Focus management: when activeTabState changes, focus the active tab\n useEffect(() => {\n if (\n prevActiveTabState !== undefined &&\n prevActiveTabState !== activeTabState &&\n tabRefs.current[activeTabState]\n ) {\n tabRefs.current[activeTabState]?.focus();\n }\n }, [activeTabState, prevActiveTabState]);\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 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 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 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 // Focus management: when focusIndex changes during keyboard navigation, focus the focused tab\n const prevFocusIndex = usePrevious(focusIndex);\n useEffect(() => {\n if (focusIndex !== undefined && focusIndex >= 0 && prevFocusIndex !== focusIndex && tabRefs.current[focusIndex]) {\n tabRefs.current[focusIndex]?.focus();\n }\n }, [focusIndex, prevFocusIndex]);\n\n const tabsToRender = useMemo(() => {\n const childrenToRender = React.Children.map(children, (child, index) => {\n const isActive = activeTabState === index;\n\n const shouldBeFocusable = focusIndex !== undefined && focusIndex >= 0 ? focusIndex === index : isActive;\n\n return React.cloneElement(child, {\n value: index,\n active: isActive,\n focus: focusIndex === index,\n onClick: onSelectionAction,\n stretchedUnderline,\n className: cx(styles.tabListTabWrapper, child.props.className),\n tabInnerClassName: cx(styles.tabListTabInner, child.props.tabInnerClassName),\n tabIndex: shouldBeFocusable ? 0 : -1,\n \"aria-controls\": tabPanelIds[index],\n ref: (element: HTMLElement \| null) => {\n tabRefs.current[index] = element;\n }\n } as Partial<TabProps> & { ref: React.Ref<HTMLElement>; tabInnerLabelId?: string });\n });\n return childrenToRender;\n }, [children, activeTabState, focusIndex, onSelectionAction, stretchedUnderline, tabPanelIds, id]);\n\n return (\n <div\n ref={mergedRef}\n className={cx(styles.tabsWrapper, className, [getStyle(styles, camelCase(tabType))], {\n [styles.stretchedUnderline]: stretchedUnderline\n })}\n id={id}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.TAB_LIST, id)}\n >\n <ul ref={ulRef} className={cx(styles.tabsList, [getStyle(styles, size)])} role=\"tablist\">\n {tabsToRender}\n </ul>\n </div>\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","_ref$stretchedUnderli","stretchedUnderline","_ref$tabPanelIds","tabPanelIds","children","dataTestId","componentRef","useRef","mergedRef","useMergeRef","tabRefs","_useState","useState","_useState2","_slicedToArray","activeTabState","setActiveTabState","prevActiveTabIdProp","usePrevious","prevActiveTabState","useEffect","undefined","current","_a","focus","disabledTabIds","useMemo","disabledIds","Set","React","Children","forEach","child","index","props","disabled","add","onTabSelect","useCallback","tabId","has","onTabClick","value","tabCallbackFunc","onClick","getItemByIndex","disabledIndexes","Array","from","ulRef","_useGridKeyboardNavig","useGridKeyboardNavigation","numberOfItemsInLine","length","itemsCount","onItemClicked","circularNavigation","focusIndex","activeIndex","onSelectionAction","prevFocusIndex","tabsToRender","map","isActive","shouldBeFocusable","cloneElement","active","cx","styles","tabListTabWrapper","tabInnerClassName","tabListTabInner","tabIndex","element","createElement","tabsWrapper","getStyle","camelCase","_defineProperty","getTestId","ComponentDefaultTestId","TAB_LIST","tabsList","role","Object","assign","isTabList"],"mappings":"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"}

package/dist/src/components/Tabs/TabList/TabList.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={tabsWrapper:"tabsWrapper_c1a3c2e20b",tabsList:"tabsList_348b0b46e6",sm:"sm_55d3eff6e8",lg:"lg_32175b4f27",stretched:"stretched_c12fb818c2",tabListTabWrapper:"tabListTabWrapper_248f9500a0",tabListTabInner:"tabListTabInner_248f9500a0",disabled:"disabled_39ff45e299",stretchedUnderline:"stretchedUnderline_9b4a629d38"};!function(e){const t="s_id-1dd2e005bc2f_4_2_0";if("undefined"!=typeof document){const a=document.head||document.getElementsByTagName("head")[0];if(a.querySelector("#"+t))return;const n=document.createElement("style");n.id=t,a.firstChild?a.insertBefore(n,a.firstChild):a.appendChild(n),n.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}("/* stylelint-disable */\n/* stylelint-enable */\n.tabsWrapper_c1a3c2e20b .tabsList_348b0b46e6 {\n  display: flex;\n  flex-direction: row;\n  list-style-type: none;\n  font-size: 0;\n  position: relative;\n  height: 40px;\n  outline: none;\n  padding: 0;\n}\n.tabsWrapper_c1a3c2e20b .tabsList_348b0b46e6.sm_55d3eff6e8 {\n  height: 32px;\n}\n.tabsWrapper_c1a3c2e20b .tabsList_348b0b46e6.lg_32175b4f27 {\n  height: 48px;\n}\n.tabsWrapper_c1a3c2e20b.stretched_c12fb818c2 .tabsList_348b0b46e6 {\n  width: 100%;\n}\n.tabsWrapper_c1a3c2e20b.stretched_c12fb818c2 .tabsList_348b0b46e6 .tabListTabWrapper_248f9500a0 {\n  width: 100%;\n}\n.tabsWrapper_c1a3c2e20b.stretched_c12fb818c2 .tabsList_348b0b46e6 .tabListTabWrapper_248f9500a0 .tabListTabInner_248f9500a0 {\n  width: 100%;\n}\n.tabsWrapper_c1a3c2e20b.disabled_39ff45e299 {\n  opacity: 0;\n  height: 0;\n  padding-bottom: 5px;\n  pointer-events: none;\n}\n.tabsWrapper_c1a3c2e20b.stretchedUnderline_9b4a629d38 {\n  border-bottom: 2px solid var(--ui-background-color);\n}");export{e as default};
+var e={tabsWrapper:"tabsWrapper_fff76d2360",tabsList:"tabsList_8f5c5f01e5",sm:"sm_36bcc15693",lg:"lg_b0a590d138",stretched:"stretched_9eb99eef0f",tabListTabWrapper:"tabListTabWrapper_519bc92cac",tabListTabInner:"tabListTabInner_519bc92cac",disabled:"disabled_f2d60e9d51",stretchedUnderline:"stretchedUnderline_1e10fdf061"};!function(e){const t="s_id-1dd2e005bc2f_4_2_2";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+t))return;const a=document.createElement("style");a.id=t,n.firstChild?n.insertBefore(a,n.firstChild):n.appendChild(a),a.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}("/* stylelint-disable */\n/* stylelint-enable */\n.tabsWrapper_fff76d2360 .tabsList_8f5c5f01e5 {\n  display: flex;\n  flex-direction: row;\n  list-style-type: none;\n  font-size: 0;\n  position: relative;\n  height: 40px;\n  outline: none;\n  padding: 0;\n}\n.tabsWrapper_fff76d2360 .tabsList_8f5c5f01e5.sm_36bcc15693 {\n  height: 32px;\n}\n.tabsWrapper_fff76d2360 .tabsList_8f5c5f01e5.lg_b0a590d138 {\n  height: 48px;\n}\n.tabsWrapper_fff76d2360.stretched_9eb99eef0f .tabsList_8f5c5f01e5 {\n  width: 100%;\n}\n.tabsWrapper_fff76d2360.stretched_9eb99eef0f .tabsList_8f5c5f01e5 .tabListTabWrapper_519bc92cac {\n  width: 100%;\n}\n.tabsWrapper_fff76d2360.stretched_9eb99eef0f .tabsList_8f5c5f01e5 .tabListTabWrapper_519bc92cac .tabListTabInner_519bc92cac {\n  width: 100%;\n}\n.tabsWrapper_fff76d2360.disabled_f2d60e9d51 {\n  opacity: 0;\n  height: 0;\n  padding-bottom: 5px;\n  pointer-events: none;\n}\n.tabsWrapper_fff76d2360.stretchedUnderline_1e10fdf061 {\n  border-bottom: 2px solid var(--ui-background-color);\n}");export{e as default};
 //# sourceMappingURL=TabList.module.scss.js.map

package/dist/src/components/Tabs/TabPanel/TabPanel.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import e,{forwardRef as t,useRef as a}from"react";import r from"classnames";import{getTestId as s,ComponentDefaultTestId as o}from"../../../tests/testIds.js";import m from"./TabPanel.module.scss.js";import{useMergeRef as d}from"../../../../shared/dist/hooks/useMergeRef.js";var i=t((function(t,i){var l=t.className,n=t.id,c=t.children,f=t.index,p=t["data-testid"],u=a(null),b=d(i,u);return e.createElement("div",{key:"".concat(n,"_").concat(f),ref:b,className:r(m.tabPanelWrapper,l),id:n,"data-testid":p||s(o.TAB_PANEL,n),role:"tabpanel"},c)}));export{i as default};
+import e,{forwardRef as a,useRef as t}from"react";import r from"classnames";import{getTestId as s,ComponentDefaultTestId as o}from"../../../../testIds.js";import m from"./TabPanel.module.scss.js";import{useMergeRef as d}from"../../../../shared/dist/hooks/useMergeRef.js";var i=a((function(a,i){var l=a.className,n=a.id,c=a.children,f=a.index,p=a["data-testid"],u=t(null),b=d(i,u);return e.createElement("div",{key:"".concat(n,"_").concat(f),ref:b,className:r(m.tabPanelWrapper,l),id:n,"data-testid":p||s(o.TAB_PANEL,n),role:"tabpanel"},c)}));export{i as default};
 //# sourceMappingURL=TabPanel.js.map

package/dist/src/components/Tabs/TabPanel/TabPanel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TabPanel.js","sources":["../../../../../src/components/Tabs/TabPanel/TabPanel.tsx"],"sourcesContent":["import React, { type FC, forwardRef, type ReactElement, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { useMergeRef } from \"@vibe/shared\";\nimport type VibeComponentProps from \"../../../types/VibeComponentProps\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../tests/test-ids-utils\";\nimport styles from \"./TabPanel.module.scss\";\n\nexport interface TabPanelProps extends VibeComponentProps {\n /*\n The content inside the tab panel.\n /\n children?: ReactElement \| ReactElement[] \| string;\n /\n The index of the tab panel.\n */\n index?: number;\n}\n\nconst TabPanel: FC<TabPanelProps> = forwardRef(({ className, id, children, index, \"data-testid\": dataTestId }, ref) => {\n const componentRef = useRef(null);\n const mergedRef = useMergeRef(ref, componentRef);\n\n return (\n <div\n key={`${id}_${index}`}\n ref={mergedRef}\n className={cx(styles.tabPanelWrapper, className)}\n id={id}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.TAB_PANEL, id)}\n role=\"tabpanel\"\n >\n {children}\n </div>\n );\n});\n\nexport default TabPanel;\n"],"names":["TabPanel","forwardRef","_ref","ref","className","id","children","index","dataTestId","componentRef","useRef","mergedRef","useMergeRef","React","key","concat","cx","styles","tabPanelWrapper","getTestId","ComponentDefaultTestId","TAB_PANEL","role"],"mappings":"~~kRAkBMA~~,~~IAAAA~~,EAA8BC,GAAW,SAAAC,EAAgEC,GAAO,IAApEC,EAASF,EAATE,UAAWC,EAAEH,EAAFG,GAAIC,EAAQJ,EAARI,SAAUC,EAAKL,EAALK,MAAsBC,EAAUN,EAAzB,eAC1EO,EAAeC,EAAO,MACtBC,EAAYC,EAAYT,EAAKM,GAEnC,OACEI,uBACEC,IAAG,GAAAC,OAAKV,OAAEU,OAAIR,GACdJ,IAAKQ,EACLP,UAAWY,EAAGC,EAAOC,gBAAiBd,GACtCC,GAAIA,EAAE,cACOG,GAAcW,EAAUC,EAAuBC,UAAWhB,GACvEiB,KAAK,YAEJhB,EAGP"}
1	+ {"version":3,"file":"TabPanel.js","sources":["../../../../../src/components/Tabs/TabPanel/TabPanel.tsx"],"sourcesContent":["import React, { type FC, forwardRef, type ReactElement, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { useMergeRef } from \"@vibe/shared\";\nimport type VibeComponentProps from \"../../../types/VibeComponentProps\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../tests/test-ids-utils\";\nimport styles from \"./TabPanel.module.scss\";\n\nexport interface TabPanelProps extends VibeComponentProps {\n /*\n The content inside the tab panel.\n /\n children?: ReactElement \| ReactElement[] \| string;\n /\n The index of the tab panel.\n */\n index?: number;\n}\n\nconst TabPanel: FC<TabPanelProps> = forwardRef(({ className, id, children, index, \"data-testid\": dataTestId }, ref) => {\n const componentRef = useRef(null);\n const mergedRef = useMergeRef(ref, componentRef);\n\n return (\n <div\n key={`${id}_${index}`}\n ref={mergedRef}\n className={cx(styles.tabPanelWrapper, className)}\n id={id}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.TAB_PANEL, id)}\n role=\"tabpanel\"\n >\n {children}\n </div>\n );\n});\n\nexport default TabPanel;\n"],"names":["TabPanel","forwardRef","_ref","ref","className","id","children","index","dataTestId","componentRef","useRef","mergedRef","useMergeRef","React","key","concat","cx","styles","tabPanelWrapper","getTestId","ComponentDefaultTestId","TAB_PANEL","role"],"mappings":"+QAkBA,IAAMA,EAA8BC,GAAW,SAAAC,EAAgEC,GAAO,IAApEC,EAASF,EAATE,UAAWC,EAAEH,EAAFG,GAAIC,EAAQJ,EAARI,SAAUC,EAAKL,EAALK,MAAsBC,EAAUN,EAAzB,eAC1EO,EAAeC,EAAO,MACtBC,EAAYC,EAAYT,EAAKM,GAEnC,OACEI,uBACEC,IAAG,GAAAC,OAAKV,OAAEU,OAAIR,GACdJ,IAAKQ,EACLP,UAAWY,EAAGC,EAAOC,gBAAiBd,GACtCC,GAAIA,EAAE,cACOG,GAAcW,EAAUC,EAAuBC,UAAWhB,GACvEiB,KAAK,YAEJhB,EAGP"}

package/dist/src/components/Tabs/TabPanel/TabPanel.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={tabPanelWrapper:"tabPanelWrapper_5a38248695"};!function(e){const t="s_id-82244d4a2f7b_4_2_0";if("undefined"!=typeof document){const a=document.head||document.getElementsByTagName("head")[0];if(a.querySelector("#"+t))return;const n=document.createElement("style");n.id=t,a.firstChild?a.insertBefore(n,a.firstChild):a.appendChild(n),n.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}(".tabPanelWrapper_5a38248695 {\n  color: var(--primary-text-color);\n}");export{e as default};
+var e={tabPanelWrapper:"tabPanelWrapper_6f27e84d9e"};!function(e){const t="s_id-82244d4a2f7b_4_2_2";if("undefined"!=typeof document){const a=document.head||document.getElementsByTagName("head")[0];if(a.querySelector("#"+t))return;const n=document.createElement("style");n.id=t,a.firstChild?a.insertBefore(n,a.firstChild):a.appendChild(n),n.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}(".tabPanelWrapper_6f27e84d9e {\n  color: var(--primary-text-color);\n}");export{e as default};
 //# sourceMappingURL=TabPanel.module.scss.js.map

package/dist/src/components/Tabs/TabPanels/TabPanels.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import e from"classnames";import{camelCase as t}from"es-toolkit";import s,{forwardRef as a,useRef as r,useMemo as i}from"react";import{getTestId as o,ComponentDefaultTestId as n}from"../../../tests/testIds.js";import l from"./TabPanels.module.scss.js";import{useMergeRef as m}from"../../../../shared/dist/hooks/useMergeRef.js";import{getStyle as c}from"../../../../shared/dist/utils/typesciptCssModulesHelper.js";var d=a((function(a,d){var p=a.className,f=a.id,u=a.activeTabId,v=void 0===u?0:u,b=a.animationDirection,j=void 0===b?"rtl":b,h=a.children,N=a["data-testid"],P=r(null),g=m(d,P),T=i((function(){return s.Children.map(h,(function(a,r){var i=v===r;if(!i)return null;var o=i?"active":"non-active",n=i?"animation-direction-".concat(j):"";return s.cloneElement(a,Object.assign(Object.assign({index:r},a.props),{className:e(l.tabPanel,[c(l,o)],[c(l,t(n))],a.props.className)}))})).filter(Boolean)}),[h,v,j]);return s.createElement("div",{ref:g,className:e(l.tabPanelsWrapper,p),id:f,"data-testid":N||o(n.TAB_PANELS,f)},T)}));Object.assign(d,{isTabPanels:!0});export{d as default};
+import e from"classnames";import{camelCase as t}from"es-toolkit";import a,{forwardRef as s,useRef as r,useMemo as i}from"react";import{getTestId as o,ComponentDefaultTestId as n}from"../../../../testIds.js";import l from"./TabPanels.module.scss.js";import{useMergeRef as m}from"../../../../shared/dist/hooks/useMergeRef.js";import{getStyle as c}from"../../../../shared/dist/utils/typesciptCssModulesHelper.js";var d=s((function(s,d){var p=s.className,f=s.id,u=s.activeTabId,v=void 0===u?0:u,b=s.animationDirection,j=void 0===b?"rtl":b,h=s.children,N=s["data-testid"],P=r(null),g=m(d,P),T=i((function(){return a.Children.map(h,(function(s,r){var i=v===r;if(!i)return null;var o=i?"active":"non-active",n=i?"animation-direction-".concat(j):"";return a.cloneElement(s,Object.assign(Object.assign({index:r},s.props),{className:e(l.tabPanel,[c(l,o)],[c(l,t(n))],s.props.className)}))})).filter(Boolean)}),[h,v,j]);return a.createElement("div",{ref:g,className:e(l.tabPanelsWrapper,p),id:f,"data-testid":N||o(n.TAB_PANELS,f)},T)}));Object.assign(d,{isTabPanels:!0});export{d as default};
 //# sourceMappingURL=TabPanels.js.map

package/dist/src/components/Tabs/TabPanels/TabPanels.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TabPanels.js","sources":["../../../../../src/components/Tabs/TabPanels/TabPanels.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport { camelCase } from \"es-toolkit\";\nimport React, { forwardRef, type ReactElement, useMemo, useRef } from \"react\";\nimport { useMergeRef, getStyle } from \"@vibe/shared\";\nimport { type TabPanelsAnimationDirection } from \"./TabPanels.types\";\nimport { type TabPanelProps } from \"../TabPanel/TabPanel\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../tests/test-ids-utils\";\n\nimport { type VibeComponentProps } from \"../../../types\";\nimport styles from \"./TabPanels.module.scss\";\n\nexport interface TabPanelsProps extends VibeComponentProps {\n /*\n The index of the currently active tab panel.\n /\n activeTabId?: number;\n /\n The animation direction when switching between tab panels.\n /\n animationDirection?: TabPanelsAnimationDirection;\n /\n The child elements representing tab panels.\n */\n children?: ReactElement<TabPanelProps> \| ReactElement<TabPanelProps>[];\n}\n\nconst TabPanels = forwardRef(\n (\n { className, id, activeTabId = 0, animationDirection = \"rtl\", children, \"data-testid\": dataTestId }: TabPanelsProps,\n ref: React.ForwardedRef<HTMLElement>\n ) => {\n const componentRef = useRef(null);\n const mergedRef = useMergeRef(ref, componentRef);\n const renderedTabs = useMemo(() => {\n return React.Children.map(children, (child, index) => {\n const isActiveTab = activeTabId === index;\n if (!isActiveTab) return null;\n const activeClass = isActiveTab ? \"active\" : \"non-active\";\n const animationClass = isActiveTab ? `animation-direction-${animationDirection}` : \"\";\n return React.cloneElement(child, {\n index,\n ...child.props,\n className: cx(\n styles.tabPanel,\n [getStyle(styles, activeClass)],\n [getStyle(styles, camelCase(animationClass))],\n child.props.className\n )\n });\n }).filter(Boolean);\n }, [children, activeTabId, animationDirection]);\n\n return (\n <div\n ref={mergedRef}\n className={cx(styles.tabPanelsWrapper, className)}\n id={id}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.TAB_PANELS, id)}\n >\n {renderedTabs}\n </div>\n );\n }\n);\n\nObject.assign(TabPanels, {\n isTabPanels: true\n});\n\nexport default TabPanels;\n"],"names":["TabPanels","forwardRef","_ref","ref","className","id","_ref$activeTabId","activeTabId","_ref$animationDirecti","animationDirection","children","dataTestId","componentRef","useRef","mergedRef","useMergeRef","renderedTabs","useMemo","React","Children","map","child","index","isActiveTab","activeClass","animationClass","concat","cloneElement","Object","assign","props","cx","styles","tabPanel","getStyle","camelCase","filter","Boolean","createElement","tabPanelsWrapper","getTestId","ComponentDefaultTestId","TAB_PANELS","isTabPanels"],"mappings":"~~6ZA0BMA~~,~~IAAAA~~,EAAYC,GAChB,SAAAC,EAEEC,GACE,IAFAC,EAASF,EAATE,UAAWC,EAAEH,EAAFG,GAAEC,EAAAJ,EAAEK,YAAAA,~~OAAc~~,~~IAAHD~~,EAAG,EAACA,EAAAE,EAAAN,EAAEO,mBAAAA,~~OAAqB~~,~~IAAHD~~,EAAG,MAAKA,EAAEE,EAAQR,EAARQ,SAAyBC,EAAUT,EAAzB,eAGlEU,EAAeC,EAAO,MACtBC,EAAYC,EAAYZ,EAAKS,GAC7BI,EAAeC,GAAQ,WAC3B,OAAOC,EAAMC,SAASC,IAAIV,GAAU,SAACW,EAAOC,GAC1C,IAAMC,EAAchB,IAAgBe,EACpC,IAAKC,EAAa,OAAO,KACzB,IAAMC,EAAcD,EAAc,SAAW,aACvCE,EAAiBF,EAAW,uBAAAG,OAA0BjB,GAAuB,GACnF,OAAOS,EAAMS,aAAaN,~~EACxBO~~,OAAAC,OAAAD,OAAAC,OAAA,~~CAAAP~~,MAAAA,GACGD,EAAMS,QACT1B,UAAW2B,EACTC,EAAOC,SACP,CAACC,EAASF,EAAQR,IAClB,CAACU,EAASF,EAAQG,EAAUV,KAC5BJ,EAAMS,MAAM1B,aAGlB,IAAGgC,OAAOC,~~QACX~~,~~GAAE~~,CAAC3B,EAAUH,EAAaE,IAE3B,OACES,EAAAoB,cAAA,MAAA,CACEnC,IAAKW,EACLV,UAAW2B,EAAGC,EAAOO,iBAAkBnC,GACvCC,GAAIA,~~EACS~~,~~cAAAM~~,GAAc6B,EAAUC,EAAuBC,WAAYrC,IAEvEW,EAGP,IAGFY,OAAOC,OAAO7B,EAAW,CACvB2C,aAAa"}
1	+ {"version":3,"file":"TabPanels.js","sources":["../../../../../src/components/Tabs/TabPanels/TabPanels.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport { camelCase } from \"es-toolkit\";\nimport React, { forwardRef, type ReactElement, useMemo, useRef } from \"react\";\nimport { useMergeRef, getStyle } from \"@vibe/shared\";\nimport { type TabPanelsAnimationDirection } from \"./TabPanels.types\";\nimport { type TabPanelProps } from \"../TabPanel/TabPanel\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../tests/test-ids-utils\";\n\nimport { type VibeComponentProps } from \"../../../types\";\nimport styles from \"./TabPanels.module.scss\";\n\nexport interface TabPanelsProps extends VibeComponentProps {\n /*\n The index of the currently active tab panel.\n /\n activeTabId?: number;\n /\n The animation direction when switching between tab panels.\n /\n animationDirection?: TabPanelsAnimationDirection;\n /\n The child elements representing tab panels.\n */\n children?: ReactElement<TabPanelProps> \| ReactElement<TabPanelProps>[];\n}\n\nconst TabPanels = forwardRef(\n (\n { className, id, activeTabId = 0, animationDirection = \"rtl\", children, \"data-testid\": dataTestId }: TabPanelsProps,\n ref: React.ForwardedRef<HTMLElement>\n ) => {\n const componentRef = useRef(null);\n const mergedRef = useMergeRef(ref, componentRef);\n const renderedTabs = useMemo(() => {\n return React.Children.map(children, (child, index) => {\n const isActiveTab = activeTabId === index;\n if (!isActiveTab) return null;\n const activeClass = isActiveTab ? \"active\" : \"non-active\";\n const animationClass = isActiveTab ? `animation-direction-${animationDirection}` : \"\";\n return React.cloneElement(child, {\n index,\n ...child.props,\n className: cx(\n styles.tabPanel,\n [getStyle(styles, activeClass)],\n [getStyle(styles, camelCase(animationClass))],\n child.props.className\n )\n });\n }).filter(Boolean);\n }, [children, activeTabId, animationDirection]);\n\n return (\n <div\n ref={mergedRef}\n className={cx(styles.tabPanelsWrapper, className)}\n id={id}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.TAB_PANELS, id)}\n >\n {renderedTabs}\n </div>\n );\n }\n);\n\nObject.assign(TabPanels, {\n isTabPanels: true\n});\n\nexport default TabPanels;\n"],"names":["TabPanels","forwardRef","_ref","ref","className","id","_ref$activeTabId","activeTabId","_ref$animationDirecti","animationDirection","children","dataTestId","componentRef","useRef","mergedRef","useMergeRef","renderedTabs","useMemo","React","Children","map","child","index","isActiveTab","activeClass","animationClass","concat","cloneElement","Object","assign","props","cx","styles","tabPanel","getStyle","camelCase","filter","Boolean","createElement","tabPanelsWrapper","getTestId","ComponentDefaultTestId","TAB_PANELS","isTabPanels"],"mappings":"0ZA0BA,IAAMA,EAAYC,GAChB,SAAAC,EAEEC,GACE,IAFAC,EAASF,EAATE,UAAWC,EAAEH,EAAFG,GAAEC,EAAAJ,EAAEK,YAAAA,OAAW,IAAAD,EAAG,EAACA,EAAAE,EAAAN,EAAEO,mBAAAA,OAAkB,IAAAD,EAAG,MAAKA,EAAEE,EAAQR,EAARQ,SAAyBC,EAAUT,EAAzB,eAGlEU,EAAeC,EAAO,MACtBC,EAAYC,EAAYZ,EAAKS,GAC7BI,EAAeC,GAAQ,WAC3B,OAAOC,EAAMC,SAASC,IAAIV,GAAU,SAACW,EAAOC,GAC1C,IAAMC,EAAchB,IAAgBe,EACpC,IAAKC,EAAa,OAAO,KACzB,IAAMC,EAAcD,EAAc,SAAW,aACvCE,EAAiBF,EAAW,uBAAAG,OAA0BjB,GAAuB,GACnF,OAAOS,EAAMS,aAAaN,EAAKO,OAAAC,OAAAD,OAAAC,OAAA,CAC7BP,MAAAA,GACGD,EAAMS,QACT1B,UAAW2B,EACTC,EAAOC,SACP,CAACC,EAASF,EAAQR,IAClB,CAACU,EAASF,EAAQG,EAAUV,KAC5BJ,EAAMS,MAAM1B,aAGlB,IAAGgC,OAAOC,QACZ,GAAG,CAAC3B,EAAUH,EAAaE,IAE3B,OACES,EAAAoB,cAAA,MAAA,CACEnC,IAAKW,EACLV,UAAW2B,EAAGC,EAAOO,iBAAkBnC,GACvCC,GAAIA,EAAE,cACOM,GAAc6B,EAAUC,EAAuBC,WAAYrC,IAEvEW,EAGP,IAGFY,OAAOC,OAAO7B,EAAW,CACvB2C,aAAa"}

package/dist/src/components/Tabs/TabPanels/TabPanels.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={tabPanelsWrapper:"tabPanelsWrapper_98c1e615b6",tabPanel:"tabPanel_66fe76cb4f",animationDirectionRtl:"animationDirectionRtl_9187de79c2",animationDirectionLtr:"animationDirectionLtr_5e88e4cac9",active:"active_183f4e7e38",panelSlideIn:"panelSlideIn_581762e6f4"};!function(e){const n="s_id-078bacbdb1e4_4_2_0";if("undefined"!=typeof document){const a=document.head||document.getElementsByTagName("head")[0];if(a.querySelector("#"+n))return;const t=document.createElement("style");t.id=n,a.firstChild?a.insertBefore(t,a.firstChild):a.appendChild(t),t.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}("/* stylelint-disable */\n/* stylelint-enable */\n.tabPanelsWrapper_98c1e615b6 .tabPanel_66fe76cb4f {\n  display: none;\n}\n.tabPanelsWrapper_98c1e615b6 .tabPanel_66fe76cb4f.animationDirectionRtl_9187de79c2 {\n  transform: translateX(8px);\n}\n.tabPanelsWrapper_98c1e615b6 .tabPanel_66fe76cb4f.animationDirectionLtr_5e88e4cac9 {\n  transform: translateX(-8px);\n}\n.tabPanelsWrapper_98c1e615b6 .tabPanel_66fe76cb4f.active_183f4e7e38 {\n  display: block;\n  animation: panelSlideIn_581762e6f4 var(--motion-productive-long) forwards var(--motion-timing-enter);\n}\n@keyframes panelSlideIn_581762e6f4 {\n  100% {\n    transform: translateX(0%);\n  }\n}");export{e as default};
+var a={tabPanelsWrapper:"tabPanelsWrapper_86ada41107",tabPanel:"tabPanel_68906e155c",animationDirectionRtl:"animationDirectionRtl_5db81cfa45",animationDirectionLtr:"animationDirectionLtr_0d3a729096",active:"active_f4d89ad46a",panelSlideIn:"panelSlideIn_1889bb9cdd"};!function(a){const e="s_id-078bacbdb1e4_4_2_2";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+e))return;const t=document.createElement("style");t.id=e,n.firstChild?n.insertBefore(t,n.firstChild):n.appendChild(t),t.appendChild(document.createTextNode(a))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=a)}("/* stylelint-disable */\n/* stylelint-enable */\n.tabPanelsWrapper_86ada41107 .tabPanel_68906e155c {\n  display: none;\n}\n.tabPanelsWrapper_86ada41107 .tabPanel_68906e155c.animationDirectionRtl_5db81cfa45 {\n  transform: translateX(8px);\n}\n.tabPanelsWrapper_86ada41107 .tabPanel_68906e155c.animationDirectionLtr_0d3a729096 {\n  transform: translateX(-8px);\n}\n.tabPanelsWrapper_86ada41107 .tabPanel_68906e155c.active_f4d89ad46a {\n  display: block;\n  animation: panelSlideIn_1889bb9cdd var(--motion-productive-long) forwards var(--motion-timing-enter);\n}\n@keyframes panelSlideIn_1889bb9cdd {\n  100% {\n    transform: translateX(0%);\n  }\n}");export{a as default};
 //# sourceMappingURL=TabPanels.module.scss.js.map

package/dist/src/components/Tabs/TabsContext/TabsContext.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{slicedToArray as e}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import r,{forwardRef as t,useRef as a,useState as n,useEffect as i,useCallback as o,useMemo as s}from"react";import l from"../../../hooks/usePrevious/index.js";import{getTestId as d,ComponentDefaultTestId as c}from"../../../tests/testIds.js";import{useMergeRef as u}from"../../../../shared/dist/hooks/useMergeRef.js";var f=t((function(t,f){var p=t.className,m=t.id,h=t.activeTabId,v=void 0===h?0:h,T=t.children,b=t["data-testid"],C=a(null),E=u(f,C),I=n(v),P=e(I,2),g=P[0],j=P[1],y=n(v),N=e(y,2),_=N[0],k=N[1],x=l(v);i((function(){v!==x&&v!==_&&(j(_),k(v))}),[v,_,x]);var A=o((function(e){j(_),k(e)}),[_]),B=s((function(){var e=[];return r.Children.forEach(T,(function(t){t.type.isTabPanels&&r.Children.forEach(t.props.children,(function(r,t){e[t]=r.props.id}))})),e}),[T]);return r.createElement("div",{ref:E,className:p,id:m,"data-testid":b||d(c.TABS_CONTEXT,m)},r.Children.map(T,(function(e){if(e.type.isTabList){var t=e.props.onTabChange;return r.cloneElement(e,{activeTabId:_,onTabChange:function(e){A(e),null==t||t(e)},tabPanelIds:B})}return e.type.isTabPanels?r.cloneElement(e,{activeTabId:_,animationDirection:_>g?"ltr":"rtl"}):e})))}));export{f as default};
+import{slicedToArray as e}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import r,{forwardRef as t,useRef as a,useState as n,useEffect as i,useCallback as o,useMemo as s}from"react";import l from"../../../hooks/usePrevious/index.js";import{getTestId as d,ComponentDefaultTestId as c}from"../../../../testIds.js";import{useMergeRef as u}from"../../../../shared/dist/hooks/useMergeRef.js";var f=t((function(t,f){var p=t.className,m=t.id,h=t.activeTabId,v=void 0===h?0:h,T=t.children,b=t["data-testid"],C=a(null),E=u(f,C),I=n(v),P=e(I,2),g=P[0],j=P[1],y=n(v),N=e(y,2),_=N[0],k=N[1],x=l(v);i((function(){v!==x&&v!==_&&(j(_),k(v))}),[v,_,x]);var A=o((function(e){j(_),k(e)}),[_]),B=s((function(){var e=[];return r.Children.forEach(T,(function(t){t.type.isTabPanels&&r.Children.forEach(t.props.children,(function(r,t){e[t]=r.props.id}))})),e}),[T]);return r.createElement("div",{ref:E,className:p,id:m,"data-testid":b||d(c.TABS_CONTEXT,m)},r.Children.map(T,(function(e){if(e.type.isTabList){var t=e.props.onTabChange;return r.cloneElement(e,{activeTabId:_,onTabChange:function(e){A(e),null==t||t(e)},tabPanelIds:B})}return e.type.isTabPanels?r.cloneElement(e,{activeTabId:_,animationDirection:_>g?"ltr":"rtl"}):e})))}));export{f as default};
 //# sourceMappingURL=TabsContext.js.map

package/dist/src/components/Tabs/TabsContext/TabsContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TabsContext.js","sources":["../../../../../src/components/Tabs/TabsContext/TabsContext.tsx"],"sourcesContent":["import React, {\n type FC,\n forwardRef,\n type ReactElement,\n useCallback,\n useEffect,\n useRef,\n useState,\n useMemo\n} from \"react\";\nimport { useMergeRef } from \"@vibe/shared\";\nimport usePrevious from \"../../../hooks/usePrevious\";\nimport type VibeComponentProps from \"../../../types/VibeComponentProps\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../tests/test-ids-utils\";\n\nexport interface TabsContextProps extends VibeComponentProps {\n /*\n The index of the currently active tab.\n /\n activeTabId?: number;\n /\n The child elements representing the tab list and tab panels.\n */\n children?: ReactElement \| ReactElement[];\n}\n\ntype TabsChild = ReactElement & {\n type: Record<string, unknown>;\n};\n\nconst TabsContext: FC<TabsContextProps> = forwardRef(\n ({ className, id, activeTabId = 0, children, \"data-testid\": dataTestId }, ref) => {\n const componentRef = useRef(null);\n const mergedRef = useMergeRef(ref, componentRef);\n\n const [previousActiveTabIdState, setPreviousActiveTabIdState] = useState(activeTabId);\n const [activeTabIdState, setActiveTabIdState] = useState(activeTabId);\n const prevActiveTabIdProp = usePrevious(activeTabId);\n\n useEffect(() => {\n // Update active tab if changed from props\n if (activeTabId !== prevActiveTabIdProp && activeTabId !== activeTabIdState) {\n setPreviousActiveTabIdState(activeTabIdState);\n setActiveTabIdState(activeTabId);\n }\n }, [activeTabId, activeTabIdState, prevActiveTabIdProp]);\n\n const onTabClick = useCallback(\n (tabId: number) => {\n setPreviousActiveTabIdState(activeTabIdState);\n setActiveTabIdState(tabId);\n },\n [activeTabIdState]\n );\n\n // Collect TabPanel ids for aria-controls relationship\n const tabPanelIds = useMemo(() => {\n const ids: string[] = [];\n React.Children.forEach(children, (child: TabsChild) => {\n if (child.type.isTabPanels) {\n React.Children.forEach(child.props.children, (panelChild: ReactElement, index: number) => {\n ids[index] = panelChild.props.id;\n });\n }\n });\n return ids;\n }, [children]);\n\n return (\n <div\n ref={mergedRef}\n className={className}\n id={id}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.TABS_CONTEXT, id)}\n >\n {React.Children.map(children, (child: TabsChild) => {\n if (child.type.isTabList) {\n const originalOnTabChange = child.props.onTabChange;\n const onTabChange = (tabId: number) => {\n onTabClick(tabId);\n originalOnTabChange?.(tabId);\n };\n return React.cloneElement(child, { activeTabId: activeTabIdState, onTabChange, tabPanelIds });\n }\n if (child.type.isTabPanels) {\n const animationDirection = previousActiveTabIdState < activeTabIdState ? \"ltr\" : \"rtl\";\n return React.cloneElement(child, { activeTabId: activeTabIdState, animationDirection });\n }\n return child;\n })}\n </div>\n );\n }\n);\n\nexport default TabsContext;\n"],"names":["TabsContext","forwardRef","_ref","ref","className","id","_ref$activeTabId","activeTabId","children","dataTestId","componentRef","useRef","mergedRef","useMergeRef","_useState","useState","_useState2","_slicedToArray","previousActiveTabIdState","setPreviousActiveTabIdState","_useState3","_useState4","activeTabIdState","setActiveTabIdState","prevActiveTabIdProp","usePrevious","useEffect","onTabClick","useCallback","tabId","tabPanelIds","useMemo","ids","React","Children","forEach","child","type","isTabPanels","props","panelChild","index","createElement","getTestId","ComponentDefaultTestId","TABS_CONTEXT","map","isTabList","originalOnTabChange","onTabChange","cloneElement","animationDirection"],"mappings":"~~+YA8BMA~~,~~IAAAA~~,EAAoCC,GACxC,SAAAC,EAA0EC,GAAO,IAA9EC,EAASF,EAATE,UAAWC,EAAEH,EAAFG,GAAEC,EAAAJ,EAAEK,YAAAA,~~OAAc~~,~~IAAHD~~,EAAG,EAACA,EAAEE,EAAQN,EAARM,SAAyBC,EAAUP,EAAzB,eACrCQ,EAAeC,EAAO,MACtBC,EAAYC,EAAYV,EAAKO,GAEnCI,EAAgEC,EAASR,GAAYS,EAAAC,EAAAH,EAAA,GAA9EI,EAAwBF,EAAA,GAAEG,EAA2BH,EAAA,GAC5DI,EAAgDL,EAASR,GAAYc,EAAAJ,EAAAG,EAAA,GAA9DE,EAAgBD,EAAA,GAAEE,EAAmBF,EAAA,GACtCG,EAAsBC,EAAYlB,GAExCmB,GAAU,WAEJnB,IAAgBiB,GAAuBjB,IAAgBe,IACzDH,EAA4BG,GAC5BC,EAAoBhB,~~GAEvB~~,~~GAAE~~,CAACA,EAAae,EAAkBE,IAEnC,IAAMG,EAAaC,GACjB,SAACC,GACCV,EAA4BG,GAC5BC,EAAoBM,EACtB,GACA,CAACP,IAIGQ,EAAcC,GAAQ,WAC1B,IAAMC,EAAgB,GAQtB,OAPAC,EAAMC,SAASC,QAAQ3B,GAAU,SAAC4B,GAC5BA,EAAMC,KAAKC,aACbL,EAAMC,SAASC,QAAQC,EAAMG,MAAM/B,UAAU,SAACgC,EAA0BC,GACtET,EAAIS,GAASD,EAAWD,MAAMlC,EAChC,GAEJ,IACO2B,CACT,GAAG,CAACxB,IAEJ,OACEyB,~~EACES~~,cAAA,MAAA,~~CAAAvC~~,IAAKS,EACLR,UAAWA,EACXC,GAAIA,~~EACS~~,~~cAAAI~~,GAAckC,EAAUC,EAAuBC,aAAcxC,IAEzE4B,EAAMC,SAASY,IAAItC,GAAU,SAAC4B,GAC7B,GAAIA,EAAMC,KAAKU,UAAW,CACxB,IAAMC,EAAsBZ,EAAMG,MAAMU,YAKxC,OAAOhB,EAAMiB,aAAad,EAAO,CAAE7B,YAAae,EAAkB2B,YAJ9C,SAACpB,GACnBF,EAAWE,GACXmB,SAAAA,EAAsBnB,~~IAEuDC~~,YAAAA,GACjF,CACA,OAAIM,EAAMC,KAAKC,YAENL,EAAMiB,aAAad,EAAO,CAAE7B,YAAae,EAAkB6B,mBADZ7B,EAA3BJ,EAA8C,MAAQ,QAG5EkB,~~CACR~~,~~IAGP~~"}
1	+ {"version":3,"file":"TabsContext.js","sources":["../../../../../src/components/Tabs/TabsContext/TabsContext.tsx"],"sourcesContent":["import React, {\n type FC,\n forwardRef,\n type ReactElement,\n useCallback,\n useEffect,\n useRef,\n useState,\n useMemo\n} from \"react\";\nimport { useMergeRef } from \"@vibe/shared\";\nimport usePrevious from \"../../../hooks/usePrevious\";\nimport type VibeComponentProps from \"../../../types/VibeComponentProps\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../tests/test-ids-utils\";\n\nexport interface TabsContextProps extends VibeComponentProps {\n /*\n The index of the currently active tab.\n /\n activeTabId?: number;\n /\n The child elements representing the tab list and tab panels.\n */\n children?: ReactElement \| ReactElement[];\n}\n\ntype TabsChild = ReactElement & {\n type: Record<string, unknown>;\n};\n\nconst TabsContext: FC<TabsContextProps> = forwardRef(\n ({ className, id, activeTabId = 0, children, \"data-testid\": dataTestId }, ref) => {\n const componentRef = useRef(null);\n const mergedRef = useMergeRef(ref, componentRef);\n\n const [previousActiveTabIdState, setPreviousActiveTabIdState] = useState(activeTabId);\n const [activeTabIdState, setActiveTabIdState] = useState(activeTabId);\n const prevActiveTabIdProp = usePrevious(activeTabId);\n\n useEffect(() => {\n // Update active tab if changed from props\n if (activeTabId !== prevActiveTabIdProp && activeTabId !== activeTabIdState) {\n setPreviousActiveTabIdState(activeTabIdState);\n setActiveTabIdState(activeTabId);\n }\n }, [activeTabId, activeTabIdState, prevActiveTabIdProp]);\n\n const onTabClick = useCallback(\n (tabId: number) => {\n setPreviousActiveTabIdState(activeTabIdState);\n setActiveTabIdState(tabId);\n },\n [activeTabIdState]\n );\n\n // Collect TabPanel ids for aria-controls relationship\n const tabPanelIds = useMemo(() => {\n const ids: string[] = [];\n React.Children.forEach(children, (child: TabsChild) => {\n if (child.type.isTabPanels) {\n React.Children.forEach(child.props.children, (panelChild: ReactElement, index: number) => {\n ids[index] = panelChild.props.id;\n });\n }\n });\n return ids;\n }, [children]);\n\n return (\n <div\n ref={mergedRef}\n className={className}\n id={id}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.TABS_CONTEXT, id)}\n >\n {React.Children.map(children, (child: TabsChild) => {\n if (child.type.isTabList) {\n const originalOnTabChange = child.props.onTabChange;\n const onTabChange = (tabId: number) => {\n onTabClick(tabId);\n originalOnTabChange?.(tabId);\n };\n return React.cloneElement(child, { activeTabId: activeTabIdState, onTabChange, tabPanelIds });\n }\n if (child.type.isTabPanels) {\n const animationDirection = previousActiveTabIdState < activeTabIdState ? \"ltr\" : \"rtl\";\n return React.cloneElement(child, { activeTabId: activeTabIdState, animationDirection });\n }\n return child;\n })}\n </div>\n );\n }\n);\n\nexport default TabsContext;\n"],"names":["TabsContext","forwardRef","_ref","ref","className","id","_ref$activeTabId","activeTabId","children","dataTestId","componentRef","useRef","mergedRef","useMergeRef","_useState","useState","_useState2","_slicedToArray","previousActiveTabIdState","setPreviousActiveTabIdState","_useState3","_useState4","activeTabIdState","setActiveTabIdState","prevActiveTabIdProp","usePrevious","useEffect","onTabClick","useCallback","tabId","tabPanelIds","useMemo","ids","React","Children","forEach","child","type","isTabPanels","props","panelChild","index","createElement","getTestId","ComponentDefaultTestId","TABS_CONTEXT","map","isTabList","originalOnTabChange","onTabChange","cloneElement","animationDirection"],"mappings":"4YA8BA,IAAMA,EAAoCC,GACxC,SAAAC,EAA0EC,GAAO,IAA9EC,EAASF,EAATE,UAAWC,EAAEH,EAAFG,GAAEC,EAAAJ,EAAEK,YAAAA,OAAW,IAAAD,EAAG,EAACA,EAAEE,EAAQN,EAARM,SAAyBC,EAAUP,EAAzB,eACrCQ,EAAeC,EAAO,MACtBC,EAAYC,EAAYV,EAAKO,GAEnCI,EAAgEC,EAASR,GAAYS,EAAAC,EAAAH,EAAA,GAA9EI,EAAwBF,EAAA,GAAEG,EAA2BH,EAAA,GAC5DI,EAAgDL,EAASR,GAAYc,EAAAJ,EAAAG,EAAA,GAA9DE,EAAgBD,EAAA,GAAEE,EAAmBF,EAAA,GACtCG,EAAsBC,EAAYlB,GAExCmB,GAAU,WAEJnB,IAAgBiB,GAAuBjB,IAAgBe,IACzDH,EAA4BG,GAC5BC,EAAoBhB,GAExB,GAAG,CAACA,EAAae,EAAkBE,IAEnC,IAAMG,EAAaC,GACjB,SAACC,GACCV,EAA4BG,GAC5BC,EAAoBM,EACtB,GACA,CAACP,IAIGQ,EAAcC,GAAQ,WAC1B,IAAMC,EAAgB,GAQtB,OAPAC,EAAMC,SAASC,QAAQ3B,GAAU,SAAC4B,GAC5BA,EAAMC,KAAKC,aACbL,EAAMC,SAASC,QAAQC,EAAMG,MAAM/B,UAAU,SAACgC,EAA0BC,GACtET,EAAIS,GAASD,EAAWD,MAAMlC,EAChC,GAEJ,IACO2B,CACT,GAAG,CAACxB,IAEJ,OACEyB,EAAAS,cAAA,MAAA,CACEvC,IAAKS,EACLR,UAAWA,EACXC,GAAIA,EAAE,cACOI,GAAckC,EAAUC,EAAuBC,aAAcxC,IAEzE4B,EAAMC,SAASY,IAAItC,GAAU,SAAC4B,GAC7B,GAAIA,EAAMC,KAAKU,UAAW,CACxB,IAAMC,EAAsBZ,EAAMG,MAAMU,YAKxC,OAAOhB,EAAMiB,aAAad,EAAO,CAAE7B,YAAae,EAAkB2B,YAJ9C,SAACpB,GACnBF,EAAWE,GACXmB,SAAAA,EAAsBnB,EACxB,EAC+EC,YAAAA,GACjF,CACA,OAAIM,EAAMC,KAAKC,YAENL,EAAMiB,aAAad,EAAO,CAAE7B,YAAae,EAAkB6B,mBADZ7B,EAA3BJ,EAA8C,MAAQ,QAG5EkB,CACT,IAGN"}

package/dist/src/components/TextArea/TextArea.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{slicedToArray as e,defineProperty as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{__rest as a}from"../../../_virtual/_tslib.js";import r,{forwardRef as s,useMemo as l,useState as o,useCallback as n}from"react";import i from"classnames";import{getTestId as d}from"../../tests/testIds.js";import{ComponentDefaultTestId as m,ComponentVibeId as c}from"../../tests/constants.js";import u from"./TextArea.module.scss.js";import p from"../HiddenText/HiddenText.js";import x from"../../../components/layout/dist/Flex/Flex.js";import f from"../../../components/typography/dist/Text/Text.js";var h={small:3,large:4},g=s((function(s,g){var b=s.size,v=void 0===b?"small":b,T=s.rows,y=s.label,E=s.helpText,j=s.success,w=s.error,A=s.className,C=s["data-testid"],N=s.id,_=s.disabled,z=s.readOnly,L=s.required,O=s.maxLength,q=s.allowExceedingMaxLength,F=s.onChange,H=s.value,M=s.resize,P=void 0===M||M,R=s.showCharCount,X=void 0!==R&&R,B=a(s,["size","rows","label","helpText","success","error","className","data-testid","id","disabled","readOnly","required","maxLength","allowExceedingMaxLength","onChange","value","resize","showCharCount"]),I=T||h[v],W=E&&"".concat(N,"-help-text"),k=q&&"".concat(N,"-allow-exceeding-max-length"),D=l((function(){return[W,k].filter((function(e){return!!e})).join(" ")||void 0}),[W,k]),G=o((null==H?void 0:H.length)||0),J=e(G,2),K=J[0],Q=J[1],S=w||"number"==typeof O&&K>O,U=n((function(e){Q(e.target.value.length),null==F||F(e)}),[F]);return r.createElement("div",{className:i(u.textAreaWrapper,t(t(t(t({},u.error,S),u.success,j),u.disabled,_),u.readOnly,z),A),"data-testid":C||d(m.TEXT_AREA,N),"data-vibe":c.TEXT_AREA},y&&r.createElement("label",{className:i(u.label,t({},u.required,L)),htmlFor:N},y),r.createElement("textarea",Object.assign({},B,{id:N,maxLength:"number"!=typeof O||q?void 0:O,ref:g,value:H,disabled:_,readOnly:z,required:L,rows:I,className:i(u.textArea,[u[v]],t({},u.resize,P)),"aria-invalid":S,"aria-describedby":D,onChange:U})),(X||E)&&r.createElement(x,{gap:"xs",justify:"space-between",className:i(u.subTextContainer)},E&&r.createElement(f,{className:i(u.helpText),color:"inherit",id:W},E),X&&r.createElement(r.Fragment,null,r.createElement(f,{className:u.limitText},K,"number"==typeof O&&"/".concat(O)),r.createElement(p,{id:k,text:"".concat(K," out of ").concat(O)}))))}));export{g as default};
+import{slicedToArray as e,defineProperty as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{__rest as a}from"../../../_virtual/_tslib.js";import r,{forwardRef as l,useMemo as s,useState as n,useEffect as o,useCallback as i}from"react";import d from"classnames";import{getTestId as m}from"../../../testIds.js";import{ComponentVibeId as c,ComponentDefaultTestId as u}from"../../tests/constants.js";import p from"./TextArea.module.scss.js";import x from"../HiddenText/HiddenText.js";import f from"../../../components/layout/dist/Flex/Flex.js";import h from"../../../components/typography/dist/Text/Text.js";var g={small:3,large:4},b=l((function(l,b){var v=l.size,T=void 0===v?"small":v,y=l.rows,E=l.label,j=l.helpText,w=l.success,A=l.error,C=l.className,N=l["data-testid"],_=l.id,z=l.disabled,L=l.readOnly,O=l.required,q=l.maxLength,F=l.allowExceedingMaxLength,H=l.onChange,M=l.value,P=l.resize,R=void 0===P||P,X=l.showCharCount,B=void 0!==X&&X,I=a(l,["size","rows","label","helpText","success","error","className","data-testid","id","disabled","readOnly","required","maxLength","allowExceedingMaxLength","onChange","value","resize","showCharCount"]),W=y||g[T],k=j&&"".concat(_,"-help-text"),D=F&&"".concat(_,"-allow-exceeding-max-length"),G=s((function(){return[k,D].filter((function(e){return!!e})).join(" ")||void 0}),[k,D]),J=n((null==M?void 0:M.length)||0),K=e(J,2),Q=K[0],S=K[1],U=A||"number"==typeof q&&Q>q;o((function(){S((null==M?void 0:M.length)||0)}),[M]);var V=i((function(e){S(e.target.value.length),null==H||H(e)}),[H]);return r.createElement("div",{className:d(p.textAreaWrapper,t(t(t(t({},p.error,U),p.success,w),p.disabled,z),p.readOnly,L),C),"data-testid":N||m(u.TEXT_AREA,_),"data-vibe":c.TEXT_AREA},E&&r.createElement("label",{className:d(p.label,t({},p.required,O)),htmlFor:_},E),r.createElement("textarea",Object.assign({},I,{id:_,maxLength:"number"!=typeof q||F?void 0:q,ref:b,value:M,disabled:z,readOnly:L,required:O,rows:W,className:d(p.textArea,[p[T]],t({},p.resize,R)),"aria-invalid":U,"aria-describedby":G,onChange:V})),(B||j)&&r.createElement(f,{gap:"xs",justify:"space-between",className:d(p.subTextContainer)},j&&r.createElement(h,{className:d(p.helpText),color:"inherit",id:k},j),B&&r.createElement(r.Fragment,null,r.createElement(h,{className:p.limitText},Q,"number"==typeof q&&"/".concat(q)),r.createElement(x,{id:D,text:"".concat(Q," out of ").concat(q)}))))}));export{b as default};
 //# sourceMappingURL=TextArea.js.map

package/dist/src/components/TextArea/TextArea.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextArea.js","sources":["../../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo, useState } from \"react\";\nimport cx from \"classnames\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../tests/constants\";\nimport styles from \"./TextArea.module.scss\";\nimport { type TextAreaProps, type TextAreaSize } from \"./TextArea.types\";\nimport { Text } from \"@vibe/typography\";\nimport { Flex } from \"@vibe/layout\";\nimport { HiddenText } from \"../HiddenText\";\n\nconst DEFAULT_ROWS: Record<TextAreaSize, number> = {\n small: 3,\n large: 4\n};\n\nconst TextArea = forwardRef(\n (\n {\n size = \"small\",\n rows,\n label,\n helpText,\n success,\n error,\n className,\n \"data-testid\": dataTestId,\n id,\n disabled,\n readOnly,\n required,\n maxLength,\n allowExceedingMaxLength,\n onChange,\n value,\n resize = true,\n showCharCount = false,\n ...rest\n }: TextAreaProps,\n ref: React.ForwardedRef<HTMLTextAreaElement>\n ) => {\n const numRows = rows \|\| DEFAULT_ROWS[size];\n const helpTextId = helpText && `${id}-help-text`;\n const allowExceedingMaxLengthTextId = allowExceedingMaxLength && `${id}-allow-exceeding-max-length`;\n\n const ariaDescribedby = useMemo(\n () => [helpTextId, allowExceedingMaxLengthTextId].filter(id => !!id).join(\" \") \|\| undefined,\n [helpTextId, allowExceedingMaxLengthTextId]\n );\n\n const [characterCount, setCharacterCount] = useState(value?.length \|\| 0);\n const isErrorState = error \|\| (typeof maxLength === \"number\" && characterCount > maxLength);\n\n const handleOnChange = useCallback(\n (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n setCharacterCount(event.target.value.length);\n onChange?.(event);\n },\n [onChange]\n );\n\n return (\n <div\n className={cx(\n styles.textAreaWrapper,\n {\n [styles.error]: isErrorState,\n [styles.success]: success,\n [styles.disabled]: disabled,\n [styles.readOnly]: readOnly\n },\n className\n )}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.TEXT_AREA, id)}\n data-vibe={ComponentVibeId.TEXT_AREA}\n >\n {label && (\n <label className={cx(styles.label, { [styles.required]: required })} htmlFor={id}>\n {label}\n </label>\n )}\n <textarea\n {...rest}\n id={id}\n maxLength={typeof maxLength === \"number\" && !allowExceedingMaxLength ? maxLength : undefined}\n ref={ref}\n value={value}\n disabled={disabled}\n readOnly={readOnly}\n required={required}\n rows={numRows}\n className={cx(styles.textArea, [styles[size]], { [styles.resize]: resize })}\n aria-invalid={isErrorState}\n aria-describedby={ariaDescribedby}\n onChange={handleOnChange}\n />\n {(showCharCount \|\| helpText) && (\n <Flex gap=\"xs\" justify=\"space-between\" className={cx(styles.subTextContainer)}>\n {helpText && (\n <Text className={cx(styles.helpText)} color=\"inherit\" id={helpTextId}>\n {helpText}\n </Text>\n )}\n {showCharCount && (\n <>\n <Text className={styles.limitText}>\n {characterCount}\n {typeof maxLength === \"number\" && `/${maxLength}`}\n </Text>\n <HiddenText id={allowExceedingMaxLengthTextId} text={`${characterCount} out of ${maxLength}`} />\n </>\n )}\n </Flex>\n )}\n </div>\n );\n }\n);\n\nexport default TextArea;\n"],"names":["DEFAULT_ROWS","small","large","TextArea","forwardRef","_a","ref","size","_a$size","rows","label","helpText","success","error","className","dataTestId","id","disabled","readOnly","required","maxLength","allowExceedingMaxLength","onChange","value","_a$resize","resize","_a$showCharCount","showCharCount","rest","__rest","numRows","helpTextId","concat","allowExceedingMaxLengthTextId","ariaDescribedby","useMemo","filter","join","undefined","_useState","useState","length","_useState2","_slicedToArray","characterCount","setCharacterCount","isErrorState","handleOnChange","useCallback","event","target","React","cx","styles","textAreaWrapper","_defineProperty","getTestId","ComponentDefaultTestId","TEXT_AREA","ComponentVibeId","createElement","htmlFor","Object","assign","textArea","Flex","gap","justify","subTextContainer","Text","color","Fragment","limitText","HiddenText","text"],"mappings":"~~8lBAUA~~,IAAMA,EAA6C,CACjDC,MAAO,EACPC,MAAO,GAGHC,EAAWC,GACf,SACEC,EAqBAC,WApBEC,KAAAA,~~OAAO~~,~~IAAHC~~,EAAG,QAAOA,EACdC,IAAAA,KACAC,IAAAA,MACAC,IAAAA,SACAC,IAAAA,QACAC,IAAAA,MACAC,IAAAA,UACeC,IAAf,eACAC,IAAAA,GACAC,IAAAA,SACAC,IAAAA,SACAC,IAAAA,SACAC,IAAAA,UACAC,IAAAA,wBACAC,IAAAA,SACAC,IAAAA,MAAKC,IACLC,OAAAA,~~OAAS~~,~~IAAHD~~,GAAOA,EAAAE,IACbC,cAAAA,~~OAAgB~~,~~IAAHD~~,GAAQA,EAClBE,~~EAnBLC~~,EAAAxB,~~EAAA~~,CAAA,OAAA,OAAA,QAAA,WAAA,UAAA,QAAA,YAAA,cAAA,KAAA,WAAA,WAAA,WAAA,YAAA,0BAAA,WAAA,QAAA,SAAA,kBAuBMyB,EAAUrB,GAAQT,EAAaO,GAC/BwB,EAAapB,MAAQqB,OAAOhB,~~EAAc~~,~~cAC1CiB~~,EAAgCZ,MAAuBW,OAAOhB,~~EAA+B~~,+~~BAE7FkB~~,EAAkBC,GACtB,WAAA,MAAM,CAACJ,EAAYE,GAA+BG,QAAO,SAAApB,GAAE,QAAMA,CAAE,IAAEqB,KAAK,WAAQC,CAAS,GAC3F,CAACP,EAAYE,IAGfM,EAA4CC,GAASjB,eAAAA,EAAOkB,SAAU,GAAEC,EAAAC,EAAAJ,EAAA,GAAjEK,EAAcF,EAAA,GAAEG,EAAiBH,EAAA,GAClCI,EAAejC,GAA+B,iBAAdO,GAA0BwB,EAAiBxB,~~EAE3E2B~~,EAAiBC,GACrB,SAACC,~~GACCJ~~,~~EAAkBI~~,EAAMC,~~OAAO3B~~,MAAMkB,QACrCnB,SAAAA,~~EAAW2B~~,EACb,GACA,~~CAAC3B~~,IAGH,~~OACE6B~~,~~uBACErC~~,~~UAAWsC~~,EACTC,EAAOC,gBAAeC,EAAAA,EAAAA,EAAAA,KAEnBF,~~EAAOxC~~,MAAQiC,~~GACfO~~,~~EAAOzC~~,QAAUA,~~GACjByC~~,~~EAAOpC~~,SAAWA,~~GAClBoC~~,~~EAAOnC~~,SAAWA,GAErBJ,GACD,cACYC,~~GAAcyC~~,EAAUC,EAAuBC,~~UAAW1C~~,~~GAC5D~~,~~YAAA2C~~,EAAgBD,~~WAE1BhD~~,~~GACCyC~~,~~EAAOS~~,cAAA,QAAA,~~CAAA9C~~,~~UAAWsC~~,EAAGC,~~EAAO3C~~,~~MAAK6C~~,EAAA,CAAA,EAAKF,~~EAAOlC~~,SAAWA,~~IAAa0C~~,~~QAAS7C~~,GAC3EN,~~GAGLyC~~,EAAAS,cAAA,WAAAE,OAAAC,OAAA,CAAA,~~EACMnC~~,~~EACJ~~,~~CAAAZ~~,GAAIA,EACJI,UAAgC,iBAAdA,GAA2BC,OAAsCiB,EAAZlB,EACvEd,IAAKA,EACLiB,MAAOA,EACPN,SAAUA,EACVC,SAAUA,EACVC,SAAUA,EACVV,KAAMqB,EACNhB,~~UAAWsC~~,EAAGC,EAAOW,SAAU,CAACX,~~EAAO9C~~,~~IAAMgD~~,~~EAAKF~~,~~CAAAA~~,~~EAAAA~~,~~EAAO5B~~,OAASA,IAAS,eAC7DqB,~~EACI~~,~~mBAAAZ~~,EAClBZ,~~SAAUyB~~,~~MAEVpB~~,GAAiBhB,~~IACjBwC~~,~~EAACS~~,~~cAAAK~~,~~EAAK~~,~~CAAAC~~,IAAI,KAAKC,QAAQ,~~gBAAgBrD~~,~~UAAWsC~~,EAAGC,EAAOe,~~mBACzDzD~~,~~GACCwC~~,EAAAS,cAACS,EAAI,~~CAACvD~~,~~UAAWsC~~,EAAGC,~~EAAO1C~~,~~UAAW2D~~,MAAM,~~UAAUtD~~,GAAIe,GACvDpB,GAGJgB,~~GACCwB~~,EAAAS,cAAAT,EAAAoB,SAAA,KACEpB,EAAAS,cAACS,~~EAAK~~,~~CAAAvD~~,~~UAAWuC~~,EAAOmB,~~WACrB5B~~,EACqB,iBAAdxB,~~GAAsBY~~,~~IAAAA~~,OAAQZ,~~IAExC+B~~,~~EAACS~~,~~cAAAa~~,~~GAAWzD~~,GAAIiB,EAA+~~ByC~~,~~QAAI1C~~,OAAKY,~~EAAcZ~~,~~YAAAA~~,OAAWZ,OAO/F"}
1	+ {"version":3,"file":"TextArea.js","sources":["../../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useEffect, useMemo, useState } from \"react\";\nimport cx from \"classnames\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../tests/constants\";\nimport styles from \"./TextArea.module.scss\";\nimport { type TextAreaProps, type TextAreaSize } from \"./TextArea.types\";\nimport { Text } from \"@vibe/typography\";\nimport { Flex } from \"@vibe/layout\";\nimport { HiddenText } from \"../HiddenText\";\n\nconst DEFAULT_ROWS: Record<TextAreaSize, number> = {\n small: 3,\n large: 4\n};\n\nconst TextArea = forwardRef(\n (\n {\n size = \"small\",\n rows,\n label,\n helpText,\n success,\n error,\n className,\n \"data-testid\": dataTestId,\n id,\n disabled,\n readOnly,\n required,\n maxLength,\n allowExceedingMaxLength,\n onChange,\n value,\n resize = true,\n showCharCount = false,\n ...rest\n }: TextAreaProps,\n ref: React.ForwardedRef<HTMLTextAreaElement>\n ) => {\n const numRows = rows \|\| DEFAULT_ROWS[size];\n const helpTextId = helpText && `${id}-help-text`;\n const allowExceedingMaxLengthTextId = allowExceedingMaxLength && `${id}-allow-exceeding-max-length`;\n\n const ariaDescribedby = useMemo(\n () => [helpTextId, allowExceedingMaxLengthTextId].filter(id => !!id).join(\" \") \|\| undefined,\n [helpTextId, allowExceedingMaxLengthTextId]\n );\n\n const [characterCount, setCharacterCount] = useState(value?.length \|\| 0);\n const isErrorState = error \|\| (typeof maxLength === \"number\" && characterCount > maxLength);\n\n useEffect(() => {\n setCharacterCount(value?.length \|\| 0);\n }, [value]);\n\n const handleOnChange = useCallback(\n (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n setCharacterCount(event.target.value.length);\n onChange?.(event);\n },\n [onChange]\n );\n\n return (\n <div\n className={cx(\n styles.textAreaWrapper,\n {\n [styles.error]: isErrorState,\n [styles.success]: success,\n [styles.disabled]: disabled,\n [styles.readOnly]: readOnly\n },\n className\n )}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.TEXT_AREA, id)}\n data-vibe={ComponentVibeId.TEXT_AREA}\n >\n {label && (\n <label className={cx(styles.label, { [styles.required]: required })} htmlFor={id}>\n {label}\n </label>\n )}\n <textarea\n {...rest}\n id={id}\n maxLength={typeof maxLength === \"number\" && !allowExceedingMaxLength ? maxLength : undefined}\n ref={ref}\n value={value}\n disabled={disabled}\n readOnly={readOnly}\n required={required}\n rows={numRows}\n className={cx(styles.textArea, [styles[size]], { [styles.resize]: resize })}\n aria-invalid={isErrorState}\n aria-describedby={ariaDescribedby}\n onChange={handleOnChange}\n />\n {(showCharCount \|\| helpText) && (\n <Flex gap=\"xs\" justify=\"space-between\" className={cx(styles.subTextContainer)}>\n {helpText && (\n <Text className={cx(styles.helpText)} color=\"inherit\" id={helpTextId}>\n {helpText}\n </Text>\n )}\n {showCharCount && (\n <>\n <Text className={styles.limitText}>\n {characterCount}\n {typeof maxLength === \"number\" && `/${maxLength}`}\n </Text>\n <HiddenText id={allowExceedingMaxLengthTextId} text={`${characterCount} out of ${maxLength}`} />\n </>\n )}\n </Flex>\n )}\n </div>\n );\n }\n);\n\nexport default TextArea;\n"],"names":["DEFAULT_ROWS","small","large","TextArea","forwardRef","_a","ref","size","_a$size","rows","label","helpText","success","error","className","dataTestId","id","disabled","readOnly","required","maxLength","allowExceedingMaxLength","onChange","value","_a$resize","resize","_a$showCharCount","showCharCount","rest","__rest","numRows","helpTextId","concat","allowExceedingMaxLengthTextId","ariaDescribedby","useMemo","filter","join","undefined","_useState","useState","length","_useState2","_slicedToArray","characterCount","setCharacterCount","isErrorState","useEffect","handleOnChange","useCallback","event","target","React","cx","styles","textAreaWrapper","_defineProperty","getTestId","ComponentDefaultTestId","TEXT_AREA","ComponentVibeId","createElement","htmlFor","Object","assign","textArea","Flex","gap","justify","subTextContainer","Text","color","Fragment","limitText","HiddenText","text"],"mappings":"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"}

package/dist/src/components/TextArea/TextArea.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={textAreaWrapper:"textAreaWrapper_1b9f7f2d4c",label:"label_08486317e3",required:"required_cae971372f",subTextContainer:"subTextContainer_87f9814ae9",helpText:"helpText_d84cb4080d",limitText:"limitText_150cf34f29",textArea:"textArea_974720281b",small:"small_8b6dbb7885",large:"large_6c35cee641",resize:"resize_0155f806ef",success:"success_30776d4cbb",error:"error_3c3fc29b59",disabled:"disabled_cae971372f",readOnly:"readOnly_cae971372f"};!function(e){const r="s_id-48d7f417273f_4_2_0";if("undefined"!=typeof document){const a=document.head||document.getElementsByTagName("head")[0];if(a.querySelector("#"+r))return;const t=document.createElement("style");t.id=r,a.firstChild?a.insertBefore(t,a.firstChild):a.appendChild(t),t.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[r]=e)}('/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/* stylelint-enable */\n.textAreaWrapper_1b9f7f2d4c {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  gap: var(--space-4);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  font: var(--font-text2-normal);\n}\n.textAreaWrapper_1b9f7f2d4c .label_08486317e3 {\n  display: inline-flex;\n  gap: var(--space-4);\n  color: var(--primary-text-color);\n}\n.textAreaWrapper_1b9f7f2d4c .label_08486317e3.required_cae971372f::after {\n  content: "*";\n  color: var(--color-error);\n}\n.textAreaWrapper_1b9f7f2d4c .subTextContainer_87f9814ae9 {\n  color: var(--secondary-text-color);\n}\n.textAreaWrapper_1b9f7f2d4c .subTextContainer_87f9814ae9 .helpText_d84cb4080d {\n  display: flex;\n}\n.textAreaWrapper_1b9f7f2d4c .subTextContainer_87f9814ae9 .limitText_150cf34f29 {\n  margin-inline-start: auto;\n}\n.textAreaWrapper_1b9f7f2d4c .textArea_974720281b {\n  resize: vertical;\n  border: 1px solid var(--ui-border-color);\n  border-radius: var(--border-radius-small);\n  padding: var(--space-8);\n  outline: none;\n  background-color: var(--secondary-background-color);\n  color: var(--primary-text-color);\n}\n.textAreaWrapper_1b9f7f2d4c .textArea_974720281b::placeholder {\n  color: var(--placeholder-color);\n  font-weight: 400;\n}\n.textAreaWrapper_1b9f7f2d4c .textArea_974720281b:hover {\n  border-color: var(--primary-text-color);\n}\n.textAreaWrapper_1b9f7f2d4c .textArea_974720281b:active, .textAreaWrapper_1b9f7f2d4c .textArea_974720281b:focus, .textAreaWrapper_1b9f7f2d4c .textArea_974720281b:focus-within {\n  border-color: var(--primary-color);\n}\n.textAreaWrapper_1b9f7f2d4c .textArea_974720281b.small_8b6dbb7885 {\n  font: var(--font-text2-normal);\n}\n.textAreaWrapper_1b9f7f2d4c .textArea_974720281b.large_6c35cee641 {\n  padding: var(--space-12);\n  font: var(--font-text1-normal);\n}\n.textAreaWrapper_1b9f7f2d4c .textArea_974720281b:not(.resize_0155f806ef) {\n  resize: none;\n}\n.textAreaWrapper_1b9f7f2d4c.success_30776d4cbb .textArea_974720281b {\n  border-color: var(--color-success);\n}\n.textAreaWrapper_1b9f7f2d4c.success_30776d4cbb .helpText_d84cb4080d {\n  color: var(--color-success);\n}\n.textAreaWrapper_1b9f7f2d4c.error_3c3fc29b59 .textArea_974720281b {\n  border-color: var(--color-error);\n}\n.textAreaWrapper_1b9f7f2d4c.error_3c3fc29b59 .helpText_d84cb4080d,\n.textAreaWrapper_1b9f7f2d4c.error_3c3fc29b59 .limitText_150cf34f29 {\n  color: var(--color-error);\n}\n.textAreaWrapper_1b9f7f2d4c.disabled_cae971372f .textArea_974720281b,\n.textAreaWrapper_1b9f7f2d4c.disabled_cae971372f .textArea_974720281b:hover {\n  color: var(--disabled-text-color);\n  background-color: var(--disabled-background-color);\n  border-color: transparent;\n  resize: none;\n}\n.textAreaWrapper_1b9f7f2d4c.disabled_cae971372f .textArea_974720281b::placeholder,\n.textAreaWrapper_1b9f7f2d4c.disabled_cae971372f .textArea_974720281b:hover::placeholder {\n  color: var(--disabled-text-color);\n}\n.textAreaWrapper_1b9f7f2d4c.disabled_cae971372f .helpText_d84cb4080d {\n  color: var(--disabled-text-color);\n}\n.textAreaWrapper_1b9f7f2d4c.readOnly_cae971372f .textArea_974720281b,\n.textAreaWrapper_1b9f7f2d4c.readOnly_cae971372f .textArea_974720281b:hover {\n  background-color: var(--allgrey-background-color);\n  border-color: transparent;\n  resize: none;\n}');export{e as default};
+var e={textAreaWrapper:"textAreaWrapper_02c08d7e4d",label:"label_ac67f7a695",required:"required_9c828e1849",subTextContainer:"subTextContainer_e0d266d3e6",helpText:"helpText_b656a1fbd1",limitText:"limitText_854be85e02",textArea:"textArea_0f9a8fbc4f",small:"small_c4df846157",large:"large_8094594361",resize:"resize_93501e8ec6",success:"success_605ee41a1c",error:"error_aacf3157fd",disabled:"disabled_9c828e1849",readOnly:"readOnly_9c828e1849"};!function(e){const r="s_id-48d7f417273f_4_2_2";if("undefined"!=typeof document){const a=document.head||document.getElementsByTagName("head")[0];if(a.querySelector("#"+r))return;const t=document.createElement("style");t.id=r,a.firstChild?a.insertBefore(t,a.firstChild):a.appendChild(t),t.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[r]=e)}('/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/* stylelint-enable */\n.textAreaWrapper_02c08d7e4d {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  gap: var(--space-4);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  font: var(--font-text2-normal);\n}\n.textAreaWrapper_02c08d7e4d .label_ac67f7a695 {\n  display: inline-flex;\n  gap: var(--space-4);\n  color: var(--primary-text-color);\n}\n.textAreaWrapper_02c08d7e4d .label_ac67f7a695.required_9c828e1849::after {\n  content: "*";\n  color: var(--color-error);\n}\n.textAreaWrapper_02c08d7e4d .subTextContainer_e0d266d3e6 {\n  color: var(--secondary-text-color);\n}\n.textAreaWrapper_02c08d7e4d .subTextContainer_e0d266d3e6 .helpText_b656a1fbd1 {\n  display: flex;\n}\n.textAreaWrapper_02c08d7e4d .subTextContainer_e0d266d3e6 .limitText_854be85e02 {\n  margin-inline-start: auto;\n}\n.textAreaWrapper_02c08d7e4d .textArea_0f9a8fbc4f {\n  resize: vertical;\n  border: 1px solid var(--ui-border-color);\n  border-radius: var(--border-radius-small);\n  padding: var(--space-8);\n  outline: none;\n  background-color: var(--secondary-background-color);\n  color: var(--primary-text-color);\n}\n.textAreaWrapper_02c08d7e4d .textArea_0f9a8fbc4f::placeholder {\n  color: var(--placeholder-color);\n  font-weight: 400;\n}\n.textAreaWrapper_02c08d7e4d .textArea_0f9a8fbc4f:hover {\n  border-color: var(--primary-text-color);\n}\n.textAreaWrapper_02c08d7e4d .textArea_0f9a8fbc4f:active, .textAreaWrapper_02c08d7e4d .textArea_0f9a8fbc4f:focus, .textAreaWrapper_02c08d7e4d .textArea_0f9a8fbc4f:focus-within {\n  border-color: var(--primary-color);\n}\n.textAreaWrapper_02c08d7e4d .textArea_0f9a8fbc4f.small_c4df846157 {\n  font: var(--font-text2-normal);\n}\n.textAreaWrapper_02c08d7e4d .textArea_0f9a8fbc4f.large_8094594361 {\n  padding: var(--space-12);\n  font: var(--font-text1-normal);\n}\n.textAreaWrapper_02c08d7e4d .textArea_0f9a8fbc4f:not(.resize_93501e8ec6) {\n  resize: none;\n}\n.textAreaWrapper_02c08d7e4d.success_605ee41a1c .textArea_0f9a8fbc4f {\n  border-color: var(--color-success);\n}\n.textAreaWrapper_02c08d7e4d.success_605ee41a1c .helpText_b656a1fbd1 {\n  color: var(--color-success);\n}\n.textAreaWrapper_02c08d7e4d.error_aacf3157fd .textArea_0f9a8fbc4f {\n  border-color: var(--color-error);\n}\n.textAreaWrapper_02c08d7e4d.error_aacf3157fd .helpText_b656a1fbd1,\n.textAreaWrapper_02c08d7e4d.error_aacf3157fd .limitText_854be85e02 {\n  color: var(--color-error);\n}\n.textAreaWrapper_02c08d7e4d.disabled_9c828e1849 .textArea_0f9a8fbc4f,\n.textAreaWrapper_02c08d7e4d.disabled_9c828e1849 .textArea_0f9a8fbc4f:hover {\n  color: var(--disabled-text-color);\n  background-color: var(--disabled-background-color);\n  border-color: transparent;\n  resize: none;\n}\n.textAreaWrapper_02c08d7e4d.disabled_9c828e1849 .textArea_0f9a8fbc4f::placeholder,\n.textAreaWrapper_02c08d7e4d.disabled_9c828e1849 .textArea_0f9a8fbc4f:hover::placeholder {\n  color: var(--disabled-text-color);\n}\n.textAreaWrapper_02c08d7e4d.disabled_9c828e1849 .helpText_b656a1fbd1 {\n  color: var(--disabled-text-color);\n}\n.textAreaWrapper_02c08d7e4d.readOnly_9c828e1849 .textArea_0f9a8fbc4f,\n.textAreaWrapper_02c08d7e4d.readOnly_9c828e1849 .textArea_0f9a8fbc4f:hover {\n  background-color: var(--allgrey-background-color);\n  border-color: transparent;\n  resize: none;\n}');export{e as default};
 //# sourceMappingURL=TextArea.module.scss.js.map

package/dist/src/components/TextField/TextField.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{slicedToArray as e,defineProperty as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import o from"classnames";import a,{forwardRef as n,useState as r,useRef as i,useCallback as l,useMemo as c,useEffect as s}from"react";import d from"../../hooks/useDebounceEvent/index.js";import m from"../FieldLabel/FieldLabel.js";import{FEEDBACK_CLASSES as u,SIZE_MAPPER as p,TextFieldAriaLabel as v}from"./TextFieldConstants.js";import{getTestId as f}from"../../tests/testIds.js";import{ComponentDefaultTestId as b,ComponentVibeId as C}from"../../tests/constants.js";import x from"./TextField.module.scss.js";import E from"../HiddenText/HiddenText.js";import y from"../../../components/loader/dist/Loader/Loader.js";import h from"../../../components/tooltip/dist/Tooltip/Tooltip.js";import T from"../../../components/clickable/dist/Clickable/Clickable.js";import g from"../../../components/icon/dist/Icon/Icon.js";import N from"../../../components/typography/dist/Text/Text.js";import{useMergeRef as I}from"../../../shared/dist/hooks/useMergeRef.js";import{NOOP as j}from"../../../shared/dist/utils/function-utils.js";var F=n((function(n,F){var L=n.className,k=void 0===L?"":L,D=n.placeholder,H=void 0===D?"":D,w=n.autoComplete,A=void 0===w?"off":w,_=n.value,q=n.onChange,R=void 0===q?j:q,W=n.onBlur,B=void 0===W?j:W,O=n.onFocus,S=void 0===O?j:O,z=n.onKeyDown,K=void 0===z?j:z,M=n.onWheel,V=void 0===M?j:M,X=n.debounceRate,P=void 0===X?0:X,U=n.autoFocus,Y=void 0!==U&&U,G=n.disabled,J=void 0!==G&&G,Q=n.readonly,Z=void 0!==Q&&Q,$=n.setRef,ee=void 0===$?j:$,te=n.icon,oe=n.secondaryIconName,ae=n.id,ne=void 0===ae?"input":ae,re=n.title,ie=void 0===re?"":re,le=n.size,ce=void 0===le?"small":le,se=n.validation,de=void 0===se?null:se,me=n.wrapperClassName,ue=void 0===me?"":me,pe=n.onIconClick,ve=void 0===pe?j:pe,fe=n.clearOnIconClick,be=void 0!==fe&&fe,Ce=n.labelIconName,xe=n.showCharCount,Ee=void 0!==xe&&xe,ye=n.inputAriaLabel,he=n.searchResultsContainerId,Te=void 0===he?"":he,ge=n.activeDescendant,Ne=void 0===ge?"":ge,Ie=n.iconLabel,je=n.secondaryIconLabel,Fe=n.type,Le=void 0===Fe?"text":Fe,ke=n.maxLength,De=void 0===ke?null:ke,He=n.allowExceedingMaxLength,we=void 0!==He&&He,Ae=n.trim,_e=void 0!==Ae&&Ae,qe=n.role,Re=void 0===qe?"":qe,We=n.required,Be=void 0!==We&&We,Oe=n.requiredErrorText,Se=void 0===Oe?"":Oe,ze=n.loading,Ke=void 0!==ze&&ze,Me=n["data-testid"],Ve=n.secondaryDataTestId,Xe=n.tabIndex,Pe=n.underline,Ue=void 0!==Pe&&Pe,Ye=n.name,Ge=n.controlled,Je=void 0!==Ge&&Ge,Qe=n.iconTooltipContent,Ze=n.secondaryTooltipContent,$e=n.dir,et=r(!1),tt=e(et,2),ot=tt[0],at=tt[1],nt=i(null),rt=I(F,nt,ee),it=l((function(e){Be&&!e.target.value&&at(!0),B(e)}),[B,Be]),lt=l((function(e,t){ot&&e&&at(!1),R(e,t||{target:nt.current})}),[R,ot]),ct=d({delay:P,onChange:lt,initialStateValue:_,trim:_e}),st=ct.inputValue,dt=ct.onEventChanged,mt=ct.clearValue,ut=c((function(){return Je?_:st}),[Je,_,st]),pt=l((function(e){Je?lt(e.target.value,e):dt(e)}),[Je,lt,dt]),vt=c((function(){return oe&&ut?oe:te}),[te,oe,ut]),ft=l((function(){J||(be&&(nt.current&&nt.current.focus(),nt.current.value="",Je?lt(""):mt()),ve(vt))}),[J,be,ve,vt,Je,lt,mt]),bt=c((function(){return"number"==typeof De&&ut&&ut.length>De?u.error:de&&de.status||ot?u[ot?"error":de.status]:""}),[De,de,ot,ut]),Ct=te||oe,xt=Ee||de&&de.text||ot&&Se,Et=oe===vt,yt=te===vt,ht=(ve!==j||Ie||Qe)&&ut&&te.length&&yt,Tt=(oe||Ze)&&Et&&!!ut,gt=we?"".concat(ne,"-allow-exceeding-max-length-text"):void 0;s((function(){if((null==nt?void 0:nt.current)&&Y){var e=requestAnimationFrame((function(){return nt.current.focus()}));return function(){return cancelAnimationFrame(e)}}}),[nt,Y]);var Nt=ve!==j||be,It=Ie||Qe,jt=je||Ze;return a.createElement("div",{className:o(x.textField,ue,t(t({},x.disabled,J),x.onlyUnderline,Ue)),role:Re,"aria-busy":Ke},a.createElement("div",{className:o(x.labelWrapper)},a.createElement(m,{labelText:ie,icon:Ce,labelFor:ne,required:Be}),a.createElement("div",{className:o(x.inputWrapper,p[ce],bt)},a.createElement("input",{className:o(k,x.input,t(t({},x.inputHasIcon,!!Ct),x.readOnly,Z)),placeholder:H,autoComplete:A,value:ut,onChange:pt,disabled:J,readOnly:Z,ref:rt,type:Le,id:ne,"data-testid":Me||f(b.TEXT_FIELD,ne),"data-vibe":C.TEXT_FIELD,name:Ye,onBlur:it,onFocus:S,onKeyDown:K,onWheel:V,maxLength:"number"!=typeof De||we?void 0:De,role:Te&&"combobox","aria-label":ye||H,"aria-invalid":de&&"error"===de.status||ot,"aria-owns":Te,"aria-activedescendant":Ne,"aria-required":Be,"aria-describedby":gt,required:Be,tabIndex:Xe,dir:$e}),Ke&&a.createElement("div",{className:o(x.loaderContainer,t({},x.loaderContainerHasIcon,Ct))},a.createElement("div",{className:o(x.loader)},a.createElement(y,{className:o(x.loaderSvg)}))),te&&a.createElement(h,{content:yt?Qe:void 0,referenceWrapperClassName:x.tooltipContainer},a.createElement(T,{className:o(x.iconContainer,t(t(t({},x.iconContainerHasIcon,Ct),x.iconContainerActive,yt),x.iconContainerClickable,Nt)),onClick:ft,tabIndex:ht?0:-1,"aria-label":It},a.createElement(g,{icon:te,className:o(x.icon),type:"font",size:"small"===ce?"16px":"18px"}))),oe&&a.createElement(h,{content:Et?Ze:void 0,addKeyboardHideShowTriggersByDefault:!0,referenceWrapperClassName:x.tooltipContainer},a.createElement(T,{className:o(x.iconContainer,t(t(t({},x.iconContainerHasIcon,Ct),x.iconContainerActive,Et),x.iconContainerClickable,Nt)),onClick:ft,tabIndex:Tt?0:-1,"data-testid":Ve||f(b.TEXT_FIELD_SECONDARY_BUTTON,ne),"aria-label":jt},a.createElement(g,{icon:oe,className:o(x.icon),type:"font",size:"small"===ce?"16px":"18px"})))),xt&&a.createElement(N,{type:"text2",color:"secondary",className:o(x.subTextContainer)},(de&&de.text||ot&&Se)&&a.createElement("span",{className:o(x.subTextContainerStatus)},ot?Se:de.text),Ee&&a.createElement("span",{className:o(x.counter),"aria-label":v.CHAR},ut&&ut.length||0,"number"==typeof De&&"/".concat(De),a.createElement(E,{id:gt,text:"Maximum of ".concat(De," characters")})))))}));export{F as default};
+import{slicedToArray as e,defineProperty as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import o from"classnames";import a,{forwardRef as n,useState as r,useRef as i,useCallback as l,useMemo as c,useEffect as s}from"react";import d from"../../hooks/useDebounceEvent/index.js";import m from"../FieldLabel/FieldLabel.js";import{FEEDBACK_CLASSES as u,SIZE_MAPPER as p,TextFieldAriaLabel as v}from"./TextFieldConstants.js";import{getTestId as f}from"../../../testIds.js";import{ComponentVibeId as b,ComponentDefaultTestId as C}from"../../tests/constants.js";import x from"./TextField.module.scss.js";import E from"../HiddenText/HiddenText.js";import y from"../../../components/loader/dist/Loader/Loader.js";import h from"../../../components/tooltip/dist/Tooltip/Tooltip.js";import T from"../../../components/clickable/dist/Clickable/Clickable.js";import g from"../../../components/icon/dist/Icon/Icon.js";import N from"../../../components/typography/dist/Text/Text.js";import{useMergeRef as I}from"../../../shared/dist/hooks/useMergeRef.js";import{NOOP as j}from"../../../shared/dist/utils/function-utils.js";var F=n((function(n,F){var L=n.className,k=void 0===L?"":L,D=n.placeholder,H=void 0===D?"":D,w=n.autoComplete,A=void 0===w?"off":w,_=n.value,q=n.onChange,R=void 0===q?j:q,W=n.onBlur,B=void 0===W?j:W,O=n.onFocus,S=void 0===O?j:O,z=n.onKeyDown,K=void 0===z?j:z,M=n.onWheel,V=void 0===M?j:M,X=n.debounceRate,P=void 0===X?0:X,U=n.autoFocus,Y=void 0!==U&&U,G=n.disabled,J=void 0!==G&&G,Q=n.readonly,Z=void 0!==Q&&Q,$=n.setRef,ee=void 0===$?j:$,te=n.icon,oe=n.secondaryIconName,ae=n.id,ne=void 0===ae?"input":ae,re=n.title,ie=void 0===re?"":re,le=n.size,ce=void 0===le?"small":le,se=n.validation,de=void 0===se?null:se,me=n.wrapperClassName,ue=void 0===me?"":me,pe=n.onIconClick,ve=void 0===pe?j:pe,fe=n.clearOnIconClick,be=void 0!==fe&&fe,Ce=n.labelIconName,xe=n.showCharCount,Ee=void 0!==xe&&xe,ye=n.inputAriaLabel,he=n.searchResultsContainerId,Te=void 0===he?"":he,ge=n.activeDescendant,Ne=void 0===ge?"":ge,Ie=n.iconLabel,je=n.secondaryIconLabel,Fe=n.type,Le=void 0===Fe?"text":Fe,ke=n.maxLength,De=void 0===ke?null:ke,He=n.allowExceedingMaxLength,we=void 0!==He&&He,Ae=n.trim,_e=void 0!==Ae&&Ae,qe=n.role,Re=void 0===qe?"":qe,We=n.required,Be=void 0!==We&&We,Oe=n.requiredErrorText,Se=void 0===Oe?"":Oe,ze=n.loading,Ke=void 0!==ze&&ze,Me=n["data-testid"],Ve=n.secondaryDataTestId,Xe=n.tabIndex,Pe=n.underline,Ue=void 0!==Pe&&Pe,Ye=n.name,Ge=n.controlled,Je=void 0!==Ge&&Ge,Qe=n.iconTooltipContent,Ze=n.secondaryTooltipContent,$e=n.dir,et=r(!1),tt=e(et,2),ot=tt[0],at=tt[1],nt=i(null),rt=I(F,nt,ee),it=l((function(e){Be&&!e.target.value&&at(!0),B(e)}),[B,Be]),lt=l((function(e,t){ot&&e&&at(!1),R(e,t||{target:nt.current})}),[R,ot]),ct=d({delay:P,onChange:lt,initialStateValue:_,trim:_e}),st=ct.inputValue,dt=ct.onEventChanged,mt=ct.clearValue,ut=c((function(){return Je?_:st}),[Je,_,st]),pt=l((function(e){Je?lt(e.target.value,e):dt(e)}),[Je,lt,dt]),vt=c((function(){return oe&&ut?oe:te}),[te,oe,ut]),ft=l((function(){J||(be&&(nt.current&&nt.current.focus(),nt.current.value="",Je?lt(""):mt()),ve(vt))}),[J,be,ve,vt,Je,lt,mt]),bt=c((function(){return"number"==typeof De&&ut&&ut.length>De?u.error:de&&de.status||ot?u[ot?"error":de.status]:""}),[De,de,ot,ut]),Ct=te||oe,xt=Ee||de&&de.text||ot&&Se,Et=oe===vt,yt=te===vt,ht=(ve!==j||Ie||Qe)&&ut&&te.length&&yt,Tt=(oe||Ze)&&Et&&!!ut,gt=we?"".concat(ne,"-allow-exceeding-max-length-text"):void 0;s((function(){if((null==nt?void 0:nt.current)&&Y){var e=requestAnimationFrame((function(){return nt.current.focus()}));return function(){return cancelAnimationFrame(e)}}}),[nt,Y]);var Nt=ve!==j||be,It=Ie||Qe,jt=je||Ze;return a.createElement("div",{className:o(x.textField,ue,t(t({},x.disabled,J),x.onlyUnderline,Ue)),role:Re,"aria-busy":Ke},a.createElement("div",{className:o(x.labelWrapper)},a.createElement(m,{labelText:ie,icon:Ce,labelFor:ne,required:Be}),a.createElement("div",{className:o(x.inputWrapper,p[ce],bt)},a.createElement("input",{className:o(k,x.input,t(t({},x.inputHasIcon,!!Ct),x.readOnly,Z)),placeholder:H,autoComplete:A,value:ut,onChange:pt,disabled:J,readOnly:Z,ref:rt,type:Le,id:ne,"data-testid":Me||f(C.TEXT_FIELD,ne),"data-vibe":b.TEXT_FIELD,name:Ye,onBlur:it,onFocus:S,onKeyDown:K,onWheel:V,maxLength:"number"!=typeof De||we?void 0:De,role:Te&&"combobox","aria-label":ye||H,"aria-invalid":de&&"error"===de.status||ot,"aria-owns":Te,"aria-activedescendant":Ne,"aria-required":Be,"aria-describedby":gt,required:Be,tabIndex:Xe,dir:$e}),Ke&&a.createElement("div",{className:o(x.loaderContainer,t({},x.loaderContainerHasIcon,Ct))},a.createElement("div",{className:o(x.loader)},a.createElement(y,{className:o(x.loaderSvg)}))),te&&a.createElement(h,{content:yt?Qe:void 0,referenceWrapperClassName:x.tooltipContainer},a.createElement(T,{className:o(x.iconContainer,t(t(t({},x.iconContainerHasIcon,Ct),x.iconContainerActive,yt),x.iconContainerClickable,Nt)),onClick:ft,tabIndex:ht?0:-1,"aria-label":It},a.createElement(g,{icon:te,className:o(x.icon),type:"font",size:"small"===ce?"16px":"18px"}))),oe&&a.createElement(h,{content:Et?Ze:void 0,addKeyboardHideShowTriggersByDefault:!0,referenceWrapperClassName:x.tooltipContainer},a.createElement(T,{className:o(x.iconContainer,t(t(t({},x.iconContainerHasIcon,Ct),x.iconContainerActive,Et),x.iconContainerClickable,Nt)),onClick:ft,tabIndex:Tt?0:-1,"data-testid":Ve||f(C.TEXT_FIELD_SECONDARY_BUTTON,ne),"aria-label":jt},a.createElement(g,{icon:oe,className:o(x.icon),type:"font",size:"small"===ce?"16px":"18px"})))),xt&&a.createElement(N,{type:"text2",color:"secondary",className:o(x.subTextContainer)},(de&&de.text||ot&&Se)&&a.createElement("span",{className:o(x.subTextContainerStatus)},ot?Se:de.text),Ee&&a.createElement("span",{className:o(x.counter),"aria-label":v.CHAR},ut&&ut.length||0,"number"==typeof De&&"/".concat(De),a.createElement(E,{id:gt,text:"Maximum of ".concat(De," characters")})))))}));export{F as default};
 //# sourceMappingURL=TextField.js.map