@veeqo/ui 11.0.0 → 11.2.0

package/dist/components/DataGrid/components/Body/LoadingBody/LoadingBodyCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingBodyCell.js","sources":["../../../../../../src/components/DataGrid/components/Body/LoadingBody/LoadingBodyCell.tsx"],"sourcesContent":["import React from 'react';\nimport { Column } from '@tanstack/react-table';\n\nimport { Skeleton } from '../../../../Skeleton';\nimport { buildClassnames } from '../../../../../utils';\nimport { usePinnedColumnStyles } from '../../../hooks';\nimport { CellContent } from '../../CellContent';\nimport { theme } from '../../../../../theme';\n\nimport styles from '../BodyCell/BodyCell.module.scss';\n\ntype LoadingBodyCellProps = {\n  /**\n   * The TanStack Table column instance.\n   */\n  column: Column<any, any>;\n};\n\n/**\n * A cell component for the DataGrid that displays a skeleton loader.\n */\nexport const LoadingBodyCell = ({ column }: LoadingBodyCellProps) => {\n  const { justifyContent, textAlign } = column.columnDef.meta!;\n  const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({\n    column,\n  });\n\n  const loadingCellClassname = buildClassnames([\n    styles.bodyCell,\n    pinnedCellClassName,\n    'data-grid-cell',\n    'data-grid-cell-loading',\n  ]);\n\n  return (\n    <td\n      className={loadingCellClassname}\n      style={pinnedCellStyles}\n      aria-colindex={column.getIndex() + 1}\n    >\n      <CellContent\n        contentStyle={\n          {\n            justifyContent,\n            textAlign,\n          } as React.CSSProperties\n        }\n      >\n        <Skeleton width=\"75%\" height={theme.sizes[3]} />\n      </CellContent>\n    </td>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;AAkBA;;AAEG;MACU,eAAe,GAAG,CAAC,EAAE,MAAM,EAAwB,KAAI;IAClE,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,SAAS,CAAC,IAAK;AAC5D,IAAA,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAG,qBAAqB,CAAC;QACtE,MAAM;AACP,KAAA,CAAC;IAEF,MAAM,oBAAoB,GAAG,eAAe,CAAC;AAC3C,QAAA,MAAM,CAAC,QAAQ;QACf,mBAAmB;QACnB,gBAAgB;QAChB,wBAAwB;AACzB,KAAA,CAAC;AAEF,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EACE,SAAS,EAAE,oBAAoB,EAC/B,KAAK,EAAE,gBAAgB,mBACR,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EAAA;QAEpCA,cAAC,CAAA,aAAA,CAAA,WAAW,EACV,EAAA,YAAY,EACV;gBACE,cAAc;gBACd,SAAS;AACa,aAAA,EAAA;AAG1B,YAAAA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAC,EAAA,KAAK,EAAC,KAAK,EAAC,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAI,CACpC,CACX;AAET;;;;"}

package/dist/components/DataGrid/components/Body/LoadingBody/index.d.ts

@@ -0,0 +1 @@
+export { LoadingBody } from './LoadingBody';

package/dist/components/DataGrid/components/Body/Row/Row.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Row.cjs","sources":["../../../../../../src/components/DataGrid/components/Body/Row/Row.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Row as RowItem } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\ntype RowProps = {\n  /**\n   * The row within the TanStack Table instance.\n   */\n  row: RowItem<any>;\n\n  /**\n   * Whether rows should be striped or not.\n   */\n  striped: boolean;\n\n  /**\n   * Whether row expanding is enabled.\n   */\n  enableExpanding: boolean;\n\n  /**\n   * Child elements (table cells).\n   */\n  children: React.ReactNode;\n};\n\nexport const Row = ({ row, striped, enableExpanding, children }: RowProps) => (\n  <tr\n    className={buildClassnames(['data-grid-row', striped ? 'striped' : undefined])}\n    key={row.id}\n    // 0-based index + header row.\n    aria-rowindex={row.index + 2}\n    aria-level={enableExpanding ? row.depth + 1 : undefined}\n  >\n    {children}\n  </tr>\n);\n"],"names":["React","buildClassnames"],"mappings":";;;;;;;;;;AA4BO,MAAM,GAAG,GAAG,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAY,MACvEA,sBAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EACE,SAAS,EAAEC,+BAAe,CAAC,CAAC,eAAe,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC,CAAC,EAC9E,GAAG,EAAE,GAAG,CAAC,EAAE,EAAA,eAAA,EAEI,GAAG,CAAC,KAAK,GAAG,CAAC,EAChB,YAAA,EAAA,eAAe,GAAG,GAAG,CAAC,KAAK,GAAG,CAAC,GAAG,SAAS,EAAA,EAEtD,QAAQ,CACN;;;;"}
+{"version":3,"file":"Row.cjs","sources":["../../../../../../src/components/DataGrid/components/Body/Row/Row.tsx"],"sourcesContent":["import React from 'react';\n\nimport { buildClassnames } from '../../../../../utils';\n\ntype RowProps = {\n  /**\n   * Row information, including id, index, and depth (typically the TanStack table row).\n   */\n  row: {\n    id: string;\n    index: number;\n    depth: number;\n  };\n\n  /**\n   * Whether rows should be striped or not.\n   */\n  striped: boolean;\n\n  /**\n   * Whether row expanding is enabled.\n   */\n  enableExpanding: boolean;\n\n  /**\n   * Child elements (table cells).\n   */\n  children: React.ReactNode;\n};\n\nexport const Row = ({ row, striped, enableExpanding, children }: RowProps) => (\n  <tr\n    className={buildClassnames(['data-grid-row', striped ? 'striped' : undefined])}\n    key={row.id}\n    // 0-based index + header row.\n    aria-rowindex={row.index + 2}\n    aria-level={enableExpanding ? row.depth + 1 : undefined}\n  >\n    {children}\n  </tr>\n);\n"],"names":["React","buildClassnames"],"mappings":";;;;;;;;;;AA8BO,MAAM,GAAG,GAAG,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAY,MACvEA,sBAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EACE,SAAS,EAAEC,+BAAe,CAAC,CAAC,eAAe,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC,CAAC,EAC9E,GAAG,EAAE,GAAG,CAAC,EAAE,EAAA,eAAA,EAEI,GAAG,CAAC,KAAK,GAAG,CAAC,EAChB,YAAA,EAAA,eAAe,GAAG,GAAG,CAAC,KAAK,GAAG,CAAC,GAAG,SAAS,EAAA,EAEtD,QAAQ,CACN;;;;"}

package/dist/components/DataGrid/components/Body/Row/Row.d.ts

@@ -1,10 +1,13 @@
 import React from 'react';
-import { Row as RowItem } from '@tanstack/react-table';
 type RowProps = {
     /**
-     * The row within the TanStack Table instance.
+     * Row information, including id, index, and depth (typically the TanStack table row).
      */
-    row: RowItem<any>;
+    row: {
+        id: string;
+        index: number;
+        depth: number;
+    };
     /**
      * Whether rows should be striped or not.
      */

package/dist/components/DataGrid/components/Body/Row/Row.js.map

@@ -1 +1 @@
-{"version":3,"file":"Row.js","sources":["../../../../../../src/components/DataGrid/components/Body/Row/Row.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Row as RowItem } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\ntype RowProps = {\n  /**\n   * The row within the TanStack Table instance.\n   */\n  row: RowItem<any>;\n\n  /**\n   * Whether rows should be striped or not.\n   */\n  striped: boolean;\n\n  /**\n   * Whether row expanding is enabled.\n   */\n  enableExpanding: boolean;\n\n  /**\n   * Child elements (table cells).\n   */\n  children: React.ReactNode;\n};\n\nexport const Row = ({ row, striped, enableExpanding, children }: RowProps) => (\n  <tr\n    className={buildClassnames(['data-grid-row', striped ? 'striped' : undefined])}\n    key={row.id}\n    // 0-based index + header row.\n    aria-rowindex={row.index + 2}\n    aria-level={enableExpanding ? row.depth + 1 : undefined}\n  >\n    {children}\n  </tr>\n);\n"],"names":["React"],"mappings":";;;;AA4BO,MAAM,GAAG,GAAG,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAY,MACvEA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EACE,SAAS,EAAE,eAAe,CAAC,CAAC,eAAe,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC,CAAC,EAC9E,GAAG,EAAE,GAAG,CAAC,EAAE,EAAA,eAAA,EAEI,GAAG,CAAC,KAAK,GAAG,CAAC,EAChB,YAAA,EAAA,eAAe,GAAG,GAAG,CAAC,KAAK,GAAG,CAAC,GAAG,SAAS,EAAA,EAEtD,QAAQ,CACN;;;;"}
+{"version":3,"file":"Row.js","sources":["../../../../../../src/components/DataGrid/components/Body/Row/Row.tsx"],"sourcesContent":["import React from 'react';\n\nimport { buildClassnames } from '../../../../../utils';\n\ntype RowProps = {\n  /**\n   * Row information, including id, index, and depth (typically the TanStack table row).\n   */\n  row: {\n    id: string;\n    index: number;\n    depth: number;\n  };\n\n  /**\n   * Whether rows should be striped or not.\n   */\n  striped: boolean;\n\n  /**\n   * Whether row expanding is enabled.\n   */\n  enableExpanding: boolean;\n\n  /**\n   * Child elements (table cells).\n   */\n  children: React.ReactNode;\n};\n\nexport const Row = ({ row, striped, enableExpanding, children }: RowProps) => (\n  <tr\n    className={buildClassnames(['data-grid-row', striped ? 'striped' : undefined])}\n    key={row.id}\n    // 0-based index + header row.\n    aria-rowindex={row.index + 2}\n    aria-level={enableExpanding ? row.depth + 1 : undefined}\n  >\n    {children}\n  </tr>\n);\n"],"names":["React"],"mappings":";;;;AA8BO,MAAM,GAAG,GAAG,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAY,MACvEA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EACE,SAAS,EAAE,eAAe,CAAC,CAAC,eAAe,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC,CAAC,EAC9E,GAAG,EAAE,GAAG,CAAC,EAAE,EAAA,eAAA,EAEI,GAAG,CAAC,KAAK,GAAG,CAAC,EAChB,YAAA,EAAA,eAAe,GAAG,GAAG,CAAC,KAAK,GAAG,CAAC,GAAG,SAAS,EAAA,EAEtD,QAAQ,CACN;;;;"}

package/dist/components/DataGrid/components/Body/index.d.ts

@@ -1 +1,3 @@
 export { Body, MemoizedBody } from './Body';
+export { LoadingBody } from './LoadingBody';
+export { EmptyBody } from './EmptyBody';

package/dist/components/DataGrid/components/Footer/Footer.cjs

@@ -11,7 +11,7 @@ const Footer = ({ table, ariaRoles }) => {
     // We're not making use of column grouping, so we only need the first footer group.
     const [footer] = table.getFooterGroups();
     return (React__default.default.createElement("tfoot", { className: "data-grid-footer" },
-        React__default.default.createElement("tr", { className: "data-grid-footer-row" }, footer.headers.map((header) => (React__default.default.createElement(FooterCell.FooterCell, { key: header.id, ariaRoles: ariaRoles, header: header }))))));
+        React__default.default.createElement("tr", { className: "data-grid-footer-row", "aria-rowindex": table.getRowCount() + 1 }, footer.headers.map((header) => (React__default.default.createElement(FooterCell.FooterCell, { key: header.id, ariaRoles: ariaRoles, header: header }))))));
 };
 
 exports.Footer = Footer;

