uikit-react-public 0.29.6 → 0.30.1

package/lib/components/Heading/Documentation.mdx

@@ -7,7 +7,7 @@ import {
   Controls,
   Source,
   ArgTypes,
-} from '@storybook/blocks';
+} from '@storybook/addon-docs/blocks';
 
 export const usage = {
   default: `<Heading>Default Heading</Heading>`,

package/lib/components/Heading/Heading.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import Heading from './Heading';
 

package/lib/components/Icon/Icon.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import Icon from './Icon';
 import { ComponentType } from 'react';
 

package/lib/components/IconButton/IconButton.stories.tsx

@@ -1,5 +1,5 @@
 import { ComponentType } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import IconButton from './IconButton';
 import Icon from '../Icon/Icon';
 

package/lib/components/Input/Documentation.mdx

@@ -7,7 +7,7 @@ import {
   Controls,
   Source,
   ArgTypes,
-} from '@storybook/blocks';
+} from '@storybook/addon-docs/blocks';
 
 export const usage = {
   default: `<Input />`,

package/lib/components/Input/Input.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Input } from '../../../lib';
 import { Icon } from '../../../lib';
 

package/lib/components/Label/Label.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import Label from './Label';
 

package/lib/components/Layout/Layout.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { css } from '@emotion/css';
 import { useTheme } from '../../theme';
 import Layout from './Layout';

package/lib/components/Link/Link.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import Link from './Link';
 

package/lib/components/Main/Main.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import Main from './Main';
 
 const meta = {

package/lib/components/Modal/Modal.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import Modal from './Modal';
 import Button from '../Button/Button';
 import Text from '../Paragraph/Paragraph';

package/lib/components/NativeDatepicker/NativeDatepicker.stories.tsx

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { useArgs } from '@storybook/preview-api';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useArgs } from 'storybook/preview-api';
 import NativeDatepicker from './NativeDatepicker';
 
 const meta = {

package/lib/components/Overlay/Overlay.stories.tsx

@@ -1,5 +1,5 @@
 import { useRef } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { css } from '@emotion/css';
 import Overlay from './Overlay';
 

package/lib/components/Overlay/Overlay.tsx

@@ -127,10 +127,7 @@ const Overlay = forwardRef<Ref, OverlayProps>(
     });
 
     const overlayPlacement = currentPlacement.split('-')[0] as
