uikit-react-public 0.11.24 → 0.14.21

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

@@ -0,0 +1,94 @@
+import { describe, expect, test } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { vi } from 'vitest';
+import { ThemeContextProvider } from '../../../theme/useTheme';
+import Search from '../Search';
+
+describe('Search', () => {
+  // Snapshot tests
+
+  test('snapshot: no props', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Search />
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('snapshot: testId prop', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Search testId='test123' />
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  // Interaction tests
+
+  test('test ID: default', () => {
+    render(
+      <ThemeContextProvider>
+        <Search />
+      </ThemeContextProvider>
+    );
+    const search = screen.getByTestId('ucl-uikit-search');
+    expect(search).toBeInTheDocument();
+  });
+
+  test('test ID: custom', () => {
+    render(
+      <ThemeContextProvider>
+        <Search testId='custom-test-id' />
+      </ThemeContextProvider>
+    );
+    const search = screen.getByTestId('custom-test-id');
+    expect(search).toBeInTheDocument();
+  });
+
+  test('allows user to type in search input', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <ThemeContextProvider>
+        <Search />
+      </ThemeContextProvider>
+    );
+
+    const input = screen.getByRole('textbox');
+
+    await user.type(input, 'hello world');
+    expect(input).toHaveValue('hello world');
+  });
+
+  test('allows user to click on search button', async () => {
+    const user = userEvent.setup();
+    render(
+      <ThemeContextProvider>
+        <Search />
+      </ThemeContextProvider>
+    );
+
+    const input = screen.getByTestId('ucl-uikit-search-search-btn');
+    await user.click(input);
+  });
+
+  test('calls onSearch when seatch button is clicked', async () => {
+    const user = userEvent.setup();
+    const mockOnSearch = vi.fn();
+
+    render(
+      <ThemeContextProvider>
+        <Search onSearch={mockOnSearch} />
+      </ThemeContextProvider>
+    );
+    const input = screen.getByRole('textbox');
+    await user.type(input, 'test search');
+    const searchButton = screen.getByTestId('ucl-uikit-search-search-btn');
+    await user.click(searchButton);
+
+    expect(mockOnSearch).toHaveBeenCalledWith('test search');
+  });
+});

package/lib/components/Search/__tests__/__snapshots__/Search.test.tsx.snap

