npm - @razorpay/blade - Versions diffs - 11.31.2 → 11.33.0 - Mend

@razorpay/blade 11.31.2 → 11.33.0

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 (84) hide show

package/build/lib/web/production/components/Table/TableContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TableContext.js","sources":["../../../../../../src/components/Table/TableContext.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-empty-function */\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nimport React from 'react';\nimport type { TableNode } from '@table-library/react-table-library/table';\nimport type {\n TableBackgroundColors,\n TableProps,\n TablePaginationType,\n TableHeaderRowProps,\n} from './types';\n\nexport type TableContextType = {\n selectionType?: TableProps<unknown>['selectionType'];\n selectedRows?: TableNode['id'][];\n totalItems: number;\n toggleRowSelectionById: (id: TableNode['id']) => void;\n toggleAllRowsSelection: () => void;\n deselectAllRows: () => void;\n rowDensity: NonNullable<TableProps<unknown>['rowDensity']>;\n toggleSort: (sortKey: string) => void;\n currentSortedState: {\n sortKey: string;\n isSortReversed: boolean;\n sortableColumns?: string[];\n };\n setPaginationPage: (page: number) => void;\n setPaginationRowSize: (size: number) => void;\n currentPaginationState?: {\n page: number;\n size: number;\n };\n showStripedRows?: boolean;\n disabledRows: TableNode['id'][];\n setDisabledRows: React.Dispatch<React.SetStateAction<TableNode['id'][]>>;\n paginationType: NonNullable<TablePaginationType>;\n setPaginationType: React.Dispatch<React.SetStateAction<NonNullable<TablePaginationType>>>;\n backgroundColor: TableBackgroundColors;\n headerRowDensity?: TableHeaderRowProps['rowDensity'];\n setHeaderRowDensity: React.Dispatch<React.SetStateAction<TableHeaderRowProps['rowDensity']>>;\n showBorderedCells: NonNullable<TableProps<unknown>['showBorderedCells']>;\n};\n\nconst TableContext = React.createContext<TableContextType>({\n selectionType: 'none',\n selectedRows: undefined,\n totalItems: 0,\n toggleRowSelectionById: () => {},\n toggleAllRowsSelection: () => {},\n deselectAllRows: () => {},\n rowDensity: 'normal',\n toggleSort: () => {},\n currentSortedState: {\n sortKey: '',\n isSortReversed: false,\n },\n setPaginationPage: () => {},\n setPaginationRowSize: () => {},\n disabledRows: [],\n setDisabledRows: () => {},\n paginationType: 'client',\n setPaginationType: () => {},\n backgroundColor: 'surface.background.gray.intense',\n setHeaderRowDensity: () => {},\n showBorderedCells: false,\n});\n\nconst useTableContext = (): TableContextType => {\n const context = React.useContext(TableContext);\n return context;\n};\n\nexport { useTableContext, TableContext };\n"],"names":["TableContext","React","createContext","selectionType","selectedRows","undefined","totalItems","toggleRowSelectionById","toggleAllRowsSelection","deselectAllRows","rowDensity","toggleSort","currentSortedState","sortKey","isSortReversed","setPaginationPage","setPaginationRowSize","disabledRows","setDisabledRows","paginationType","setPaginationType","backgroundColor","setHeaderRowDensity","showBorderedCells","useTableContext","context","useContext"],"mappings":";;AAAA;AACA;~~AAyCA~~,IAAMA,YAAY,gBAAGC,cAAK,CAACC,aAAa,CAAmB;AACzDC,EAAAA,aAAa,EAAE,MAAM;AACrBC,EAAAA,YAAY,EAAEC,SAAS;AACvBC,EAAAA,UAAU,EAAE,CAAC;AACbC,EAAAA,sBAAsB,EAAE,SAAAA,sBAAA,GAAM,EAAE;AAChCC,EAAAA,sBAAsB,EAAE,SAAAA,sBAAA,GAAM,EAAE;AAChCC,EAAAA,eAAe,EAAE,SAAAA,eAAA,GAAM,EAAE;AACzBC,EAAAA,UAAU,EAAE,QAAQ;AACpBC,EAAAA,UAAU,EAAE,SAAAA,UAAA,GAAM,EAAE;AACpBC,EAAAA,kBAAkB,EAAE;AAClBC,IAAAA,OAAO,EAAE,EAAE;AACXC,IAAAA,cAAc,EAAE,KAAA;GACjB;AACDC,EAAAA,iBAAiB,EAAE,SAAAA,iBAAA,GAAM,EAAE;AAC3BC,EAAAA,oBAAoB,EAAE,SAAAA,oBAAA,GAAM,EAAE;AAC9BC,EAAAA,YAAY,EAAE,EAAE;AAChBC,EAAAA,eAAe,EAAE,SAAAA,eAAA,GAAM,EAAE;AACzBC,EAAAA,cAAc,EAAE,QAAQ;AACxBC,EAAAA,iBAAiB,EAAE,SAAAA,iBAAA,GAAM,EAAE;AAC3BC,EAAAA,eAAe,EAAE,iCAAiC;AAClDC,EAAAA,mBAAmB,EAAE,SAAAA,mBAAA,GAAM,EAAE;AAC7BC,EAAAA,iBAAiB,EAAE,~~KAAA~~;~~AACrB~~,CAAC,EAAC;AAEF,IAAMC,eAAe,GAAG,SAAlBA,eAAeA,GAA2B;AAC9C,EAAA,IAAMC,OAAO,~~GAAGxB~~,cAAK,~~CAACyB~~,UAAU,~~CAAC1B~~,YAAY,CAAC,CAAA;AAC9C,EAAA,~~OAAOyB~~,OAAO,CAAA;AAChB;;;;"}
1	+ {"version":3,"file":"TableContext.js","sources":["../../../../../../src/components/Table/TableContext.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-empty-function */\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nimport React from 'react';\nimport type { TableNode } from '@table-library/react-table-library/table';\nimport type {\n TableBackgroundColors,\n TableProps,\n TablePaginationType,\n TableHeaderRowProps,\n} from './types';\n\nexport type TableContextType = {\n selectionType?: TableProps<unknown>['selectionType'];\n selectedRows?: TableNode['id'][];\n totalItems: number;\n toggleRowSelectionById: (id: TableNode['id']) => void;\n toggleAllRowsSelection: () => void;\n deselectAllRows: () => void;\n rowDensity: NonNullable<TableProps<unknown>['rowDensity']>;\n toggleSort: (sortKey: string) => void;\n currentSortedState: {\n sortKey: string;\n isSortReversed: boolean;\n sortableColumns?: string[];\n };\n setPaginationPage: (page: number) => void;\n setPaginationRowSize: (size: number) => void;\n currentPaginationState?: {\n page: number;\n size: number;\n };\n showStripedRows?: boolean;\n disabledRows: TableNode['id'][];\n setDisabledRows: React.Dispatch<React.SetStateAction<TableNode['id'][]>>;\n paginationType: NonNullable<TablePaginationType>;\n setPaginationType: React.Dispatch<React.SetStateAction<NonNullable<TablePaginationType>>>;\n backgroundColor: TableBackgroundColors;\n headerRowDensity?: TableHeaderRowProps['rowDensity'];\n setHeaderRowDensity: React.Dispatch<React.SetStateAction<TableHeaderRowProps['rowDensity']>>;\n showBorderedCells: NonNullable<TableProps<unknown>['showBorderedCells']>;\n hasHoverActions: boolean;\n setHasHoverActions: (hasHoverActions: boolean) => void;\n};\n\nconst TableContext = React.createContext<TableContextType>({\n selectionType: 'none',\n selectedRows: undefined,\n totalItems: 0,\n toggleRowSelectionById: () => {},\n toggleAllRowsSelection: () => {},\n deselectAllRows: () => {},\n rowDensity: 'normal',\n toggleSort: () => {},\n currentSortedState: {\n sortKey: '',\n isSortReversed: false,\n },\n setPaginationPage: () => {},\n setPaginationRowSize: () => {},\n disabledRows: [],\n setDisabledRows: () => {},\n paginationType: 'client',\n setPaginationType: () => {},\n backgroundColor: 'surface.background.gray.intense',\n setHeaderRowDensity: () => {},\n showBorderedCells: false,\n hasHoverActions: false,\n setHasHoverActions: () => {},\n});\n\nconst useTableContext = (): TableContextType => {\n const context = React.useContext(TableContext);\n return context;\n};\n\nexport { useTableContext, TableContext };\n"],"names":["TableContext","React","createContext","selectionType","selectedRows","undefined","totalItems","toggleRowSelectionById","toggleAllRowsSelection","deselectAllRows","rowDensity","toggleSort","currentSortedState","sortKey","isSortReversed","setPaginationPage","setPaginationRowSize","disabledRows","setDisabledRows","paginationType","setPaginationType","backgroundColor","setHeaderRowDensity","showBorderedCells","hasHoverActions","setHasHoverActions","useTableContext","context","useContext"],"mappings":";;AAAA;AACA;AA2CA,IAAMA,YAAY,gBAAGC,cAAK,CAACC,aAAa,CAAmB;AACzDC,EAAAA,aAAa,EAAE,MAAM;AACrBC,EAAAA,YAAY,EAAEC,SAAS;AACvBC,EAAAA,UAAU,EAAE,CAAC;AACbC,EAAAA,sBAAsB,EAAE,SAAAA,sBAAA,GAAM,EAAE;AAChCC,EAAAA,sBAAsB,EAAE,SAAAA,sBAAA,GAAM,EAAE;AAChCC,EAAAA,eAAe,EAAE,SAAAA,eAAA,GAAM,EAAE;AACzBC,EAAAA,UAAU,EAAE,QAAQ;AACpBC,EAAAA,UAAU,EAAE,SAAAA,UAAA,GAAM,EAAE;AACpBC,EAAAA,kBAAkB,EAAE;AAClBC,IAAAA,OAAO,EAAE,EAAE;AACXC,IAAAA,cAAc,EAAE,KAAA;GACjB;AACDC,EAAAA,iBAAiB,EAAE,SAAAA,iBAAA,GAAM,EAAE;AAC3BC,EAAAA,oBAAoB,EAAE,SAAAA,oBAAA,GAAM,EAAE;AAC9BC,EAAAA,YAAY,EAAE,EAAE;AAChBC,EAAAA,eAAe,EAAE,SAAAA,eAAA,GAAM,EAAE;AACzBC,EAAAA,cAAc,EAAE,QAAQ;AACxBC,EAAAA,iBAAiB,EAAE,SAAAA,iBAAA,GAAM,EAAE;AAC3BC,EAAAA,eAAe,EAAE,iCAAiC;AAClDC,EAAAA,mBAAmB,EAAE,SAAAA,mBAAA,GAAM,EAAE;AAC7BC,EAAAA,iBAAiB,EAAE,KAAK;AACxBC,EAAAA,eAAe,EAAE,KAAK;AACtBC,EAAAA,kBAAkB,EAAE,SAAAA,kBAAA,GAAM,EAAC;AAC7B,CAAC,EAAC;AAEF,IAAMC,eAAe,GAAG,SAAlBA,eAAeA,GAA2B;AAC9C,EAAA,IAAMC,OAAO,GAAG1B,cAAK,CAAC2B,UAAU,CAAC5B,YAAY,CAAC,CAAA;AAC9C,EAAA,OAAO2B,OAAO,CAAA;AAChB;;;;"}

package/build/lib/web/production/components/Table/TableHeader.web.js CHANGED Viewed

