uikit-react-public 0.49.4 → 0.49.5

package/lib/components/Icon/svgImports.ts

@@ -321,7 +321,9 @@ interface SVGRProps {
 
 type IconComponent = (props: SVGProps<SVGSVGElement> & SVGRProps) => ReactNode;
 
-const iconSvgs: Record<string, IconComponent> = {
+// `satisfies` keeps literal key names (needed for icon name autocomplete/type-checking)
+// while still validating every value matches IconComponent.
+const iconSvgs = {
   Activity,
   Airplay,
   AlertCircle,
@@ -618,6 +620,6 @@ const iconSvgs: Record<string, IconComponent> = {
   Zap,
   ZoomIn,
   ZoomOut,
-};
+} satisfies Record<string, IconComponent>;
 
 export default iconSvgs;

package/lib/components/Select/index.ts

@@ -1,2 +1,6 @@
 export { default } from './Select';
-export type { SelectProps, OptionData } from './Select.types';
+export type {
+  SelectProps,
+  NonClearableSelectProps,
+  OptionData,
+} from './Select.types';

package/lib/components/ToggleGroup/ToggleGroup.mdx

@@ -0,0 +1,31 @@
+import * as ToggleGroupStories from "./ToggleGroup.stories";
+import { Meta, Title, Subtitle, Canvas, Controls } from "@storybook/addon-docs/blocks";
+
+<Meta of={ToggleGroupStories} />
+<Title />
+<Subtitle>A mutually-exclusive horizontal bar of radio buttons.</Subtitle>
+
+Use a `<ToggleGroup>` when you want the user to switch between two or more views, modes, or states that sit side by side (e.g. list / grid, day / week / month).
+
+<Canvas of={ToggleGroupStories.Default} sourceState="hidden" />
+
+## ToggleGroup.Item components
+
+### Icons
+Add any `<Icon>` to the left of the `<Item>`.
+
+<Canvas of={ToggleGroupStories.WithIcons} />
+
+### Sublabels
+Add a `sublabel` to the `<Item>`.
+
+<Canvas of={ToggleGroupStories.WithSublabels} />
+
+### Disabled
+Disable a given `<Item>`.
+
+<Canvas of={ToggleGroupStories.Disabled} />
+
+## Props
+
+<Controls of={ToggleGroupStories.Default} />

package/lib/components/ToggleGroup/ToggleGroup.stories.tsx

@@ -0,0 +1,120 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import ToggleGroup from './ToggleGroup';
+
+const meta = {
+  title: 'Components/ToggleGroup',
+  component: ToggleGroup,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof ToggleGroup>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    defaultValue: 'option-1',
+    children: (
+      <>
+        <ToggleGroup.Item
+          value='option-1'
+          label='Option 1'
+        />
+        <ToggleGroup.Item
+          value='option-2'
+          label='Option 2'
+        />
+        <ToggleGroup.Item
+          value='option-3'
+          label='Option 3'
+        />
+      </>
+    ),
+  },
+};
+
+export const WithIcons: Story = {
+  args: {
+    defaultValue: 'option-1',
+    children: (
+      <>
+        <ToggleGroup.Item
+          value='option-1'
+          label='Option 1'
+          icon='BookOpen'
+        />
+        <ToggleGroup.Item
+          value='option-2'
+          label='Option 2'
+          icon='Calendar'
+        />
+        <ToggleGroup.Item
+          value='option-3'
+          label='Option 3'
+          icon='Star'
+        />
+        <ToggleGroup.Item
+          value='option-4'
+          label='Option 4'
+          icon='User'
+        />
+      </>
+    ),
+  },
+};
+
+export const WithSublabels: Story = {
+  args: {
+    defaultValue: 'option-1',
+    children: (
+      <>
+        <ToggleGroup.Item
+          value='option-1'
+          label='Option 1'
+          sublabel='Sublabel 1'
+        />
+        <ToggleGroup.Item
+          value='option-2'
+          label='Option 2'
+          sublabel='Sublabel 2'
+          icon='User'
+        />
+        <ToggleGroup.Item
+          value='option-3'
+          label='Option 3'
+          sublabel='Sublabel 3'
+        />
+      </>
+    ),
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    defaultValue: 'option-1',
+    children: (
+      <>
+        <ToggleGroup.Item
+          value='option-1'
+          label='Option 1'
+        />
+        <ToggleGroup.Item
+          value='option-2'
+          label='Option 2'
+          icon='Calendar'
+          disabled
+        />
+        <ToggleGroup.Item
+          value='option-3'
+          label='Option 3'
+          sublabel='Sublabel 3'
+          disabled
+        />
+      </>
+    ),
+  },
+};

package/lib/components/ToggleGroup/ToggleGroup.tsx

@@ -0,0 +1,144 @@
+import type React from 'react';
+import {
+  Children,
+  isValidElement,
+  KeyboardEvent,
+  useId,
+  useState,
+} from 'react';
+
+import { css } from '@emotion/css';
+import useTheme from '../../theme/useTheme';
+import useMediaQuery from '../../hooks/useMediaQuery';
+import Select, { NonClearableSelectProps } from '../Select';
+import ToggleGroupContext from './ToggleGroupContext';
+import Item, { ItemProps } from './subcomponents/Item';
+
+export interface ToggleGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  selectProps?: Omit<
+    NonClearableSelectProps<string>,
+    'options' | 'value' | 'onValueChange'
+  >;
+}
+
+const MOBILE_SELECT_ITEM_THRESHOLD = 2;
+
+const NAVIGATION_KEYS = ['ArrowRight', 'ArrowLeft', 'Home', 'End'];
+
+const getEnabledItems = (container: HTMLElement) =>
+  Array.from(
+    container.querySelectorAll<HTMLInputElement>(
+      '[role="radio"]:not(:disabled)'
+    )
+  );
+
+const getItemsFromChildren = (
+  children: React.ReactNode
+): React.ReactElement<ItemProps>[] =>
+  Children.toArray(children).flatMap((child) => {
+    if (!isValidElement<{ children?: React.ReactNode }>(child)) {
+      return [];
+    }
+    if (child.type === Item) {
+      return [child as React.ReactElement<ItemProps>];
+    }
+    return getItemsFromChildren(child.props.children);
+  });
+
+const ToggleGroup = ({
+  children,
+  value,
+  defaultValue,
+  onValueChange,
+  selectProps,
+}: ToggleGroupProps) => {
+  const [theme] = useTheme();
+  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+  const isControlled = value !== undefined;
+  const selectedValue = value ?? uncontrolledValue;
+  const isMobile = !useMediaQuery(`(min-width: ${theme.breakpoints.tablet}px)`);
+  const items = getItemsFromChildren(children);
+  const name = useId();
+
+  const setValue = (nextValue: string) => {
+    if (!isControlled) {
+      setUncontrolledValue(nextValue);
+    }
+
+    onValueChange?.(nextValue);
+  };
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (!NAVIGATION_KEYS.includes(event.key)) {
+      return;
+    }
+
+    const enabledItems = getEnabledItems(event.currentTarget);
+    const currentIndex = enabledItems.indexOf(
+      document.activeElement as HTMLInputElement
+    );
+
+    if (currentIndex === -1) {
+      return;
+    }
+
+    event.preventDefault();
+
+    const nextIndex =
+      {
+        ArrowRight: (currentIndex + 1) % enabledItems.length,
+        ArrowLeft:
+          (currentIndex - 1 + enabledItems.length) % enabledItems.length,
+        Home: 0,
+        End: enabledItems.length - 1,
+      }[event.key] ?? currentIndex;
+
+    const nextItem = enabledItems[nextIndex];
+    nextItem.focus();
+    setValue(nextItem.dataset.uclToggleGroupValue as string);
+  };
+
+  const toggleGroupStyle = css`
+    display: flex;
+    gap: -1px;
+    padding: ${theme.padding.p4};
+    background-color: ${theme.colour.fill.subtle};
+    border-radius: ${theme.radius.r4};
+  `;
+
+  if (isMobile && items.length > MOBILE_SELECT_ITEM_THRESHOLD) {
+    return (
+      <Select
+        {...selectProps}
+        options={items.map((item) => ({
+          label: item.props.label,
+          value: item.props.value,
+        }))}
+        value={selectedValue}
+        onValueChange={setValue}
+      />
+    );
+  }
+
+  return (
+    <ToggleGroupContext.Provider
+      value={{ value: selectedValue, setValue, name }}
+    >
+      <div
+        className={toggleGroupStyle}
+        role='radiogroup'
+        onKeyDown={handleKeyDown}
+      >
+        {children}
+      </div>
+    </ToggleGroupContext.Provider>
+  );
+};
+
+ToggleGroup.Item = Item;
+
+export default ToggleGroup;

package/lib/components/ToggleGroup/ToggleGroupContext.tsx

@@ -0,0 +1,25 @@
+import { createContext, use } from 'react';
+
+export interface ToggleGroupContextType {
+  value: string | undefined;
+  setValue: (value: string) => void;
+  name: string;
+}
+
+const ToggleGroupContext = createContext<ToggleGroupContextType | undefined>(
+  undefined
+);
+
+export const useToggleGroupContext = () => {
+  const context = use(ToggleGroupContext);
+
+  if (!context) {
+    throw new Error(
+      'ToggleGroupItem must be used within a ToggleGroup component'
+    );
+  }
+
+  return context;
+};
+
+export default ToggleGroupContext;