@@ -0,0 +1,179 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Search > snapshot: no props 1`] = `
+<div
+  class="ucl-uikit-search css-176lya2"
+>
+  <span
+    class="ucl-uikit-input css-1bpb1dw"
+  >
+    <input
+      class="ucl-uikit-input__input css-181a0dk"
+      data-testid="ucl-uikit-search"
+      id=""
+      placeholder=""
+      type="text"
+      value=""
+    />
+  </span>
+  <div
+    class="css-1mxrgm7"
+  >
+    <button
+      aria-label="Clear search"
+      class="ucl-uikit-icon-button css-1317vpi"
+      data-testid="ucl-uikit-search-clear-search-btn"
+    >
+      <svg
+        class="ucl-uikit-icon css-148hpxb"
+        data-testid="ucl-uikit-icon"
+        fill="none"
+        height="24"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        viewBox="0 0 24 24"
+        width="24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <line
+          x1="18"
+          x2="6"
+          y1="6"
+          y2="18"
+        />
+        <line
+          x1="6"
+          x2="18"
+          y1="6"
+          y2="18"
+        />
+      </svg>
+    </button>
+    <div
+      class="css-5jwcn5"
+    />
+    <button
+      aria-label="Search"
+      class="ucl-uikit-icon-button css-1soyhl2"
+      data-testid="ucl-uikit-search-search-btn"
+    >
+      <svg
+        class="ucl-uikit-icon css-148hpxb"
+        data-testid="ucl-uikit-icon"
+        fill="none"
+        height="24"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        viewBox="0 0 24 24"
+        width="24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle
+          cx="11"
+          cy="11"
+          r="8"
+        />
+        <line
+          x1="21"
+          x2="16.65"
+          y1="21"
+          y2="16.65"
+        />
+      </svg>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Search > snapshot: testId prop 1`] = `
+<div
+  class="ucl-uikit-search css-176lya2"
+>
+  <span
+    class="ucl-uikit-input css-1bpb1dw"
+  >
+    <input
+      class="ucl-uikit-input__input css-181a0dk"
+      data-testid="test123"
+      id=""
+      placeholder=""
+      type="text"
+      value=""
+    />
+  </span>
+  <div
+    class="css-1mxrgm7"
+  >
+    <button
+      aria-label="Clear search"
+      class="ucl-uikit-icon-button css-1317vpi"
+      data-testid="test123-clear-search-btn"
+    >
+      <svg
+        class="ucl-uikit-icon css-148hpxb"
+        data-testid="ucl-uikit-icon"
+        fill="none"
+        height="24"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        viewBox="0 0 24 24"
+        width="24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <line
+          x1="18"
+          x2="6"
+          y1="6"
+          y2="18"
+        />
+        <line
+          x1="6"
+          x2="18"
+          y1="6"
+          y2="18"
+        />
+      </svg>
+    </button>
+    <div
+      class="css-5jwcn5"
+    />
+    <button
+      aria-label="Search"
+      class="ucl-uikit-icon-button css-1soyhl2"
+      data-testid="test123-search-btn"
+    >
+      <svg
+        class="ucl-uikit-icon css-148hpxb"
+        data-testid="ucl-uikit-icon"
+        fill="none"
+        height="24"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        viewBox="0 0 24 24"
+        width="24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle
+          cx="11"
+          cy="11"
+          r="8"
+        />
+        <line
+          x1="21"
+          x2="16.65"
+          y1="21"
+          y2="16.65"
+        />
+      </svg>
+    </button>
+  </div>
+</div>
+`;

package/lib/components/Search/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Search';
+export type { SearchProps } from './Search';

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

@@ -1,7 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { useArgs } from '@storybook/preview-api';
 import Select from './Select';
-import { Icon } from '../';
 
 const meta = {
   title: 'Components/Ready to use/Select',
@@ -20,8 +19,8 @@ const meta = {
     testId: {
       control: { type: 'text' },
     },
-    width: {
-      control: { type: 'range', min: 80, max: 624, step: 1 },
+    lineBreak: {
+      control: { type: 'boolean' },
     },
   },
   args: {
@@ -41,7 +40,7 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   render: () => {
     const [args, updateArgs] = useArgs();
-    const onValueChange = (value: string) => {
+    const onValueChange = (value: string | number) => {
       updateArgs({ value });
     };
     return (
@@ -61,7 +60,7 @@ export const Native: Story = {
   },
   render: () => {
     const [args, updateArgs] = useArgs();
-    const onValueChange = (value: string) => {
+    const onValueChange = (value: string | number) => {
       updateArgs({ value });
     };
     return (
@@ -75,39 +74,13 @@ export const Native: Story = {
   },
 };
 
-export const OptionsWithIcons: Story = {
-  name: 'Options with icons',
-  args: {
-    options: [
-      { label: 'Option 1', value: '1', icon: <Icon.Printer /> },
-      { label: 'Option 2', value: '2', icon: <Icon.User /> },
-      { label: 'Option 3', value: '3', icon: <Icon.Info /> },
-    ],
-  },
-  render: () => {
-    const [args, updateArgs] = useArgs();
-    const onValueChange = (value: string) => {
-      updateArgs({ value });
-    };
-
-    return (
-      <Select
-        {...args}
-        options={args.options}
-        value={args.value}
-        onValueChange={onValueChange}
-      />
-    );
-  },
-};
-
 export const Disabled: Story = {
   args: {
     disabled: true,
   },
   render: () => {
     const [args, updateArgs] = useArgs();
-    const onValueChange = (value: string) => {
+    const onValueChange = (value: string | number) => {
       updateArgs({ value });
     };
 
@@ -126,7 +99,7 @@ export const WithPlaceholder: Story = {
   args: { placeholder: 'Please select an option' },
   render: () => {
     const [args, updateArgs] = useArgs();
-    const onValueChange = (value: string) => {
+    const onValueChange = (value: string | number) => {
       updateArgs({ value });
     };
 
@@ -152,7 +125,7 @@ export const SingleLongOption: Story = {
   },
   render: () => {
     const [args, updateArgs] = useArgs();
-    const onValueChange = (value: string) => {
+    const onValueChange = (value: string | number) => {
       updateArgs({ value });
     };
 
@@ -190,7 +163,7 @@ export const ManyOptions: Story = {
   },
   render: () => {
     const [args, updateArgs] = useArgs();
-    const onValueChange = (value: string) => {
+    const onValueChange = (value: string | number) => {
       updateArgs({ value });
     };
     return (

package/lib/components/Select/Select.tsx

@@ -1,7 +1,7 @@
 import { NativeSelect, CustomSelect } from './subcomponents';
 import { SelectProps } from './Select.types';
 
-const Select = (props: SelectProps) => {
+const Select = <T extends string | number = string>(props: SelectProps<T>) => {
   if (props.native) {
     const { onChange, value, ...rest } = props;
     return (
@@ -14,7 +14,7 @@ const Select = (props: SelectProps) => {
   } else {
     const { onValueChange, ...rest } = props;
     return (
-      <CustomSelect
+      <CustomSelect<T>
         onValueChange={onValueChange}
         {...rest}
       />

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

@@ -3,7 +3,7 @@
  * Maps to a native <option> element in <NativeSelect>
  * or a <CustomOption> in <CustomSelect>
  */
-export type OptionData = {
+export type OptionData<T> = {
   /**
    * Display text shown to the user
    */
@@ -12,23 +12,25 @@ export type OptionData = {
    * Data-friendly value that is returned when the option is selected
    * We assume this will be submitted to a server or used in some other way
    */
-  value: string;
+  value: T;
   /**
-   * Optional icon to be displayed to the left of the option text.
-   * Only used by <CustomOption>
-   * Takes in an actual <Icon> component
+   * Apply additional props to a select option component.
    */
+  optionProps?: Record<string, unknown>;
+  /** 
+   Deprecated
+  */
   icon?: React.ReactNode;
 };
 
 /**
  * Top level props that <Select> accepts when implemented
  */
-interface BaseSelectProps {
+interface BaseSelectProps<T = string> {
   /**
    * An array of option data, to be rendered either natively or custom
    */
-  options: OptionData[];
+  options: OptionData<T>[];
   /**
    * Placeholder text shown when no option is selected
    * Displayed in visible field of custom implementation
@@ -70,15 +72,17 @@ interface BaseSelectProps {
  * Internal props for the custom implementation, with <div> as root element
  * onChange already exists on <div>. We override it.
  */
-export type CustomSelectProps = Omit<
+export type CustomSelectProps<T> = Omit<
   React.HTMLAttributes<HTMLDivElement>,
   'onChange'
 > &
-  BaseSelectProps & {
+  BaseSelectProps<T> & {
     native?: false;
-    value?: string | number;
+    value?: T;
     disabled?: boolean;
-    onValueChange?: (value: string, ev: React.UIEvent) => void;
+    lineBreak?: boolean;
+    panelClassName?: string;
+    onValueChange?: (value: T, ev: React.UIEvent) => void;
     ref?: React.RefObject<HTMLDivElement | null>;
   };
 
@@ -92,16 +96,17 @@ export type NativeSelectProps = React.SelectHTMLAttributes<HTMLSelectElement> &
     ref?: React.RefObject<HTMLSelectElement | null>;
   };
 
-export type SelectProps = NativeSelectProps | CustomSelectProps;
+export type SelectProps<T> = NativeSelectProps | CustomSelectProps<T>;
 
 /**
  * Each option as displayed in the Panel of <CustomSelect>
  * Roughly equivalent to a custom version of <option>
  */
-export interface CustomOptionProps
+export interface CustomOptionProps<T>
   extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
-  value: string;
+  value: T;
   testId?: string;
   isSelected?: boolean;
-  onSelect: (event: React.MouseEvent, value: string) => void;
+  onSelect: (event: React.MouseEvent, value: T) => void;
+  lineBreak?: boolean;
 }

package/lib/components/Select/__tests__/__snapshots__/Select.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`Select > Snapshot: default 1`] = `
 <div
   aria-expanded="false"
   aria-haspopup="listbox"