@@ -112,7 +112,8 @@ var StyledHeaderCell = /*#__PURE__*/styled(HeaderCell).withConfig({
   var theme = _ref4.theme,
     $isSortable = _ref4.$isSortable,
     $backgroundColor = _ref4.$backgroundColor,
-    $rowDensity = _ref4.$rowDensity;
+    $rowDensity = _ref4.$rowDensity,
+    $hasPadding = _ref4.$hasPadding;
   return {
     '&&&': {
       height: '100%',
@@ -131,8 +132,8 @@ var StyledHeaderCell = /*#__PURE__*/styled(HeaderCell).withConfig({
         justifyContent: 'space-between',
         alignItems: 'center',
         height: '100%',
-        paddingLeft: makeSpace(getIn(theme, tableRow.paddingLeft[$rowDensity])),
-        paddingRight: makeSpace(getIn(theme, tableRow.paddingRight[$rowDensity])),
+        paddingLeft: $hasPadding ? makeSpace(getIn(theme, tableRow.paddingLeft[$rowDensity])) : undefined,
+        paddingRight: $hasPadding ? makeSpace(getIn(theme, tableRow.paddingRight[$rowDensity])) : undefined,
         minHeight: makeSize(getIn(size, tableRow.minHeight[$rowDensity]))
       },
       '&:focus-visible': getFocusRingStyles({
@@ -145,7 +146,9 @@ var StyledHeaderCell = /*#__PURE__*/styled(HeaderCell).withConfig({
 var _TableHeaderCell = function _TableHeaderCell(_ref5) {
   var _currentSortedState$s;
   var children = _ref5.children,
-    headerKey = _ref5.headerKey;
+    headerKey = _ref5.headerKey,
+    _ref5$_hasPadding = _ref5._hasPadding,
+    _hasPadding = _ref5$_hasPadding === void 0 ? true : _ref5$_hasPadding;
   var _useTableContext = useTableContext(),
     toggleSort = _useTableContext.toggleSort,
     currentSortedState = _useTableContext.currentSortedState,
@@ -161,6 +164,7 @@ var _TableHeaderCell = function _TableHeaderCell(_ref5) {
     $isSortable: isSortable,
     $backgroundColor: backgroundColor,
     $rowDensity: headerRowDensity !== null && headerRowDensity !== void 0 ? headerRowDensity : rowDensity,
+    $hasPadding: _hasPadding,
     onClick: function onClick() {
       if (isSortable) {
         toggleSort(headerKey);
@@ -235,7 +239,8 @@ var _TableHeaderRow = function _TableHeaderRow(_ref8) {
     totalItems = _useTableContext2.totalItems,
     toggleAllRowsSelection = _useTableContext2.toggleAllRowsSelection,
     setHeaderRowDensity = _useTableContext2.setHeaderRowDensity,
-    showBorderedCells = _useTableContext2.showBorderedCells;
+    showBorderedCells = _useTableContext2.showBorderedCells,
+    hasHoverActions = _useTableContext2.hasHoverActions;
   var isMultiSelect = selectionType === 'multiple';
   var isAllSelected = selectedRows && selectedRows.length === totalItems;
   var isIndeterminate = selectedRows && selectedRows.length > 0 && !isAllSelected;
@@ -256,7 +261,10 @@ var _TableHeaderRow = function _TableHeaderRow(_ref8) {
       onChange: function onChange() {
         return toggleAllRowsSelection();
       }
-    }), children]
+    }), children, hasHoverActions ? /*#__PURE__*/jsx(TableHeaderCell, {
+      _hasPadding: false,
+      children: "Actions"
+    }) : null]
   }));
 };
 var TableHeaderRow = /*#__PURE__*/assignWithoutSideEffects(_TableHeaderRow, {

package/build/lib/web/production/components/Table/TableHeader.web.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TableHeader.web.js","sources":["../../../../../../src/components/Table/TableHeader.web.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { Header, HeaderRow, HeaderCell } from '@table-library/react-table-library/table';\nimport { tableHeader, tableRow } from './tokens';\nimport { useTableContext } from './TableContext';\nimport { ComponentIds } from './componentIds';\nimport type {\n TableHeaderRowProps,\n TableHeaderCellProps,\n TableBackgroundColors,\n TableProps,\n} from './types';\nimport type { CheckboxProps } from '~components/Checkbox';\nimport { Checkbox } from '~components/Checkbox';\nimport { Text } from '~components/Typography';\nimport { castWebType, makeMotionTime, makeSize, makeSpace } from '~utils';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport BaseBox from '~components/Box/BaseBox';\nimport { MetaConstants, metaAttribute } from '~utils/metaAttribute';\nimport { useTheme } from '~components/BladeProvider';\nimport getIn from '~utils/lodashButBetter/get';\nimport { getFocusRingStyles } from '~utils/getFocusRingStyles';\nimport { size } from '~tokens/global';\n\nconst SortButton = styled.button(({ theme }) => ({\n cursor: 'pointer',\n border: 'none',\n padding: 0,\n margin: 0,\n borderRadius: theme.border.radius.small,\n background: 'transparent',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n transitionProperty: 'color, box-shadow',\n transitionDuration: castWebType(makeMotionTime(getIn(theme.motion, 'duration.quick'))),\n transitionTimingFunction: (theme.motion.easing.standard as unknown) as string,\n '&:focus-visible': getFocusRingStyles({ theme }),\n}));\n\nconst SortIcon = ({\n isSorted,\n isSortReversed,\n}: {\n isSorted: boolean;\n isSortReversed: boolean;\n}): React.ReactElement => {\n const { theme } = useTheme();\n const defaultColor = getIn(theme.colors, 'interactive.icon.gray.muted');\n const activeColor = getIn(theme.colors, 'interactive.icon.primary.subtle');\n const upArrowColor = isSorted && isSortReversed ? activeColor : defaultColor;\n const downArrowColor = isSorted && !isSortReversed ? activeColor : defaultColor;\n return (\n <SortButton {...makeAccessible({ label: 'Toggle Sort', role: 'button' })}>\n <svg width={20} height={20} fill=\"none\">\n <path\n fill={upArrowColor}\n d=\"M10.59 2.251a.817.817 0 0 0-1.18 0L5.245 6.537a.875.875 0 0 0 0 1.212.817.817 0 0 0 1.179 0L10 4.069l3.577 3.68a.817.817 0 0 0 1.179 0 .874.874 0 0 0 0-1.212L10.589 2.25Z\"\n />\n <path\n fill={downArrowColor}\n d=\"M9.41 17.749a.817.817 0 0 0 1.18 0l4.166-4.286a.874.874 0 0 0 0-1.212.817.817 0 0 0-1.179 0L10 15.931l-3.577-3.68a.817.817 0 0 0-1.179 0 .874.874 0 0 0 0 1.212l4.167 4.286Z\"\n />\n </svg>\n </SortButton>\n );\n};\n\nconst StyledHeader = styled(Header)({\n '&&&': {\n '& tr:first-child th': {\n borderTop: 'none',\n },\n },\n});\n\nconst _TableHeader = ({ children }: TableHeaderRowProps): React.ReactElement => {\n return (\n <StyledHeader {...metaAttribute({ name: MetaConstants.TableHeader })}>{children}</StyledHeader>\n );\n};\n\nconst TableHeader = assignWithoutSideEffects(_TableHeader, {\n componentId: ComponentIds.TableHeader,\n});\n\nconst StyledHeaderCell = styled(HeaderCell)<{\n $isSortable: boolean;\n $backgroundColor: TableBackgroundColors;\n $rowDensity: NonNullable<TableProps<unknown>['rowDensity']>;\n}>(({ theme, $isSortable, $backgroundColor, $rowDensity }) => ({\n '&&&': {\n height: '100%',\n backgroundColor: getIn(theme.colors, $backgroundColor),\n borderBottomWidth: makeSpace(getIn(theme.border.width, tableHeader.borderBottomAndTopWidth)),\n borderTopWidth: makeSpace(getIn(theme.border.width, tableHeader.borderBottomAndTopWidth)),\n borderBottomColor: getIn(theme.colors, tableHeader.borderBottomAndTopColor),\n borderTopColor: getIn(theme.colors, tableHeader.borderBottomAndTopColor),\n borderBottomStyle: 'solid',\n borderTopStyle: 'solid',\n cursor: $isSortable ? 'pointer' : 'auto',\n '> div': {\n backgroundColor: getIn(theme.colors, tableHeader.backgroundColor),\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'space-between',\n alignItems: 'center',\n height: '100%',\n paddingLeft: makeSpace(getIn(theme, tableRow.paddingLeft[$rowDensity])),\n paddingRight: makeSpace(getIn(theme, tableRow.paddingRight[$rowDensity])),\n minHeight: makeSize(getIn(size, tableRow.minHeight[$rowDensity])),\n },\n '&:focus-visible': getFocusRingStyles({ theme, negativeOffset: true }),\n },\n}));\n\nconst _TableHeaderCell = ({ children, headerKey }: TableHeaderCellProps): React.ReactElement => {\n const {\n toggleSort,\n currentSortedState,\n backgroundColor,\n rowDensity,\n headerRowDensity,\n } = useTableContext();\n const isChildrenString = typeof children === 'string';\n const isSortable =\n headerKey && Boolean(currentSortedState.sortableColumns?.find((key) => key === headerKey));\n return (\n <StyledHeaderCell\n tabIndex={0}\n $isSortable={isSortable}\n $backgroundColor={backgroundColor}\n $rowDensity={headerRowDensity ?? rowDensity}\n onClick={() => {\n if (isSortable) {\n toggleSort(headerKey);\n }\n }}\n {...metaAttribute({ name: MetaConstants.TableHeaderCell })}\n >\n {isChildrenString ? (\n <Text size=\"medium\" weight=\"medium\" color=\"surface.text.gray.normal\">\n {children}\n </Text>\n ) : (\n children\n )}\n {isSortable && (\n <BaseBox paddingLeft=\"spacing.2\" backgroundColor=\"transparent\">\n <SortIcon\n isSorted={currentSortedState.sortKey === headerKey}\n isSortReversed={currentSortedState.isSortReversed}\n />\n </BaseBox>\n )}\n </StyledHeaderCell>\n );\n};\n\nconst TableHeaderCell = assignWithoutSideEffects(_TableHeaderCell, {\n componentId: ComponentIds.TableHeaderCell,\n});\n\nconst TableHeaderCellCheckbox = ({\n isChecked,\n isDisabled,\n isIndeterminate,\n onChange,\n}: {\n isChecked: CheckboxProps['isChecked'];\n isDisabled: CheckboxProps['isDisabled'];\n isIndeterminate?: CheckboxProps['isIndeterminate'];\n onChange: CheckboxProps['onChange'];\n}): React.ReactElement => {\n return (\n <TableHeaderCell headerKey=\"SELECT\">\n <BaseBox display=\"flex\" alignItems=\"center\" justifyContent=\"center\" flex={1}>\n <Checkbox\n isChecked={isChecked}\n isDisabled={isDisabled}\n isIndeterminate={isIndeterminate}\n onChange={onChange}\n />\n </BaseBox>\n </TableHeaderCell>\n );\n};\n\nconst StyledHeaderRow = styled(HeaderRow)<{ $showBorderedCells: boolean }>(\n ({ theme, $showBorderedCells }) => ({\n '& th': $showBorderedCells\n ? {\n borderRightWidth: makeSpace(getIn(theme.border.width, tableRow.borderBottomWidth)),\n borderRightColor: getIn(theme.colors, tableRow.borderColor),\n borderRightStyle: 'solid',\n }\n : undefined,\n '& th:last-child ': {\n borderRight: 'none',\n },\n }),\n);\n\nconst _TableHeaderRow = ({ children, rowDensity }: TableHeaderRowProps): React.ReactElement => {\n const {\n disabledRows,\n selectionType,\n selectedRows,\n totalItems,\n toggleAllRowsSelection,\n setHeaderRowDensity,\n showBorderedCells,\n } = useTableContext();\n const isMultiSelect = selectionType === 'multiple';\n const isAllSelected = selectedRows && selectedRows.length === totalItems;\n const isIndeterminate = selectedRows && selectedRows.length > 0 && !isAllSelected;\n const isDisabled = disabledRows && disabledRows.length === totalItems;\n if (rowDensity) {\n setHeaderRowDensity(rowDensity);\n }\n return (\n <StyledHeaderRow\n role=\"rowheader\"\n {...metaAttribute({ name: MetaConstants.TableHeaderRow })}\n $showBorderedCells={showBorderedCells}\n >\n {isMultiSelect && (\n <TableHeaderCellCheckbox\n isChecked={isAllSelected}\n isDisabled={isDisabled}\n isIndeterminate={isIndeterminate}\n onChange={() => toggleAllRowsSelection()}\n />\n )}\n {children}\n </StyledHeaderRow>\n );\n};\n\nconst TableHeaderRow = assignWithoutSideEffects(_TableHeaderRow, {\n componentId: ComponentIds.TableHeaderRow,\n});\n\nexport { TableHeader, TableHeaderRow, TableHeaderCell };\n"],"names":["SortButton","styled","button","withConfig","displayName","componentId","_ref","theme","cursor","border","padding","margin","borderRadius","radius","small","background","display","alignItems","justifyContent","transitionProperty","transitionDuration","castWebType","makeMotionTime","getIn","motion","transitionTimingFunction","easing","standard","getFocusRingStyles","SortIcon","_ref2","isSorted","isSortReversed","_useTheme","useTheme","defaultColor","colors","activeColor","upArrowColor","downArrowColor","_jsx","_objectSpread","makeAccessible","label","role","children","_jsxs","width","height","fill","d","StyledHeader","Header","borderTop","_TableHeader","_ref3","metaAttribute","name","MetaConstants","TableHeader","assignWithoutSideEffects","ComponentIds","StyledHeaderCell","HeaderCell","_ref4","$isSortable","$backgroundColor","$rowDensity","backgroundColor","borderBottomWidth","makeSpace","tableHeader","borderBottomAndTopWidth","borderTopWidth","borderBottomColor","borderBottomAndTopColor","borderTopColor","borderBottomStyle","borderTopStyle","flexDirection","paddingLeft","tableRow","paddingRight","minHeight","makeSize","size","negativeOffset","_TableHeaderCell","_ref5","_currentSortedState$s","headerKey","_useTableContext","useTableContext","toggleSort","currentSortedState","rowDensity","headerRowDensity","isChildrenString","isSortable","Boolean","sortableColumns","find","key","tabIndex","onClick","TableHeaderCell","Text","weight","color","BaseBox","sortKey","TableHeaderCellCheckbox","_ref6","isChecked","isDisabled","isIndeterminate","onChange","flex","Checkbox","StyledHeaderRow","HeaderRow","_ref7","$showBorderedCells","borderRightWidth","borderRightColor","borderColor","borderRightStyle","undefined","borderRight","_TableHeaderRow","_ref8","_useTableContext2","disabledRows","selectionType","selectedRows","totalItems","toggleAllRowsSelection","setHeaderRowDensity","showBorderedCells","isMultiSelect","isAllSelected","length","TableHeaderRow"],"mappings":"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"}
1	+ {"version":3,"file":"TableHeader.web.js","sources":["../../../../../../src/components/Table/TableHeader.web.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { Header, HeaderRow, HeaderCell } from '@table-library/react-table-library/table';\nimport { tableHeader, tableRow } from './tokens';\nimport { useTableContext } from './TableContext';\nimport { ComponentIds } from './componentIds';\nimport type {\n TableHeaderRowProps,\n TableHeaderCellProps,\n TableBackgroundColors,\n TableProps,\n} from './types';\nimport type { CheckboxProps } from '~components/Checkbox';\nimport { Checkbox } from '~components/Checkbox';\nimport { Text } from '~components/Typography';\nimport { castWebType, makeMotionTime, makeSize, makeSpace } from '~utils';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport BaseBox from '~components/Box/BaseBox';\nimport { MetaConstants, metaAttribute } from '~utils/metaAttribute';\nimport { useTheme } from '~components/BladeProvider';\nimport getIn from '~utils/lodashButBetter/get';\nimport { getFocusRingStyles } from '~utils/getFocusRingStyles';\nimport { size } from '~tokens/global';\n\nconst SortButton = styled.button(({ theme }) => ({\n cursor: 'pointer',\n border: 'none',\n padding: 0,\n margin: 0,\n borderRadius: theme.border.radius.small,\n background: 'transparent',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n transitionProperty: 'color, box-shadow',\n transitionDuration: castWebType(makeMotionTime(getIn(theme.motion, 'duration.quick'))),\n transitionTimingFunction: (theme.motion.easing.standard as unknown) as string,\n '&:focus-visible': getFocusRingStyles({ theme }),\n}));\n\nconst SortIcon = ({\n isSorted,\n isSortReversed,\n}: {\n isSorted: boolean;\n isSortReversed: boolean;\n}): React.ReactElement => {\n const { theme } = useTheme();\n const defaultColor = getIn(theme.colors, 'interactive.icon.gray.muted');\n const activeColor = getIn(theme.colors, 'interactive.icon.primary.subtle');\n const upArrowColor = isSorted && isSortReversed ? activeColor : defaultColor;\n const downArrowColor = isSorted && !isSortReversed ? activeColor : defaultColor;\n return (\n <SortButton {...makeAccessible({ label: 'Toggle Sort', role: 'button' })}>\n <svg width={20} height={20} fill=\"none\">\n <path\n fill={upArrowColor}\n d=\"M10.59 2.251a.817.817 0 0 0-1.18 0L5.245 6.537a.875.875 0 0 0 0 1.212.817.817 0 0 0 1.179 0L10 4.069l3.577 3.68a.817.817 0 0 0 1.179 0 .874.874 0 0 0 0-1.212L10.589 2.25Z\"\n />\n <path\n fill={downArrowColor}\n d=\"M9.41 17.749a.817.817 0 0 0 1.18 0l4.166-4.286a.874.874 0 0 0 0-1.212.817.817 0 0 0-1.179 0L10 15.931l-3.577-3.68a.817.817 0 0 0-1.179 0 .874.874 0 0 0 0 1.212l4.167 4.286Z\"\n />\n </svg>\n </SortButton>\n );\n};\n\nconst StyledHeader = styled(Header)({\n '&&&': {\n '& tr:first-child th': {\n borderTop: 'none',\n },\n },\n});\n\nconst _TableHeader = ({ children }: TableHeaderRowProps): React.ReactElement => {\n return (\n <StyledHeader {...metaAttribute({ name: MetaConstants.TableHeader })}>{children}</StyledHeader>\n );\n};\n\nconst TableHeader = assignWithoutSideEffects(_TableHeader, {\n componentId: ComponentIds.TableHeader,\n});\n\nconst StyledHeaderCell = styled(HeaderCell)<{\n $isSortable: boolean;\n $backgroundColor: TableBackgroundColors;\n $rowDensity: NonNullable<TableProps<unknown>['rowDensity']>;\n $hasPadding: boolean;\n}>(({ theme, $isSortable, $backgroundColor, $rowDensity, $hasPadding }) => ({\n '&&&': {\n height: '100%',\n backgroundColor: getIn(theme.colors, $backgroundColor),\n borderBottomWidth: makeSpace(getIn(theme.border.width, tableHeader.borderBottomAndTopWidth)),\n borderTopWidth: makeSpace(getIn(theme.border.width, tableHeader.borderBottomAndTopWidth)),\n borderBottomColor: getIn(theme.colors, tableHeader.borderBottomAndTopColor),\n borderTopColor: getIn(theme.colors, tableHeader.borderBottomAndTopColor),\n borderBottomStyle: 'solid',\n borderTopStyle: 'solid',\n cursor: $isSortable ? 'pointer' : 'auto',\n '> div': {\n backgroundColor: getIn(theme.colors, tableHeader.backgroundColor),\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'space-between',\n alignItems: 'center',\n height: '100%',\n paddingLeft: $hasPadding\n ? makeSpace(getIn(theme, tableRow.paddingLeft[$rowDensity]))\n : undefined,\n paddingRight: $hasPadding\n ? makeSpace(getIn(theme, tableRow.paddingRight[$rowDensity]))\n : undefined,\n minHeight: makeSize(getIn(size, tableRow.minHeight[$rowDensity])),\n },\n '&:focus-visible': getFocusRingStyles({ theme, negativeOffset: true }),\n },\n}));\n\nconst _TableHeaderCell = ({\n children,\n headerKey,\n _hasPadding = true,\n}: TableHeaderCellProps): React.ReactElement => {\n const {\n toggleSort,\n currentSortedState,\n backgroundColor,\n rowDensity,\n headerRowDensity,\n } = useTableContext();\n const isChildrenString = typeof children === 'string';\n const isSortable =\n headerKey && Boolean(currentSortedState.sortableColumns?.find((key) => key === headerKey));\n return (\n <StyledHeaderCell\n tabIndex={0}\n $isSortable={isSortable}\n $backgroundColor={backgroundColor}\n $rowDensity={headerRowDensity ?? rowDensity}\n $hasPadding={_hasPadding}\n onClick={() => {\n if (isSortable) {\n toggleSort(headerKey);\n }\n }}\n {...metaAttribute({ name: MetaConstants.TableHeaderCell })}\n >\n {isChildrenString ? (\n <Text size=\"medium\" weight=\"medium\" color=\"surface.text.gray.normal\">\n {children}\n </Text>\n ) : (\n children\n )}\n {isSortable && (\n <BaseBox paddingLeft=\"spacing.2\" backgroundColor=\"transparent\">\n <SortIcon\n isSorted={currentSortedState.sortKey === headerKey}\n isSortReversed={currentSortedState.isSortReversed}\n />\n </BaseBox>\n )}\n </StyledHeaderCell>\n );\n};\n\nconst TableHeaderCell = assignWithoutSideEffects(_TableHeaderCell, {\n componentId: ComponentIds.TableHeaderCell,\n});\n\nconst TableHeaderCellCheckbox = ({\n isChecked,\n isDisabled,\n isIndeterminate,\n onChange,\n}: {\n isChecked: CheckboxProps['isChecked'];\n isDisabled: CheckboxProps['isDisabled'];\n isIndeterminate?: CheckboxProps['isIndeterminate'];\n onChange: CheckboxProps['onChange'];\n}): React.ReactElement => {\n return (\n <TableHeaderCell headerKey=\"SELECT\">\n <BaseBox display=\"flex\" alignItems=\"center\" justifyContent=\"center\" flex={1}>\n <Checkbox\n isChecked={isChecked}\n isDisabled={isDisabled}\n isIndeterminate={isIndeterminate}\n onChange={onChange}\n />\n </BaseBox>\n </TableHeaderCell>\n );\n};\n\nconst StyledHeaderRow = styled(HeaderRow)<{ $showBorderedCells: boolean }>(\n ({ theme, $showBorderedCells }) => ({\n '& th': $showBorderedCells\n ? {\n borderRightWidth: makeSpace(getIn(theme.border.width, tableRow.borderBottomWidth)),\n borderRightColor: getIn(theme.colors, tableRow.borderColor),\n borderRightStyle: 'solid',\n }\n : undefined,\n '& th:last-child ': {\n borderRight: 'none',\n },\n }),\n);\n\nconst _TableHeaderRow = ({ children, rowDensity }: TableHeaderRowProps): React.ReactElement => {\n const {\n disabledRows,\n selectionType,\n selectedRows,\n totalItems,\n toggleAllRowsSelection,\n setHeaderRowDensity,\n showBorderedCells,\n hasHoverActions,\n } = useTableContext();\n const isMultiSelect = selectionType === 'multiple';\n const isAllSelected = selectedRows && selectedRows.length === totalItems;\n const isIndeterminate = selectedRows && selectedRows.length > 0 && !isAllSelected;\n const isDisabled = disabledRows && disabledRows.length === totalItems;\n if (rowDensity) {\n setHeaderRowDensity(rowDensity);\n }\n return (\n <StyledHeaderRow\n role=\"rowheader\"\n {...metaAttribute({ name: MetaConstants.TableHeaderRow })}\n $showBorderedCells={showBorderedCells}\n >\n {isMultiSelect && (\n <TableHeaderCellCheckbox\n isChecked={isAllSelected}\n isDisabled={isDisabled}\n isIndeterminate={isIndeterminate}\n onChange={() => toggleAllRowsSelection()}\n />\n )}\n {children}\n {hasHoverActions ? <TableHeaderCell _hasPadding={false}>Actions</TableHeaderCell> : null}\n </StyledHeaderRow>\n );\n};\n\nconst TableHeaderRow = assignWithoutSideEffects(_TableHeaderRow, {\n componentId: ComponentIds.TableHeaderRow,\n});\n\nexport { TableHeader, TableHeaderRow, TableHeaderCell };\n"],"names":["SortButton","styled","button","withConfig","displayName","componentId","_ref","theme","cursor","border","padding","margin","borderRadius","radius","small","background","display","alignItems","justifyContent","transitionProperty","transitionDuration","castWebType","makeMotionTime","getIn","motion","transitionTimingFunction","easing","standard","getFocusRingStyles","SortIcon","_ref2","isSorted","isSortReversed","_useTheme","useTheme","defaultColor","colors","activeColor","upArrowColor","downArrowColor","_jsx","_objectSpread","makeAccessible","label","role","children","_jsxs","width","height","fill","d","StyledHeader","Header","borderTop","_TableHeader","_ref3","metaAttribute","name","MetaConstants","TableHeader","assignWithoutSideEffects","ComponentIds","StyledHeaderCell","HeaderCell","_ref4","$isSortable","$backgroundColor","$rowDensity","$hasPadding","backgroundColor","borderBottomWidth","makeSpace","tableHeader","borderBottomAndTopWidth","borderTopWidth","borderBottomColor","borderBottomAndTopColor","borderTopColor","borderBottomStyle","borderTopStyle","flexDirection","paddingLeft","tableRow","undefined","paddingRight","minHeight","makeSize","size","negativeOffset","_TableHeaderCell","_ref5","_currentSortedState$s","headerKey","_ref5$_hasPadding","_hasPadding","_useTableContext","useTableContext","toggleSort","currentSortedState","rowDensity","headerRowDensity","isChildrenString","isSortable","Boolean","sortableColumns","find","key","tabIndex","onClick","TableHeaderCell","Text","weight","color","BaseBox","sortKey","TableHeaderCellCheckbox","_ref6","isChecked","isDisabled","isIndeterminate","onChange","flex","Checkbox","StyledHeaderRow","HeaderRow","_ref7","$showBorderedCells","borderRightWidth","borderRightColor","borderColor","borderRightStyle","borderRight","_TableHeaderRow","_ref8","_useTableContext2","disabledRows","selectionType","selectedRows","totalItems","toggleAllRowsSelection","setHeaderRowDensity","showBorderedCells","hasHoverActions","isMultiSelect","isAllSelected","length","TableHeaderRow"],"mappings":"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"}

package/build/lib/web/production/components/Table/tokens.js CHANGED Viewed

@@ -129,6 +129,11 @@ var rowDensityToIsTableInputCellMapping = {
   normal: true,
   compact: true
 };
+var classes = {
+  HOVER_ACTIONS: 'hover-actions',
+  HOVER_ACTIONS_LAYER2: 'hover-actions-layer-2',
+  HOVER_ACTIONS_LAYER3: 'hover-actions-layer-3'
+};
-export { checkboxCellWidth, firstColumnStickyZIndex, refreshWrapperZIndex, rowDensityToIsTableInputCellMapping, tableBackgroundColor, tableEditableCellRowDensityToInputSizeMap, tableFooter, tableHeader, tablePagination, tableRow, tableToolbar, validationStateToInputTrailingIconMap };
+export { checkboxCellWidth, classes, firstColumnStickyZIndex, refreshWrapperZIndex, rowDensityToIsTableInputCellMapping, tableBackgroundColor, tableEditableCellRowDensityToInputSizeMap, tableFooter, tableHeader, tablePagination, tableRow, tableToolbar, validationStateToInputTrailingIconMap };
 //# sourceMappingURL=tokens.js.map

package/build/lib/web/production/components/Table/tokens.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tokens.js","sources":["../../../../../../src/components/Table/tokens.ts"],"sourcesContent":["import { AlertCircleIcon, CheckIcon } from '~components/Icons';\nimport { size } from '~tokens/global';\n\nconst firstColumnStickyZIndex = 2;\n\nconst refreshWrapperZIndex = 3;\n\nconst checkboxCellWidth = size['44'];\n\nconst tableBackgroundColor = 'surface.background.gray.intense';\nconst tableHeader = {\n paddingTop: 'spacing.5',\n paddingBottom: 'spacing.5',\n paddingLeft: 'spacing.4',\n paddingRight: 'spacing.4',\n backgroundColor: 'interactive.background.gray.default',\n borderBottomAndTopWidth: 'thin',\n borderBottomAndTopColor: 'surface.border.gray.muted',\n} as const;\n\nconst tableFooter = {\n paddingTop: 'spacing.5',\n paddingBottom: 'spacing.5',\n paddingLeft: 'spacing.4',\n paddingRight: 'spacing.4',\n borderBottomAndTopWidth: 'thin',\n borderBottomAndTopColor: 'surface.border.gray.muted',\n backgroundColor: 'interactive.background.gray.default',\n} as const;\n\nconst tableRow = {\n paddingLeft: {\n compact: 'spacing.4',\n normal: 'spacing.4',\n comfortable: 'spacing.4',\n },\n paddingRight: {\n compact: 'spacing.4',\n normal: 'spacing.4',\n comfortable: 'spacing.4',\n },\n minHeight: {\n compact: '36',\n normal: '48',\n comfortable: '60',\n },\n nonStripe: {\n backgroundColor: 'transparent',\n backgroundColorHover: 'interactive.background.gray.default',\n backgroundColorFocus: 'transparent',\n // TODO: Rebranding - on design side: explore pressed state color change, right now both hover & active are same\n backgroundColorActive: 'interactive.background.gray.default',\n backgroundColorSelected: 'interactive.background.primary.faded',\n backgroundColorSelectedHover: 'interactive.background.primary.fadedHighlighted',\n backgroundColorSelectedFocus: 'interactive.background.primary.faded',\n backgroundColorSelectedActive: 'interactive.background.primary.fadedHighlighted',\n },\n nonStripeWrapper: {\n // not used anywhere\n backgroundColor: 'transparent',\n backgroundColorHover: 'transparent',\n backgroundColorFocus: 'transparent',\n backgroundColorActive: 'interactive.background.gray.default',\n backgroundColorSelected: 'transparent',\n backgroundColorSelectedHover: 'transparent',\n backgroundColorSelectedFocus: 'transparent',\n backgroundColorSelectedActive: 'transparent',\n },\n stripe: {\n backgroundColor: 'transparent',\n backgroundColorHover: 'interactive.background.gray.default',\n backgroundColorFocus: 'transparent',\n backgroundColorActive: 'interactive.background.gray.default',\n backgroundColorSelected: 'interactive.background.primary.faded',\n backgroundColorSelectedHover: 'interactive.background.primary.fadedHighlighted',\n backgroundColorSelectedFocus: 'interactive.background.primary.faded',\n backgroundColorSelectedActive: 'interactive.background.primary.fadedHighlighted',\n },\n stripeWrapper: {\n backgroundColor: 'interactive.background.gray.default',\n backgroundColorHover: 'interactive.background.gray.default',\n backgroundColorFocus: 'interactive.background.gray.default',\n backgroundColorActive: 'interactive.background.gray.default',\n backgroundColorSelected: 'interactive.background.primary.faded',\n backgroundColorSelectedHover: 'interactive.background.primary.faded',\n backgroundColorSelectedFocus: 'interactive.background.primary.faded',\n backgroundColorSelectedActive: 'interactive.background.primary.faded',\n },\n borderBottomWidth: 'thin',\n borderColor: 'surface.border.gray.muted',\n backgroundColorMotionEasing: 'easing.standard.effective',\n backgroundColorMotionDuration: 'duration.xquick',\n} as const;\n\nconst tableToolbar = {\n backgroundColor: 'transparent',\n backgroundColorSelected: 'interactive.background.primary.faded',\n backgroundColorMotionEasing: 'easing.standard.effective',\n backgroundColorMotionDuration: 'duration.xquick',\n} as const;\n\nconst tablePagination = {\n padding: 'spacing.4',\n pageSelectionButton: {\n backgroundColor: 'transparent',\n backgroundColorHover: 'interactive.background.gray.default',\n backgroundColorActive: 'interactive.background.gray.highlighted',\n backgroundColorSelected: 'interactive.background.primary.faded',\n backgroundColorSelectedHover: 'interactive.background.primary.fadedHighlighted',\n backgroundColorSelectedActive: 'interactive.background.primary.fadedHighlighted',\n padding: 'spacing.2',\n borderRadius: 'small',\n focusRingColor: 'surface.border.primary.muted',\n textColor: 'surface.text.gray.subtle',\n textColorSelected: 'surface.text.primary.normal',\n height: size['32'],\n width: size['32'],\n },\n defaultPageSize: 10,\n} as const;\n\nconst tableEditableCellRowDensityToInputSizeMap = {\n compact: 'medium',\n normal: 'large',\n comfortable: 'medium',\n} as const;\n\nconst validationStateToInputTrailingIconMap = {\n none: undefined,\n success: CheckIcon,\n error: AlertCircleIcon,\n};\n\nconst rowDensityToIsTableInputCellMapping = {\n comfortable: false,\n normal: true,\n compact: true,\n};\n\nexport {\n tableHeader,\n tableFooter,\n tableRow,\n tableToolbar,\n tablePagination,\n refreshWrapperZIndex,\n tableBackgroundColor,\n firstColumnStickyZIndex,\n checkboxCellWidth,\n tableEditableCellRowDensityToInputSizeMap,\n validationStateToInputTrailingIconMap,\n rowDensityToIsTableInputCellMapping,\n};\n"],"names":["firstColumnStickyZIndex","refreshWrapperZIndex","checkboxCellWidth","size","tableBackgroundColor","tableHeader","paddingTop","paddingBottom","paddingLeft","paddingRight","backgroundColor","borderBottomAndTopWidth","borderBottomAndTopColor","tableFooter","tableRow","compact","normal","comfortable","minHeight","nonStripe","backgroundColorHover","backgroundColorFocus","backgroundColorActive","backgroundColorSelected","backgroundColorSelectedHover","backgroundColorSelectedFocus","backgroundColorSelectedActive","nonStripeWrapper","stripe","stripeWrapper","borderBottomWidth","borderColor","backgroundColorMotionEasing","backgroundColorMotionDuration","tableToolbar","tablePagination","padding","pageSelectionButton","borderRadius","focusRingColor","textColor","textColorSelected","height","width","defaultPageSize","tableEditableCellRowDensityToInputSizeMap","validationStateToInputTrailingIconMap","none","undefined","success","CheckIcon","error","AlertCircleIcon","rowDensityToIsTableInputCellMapping"],"mappings":"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"}
1	+ {"version":3,"file":"tokens.js","sources":["../../../../../../src/components/Table/tokens.ts"],"sourcesContent":["import { AlertCircleIcon, CheckIcon } from '~components/Icons';\nimport { size } from '~tokens/global';\n\nconst firstColumnStickyZIndex = 2;\n\nconst refreshWrapperZIndex = 3;\n\nconst checkboxCellWidth = size['44'];\n\nconst tableBackgroundColor = 'surface.background.gray.intense';\nconst tableHeader = {\n paddingTop: 'spacing.5',\n paddingBottom: 'spacing.5',\n paddingLeft: 'spacing.4',\n paddingRight: 'spacing.4',\n backgroundColor: 'interactive.background.gray.default',\n borderBottomAndTopWidth: 'thin',\n borderBottomAndTopColor: 'surface.border.gray.muted',\n} as const;\n\nconst tableFooter = {\n paddingTop: 'spacing.5',\n paddingBottom: 'spacing.5',\n paddingLeft: 'spacing.4',\n paddingRight: 'spacing.4',\n borderBottomAndTopWidth: 'thin',\n borderBottomAndTopColor: 'surface.border.gray.muted',\n backgroundColor: 'interactive.background.gray.default',\n} as const;\n\nconst tableRow = {\n paddingLeft: {\n compact: 'spacing.4',\n normal: 'spacing.4',\n comfortable: 'spacing.4',\n },\n paddingRight: {\n compact: 'spacing.4',\n normal: 'spacing.4',\n comfortable: 'spacing.4',\n },\n minHeight: {\n compact: '36',\n normal: '48',\n comfortable: '60',\n },\n nonStripe: {\n backgroundColor: 'transparent',\n backgroundColorHover: 'interactive.background.gray.default',\n backgroundColorFocus: 'transparent',\n // TODO: Rebranding - on design side: explore pressed state color change, right now both hover & active are same\n backgroundColorActive: 'interactive.background.gray.default',\n backgroundColorSelected: 'interactive.background.primary.faded',\n backgroundColorSelectedHover: 'interactive.background.primary.fadedHighlighted',\n backgroundColorSelectedFocus: 'interactive.background.primary.faded',\n backgroundColorSelectedActive: 'interactive.background.primary.fadedHighlighted',\n },\n nonStripeWrapper: {\n // not used anywhere\n backgroundColor: 'transparent',\n backgroundColorHover: 'transparent',\n backgroundColorFocus: 'transparent',\n backgroundColorActive: 'interactive.background.gray.default',\n backgroundColorSelected: 'transparent',\n backgroundColorSelectedHover: 'transparent',\n backgroundColorSelectedFocus: 'transparent',\n backgroundColorSelectedActive: 'transparent',\n },\n stripe: {\n backgroundColor: 'transparent',\n backgroundColorHover: 'interactive.background.gray.default',\n backgroundColorFocus: 'transparent',\n backgroundColorActive: 'interactive.background.gray.default',\n backgroundColorSelected: 'interactive.background.primary.faded',\n backgroundColorSelectedHover: 'interactive.background.primary.fadedHighlighted',\n backgroundColorSelectedFocus: 'interactive.background.primary.faded',\n backgroundColorSelectedActive: 'interactive.background.primary.fadedHighlighted',\n },\n stripeWrapper: {\n backgroundColor: 'interactive.background.gray.default',\n backgroundColorHover: 'interactive.background.gray.default',\n backgroundColorFocus: 'interactive.background.gray.default',\n backgroundColorActive: 'interactive.background.gray.default',\n backgroundColorSelected: 'interactive.background.primary.faded',\n backgroundColorSelectedHover: 'interactive.background.primary.faded',\n backgroundColorSelectedFocus: 'interactive.background.primary.faded',\n backgroundColorSelectedActive: 'interactive.background.primary.faded',\n },\n borderBottomWidth: 'thin',\n borderColor: 'surface.border.gray.muted',\n backgroundColorMotionEasing: 'easing.standard.effective',\n backgroundColorMotionDuration: 'duration.xquick',\n} as const;\n\nconst tableToolbar = {\n backgroundColor: 'transparent',\n backgroundColorSelected: 'interactive.background.primary.faded',\n backgroundColorMotionEasing: 'easing.standard.effective',\n backgroundColorMotionDuration: 'duration.xquick',\n} as const;\n\nconst tablePagination = {\n padding: 'spacing.4',\n pageSelectionButton: {\n backgroundColor: 'transparent',\n backgroundColorHover: 'interactive.background.gray.default',\n backgroundColorActive: 'interactive.background.gray.highlighted',\n backgroundColorSelected: 'interactive.background.primary.faded',\n backgroundColorSelectedHover: 'interactive.background.primary.fadedHighlighted',\n backgroundColorSelectedActive: 'interactive.background.primary.fadedHighlighted',\n padding: 'spacing.2',\n borderRadius: 'small',\n focusRingColor: 'surface.border.primary.muted',\n textColor: 'surface.text.gray.subtle',\n textColorSelected: 'surface.text.primary.normal',\n height: size['32'],\n width: size['32'],\n },\n defaultPageSize: 10,\n} as const;\n\nconst tableEditableCellRowDensityToInputSizeMap = {\n compact: 'medium',\n normal: 'large',\n comfortable: 'medium',\n} as const;\n\nconst validationStateToInputTrailingIconMap = {\n none: undefined,\n success: CheckIcon,\n error: AlertCircleIcon,\n};\n\nconst rowDensityToIsTableInputCellMapping = {\n comfortable: false,\n normal: true,\n compact: true,\n};\n\nconst classes = {\n HOVER_ACTIONS: 'hover-actions',\n HOVER_ACTIONS_LAYER2: 'hover-actions-layer-2',\n HOVER_ACTIONS_LAYER3: 'hover-actions-layer-3',\n};\n\nexport {\n tableHeader,\n tableFooter,\n tableRow,\n tableToolbar,\n tablePagination,\n refreshWrapperZIndex,\n tableBackgroundColor,\n firstColumnStickyZIndex,\n checkboxCellWidth,\n tableEditableCellRowDensityToInputSizeMap,\n validationStateToInputTrailingIconMap,\n rowDensityToIsTableInputCellMapping,\n classes,\n};\n"],"names":["firstColumnStickyZIndex","refreshWrapperZIndex","checkboxCellWidth","size","tableBackgroundColor","tableHeader","paddingTop","paddingBottom","paddingLeft","paddingRight","backgroundColor","borderBottomAndTopWidth","borderBottomAndTopColor","tableFooter","tableRow","compact","normal","comfortable","minHeight","nonStripe","backgroundColorHover","backgroundColorFocus","backgroundColorActive","backgroundColorSelected","backgroundColorSelectedHover","backgroundColorSelectedFocus","backgroundColorSelectedActive","nonStripeWrapper","stripe","stripeWrapper","borderBottomWidth","borderColor","backgroundColorMotionEasing","backgroundColorMotionDuration","tableToolbar","tablePagination","padding","pageSelectionButton","borderRadius","focusRingColor","textColor","textColorSelected","height","width","defaultPageSize","tableEditableCellRowDensityToInputSizeMap","validationStateToInputTrailingIconMap","none","undefined","success","CheckIcon","error","AlertCircleIcon","rowDensityToIsTableInputCellMapping","classes","HOVER_ACTIONS","HOVER_ACTIONS_LAYER2","HOVER_ACTIONS_LAYER3"],"mappings":"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"}

package/build/lib/web/production/components/TopNav/TabNav/TabNav.web.js CHANGED Viewed

@@ -1,172 +1,151 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import React__default from 'react';
-import styled from 'styled-components';
-import { useTopNavContext } from '../TopNavContext.js';
-import { MIXED_BG_COLOR, useHasOverflow, approximatelyEqual } from './utils.js';
+import ReactDOM from 'react-dom';
 import { TabNavContext } from './TabNavContext.js';
+import { useResize } from './utils.js';
 import '../../Box/BaseBox/index.js';
 import '../../Box/styledProps/index.js';
-import '../../Button/index.js';
 import '../../Divider/index.js';
-import '../../Icons/index.js';
 import '../../../utils/index.js';
 import '../../../tokens/global/index.js';
-import getIn from '../../../utils/lodashButBetter/get.js';
 import '../../../utils/metaAttribute/index.js';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { BaseBox } from '../../Box/BaseBox/BaseBox.web.js';
-import { makeMotionTime } from '../../../utils/makeMotionTime/makeMotionTime.web.js';
+import '../../Box/index.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Box } from '../../Box/Box.js';
+import { Divider } from '../../Divider/Divider.js';
 import { makeSize } from '../../../utils/makeSize/makeSize.js';
+import { size } from '../../../tokens/global/size.js';
+import { BaseBox } from '../../Box/BaseBox/BaseBox.web.js';
 import { getStyledProps } from '../../Box/styledProps/getStyledProps.js';
 import { metaAttribute } from '../../../utils/metaAttribute/metaAttribute.web.js';
 import { MetaConstants } from '../../../utils/metaAttribute/metaConstants.js';
-import Button from '../../Button/Button/Button.js';
-import ChevronLeftIcon from '../../Icons/ChevronLeftIcon/ChevronLeftIcon.js';
-import { Divider } from '../../Divider/Divider.js';
-import { size } from '../../../tokens/global/size.js';
-import ChevronRightIcon from '../../Icons/ChevronRightIcon/ChevronRightIcon.js';
-var _excluded = ["children"];
+var _excluded = ["children"],
+  _excluded2 = ["children", "items"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var GRADIENT_WIDTH = 54;
-var GRADIENT_OFFSET = -8;
-var OFFSET_BOTTOM = -12;
-var SCROLL_AMOUNT = 200;
-var ScrollableArea = /*#__PURE__*/styled(BaseBox).withConfig({
-  displayName: "TabNavweb__ScrollableArea",
-  componentId: "sc-1ww6x3k-0"
-})(function () {
-  return {
-    '&::-webkit-scrollbar': {
-      display: 'none'
-    }
-  };
-});
-var GradientOverlay = /*#__PURE__*/styled(BaseBox).withConfig({
-  displayName: "TabNavweb__GradientOverlay",
-  componentId: "sc-1ww6x3k-1"
-})(function (_ref) {
-  var theme = _ref.theme,
-    shouldShow = _ref.shouldShow,
-    variant = _ref.variant,
-    $color = _ref.$color;
-  var color = getIn(theme.colors, $color, MIXED_BG_COLOR);
-  return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
-    position: 'absolute'
-  }, variant, 0), "pointerEvents", shouldShow ? 'auto' : 'none'), "transform", shouldShow ? 'scale(1)' : 'scale(0.5)'), "opacity", shouldShow ? 1 : 0), "transitionTimingFunction", "".concat(theme.motion.easing.standard.revealing)), "transitionDuration", "".concat(makeMotionTime(theme.motion.duration.xquick))), "transitionProperty", 'opacity, transform'), "zIndex", 1), ':before', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
-    content: "''",
-    pointerEvents: 'none',
-    position: 'absolute'
-  }, variant, 0), "top", makeSize(GRADIENT_OFFSET)), "bottom", makeSize(GRADIENT_OFFSET)), "width", makeSize(GRADIENT_WIDTH)), "background", "linear-gradient(to ".concat(variant, ", transparent 0%, ").concat(color, " 30%, ").concat(color, " 100%);")));
-});
-var TabNav = function TabNav(_ref3) {
-  var children = _ref3.children,
-    styledProps = _objectWithoutProperties(_ref3, _excluded);
+var TabNavItems = function TabNavItems(_ref) {
+  var children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/jsxs(Box, _objectSpread(_objectSpread({}, props), {}, {
+    display: "flex",
+    width: "100%",
+    gap: "spacing.0",
+    position: "relative",
+    left: "-1px",
+    children: [React__default.Children.map(children, function (child, index) {
+      return /*#__PURE__*/jsxs(Fragment, {
+        children: [index > 0 ? /*#__PURE__*/jsx(Divider, {
+          margin: "auto",
+          variant: "muted",
+          orientation: "vertical",
+          height: makeSize(size[16])
+        }) : null, /*#__PURE__*/React__default.cloneElement(child, {
+          __isInsideTabNavItems: true,
+          __index: index
+        })]
+      });
+    }), /*#__PURE__*/jsx(Divider, {
+      margin: "auto",
+      variant: "muted",
+      orientation: "vertical",
+      height: makeSize(size[16])
+    })]
+  }));
+};
+var TabNav = function TabNav(_ref2) {
+  var children = _ref2.children,
+    items = _ref2.items,
+    styledProps = _objectWithoutProperties(_ref2, _excluded2);
   var ref = React__default.useRef(null);
-  var hasOverflow = useHasOverflow(ref);
-  var _React$useState = React__default.useState('start'),
+  var _React$useState = React__default.useState(items),
     _React$useState2 = _slicedToArray(_React$useState, 2),
-    scrollStatus = _React$useState2[0],
-    setScrollStatus = _React$useState2[1];
-  var _useTopNavContext = useTopNavContext(),
-    backgroundColor = _useTopNavContext.backgroundColor;
+    controlledItems = _React$useState2[0],
+    setControlledItems = _React$useState2[1];
+  var overflowingItems = controlledItems.filter(function (item) {
+    var _item$isAlwaysOverflo;
+    return (_item$isAlwaysOverflo = item.isAlwaysOverflowing) !== null && _item$isAlwaysOverflo !== void 0 ? _item$isAlwaysOverflo : item.isOverflowing;
+  });
+  var _items = controlledItems.filter(function (item) {
+    return !item.isAlwaysOverflowing && !item.isOverflowing;
+  });
-  // Check if the scroll is at start, end or middle
-  var handleScrollStatus = React__default.useCallback(function (e) {
-    var target = e.target;
-    var isAtStart = target.scrollLeft === 0;
-    var isAtEnd = approximatelyEqual(target.scrollLeft, target.scrollWidth - target.offsetWidth);
-    if (isAtStart) {
-      setScrollStatus('start');
-    } else if (isAtEnd) {
-      setScrollStatus('end');
+  // We need to memoize this callback otherwise it will cause infinite re-renders
+  // Because the ResizeObserver callback will be a new reference on every render
+  // and it will trigger a re-render
+  var resizeCallback = React__default.useCallback(function (resizeInfo) {
+    var target = resizeInfo.target;
+    var updateItems = function updateItems() {
+      setControlledItems(function (items) {
+        return items.map(function (item, index) {
+          // never overflow the first item
+          if (index === 0) return _objectSpread(_objectSpread({}, item), {}, {
+            isOverflowing: false
+          });
+          // add padding to the offsetX to account the "More" menu's width changing due to the selection state (eg: More:ProdctName)
+          // Currently, hardcoding this to 150, we can make this dynamic too but that's causing layout thrashing
+          // because first we need to calculate the width of the "More" menu and then update the items
+          var padding = 150;
+          var offset = item.offsetX + padding - target.getBoundingClientRect().left;
+          if (offset > target.offsetWidth) {
+            return _objectSpread(_objectSpread({}, item), {}, {
+              isOverflowing: true
+            });
+          } else {
+            return _objectSpread(_objectSpread({}, item), {}, {
+              isOverflowing: false
+            });
+          }
+        });
+      });
+    };
+    // https://github.com/webpack/webpack/issues/14814
+    var flushSync = ReactDOM['flushSync'.toString()];
+    // Using flushSync to avoid layout thrashing,
+    // this will force React to flush all pending updates and only then update the DOM
+    if (flushSync !== undefined) {
+      flushSync(updateItems);
     } else {
-      setScrollStatus('middle');
+      updateItems();
     }
   }, []);
-  var scrollRight = function scrollRight() {
-    if (!ref.current) return;
-    ref.current.scrollBy({
-      behavior: 'smooth',
-      left: SCROLL_AMOUNT
-    });
-  };
-  var scrollLeft = function scrollLeft() {
-    if (!ref.current) return;
-    ref.current.scrollBy({
-      behavior: 'smooth',
-      left: -SCROLL_AMOUNT
-    });
-  };
+  useResize(ref, resizeCallback);
   return /*#__PURE__*/jsx(TabNavContext.Provider, {
     value: {
       containerRef: ref,
-      hasOverflow: hasOverflow
+      controlledItems: controlledItems,
+      setControlledItems: setControlledItems
     },
-    children: /*#__PURE__*/jsxs(BaseBox, _objectSpread(_objectSpread(_objectSpread({
+    children: /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread(_objectSpread({
       as: "nav",
       display: "flex",
       width: "100%",
       alignItems: "center",
-      position: "relative",
-      marginBottom: makeSize(OFFSET_BOTTOM)
+      alignSelf: "end",
+      position: "relative"
     }, getStyledProps(styledProps)), metaAttribute({
       name: MetaConstants.TabNav
     })), {}, {
-      children: [/*#__PURE__*/jsx(GradientOverlay, {
-        variant: "left",
-        $color: backgroundColor,
-        shouldShow: hasOverflow && scrollStatus !== 'start',
-        children: /*#__PURE__*/jsx(Button, {
-          size: "xsmall",
-          variant: "tertiary",
-          icon: ChevronLeftIcon,
-          accessibilityLabel: "Scroll Left",
-          onClick: scrollLeft
-        })
-      }), /*#__PURE__*/jsx(ScrollableArea, {
-        ref: ref,
-        onScroll: handleScrollStatus,
+      ref: ref,
+      children: /*#__PURE__*/jsx(BaseBox, {
         display: "flex",
         width: "100%",
         position: "relative",
-        whiteSpace: "nowrap",
-        gap: "spacing.0",
-        overflowY: "hidden",
-        overflowX: "auto",
         children: /*#__PURE__*/jsx(BaseBox, {
           display: "flex",
           flexDirection: "row",
           width: "max-content",
-          children: React__default.Children.map(children, function (child, index) {
-            return /*#__PURE__*/jsxs(Fragment, {
-              children: [index > 0 ? /*#__PURE__*/jsx(Divider, {
-                margin: "auto",
-                variant: "muted",
-                orientation: "vertical",
-                height: makeSize(size[16])
-              }) : null, child]
-            });
+          children: children({
+            items: _items,
+            overflowingItems: overflowingItems
           })
         })
-      }), /*#__PURE__*/jsx(GradientOverlay, {
-        variant: "right",
-        $color: backgroundColor,
-        shouldShow: hasOverflow && scrollStatus !== 'end',
-        children: /*#__PURE__*/jsx(Button, {
-          size: "xsmall",
-          variant: "tertiary",
-          icon: ChevronRightIcon,
-          accessibilityLabel: "Scroll Right",
-          onClick: scrollRight
-        })
-      })]
+      })
     }))
   });
 };
-export { TabNav };
+export { TabNav, TabNavItems };
 //# sourceMappingURL=TabNav.web.js.map

package/build/lib/web/production/components/TopNav/TabNav/TabNav.web.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TabNav.web.js","sources":["../../../../../../../src/components/TopNav/TabNav/TabNav.web.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { useTopNavContext } from '../TopNavContext';\nimport { approximatelyEqual, MIXED_BG_COLOR, useHasOverflow } from './utils';\nimport { TabNavContext } from './TabNavContext';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport { Button } from '~components/Button';\nimport { Divider } from '~components/Divider';\nimport { ChevronLeftIcon, ChevronRightIcon } from '~components/Icons';\nimport { makeMotionTime, makeSize } from '~utils';\nimport { size } from '~tokens/global';\nimport getIn from '~utils/lodashButBetter/get';\nimport type { BoxProps } from '~components/Box';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\n\nconst GRADIENT_WIDTH = 54 as const;\nconst GRADIENT_OFFSET = -8 as const;\nconst OFFSET_BOTTOM = -12 as const;\nconst SCROLL_AMOUNT = 200;\n\ntype TabNavProps = {\n children: React.ReactNode;\n};\n\nconst ScrollableArea = styled(BaseBox)(() => {\n return {\n '&::-webkit-scrollbar': { display: 'none' },\n };\n});\n\nconst GradientOverlay = styled(BaseBox)<{\n shouldShow?: boolean;\n variant: 'left' \| 'right';\n $color: BoxProps['backgroundColor'];\n}>(({ theme, shouldShow, variant, $color }) => {\n const color = getIn(theme.colors, $color as never, MIXED_BG_COLOR);\n\n return {\n position: 'absolute',\n [variant]: 0,\n pointerEvents: shouldShow ? 'auto' : 'none',\n transform: shouldShow ? 'scale(1)' : 'scale(0.5)',\n opacity: shouldShow ? 1 : 0,\n transitionTimingFunction: `${theme.motion.easing.standard.revealing}`,\n transitionDuration: `${makeMotionTime(theme.motion.duration.xquick)}`,\n transitionProperty: 'opacity, transform',\n zIndex: 1,\n ':before': {\n content: \"''\",\n pointerEvents: 'none',\n position: 'absolute',\n [variant]: 0,\n top: makeSize(GRADIENT_OFFSET),\n bottom: makeSize(GRADIENT_OFFSET),\n width: makeSize(GRADIENT_WIDTH),\n background: `linear-gradient(to ${variant}, transparent 0%, ${color} 30%, ${color} 100%);`,\n },\n };\n});\n\nconst TabNav = ({\n children,\n ...styledProps\n}: TabNavProps & StyledPropsBlade): React.ReactElement => {\n const ref = React.useRef<HTMLDivElement>(null);\n const hasOverflow = useHasOverflow(ref);\n const [scrollStatus, setScrollStatus] = React.useState<'start' \| 'end' \| 'middle'>('start');\n const { backgroundColor } = useTopNavContext();\n\n // Check if the scroll is at start, end or middle\n const handleScrollStatus = React.useCallback(\n (e: React.UIEvent<HTMLDivElement, UIEvent>): void => {\n const target = e.target as HTMLDivElement;\n const isAtStart = target.scrollLeft === 0;\n const isAtEnd = approximatelyEqual(\n target.scrollLeft,\n target.scrollWidth - target.offsetWidth,\n );\n\n if (isAtStart) {\n setScrollStatus('start');\n } else if (isAtEnd) {\n setScrollStatus('end');\n } else {\n setScrollStatus('middle');\n }\n },\n [],\n );\n\n const scrollRight = (): void => {\n if (!ref.current) return;\n ref.current.scrollBy({\n behavior: 'smooth',\n left: SCROLL_AMOUNT,\n });\n };\n\n const scrollLeft = (): void => {\n if (!ref.current) return;\n ref.current.scrollBy({\n behavior: 'smooth',\n left: -SCROLL_AMOUNT,\n });\n };\n\n return (\n <TabNavContext.Provider value={{ containerRef: ref, hasOverflow }}>\n <BaseBox\n as=\"nav\"\n display=\"flex\"\n width=\"100%\"\n alignItems=\"center\"\n position=\"relative\"\n marginBottom={makeSize(OFFSET_BOTTOM)}\n {...getStyledProps(styledProps)}\n {...metaAttribute({ name: MetaConstants.TabNav })}\n >\n <GradientOverlay\n variant=\"left\"\n $color={backgroundColor}\n shouldShow={hasOverflow && scrollStatus !== 'start'}\n >\n <Button\n size=\"xsmall\"\n variant=\"tertiary\"\n icon={ChevronLeftIcon}\n accessibilityLabel=\"Scroll Left\"\n onClick={scrollLeft}\n />\n </GradientOverlay>\n <ScrollableArea\n ref={ref}\n onScroll={handleScrollStatus}\n display=\"flex\"\n width=\"100%\"\n position=\"relative\"\n whiteSpace=\"nowrap\"\n gap=\"spacing.0\"\n overflowY=\"hidden\"\n overflowX=\"auto\"\n >\n <BaseBox display=\"flex\" flexDirection=\"row\" width=\"max-content\">\n {React.Children.map(children, (child, index) => {\n return (\n <>\n {index > 0 ? (\n <Divider\n margin=\"auto\"\n variant=\"muted\"\n orientation=\"vertical\"\n height={makeSize(size[16])}\n />\n ) : null}\n {child}\n </>\n );\n })}\n </BaseBox>\n </ScrollableArea>\n <GradientOverlay\n variant=\"right\"\n $color={backgroundColor}\n shouldShow={hasOverflow && scrollStatus !== 'end'}\n >\n <Button\n size=\"xsmall\"\n variant=\"tertiary\"\n icon={ChevronRightIcon}\n accessibilityLabel=\"Scroll Right\"\n onClick={scrollRight}\n />\n </GradientOverlay>\n </BaseBox>\n </TabNavContext.Provider>\n );\n};\n\nexport { TabNav };\n"],"names":["GRADIENT_WIDTH","GRADIENT_OFFSET","OFFSET_BOTTOM","SCROLL_AMOUNT","ScrollableArea","styled","BaseBox","withConfig","displayName","componentId","display","GradientOverlay","_ref","theme","shouldShow","variant","$color","color","getIn","colors","MIXED_BG_COLOR","_defineProperty","position","concat","motion","easing","standard","revealing","makeMotionTime","duration","xquick","content","pointerEvents","makeSize","TabNav","_ref3","children","styledProps","_objectWithoutProperties","_excluded","ref","React","useRef","hasOverflow","useHasOverflow","_React$useState","useState","_React$useState2","_slicedToArray","scrollStatus","setScrollStatus","_useTopNavContext","useTopNavContext","backgroundColor","handleScrollStatus","useCallback","e","target","isAtStart","scrollLeft","isAtEnd","approximatelyEqual","scrollWidth","offsetWidth","scrollRight","current","scrollBy","behavior","left","_jsx","TabNavContext","Provider","value","containerRef","_jsxs","_objectSpread","as","width","alignItems","marginBottom","getStyledProps","metaAttribute","name","MetaConstants","Button","size","icon","ChevronLeftIcon","accessibilityLabel","onClick","onScroll","whiteSpace","gap","overflowY","overflowX","flexDirection","Children","map","child","index","_Fragment","Divider","margin","orientation","height","ChevronRightIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA,IAAMA,cAAc,GAAG,EAAW,CAAA;AAClC,IAAMC,eAAe,GAAG,CAAC,CAAU,CAAA;AACnC,IAAMC,aAAa,GAAG,CAAC,EAAW,CAAA;AAClC,IAAMC,aAAa,GAAG,GAAG,CAAA;AAMzB,IAAMC,cAAc,gBAAGC,MAAM,CAACC,OAAO,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,2BAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAAC,YAAM;EAC3C,OAAO;AACL,IAAA,sBAAsB,EAAE;AAAEC,MAAAA,OAAO,EAAE,MAAA;AAAO,KAAA;GAC3C,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,IAAMC,eAAe,gBAAGN,MAAM,CAACC,OAAO,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,4BAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAIpC,CAAA,CAAA,UAAAG,IAAA,EAA4C;AAAA,EAAA,IAAzCC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAEC,UAAU,GAAAF,IAAA,CAAVE,UAAU;IAAEC,OAAO,GAAAH,IAAA,CAAPG,OAAO;IAAEC,MAAM,GAAAJ,IAAA,CAANI,MAAM,CAAA;EACtC,IAAMC,KAAK,GAAGC,KAAK,CAACL,KAAK,CAACM,MAAM,EAAEH,MAAM,EAAWI,cAAc,CAAC,CAAA;AAElE,EAAA,OAAAC,eAAA,CAAAA,eAAA,CAAAA,eAAA,CAAAA,eAAA,CAAAA,eAAA,CAAAA,eAAA,CAAAA,eAAA,CAAAA,eAAA,CAAAA,eAAA,CAAA;AACEC,IAAAA,QAAQ,EAAE,UAAA;AAAU,GAAA,EACnBP,OAAO,EAAG,CAAC,CAAA,EAAA,eAAA,EACGD,UAAU,GAAG,MAAM,GAAG,MAAM,CAAA,EAAA,WAAA,EAChCA,UAAU,GAAG,UAAU,GAAG,YAAY,CAAA,EAAA,SAAA,EACxCA,UAAU,GAAG,CAAC,GAAG,CAAC,CAAA,EAAA,0BAAA,EAAA,EAAA,CAAAS,MAAA,CACEV,KAAK,CAACW,MAAM,CAACC,MAAM,CAACC,QAAQ,CAACC,SAAS,CAAA,CAAA,EAAA,oBAAA,EAAA,EAAA,CAAAJ,MAAA,CAC5CK,cAAc,CAACf,KAAK,CAACW,MAAM,CAACK,QAAQ,CAACC,MAAM,CAAC,CAC/C,CAAA,EAAA,oBAAA,EAAA,oBAAoB,CAChC,EAAA,QAAA,EAAA,CAAC,CACT,EAAA,SAAS,EAAAT,eAAA,CAAAA,eAAA,CAAAA,eAAA,CAAAA,eAAA,CAAAA,eAAA,CAAA;AACPU,IAAAA,OAAO,EAAE,IAAI;AACbC,IAAAA,aAAa,EAAE,MAAM;AACrBV,IAAAA,QAAQ,EAAE,UAAA;AAAU,GAAA,EACnBP,OAAO,EAAG,CAAC,CAAA,EAAA,KAAA,EACPkB,QAAQ,CAAChC,eAAe,CAAC,CACtBgC,EAAAA,QAAAA,EAAAA,QAAQ,CAAChC,eAAe,CAAC,CAAA,EAAA,OAAA,EAC1BgC,QAAQ,CAACjC,cAAc,CAAC,CAAAuB,EAAAA,YAAAA,EAAAA,qBAAAA,CAAAA,MAAA,CACGR,OAAO,EAAAQ,oBAAAA,CAAAA,CAAAA,MAAA,CAAqBN,KAAK,EAAAM,QAAAA,CAAAA,CAAAA,MAAA,CAASN,KAAK,EAAA,SAAA,CAAA,CAAA,CAAA,CAAA;AAGvF,CAAC,CAAC,CAAA;AAEF,IAAMiB,MAAM,GAAG,SAATA,MAAMA,CAAAC,KAAA,EAG8C;AAAA,EAAA,IAFxDC,QAAQ,GAAAD,KAAA,CAARC,QAAQ;AACLC,IAAAA,WAAW,GAAAC,wBAAA,CAAAH,KAAA,EAAAI,SAAA,CAAA,CAAA;AAEd,EAAA,IAAMC,GAAG,GAAGC,cAAK,CAACC,MAAM,CAAiB,IAAI,CAAC,CAAA;AAC9C,EAAA,IAAMC,WAAW,GAAGC,cAAc,CAACJ,GAAG,CAAC,CAAA;AACvC,EAAA,IAAAK,eAAA,GAAwCJ,cAAK,CAACK,QAAQ,CAA6B,OAAO,CAAC;IAAAC,gBAAA,GAAAC,cAAA,CAAAH,eAAA,EAAA,CAAA,CAAA;AAApFI,IAAAA,YAAY,GAAAF,gBAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,eAAe,GAAAH,gBAAA,CAAA,CAAA,CAAA,CAAA;AACpC,EAAA,IAAAI,iBAAA,GAA4BC,gBAAgB,EAAE;IAAtCC,eAAe,GAAAF,iBAAA,CAAfE,eAAe,CAAA;;AAEvB;EACA,IAAMC,kBAAkB,GAAGb,cAAK,CAACc,WAAW,CAC1C,UAACC,CAAyC,EAAW;AACnD,IAAA,IAAMC,MAAM,GAAGD,CAAC,CAACC,MAAwB,CAAA;AACzC,IAAA,IAAMC,SAAS,GAAGD,MAAM,CAACE,UAAU,KAAK,CAAC,CAAA;AACzC,IAAA,IAAMC,OAAO,GAAGC,kBAAkB,CAChCJ,MAAM,CAACE,UAAU,EACjBF,MAAM,CAACK,WAAW,GAAGL,MAAM,CAACM,WAC9B,CAAC,CAAA;AAED,IAAA,IAAIL,SAAS,EAAE;MACbR,eAAe,CAAC,OAAO,CAAC,CAAA;KACzB,MAAM,IAAIU,OAAO,EAAE;MAClBV,eAAe,CAAC,KAAK,CAAC,CAAA;AACxB,KAAC,MAAM;MACLA,eAAe,CAAC,QAAQ,CAAC,CAAA;AAC3B,KAAA;GACD,EACD,EACF,CAAC,CAAA;AAED,EAAA,IAAMc,WAAW,GAAG,SAAdA,WAAWA,GAAe;AAC9B,IAAA,IAAI,CAACxB,GAAG,CAACyB,OAAO,EAAE,OAAA;AAClBzB,IAAAA,GAAG,CAACyB,OAAO,CAACC,QAAQ,CAAC;AACnBC,MAAAA,QAAQ,EAAE,QAAQ;AAClBC,MAAAA,IAAI,EAAEjE,aAAAA;AACR,KAAC,CAAC,CAAA;GACH,CAAA;AAED,EAAA,IAAMwD,UAAU,GAAG,SAAbA,UAAUA,GAAe;AAC7B,IAAA,IAAI,CAACnB,GAAG,CAACyB,OAAO,EAAE,OAAA;AAClBzB,IAAAA,GAAG,CAACyB,OAAO,CAACC,QAAQ,CAAC;AACnBC,MAAAA,QAAQ,EAAE,QAAQ;AAClBC,MAAAA,IAAI,EAAE,CAACjE,aAAAA;AACT,KAAC,CAAC,CAAA;GACH,CAAA;AAED,EAAA,oBACEkE,GAAA,CAACC,aAAa,CAACC,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAE;AAAEC,MAAAA,YAAY,EAAEjC,GAAG;AAAEG,MAAAA,WAAW,EAAXA,WAAAA;KAAc;IAAAP,QAAA,eAChEsC,IAAA,CAACpE,OAAO,EAAAqE,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAA;AACNC,MAAAA,EAAE,EAAC,KAAK;AACRlE,MAAAA,OAAO,EAAC,MAAM;AACdmE,MAAAA,KAAK,EAAC,MAAM;AACZC,MAAAA,UAAU,EAAC,QAAQ;AACnBxD,MAAAA,QAAQ,EAAC,UAAU;MACnByD,YAAY,EAAE9C,QAAQ,CAAC/B,aAAa,CAAA;AAAE,KAAA,EAClC8E,cAAc,CAAC3C,WAAW,CAAC,CAAA,EAC3B4C,aAAa,CAAC;MAAEC,IAAI,EAAEC,aAAa,CAACjD,MAAAA;AAAO,KAAC,CAAC,CAAA,EAAA,EAAA,EAAA;MAAAE,QAAA,EAAA,cAEjDiC,GAAA,CAAC1D,eAAe,EAAA;AACdI,QAAAA,OAAO,EAAC,MAAM;AACdC,QAAAA,MAAM,EAAEqC,eAAgB;AACxBvC,QAAAA,UAAU,EAAE6B,WAAW,IAAIM,YAAY,KAAK,OAAQ;QAAAb,QAAA,eAEpDiC,GAAA,CAACe,MAAM,EAAA;AACLC,UAAAA,IAAI,EAAC,QAAQ;AACbtE,UAAAA,OAAO,EAAC,UAAU;AAClBuE,UAAAA,IAAI,EAAEC,eAAgB;AACtBC,UAAAA,kBAAkB,EAAC,aAAa;AAChCC,UAAAA,OAAO,EAAE9B,UAAAA;SACV,CAAA;AAAC,OACa,CAAC,eAClBU,GAAA,CAACjE,cAAc,EAAA;AACboC,QAAAA,GAAG,EAAEA,GAAI;AACTkD,QAAAA,QAAQ,EAAEpC,kBAAmB;AAC7B5C,QAAAA,OAAO,EAAC,MAAM;AACdmE,QAAAA,KAAK,EAAC,MAAM;AACZvD,QAAAA,QAAQ,EAAC,UAAU;AACnBqE,QAAAA,UAAU,EAAC,QAAQ;AACnBC,QAAAA,GAAG,EAAC,WAAW;AACfC,QAAAA,SAAS,EAAC,QAAQ;AAClBC,QAAAA,SAAS,EAAC,MAAM;QAAA1D,QAAA,eAEhBiC,GAAA,CAAC/D,OAAO,EAAA;AAACI,UAAAA,OAAO,EAAC,MAAM;AAACqF,UAAAA,aAAa,EAAC,KAAK;AAAClB,UAAAA,KAAK,EAAC,aAAa;AAAAzC,UAAAA,QAAA,EAC5DK,cAAK,CAACuD,QAAQ,CAACC,GAAG,CAAC7D,QAAQ,EAAE,UAAC8D,KAAK,EAAEC,KAAK,EAAK;YAC9C,oBACEzB,IAAA,CAAA0B,QAAA,EAAA;AAAAhE,cAAAA,QAAA,GACG+D,KAAK,GAAG,CAAC,gBACR9B,GAAA,CAACgC,OAAO,EAAA;AACNC,gBAAAA,MAAM,EAAC,MAAM;AACbvF,gBAAAA,OAAO,EAAC,OAAO;AACfwF,gBAAAA,WAAW,EAAC,UAAU;AACtBC,gBAAAA,MAAM,EAAEvE,QAAQ,CAACoD,IAAI,CAAC,EAAE,CAAC,CAAA;AAAE,eAC5B,CAAC,GACA,IAAI,EACPa,KAAK,CAAA;AAAA,aACN,CAAC,CAAA;WAEN,CAAA;SACM,CAAA;AAAC,OACI,CAAC,eACjB7B,GAAA,CAAC1D,eAAe,EAAA;AACdI,QAAAA,OAAO,EAAC,OAAO;AACfC,QAAAA,MAAM,EAAEqC,eAAgB;AACxBvC,QAAAA,UAAU,EAAE6B,WAAW,IAAIM,YAAY,KAAK,KAAM;QAAAb,QAAA,eAElDiC,GAAA,CAACe,MAAM,EAAA;AACLC,UAAAA,IAAI,EAAC,QAAQ;AACbtE,UAAAA,OAAO,EAAC,UAAU;AAClBuE,UAAAA,IAAI,EAAEmB,gBAAiB;AACvBjB,UAAAA,kBAAkB,EAAC,cAAc;AACjCC,UAAAA,OAAO,EAAEzB,WAAAA;SACV,CAAA;AAAC,OACa,CAAC,CAAA;KACX,CAAA,CAAA;AAAC,GACY,CAAC,CAAA;AAE7B;;;;"}
1	+ {"version":3,"file":"TabNav.web.js","sources":["../../../../../../../src/components/TopNav/TabNav/TabNav.web.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any /\n/ eslint-disable consistent-return */\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { TabNavContext } from './TabNavContext';\nimport { useResize } from './utils';\nimport type { TabNavItemData, TabNavProps } from './types';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport { Divider } from '~components/Divider';\nimport { makeSize } from '~utils';\nimport { size } from '~tokens/global';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport type { BoxProps } from '~components/Box';\nimport { Box } from '~components/Box';\n\nconst TabNavItems = ({ children, ...props }: BoxProps): React.ReactElement => {\n return (\n <Box {...props} display=\"flex\" width=\"100%\" gap=\"spacing.0\" position=\"relative\" left=\"-1px\">\n {React.Children.map(children, (child, index) => {\n return (\n <>\n {index > 0 ? (\n <Divider\n margin=\"auto\"\n variant=\"muted\"\n orientation=\"vertical\"\n height={makeSize(size[16])}\n />\n ) : null}\n {React.cloneElement(child as React.ReactElement, {\n __isInsideTabNavItems: true,\n __index: index,\n })}\n </>\n );\n })}\n <Divider margin=\"auto\" variant=\"muted\" orientation=\"vertical\" height={makeSize(size[16])} />\n </Box>\n );\n};\n\nconst TabNav = ({\n children,\n items,\n ...styledProps\n}: TabNavProps & StyledPropsBlade): React.ReactElement => {\n const ref = React.useRef<HTMLDivElement>(null);\n const [controlledItems, setControlledItems] = React.useState<TabNavItemData[]>(items);\n\n const overflowingItems = controlledItems.filter(\n (item) => item.isAlwaysOverflowing ?? item.isOverflowing,\n );\n const _items = controlledItems.filter((item) => !item.isAlwaysOverflowing && !item.isOverflowing);\n\n // We need to memoize this callback otherwise it will cause infinite re-renders\n // Because the ResizeObserver callback will be a new reference on every render\n // and it will trigger a re-render\n const resizeCallback = React.useCallback((resizeInfo: ResizeObserverEntry): void => {\n const target = resizeInfo.target as HTMLElement;\n const updateItems = (): void => {\n setControlledItems((items) => {\n return items.map((item, index) => {\n // never overflow the first item\n if (index === 0) return { ...item, isOverflowing: false };\n // add padding to the offsetX to account the \"More\" menu's width changing due to the selection state (eg: More:ProdctName)\n // Currently, hardcoding this to 150, we can make this dynamic too but that's causing layout thrashing\n // because first we need to calculate the width of the \"More\" menu and then update the items\n const padding = 150;\n const offset = (item.offsetX! + padding)! - target.getBoundingClientRect().left;\n if (offset > target.offsetWidth) {\n return { ...item, isOverflowing: true };\n } else {\n return { ...item, isOverflowing: false };\n }\n });\n });\n };\n // https://github.com/webpack/webpack/issues/14814\n const flushSync = (ReactDOM as any)['flushSync'.toString()];\n // Using flushSync to avoid layout thrashing,\n // this will force React to flush all pending updates and only then update the DOM\n if (flushSync !== undefined) {\n flushSync(updateItems);\n } else {\n updateItems();\n }\n }, []);\n\n useResize(ref, resizeCallback);\n\n return (\n <TabNavContext.Provider value={{ containerRef: ref, controlledItems, setControlledItems }}>\n <BaseBox\n as=\"nav\"\n display=\"flex\"\n width=\"100%\"\n alignItems=\"center\"\n alignSelf=\"end\"\n position=\"relative\"\n {...getStyledProps(styledProps)}\n {...metaAttribute({ name: MetaConstants.TabNav })}\n ref={ref}\n >\n <BaseBox display=\"flex\" width=\"100%\" position=\"relative\">\n <BaseBox display=\"flex\" flexDirection=\"row\" width=\"max-content\">\n {children({ items: _items, overflowingItems })}\n </BaseBox>\n </BaseBox>\n </BaseBox>\n </TabNavContext.Provider>\n );\n};\n\nexport { TabNav, TabNavItems };\n"],"names":["TabNavItems","_ref","children","props","_objectWithoutProperties","_excluded","_jsxs","Box","_objectSpread","display","width","gap","position","left","React","Children","map","child","index","_Fragment","_jsx","Divider","margin","variant","orientation","height","makeSize","size","cloneElement","__isInsideTabNavItems","__index","TabNav","_ref2","items","styledProps","_excluded2","ref","useRef","_React$useState","useState","_React$useState2","_slicedToArray","controlledItems","setControlledItems","overflowingItems","filter","item","_item$isAlwaysOverflo","isAlwaysOverflowing","isOverflowing","_items","resizeCallback","useCallback","resizeInfo","target","updateItems","padding","offset","offsetX","getBoundingClientRect","offsetWidth","flushSync","ReactDOM","toString","undefined","useResize","TabNavContext","Provider","value","containerRef","BaseBox","as","alignItems","alignSelf","getStyledProps","metaAttribute","name","MetaConstants","flexDirection"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA,IAAMA,WAAW,GAAG,SAAdA,WAAWA,CAAAC,IAAA,EAA6D;AAAA,EAAA,IAAvDC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;AAAKC,IAAAA,KAAK,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA,CAAA,CAAA;EACvC,oBACEC,IAAA,CAACC,GAAG,EAAAC,aAAA,CAAAA,aAAA,KAAKL,KAAK,CAAA,EAAA,EAAA,EAAA;AAAEM,IAAAA,OAAO,EAAC,MAAM;AAACC,IAAAA,KAAK,EAAC,MAAM;AAACC,IAAAA,GAAG,EAAC,WAAW;AAACC,IAAAA,QAAQ,EAAC,UAAU;AAACC,IAAAA,IAAI,EAAC,MAAM;AAAAX,IAAAA,QAAA,EACxFY,CAAAA,cAAK,CAACC,QAAQ,CAACC,GAAG,CAACd,QAAQ,EAAE,UAACe,KAAK,EAAEC,KAAK,EAAK;MAC9C,oBACEZ,IAAA,CAAAa,QAAA,EAAA;AAAAjB,QAAAA,QAAA,GACGgB,KAAK,GAAG,CAAC,gBACRE,GAAA,CAACC,OAAO,EAAA;AACNC,UAAAA,MAAM,EAAC,MAAM;AACbC,UAAAA,OAAO,EAAC,OAAO;AACfC,UAAAA,WAAW,EAAC,UAAU;AACtBC,UAAAA,MAAM,EAAEC,QAAQ,CAACC,IAAI,CAAC,EAAE,CAAC,CAAA;SAC1B,CAAC,GACA,IAAI,eACPb,cAAK,CAACc,YAAY,CAACX,KAAK,EAAwB;AAC/CY,UAAAA,qBAAqB,EAAE,IAAI;AAC3BC,UAAAA,OAAO,EAAEZ,KAAAA;AACX,SAAC,CAAC,CAAA;AAAA,OACF,CAAC,CAAA;AAEP,KAAC,CAAC,eACFE,GAAA,CAACC,OAAO,EAAA;AAACC,MAAAA,MAAM,EAAC,MAAM;AAACC,MAAAA,OAAO,EAAC,OAAO;AAACC,MAAAA,WAAW,EAAC,UAAU;AAACC,MAAAA,MAAM,EAAEC,QAAQ,CAACC,IAAI,CAAC,EAAE,CAAC,CAAA;AAAE,KAAE,CAAC,CAAA;AAAA,GAAA,CACzF,CAAC,CAAA;AAEV,EAAC;AAED,IAAMI,MAAM,GAAG,SAATA,MAAMA,CAAAC,KAAA,EAI8C;AAAA,EAAA,IAHxD9B,QAAQ,GAAA8B,KAAA,CAAR9B,QAAQ;IACR+B,KAAK,GAAAD,KAAA,CAALC,KAAK;AACFC,IAAAA,WAAW,GAAA9B,wBAAA,CAAA4B,KAAA,EAAAG,UAAA,CAAA,CAAA;AAEd,EAAA,IAAMC,GAAG,GAAGtB,cAAK,CAACuB,MAAM,CAAiB,IAAI,CAAC,CAAA;AAC9C,EAAA,IAAAC,eAAA,GAA8CxB,cAAK,CAACyB,QAAQ,CAAmBN,KAAK,CAAC;IAAAO,gBAAA,GAAAC,cAAA,CAAAH,eAAA,EAAA,CAAA,CAAA;AAA9EI,IAAAA,eAAe,GAAAF,gBAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,kBAAkB,GAAAH,gBAAA,CAAA,CAAA,CAAA,CAAA;AAE1C,EAAA,IAAMI,gBAAgB,GAAGF,eAAe,CAACG,MAAM,CAC7C,UAACC,IAAI,EAAA;AAAA,IAAA,IAAAC,qBAAA,CAAA;AAAA,IAAA,OAAA,CAAAA,qBAAA,GAAKD,IAAI,CAACE,mBAAmB,MAAA,IAAA,IAAAD,qBAAA,KAAA,KAAA,CAAA,GAAAA,qBAAA,GAAID,IAAI,CAACG,aAAa,CAAA;AAAA,GAC1D,CAAC,CAAA;AACD,EAAA,IAAMC,MAAM,GAAGR,eAAe,CAACG,MAAM,CAAC,UAACC,IAAI,EAAA;IAAA,OAAK,CAACA,IAAI,CAACE,mBAAmB,IAAI,CAACF,IAAI,CAACG,aAAa,CAAA;GAAC,CAAA,CAAA;;AAEjG;AACA;AACA;EACA,IAAME,cAAc,GAAGrC,cAAK,CAACsC,WAAW,CAAC,UAACC,UAA+B,EAAW;AAClF,IAAA,IAAMC,MAAM,GAAGD,UAAU,CAACC,MAAqB,CAAA;AAC/C,IAAA,IAAMC,WAAW,GAAG,SAAdA,WAAWA,GAAe;MAC9BZ,kBAAkB,CAAC,UAACV,KAAK,EAAK;QAC5B,OAAOA,KAAK,CAACjB,GAAG,CAAC,UAAC8B,IAAI,EAAE5B,KAAK,EAAK;AAChC;UACA,IAAIA,KAAK,KAAK,CAAC,EAAE,OAAAV,aAAA,CAAAA,aAAA,CAAA,EAAA,EAAYsC,IAAI,CAAA,EAAA,EAAA,EAAA;AAAEG,YAAAA,aAAa,EAAE,KAAA;AAAK,WAAA,CAAA,CAAA;AACvD;AACA;AACA;UACA,IAAMO,OAAO,GAAG,GAAG,CAAA;AACnB,UAAA,IAAMC,MAAM,GAAIX,IAAI,CAACY,OAAO,GAAIF,OAAO,GAAKF,MAAM,CAACK,qBAAqB,EAAE,CAAC9C,IAAI,CAAA;AAC/E,UAAA,IAAI4C,MAAM,GAAGH,MAAM,CAACM,WAAW,EAAE;AAC/B,YAAA,OAAApD,aAAA,CAAAA,aAAA,CAAA,EAAA,EAAYsC,IAAI,CAAA,EAAA,EAAA,EAAA;AAAEG,cAAAA,aAAa,EAAE,IAAA;AAAI,aAAA,CAAA,CAAA;AACvC,WAAC,MAAM;AACL,YAAA,OAAAzC,aAAA,CAAAA,aAAA,CAAA,EAAA,EAAYsC,IAAI,CAAA,EAAA,EAAA,EAAA;AAAEG,cAAAA,aAAa,EAAE,KAAA;AAAK,aAAA,CAAA,CAAA;AACxC,WAAA;AACF,SAAC,CAAC,CAAA;AACJ,OAAC,CAAC,CAAA;KACH,CAAA;AACD;IACA,IAAMY,SAAS,GAAIC,QAAQ,CAAS,WAAW,CAACC,QAAQ,EAAE,CAAC,CAAA;AAC3D;AACA;IACA,IAAIF,SAAS,KAAKG,SAAS,EAAE;MAC3BH,SAAS,CAACN,WAAW,CAAC,CAAA;AACxB,KAAC,MAAM;AACLA,MAAAA,WAAW,EAAE,CAAA;AACf,KAAA;GACD,EAAE,EAAE,CAAC,CAAA;AAENU,EAAAA,SAAS,CAAC7B,GAAG,EAAEe,cAAc,CAAC,CAAA;AAE9B,EAAA,oBACE/B,GAAA,CAAC8C,aAAa,CAACC,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAE;AAAEC,MAAAA,YAAY,EAAEjC,GAAG;AAAEM,MAAAA,eAAe,EAAfA,eAAe;AAAEC,MAAAA,kBAAkB,EAAlBA,kBAAAA;KAAqB;IAAAzC,QAAA,eACxFkB,GAAA,CAACkD,OAAO,EAAA9D,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAA;AACN+D,MAAAA,EAAE,EAAC,KAAK;AACR9D,MAAAA,OAAO,EAAC,MAAM;AACdC,MAAAA,KAAK,EAAC,MAAM;AACZ8D,MAAAA,UAAU,EAAC,QAAQ;AACnBC,MAAAA,SAAS,EAAC,KAAK;AACf7D,MAAAA,QAAQ,EAAC,UAAA;AAAU,KAAA,EACf8D,cAAc,CAACxC,WAAW,CAAC,CAAA,EAC3ByC,aAAa,CAAC;MAAEC,IAAI,EAAEC,aAAa,CAAC9C,MAAAA;AAAO,KAAC,CAAC,CAAA,EAAA,EAAA,EAAA;AACjDK,MAAAA,GAAG,EAAEA,GAAI;MAAAlC,QAAA,eAETkB,GAAA,CAACkD,OAAO,EAAA;AAAC7D,QAAAA,OAAO,EAAC,MAAM;AAACC,QAAAA,KAAK,EAAC,MAAM;AAACE,QAAAA,QAAQ,EAAC,UAAU;QAAAV,QAAA,eACtDkB,GAAA,CAACkD,OAAO,EAAA;AAAC7D,UAAAA,OAAO,EAAC,MAAM;AAACqE,UAAAA,aAAa,EAAC,KAAK;AAACpE,UAAAA,KAAK,EAAC,aAAa;UAAAR,QAAA,EAC5DA,QAAQ,CAAC;AAAE+B,YAAAA,KAAK,EAAEiB,MAAM;AAAEN,YAAAA,gBAAgB,EAAhBA,gBAAAA;WAAkB,CAAA;SACtC,CAAA;OACF,CAAA;KACF,CAAA,CAAA;AAAC,GACY,CAAC,CAAA;AAE7B;;;;"}

package/build/lib/web/production/components/TopNav/TabNav/TabNavContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TabNavContext.js","sources":["../../../../../../../src/components/TopNav/TabNav/TabNavContext.tsx"],"sourcesContent":["import React from 'react';\nimport { throwBladeError } from '~utils/logger';\n\ntype TabNavContextProps = {\n containerRef: React.RefObject<HTMLDivElement>;\n ~~hasOverflow~~: ~~boolean~~;\n};\nconst TabNavContext = React.createContext<TabNavContextProps \| null>(null);\n\nconst useTabNavContext = (): TabNavContextProps => {\n const context = React.useContext(TabNavContext);\n if (!context) {\n throwBladeError({\n message: 'useTabNavContext must be used within a TabNavProvider',\n moduleName: 'TabNav',\n });\n }\n return context!;\n};\n\nexport { TabNavContext, useTabNavContext };\n"],"names":["TabNavContext","React","createContext","useTabNavContext","context","useContext","throwBladeError","message","moduleName"],"mappings":";;;;~~AAOA~~,IAAMA,aAAa,gBAAGC,cAAK,CAACC,aAAa,CAA4B,IAAI,EAAC;AAE1E,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgBA,GAA6B;AACjD,EAAA,IAAMC,OAAO,GAAGH,cAAK,CAACI,UAAU,CAACL,aAAa,CAAC,CAAA;EAC/C,IAAI,CAACI,OAAO,EAAE;AACZE,IAAAA,eAAe,CAAC;AACdC,MAAAA,OAAO,EAAE,uDAAuD;AAChEC,MAAAA,UAAU,EAAE,QAAA;AACd,KAAC,CAAC,CAAA;AACJ,GAAA;AACA,EAAA,OAAOJ,OAAO,CAAA;AAChB;;;;"}
1	+ {"version":3,"file":"TabNavContext.js","sources":["../../../../../../../src/components/TopNav/TabNav/TabNavContext.tsx"],"sourcesContent":["import React from 'react';\nimport type { TabNavItemData } from './types';\nimport { throwBladeError } from '~utils/logger';\n\ntype TabNavContextProps = {\n containerRef: React.RefObject<HTMLDivElement>;\n controlledItems: TabNavItemData[];\n setControlledItems: React.Dispatch<React.SetStateAction<TabNavItemData[]>>;\n};\nconst TabNavContext = React.createContext<TabNavContextProps \| null>(null);\n\nconst useTabNavContext = (): TabNavContextProps => {\n const context = React.useContext(TabNavContext);\n if (!context) {\n throwBladeError({\n message: 'useTabNavContext must be used within a TabNavProvider',\n moduleName: 'TabNav',\n });\n }\n return context!;\n};\n\nexport { TabNavContext, useTabNavContext };\n"],"names":["TabNavContext","React","createContext","useTabNavContext","context","useContext","throwBladeError","message","moduleName"],"mappings":";;;;AASA,IAAMA,aAAa,gBAAGC,cAAK,CAACC,aAAa,CAA4B,IAAI,EAAC;AAE1E,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgBA,GAA6B;AACjD,EAAA,IAAMC,OAAO,GAAGH,cAAK,CAACI,UAAU,CAACL,aAAa,CAAC,CAAA;EAC/C,IAAI,CAACI,OAAO,EAAE;AACZE,IAAAA,eAAe,CAAC;AACdC,MAAAA,OAAO,EAAE,uDAAuD;AAChEC,MAAAA,UAAU,EAAE,QAAA;AACd,KAAC,CAAC,CAAA;AACJ,GAAA;AACA,EAAA,OAAOJ,OAAO,CAAA;AAChB;;;;"}