uikit-react-public 0.40.3 → 0.41.0

package/lib/components/Table/__tests__/Table.test.tsx

@@ -3,6 +3,10 @@ import { describe, expect, test } from 'vitest';
 import { fireEvent, render, screen, within } from '@testing-library/react';
 import Table from '../Table';
 import { ThemeContextProvider } from '../../../theme/useTheme';
+import defaultTheme from '../../../theme/original/defaultTheme';
+
+const getGeneratedClass = (element: HTMLElement) =>
+  [...element.classList].find((className) => className.startsWith('css-'));
 
 describe('Table', () => {
   // Snapshot tests
@@ -231,4 +235,90 @@ describe('Table', () => {
 
     expect(row).toHaveAttribute('data-mobile-expanded', 'true');
   });
+
+  test('uses the real mobile breakpoint for the card layout by default', () => {
+    render(
+      <ThemeContextProvider>
+        <Table>
+          <Table.Body>
+            <Table.Row>
+              <Table.Cell>Test Cell</Table.Cell>
+            </Table.Row>
+          </Table.Body>
+        </Table>
+      </ThemeContextProvider>
+    );
+
+    const table = screen.getByTestId('ucl-uikit-table');
+    const tableClass = getGeneratedClass(table);
+    const mobileMaxWidth = defaultTheme.breakpoints.tablet - 1;
+
+    expect(tableClass).toBeDefined();
+    expect(document.head.textContent).toContain(
+      `@media screen and (max-width: ${mobileMaxWidth}px){.${tableClass}{display:block;border-collapse:separate;}}`
+    );
+  });
+
+  test('disableMobileView removes the mobile-card layout media query from the table', () => {
+    render(
+      <ThemeContextProvider>
+        <Table disableMobileView>
+          <Table.Body>
+            <Table.Row>
+              <Table.Cell>Test Cell</Table.Cell>
+            </Table.Row>
+          </Table.Body>
+        </Table>
+      </ThemeContextProvider>
+    );
+
+    const table = screen.getByTestId('ucl-uikit-table');
+    const tableClass = getGeneratedClass(table);
+    const mobileMaxWidth = defaultTheme.breakpoints.tablet - 1;
+
+    expect(tableClass).toBeDefined();
+    expect(document.head.textContent).toContain(
+      `@media screen and (max-width: -1px){.${tableClass}{display:block;border-collapse:separate;}}`
+    );
+    expect(document.head.textContent).not.toContain(
+      `@media screen and (max-width: ${mobileMaxWidth}px){.${tableClass}{display:block;border-collapse:separate;}}`
+    );
+  });
+
+  test('disableMobileView also disables the row card layout and details disclosure media queries', () => {
+    render(
+      <ThemeContextProvider>
+        <Table disableMobileView>
+          <Table.Head>
+            <Table.HeadCell mobileRole='primary'>Name</Table.HeadCell>
+            <Table.HeadCell>Email</Table.HeadCell>
+          </Table.Head>
+          <Table.Body>
+            <Table.Row>
+              <Table.Cell>Ada Lovelace</Table.Cell>
+              <Table.Cell>ada@example.com</Table.Cell>
+            </Table.Row>
+          </Table.Body>
+        </Table>
+      </ThemeContextProvider>
+    );
+
+    const row = screen.getByTestId('ucl-uikit-table__row');
+    const rowClass = getGeneratedClass(row);
+    const detailsCell = row.querySelector('[data-mobile-role="details"]');
+    const detailsClass =
+      detailsCell && getGeneratedClass(detailsCell as HTMLElement);
+
+    expect(rowClass).toBeDefined();
+    expect(document.head.textContent).toContain(
+      `@media screen and (max-width: -1px){.${rowClass}{display:grid;`
+    );
+
+    // The details disclosure cell is hidden via a min-width query one above
+    // the (disabled) mobile breakpoint, so it forces display:none at every width.
+    expect(detailsClass).toBeDefined();
+    expect(document.head.textContent).toContain(
+      `@media screen and (min-width: 0px){.${detailsClass}{display:none;}}`
+    );
+  });
 });

package/lib/components/Table/subcomponents/Body.tsx