-  class="ucl-uikit-select css-1g3qqhm"
+  class="ucl-uikit-select css-1g9yg1n"
   data-testid="ucl-uikit-select"
   role="combobox"
   tabindex="0"
@@ -14,10 +14,10 @@ exports[`Select > Snapshot: default 1`] = `
     data-testid="ucl-uikit-select__visible-field"
   >
     <span
-      class="css-1oagzrk"
+      class="css-16t5nns"
     />
     <svg
-      class="ucl-uikit-icon css-1ieo112"
+      class="ucl-uikit-icon css-hseitk"
       data-testid="ucl-uikit-icon"
       fill="none"
       height="24"

package/lib/components/Select/subcomponents/CustomOption.tsx

@@ -5,15 +5,16 @@ import { CustomOptionProps } from '../Select.types';
 
 const NAME = 'ucl-uikit-select__option';
 
-const CustomOption = ({
+const CustomOption = <T extends string | number>({
   value,
   isSelected = false,
   onSelect,
+  lineBreak = false,
   testId = NAME,
   className,
   children,
   ...props
-}: CustomOptionProps) => {
+}: CustomOptionProps<T>) => {
   const [theme] = useTheme();
   const internalRef = useRef<HTMLDivElement>(null);
 
@@ -33,30 +34,42 @@ const CustomOption = ({
   };
 
   const baseStyle = css`