package/dist/components/DataGrid/components/Footer/Footer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Footer.cjs","sources":["../../../../../src/components/DataGrid/components/Footer/Footer.tsx"],"sourcesContent":["import React from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { AriaRoles } from '../../types';\nimport { FooterCell } from './FooterCell';\n\ntype FooterProps = {\n  /**\n   * The TanStack table instance.\n   */\n  table: Table<any>;\n\n  /**\n   * ARIA roles used in the grid.\n   */\n  ariaRoles: AriaRoles;\n};\n\nexport const Footer = ({ table, ariaRoles }: FooterProps) => {\n  // We're not making use of column grouping, so we only need the first footer group.\n  const [footer] = table.getFooterGroups();\n\n  return (\n    <tfoot className=\"data-grid-footer\">\n      <tr className=\"data-grid-footer-row\">\n        {footer.headers.map((header) => (\n          <FooterCell key={header.id} ariaRoles={ariaRoles} header={header} />\n        ))}\n      </tr>\n    </tfoot>\n  );\n};\n"],"names":["React","FooterCell"],"mappings":";;;;;;;;;AAkBa,MAAA,MAAM,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,EAAe,KAAI;;IAE1D,MAAM,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC,eAAe,EAAE;AAExC,IAAA,QACEA,sBAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,SAAS,EAAC,kBAAkB,EAAA;AACjC,QAAAA,sBAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,sBAAsB,EACjC,EAAA,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MACzBA,qCAACC,qBAAU,EAAA,EAAC,GAAG,EAAE,MAAM,CAAC,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAI,CAAA,CACrE,CAAC,CACC,CACC;AAEZ;;;;"}
+{"version":3,"file":"Footer.cjs","sources":["../../../../../src/components/DataGrid/components/Footer/Footer.tsx"],"sourcesContent":["import React from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { AriaRoles } from '../../types';\nimport { FooterCell } from './FooterCell';\n\ntype FooterProps = {\n  /**\n   * The TanStack table instance.\n   */\n  table: Table<any>;\n\n  /**\n   * ARIA roles used in the grid.\n   */\n  ariaRoles: AriaRoles;\n};\n\nexport const Footer = ({ table, ariaRoles }: FooterProps) => {\n  // We're not making use of column grouping, so we only need the first footer group.\n  const [footer] = table.getFooterGroups();\n\n  return (\n    <tfoot className=\"data-grid-footer\">\n      <tr className=\"data-grid-footer-row\" aria-rowindex={table.getRowCount() + 1}>\n        {footer.headers.map((header) => (\n          <FooterCell key={header.id} ariaRoles={ariaRoles} header={header} />\n        ))}\n      </tr>\n    </tfoot>\n  );\n};\n"],"names":["React","FooterCell"],"mappings":";;;;;;;;;AAkBa,MAAA,MAAM,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,EAAe,KAAI;;IAE1D,MAAM,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC,eAAe,EAAE;AAExC,IAAA,QACEA,sBAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,SAAS,EAAC,kBAAkB,EAAA;QACjCA,sBAAI,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,SAAS,EAAC,sBAAsB,EAAA,eAAA,EAAgB,KAAK,CAAC,WAAW,EAAE,GAAG,CAAC,IACxE,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MACzBA,sBAAC,CAAA,aAAA,CAAAC,qBAAU,IAAC,GAAG,EAAE,MAAM,CAAC,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAA,CAAI,CACrE,CAAC,CACC,CACC;AAEZ;;;;"}

package/dist/components/DataGrid/components/Footer/Footer.js

@@ -5,7 +5,7 @@ const Footer = ({ table, ariaRoles }) => {
     // We're not making use of column grouping, so we only need the first footer group.
     const [footer] = table.getFooterGroups();
     return (React__default.createElement("tfoot", { className: "data-grid-footer" },
-        React__default.createElement("tr", { className: "data-grid-footer-row" }, footer.headers.map((header) => (React__default.createElement(FooterCell, { key: header.id, ariaRoles: ariaRoles, header: header }))))));
+        React__default.createElement("tr", { className: "data-grid-footer-row", "aria-rowindex": table.getRowCount() + 1 }, footer.headers.map((header) => (React__default.createElement(FooterCell, { key: header.id, ariaRoles: ariaRoles, header: header }))))));
 };
 
 export { Footer };

package/dist/components/DataGrid/components/Footer/Footer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Footer.js","sources":["../../../../../src/components/DataGrid/components/Footer/Footer.tsx"],"sourcesContent":["import React from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { AriaRoles } from '../../types';\nimport { FooterCell } from './FooterCell';\n\ntype FooterProps = {\n  /**\n   * The TanStack table instance.\n   */\n  table: Table<any>;\n\n  /**\n   * ARIA roles used in the grid.\n   */\n  ariaRoles: AriaRoles;\n};\n\nexport const Footer = ({ table, ariaRoles }: FooterProps) => {\n  // We're not making use of column grouping, so we only need the first footer group.\n  const [footer] = table.getFooterGroups();\n\n  return (\n    <tfoot className=\"data-grid-footer\">\n      <tr className=\"data-grid-footer-row\">\n        {footer.headers.map((header) => (\n          <FooterCell key={header.id} ariaRoles={ariaRoles} header={header} />\n        ))}\n      </tr>\n    </tfoot>\n  );\n};\n"],"names":["React"],"mappings":";;;AAkBa,MAAA,MAAM,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,EAAe,KAAI;;IAE1D,MAAM,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC,eAAe,EAAE;AAExC,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,SAAS,EAAC,kBAAkB,EAAA;AACjC,QAAAA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,sBAAsB,EACjC,EAAA,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MACzBA,6BAAC,UAAU,EAAA,EAAC,GAAG,EAAE,MAAM,CAAC,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAI,CAAA,CACrE,CAAC,CACC,CACC;AAEZ;;;;"}
+{"version":3,"file":"Footer.js","sources":["../../../../../src/components/DataGrid/components/Footer/Footer.tsx"],"sourcesContent":["import React from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { AriaRoles } from '../../types';\nimport { FooterCell } from './FooterCell';\n\ntype FooterProps = {\n  /**\n   * The TanStack table instance.\n   */\n  table: Table<any>;\n\n  /**\n   * ARIA roles used in the grid.\n   */\n  ariaRoles: AriaRoles;\n};\n\nexport const Footer = ({ table, ariaRoles }: FooterProps) => {\n  // We're not making use of column grouping, so we only need the first footer group.\n  const [footer] = table.getFooterGroups();\n\n  return (\n    <tfoot className=\"data-grid-footer\">\n      <tr className=\"data-grid-footer-row\" aria-rowindex={table.getRowCount() + 1}>\n        {footer.headers.map((header) => (\n          <FooterCell key={header.id} ariaRoles={ariaRoles} header={header} />\n        ))}\n      </tr>\n    </tfoot>\n  );\n};\n"],"names":["React"],"mappings":";;;AAkBa,MAAA,MAAM,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,EAAe,KAAI;;IAE1D,MAAM,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC,eAAe,EAAE;AAExC,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,SAAS,EAAC,kBAAkB,EAAA;QACjCA,cAAI,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,SAAS,EAAC,sBAAsB,EAAA,eAAA,EAAgB,KAAK,CAAC,WAAW,EAAE,GAAG,CAAC,IACxE,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MACzBA,cAAC,CAAA,aAAA,CAAA,UAAU,IAAC,GAAG,EAAE,MAAM,CAAC,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAA,CAAI,CACrE,CAAC,CACC,CACC;AAEZ;;;;"}

package/dist/components/DataGrid/types/DataGridProps.d.ts

@@ -6,6 +6,7 @@ import { SortState } from './SortState';
 import { PinnedColumnState } from './PinnedColumnState';
 import { RowGroupingConfiguration } from './RowGroupingConfiguration';
 import { ColumnWidths } from './ColumnWidths';
+import { EmptyState } from './EmptyState';
 export type CustomState = {
     iconSlot: ReactElement;
     heading: string;
@@ -120,4 +121,24 @@ export type DataGridProps = Pick<AriaAttributes, 'aria-label'> & {
      * Callback which is raised when the column widths change.
      */
     onColumnsResized?: (columnWidths: ColumnWidths) => void;
+    /** Empty/Loading State */
+    /**
+     * Show the loading state.
+     */
+    isLoading?: boolean;
+    /**
+     * Number of rows to be rendered in the loading state.
+     * @default 5
+     */
+    loadingRowCount?: number;
+    /**
+     * Settings for the empty state, rendered when there are no rows.
+     *
+     * If none is provided, a default empty state will be displayed.
+     */
+    emptyState?: EmptyState;
+    /**
+     * Optional slot for custom content in the empty body, overrides empty state.
+     */
+    emptySlot?: React.ReactElement;
 };

package/dist/components/DataGrid/types/EmptyState.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export type EmptyState = {
+    iconSlot?: React.ReactElement;
+    heading?: string;
+    subHeading?: string;
+};

package/dist/components/DataGrid/types/index.d.ts

@@ -5,3 +5,4 @@ export { ColumnDefinition } from './ColumnDefinition';
 export { SortState } from './SortState';
 export { PinnedColumnState } from './PinnedColumnState';
 export { RowGroupingConfiguration, ExpandedRows } from './RowGroupingConfiguration';
+export { EmptyState } from './EmptyState';

package/dist/components/Skeleton/Skeleton.cjs

@@ -1,21 +1,16 @@
 'use strict';
 
-var styled = require('styled-components');
-var BaseContainer = require('../BaseContainer/BaseContainer.cjs');
+var React = require('react');
+var assignCssVars = require('../../utils/assignCssVars.cjs');
+var Skeleton_module = require('./Skeleton.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const Skeleton = styled__default.default(BaseContainer.BaseContainer).attrs(() => ({
-    'aria-hidden': true,
-})).withConfig({ displayName: "vui--Skeleton", componentId: "vui--7bl1ak" }) `display:block;background:#f6f7f8;background:linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);background-size:2500px 104px;cursor:progress;border-radius:4px;${({ width = '', height = '' }) => `
-    width: ${width || '100%'};
-    min-width: ${width};
-    height: ${height || '20px'};
-    min-height: ${height};
-  `};@media (prefers-reduced-motion: no-preference){animation-duration:2s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:placeHolderShimmer;animation-timing-function:linear;}@keyframes placeHolderShimmer{0%{background-position:-1080px 0;}100%{background-position:1080px 0;}}`;
-Skeleton.displayName = 'Skeleton';
+const Skeleton = ({ width, height }) => {
+    return (React__default.default.createElement("div", { "aria-hidden": "true", style: assignCssVars.assignCssVars({ width, height }), className: Skeleton_module.skeleton }));
+};
 
 exports.Skeleton = Skeleton;
 //# sourceMappingURL=Skeleton.cjs.map