-      | 'left'
-      | 'right'
-      | 'top'
-      | 'bottom';
+      'left' | 'right' | 'top' | 'bottom';
 
     useLayoutEffect(() => {
       refs.setReference(reference.current);

package/lib/components/Pagination/Pagination.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import Pagination from './Pagination';
 
 const meta = {

package/lib/components/Paragraph/Paragraph.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import Paragraph from './Paragraph';
 import { Link } from '../';
 

package/lib/components/Radio/Radio.stories.tsx

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { useArgs } from '@storybook/preview-api';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useArgs } from 'storybook/preview-api';
 
 import Radio from './Radio';
 

package/lib/components/Search/Search.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import Search from './Search';
 
 const meta = {

package/lib/components/Select/Select.mdx

@@ -1,5 +1,5 @@
 import * as SelectStories from "./Select.stories";
-import { Meta, Title, Subtitle, Canvas, Controls, ArgTypes } from "@storybook/blocks";
+import { Meta, Title, Subtitle, Canvas, Controls, ArgTypes } from "@storybook/addon-docs/blocks";
 
 export const usage = {
   default: `<Select

package/lib/components/Select/Select.stories.tsx

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { useArgs } from '@storybook/preview-api';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useArgs } from 'storybook/preview-api';
 import Select from './Select';
 import { css } from '@emotion/css';
 

package/lib/components/Select/Select.types.ts

@@ -149,8 +149,7 @@ export type ClearableSelectProps<T = string | number> = SelectBaseProps<T> & {
  * Public props for <Select>, used by both custom and native render paths.
  */
 export type SelectProps<T = string | number> =
-  | NonClearableSelectProps<T>
-  | ClearableSelectProps<T>;
+  NonClearableSelectProps<T> | ClearableSelectProps<T>;
 
 export type InternalSelectProps<T = string | number> = SelectBaseProps<T> & {
   value?: T | null;

package/lib/components/Snackbar/Snackbar.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { css } from '@emotion/css';
 import Snackbar from './Snackbar';
 

package/lib/components/Spinner/Spinner.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { css } from '@emotion/css';
 import Spinner from './Spinner';
 import { theme } from '../../theme';

package/lib/components/StandaloneLink/StandaloneLink.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import Link from './StandaloneLink';
 

package/lib/components/Table/Table.stories.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import Table from './Table';
 import Badge from '../Badge/Badge';
 import Icon from '../Icon/Icon';

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

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { useArgs } from '@storybook/preview-api';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useArgs } from 'storybook/preview-api';
 import { css } from '@emotion/css';
 import Row from '../Row';
 import Cell from './Cell';

package/lib/components/Table/subcomponents/HeadCell/HeadCell.stories.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import HeadCell from './HeadCell';
 import Head from '../Head';
 import { SortOrder } from '../../Table.types';

package/lib/components/Tabs/Tab.tsx

@@ -1,81 +1,254 @@
-import { memo, ButtonHTMLAttributes } from 'react';
+import {
+  Children,
+  HTMLAttributes,
+  ReactElement,
+  ReactNode,
+  cloneElement,
+  isValidElement,
+  memo,
+} from 'react';
 import { css, cx } from '@emotion/css';
 import { useTheme } from '../../theme';
-import { useTabContext } from './TabContext';
+import Text from '../Text';
+import { getTabId, getTabPanelId, useTabContext } from './TabContext';
 
 export const NAME = 'ucl-uikit-tabs__tab';
 
-export interface TabProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+type TabElementProps = HTMLAttributes<HTMLElement> & {
+  disabled?: boolean;
+  href?: string;
+  ref?: React.Ref<HTMLElement>;
+  type?: 'button' | 'submit' | 'reset';
+  'data-state'?: string;
+  'data-testid'?: string;
+  'data-ucl-tabs-value'?: string;
+};
+
+export interface TabProps extends HTMLAttributes<HTMLElement> {
   testId?: string;
-  label: string;
   value: string;
+  children?: ReactNode;
+  count?: number;
+  /** @deprecated Use count instead. */
   counter?: number;
-  ref?: React.RefObject<HTMLButtonElement>;
+  disabled?: boolean;
+  asChild?: boolean;
+  ref?: React.Ref<HTMLElement>;
+  /** @deprecated Prefer children for the tab content. */
+  label?: ReactNode;
 }
 
+const mergeEventHandlers =
+  <EventType,>(
+    userHandler: ((event: EventType) => void) | undefined,
+    childHandler: ((event: EventType) => void) | undefined
+  ) =>
+  (event: EventType) => {
+    userHandler?.(event);
+    childHandler?.(event);
+  };
+
 const Tab = ({
   testId = NAME,
   className,
+  children,
   label,
   value,
+  count,
   counter,
+  disabled = false,
+  asChild = false,
+  onClick,
   ref,
   ...props
 }: TabProps) => {
   const [theme] = useTheme();
-  const { activeTab, setActiveTab, fullWidth, color } = useTabContext();
-  const isActive = activeTab === value;
+  const {
+    value: selectedValue,
+    setValue,
+    baseId,
+    fullWidth,
+    panelValues,
+  } = useTabContext();
+  const isSelected = selectedValue === value;
+  const labelContent = children ?? label;
+  const resolvedCount = count ?? counter;
 
   const baseStyle = css`
-    background: transparent;
-    border: none;
-    cursor: pointer;
-    font-family: ${theme.font.family.primary};
-    color: ${theme.colour.text.secondary};
-    border-bottom: 4px solid transparent;
-    text-align: center;
-    font-style: normal;
-    line-height: 140%;
-    font-size: ${theme.font.size.f16};
+    all: unset;
+    box-sizing: border-box;
+    height: 40px;
+    display: inline-flex;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
-    padding: 0 16px 8px 16px;
-    ${fullWidth ? 'flex: 1 0 0;' : 'width: auto;'}
+    gap: 0;
+    padding: 0 ${theme.padding.p16};
+    border-bottom: 4px solid transparent;
+    color: ${theme.colour.text.default};
+    background-color: transparent;
+    cursor: pointer;
+    text-align: center;
+    text-decoration: none;
+    white-space: nowrap;
+    position: relative;
+    outline: none;
+
+    &:visited {
+      color: ${theme.colour.text.default};
+    }
+
+    &:hover {
+      color: ${theme.colour.text.default};
+      background-color: ${theme.colour.fill.brandSubtleHover};
+    }
 
     &:focus-visible {
-      outline: none;
       box-shadow: ${theme.boxShadow.focus};
+      z-index: 1;
     }
+  `;
+
+  const fullWidthStyle = css`
+    flex: 1 1 0;
+  `;
 
+  const autoWidthStyle = css`
+    flex: 0 0 auto;
+  `;
+
+  const selectedStyle = css`
+    color: ${theme.colour.text.default};
+    border-bottom-color: ${theme.colour.border.brand};
+
+    &:visited,
     &:hover {
-      text-decoration: underline;
+      color: ${theme.colour.text.default};
     }
   `;
 
-  const activeStyle = css`
-    border-bottom: 4px solid ${color || theme.colour.border.brand};
-    color: ${theme.colour.text.default};
-    margin-bottom: -1px;
-    font-weight: 700;
+  const disabledStyle = css`
+    color: ${theme.colour.text.disabled};
+    cursor: not-allowed;
 
+    &:visited,
     &:hover {
-      text-decoration: none;
+      color: ${theme.colour.text.disabled};
+      background-color: transparent;
     }
   `;
 
-  const style = cx(NAME, baseStyle, isActive && activeStyle, className);
+  const textStyle = css`
+    color: inherit;
+  `;
+
+  const hiddenTextStyle = css`
+    height: 0;
+    overflow: hidden;
+    visibility: hidden;
+    pointer-events: none;
+  `;
+
+  const style = cx(
+    NAME,
+    baseStyle,
+    fullWidth ? fullWidthStyle : autoWidthStyle,
+    isSelected && selectedStyle,
+    disabled && disabledStyle,
+    className
+  );
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    onClick?.(event);
+
+    if (event.defaultPrevented || disabled) {
+      return;
+    }
+
+    setValue(value);
+  };
+
+  const commonProps: TabElementProps = {
+    ...props,
+    ref,
+    className: style,
+    role: 'tab',
+    id: getTabId(baseId, value),
+    ...(panelValues.has(value)
+      ? { 'aria-controls': getTabPanelId(baseId, value) }
+      : {}),
+    'aria-selected': isSelected,
+    'aria-disabled': disabled || undefined,
+    tabIndex: isSelected ? 0 : -1,
+    'data-testid': testId,
+    'data-state': isSelected ? 'active' : 'inactive',
+    'data-ucl-tabs-value': value,
+    onClick: handleClick,
+  };
+
+  if (asChild) {
+    const child = Children.only(children) as ReactElement<TabElementProps>;
+
+    if (isValidElement(child)) {
+      return cloneElement(child, {
+        ...commonProps,
+        className: cx(style, child.props.className),
+        tabIndex: disabled ? -1 : (props.tabIndex ?? commonProps.tabIndex),
+        onClick: disabled
+          ? (event: React.MouseEvent<HTMLElement>) => {
+              event.preventDefault();
+              event.stopPropagation();
+            }
+          : mergeEventHandlers(handleClick, child.props.onClick),
+        children: (
+          <>
+            <Text
+              level={isSelected ? 'md-semibold' : 'md'}
+              className={textStyle}
+            >
+              {child.props.children}
+              {resolvedCount !== undefined ? ` ${resolvedCount}` : ''}
+            </Text>
+            <Text
+              aria-hidden
+              level='md-semibold'
+              className={cx(textStyle, hiddenTextStyle)}
+            >
+              {child.props.children}
+              {resolvedCount !== undefined ? ` ${resolvedCount}` : ''}
+            </Text>
+          </>
+        ),
+      });
+    }
+  }
+
+  const { ref: buttonRef, ...buttonProps } = commonProps;
 
   return (
     <button
-      ref={ref}
-      className={style}
-      data-testid={testId}
-      role='tab'
-      aria-selected={isActive}
-      onClick={() => setActiveTab(value)}
-      {...props}
+      {...buttonProps}
+      ref={buttonRef as React.Ref<HTMLButtonElement>}
+      disabled={disabled}
+      type={
+        (props as { type?: 'button' | 'submit' | 'reset' }).type ?? 'button'
+      }
     >
-      {label} {counter !== undefined ? `(${counter})` : ''}
+      <Text
+        level={isSelected ? 'md-semibold' : 'md'}
+        className={textStyle}
+      >
+        {labelContent}
+        {resolvedCount !== undefined ? ` ${resolvedCount}` : ''}
+      </Text>
+      <Text
+        aria-hidden
+        level='md-semibold'
+        className={cx(textStyle, hiddenTextStyle)}
+      >
+        {labelContent}
+        {resolvedCount !== undefined ? ` ${resolvedCount}` : ''}
+      </Text>
     </button>
   );
 };

package/lib/components/Tabs/TabContext.tsx

@@ -1,20 +1,33 @@
 import { createContext, use } from 'react';
 
-interface TabContextType {
-  activeTab: string;
-  setActiveTab: (value: string) => void;
-  onChange?: (value: string) => void;
-  fullWidth?: boolean;
-  color?: string;
+export type TabsActivationMode = 'automatic' | 'manual';
+export type TabsOrientation = 'horizontal' | 'vertical';
+
+export interface TabsContextType {
+  value: string | undefined;
+  setValue: (value: string) => void;
+  baseId: string;
+  activationMode: TabsActivationMode;
+  orientation: TabsOrientation;
+  fullWidth: boolean;
+  panelValues: Set<string>;
 }
 
-const TabContext = createContext<TabContextType | undefined>(undefined);
+const TabContext = createContext<TabsContextType | undefined>(undefined);
+
+export const getTabId = (baseId: string, value: string) =>
+  `${baseId}-tab-${value}`.replace(/[^a-zA-Z0-9_-]/g, '-');
+
+export const getTabPanelId = (baseId: string, value: string) =>
+  `${baseId}-panel-${value}`.replace(/[^a-zA-Z0-9_-]/g, '-');
 
 export const useTabContext = () => {
   const context = use(TabContext);
+
   if (!context) {
     throw new Error('Tab components must be used within a Tabs component');
   }
+
   return context;
 };