-    display: flex;
-    align-items: center;
-    justify-content: left;
     gap: 16px;
-    width: 100%;
     min-height: 40px;
     box-sizing: border-box;
-    padding: 8px 16px;
+    padding: ${theme.padding.p8} ${theme.padding.p16};
     font-family: ${theme.font.family.primary};
     font-size: ${theme.font.size.f16};
+    line-height: ${theme.font.lineHeight.h140};
     background-color: ${theme.color.neutral.white};
     overflow: hidden;
-    white-space: nowrap;
 
     &:hover {
       background-color: ${theme.color.neutral.grey5};
     }
   `;
 
+  const noLineWrapStyle = css`
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  `;
+
+  const lineBreakStyle = css`
+    word-break: break-all;
+  `;
+
   const selectedStyle = css`
     background-color: ${theme.color.neutral.grey5};
   `;
 
-  const style = cx(NAME, baseStyle, isSelected && selectedStyle, className);
+  const style = cx(
+    NAME,
+    baseStyle,
+    !lineBreak && noLineWrapStyle,
+    lineBreak && lineBreakStyle,
+    isSelected && selectedStyle,
+    className
+  );
 
   return (
     <div

package/lib/components/Select/subcomponents/CustomSelect.tsx

@@ -5,20 +5,36 @@ import { useTheme } from '../../../theme';
 import type { CustomSelectProps } from '../Select.types';
 
 const NAME = 'ucl-uikit-select';
-export const DEFAULT_WIDTH_PX = 200;
 
-const CustomSelect = ({
+const CustomSelect = <T extends string | number>({
   value,
   options = [],
   onValueChange,
   disabled,
   placeholder,
-  width = DEFAULT_WIDTH_PX,
+  lineBreak = false,
+  width,
   testId = NAME,
   className,
+  panelClassName,
   ref,
   ...props
-}: CustomSelectProps) => {
+}: CustomSelectProps<T>) => {
+  // todo: remove width prop (deprecated)
+  if (width !== undefined) {
+    console.warn(
+      'Select width prop is deprecated; it has no effect. Use className instead.'
+    );
+  }
+
+  const atLeastOneOptionHasIcon = !!options.find(
+    (opt) => opt.icon !== undefined
+  );
+  // todo: remove option icon prop (deprecated)
+  if (atLeastOneOptionHasIcon) {
+    console.warn('Select option icon prop is deprecated; it has no effect.');
+  }
+
   const internalRef = useRef<HTMLDivElement>(null);
   const effectiveRef = ref || internalRef;
 
@@ -58,7 +74,7 @@ const CustomSelect = ({
   };
 
   // Used by <CustomOption> and passed as prop
-  const handleSelect = (event: React.MouseEvent, optionValue: string) => {
+  const handleSelect = (event: React.MouseEvent, optionValue: T) => {
     if (onValueChange) onValueChange(optionValue, event);
     closePanel();
   };
@@ -134,7 +150,8 @@ const CustomSelect = ({
     justify-content: space-between;
     position: relative;
     min-width: 80px;
-    width: fit-content;
+    width: 100%;
+    max-width: calc(100vw - 64px);
     height: 48px;
     box-sizing: border-box;
     padding: 0 16px;
@@ -156,10 +173,6 @@ const CustomSelect = ({
     }
   `;
 
-  const widthStyle = css`
-    width: ${width}px;
-  `;
-
   const disabledStyle = css`
     color: ${theme.color.text.disabled};
     border: ${theme.border.b1} solid ${theme.color.neutral.grey20};
@@ -170,13 +183,7 @@ const CustomSelect = ({
     }
   `;
 
-  const style = cx(
-    NAME,
-    baseStyle,
-    !!width && widthStyle,
-    disabled && disabledStyle,
-    className
-  );
+  const style = cx(NAME, baseStyle, disabled && disabledStyle, className);
 
   return (
     <div
@@ -198,17 +205,21 @@ const CustomSelect = ({
         disabled={disabled}
       />
       {isOpen && (
-        <Panel role='listbox'>
+        <Panel
+          className={panelClassName}
+          role='listbox'
+        >
           {options.map((option) => (
-            <CustomOption
+            <CustomOption<T>
               key={option.value}
               value={option.value}
               isSelected={value === option.value}
               onSelect={handleSelect}
+              lineBreak={lineBreak}
               role='option'
               aria-selected={value === option.value}
+              {...option.optionProps}
             >
-              {option.icon}
               {option.label}
             </CustomOption>
           ))}