package/dist/components/Skeleton/Skeleton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.cjs","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { BaseContainer } from '../BaseContainer';\n\nexport type SkeletonProps = {\n  width?: string;\n  height?: string;\n};\n\nexport const Skeleton = styled(BaseContainer).attrs(() => ({\n  'aria-hidden': true,\n}))<SkeletonProps>`\n  // General\n  display: block;\n  background: #f6f7f8;\n  background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);\n  background-size: 2500px 104px;\n\n  cursor: progress;\n\n  // Sizing\n\n  border-radius: 4px;\n  ${({ width = '', height = '' }) => `\n    width: ${width || '100%'};\n    min-width: ${width};\n    height: ${height || '20px'};\n    min-height: ${height};\n  `};\n\n  // Animation\n\n  @media (prefers-reduced-motion: no-preference) {\n    animation-duration: 2s;\n    animation-fill-mode: forwards;\n    animation-iteration-count: infinite;\n    animation-name: placeHolderShimmer;\n    animation-timing-function: linear;\n  }\n\n  @keyframes placeHolderShimmer {\n    0% {\n      background-position: -1080px 0;\n    }\n    100% {\n      background-position: 1080px 0;\n    }\n  }\n`;\n\nSkeleton.displayName = 'Skeleton';\n"],"names":["styled","BaseContainer"],"mappings":";;;;;;;;;AAQO,MAAM,QAAQ,GAAGA,uBAAM,CAACC,2BAAa,CAAC,CAAC,KAAK,CAAC,OAAO;AACzD,IAAA,aAAa,EAAE,IAAI;AACpB,CAAA,CAAC,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,2KAAA,EAYC,CAAC,EAAE,KAAK,GAAG,EAAE,EAAE,MAAM,GAAG,EAAE,EAAE,KAAK;AACxB,WAAA,EAAA,KAAK,IAAI,MAAM,CAAA;iBACX,KAAK,CAAA;AACR,YAAA,EAAA,MAAM,IAAI,MAAM,CAAA;kBACZ,MAAM,CAAA;AACrB,EAAA,CAAA,CAAA,8SAAA;AAsBH,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}
+{"version":3,"file":"Skeleton.cjs","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import React from 'react';\n\nimport { assignCssVars } from '../../utils/assignCssVars';\n\nimport styles from './Skeleton.module.scss';\n\ntype SkeletonProps = {\n  width?: string;\n  height?: string;\n};\n\nexport const Skeleton = ({ width, height }: SkeletonProps) => {\n  return (\n    <div aria-hidden=\"true\" style={assignCssVars({ width, height })} className={styles.skeleton} />\n  );\n};\n"],"names":["React","assignCssVars","styles"],"mappings":";;;;;;;;;;AAWa,MAAA,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAiB,KAAI;IAC3D,QACEA,6DAAiB,MAAM,EAAC,KAAK,EAAEC,2BAAa,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,SAAS,EAAEC,eAAM,CAAC,QAAQ,EAAI,CAAA;AAEnG;;;;"}

package/dist/components/Skeleton/Skeleton.d.ts

@@ -1,7 +1,7 @@
-export type SkeletonProps = {
+import React from 'react';
+type SkeletonProps = {
     width?: string;
     height?: string;
 };
-export declare const Skeleton: import("styled-components").StyledComponent<"div", any, {
-    'aria-hidden': true;
-} & SkeletonProps, "aria-hidden">;
+export declare const Skeleton: ({ width, height }: SkeletonProps) => React.JSX.Element;
+export {};

package/dist/components/Skeleton/Skeleton.js

@@ -1,15 +1,10 @@
-import styled from 'styled-components';
-import { BaseContainer } from '../BaseContainer/BaseContainer.js';
+import React__default from 'react';
+import { assignCssVars } from '../../utils/assignCssVars.js';
+import styles from './Skeleton.module.scss.js';
 
-const Skeleton = styled(BaseContainer).attrs(() => ({
-    'aria-hidden': true,
-})).withConfig({ displayName: "vui--Skeleton", componentId: "vui--7bl1ak" }) `display:block;background:#f6f7f8;background:linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);background-size:2500px 104px;cursor:progress;border-radius:4px;${({ width = '', height = '' }) => `
-    width: ${width || '100%'};
-    min-width: ${width};
-    height: ${height || '20px'};
-    min-height: ${height};
-  `};@media (prefers-reduced-motion: no-preference){animation-duration:2s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:placeHolderShimmer;animation-timing-function:linear;}@keyframes placeHolderShimmer{0%{background-position:-1080px 0;}100%{background-position:1080px 0;}}`;
-Skeleton.displayName = 'Skeleton';
+const Skeleton = ({ width, height }) => {
+    return (React__default.createElement("div", { "aria-hidden": "true", style: assignCssVars({ width, height }), className: styles.skeleton }));
+};
 
 export { Skeleton };
 //# sourceMappingURL=Skeleton.js.map

package/dist/components/Skeleton/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.js","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { BaseContainer } from '../BaseContainer';\n\nexport type SkeletonProps = {\n  width?: string;\n  height?: string;\n};\n\nexport const Skeleton = styled(BaseContainer).attrs(() => ({\n  'aria-hidden': true,\n}))<SkeletonProps>`\n  // General\n  display: block;\n  background: #f6f7f8;\n  background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);\n  background-size: 2500px 104px;\n\n  cursor: progress;\n\n  // Sizing\n\n  border-radius: 4px;\n  ${({ width = '', height = '' }) => `\n    width: ${width || '100%'};\n    min-width: ${width};\n    height: ${height || '20px'};\n    min-height: ${height};\n  `};\n\n  // Animation\n\n  @media (prefers-reduced-motion: no-preference) {\n    animation-duration: 2s;\n    animation-fill-mode: forwards;\n    animation-iteration-count: infinite;\n    animation-name: placeHolderShimmer;\n    animation-timing-function: linear;\n  }\n\n  @keyframes placeHolderShimmer {\n    0% {\n      background-position: -1080px 0;\n    }\n    100% {\n      background-position: 1080px 0;\n    }\n  }\n`;\n\nSkeleton.displayName = 'Skeleton';\n"],"names":[],"mappings":";;;AAQO,MAAM,QAAQ,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC,KAAK,CAAC,OAAO;AACzD,IAAA,aAAa,EAAE,IAAI;AACpB,CAAA,CAAC,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,2KAAA,EAYC,CAAC,EAAE,KAAK,GAAG,EAAE,EAAE,MAAM,GAAG,EAAE,EAAE,KAAK;AACxB,WAAA,EAAA,KAAK,IAAI,MAAM,CAAA;iBACX,KAAK,CAAA;AACR,YAAA,EAAA,MAAM,IAAI,MAAM,CAAA;kBACZ,MAAM,CAAA;AACrB,EAAA,CAAA,CAAA,8SAAA;AAsBH,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}
+{"version":3,"file":"Skeleton.js","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import React from 'react';\n\nimport { assignCssVars } from '../../utils/assignCssVars';\n\nimport styles from './Skeleton.module.scss';\n\ntype SkeletonProps = {\n  width?: string;\n  height?: string;\n};\n\nexport const Skeleton = ({ width, height }: SkeletonProps) => {\n  return (\n    <div aria-hidden=\"true\" style={assignCssVars({ width, height })} className={styles.skeleton} />\n  );\n};\n"],"names":["React"],"mappings":";;;;AAWa,MAAA,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAiB,KAAI;IAC3D,QACEA,qDAAiB,MAAM,EAAC,KAAK,EAAE,aAAa,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,SAAS,EAAE,MAAM,CAAC,QAAQ,EAAI,CAAA;AAEnG;;;;"}

