uikit-react-public 0.26.3 → 0.27.2

package/lib/components/MenuNew/MenuBaseItem.tsx

@@ -8,6 +8,7 @@ export interface MenuBaseItemProps extends HTMLAttributes<HTMLDivElement> {
   endAdornment?: ReactNode;
   hoverMode?: 'background' | 'underline';
   asChild?: boolean;
+  active?: boolean;
 }
 
 const MenuBaseItem = ({
@@ -22,6 +23,7 @@ const MenuBaseItem = ({
   tabIndex,
   hoverMode = 'background',
   asChild = false,
+  active = false,
   ...props
 }: MenuBaseItemProps) => {
   const [theme] = useTheme();
@@ -53,6 +55,7 @@ const MenuBaseItem = ({
     display: flex;
     align-items: center;
     gap: ${theme.margin.m16};
+    position: relative;
     cursor: pointer;
     outline: none;
 
@@ -65,6 +68,19 @@ const MenuBaseItem = ({
     }
   `;
 
+  const activeStyle = css`
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: calc(50% - 12px);
+      width: 6px;
+      height: 24px;
+      background-color: ${theme.colour.fill.brand};
+      pointer-events: none;
+    }
+  `;
+
   const backgroundOnHoverStyle = css`
     &:hover {
       background-color: ${theme.colour.fill.brandSubtleHover};
@@ -79,6 +95,7 @@ const MenuBaseItem = ({
 
   const style = cx(
     baseStyle,
+    active && activeStyle,
     hoverMode === 'underline' && underlineStyleOnHoverStyle,
     hoverMode === 'background' && backgroundOnHoverStyle,
     className

package/lib/components/MenuNew/MenuItemText.tsx

@@ -26,6 +26,12 @@ const MenuItemText = ({
     color: inherit;
     text-decoration: none;
 
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+    }
+
     &:hover,
     &:visited,
     &:active,

package/lib/components/MenuNew/__tests__/Menu.test.tsx

@@ -129,6 +129,7 @@ describe('Menu', () => {
       .getByText('Library')
       .closest('.ucl-uikit-menu__accordion-item');
     const accordionContentInner = accordionItem?.parentElement;
+    const accordionContent = accordionContentInner?.parentElement;
 
     expect(accordionItem).toHaveStyle({
       marginTop: '0px',
@@ -137,6 +138,10 @@ describe('Menu', () => {
       marginBottom: '0px',
       width: 'calc(100% - 12px)',
     });
+    expect(accordionContent).toHaveStyle({
+      marginLeft: '-6px',
+      width: 'calc(100% + 12px)',
+    });
     expect(accordionContentInner).toHaveStyle({
       paddingTop: '6px',
       paddingBottom: '6px',
@@ -244,6 +249,42 @@ describe('Menu', () => {
     );
   });
 
+  test.each([
+    {
+      name: 'primary',
+      menu: (
+        <Menu.PrimaryItem asChild>
+          <a href='/home'>Home</a>
+        </Menu.PrimaryItem>
+      ),
+      linkName: 'Home',
+    },
+    {
+      name: 'accordion',
+      menu: (
+        <Menu.Accordion.Item asChild>
+          <a href='/library'>Library</a>
+        </Menu.Accordion.Item>
+      ),
+      linkName: 'Library',
+    },
+  ])('$name asChild link covers the full item', ({ menu, linkName }) => {
+    wrap(<Menu>{menu}</Menu>);
+
+    const link = screen.getByRole('link', { name: linkName });
+    const generatedClass = Array.from(link.classList).find((className) =>
+      className.startsWith('css-')
+    );
+    const cssRules = Array.from(document.styleSheets)
+      .flatMap((styleSheet) => Array.from(styleSheet.cssRules))
+      .map((rule) => rule.cssText)
+      .join(' ');
+
+    expect(cssRules).toContain(`.${generatedClass}::after`);
+    expect(cssRules).toContain('position: absolute');
+    expect(cssRules).toContain('inset: 0');
+  });
+
   test('primary item enforces icon on the left', () => {
     const { getByText } = wrap(
       <Menu>
@@ -257,6 +298,65 @@ describe('Menu', () => {
     expect(item?.firstChild).toHaveAttribute('data-testid', 'left-icon');
   });
 
+  test('active items render a non-disruptive marker', () => {
+    wrap(
+      <Menu>
+        <Menu.PrimaryItem active>Home</Menu.PrimaryItem>
+      </Menu>
+    );
+
+    const item = screen
+      .getByText('Home')
+      .closest('.ucl-uikit-menu__primary-item');
+    const generatedClass = Array.from(item?.classList ?? []).find((className) =>
+      className.startsWith('css-')
+    );
+    const cssRules = Array.from(document.styleSheets)
+      .flatMap((styleSheet) => Array.from(styleSheet.cssRules))
+      .map((rule) => rule.cssText)
+      .join(' ');
+
+    expect(item).not.toHaveAttribute('active');
+    expect(item).toHaveStyle({ position: 'relative' });
+    expect(cssRules).toContain(`.${generatedClass}::before`);
+    expect(cssRules).toContain('width: 6px');
+    expect(cssRules).toContain('height: 24px');
+  });
+
+  test.each([
+    {
+      name: 'accordion',
+      menu: (
+        <Menu.Accordion
+          active
+          label='Systems'
+        />
+      ),
+      text: 'Systems',
+      selector: '.ucl-uikit-menu__accordion',
+    },
+    {
+      name: 'accordion item',
+      menu: <Menu.Accordion.Item active>Library</Menu.Accordion.Item>,
+      text: 'Library',
+      selector: '.ucl-uikit-menu__accordion-item',
+    },
+  ])('$name supports active state', ({ menu, text, selector }) => {
+    wrap(<Menu>{menu}</Menu>);
+
+    const item = screen.getByText(text).closest(selector);
+    const generatedClass = Array.from(item?.classList ?? []).find((className) =>
+      className.startsWith('css-')
+    );
+    const cssRules = Array.from(document.styleSheets)
+      .flatMap((styleSheet) => Array.from(styleSheet.cssRules))
+      .map((rule) => rule.cssText)
+      .join(' ');
+
+    expect(item).not.toHaveAttribute('active');
+    expect(cssRules).toContain(`.${generatedClass}::before`);
+  });
+
   test('primary items use background hover instead of underline hover', () => {
     wrap(
       <Menu>

package/lib/components/MenuNew/index.ts

@@ -6,6 +6,7 @@ export type {
   MenuHeadingProps,
   MenuSectionProps,
   MenuAccordionProps,
+  MenuAccordionItemProps,
   MenuBaseItemProps,
   PrimaryMenuItemProps,
   SecondaryMenuItemProps,

package/lib/components/Table/subcomponents/Cell/__tests__/__snapshots__/Cell.test.tsx.snap

@@ -44,13 +44,18 @@ exports[`Cell > Snapshot: variants 1`] = `
           data-testid="ucl-uikit-table__cell-content"
         >
           <span
-            class="ucl-uikit-checkbox css-tumlz"
+            class="ucl-uikit-base-checkbox ucl-uikit-checkbox css-tfrbiv"
+            data-testid="ucl-uikit-checkbox__root"
           >
             <input
-              class="css-nzy7im"
+              class="css-1bjd9qx"
               data-testid="ucl-uikit-checkbox"
               type="checkbox"
             />
+            <span
+              aria-hidden="true"
+              class="css-1quq9cp"
+            />
           </span>
         </div>
       </td>

package/lib/components/Table/subcomponents/HeadCell/__tests__/__snapshots__/HeadCell.test.tsx.snap

@@ -14,14 +14,19 @@ exports[`HeadCell > Snapshot: checkbox variant 1`] = `
           data-testid="ucl-uikit-table__head-cell-content"
         >
           <span
-            class="ucl-uikit-checkbox css-tumlz"
+            class="ucl-uikit-base-checkbox ucl-uikit-checkbox css-tfrbiv"
+            data-testid="ucl-uikit-checkbox__root"
           >
             <input
               aria-label="Select all rows"
-              class="css-nzy7im"
+              class="css-1bjd9qx"
               data-testid="ucl-uikit-checkbox"
               type="checkbox"
             />
+            <span
+              aria-hidden="true"
+              class="css-1quq9cp"
+            />
           </span>
         </div>
       </th>

package/lib/components/index.ts

@@ -34,6 +34,9 @@ export type { AvatarProps } from './Avatar';
 export { default as Badge } from './Badge';
 export type { BadgeProps } from './Badge';
 
+export { default as BaseCheckbox } from './BaseCheckbox';
+export type { BaseCheckboxProps, BaseCheckboxState } from './BaseCheckbox';
+
 export { default as Spinner } from './Spinner';
 export type { SpinnerProps } from './Spinner';
 

package/package.json

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