@razorpay/blade 12.68.0 → 12.89.1

package/build/lib/web/production/components/Table/TablePagination.web.js

@@ -39,8 +39,7 @@ var _TablePagination = function _TablePagination(_ref) {
     currentPaginationState = _useTableContext.currentPaginationState,
     totalItems = _useTableContext.totalItems,
     setPaginationRowSize = _useTableContext.setPaginationRowSize,
-    setPaginationType = _useTableContext.setPaginationType,
-    backgroundColor = _useTableContext.backgroundColor;
+    setPaginationType = _useTableContext.setPaginationType;
 
   // Sync pagination type with table context
   useEffect(function () {
@@ -149,7 +148,6 @@ var _TablePagination = function _TablePagination(_ref) {
     }
   }
   return /*#__PURE__*/jsx(BaseBox, {
-    backgroundColor: backgroundColor,
     children: /*#__PURE__*/jsx(Pagination, _objectSpread({
       totalPages: totalPages,
       selectedPage: currentPage !== undefined ? currentPage + 1 : undefined,

package/build/lib/web/production/components/Table/TablePagination.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"TablePagination.web.js","sources":["../../../../../../src/components/Table/TablePagination.web.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from 'react';\nimport { useTableContext } from './TableContext';\nimport { ComponentIds } from './componentIds';\nimport { tablePagination } from './tokens';\nimport type { TablePaginationProps } from './types';\nimport isUndefined from '~utils/lodashButBetter/isUndefined';\nimport BaseBox from '~components/Box/BaseBox';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { throwBladeError } from '~utils/logger';\nimport { Pagination } from '~components/Pagination';\n\nconst _TablePagination = ({\n  currentPage: controlledCurrentPage,\n  onPageChange,\n  onPageSizeChange,\n  defaultPageSize = tablePagination.defaultPageSize,\n  showPageSizePicker = true,\n  showPageNumberSelector = false,\n  showLabel,\n  label,\n  totalItemCount,\n  paginationType = 'client',\n  ...rest\n}: TablePaginationProps): React.ReactElement => {\n  const {\n    setPaginationPage,\n    currentPaginationState,\n    totalItems,\n    setPaginationRowSize,\n    setPaginationType,\n    backgroundColor,\n  } = useTableContext();\n\n  // Sync pagination type with table context\n  useEffect(() => {\n    setPaginationType(paginationType);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [paginationType]);\n\n  // Calculate totalPages - use provided value, or calculate from totalItemCount\n  const totalPages = useMemo(() => {\n    if (\n      !isUndefined(totalItemCount) &&\n      currentPaginationState &&\n      !isUndefined(currentPaginationState.size)\n    ) {\n      return Math.ceil(totalItemCount / currentPaginationState.size);\n    }\n    if (\n      paginationType === 'client' &&\n      totalItems &&\n      currentPaginationState &&\n      !isUndefined(currentPaginationState.size)\n    ) {\n      return Math.ceil(totalItems / currentPaginationState.size);\n    }\n    return 1;\n  }, [totalItemCount, currentPaginationState, totalItems, paginationType]);\n\n  // Determine current page - use controlled value, fallback to table context, or default to 0 (0-indexed)\n  const currentPage = useMemo(() => {\n    if (!isUndefined(controlledCurrentPage)) {\n      return controlledCurrentPage;\n    }\n    if (!isUndefined(currentPaginationState?.page)) {\n      return currentPaginationState?.page;\n    }\n    return 0;\n  }, [controlledCurrentPage, currentPaginationState?.page]);\n\n  // Determine current page size - fallback to table context, or default\n  const currentPageSize = useMemo(() => {\n    if (!isUndefined(currentPaginationState?.size)) {\n      return currentPaginationState?.size;\n    }\n    return defaultPageSize;\n  }, [currentPaginationState?.size, defaultPageSize]);\n\n  // Generate default label for table context\n  const defaultLabel = useMemo(() => {\n    if (label) {\n      return label;\n    }\n    if (currentPaginationState && totalItemCount) {\n      const start = currentPaginationState.page * currentPaginationState.size + 1;\n      const end = Math.min(\n        (currentPaginationState.page + 1) * currentPaginationState.size,\n        totalItemCount,\n      );\n      return `Showing ${start}-${end} Items`;\n    }\n    if (currentPaginationState && totalItems) {\n      const start = currentPaginationState.page * currentPaginationState.size + 1;\n      const end = Math.min(\n        (currentPaginationState.page + 1) * currentPaginationState.size,\n        totalItems,\n      );\n      return `Showing ${start}-${end} Items`;\n    }\n    if (totalItemCount) {\n      return `Showing 1 to ${totalItemCount} Items`;\n    }\n    if (totalItems) {\n      return `Showing 1 to ${totalItems} Items`;\n    }\n    return 'Showing Items';\n  }, [label, currentPaginationState, totalItemCount, totalItems]);\n\n  // Sync page size with table context\n  useEffect(() => {\n    if (!isUndefined(currentPageSize)) {\n      setPaginationRowSize(currentPageSize);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [currentPageSize]);\n\n  // Sync page with table context\n  useEffect(() => {\n    if (!isUndefined(currentPage) && currentPaginationState?.page !== currentPage) {\n      setPaginationPage(currentPage);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [currentPage, currentPaginationState?.page]);\n\n  // Handle page change - update table context and call callback\n  // Pagination component uses 1-indexed pages, but Table uses 0-indexed\n  const handlePageChange = ({ page }: { page: number }): void => {\n    // Convert from 1-indexed (Pagination) to 0-indexed (Table)\n    const zeroIndexedPage = page - 1;\n    onPageChange?.({ page: zeroIndexedPage });\n    setPaginationPage(zeroIndexedPage);\n  };\n\n  // Handle page size change - update table context and call callback\n  const handlePageSizeChange = ({ pageSize }: { pageSize: number }): void => {\n    onPageSizeChange?.({ pageSize });\n    setPaginationRowSize(pageSize);\n  };\n\n  // Validation for server-side pagination\n  if (__DEV__) {\n    if (paginationType === 'server' && (isUndefined(totalItemCount) || isUndefined(onPageChange))) {\n      throwBladeError({\n        message:\n          '`onPageChange` and `totalItemCount` props are required when paginationType is server.',\n        moduleName: 'TablePagination',\n      });\n    }\n  }\n\n  return (\n    <BaseBox backgroundColor={backgroundColor}>\n      <Pagination\n        totalPages={totalPages}\n        selectedPage={currentPage !== undefined ? currentPage + 1 : undefined}\n        defaultSelectedPage={1}\n        onSelectedPageChange={handlePageChange}\n        defaultPageSize={defaultPageSize}\n        pageSize={currentPageSize as 10 | 25 | 50}\n        onPageSizeChange={handlePageSizeChange}\n        showPageSizePicker={showPageSizePicker}\n        showPageNumberSelector={showPageNumberSelector}\n        showLabel={showLabel}\n        label={defaultLabel}\n        pageSizeLabel=\"rows / page\"\n        {...rest}\n      />\n    </BaseBox>\n  );\n};\n\nconst TablePagination = assignWithoutSideEffects(_TablePagination, {\n  componentId: ComponentIds.TablePagination,\n});\n\nexport { TablePagination };\n"],"names":["_TablePagination","_ref","controlledCurrentPage","currentPage","onPageChange","onPageSizeChange","_ref$defaultPageSize","defaultPageSize","tablePagination","_ref$showPageSizePick","showPageSizePicker","_ref$showPageNumberSe","showPageNumberSelector","showLabel","label","totalItemCount","_ref$paginationType","paginationType","rest","_objectWithoutProperties","_excluded","_useTableContext","useTableContext","setPaginationPage","currentPaginationState","totalItems","setPaginationRowSize","setPaginationType","backgroundColor","useEffect","totalPages","useMemo","isUndefined","size","Math","ceil","page","currentPageSize","defaultLabel","start","end","min","concat","handlePageChange","_ref2","zeroIndexedPage","handlePageSizeChange","_ref3","pageSize","throwBladeError","message","moduleName","_jsx","BaseBox","children","Pagination","_objectSpread","selectedPage","undefined","defaultSelectedPage","onSelectedPageChange","pageSizeLabel","TablePagination","assignWithoutSideEffects","componentId","ComponentIds"],"mappings":"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"}
+{"version":3,"file":"TablePagination.web.js","sources":["../../../../../../src/components/Table/TablePagination.web.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from 'react';\nimport { useTableContext } from './TableContext';\nimport { ComponentIds } from './componentIds';\nimport { tablePagination } from './tokens';\nimport type { TablePaginationProps } from './types';\nimport isUndefined from '~utils/lodashButBetter/isUndefined';\nimport BaseBox from '~components/Box/BaseBox';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { throwBladeError } from '~utils/logger';\nimport { Pagination } from '~components/Pagination';\n\nconst _TablePagination = ({\n  currentPage: controlledCurrentPage,\n  onPageChange,\n  onPageSizeChange,\n  defaultPageSize = tablePagination.defaultPageSize,\n  showPageSizePicker = true,\n  showPageNumberSelector = false,\n  showLabel,\n  label,\n  totalItemCount,\n  paginationType = 'client',\n  ...rest\n}: TablePaginationProps): React.ReactElement => {\n  const {\n    setPaginationPage,\n    currentPaginationState,\n    totalItems,\n    setPaginationRowSize,\n    setPaginationType,\n  } = useTableContext();\n\n  // Sync pagination type with table context\n  useEffect(() => {\n    setPaginationType(paginationType);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [paginationType]);\n\n  // Calculate totalPages - use provided value, or calculate from totalItemCount\n  const totalPages = useMemo(() => {\n    if (\n      !isUndefined(totalItemCount) &&\n      currentPaginationState &&\n      !isUndefined(currentPaginationState.size)\n    ) {\n      return Math.ceil(totalItemCount / currentPaginationState.size);\n    }\n    if (\n      paginationType === 'client' &&\n      totalItems &&\n      currentPaginationState &&\n      !isUndefined(currentPaginationState.size)\n    ) {\n      return Math.ceil(totalItems / currentPaginationState.size);\n    }\n    return 1;\n  }, [totalItemCount, currentPaginationState, totalItems, paginationType]);\n\n  // Determine current page - use controlled value, fallback to table context, or default to 0 (0-indexed)\n  const currentPage = useMemo(() => {\n    if (!isUndefined(controlledCurrentPage)) {\n      return controlledCurrentPage;\n    }\n    if (!isUndefined(currentPaginationState?.page)) {\n      return currentPaginationState?.page;\n    }\n    return 0;\n  }, [controlledCurrentPage, currentPaginationState?.page]);\n\n  // Determine current page size - fallback to table context, or default\n  const currentPageSize = useMemo(() => {\n    if (!isUndefined(currentPaginationState?.size)) {\n      return currentPaginationState?.size;\n    }\n    return defaultPageSize;\n  }, [currentPaginationState?.size, defaultPageSize]);\n\n  // Generate default label for table context\n  const defaultLabel = useMemo(() => {\n    if (label) {\n      return label;\n    }\n    if (currentPaginationState && totalItemCount) {\n      const start = currentPaginationState.page * currentPaginationState.size + 1;\n      const end = Math.min(\n        (currentPaginationState.page + 1) * currentPaginationState.size,\n        totalItemCount,\n      );\n      return `Showing ${start}-${end} Items`;\n    }\n    if (currentPaginationState && totalItems) {\n      const start = currentPaginationState.page * currentPaginationState.size + 1;\n      const end = Math.min(\n        (currentPaginationState.page + 1) * currentPaginationState.size,\n        totalItems,\n      );\n      return `Showing ${start}-${end} Items`;\n    }\n    if (totalItemCount) {\n      return `Showing 1 to ${totalItemCount} Items`;\n    }\n    if (totalItems) {\n      return `Showing 1 to ${totalItems} Items`;\n    }\n    return 'Showing Items';\n  }, [label, currentPaginationState, totalItemCount, totalItems]);\n\n  // Sync page size with table context\n  useEffect(() => {\n    if (!isUndefined(currentPageSize)) {\n      setPaginationRowSize(currentPageSize);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [currentPageSize]);\n\n  // Sync page with table context\n  useEffect(() => {\n    if (!isUndefined(currentPage) && currentPaginationState?.page !== currentPage) {\n      setPaginationPage(currentPage);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [currentPage, currentPaginationState?.page]);\n\n  // Handle page change - update table context and call callback\n  // Pagination component uses 1-indexed pages, but Table uses 0-indexed\n  const handlePageChange = ({ page }: { page: number }): void => {\n    // Convert from 1-indexed (Pagination) to 0-indexed (Table)\n    const zeroIndexedPage = page - 1;\n    onPageChange?.({ page: zeroIndexedPage });\n    setPaginationPage(zeroIndexedPage);\n  };\n\n  // Handle page size change - update table context and call callback\n  const handlePageSizeChange = ({ pageSize }: { pageSize: number }): void => {\n    onPageSizeChange?.({ pageSize });\n    setPaginationRowSize(pageSize);\n  };\n\n  // Validation for server-side pagination\n  if (__DEV__) {\n    if (paginationType === 'server' && (isUndefined(totalItemCount) || isUndefined(onPageChange))) {\n      throwBladeError({\n        message:\n          '`onPageChange` and `totalItemCount` props are required when paginationType is server.',\n        moduleName: 'TablePagination',\n      });\n    }\n  }\n\n  return (\n    <BaseBox>\n      <Pagination\n        totalPages={totalPages}\n        selectedPage={currentPage !== undefined ? currentPage + 1 : undefined}\n        defaultSelectedPage={1}\n        onSelectedPageChange={handlePageChange}\n        defaultPageSize={defaultPageSize}\n        pageSize={currentPageSize as 10 | 25 | 50}\n        onPageSizeChange={handlePageSizeChange}\n        showPageSizePicker={showPageSizePicker}\n        showPageNumberSelector={showPageNumberSelector}\n        showLabel={showLabel}\n        label={defaultLabel}\n        pageSizeLabel=\"rows / page\"\n        {...rest}\n      />\n    </BaseBox>\n  );\n};\n\nconst TablePagination = assignWithoutSideEffects(_TablePagination, {\n  componentId: ComponentIds.TablePagination,\n});\n\nexport { TablePagination };\n"],"names":["_TablePagination","_ref","controlledCurrentPage","currentPage","onPageChange","onPageSizeChange","_ref$defaultPageSize","defaultPageSize","tablePagination","_ref$showPageSizePick","showPageSizePicker","_ref$showPageNumberSe","showPageNumberSelector","showLabel","label","totalItemCount","_ref$paginationType","paginationType","rest","_objectWithoutProperties","_excluded","_useTableContext","useTableContext","setPaginationPage","currentPaginationState","totalItems","setPaginationRowSize","setPaginationType","useEffect","totalPages","useMemo","isUndefined","size","Math","ceil","page","currentPageSize","defaultLabel","start","end","min","concat","handlePageChange","_ref2","zeroIndexedPage","handlePageSizeChange","_ref3","pageSize","throwBladeError","message","moduleName","_jsx","BaseBox","children","Pagination","_objectSpread","selectedPage","undefined","defaultSelectedPage","onSelectedPageChange","pageSizeLabel","TablePagination","assignWithoutSideEffects","componentId","ComponentIds"],"mappings":"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"}

package/build/lib/web/production/components/Table/TableSurface.web.js

@@ -0,0 +1,39 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import styled from 'styled-components';
+import '../../utils/makeSurfaceStyles/index.js';
+import '../Box/BaseBox/index.js';
+import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
+import { getSurfaceBoxShadow, getSurfaceStyles } from '../../utils/makeSurfaceStyles/makeSurfaceStyles.js';
+
+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 TableSurface = /*#__PURE__*/styled(BaseBox).withConfig({
+  displayName: "TableSurfaceweb__TableSurface",
+  componentId: "maose1-0"
+})(function (_ref) {
+  var theme = _ref.theme,
+    colorScheme = _ref.colorScheme,
+    isInsideListView = _ref.isInsideListView;
+  var isDarkMode = colorScheme === 'dark';
+  var _getSurfaceBoxShadow = getSurfaceBoxShadow(theme, colorScheme),
+    elevation = _getSurfaceBoxShadow.elevation,
+    top = _getSurfaceBoxShadow.top;
+  var borderColor = theme.colors.interactive.border.gray.disabled;
+  return _objectSpread({
+    width: '100%',
+    display: 'flex',
+    position: 'relative',
+    flexDirection: 'column',
+    boxSizing: 'border-box'
+  }, !isInsideListView && _objectSpread(_objectSpread({}, getSurfaceStyles(theme, colorScheme)), {}, {
+    boxShadow: "".concat(elevation, ", ").concat(top),
+    borderLeft: "1px solid ".concat(borderColor),
+    borderRight: "1px solid ".concat(borderColor),
+    borderBottom: "1px solid ".concat(borderColor)
+  }, !isDarkMode && {
+    borderTop: "1px solid ".concat(borderColor)
+  }));
+});
+
+export { TableSurface };
+//# sourceMappingURL=TableSurface.web.js.map

package/build/lib/web/production/components/Table/TableSurface.web.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableSurface.web.js","sources":["../../../../../../src/components/Table/TableSurface.web.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport type { ColorSchemeNames } from '~tokens/theme';\nimport { getSurfaceBoxShadow, getSurfaceStyles } from '~utils/makeSurfaceStyles';\nimport BaseBox from '~components/Box/BaseBox';\n\ntype TableSurfaceProps = {\n  colorScheme: ColorSchemeNames;\n  isInsideListView: boolean;\n};\n\nconst TableSurface = styled(BaseBox)<TableSurfaceProps>(\n  ({ theme, colorScheme, isInsideListView }) => {\n    const isDarkMode = colorScheme === 'dark';\n    const { elevation, top } = getSurfaceBoxShadow(theme, colorScheme);\n    const borderColor = theme.colors.interactive.border.gray.disabled;\n\n    return {\n      width: '100%',\n      display: 'flex',\n      position: 'relative',\n      flexDirection: 'column',\n      boxSizing: 'border-box',\n      // The inset box-shadow border from getSurfaceStyles is covered by child elements\n      // (e.g. ReactTable) that have opaque backgrounds and fill edge-to-edge.\n      // We use real CSS border instead, which stays visible because overflow:hidden\n      // clips children to the padding box (inside the border).\n      ...(!isInsideListView && {\n        ...getSurfaceStyles(theme, colorScheme),\n        boxShadow: `${elevation}, ${top}`,\n        borderLeft: `1px solid ${borderColor}`,\n        borderRight: `1px solid ${borderColor}`,\n        borderBottom: `1px solid ${borderColor}`,\n        ...(!isDarkMode && { borderTop: `1px solid ${borderColor}` }),\n      }),\n    };\n  },\n);\n\nexport { TableSurface };\n"],"names":["TableSurface","styled","BaseBox","withConfig","displayName","componentId","_ref","theme","colorScheme","isInsideListView","isDarkMode","_getSurfaceBoxShadow","getSurfaceBoxShadow","elevation","top","borderColor","colors","interactive","border","gray","disabled","_objectSpread","width","display","position","flexDirection","boxSizing","getSurfaceStyles","boxShadow","concat","borderLeft","borderRight","borderBottom","borderTop"],"mappings":";;;;;;;;;AAUA,IAAMA,YAAY,gBAAGC,MAAM,CAACC,OAAO,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,+BAAA;EAAAC,WAAA,EAAA,UAAA;AAAA,CAClC,CAAA,CAAA,UAAAC,IAAA,EAA8C;AAAA,EAAA,IAA3CC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAEC,WAAW,GAAAF,IAAA,CAAXE,WAAW;IAAEC,gBAAgB,GAAAH,IAAA,CAAhBG,gBAAgB,CAAA;AACrC,EAAA,IAAMC,UAAU,GAAGF,WAAW,KAAK,MAAM,CAAA;AACzC,EAAA,IAAAG,oBAAA,GAA2BC,mBAAmB,CAACL,KAAK,EAAEC,WAAW,CAAC;IAA1DK,SAAS,GAAAF,oBAAA,CAATE,SAAS;IAAEC,GAAG,GAAAH,oBAAA,CAAHG,GAAG,CAAA;AACtB,EAAA,IAAMC,WAAW,GAAGR,KAAK,CAACS,MAAM,CAACC,WAAW,CAACC,MAAM,CAACC,IAAI,CAACC,QAAQ,CAAA;AAEjE,EAAA,OAAAC,aAAA,CAAA;AACEC,IAAAA,KAAK,EAAE,MAAM;AACbC,IAAAA,OAAO,EAAE,MAAM;AACfC,IAAAA,QAAQ,EAAE,UAAU;AACpBC,IAAAA,aAAa,EAAE,QAAQ;AACvBC,IAAAA,SAAS,EAAE,YAAA;AAAY,GAAA,EAKnB,CAACjB,gBAAgB,IAAAY,aAAA,CAAAA,aAAA,CAChBM,EAAAA,EAAAA,gBAAgB,CAACpB,KAAK,EAAEC,WAAW,CAAC,CAAA,EAAA,EAAA,EAAA;IACvCoB,SAAS,EAAA,EAAA,CAAAC,MAAA,CAAKhB,SAAS,QAAAgB,MAAA,CAAKf,GAAG,CAAE;AACjCgB,IAAAA,UAAU,EAAAD,YAAAA,CAAAA,MAAA,CAAed,WAAW,CAAE;AACtCgB,IAAAA,WAAW,EAAAF,YAAAA,CAAAA,MAAA,CAAed,WAAW,CAAE;IACvCiB,YAAY,EAAA,YAAA,CAAAH,MAAA,CAAed,WAAW,CAAA;GAClC,EAAA,CAACL,UAAU,IAAI;IAAEuB,SAAS,EAAA,YAAA,CAAAJ,MAAA,CAAed,WAAW,CAAA;AAAG,GAAC,CAC7D,CAAA,CAAA;AAEL,CAAC;;;;"}

package/build/lib/web/production/components/Table/TableToolbar.web.js

@@ -5,16 +5,16 @@ import styled from 'styled-components';
 import { ComponentIds } from './componentIds.js';
 import { tableToolbar } from './tokens.js';
 import { useTableContext } from './TableContext.js';
+import '../../utils/index.js';
+import '../../utils/makeAnalyticsAttribute/index.js';
+import getIn from '../../utils/lodashButBetter/get.js';
 import '../Box/BaseBox/index.js';
 import '../Typography/index.js';
 import '../../utils/assignWithoutSideEffects/index.js';
 import '../Divider/index.js';
 import '../Link/index.js';
 import '../Box/styledProps/index.js';
-import '../../utils/index.js';
 import '../BladeProvider/index.js';
-import getIn from '../../utils/lodashButBetter/get.js';
-import '../../utils/makeAnalyticsAttribute/index.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import useTheme from '../BladeProvider/useTheme.js';
 import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
@@ -62,11 +62,11 @@ var _TableToolbar = function _TableToolbar(_ref3) {
     title = _ref3.title,
     controlledSelectedTitle = _ref3.selectedTitle;
   var _useTableContext = useTableContext(),
+    selectionType = _useTableContext.selectionType,
     selectedRows = _useTableContext.selectedRows,
     deselectAllRows = _useTableContext.deselectAllRows,
     currentPaginationState = _useTableContext.currentPaginationState,
     totalItems = _useTableContext.totalItems,
-    backgroundColor = _useTableContext.backgroundColor,
     tableToolbarPlacement = _useTableContext.tableToolbarPlacement;
   var _useTheme2 = useTheme(),
     platform = _useTheme2.platform;
@@ -85,7 +85,6 @@ var _TableToolbar = function _TableToolbar(_ref3) {
     children: "Deselect"
   });
   return /*#__PURE__*/jsx(BaseBox, {
-    backgroundColor: backgroundColor,
     children: /*#__PURE__*/jsxs(ToolbarWrapper, {
       display: "flex",
       backgroundColor: tableToolbar.backgroundColor,
@@ -93,9 +92,6 @@ var _TableToolbar = function _TableToolbar(_ref3) {
       flexWrap: "wrap",
       flexDirection: onMobile && tableToolbarPlacement === 'inline' ? 'column' : 'row',
       gap: "spacing.5",
-      borderWidth: "thin",
-      borderColor: "surface.border.gray.muted",
-      borderBottomWidth: "none",
       minHeight: makeSize(tableToolbar.minHeight),
       children: [/*#__PURE__*/jsxs(BaseBox, {
         display: "flex",
@@ -108,10 +104,10 @@ var _TableToolbar = function _TableToolbar(_ref3) {
             color: isSelected ? 'surface.text.gray.normal' : 'surface.text.gray.subtle',
             children: (_ref4 = selectedTitle !== null && selectedTitle !== void 0 ? selectedTitle : title) !== null && _ref4 !== void 0 ? _ref4 : defaultTitle
           })
-        }), /*#__PURE__*/jsxs(BaseBox, {
+        }), selectionType !== 'none' && /*#__PURE__*/jsxs(BaseBox, {
           display: "flex",
           marginLeft: "spacing.3",
-          height: "100%",
+          height: "spacing.6",
           children: [/*#__PURE__*/jsx(Divider, {
             orientation: "vertical",
             thickness: "thick"

package/build/lib/web/production/components/Table/TableToolbar.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableToolbar.web.js","sources":["../../../../../../src/components/Table/TableToolbar.web.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { ComponentIds } from './componentIds';\nimport { tableToolbar } from './tokens';\nimport { useTableContext } from './TableContext';\nimport type { TableToolbarProps, TableToolbarActionsProps } from './types';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Text } from '~components/Typography';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { Divider } from '~components/Divider';\nimport { Link } from '~components/Link';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport { makeMotionTime, makeSize } from '~utils';\nimport { useTheme } from '~components/BladeProvider';\nimport getIn from '~utils/lodashButBetter/get';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\n/**\n * TableToolbarActions is a component that is used to render actions in the TableToolbar.\n * It is a flex container that will render its children in a row on desktop and a column on mobile.\n * @param children - any react element\n * @param styledProps - accepts all of the styled props from Box\n */\nconst _TableToolbarActions = ({\n  children,\n  ...rest\n}: TableToolbarActionsProps): React.ReactElement => {\n  const { platform } = useTheme();\n  const onMobile = platform === 'onMobile';\n  return (\n    <BaseBox\n      display=\"flex\"\n      flex={onMobile ? 1 : 0}\n      justifyContent={onMobile ? 'flex-start' : 'flex-end'}\n      {...getStyledProps(rest)}\n      {...makeAnalyticsAttribute(rest)}\n    >\n      {children}\n    </BaseBox>\n  );\n};\n\nconst TableToolbarActions = assignWithoutSideEffects(_TableToolbarActions, {\n  componentId: ComponentIds.TableToolbarActions,\n});\n\nconst ToolbarWrapper = styled(BaseBox)(({ theme }) => ({\n  transition: `background-color ${makeMotionTime(\n    getIn(theme.motion, tableToolbar.backgroundColorMotionDuration),\n  )} ${getIn(theme.motion, tableToolbar.backgroundColorMotionEasing)}`,\n}));\n\nconst _TableToolbar = ({\n  children,\n  title,\n  selectedTitle: controlledSelectedTitle,\n}: TableToolbarProps): React.ReactElement => {\n  const {\n    selectedRows,\n    deselectAllRows,\n    currentPaginationState,\n    totalItems,\n    backgroundColor,\n    tableToolbarPlacement,\n  } = useTableContext();\n  const { platform } = useTheme();\n  const isSelected = selectedRows && selectedRows.length > 0;\n\n  const defaultTitle = currentPaginationState\n    ? `Showing ${currentPaginationState.page * currentPaginationState.size + 1}-${\n        currentPaginationState.page * currentPaginationState.size + currentPaginationState.size\n      } Items`\n    : `Showing 1-${totalItems} Items`;\n  const selectedItemsCount = selectedRows ? selectedRows.length : 0;\n  const selectedTitle = isSelected\n    ? controlledSelectedTitle ??\n      `${selectedRows.length} ${selectedItemsCount === 1 ? 'Item' : 'Items'} Selected`\n    : null;\n\n  const onMobile = platform === 'onMobile';\n\n  const deselectButton = (\n    <Link size=\"small\" marginLeft=\"spacing.3\" variant=\"button\" onClick={() => deselectAllRows()}>\n      Deselect\n    </Link>\n  );\n\n  return (\n    <BaseBox backgroundColor={backgroundColor}>\n      <ToolbarWrapper\n        display=\"flex\"\n        backgroundColor={tableToolbar.backgroundColor}\n        padding={tableToolbar.padding}\n        flexWrap=\"wrap\"\n        flexDirection={onMobile && tableToolbarPlacement === 'inline' ? 'column' : 'row'}\n        gap=\"spacing.5\"\n        borderWidth=\"thin\"\n        borderColor=\"surface.border.gray.muted\"\n        borderBottomWidth=\"none\"\n        minHeight={makeSize(tableToolbar.minHeight)}\n      >\n        <BaseBox display=\"flex\" alignItems=\"center\" flex={1}>\n          <BaseBox>\n            <Text\n              size=\"small\"\n              weight=\"medium\"\n              color={isSelected ? 'surface.text.gray.normal' : 'surface.text.gray.subtle'}\n            >\n              {selectedTitle ?? title ?? defaultTitle}\n            </Text>\n          </BaseBox>\n\n          <BaseBox display=\"flex\" marginLeft=\"spacing.3\" height=\"100%\">\n            <Divider orientation=\"vertical\" thickness=\"thick\" />\n            {deselectButton}\n          </BaseBox>\n        </BaseBox>\n        {children}\n      </ToolbarWrapper>\n    </BaseBox>\n  );\n};\n\nconst TableToolbar = assignWithoutSideEffects(_TableToolbar, {\n  componentId: ComponentIds.TableToolbar,\n});\n\nexport { TableToolbar, TableToolbarActions };\n"],"names":["_TableToolbarActions","_ref","children","rest","_objectWithoutProperties","_excluded","_useTheme","useTheme","platform","onMobile","_jsx","BaseBox","_objectSpread","display","flex","justifyContent","getStyledProps","makeAnalyticsAttribute","TableToolbarActions","assignWithoutSideEffects","componentId","ComponentIds","ToolbarWrapper","styled","withConfig","displayName","_ref2","theme","transition","concat","makeMotionTime","getIn","motion","tableToolbar","backgroundColorMotionDuration","backgroundColorMotionEasing","_TableToolbar","_ref3","_ref4","title","controlledSelectedTitle","selectedTitle","_useTableContext","useTableContext","selectedRows","deselectAllRows","currentPaginationState","totalItems","backgroundColor","tableToolbarPlacement","_useTheme2","isSelected","length","defaultTitle","page","size","selectedItemsCount","deselectButton","Link","marginLeft","variant","onClick","_jsxs","padding","flexWrap","flexDirection","gap","borderWidth","borderColor","borderBottomWidth","minHeight","makeSize","alignItems","Text","weight","color","height","Divider","orientation","thickness","TableToolbar"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBA,IAAMA,oBAAoB,GAAG,SAAvBA,oBAAoBA,CAAAC,IAAA,EAG0B;AAAA,EAAA,IAFlDC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;AACLC,IAAAA,IAAI,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA,CAAA,CAAA;AAEP,EAAA,IAAAC,SAAA,GAAqBC,QAAQ,EAAE;IAAvBC,QAAQ,GAAAF,SAAA,CAARE,QAAQ,CAAA;AAChB,EAAA,IAAMC,QAAQ,GAAGD,QAAQ,KAAK,UAAU,CAAA;EACxC,oBACEE,GAAA,CAACC,OAAO,EAAAC,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAA;AACNC,IAAAA,OAAO,EAAC,MAAM;AACdC,IAAAA,IAAI,EAAEL,QAAQ,GAAG,CAAC,GAAG,CAAE;AACvBM,IAAAA,cAAc,EAAEN,QAAQ,GAAG,YAAY,GAAG,UAAA;GACtCO,EAAAA,cAAc,CAACb,IAAI,CAAC,GACpBc,sBAAsB,CAACd,IAAI,CAAC,CAAA,EAAA,EAAA,EAAA;AAAAD,IAAAA,QAAA,EAE/BA,QAAAA;AAAQ,GAAA,CACF,CAAC,CAAA;AAEd,CAAC,CAAA;AAED,IAAMgB,mBAAmB,gBAAGC,wBAAwB,CAACnB,oBAAoB,EAAE;EACzEoB,WAAW,EAAEC,YAAY,CAACH,mBAAAA;AAC5B,CAAC,EAAC;AAEF,IAAMI,cAAc,gBAAGC,MAAM,CAACZ,OAAO,CAAC,CAAAa,UAAA,CAAA;EAAAC,WAAA,EAAA,iCAAA;EAAAL,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAAC,UAAAM,KAAA,EAAA;AAAA,EAAA,IAAGC,KAAK,GAAAD,KAAA,CAALC,KAAK,CAAA;EAAA,OAAQ;AACrDC,IAAAA,UAAU,EAAAC,mBAAAA,CAAAA,MAAA,CAAsBC,cAAc,CAC5CC,KAAK,CAACJ,KAAK,CAACK,MAAM,EAAEC,YAAY,CAACC,6BAA6B,CAChE,CAAC,EAAAL,GAAAA,CAAAA,CAAAA,MAAA,CAAIE,KAAK,CAACJ,KAAK,CAACK,MAAM,EAAEC,YAAY,CAACE,2BAA2B,CAAC,CAAA;GACnE,CAAA;AAAA,CAAC,CAAC,CAAA;AAEH,IAAMC,aAAa,GAAG,SAAhBA,aAAaA,CAAAC,KAAA,EAI0B;AAAA,EAAA,IAAAC,KAAA,CAAA;AAAA,EAAA,IAH3CpC,QAAQ,GAAAmC,KAAA,CAARnC,QAAQ;IACRqC,KAAK,GAAAF,KAAA,CAALE,KAAK;IACUC,uBAAuB,GAAAH,KAAA,CAAtCI,aAAa,CAAA;AAEb,EAAA,IAAAC,gBAAA,GAOIC,eAAe,EAAE;IANnBC,YAAY,GAAAF,gBAAA,CAAZE,YAAY;IACZC,eAAe,GAAAH,gBAAA,CAAfG,eAAe;IACfC,sBAAsB,GAAAJ,gBAAA,CAAtBI,sBAAsB;IACtBC,UAAU,GAAAL,gBAAA,CAAVK,UAAU;IACVC,eAAe,GAAAN,gBAAA,CAAfM,eAAe;IACfC,qBAAqB,GAAAP,gBAAA,CAArBO,qBAAqB,CAAA;AAEvB,EAAA,IAAAC,UAAA,GAAqB3C,QAAQ,EAAE;IAAvBC,QAAQ,GAAA0C,UAAA,CAAR1C,QAAQ,CAAA;EAChB,IAAM2C,UAAU,GAAGP,YAAY,IAAIA,YAAY,CAACQ,MAAM,GAAG,CAAC,CAAA;AAE1D,EAAA,IAAMC,YAAY,GAAGP,sBAAsB,GAAA,UAAA,CAAAjB,MAAA,CAC5BiB,sBAAsB,CAACQ,IAAI,GAAGR,sBAAsB,CAACS,IAAI,GAAG,CAAC,EAAA,GAAA,CAAA,CAAA1B,MAAA,CACtEiB,sBAAsB,CAACQ,IAAI,GAAGR,sBAAsB,CAACS,IAAI,GAAGT,sBAAsB,CAACS,IAAI,EAAA,QAAA,CAAA,GAAA,YAAA,CAAA1B,MAAA,CAE5EkB,UAAU,EAAQ,QAAA,CAAA,CAAA;EACnC,IAAMS,kBAAkB,GAAGZ,YAAY,GAAGA,YAAY,CAACQ,MAAM,GAAG,CAAC,CAAA;EACjE,IAAMX,aAAa,GAAGU,UAAU,GAC5BX,uBAAuB,KAAvBA,IAAAA,IAAAA,uBAAuB,KAAvBA,KAAAA,CAAAA,GAAAA,uBAAuB,GAAAX,EAAAA,CAAAA,MAAA,CACpBe,YAAY,CAACQ,MAAM,EAAA,GAAA,CAAA,CAAAvB,MAAA,CAAI2B,kBAAkB,KAAK,CAAC,GAAG,MAAM,GAAG,OAAO,EAAA,WAAA,CAAA,GACrE,IAAI,CAAA;AAER,EAAA,IAAM/C,QAAQ,GAAGD,QAAQ,KAAK,UAAU,CAAA;AAExC,EAAA,IAAMiD,cAAc,gBAClB/C,GAAA,CAACgD,IAAI,EAAA;AAACH,IAAAA,IAAI,EAAC,OAAO;AAACI,IAAAA,UAAU,EAAC,WAAW;AAACC,IAAAA,OAAO,EAAC,QAAQ;IAACC,OAAO,EAAE,SAATA,OAAOA,GAAA;MAAA,OAAQhB,eAAe,EAAE,CAAA;KAAC;AAAA3C,IAAAA,QAAA,EAAC,UAAA;AAE7F,GAAM,CACP,CAAA;EAED,oBACEQ,GAAA,CAACC,OAAO,EAAA;AAACqC,IAAAA,eAAe,EAAEA,eAAgB;IAAA9C,QAAA,eACxC4D,IAAA,CAACxC,cAAc,EAAA;AACbT,MAAAA,OAAO,EAAC,MAAM;MACdmC,eAAe,EAAEf,YAAY,CAACe,eAAgB;MAC9Ce,OAAO,EAAE9B,YAAY,CAAC8B,OAAQ;AAC9BC,MAAAA,QAAQ,EAAC,MAAM;MACfC,aAAa,EAAExD,QAAQ,IAAIwC,qBAAqB,KAAK,QAAQ,GAAG,QAAQ,GAAG,KAAM;AACjFiB,MAAAA,GAAG,EAAC,WAAW;AACfC,MAAAA,WAAW,EAAC,MAAM;AAClBC,MAAAA,WAAW,EAAC,2BAA2B;AACvCC,MAAAA,iBAAiB,EAAC,MAAM;AACxBC,MAAAA,SAAS,EAAEC,QAAQ,CAACtC,YAAY,CAACqC,SAAS,CAAE;MAAApE,QAAA,EAAA,cAE5C4D,IAAA,CAACnD,OAAO,EAAA;AAACE,QAAAA,OAAO,EAAC,MAAM;AAAC2D,QAAAA,UAAU,EAAC,QAAQ;AAAC1D,QAAAA,IAAI,EAAE,CAAE;QAAAZ,QAAA,EAAA,cAClDQ,GAAA,CAACC,OAAO,EAAA;UAAAT,QAAA,eACNQ,GAAA,CAAC+D,IAAI,EAAA;AACHlB,YAAAA,IAAI,EAAC,OAAO;AACZmB,YAAAA,MAAM,EAAC,QAAQ;AACfC,YAAAA,KAAK,EAAExB,UAAU,GAAG,0BAA0B,GAAG,0BAA2B;AAAAjD,YAAAA,QAAA,EAAAoC,CAAAA,KAAA,GAE3EG,aAAa,aAAbA,aAAa,KAAA,KAAA,CAAA,GAAbA,aAAa,GAAIF,KAAK,MAAA,IAAA,IAAAD,KAAA,KAAA,KAAA,CAAA,GAAAA,KAAA,GAAIe,YAAAA;WACvB,CAAA;AAAC,SACA,CAAC,eAEVS,IAAA,CAACnD,OAAO,EAAA;AAACE,UAAAA,OAAO,EAAC,MAAM;AAAC8C,UAAAA,UAAU,EAAC,WAAW;AAACiB,UAAAA,MAAM,EAAC,MAAM;UAAA1E,QAAA,EAAA,cAC1DQ,GAAA,CAACmE,OAAO,EAAA;AAACC,YAAAA,WAAW,EAAC,UAAU;AAACC,YAAAA,SAAS,EAAC,OAAA;WAAS,CAAC,EACnDtB,cAAc,CAAA;AAAA,SACR,CAAC,CAAA;OACH,CAAC,EACTvD,QAAQ,CAAA;KACK,CAAA;AAAC,GACV,CAAC,CAAA;AAEd,CAAC,CAAA;AAED,IAAM8E,YAAY,gBAAG7D,wBAAwB,CAACiB,aAAa,EAAE;EAC3DhB,WAAW,EAAEC,YAAY,CAAC2D,YAAAA;AAC5B,CAAC;;;;"}
+{"version":3,"file":"TableToolbar.web.js","sources":["../../../../../../src/components/Table/TableToolbar.web.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { ComponentIds } from './componentIds';\nimport { tableToolbar } from './tokens';\nimport { useTableContext } from './TableContext';\nimport type { TableToolbarProps, TableToolbarActionsProps } from './types';\nimport { makeMotionTime, makeSize } from '~utils';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport getIn from '~utils/lodashButBetter/get';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Text } from '~components/Typography';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { Divider } from '~components/Divider';\nimport { Link } from '~components/Link';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport { useTheme } from '~components/BladeProvider';\n\n/**\n * TableToolbarActions is a component that is used to render actions in the TableToolbar.\n * It is a flex container that will render its children in a row on desktop and a column on mobile.\n * @param children - any react element\n * @param styledProps - accepts all of the styled props from Box\n */\nconst _TableToolbarActions = ({\n  children,\n  ...rest\n}: TableToolbarActionsProps): React.ReactElement => {\n  const { platform } = useTheme();\n  const onMobile = platform === 'onMobile';\n  return (\n    <BaseBox\n      display=\"flex\"\n      flex={onMobile ? 1 : 0}\n      justifyContent={onMobile ? 'flex-start' : 'flex-end'}\n      {...getStyledProps(rest)}\n      {...makeAnalyticsAttribute(rest)}\n    >\n      {children}\n    </BaseBox>\n  );\n};\n\nconst TableToolbarActions = assignWithoutSideEffects(_TableToolbarActions, {\n  componentId: ComponentIds.TableToolbarActions,\n});\n\nconst ToolbarWrapper = styled(BaseBox)(({ theme }) => ({\n  transition: `background-color ${makeMotionTime(\n    getIn(theme.motion, tableToolbar.backgroundColorMotionDuration),\n  )} ${getIn(theme.motion, tableToolbar.backgroundColorMotionEasing)}`,\n}));\n\nconst _TableToolbar = ({\n  children,\n  title,\n  selectedTitle: controlledSelectedTitle,\n}: TableToolbarProps): React.ReactElement => {\n  const {\n    selectionType,\n    selectedRows,\n    deselectAllRows,\n    currentPaginationState,\n    totalItems,\n    tableToolbarPlacement,\n  } = useTableContext();\n  const { platform } = useTheme();\n  const isSelected = selectedRows && selectedRows.length > 0;\n\n  const defaultTitle = currentPaginationState\n    ? `Showing ${currentPaginationState.page * currentPaginationState.size + 1}-${\n        currentPaginationState.page * currentPaginationState.size + currentPaginationState.size\n      } Items`\n    : `Showing 1-${totalItems} Items`;\n  const selectedItemsCount = selectedRows ? selectedRows.length : 0;\n  const selectedTitle = isSelected\n    ? controlledSelectedTitle ??\n      `${selectedRows.length} ${selectedItemsCount === 1 ? 'Item' : 'Items'} Selected`\n    : null;\n\n  const onMobile = platform === 'onMobile';\n\n  const deselectButton = (\n    <Link size=\"small\" marginLeft=\"spacing.3\" variant=\"button\" onClick={() => deselectAllRows()}>\n      Deselect\n    </Link>\n  );\n\n  return (\n    <BaseBox>\n      <ToolbarWrapper\n        display=\"flex\"\n        backgroundColor={tableToolbar.backgroundColor}\n        padding={tableToolbar.padding}\n        flexWrap=\"wrap\"\n        flexDirection={onMobile && tableToolbarPlacement === 'inline' ? 'column' : 'row'}\n        gap=\"spacing.5\"\n        minHeight={makeSize(tableToolbar.minHeight)}\n      >\n        <BaseBox display=\"flex\" alignItems=\"center\" flex={1}>\n          <BaseBox>\n            <Text\n              size=\"small\"\n              weight=\"medium\"\n              color={isSelected ? 'surface.text.gray.normal' : 'surface.text.gray.subtle'}\n            >\n              {selectedTitle ?? title ?? defaultTitle}\n            </Text>\n          </BaseBox>\n\n          {selectionType !== 'none' && (\n            <BaseBox display=\"flex\" marginLeft=\"spacing.3\" height=\"spacing.6\">\n              <Divider orientation=\"vertical\" thickness=\"thick\" />\n              {deselectButton}\n            </BaseBox>\n          )}\n        </BaseBox>\n        {children}\n      </ToolbarWrapper>\n    </BaseBox>\n  );\n};\n\nconst TableToolbar = assignWithoutSideEffects(_TableToolbar, {\n  componentId: ComponentIds.TableToolbar,\n});\n\nexport { TableToolbar, TableToolbarActions };\n"],"names":["_TableToolbarActions","_ref","children","rest","_objectWithoutProperties","_excluded","_useTheme","useTheme","platform","onMobile","_jsx","BaseBox","_objectSpread","display","flex","justifyContent","getStyledProps","makeAnalyticsAttribute","TableToolbarActions","assignWithoutSideEffects","componentId","ComponentIds","ToolbarWrapper","styled","withConfig","displayName","_ref2","theme","transition","concat","makeMotionTime","getIn","motion","tableToolbar","backgroundColorMotionDuration","backgroundColorMotionEasing","_TableToolbar","_ref3","_ref4","title","controlledSelectedTitle","selectedTitle","_useTableContext","useTableContext","selectionType","selectedRows","deselectAllRows","currentPaginationState","totalItems","tableToolbarPlacement","_useTheme2","isSelected","length","defaultTitle","page","size","selectedItemsCount","deselectButton","Link","marginLeft","variant","onClick","_jsxs","backgroundColor","padding","flexWrap","flexDirection","gap","minHeight","makeSize","alignItems","Text","weight","color","height","Divider","orientation","thickness","TableToolbar"],"mappings":"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"}

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

@@ -13,7 +13,7 @@ var tableHeader = {
   paddingBottom: 'spacing.5',
   paddingLeft: 'spacing.4',
   paddingRight: 'spacing.4',
-  backgroundColor: 'interactive.background.gray.faded',
+  backgroundColor: 'surface.background.gray.moderate',
   borderBottomAndTopWidth: 'thin',
   borderBottomAndTopColor: 'surface.border.gray.muted'
 };
@@ -48,10 +48,10 @@ var tableRow = {
     backgroundColorFocus: 'transparent',
     // TODO: Rebranding - on design side: explore pressed state color change, right now both hover & active are same
     backgroundColorActive: 'interactive.background.gray.default',
-    backgroundColorSelected: 'interactive.background.primary.faded',
-    backgroundColorSelectedHover: 'interactive.background.primary.fadedHighlighted',
-    backgroundColorSelectedFocus: 'interactive.background.primary.faded',
-    backgroundColorSelectedActive: 'interactive.background.primary.fadedHighlighted'
+    backgroundColorSelected: 'interactive.background.gray.fadedHighlighted',
+    backgroundColorSelectedHover: 'interactive.background.gray.fadedHighlighted',
+    backgroundColorSelectedFocus: 'interactive.background.gray.fadedHighlighted',
+    backgroundColorSelectedActive: 'interactive.background.gray.fadedHighlighted'
   },
   nonStripeWrapper: {
     // not used anywhere
@@ -69,20 +69,20 @@ var tableRow = {
     backgroundColorHover: 'interactive.background.gray.default',
     backgroundColorFocus: 'transparent',
     backgroundColorActive: 'interactive.background.gray.default',
-    backgroundColorSelected: 'interactive.background.primary.faded',
-    backgroundColorSelectedHover: 'interactive.background.primary.fadedHighlighted',
-    backgroundColorSelectedFocus: 'interactive.background.primary.faded',
-    backgroundColorSelectedActive: 'interactive.background.primary.fadedHighlighted'
+    backgroundColorSelected: 'interactive.background.gray.fadedHighlighted',
+    backgroundColorSelectedHover: 'interactive.background.gray.fadedHighlighted',
+    backgroundColorSelectedFocus: 'interactive.background.gray.fadedHighlighted',
+    backgroundColorSelectedActive: 'interactive.background.gray.fadedHighlighted'
   },
   stripeWrapper: {
     backgroundColor: 'interactive.background.gray.default',
     backgroundColorHover: 'interactive.background.gray.default',
     backgroundColorFocus: 'interactive.background.gray.default',
     backgroundColorActive: 'interactive.background.gray.default',
-    backgroundColorSelected: 'interactive.background.primary.faded',
-    backgroundColorSelectedHover: 'interactive.background.primary.faded',
-    backgroundColorSelectedFocus: 'interactive.background.primary.faded',
-    backgroundColorSelectedActive: 'interactive.background.primary.faded'
+    backgroundColorSelected: 'interactive.background.gray.default',
+    backgroundColorSelectedHover: 'interactive.background.gray.default',
+    backgroundColorSelectedFocus: 'interactive.background.gray.default',
+    backgroundColorSelectedActive: 'interactive.background.gray.default'
   },
   borderBottomWidth: 'thin',
   borderColor: 'surface.border.gray.muted',
@@ -91,16 +91,17 @@ var tableRow = {
   groupHeaderBackgroundColor: 'surface.background.gray.moderate'
 };
 var tableToolbar = {
-  backgroundColor: 'interactive.background.gray.faded',
+  backgroundColor: 'transparent',
   backgroundColorSelected: 'interactive.background.primary.faded',
   backgroundColorMotionEasing: 'easing.standard',
   backgroundColorMotionDuration: 'duration.xquick',
   minHeight: size[37],
   // 37px to accommodate 1px border, matching TableHeader height
-  padding: ['spacing.3', 'spacing.4']
+  padding: ['spacing.3', 'spacing.3', 'spacing.3', 'spacing.4']
 };
 var tablePagination = {
-  defaultPageSize: 10
+  defaultPageSize: 10,
+  backgroundColor: 'surface.background.gray.moderate'
 };
 var tableEditableCellRowDensityToInputSizeMap = {
   compact: 'small',

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

@@ -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.faded',\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.faded',\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',\n  backgroundColorMotionDuration: 'duration.xquick',\n  groupHeaderBackgroundColor: 'surface.background.gray.moderate',\n} as const;\n\nconst tableToolbar = {\n  backgroundColor: 'interactive.background.gray.faded',\n  backgroundColorSelected: 'interactive.background.primary.faded',\n  backgroundColorMotionEasing: 'easing.standard',\n  backgroundColorMotionDuration: 'duration.xquick',\n  minHeight: size[37], // 37px to accommodate 1px border, matching TableHeader height\n  padding: ['spacing.3', 'spacing.4'],\n} as const;\n\nconst tablePagination = {\n  defaultPageSize: 10,\n} as const;\n\nconst tableEditableCellRowDensityToInputSizeMap = {\n  compact: 'small',\n  normal: 'medium',\n  comfortable: 'large',\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  HAS_ROW_SPANNING: 'has-row-spanning',\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","groupHeaderBackgroundColor","tableToolbar","padding","tablePagination","defaultPageSize","tableEditableCellRowDensityToInputSizeMap","validationStateToInputTrailingIconMap","none","undefined","success","CheckIcon","error","AlertCircleIcon","rowDensityToIsTableInputCellMapping","classes","HOVER_ACTIONS","HOVER_ACTIONS_LAYER2","HOVER_ACTIONS_LAYER3","HAS_ROW_SPANNING"],"mappings":"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"}
+{"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: 'surface.background.gray.moderate',\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.faded',\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.gray.fadedHighlighted',\n    backgroundColorSelectedHover: 'interactive.background.gray.fadedHighlighted',\n    backgroundColorSelectedFocus: 'interactive.background.gray.fadedHighlighted',\n    backgroundColorSelectedActive: 'interactive.background.gray.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.gray.fadedHighlighted',\n    backgroundColorSelectedHover: 'interactive.background.gray.fadedHighlighted',\n    backgroundColorSelectedFocus: 'interactive.background.gray.fadedHighlighted',\n    backgroundColorSelectedActive: 'interactive.background.gray.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.gray.default',\n    backgroundColorSelectedHover: 'interactive.background.gray.default',\n    backgroundColorSelectedFocus: 'interactive.background.gray.default',\n    backgroundColorSelectedActive: 'interactive.background.gray.default',\n  },\n  borderBottomWidth: 'thin',\n  borderColor: 'surface.border.gray.muted',\n  backgroundColorMotionEasing: 'easing.standard',\n  backgroundColorMotionDuration: 'duration.xquick',\n  groupHeaderBackgroundColor: 'surface.background.gray.moderate',\n} as const;\n\nconst tableToolbar = {\n  backgroundColor: 'transparent',\n  backgroundColorSelected: 'interactive.background.primary.faded',\n  backgroundColorMotionEasing: 'easing.standard',\n  backgroundColorMotionDuration: 'duration.xquick',\n  minHeight: size[37], // 37px to accommodate 1px border, matching TableHeader height\n  padding: ['spacing.3', 'spacing.3', 'spacing.3', 'spacing.4'],\n} as const;\n\nconst tablePagination = {\n  defaultPageSize: 10,\n  backgroundColor: 'surface.background.gray.moderate',\n} as const;\n\nconst tableEditableCellRowDensityToInputSizeMap = {\n  compact: 'small',\n  normal: 'medium',\n  comfortable: 'large',\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  HAS_ROW_SPANNING: 'has-row-spanning',\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","groupHeaderBackgroundColor","tableToolbar","padding","tablePagination","defaultPageSize","tableEditableCellRowDensityToInputSizeMap","validationStateToInputTrailingIconMap","none","undefined","success","CheckIcon","error","AlertCircleIcon","rowDensityToIsTableInputCellMapping","classes","HOVER_ACTIONS","HOVER_ACTIONS_LAYER2","HOVER_ACTIONS_LAYER3","HAS_ROW_SPANNING"],"mappings":"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"}

package/build/lib/web/production/components/Table/utils.js

@@ -14,13 +14,13 @@ var getTableActionsHoverStyles = function getTableActionsHoverStyles(_ref) {
     backgroundGradientColor = _ref.backgroundGradientColor;
   var rowBackgroundTransition = getTableRowBackgroundTransition(theme);
   return _defineProperty(_defineProperty(_defineProperty({}, "& .".concat(classes.HOVER_ACTIONS), {
-    backgroundColor: getIn(theme.colors, tableBackgroundColor),
+    background: "linear-gradient(90deg, transparent 0%, ".concat(getIn(theme.colors, tableBackgroundColor), " 10.08%, ").concat(getIn(theme.colors, tableBackgroundColor), " 100%)"),
     transition: rowBackgroundTransition
   }), "& .".concat(classes.HOVER_ACTIONS_LAYER2), {
-    backgroundColor: getIn(theme.colors, backgroundGradientColor !== null && backgroundGradientColor !== void 0 ? backgroundGradientColor : 'transparent'),
+    background: "linear-gradient(90deg, transparent 0%, ".concat(getIn(theme.colors, backgroundGradientColor !== null && backgroundGradientColor !== void 0 ? backgroundGradientColor : 'transparent'), " 10.08%, ").concat(getIn(theme.colors, backgroundGradientColor !== null && backgroundGradientColor !== void 0 ? backgroundGradientColor : 'transparent'), " 100%)"),
     transition: rowBackgroundTransition
   }), "& .".concat(classes.HOVER_ACTIONS_LAYER3), {
-    backgroundColor: getIn(theme.colors, hoverColor),
+    background: "linear-gradient(90deg, transparent 0%, ".concat(getIn(theme.colors, hoverColor), " 10.08%, ").concat(getIn(theme.colors, hoverColor), " 100%)"),
     transition: rowBackgroundTransition
   });
 };

package/build/lib/web/production/components/Table/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../../../../src/components/Table/utils.ts"],"sourcesContent":["import { classes, tableRow, tableBackgroundColor } from './tokens';\nimport type { Theme } from '~components/BladeProvider';\nimport type { DotNotationToken } from '~utils/lodashButBetter/get';\n\nimport { makeMotionTime } from '~utils';\nimport getIn from '~utils/lodashButBetter/get';\n\nconst getTableRowBackgroundTransition = (theme: Theme): string => {\n  const rowBackgroundTransition = `background-color ${makeMotionTime(\n    getIn(theme.motion, tableRow.backgroundColorMotionDuration),\n  )} ${getIn(theme.motion, tableRow.backgroundColorMotionEasing)}`;\n\n  return rowBackgroundTransition;\n};\n\nconst getTableActionsHoverStyles = ({\n  hoverColor,\n  theme,\n  backgroundGradientColor,\n}: {\n  hoverColor: DotNotationToken<Theme['colors']>;\n  backgroundGradientColor?: DotNotationToken<Omit<Theme['colors'], 'name'>>;\n  theme: Theme;\n}): React.CSSProperties => {\n  const rowBackgroundTransition = getTableRowBackgroundTransition(theme);\n\n  return {\n    // Solid layer 1 background - should match the table background\n    [`& .${classes.HOVER_ACTIONS}`]: {\n      backgroundColor: getIn(theme.colors, tableBackgroundColor),\n      transition: rowBackgroundTransition,\n    },\n    // Alpha layer 2 background - Stripped row background, Hover background in selected state, etc\n    [`& .${classes.HOVER_ACTIONS_LAYER2}`]: {\n      backgroundColor: getIn(theme.colors, backgroundGradientColor ?? 'transparent'),\n      transition: rowBackgroundTransition,\n    },\n    // Alpha layer 3 background - Hover, selection, active background\n    [`& .${classes.HOVER_ACTIONS_LAYER3}`]: {\n      backgroundColor: getIn(theme.colors, hoverColor),\n      transition: rowBackgroundTransition,\n    },\n  };\n};\n\nexport { getTableActionsHoverStyles, getTableRowBackgroundTransition };\n"],"names":["getTableRowBackgroundTransition","theme","rowBackgroundTransition","concat","makeMotionTime","getIn","motion","tableRow","backgroundColorMotionDuration","backgroundColorMotionEasing","getTableActionsHoverStyles","_ref","hoverColor","backgroundGradientColor","_defineProperty","classes","HOVER_ACTIONS","backgroundColor","colors","tableBackgroundColor","transition","HOVER_ACTIONS_LAYER2","HOVER_ACTIONS_LAYER3"],"mappings":";;;;;;AAOA,IAAMA,+BAA+B,GAAG,SAAlCA,+BAA+BA,CAAIC,KAAY,EAAa;AAChE,EAAA,IAAMC,uBAAuB,GAAA,mBAAA,CAAAC,MAAA,CAAuBC,cAAc,CAChEC,KAAK,CAACJ,KAAK,CAACK,MAAM,EAAEC,QAAQ,CAACC,6BAA6B,CAC5D,CAAC,EAAAL,GAAAA,CAAAA,CAAAA,MAAA,CAAIE,KAAK,CAACJ,KAAK,CAACK,MAAM,EAAEC,QAAQ,CAACE,2BAA2B,CAAC,CAAE,CAAA;AAEhE,EAAA,OAAOP,uBAAuB,CAAA;AAChC,EAAC;AAED,IAAMQ,0BAA0B,GAAG,SAA7BA,0BAA0BA,CAAAC,IAAA,EAQL;AAAA,EAAA,IAPzBC,UAAU,GAAAD,IAAA,CAAVC,UAAU;IACVX,KAAK,GAAAU,IAAA,CAALV,KAAK;IACLY,uBAAuB,GAAAF,IAAA,CAAvBE,uBAAuB,CAAA;AAMvB,EAAA,IAAMX,uBAAuB,GAAGF,+BAA+B,CAACC,KAAK,CAAC,CAAA;EAEtE,OAAAa,eAAA,CAAAA,eAAA,CAAAA,eAAA,CAAAX,EAAAA,EAAAA,KAAAA,CAAAA,MAAA,CAESY,OAAO,CAACC,aAAa,CAAK,EAAA;IAC/BC,eAAe,EAAEZ,KAAK,CAACJ,KAAK,CAACiB,MAAM,EAAEC,oBAAoB,CAAC;AAC1DC,IAAAA,UAAU,EAAElB,uBAAAA;AACd,GAAC,SAAAC,MAAA,CAEMY,OAAO,CAACM,oBAAoB,CAAK,EAAA;AACtCJ,IAAAA,eAAe,EAAEZ,KAAK,CAACJ,KAAK,CAACiB,MAAM,EAAEL,uBAAuB,KAAA,IAAA,IAAvBA,uBAAuB,KAAA,KAAA,CAAA,GAAvBA,uBAAuB,GAAI,aAAa,CAAC;AAC9EO,IAAAA,UAAU,EAAElB,uBAAAA;AACd,GAAC,SAAAC,MAAA,CAEMY,OAAO,CAACO,oBAAoB,CAAK,EAAA;IACtCL,eAAe,EAAEZ,KAAK,CAACJ,KAAK,CAACiB,MAAM,EAAEN,UAAU,CAAC;AAChDQ,IAAAA,UAAU,EAAElB,uBAAAA;GACb,CAAA,CAAA;AAEL;;;;"}
+{"version":3,"file":"utils.js","sources":["../../../../../../src/components/Table/utils.ts"],"sourcesContent":["import { classes, tableRow, tableBackgroundColor } from './tokens';\nimport type { Theme } from '~components/BladeProvider';\nimport type { DotNotationToken } from '~utils/lodashButBetter/get';\n\nimport { makeMotionTime } from '~utils';\nimport getIn from '~utils/lodashButBetter/get';\n\nconst getTableRowBackgroundTransition = (theme: Theme): string => {\n  const rowBackgroundTransition = `background-color ${makeMotionTime(\n    getIn(theme.motion, tableRow.backgroundColorMotionDuration),\n  )} ${getIn(theme.motion, tableRow.backgroundColorMotionEasing)}`;\n\n  return rowBackgroundTransition;\n};\n\nconst getTableActionsHoverStyles = ({\n  hoverColor,\n  theme,\n  backgroundGradientColor,\n}: {\n  hoverColor: DotNotationToken<Theme['colors']>;\n  backgroundGradientColor?: DotNotationToken<Omit<Theme['colors'], 'name'>>;\n  theme: Theme;\n}): React.CSSProperties => {\n  const rowBackgroundTransition = getTableRowBackgroundTransition(theme);\n\n  return {\n    // Solid layer 1 background - should match the table background\n    [`& .${classes.HOVER_ACTIONS}`]: {\n      background: `linear-gradient(90deg, transparent 0%, ${getIn(\n        theme.colors,\n        tableBackgroundColor,\n      )} 10.08%, ${getIn(theme.colors, tableBackgroundColor)} 100%)`,\n      transition: rowBackgroundTransition,\n    },\n    // Alpha layer 2 background - Stripped row background, Hover background in selected state, etc\n    [`& .${classes.HOVER_ACTIONS_LAYER2}`]: {\n      background: `linear-gradient(90deg, transparent 0%, ${getIn(\n        theme.colors,\n        backgroundGradientColor ?? 'transparent',\n      )} 10.08%, ${getIn(theme.colors, backgroundGradientColor ?? 'transparent')} 100%)`,\n      transition: rowBackgroundTransition,\n    },\n    // Alpha layer 3 background - Hover, selection, active background\n    [`& .${classes.HOVER_ACTIONS_LAYER3}`]: {\n      background: `linear-gradient(90deg, transparent 0%, ${getIn(\n        theme.colors,\n        hoverColor,\n      )} 10.08%, ${getIn(theme.colors, hoverColor)} 100%)`,\n      transition: rowBackgroundTransition,\n    },\n  };\n};\n\nexport { getTableActionsHoverStyles, getTableRowBackgroundTransition };\n"],"names":["getTableRowBackgroundTransition","theme","rowBackgroundTransition","concat","makeMotionTime","getIn","motion","tableRow","backgroundColorMotionDuration","backgroundColorMotionEasing","getTableActionsHoverStyles","_ref","hoverColor","backgroundGradientColor","_defineProperty","classes","HOVER_ACTIONS","background","colors","tableBackgroundColor","transition","HOVER_ACTIONS_LAYER2","HOVER_ACTIONS_LAYER3"],"mappings":";;;;;;AAOA,IAAMA,+BAA+B,GAAG,SAAlCA,+BAA+BA,CAAIC,KAAY,EAAa;AAChE,EAAA,IAAMC,uBAAuB,GAAA,mBAAA,CAAAC,MAAA,CAAuBC,cAAc,CAChEC,KAAK,CAACJ,KAAK,CAACK,MAAM,EAAEC,QAAQ,CAACC,6BAA6B,CAC5D,CAAC,EAAAL,GAAAA,CAAAA,CAAAA,MAAA,CAAIE,KAAK,CAACJ,KAAK,CAACK,MAAM,EAAEC,QAAQ,CAACE,2BAA2B,CAAC,CAAE,CAAA;AAEhE,EAAA,OAAOP,uBAAuB,CAAA;AAChC,EAAC;AAED,IAAMQ,0BAA0B,GAAG,SAA7BA,0BAA0BA,CAAAC,IAAA,EAQL;AAAA,EAAA,IAPzBC,UAAU,GAAAD,IAAA,CAAVC,UAAU;IACVX,KAAK,GAAAU,IAAA,CAALV,KAAK;IACLY,uBAAuB,GAAAF,IAAA,CAAvBE,uBAAuB,CAAA;AAMvB,EAAA,IAAMX,uBAAuB,GAAGF,+BAA+B,CAACC,KAAK,CAAC,CAAA;EAEtE,OAAAa,eAAA,CAAAA,eAAA,CAAAA,eAAA,CAAAX,EAAAA,EAAAA,KAAAA,CAAAA,MAAA,CAESY,OAAO,CAACC,aAAa,CAAK,EAAA;IAC/BC,UAAU,EAAA,yCAAA,CAAAd,MAAA,CAA4CE,KAAK,CACzDJ,KAAK,CAACiB,MAAM,EACZC,oBACF,CAAC,eAAAhB,MAAA,CAAYE,KAAK,CAACJ,KAAK,CAACiB,MAAM,EAAEC,oBAAoB,CAAC,EAAQ,QAAA,CAAA;AAC9DC,IAAAA,UAAU,EAAElB,uBAAAA;AACd,GAAC,SAAAC,MAAA,CAEMY,OAAO,CAACM,oBAAoB,CAAK,EAAA;AACtCJ,IAAAA,UAAU,EAAAd,yCAAAA,CAAAA,MAAA,CAA4CE,KAAK,CACzDJ,KAAK,CAACiB,MAAM,EACZL,uBAAuB,KAAvBA,IAAAA,IAAAA,uBAAuB,KAAvBA,KAAAA,CAAAA,GAAAA,uBAAuB,GAAI,aAC7B,CAAC,EAAAV,WAAAA,CAAAA,CAAAA,MAAA,CAAYE,KAAK,CAACJ,KAAK,CAACiB,MAAM,EAAEL,uBAAuB,KAAA,IAAA,IAAvBA,uBAAuB,KAAvBA,KAAAA,CAAAA,GAAAA,uBAAuB,GAAI,aAAa,CAAC,EAAQ,QAAA,CAAA;AAClFO,IAAAA,UAAU,EAAElB,uBAAAA;AACd,GAAC,SAAAC,MAAA,CAEMY,OAAO,CAACO,oBAAoB,CAAK,EAAA;IACtCL,UAAU,EAAA,yCAAA,CAAAd,MAAA,CAA4CE,KAAK,CACzDJ,KAAK,CAACiB,MAAM,EACZN,UACF,CAAC,eAAAT,MAAA,CAAYE,KAAK,CAACJ,KAAK,CAACiB,MAAM,EAAEN,UAAU,CAAC,EAAQ,QAAA,CAAA;AACpDQ,IAAAA,UAAU,EAAElB,uBAAAA;GACb,CAAA,CAAA;AAEL;;;;"}

package/build/lib/web/production/components/Tabs/TabIndicator.web.js

@@ -3,11 +3,12 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React__default from 'react';
 import styled from 'styled-components';
 import { useTabsContext } from './TabsContext.js';
-import '../BladeProvider/index.js';
 import '../../utils/index.js';
+import '../../utils/metaAttribute/index.js';
+import '../BladeProvider/index.js';
 import { useIsomorphicLayoutEffect } from '../../utils/useIsomorphicLayoutEffect.js';
+import { useResize } from '../../utils/useResize.js';
 import '../Box/BaseBox/index.js';
-import '../../utils/metaAttribute/index.js';
 import { jsx } from 'react/jsx-runtime';
 import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
 import useTheme from '../BladeProvider/useTheme.js';
@@ -37,11 +38,13 @@ var TabIndicator = function TabIndicator(_ref2) {
   var _useTabsContext = useTabsContext(),
     selectedValue = _useTabsContext.selectedValue,
     baseId = _useTabsContext.baseId,
-    variant = _useTabsContext.variant;
+    variant = _useTabsContext.variant,
+    isVertical = _useTabsContext.isVertical,
+    size = _useTabsContext.size;
   var _React$useState = React__default.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
-    hasMeasured = _React$useState2[0],
-    setHasMeasured = _React$useState2[1];
+    shouldAnimate = _React$useState2[0],
+    setShouldAnimate = _React$useState2[1];
   var _React$useState3 = React__default.useState({
       width: 0,
       height: 0,
@@ -49,43 +52,38 @@ var TabIndicator = function TabIndicator(_ref2) {
       y: 0
     }),
     _React$useState4 = _slicedToArray(_React$useState3, 2),
-    activeElementDimensions = _React$useState4[0],
-    setActiveElementDimensions = _React$useState4[1];
-
-  // Update the dimensions of the active element
+    dimensions = _React$useState4[0],
+    setDimensions = _React$useState4[1];
   var updateDimensions = React__default.useCallback(function () {
-    var tabItemId = "".concat(baseId, "-").concat(selectedValue, "-tabitem");
-    var activeTabItem = document.getElementById(tabItemId);
-    if (!activeTabItem) return;
-    setActiveElementDimensions({
+    var activeTabItem = document.getElementById("".concat(baseId, "-").concat(selectedValue, "-tabitem"));
+    // Skip if element not found or not visible (width 0 means container is hidden)
+    if (!activeTabItem || activeTabItem.offsetWidth === 0) return;
+    setDimensions({
       width: activeTabItem.offsetWidth,
       height: activeTabItem.offsetHeight,
       x: activeTabItem.offsetLeft,
-      y: variant === 'filled' ?
-      // on filled variant the indicator is positioned on top of the tab item
-      // so no need to add offsetHeight
+      y: variant === 'filled' || isVertical ?
+      // on filled variant or vertical layout the indicator is positioned on top of the tab item
       activeTabItem.offsetTop : activeTabItem.offsetTop + activeTabItem.offsetHeight - 1.5
     });
-  }, [baseId, selectedValue, tabListContainerRef, variant]);
+
+    // Enable animations after first valid measurement renders
+    setShouldAnimate(function (prev) {
+      if (!prev) requestAnimationFrame(function () {
+        return setShouldAnimate(true);
+      });
+      return prev;
+    });
+  }, [baseId, selectedValue, variant, isVertical]);
 
   // Update the dimensions when the selected value changes
   useIsomorphicLayoutEffect(function () {
     if (!selectedValue) return;
     updateDimensions();
-    var id = requestAnimationFrame(function () {
-      setHasMeasured(true);
-    });
-    return function () {
-      if (id) {
-        cancelAnimationFrame(id);
-      }
-    };
-  }, [baseId, selectedValue]);
+  }, [baseId, selectedValue, updateDimensions]);
 
-  // Update the dimensions when the window resizes or when the font loads
+  // Update the dimensions when fonts load
   React__default.useEffect(function () {
-    if (!tabListContainerRef.current) return;
-
     // check for FontFace API support
     // FontFaceAPI is widely supported but better to be safe than sorry
     if ('fonts' in document) {
@@ -98,29 +96,47 @@ var TabIndicator = function TabIndicator(_ref2) {
         /* empty */
       }
     }
-    window.addEventListener('resize', updateDimensions);
-    return function () {
-      if (!tabListContainerRef.current) return;
-      window.removeEventListener('resize', updateDimensions);
-    };
-  }, [tabListContainerRef, updateDimensions]);
+  }, [updateDimensions]);
+
+  // Update the dimensions when the container resizes (covers window resize,
+  // sidebar toggles, lazy-loaded content, and containers becoming visible)
+  useResize(tabListContainerRef, updateDimensions);
   var transitionProps = {
-    transitionProperty: 'transform, width, background-color',
-    transitionDuration: hasMeasured ? castWebType(makeMotionTime(theme.motion.duration.gentle)) : '0ms',
+    transitionProperty: 'transform, width, height, background-color',
+    transitionDuration: shouldAnimate ? castWebType(makeMotionTime(theme.motion.duration.moderate)) : '0ms',
     transitionTimingFunction: castWebType(theme.motion.easing.standard)
   };
+
+  // Vertical bordered: 1.5px-wide line on the left side that slides vertically
+  if (isVertical && variant !== 'filled') {
+    return /*#__PURE__*/jsx(StyledTabIndicator, _objectSpread({
+      pointerEvents: "none",
+      position: "absolute",
+      left: "1.75px",
+      top: "0px",
+      width: "1.5px",
+      backgroundColor: "interactive.border.neutral.highlighted",
+      style: _objectSpread(_objectSpread({}, transitionProps), {}, {
+        height: "".concat(dimensions.height, "px"),
+        transform: "translateY(".concat(dimensions.y, "px)")
+      })
+    }, metaAttribute({
+      name: MetaConstants.TabIndicator
+    })));
+  }
   if (variant === 'filled') {
+    var shouldHaveMediumBorderRadius = size === 'small' && !isVertical;
     return /*#__PURE__*/jsx(StyledTabIndicator, _objectSpread({
       pointerEvents: "none",
       position: "absolute",
       left: "0px",
       top: "0px",
-      borderRadius: "small",
-      backgroundColor: "interactive.background.primary.faded",
+      borderRadius: shouldHaveMediumBorderRadius ? 'medium' : 'small',
+      backgroundColor: "surface.background.gray.intense",
       style: _objectSpread(_objectSpread({}, transitionProps), {}, {
-        width: "".concat(activeElementDimensions.width, "px"),
-        height: "".concat(activeElementDimensions.height, "px"),
-        transform: "translate(".concat(activeElementDimensions.x, "px, ").concat(activeElementDimensions.y, "px)")
+        width: "".concat(dimensions.width, "px"),
+        height: "".concat(dimensions.height, "px"),
+        transform: "translate(".concat(dimensions.x, "px, ").concat(dimensions.y, "px)")
       })
     }, metaAttribute({
       name: MetaConstants.TabIndicator
@@ -132,10 +148,10 @@ var TabIndicator = function TabIndicator(_ref2) {
     left: "0%",
     top: "-0.5px",
     height: "2px",
-    backgroundColor: "interactive.background.primary.default",
+    backgroundColor: "interactive.border.neutral.highlighted",
     style: _objectSpread(_objectSpread({}, transitionProps), {}, {
-      width: "".concat(activeElementDimensions.width, "px"),
-      transform: "translate(".concat(activeElementDimensions.x, "px, ").concat(activeElementDimensions.y, "px)")
+      width: "".concat(dimensions.width, "px"),
+      transform: "translate(".concat(dimensions.x, "px, ").concat(dimensions.y, "px)")
     })
   }, metaAttribute({
     name: MetaConstants.TabIndicator