package/dist/components/Skeleton/Skeleton.module.scss.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._skeleton_1w7c5_1 {\n  box-sizing: border-box;\n  position: relative;\n  margin: var(--sizes-none);\n  padding: var(--sizes-none);\n  display: block;\n  background: #f6f7f8;\n  background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);\n  background-size: 2500px 104px;\n  cursor: progress;\n  border-radius: var(--sizes-1);\n  width: var(--width, \"100%\");\n  min-width: var(--width, \"100%\");\n  height: var(--height, \"20px\");\n  min-height: var(--height, \"20px\");\n}\n@keyframes _placeHolderShimmer_1w7c5_1 {\n  0% {\n    background-position: -1080px 0;\n  }\n  100% {\n    background-position: 1080px 0;\n  }\n}\n@media (prefers-reduced-motion: no-preference) {\n  ._skeleton_1w7c5_1 {\n    animation-duration: 2s;\n    animation-fill-mode: forwards;\n    animation-iteration-count: infinite;\n    animation-name: _placeHolderShimmer_1w7c5_1;\n    animation-timing-function: linear;\n  }\n}");
+var styles = {"skeleton":"_skeleton_1w7c5_1","placeHolderShimmer":"_placeHolderShimmer_1w7c5_1"};
+
+module.exports = styles;
+//# sourceMappingURL=Skeleton.module.scss.cjs.map

package/dist/components/Skeleton/Skeleton.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.module.scss.cjs","sources":["../../../src/components/Skeleton/Skeleton.module.scss"],"sourcesContent":[".skeleton {\n  box-sizing: border-box;\n  position: relative;\n  margin: var(--sizes-none);\n  padding: var(--sizes-none);\n\n  // General\n  display: block;\n  background: #f6f7f8;\n  background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);\n  background-size: 2500px 104px;\n\n  cursor: progress;\n\n  // Sizing\n  border-radius: var(--sizes-1);\n\n  width: var(--width, '100%');\n  min-width: var(--width, '100%');\n\n  height: var(--height, '20px');\n  min-height: var(--height, '20px');\n\n  // Animation\n  @keyframes placeHolderShimmer {\n    0% {\n      background-position: -1080px 0;\n    }\n    100% {\n      background-position: 1080px 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    animation-duration: 2s;\n    animation-fill-mode: forwards;\n    animation-iteration-count: infinite;\n    animation-name: placeHolderShimmer;\n    animation-timing-function: linear;\n  }\n}\n\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,y5BAAA;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,oBAAA,CAAA,6BAAA;;;;"}

package/dist/components/Skeleton/Skeleton.module.scss.js

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._skeleton_1w7c5_1 {\n  box-sizing: border-box;\n  position: relative;\n  margin: var(--sizes-none);\n  padding: var(--sizes-none);\n  display: block;\n  background: #f6f7f8;\n  background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);\n  background-size: 2500px 104px;\n  cursor: progress;\n  border-radius: var(--sizes-1);\n  width: var(--width, \"100%\");\n  min-width: var(--width, \"100%\");\n  height: var(--height, \"20px\");\n  min-height: var(--height, \"20px\");\n}\n@keyframes _placeHolderShimmer_1w7c5_1 {\n  0% {\n    background-position: -1080px 0;\n  }\n  100% {\n    background-position: 1080px 0;\n  }\n}\n@media (prefers-reduced-motion: no-preference) {\n  ._skeleton_1w7c5_1 {\n    animation-duration: 2s;\n    animation-fill-mode: forwards;\n    animation-iteration-count: infinite;\n    animation-name: _placeHolderShimmer_1w7c5_1;\n    animation-timing-function: linear;\n  }\n}");
+var styles = {"skeleton":"_skeleton_1w7c5_1","placeHolderShimmer":"_placeHolderShimmer_1w7c5_1"};
+
+export { styles as default };
+//# sourceMappingURL=Skeleton.module.scss.js.map

package/dist/components/Skeleton/Skeleton.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.module.scss.js","sources":["../../../src/components/Skeleton/Skeleton.module.scss"],"sourcesContent":[".skeleton {\n  box-sizing: border-box;\n  position: relative;\n  margin: var(--sizes-none);\n  padding: var(--sizes-none);\n\n  // General\n  display: block;\n  background: #f6f7f8;\n  background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);\n  background-size: 2500px 104px;\n\n  cursor: progress;\n\n  // Sizing\n  border-radius: var(--sizes-1);\n\n  width: var(--width, '100%');\n  min-width: var(--width, '100%');\n\n  height: var(--height, '20px');\n  min-height: var(--height, '20px');\n\n  // Animation\n  @keyframes placeHolderShimmer {\n    0% {\n      background-position: -1080px 0;\n    }\n    100% {\n      background-position: 1080px 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    animation-duration: 2s;\n    animation-fill-mode: forwards;\n    animation-iteration-count: infinite;\n    animation-name: placeHolderShimmer;\n    animation-timing-function: linear;\n  }\n}\n\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,y5BAAA;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,oBAAA,CAAA,6BAAA;;;;"}

package/dist/components/ViewTab/ViewTab.cjs

@@ -22,7 +22,7 @@ const generateClassNames = (prefix) => ({
     active: prefix ? `${prefix}-active` : undefined,
     counter: prefix ? `${prefix}-counter` : undefined,
 });
-const ViewTab = React__default.default.forwardRef(({ id, iconSlot, name, type, className, colourPalette = colors.colors.secondary.blue, customTextColour, count, active = false, onClick, subAction, ariaContext, ...props }, ref) => {
+const ViewTab = React__default.default.forwardRef(({ id, iconSlot, name, type, className, colourPalette = colors.colors.secondary.blue, customTextColour, count, countSlot, active = false, onClick, subAction, ariaContext, ariaDescribedBy, ...props }, ref) => {
     const classNames = generateClassNames(className);
     const [isHovered, handleEnter, handleLeave] = useHover.useHover();
     const action = active && subAction ? subAction : onClick;
@@ -36,12 +36,11 @@ const ViewTab = React__default.default.forwardRef(({ id, iconSlot, name, type, c
             return 'Edit';
         return '';
     };
-    return (React__default.default.createElement(styled.ViewButton, { className: buildClassnames.buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.container]), onClick: handleAction, role: "tab", "aria-selected": active, "aria-label": `${getLabelAction()} ${name} view ${count ? `with ${count} ${ariaContext}` : ''}`, customTextColour: customTextColour, ref: ref, ...props },
+    return (React__default.default.createElement(styled.ViewButton, { className: buildClassnames.buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.container]), onClick: handleAction, role: "tab", "aria-selected": active, "aria-label": `${getLabelAction()} ${name} view ${count && ariaContext ? `with ${count} ${ariaContext}` : ''}`, customTextColour: customTextColour, ref: ref, "aria-describedby": ariaDescribedBy, ...props },
         React__default.default.createElement(styled.Contour, { active: active, onMouseEnter: handleEnter, onMouseLeave: handleLeave, colourPalette: colourPalette, customTextColour: customTextColour },
             iconSlot && React__default.default.createElement(styled.CustomIconWrapper, null, iconSlot),
             React__default.default.createElement(Text.Text, { variant: "bodyBold" }, name),
-            count !== undefined && count !== null && (React__default.default.createElement(styled.CounterContainer, { "data-testid": "countContainer", active: active || isHovered, colourPalette: colourPalette, customTextColour: customTextColour },
-                React__default.default.createElement(styled.CounterText, { variant: "subheadingSmall" }, count))),
+            (countSlot || (count !== undefined && count !== null)) && (React__default.default.createElement(styled.CounterContainer, { "data-testid": "countContainer", active: active || isHovered, colourPalette: colourPalette, customTextColour: customTextColour }, countSlot || React__default.default.createElement(styled.CounterText, { variant: "subheadingSmall" }, count))),
             isDraft && React__default.default.createElement(styled.CrossIconStyling, { ...styled.IconStyling, "aria-label": "delete icon" }),
             isSaved && active && React__default.default.createElement(styled.ThreeDotsIconStyling, { ...styled.IconStyling, "aria-label": "edit icon" }))));
 });

package/dist/components/ViewTab/ViewTab.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ViewTab.cjs","sources":["../../../src/components/ViewTab/ViewTab.tsx"],"sourcesContent":["import React, { Ref } from 'react';\n\nimport { useHover } from '../../hooks';\nimport { colors } from '../../theme/modules/colors';\n\nimport { ViewTabProps, ViewTabTypes } from './types';\n\nimport {\n  Contour,\n  CounterContainer,\n  CounterText,\n  CrossIconStyling,\n  CustomIconWrapper,\n  IconStyling,\n  Text,\n  ThreeDotsIconStyling,\n  ViewButton,\n} from './styled';\nimport { buildClassnames } from '../../utils/buildClassnames';\n\nexport interface ClassNamesReturnPayload {\n  delete?: string;\n  edit?: string;\n  container?: string;\n  active?: string;\n  counter?: string;\n}\n\nconst generateClassNames = (prefix?: string): ClassNamesReturnPayload => ({\n  delete: prefix ? `${prefix}-delete` : undefined,\n  edit: prefix ? `${prefix}-edit` : undefined,\n  container: prefix ? `${prefix}-view` : undefined,\n  active: prefix ? `${prefix}-active` : undefined,\n  counter: prefix ? `${prefix}-counter` : undefined,\n});\n\nexport const ViewTab = React.forwardRef<HTMLButtonElement, ViewTabProps>(\n  (\n    {\n      id,\n      iconSlot,\n      name,\n      type,\n      className,\n      colourPalette = colors.secondary.blue,\n      customTextColour,\n      count,\n      active = false,\n      onClick,\n      subAction,\n      ariaContext,\n      ...props\n    }: ViewTabProps,\n    ref: Ref<HTMLButtonElement>,\n  ) => {\n    const classNames = generateClassNames(className);\n    const [isHovered, handleEnter, handleLeave] = useHover();\n\n    const action = active && subAction ? subAction : onClick;\n    const handleAction = () => action(id);\n\n    const isDraft = type === ViewTabTypes.draft;\n    const isSaved = type === ViewTabTypes.saved;\n\n    const getLabelAction = () => {\n      if (active && isDraft) return 'Delete';\n      if (active && isSaved) return 'Edit';\n      return '';\n    };\n\n    return (\n      <ViewButton\n        className={buildClassnames([classNames?.container])}\n        onClick={handleAction}\n        role=\"tab\"\n        aria-selected={active}\n        aria-label={`${getLabelAction()} ${name} view ${\n          count ? `with ${count} ${ariaContext}` : ''\n        }`}\n        customTextColour={customTextColour}\n        ref={ref}\n        {...props}\n      >\n        <Contour\n          active={active}\n          onMouseEnter={handleEnter}\n          onMouseLeave={handleLeave}\n          colourPalette={colourPalette}\n          customTextColour={customTextColour}\n        >\n          {iconSlot && <CustomIconWrapper>{iconSlot}</CustomIconWrapper>}\n          <Text variant=\"bodyBold\">{name}</Text>\n          {count !== undefined && count !== null && (\n            <CounterContainer\n              data-testid=\"countContainer\"\n              active={active || isHovered}\n              colourPalette={colourPalette}\n              customTextColour={customTextColour}\n            >\n              <CounterText variant=\"subheadingSmall\">{count}</CounterText>\n            </CounterContainer>\n          )}\n          {isDraft && <CrossIconStyling {...IconStyling} aria-label=\"delete icon\" />}\n          {isSaved && active && <ThreeDotsIconStyling {...IconStyling} aria-label=\"edit icon\" />}\n        </Contour>\n      </ViewButton>\n    );\n  },\n);\n"],"names":["React","colors","useHover","ViewTabTypes","ViewButton","buildClassnames","Contour","CustomIconWrapper","Text","CounterContainer","CounterText","CrossIconStyling","IconStyling","ThreeDotsIconStyling"],"mappings":"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"}
+{"version":3,"file":"ViewTab.cjs","sources":["../../../src/components/ViewTab/ViewTab.tsx"],"sourcesContent":["import React, { Ref } from 'react';\n\nimport { useHover } from '../../hooks';\nimport { colors } from '../../theme/modules/colors';\n\nimport { ViewTabProps, ViewTabTypes } from './types';\n\nimport {\n  Contour,\n  CounterContainer,\n  CounterText,\n  CrossIconStyling,\n  CustomIconWrapper,\n  IconStyling,\n  Text,\n  ThreeDotsIconStyling,\n  ViewButton,\n} from './styled';\nimport { buildClassnames } from '../../utils/buildClassnames';\n\nexport interface ClassNamesReturnPayload {\n  delete?: string;\n  edit?: string;\n  container?: string;\n  active?: string;\n  counter?: string;\n}\n\nconst generateClassNames = (prefix?: string): ClassNamesReturnPayload => ({\n  delete: prefix ? `${prefix}-delete` : undefined,\n  edit: prefix ? `${prefix}-edit` : undefined,\n  container: prefix ? `${prefix}-view` : undefined,\n  active: prefix ? `${prefix}-active` : undefined,\n  counter: prefix ? `${prefix}-counter` : undefined,\n});\n\nexport const ViewTab = React.forwardRef<HTMLButtonElement, ViewTabProps>(\n  (\n    {\n      id,\n      iconSlot,\n      name,\n      type,\n      className,\n      colourPalette = colors.secondary.blue,\n      customTextColour,\n      count,\n      countSlot,\n      active = false,\n      onClick,\n      subAction,\n      ariaContext,\n      ariaDescribedBy,\n      ...props\n    }: ViewTabProps,\n    ref: Ref<HTMLButtonElement>,\n  ) => {\n    const classNames = generateClassNames(className);\n    const [isHovered, handleEnter, handleLeave] = useHover();\n\n    const action = active && subAction ? subAction : onClick;\n    const handleAction = () => action(id);\n\n    const isDraft = type === ViewTabTypes.draft;\n    const isSaved = type === ViewTabTypes.saved;\n\n    const getLabelAction = () => {\n      if (active && isDraft) return 'Delete';\n      if (active && isSaved) return 'Edit';\n      return '';\n    };\n\n    return (\n      <ViewButton\n        className={buildClassnames([classNames?.container])}\n        onClick={handleAction}\n        role=\"tab\"\n        aria-selected={active}\n        aria-label={`${getLabelAction()} ${name} view ${\n          count && ariaContext ? `with ${count} ${ariaContext}` : ''\n        }`}\n        customTextColour={customTextColour}\n        ref={ref}\n        aria-describedby={ariaDescribedBy}\n        {...props}\n      >\n        <Contour\n          active={active}\n          onMouseEnter={handleEnter}\n          onMouseLeave={handleLeave}\n          colourPalette={colourPalette}\n          customTextColour={customTextColour}\n        >\n          {iconSlot && <CustomIconWrapper>{iconSlot}</CustomIconWrapper>}\n          <Text variant=\"bodyBold\">{name}</Text>\n          {(countSlot || (count !== undefined && count !== null)) && (\n            <CounterContainer\n              data-testid=\"countContainer\"\n              active={active || isHovered}\n              colourPalette={colourPalette}\n              customTextColour={customTextColour}\n            >\n              {countSlot || <CounterText variant=\"subheadingSmall\">{count}</CounterText>}\n            </CounterContainer>\n          )}\n          {isDraft && <CrossIconStyling {...IconStyling} aria-label=\"delete icon\" />}\n          {isSaved && active && <ThreeDotsIconStyling {...IconStyling} aria-label=\"edit icon\" />}\n        </Contour>\n      </ViewButton>\n    );\n  },\n);\n"],"names":["React","colors","useHover","ViewTabTypes","ViewButton","buildClassnames","Contour","CustomIconWrapper","Text","CounterContainer","CounterText","CrossIconStyling","IconStyling","ThreeDotsIconStyling"],"mappings":"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"}

package/dist/components/ViewTab/ViewTab.d.ts

@@ -15,7 +15,9 @@ export declare const ViewTab: React.ForwardRefExoticComponent<Omit<React.ButtonH
     id: string;
     type?: "fixed" | "saved" | "draft" | undefined;
     count?: string | number | null | undefined;
+    countSlot?: React.ReactNode;
     onClick: (id: string) => void;
     subAction?: ((id: string) => void) | undefined;
-    ariaContext: string;
+    ariaContext?: string | undefined;
+    ariaDescribedBy?: string | undefined;
 } & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/ViewTab/ViewTab.js

@@ -16,7 +16,7 @@ const generateClassNames = (prefix) => ({
     active: prefix ? `${prefix}-active` : undefined,
     counter: prefix ? `${prefix}-counter` : undefined,
 });
-const ViewTab = React__default.forwardRef(({ id, iconSlot, name, type, className, colourPalette = colors.secondary.blue, customTextColour, count, active = false, onClick, subAction, ariaContext, ...props }, ref) => {
+const ViewTab = React__default.forwardRef(({ id, iconSlot, name, type, className, colourPalette = colors.secondary.blue, customTextColour, count, countSlot, active = false, onClick, subAction, ariaContext, ariaDescribedBy, ...props }, ref) => {
     const classNames = generateClassNames(className);
     const [isHovered, handleEnter, handleLeave] = useHover();
     const action = active && subAction ? subAction : onClick;
@@ -30,12 +30,11 @@ const ViewTab = React__default.forwardRef(({ id, iconSlot, name, type, className
             return 'Edit';
         return '';
     };
-    return (React__default.createElement(ViewButton, { className: buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.container]), onClick: handleAction, role: "tab", "aria-selected": active, "aria-label": `${getLabelAction()} ${name} view ${count ? `with ${count} ${ariaContext}` : ''}`, customTextColour: customTextColour, ref: ref, ...props },
+    return (React__default.createElement(ViewButton, { className: buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.container]), onClick: handleAction, role: "tab", "aria-selected": active, "aria-label": `${getLabelAction()} ${name} view ${count && ariaContext ? `with ${count} ${ariaContext}` : ''}`, customTextColour: customTextColour, ref: ref, "aria-describedby": ariaDescribedBy, ...props },
         React__default.createElement(Contour, { active: active, onMouseEnter: handleEnter, onMouseLeave: handleLeave, colourPalette: colourPalette, customTextColour: customTextColour },
             iconSlot && React__default.createElement(CustomIconWrapper, null, iconSlot),
             React__default.createElement(Text, { variant: "bodyBold" }, name),
-            count !== undefined && count !== null && (React__default.createElement(CounterContainer, { "data-testid": "countContainer", active: active || isHovered, colourPalette: colourPalette, customTextColour: customTextColour },
-                React__default.createElement(CounterText, { variant: "subheadingSmall" }, count))),
+            (countSlot || (count !== undefined && count !== null)) && (React__default.createElement(CounterContainer, { "data-testid": "countContainer", active: active || isHovered, colourPalette: colourPalette, customTextColour: customTextColour }, countSlot || React__default.createElement(CounterText, { variant: "subheadingSmall" }, count))),
             isDraft && React__default.createElement(CrossIconStyling, { ...IconStyling, "aria-label": "delete icon" }),
             isSaved && active && React__default.createElement(ThreeDotsIconStyling, { ...IconStyling, "aria-label": "edit icon" }))));
 });

package/dist/components/ViewTab/ViewTab.js.map

@@ -1 +1 @@
-{"version":3,"file":"ViewTab.js","sources":["../../../src/components/ViewTab/ViewTab.tsx"],"sourcesContent":["import React, { Ref } from 'react';\n\nimport { useHover } from '../../hooks';\nimport { colors } from '../../theme/modules/colors';\n\nimport { ViewTabProps, ViewTabTypes } from './types';\n\nimport {\n  Contour,\n  CounterContainer,\n  CounterText,\n  CrossIconStyling,\n  CustomIconWrapper,\n  IconStyling,\n  Text,\n  ThreeDotsIconStyling,\n  ViewButton,\n} from './styled';\nimport { buildClassnames } from '../../utils/buildClassnames';\n\nexport interface ClassNamesReturnPayload {\n  delete?: string;\n  edit?: string;\n  container?: string;\n  active?: string;\n  counter?: string;\n}\n\nconst generateClassNames = (prefix?: string): ClassNamesReturnPayload => ({\n  delete: prefix ? `${prefix}-delete` : undefined,\n  edit: prefix ? `${prefix}-edit` : undefined,\n  container: prefix ? `${prefix}-view` : undefined,\n  active: prefix ? `${prefix}-active` : undefined,\n  counter: prefix ? `${prefix}-counter` : undefined,\n});\n\nexport const ViewTab = React.forwardRef<HTMLButtonElement, ViewTabProps>(\n  (\n    {\n      id,\n      iconSlot,\n      name,\n      type,\n      className,\n      colourPalette = colors.secondary.blue,\n      customTextColour,\n      count,\n      active = false,\n      onClick,\n      subAction,\n      ariaContext,\n      ...props\n    }: ViewTabProps,\n    ref: Ref<HTMLButtonElement>,\n  ) => {\n    const classNames = generateClassNames(className);\n    const [isHovered, handleEnter, handleLeave] = useHover();\n\n    const action = active && subAction ? subAction : onClick;\n    const handleAction = () => action(id);\n\n    const isDraft = type === ViewTabTypes.draft;\n    const isSaved = type === ViewTabTypes.saved;\n\n    const getLabelAction = () => {\n      if (active && isDraft) return 'Delete';\n      if (active && isSaved) return 'Edit';\n      return '';\n    };\n\n    return (\n      <ViewButton\n        className={buildClassnames([classNames?.container])}\n        onClick={handleAction}\n        role=\"tab\"\n        aria-selected={active}\n        aria-label={`${getLabelAction()} ${name} view ${\n          count ? `with ${count} ${ariaContext}` : ''\n        }`}\n        customTextColour={customTextColour}\n        ref={ref}\n        {...props}\n      >\n        <Contour\n          active={active}\n          onMouseEnter={handleEnter}\n          onMouseLeave={handleLeave}\n          colourPalette={colourPalette}\n          customTextColour={customTextColour}\n        >\n          {iconSlot && <CustomIconWrapper>{iconSlot}</CustomIconWrapper>}\n          <Text variant=\"bodyBold\">{name}</Text>\n          {count !== undefined && count !== null && (\n            <CounterContainer\n              data-testid=\"countContainer\"\n              active={active || isHovered}\n              colourPalette={colourPalette}\n              customTextColour={customTextColour}\n            >\n              <CounterText variant=\"subheadingSmall\">{count}</CounterText>\n            </CounterContainer>\n          )}\n          {isDraft && <CrossIconStyling {...IconStyling} aria-label=\"delete icon\" />}\n          {isSaved && active && <ThreeDotsIconStyling {...IconStyling} aria-label=\"edit icon\" />}\n        </Contour>\n      </ViewButton>\n    );\n  },\n);\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"ViewTab.js","sources":["../../../src/components/ViewTab/ViewTab.tsx"],"sourcesContent":["import React, { Ref } from 'react';\n\nimport { useHover } from '../../hooks';\nimport { colors } from '../../theme/modules/colors';\n\nimport { ViewTabProps, ViewTabTypes } from './types';\n\nimport {\n  Contour,\n  CounterContainer,\n  CounterText,\n  CrossIconStyling,\n  CustomIconWrapper,\n  IconStyling,\n  Text,\n  ThreeDotsIconStyling,\n  ViewButton,\n} from './styled';\nimport { buildClassnames } from '../../utils/buildClassnames';\n\nexport interface ClassNamesReturnPayload {\n  delete?: string;\n  edit?: string;\n  container?: string;\n  active?: string;\n  counter?: string;\n}\n\nconst generateClassNames = (prefix?: string): ClassNamesReturnPayload => ({\n  delete: prefix ? `${prefix}-delete` : undefined,\n  edit: prefix ? `${prefix}-edit` : undefined,\n  container: prefix ? `${prefix}-view` : undefined,\n  active: prefix ? `${prefix}-active` : undefined,\n  counter: prefix ? `${prefix}-counter` : undefined,\n});\n\nexport const ViewTab = React.forwardRef<HTMLButtonElement, ViewTabProps>(\n  (\n    {\n      id,\n      iconSlot,\n      name,\n      type,\n      className,\n      colourPalette = colors.secondary.blue,\n      customTextColour,\n      count,\n      countSlot,\n      active = false,\n      onClick,\n      subAction,\n      ariaContext,\n      ariaDescribedBy,\n      ...props\n    }: ViewTabProps,\n    ref: Ref<HTMLButtonElement>,\n  ) => {\n    const classNames = generateClassNames(className);\n    const [isHovered, handleEnter, handleLeave] = useHover();\n\n    const action = active && subAction ? subAction : onClick;\n    const handleAction = () => action(id);\n\n    const isDraft = type === ViewTabTypes.draft;\n    const isSaved = type === ViewTabTypes.saved;\n\n    const getLabelAction = () => {\n      if (active && isDraft) return 'Delete';\n      if (active && isSaved) return 'Edit';\n      return '';\n    };\n\n    return (\n      <ViewButton\n        className={buildClassnames([classNames?.container])}\n        onClick={handleAction}\n        role=\"tab\"\n        aria-selected={active}\n        aria-label={`${getLabelAction()} ${name} view ${\n          count && ariaContext ? `with ${count} ${ariaContext}` : ''\n        }`}\n        customTextColour={customTextColour}\n        ref={ref}\n        aria-describedby={ariaDescribedBy}\n        {...props}\n      >\n        <Contour\n          active={active}\n          onMouseEnter={handleEnter}\n          onMouseLeave={handleLeave}\n          colourPalette={colourPalette}\n          customTextColour={customTextColour}\n        >\n          {iconSlot && <CustomIconWrapper>{iconSlot}</CustomIconWrapper>}\n          <Text variant=\"bodyBold\">{name}</Text>\n          {(countSlot || (count !== undefined && count !== null)) && (\n            <CounterContainer\n              data-testid=\"countContainer\"\n              active={active || isHovered}\n              colourPalette={colourPalette}\n              customTextColour={customTextColour}\n            >\n              {countSlot || <CounterText variant=\"subheadingSmall\">{count}</CounterText>}\n            </CounterContainer>\n          )}\n          {isDraft && <CrossIconStyling {...IconStyling} aria-label=\"delete icon\" />}\n          {isSaved && active && <ThreeDotsIconStyling {...IconStyling} aria-label=\"edit icon\" />}\n        </Contour>\n      </ViewButton>\n    );\n  },\n);\n"],"names":["React"],"mappings":"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"}

package/dist/components/ViewTab/styled.cjs

@@ -18,11 +18,22 @@ var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 const CounterText = styled__default.default(Text.Text).withConfig({ displayName: "vui--CounterText", componentId: "vui--13z4q4k" }) `line-height:1;`;
 const ThreeDotsIconStyling = styled__default.default(ThreeDotsIcon.ThreeDotsIcon).withConfig({ displayName: "vui--ThreeDotsIconStyling", componentId: "vui--lo8tpb" }) ``;
 const CrossIconStyling = styled__default.default(CrossIcon.ReactComponent).withConfig({ displayName: "vui--CrossIconStyling", componentId: "vui--u5oj4b" }) ``;
-const CounterContainer = styled__default.default(Text.Text).withConfig({ displayName: "vui--CounterContainer", componentId: "vui--1nbpnol" }) `display:inline-flex;flex-direction:row;justify-content:center;align-items:center;border-radius:4px;padding:2px 4px;min-width:20px;height:20px;margin-left:8px;${({ active, colourPalette }) => active &&
+const CounterContainer = styled__default.default.div.withConfig({ displayName: "vui--CounterContainer", componentId: "vui--1nbpnol" }) `display:inline-flex;flex-direction:row;justify-content:center;align-items:center;border-radius:4px;padding:2px 4px;min-width:20px;height:20px;margin-left:8px;${({ active, colourPalette }) => active &&
     `
       background-color: ${colourPalette.dark};
 
-      & > ${CounterText} {
+      & ${CounterText} {
+        color: ${colors.colors.neutral.grey.lightest};
+      }
+
+      /* Force all text elements to be white when active, used when using slot */
+      & ${Text.Text} {
+        color: ${colors.colors.neutral.grey.lightest} !important;
+      }
+
+      /* Force all SVG icons to be white when active, used when using slot */
+      & svg {
+        fill: ${colors.colors.neutral.grey.lightest};
         color: ${colors.colors.neutral.grey.lightest};
       }
   `}`;
@@ -35,6 +46,13 @@ const Contour = styled__default.default(BaseContainer.BaseContainer).withConfig(
       & > ${CounterText} {
         color: ${colors.colors.neutral.ink.base};
       }
+      & ${Text.Text} {
+        color: ${colors.colors.neutral.ink.base} !important;
+      }
+      & svg {
+        fill: ${colors.colors.neutral.ink.base};
+        color: ${colors.colors.neutral.ink.base};
+      }
     }
     & > ${Text.Text} {
       color: ${customTextColour !== null && customTextColour !== undefined ? customTextColour : colors.colors.neutral.ink.dark};
@@ -74,6 +92,13 @@ const ViewButton = styled__default.default(styled$1.FlatButton).withConfig({ dis
         & > ${CounterText} {
           color: ${colors.colors.neutral.ink.base};
         }
+        & ${Text.Text} {
+          color: ${colors.colors.neutral.ink.base} !important;
+        }
+        & svg {
+          fill: ${colors.colors.neutral.ink.base};
+          color: ${colors.colors.neutral.ink.base};
+        }
       }
       & > ${Text.Text} {
         color: ${customTextColour !== null && customTextColour !== undefined ? customTextColour : colors.colors.neutral.ink.dark};

package/dist/components/ViewTab/styled.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../src/components/ViewTab/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { CSSProperties } from 'react';\nimport { ColourPalette, colors } from '../../theme/modules/colors';\n\nimport { Text } from '../Text';\nimport { BaseContainer } from '../BaseContainer';\n\nimport { ViewTabProps } from './types';\nimport { sizes } from '../../theme/modules/sizes';\nimport { ThreeDotsIcon, CrossIcon } from '../../icons';\nimport { FlatButton } from '../Button/components/styled';\nimport { theme } from '../../theme';\n\ntype RequiredPalette = { colourPalette: ColourPalette };\nexport type ContourProps = Pick<ViewTabProps, 'active' | 'customTextColour'> & RequiredPalette;\nexport type CounterProps = Pick<ViewTabProps, 'active' | 'customTextColour'> & RequiredPalette;\nexport type ViewButtonProps = Pick<ViewTabProps, 'customTextColour'>;\n\nconst CounterText = styled(Text)`\n  line-height: 1;\n`;\n\nconst ThreeDotsIconStyling = styled(ThreeDotsIcon)``;\nconst CrossIconStyling = styled(CrossIcon)``;\n\nconst CounterContainer = styled(Text)<CounterProps>`\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  border-radius: 4px;\n  padding: 2px 4px;\n  min-width: 20px;\n  height: 20px;\n  margin-left: 8px;\n\n  ${({ active, colourPalette }) =>\n    active &&\n    `\n      background-color: ${colourPalette.dark};\n\n      & > ${CounterText} {\n        color: ${colors.neutral.grey.lightest};\n      }\n  `}\n`;\n\nconst Contour = styled(BaseContainer)<ContourProps>`\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 40px;\n  border-radius: 4px;\n  padding: ${theme.sizes.sm};\n  border: 1px solid transparent;\n  cursor: pointer;\n  background-color: transparent;\n\n  ${({ customTextColour }) => `\n\n  &:hover {\n    background-color: ${colors.neutral.grey.base};\n    & > ${CounterContainer} {\n      background-color: ${colors.neutral.grey.base};\n      & > ${CounterText} {\n        color: ${colors.neutral.ink.base};\n      }\n    }\n    & > ${Text} {\n      color: ${customTextColour ?? colors.neutral.ink.dark};\n    }\n    & > ${ThreeDotsIconStyling} {\n      color: ${colors.neutral.ink.dark};\n    }\n    & > ${CrossIconStyling} {\n      color: ${colors.neutral.ink.dark};\n    }\n  }\n\n  & > ${Text} {\n    color: ${customTextColour ?? colors.neutral.ink.dark};\n  }\n  `}\n\n  ${({ active, colourPalette, customTextColour }) =>\n    active &&\n    `\n    background-color: ${colourPalette.lightest};\n\n    & > ${ThreeDotsIconStyling} {\n      color: ${colourPalette.dark};\n    }\n    & > ${CrossIconStyling} {\n      color: ${colourPalette.dark};\n    }\n\n    & > ${Text} {\n      color: ${customTextColour ?? colourPalette.dark};\n    }\n  `}\n`;\n\nconst ViewButton = styled(FlatButton)<ViewButtonProps>`\n  padding: ${theme.sizes.sm};\n  box-sizing: border-box;\n  border-radius: 4px;\n  border: none;\n  position: relative;\n  margin: 0;\n  padding: 0;\n\n  ${({ customTextColour }) => `\n  &:focus-visible {\n    ${Contour} {\n      background-color: ${colors.neutral.grey.base};\n      & > ${CounterContainer} {\n        background-color: ${colors.neutral.grey.base};\n        & > ${CounterText} {\n          color: ${colors.neutral.ink.base};\n        }\n      }\n      & > ${Text} {\n        color: ${customTextColour ?? colors.neutral.ink.dark};\n      }\n      & > ${ThreeDotsIconStyling} {\n        color: ${colors.neutral.ink.dark};\n      }\n      & > ${CrossIconStyling} {\n        color: ${colors.neutral.ink.dark};\n      }\n    }\n  `}\n`;\n\nconst IconStyling = {\n  style: {\n    marginLeft: sizes.xs,\n    padding: sizes.xs,\n    height: sizes.base,\n    width: sizes.base,\n  } as CSSProperties,\n};\n\nexport const CustomIconWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  margin-right: ${sizes.sm};\n\n  svg {\n    height: ${sizes.base};\n    width: ${sizes.base};\n  }\n`;\n\nexport {\n  ViewButton,\n  Contour,\n  Text,\n  CounterContainer,\n  CounterText,\n  IconStyling,\n  ThreeDotsIconStyling,\n  CrossIconStyling,\n};\n"],"names":["styled","Text","ThreeDotsIcon","CrossIcon","colors","BaseContainer","theme","FlatButton","sizes"],"mappings":"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"}
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/ViewTab/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { CSSProperties } from 'react';\nimport { ColourPalette, colors } from '../../theme/modules/colors';\n\nimport { Text } from '../Text';\nimport { BaseContainer } from '../BaseContainer';\n\nimport { ViewTabProps } from './types';\nimport { sizes } from '../../theme/modules/sizes';\nimport { ThreeDotsIcon, CrossIcon } from '../../icons';\nimport { FlatButton } from '../Button/components/styled';\nimport { theme } from '../../theme';\n\ntype RequiredPalette = { colourPalette: ColourPalette };\nexport type ContourProps = Pick<ViewTabProps, 'active' | 'customTextColour'> & RequiredPalette;\nexport type CounterProps = Pick<ViewTabProps, 'active' | 'customTextColour'> & RequiredPalette;\nexport type ViewButtonProps = Pick<ViewTabProps, 'customTextColour'>;\n\nconst CounterText = styled(Text)`\n  line-height: 1;\n`;\n\nconst ThreeDotsIconStyling = styled(ThreeDotsIcon)``;\nconst CrossIconStyling = styled(CrossIcon)``;\n\nconst CounterContainer = styled.div<CounterProps>`\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  border-radius: 4px;\n  padding: 2px 4px;\n  min-width: 20px;\n  height: 20px;\n  margin-left: 8px;\n\n  ${({ active, colourPalette }) =>\n    active &&\n    `\n      background-color: ${colourPalette.dark};\n\n      & ${CounterText} {\n        color: ${colors.neutral.grey.lightest};\n      }\n\n      /* Force all text elements to be white when active, used when using slot */\n      & ${Text} {\n        color: ${colors.neutral.grey.lightest} !important;\n      }\n\n      /* Force all SVG icons to be white when active, used when using slot */\n      & svg {\n        fill: ${colors.neutral.grey.lightest};\n        color: ${colors.neutral.grey.lightest};\n      }\n  `}\n`;\n\nconst Contour = styled(BaseContainer)<ContourProps>`\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 40px;\n  border-radius: 4px;\n  padding: ${theme.sizes.sm};\n  border: 1px solid transparent;\n  cursor: pointer;\n  background-color: transparent;\n\n  ${({ customTextColour }) => `\n\n  &:hover {\n    background-color: ${colors.neutral.grey.base};\n    & > ${CounterContainer} {\n      background-color: ${colors.neutral.grey.base};\n      & > ${CounterText} {\n        color: ${colors.neutral.ink.base};\n      }\n      & ${Text} {\n        color: ${colors.neutral.ink.base} !important;\n      }\n      & svg {\n        fill: ${colors.neutral.ink.base};\n        color: ${colors.neutral.ink.base};\n      }\n    }\n    & > ${Text} {\n      color: ${customTextColour ?? colors.neutral.ink.dark};\n    }\n    & > ${ThreeDotsIconStyling} {\n      color: ${colors.neutral.ink.dark};\n    }\n    & > ${CrossIconStyling} {\n      color: ${colors.neutral.ink.dark};\n    }\n  }\n\n  & > ${Text} {\n    color: ${customTextColour ?? colors.neutral.ink.dark};\n  }\n  `}\n\n  ${({ active, colourPalette, customTextColour }) =>\n    active &&\n    `\n    background-color: ${colourPalette.lightest};\n\n    & > ${ThreeDotsIconStyling} {\n      color: ${colourPalette.dark};\n    }\n    & > ${CrossIconStyling} {\n      color: ${colourPalette.dark};\n    }\n\n    & > ${Text} {\n      color: ${customTextColour ?? colourPalette.dark};\n    }\n  `}\n`;\n\nconst ViewButton = styled(FlatButton)<ViewButtonProps>`\n  padding: ${theme.sizes.sm};\n  box-sizing: border-box;\n  border-radius: 4px;\n  border: none;\n  position: relative;\n  margin: 0;\n  padding: 0;\n\n  ${({ customTextColour }) => `\n  &:focus-visible {\n    ${Contour} {\n      background-color: ${colors.neutral.grey.base};\n      & > ${CounterContainer} {\n        background-color: ${colors.neutral.grey.base};\n        & > ${CounterText} {\n          color: ${colors.neutral.ink.base};\n        }\n        & ${Text} {\n          color: ${colors.neutral.ink.base} !important;\n        }\n        & svg {\n          fill: ${colors.neutral.ink.base};\n          color: ${colors.neutral.ink.base};\n        }\n      }\n      & > ${Text} {\n        color: ${customTextColour ?? colors.neutral.ink.dark};\n      }\n      & > ${ThreeDotsIconStyling} {\n        color: ${colors.neutral.ink.dark};\n      }\n      & > ${CrossIconStyling} {\n        color: ${colors.neutral.ink.dark};\n      }\n    }\n  `}\n`;\n\nconst IconStyling = {\n  style: {\n    marginLeft: sizes.xs,\n    padding: sizes.xs,\n    height: sizes.base,\n    width: sizes.base,\n  } as CSSProperties,\n};\n\nexport const CustomIconWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  margin-right: ${sizes.sm};\n\n  svg {\n    height: ${sizes.base};\n    width: ${sizes.base};\n  }\n`;\n\nexport {\n  ViewButton,\n  Contour,\n  Text,\n  CounterContainer,\n  CounterText,\n  IconStyling,\n  ThreeDotsIconStyling,\n  CrossIconStyling,\n};\n"],"names":["styled","Text","ThreeDotsIcon","CrossIcon","colors","BaseContainer","theme","FlatButton","sizes"],"mappings":";;;;;;;;;;;;;;;;;AAmBA,MAAM,WAAW,GAAGA,uBAAM,CAACC,SAAI,CAAC;AAIhC,MAAM,oBAAoB,GAAGD,uBAAM,CAACE,2BAAa,CAAC;AAClD,MAAM,gBAAgB,GAAGF,uBAAM,CAACG,wBAAS,CAAC;AAE1C,MAAM,gBAAgB,GAAGH,uBAAM,CAAC,GAAG,CAW/B,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,8JAAA,EAAA,CAAC,EAAE,MAAM,EAAE,aAAa,EAAE,KAC1B,MAAM;AACN,IAAA;AACsB,wBAAA,EAAA,aAAa,CAAC,IAAI,CAAA;;UAElC,WAAW,CAAA;AACJ,eAAA,EAAAI,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA;;;;UAInCH,SAAI,CAAA;AACG,eAAA,EAAAG,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA;;;;;AAK7B,cAAA,EAAAA,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA;AAC3B,eAAA,EAAAA,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA;;AAE1C,EAAA,CAAA,CAAA;AAGH,MAAM,OAAO,GAAGJ,uBAAM,CAACK,2BAAa,CAAC,wLAOxBC,WAAK,CAAC,KAAK,CAAC,EAAE,6EAKvB,CAAC,EAAE,gBAAgB,EAAE,KAAK;;;AAGN,sBAAA,EAAAF,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA;UACtC,gBAAgB,CAAA;AACA,wBAAA,EAAAA,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA;YACtC,WAAW,CAAA;AACN,eAAA,EAAAA,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;UAE9BH,SAAI,CAAA;AACG,eAAA,EAAAG,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;;AAGxB,cAAA,EAAAA,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;AACtB,eAAA,EAAAA,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;;UAG9BH,SAAI,CAAA;eACC,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAA,SAAA,GAAhB,gBAAgB,GAAIG,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;UAEhD,oBAAoB,CAAA;AACf,aAAA,EAAAA,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;UAE5B,gBAAgB,CAAA;AACX,aAAA,EAAAA,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;;;QAI9BH,SAAI,CAAA;aACC,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAA,SAAA,GAAhB,gBAAgB,GAAIG,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;GAErD,CAEC,CAAA,EAAA,CAAC,EAAE,MAAM,EAAE,aAAa,EAAE,gBAAgB,EAAE,KAC5C,MAAM;AACN,IAAA;AACoB,sBAAA,EAAA,aAAa,CAAC,QAAQ,CAAA;;UAEpC,oBAAoB,CAAA;AACf,aAAA,EAAA,aAAa,CAAC,IAAI,CAAA;;UAEvB,gBAAgB,CAAA;AACX,aAAA,EAAA,aAAa,CAAC,IAAI,CAAA;;;UAGvBH,SAAI,CAAA;AACC,aAAA,EAAA,gBAAgB,aAAhB,gBAAgB,KAAA,SAAA,GAAhB,gBAAgB,GAAI,aAAa,CAAC,IAAI,CAAA;;AAElD,EAAA,CAAA,CAAA;AAGH,MAAM,UAAU,GAAGD,uBAAM,CAACO,mBAAU,CAAC,uFACxBD,WAAK,CAAC,KAAK,CAAC,EAAE,6FAQvB,CAAC,EAAE,gBAAgB,EAAE,KAAK;;MAExB,OAAO,CAAA;AACa,wBAAA,EAAAF,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA;YACtC,gBAAgB,CAAA;AACA,0BAAA,EAAAA,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA;cACtC,WAAW,CAAA;AACN,iBAAA,EAAAA,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;YAE9BH,SAAI,CAAA;AACG,iBAAA,EAAAG,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;;AAGxB,gBAAA,EAAAA,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;AACtB,iBAAA,EAAAA,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;;YAG9BH,SAAI,CAAA;iBACC,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAA,SAAA,GAAhB,gBAAgB,GAAIG,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;YAEhD,oBAAoB,CAAA;AACf,eAAA,EAAAA,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;YAE5B,gBAAgB,CAAA;AACX,eAAA,EAAAA,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;;AAGrC,EAAA,CAAA,CAAA;AAGH,MAAM,WAAW,GAAG;AAClB,IAAA,KAAK,EAAE;QACL,UAAU,EAAEI,WAAK,CAAC,EAAE;QACpB,OAAO,EAAEA,WAAK,CAAC,EAAE;QACjB,MAAM,EAAEA,WAAK,CAAC,IAAI;QAClB,KAAK,EAAEA,WAAK,CAAC,IAAI;AACD,KAAA;;MAGP,iBAAiB,GAAGR,uBAAM,CAAC,GAAG,oIAGzBQ,WAAK,CAAC,EAAE,CAGZ,YAAA,EAAAA,WAAK,CAAC,IAAI,CAAA,OAAA,EACXA,WAAK,CAAC,IAAI;;;;;;;;;;;;"}

package/dist/components/ViewTab/styled.d.ts

@@ -11,7 +11,7 @@ export type ViewButtonProps = Pick<ViewTabProps, 'customTextColour'>;
 declare const CounterText: import("styled-components").StyledComponent<"span", any, {} & import("../Text/types").TextProps, never>;
 declare const ThreeDotsIconStyling: import("styled-components").StyledComponent<(props: import("../../icons/types").IconComponentProps) => import("react").JSX.Element, any, {}, never>;
 declare const CrossIconStyling: import("styled-components").StyledComponent<(props: import("react").SVGProps<SVGSVGElement>) => import("react").JSX.Element, any, {}, never>;
-declare const CounterContainer: import("styled-components").StyledComponent<"span", any, ({} & import("../Text/types").TextProps) & Pick<ViewTabProps, "active" | "customTextColour"> & RequiredPalette, never>;
+declare const CounterContainer: import("styled-components").StyledComponent<"div", any, Pick<ViewTabProps, "active" | "customTextColour"> & RequiredPalette, never>;
 declare const Contour: import("styled-components").StyledComponent<"div", any, Pick<ViewTabProps, "active" | "customTextColour"> & RequiredPalette, never>;
 declare const ViewButton: import("styled-components").StyledComponent<any, any, object & ViewButtonProps, string | number | symbol>;
 declare const IconStyling: {

package/dist/components/ViewTab/styled.js

@@ -12,11 +12,22 @@ import { theme } from '../../theme/index.js';
 const CounterText = styled(Text).withConfig({ displayName: "vui--CounterText", componentId: "vui--13z4q4k" }) `line-height:1;`;
 const ThreeDotsIconStyling = styled(ThreeDotsIcon).withConfig({ displayName: "vui--ThreeDotsIconStyling", componentId: "vui--lo8tpb" }) ``;
 const CrossIconStyling = styled(CrossIcon).withConfig({ displayName: "vui--CrossIconStyling", componentId: "vui--u5oj4b" }) ``;
-const CounterContainer = styled(Text).withConfig({ displayName: "vui--CounterContainer", componentId: "vui--1nbpnol" }) `display:inline-flex;flex-direction:row;justify-content:center;align-items:center;border-radius:4px;padding:2px 4px;min-width:20px;height:20px;margin-left:8px;${({ active, colourPalette }) => active &&
+const CounterContainer = styled.div.withConfig({ displayName: "vui--CounterContainer", componentId: "vui--1nbpnol" }) `display:inline-flex;flex-direction:row;justify-content:center;align-items:center;border-radius:4px;padding:2px 4px;min-width:20px;height:20px;margin-left:8px;${({ active, colourPalette }) => active &&
     `
       background-color: ${colourPalette.dark};
 
-      & > ${CounterText} {
+      & ${CounterText} {
+        color: ${colors.neutral.grey.lightest};
+      }
+
+      /* Force all text elements to be white when active, used when using slot */
+      & ${Text} {
+        color: ${colors.neutral.grey.lightest} !important;
+      }
+
+      /* Force all SVG icons to be white when active, used when using slot */
+      & svg {
+        fill: ${colors.neutral.grey.lightest};
         color: ${colors.neutral.grey.lightest};
       }
   `}`;
@@ -29,6 +40,13 @@ const Contour = styled(BaseContainer).withConfig({ displayName: "vui--Contour",
       & > ${CounterText} {
         color: ${colors.neutral.ink.base};
       }
+      & ${Text} {
+        color: ${colors.neutral.ink.base} !important;
+      }
+      & svg {
+        fill: ${colors.neutral.ink.base};
+        color: ${colors.neutral.ink.base};
+      }
     }
     & > ${Text} {
       color: ${customTextColour !== null && customTextColour !== undefined ? customTextColour : colors.neutral.ink.dark};
@@ -68,6 +86,13 @@ const ViewButton = styled(FlatButton).withConfig({ displayName: "vui--ViewButton
         & > ${CounterText} {
           color: ${colors.neutral.ink.base};
         }
+        & ${Text} {
+          color: ${colors.neutral.ink.base} !important;
+        }
+        & svg {
+          fill: ${colors.neutral.ink.base};
+          color: ${colors.neutral.ink.base};
+        }
       }
       & > ${Text} {
         color: ${customTextColour !== null && customTextColour !== undefined ? customTextColour : colors.neutral.ink.dark};