@@ -1,5 +1,6 @@
 import { css, cx } from '@emotion/css';
 import { useTheme } from '../../../theme';
+import { getMobileBreakpoint, useTableContext } from '../Table.context';
 
 export interface TableBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {}
 
@@ -7,9 +8,14 @@ const NAME = 'ucl-uikit-table__body';
 
 const Body = ({ className, children, ...props }: TableBodyProps) => {
   const [theme] = useTheme();
+  const { disableMobileView } = useTableContext();
+  const mobileBreakpoint = getMobileBreakpoint(
+    theme.breakpoints.tablet,
+    disableMobileView
+  );
 
   const baseStyle = css`
-    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+    @media screen and (max-width: ${mobileBreakpoint}px) {
       display: block;
       width: 100%;
     }

package/lib/components/Table/subcomponents/Cell/Cell.tsx

@@ -1,7 +1,7 @@
 import { css, cx } from '@emotion/css';
 import CellContent from './CellContent';
 import { useTheme } from '../../../../theme';
-import { useTableContext } from '../../Table.context';
+import { getMobileBreakpoint, useTableContext } from '../../Table.context';
 import type {
   ColumnVariant,
   NormalizedTableMobileRole,
@@ -62,7 +62,11 @@ const Cell = ({
   ...props
 }: TableCellProps) => {
   const [theme] = useTheme();
-  const { columns } = useTableContext();
+  const { columns, disableMobileView } = useTableContext();
+  const mobileBreakpoint = getMobileBreakpoint(
+    theme.breakpoints.tablet,
+    disableMobileView
+  );
   const mobileColumn = columns[__mobileColumnIndex ?? -1];
   const mobileRole = mobileColumn?.mobileRole ?? getDefaultMobileRole(variant);
   const mobileLabel = mobileColumn?.mobileLabel;
@@ -96,7 +100,7 @@ const Cell = ({
     font-weight: ${theme.typography.body.sm.fontWeight};
     line-height: ${theme.typography.body.sm.lineHeight}%;
 
-    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+    @media screen and (max-width: ${mobileBreakpoint}px) {
       min-width: 0;
       height: auto;
       padding: 0;
@@ -104,7 +108,7 @@ const Cell = ({
   `;
 
   const mobileSelectionStyle = css`
-    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+    @media screen and (max-width: ${mobileBreakpoint}px) {
       grid-column: 1;
       grid-row: 1 / span 2;
       order: 0;
@@ -114,7 +118,7 @@ const Cell = ({
   `;
 
   const mobilePrimaryStyle = css`
-    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+    @media screen and (max-width: ${mobileBreakpoint}px) {
       display: grid;
       grid-template-columns: minmax(0, 1fr) auto;
       align-items: start;
@@ -124,26 +128,26 @@ const Cell = ({
   `;
 
   const mobilePrimaryAfterSelectionStyle = css`
-    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+    @media screen and (max-width: ${mobileBreakpoint}px) {
       grid-column: 2;
     }
   `;
 
   const mobilePrimaryWithoutSelectionStyle = css`
-    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+    @media screen and (max-width: ${mobileBreakpoint}px) {
       grid-column: 1 / 3;
     }
   `;
 
   const mobilePrimaryWithPrimaryMetaStyle = css`
-    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+    @media screen and (max-width: ${mobileBreakpoint}px) {
       grid-row: 2;
       order: 2;
     }
   `;
 
   const mobilePrimaryWithoutPrimaryMetaStyle = css`
-    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+    @media screen and (max-width: ${mobileBreakpoint}px) {
       grid-row: 1 / span 2;
       order: 1;
       align-self: center;
@@ -151,7 +155,7 @@ const Cell = ({
   `;
 
   const mobilePrimaryMetaStyle = css`
-    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+    @media screen and (max-width: ${mobileBreakpoint}px) {
       grid-row: 1;
       order: 1;
       min-height: 18px;
@@ -159,19 +163,19 @@ const Cell = ({
   `;
 
   const mobilePrimaryMetaAfterSelectionStyle = css`
-    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+    @media screen and (max-width: ${mobileBreakpoint}px) {
       grid-column: 2;
     }
   `;
 
   const mobilePrimaryMetaWithoutSelectionStyle = css`
-    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+    @media screen and (max-width: ${mobileBreakpoint}px) {
       grid-column: 1 / 3;
     }
   `;
 
   const mobileStatusStyle = css`
-    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+    @media screen and (max-width: ${mobileBreakpoint}px) {
       grid-column: 3;
       grid-row: 1 / span 2;
       order: 2;
@@ -180,7 +184,7 @@ const Cell = ({
   `;
 
   const mobileContextMenuStyle = css`
-    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+    @media screen and (max-width: ${mobileBreakpoint}px) {
       grid-column: 4;
       grid-row: 1 / span 2;
       order: 3;
@@ -189,7 +193,7 @@ const Cell = ({
   `;
 
   const mobileFieldStyle = css`
-    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+    @media screen and (max-width: ${mobileBreakpoint}px) {
       display: grid;
       grid-template-columns: minmax(90px, 32%) minmax(0, 1fr);
       grid-column: 1 / -1;
@@ -207,7 +211,7 @@ const Cell = ({
   `;
 
   const mobileFirstFieldStyle = css`
-    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+    @media screen and (max-width: ${mobileBreakpoint}px) {
       margin-top: ${theme.margin.m16};
       padding-top: ${theme.padding.p12};
       border-top: ${theme.border.b1} solid ${theme.colour.border.default};
@@ -215,7 +219,7 @@ const Cell = ({
   `;
 
   const mobilePrimaryActionStyle = css`
-    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+    @media screen and (max-width: ${mobileBreakpoint}px) {
       grid-column: 1 / -1;
       order: 30;
       margin-top: ${theme.margin.m8};
@@ -225,7 +229,7 @@ const Cell = ({
   `;
 
   const mobileHiddenStyle = css`
-    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+    @media screen and (max-width: ${mobileBreakpoint}px) {
       display: none;
     }
   `;

package/lib/components/Table/subcomponents/Cell/CellContent.tsx

@@ -4,6 +4,7 @@ import type { CheckboxProps } from '../../../Checkbox/Checkbox';
 import Button from '../../../Button';
 import type { ButtonProps } from '../../../Button';
 import { useTheme } from '../../../../theme';
+import { getMobileBreakpoint, useTableContext } from '../../Table.context';
 import type {
   ColumnVariant,
   NormalizedTableMobileRole,
@@ -37,6 +38,11 @@ const CellContent = ({
   children,
 }: CellContentProps) => {
   const [theme] = useTheme();
+  const { disableMobileView } = useTableContext();
+  const mobileBreakpoint = getMobileBreakpoint(
+    theme.breakpoints.tablet,
+    disableMobileView
+  );
 
   const baseStyle = css`
     display: flex;
@@ -67,7 +73,7 @@ const CellContent = ({
   `;
 
   const mobileStyle = css`
-    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+    @media screen and (max-width: ${mobileBreakpoint}px) {
       align-items: flex-start;
       justify-content: flex-start;
       min-width: 0;
@@ -77,7 +83,7 @@ const CellContent = ({
   `;
 
   const mobilePrimaryStyle = css`
-    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+    @media screen and (max-width: ${mobileBreakpoint}px) {
       display: -webkit-box;
       overflow: hidden;
       color: ${theme.colour.text.default};
@@ -92,7 +98,7 @@ const CellContent = ({
   `;
 
   const mobilePrimaryMetaStyle = css`
-    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+    @media screen and (max-width: ${mobileBreakpoint}px) {
       color: ${theme.colour.text.secondary};
       font-family: ${theme.typography.body.xs.fontFamily};
       font-feature-settings: ${theme.typography.body.xs.fontSettings};
@@ -103,14 +109,14 @@ const CellContent = ({
   `;
 
   const mobilePrimaryActionStyle = css`
-    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+    @media screen and (max-width: ${mobileBreakpoint}px) {
       color: ${theme.colour.link.visited};
       font-weight: ${theme.typography.body.sm.fontWeight};
     }
   `;
 
   const mobileHeaderTrailingStyle = css`
-    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+    @media screen and (max-width: ${mobileBreakpoint}px) {
       justify-content: flex-end;
     }
   `;

package/lib/components/Table/subcomponents/Head.tsx

@@ -1,5 +1,6 @@
 import { css, cx } from '@emotion/css';
 import { useTheme } from '../../../theme';
+import { getMobileBreakpoint, useTableContext } from '../Table.context';
 
 export interface TableHeadProps extends React.HTMLAttributes<HTMLTableSectionElement> {}
 
@@ -7,12 +8,17 @@ const NAME = 'ucl-uikit-table__head';
 
 const Head = ({ className, children, ...props }: TableHeadProps) => {
   const [theme] = useTheme();
+  const { disableMobileView } = useTableContext();
+  const mobileBreakpoint = getMobileBreakpoint(
+    theme.breakpoints.tablet,
+    disableMobileView
+  );
 
   const baseStyle = css`
     height: 40px;
     background-color: ${theme.colour.surface.secondary};
 
-    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+    @media screen and (max-width: ${mobileBreakpoint}px) {
       position: absolute;
       width: 1px;
       height: 1px;

package/lib/components/Table/subcomponents/Row.tsx

@@ -1,7 +1,7 @@
 import { Children, cloneElement, isValidElement, useState } from 'react';
 import { css, cx } from '@emotion/css';
 import { useTheme } from '../../../theme';
-import { useTableContext } from '../Table.context';
+import { getMobileBreakpoint, useTableContext } from '../Table.context';
 import Icon from '../../Icon/Icon';
 import type { TableCellProps } from './Cell/Cell';
 import type { NormalizedTableMobileRole } from '../Table.types';
@@ -41,7 +41,11 @@ const Row = ({
   ...props
 }: TableRowProps) => {
   const [theme] = useTheme();
-  const { columns } = useTableContext();
+  const { columns, disableMobileView } = useTableContext();
+  const mobileBreakpoint = getMobileBreakpoint(
+    theme.breakpoints.tablet,
+    disableMobileView
+  );
   const [uncontrolledMobileExpanded, setUncontrolledMobileExpanded] = useState(
     defaultMobileExpanded
   );
@@ -93,7 +97,7 @@ const Row = ({
       background-color: ${theme.colour.surface.secondary};
     }
 
-    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+    @media screen and (max-width: ${mobileBreakpoint}px) {
       display: grid;
       grid-template-columns: auto minmax(0, 1fr) auto;
       align-items: start;
@@ -127,7 +131,7 @@ const Row = ({
       background-color: ${theme.colour.surface.brandSecondary};
     }
 
-    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+    @media screen and (max-width: ${mobileBreakpoint}px) {
       background-color: ${theme.colour.surface.brandSecondary};
       border-color: ${theme.colour.border.brandSubtle};
 
@@ -138,7 +142,7 @@ const Row = ({
   `;
 
   const mobileContextMenuGridStyle = css`
-    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+    @media screen and (max-width: ${mobileBreakpoint}px) {
       grid-template-columns: auto minmax(0, 1fr) auto auto;
     }
   `;
@@ -157,7 +161,7 @@ const Row = ({
     order: 10;
     margin-top: ${theme.margin.m8};
 
-    @media screen and (min-width: ${theme.breakpoints.tablet}px) {
+    @media screen and (min-width: ${mobileBreakpoint + 1}px) {
       display: none;
     }
   `;

package/lib/components/index.ts

@@ -46,6 +46,13 @@ export type { BaseCheckboxProps, BaseCheckboxState } from './BaseCheckbox';
 export { default as Spinner } from './Spinner';
 export type { SpinnerProps } from './Spinner';
 
+export { default as ProgressBar } from './ProgressBar';
+export type {
+  ProgressBarProps,
+  ProgressBarSize,
+  ProgressBarVariant,
+} from './ProgressBar';
+
 export { default as Textarea } from './Textarea';
 export type { TextareaProps } from './Textarea';
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "uikit-react-public",
   "private": false,
   "license": "UNLICENSED",
-  "version": "0.40.3",
+  "version": "0.41.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",