@tpzdsp/next-toolkit 2.5.1 → 3.1.0

package/src/components/select/Select.test.tsx

@@ -1,474 +0,0 @@
-/* eslint-disable vitest/no-conditional-expect -- react-select internals require conditional checks */
-import selectEvent from 'react-select-event';
-
-import { Select } from './Select';
-import { render, screen, userEvent, waitFor } from '../../test/renderers';
-
-// Suppress act warnings for react-select tests
-const originalError = console.error;
-
-beforeAll(() => {
-  console.error = (...args: unknown[]) => {
-    const errorMessage = args[0];
-
-    if (
-      typeof errorMessage === 'string' &&
-      (errorMessage.includes('act(') || errorMessage.includes('Warning: An update to'))
-    ) {
-      return;
-    }
-
-    originalError.call(console, ...args);
-  };
-});
-
-afterAll(() => {
-  console.error = originalError;
-});
-
-const OPTIONS = [
-  { value: 'option1', label: 'Option 1' },
-  { value: 'option2', label: 'Option 2' },
-  { value: 'option3', label: 'Option 3' },
-];
-
-const PLACEHOLDER_TEXT = 'Select an option...';
-const NO_OPTIONS_MESSAGE = 'No options available';
-
-describe('Select', () => {
-  it('should render with default props', () => {
-    render(<Select options={OPTIONS} />);
-
-    expect(screen.getByRole('combobox')).toBeInTheDocument();
-  });
-
-  it('should render with placeholder text', () => {
-    render(<Select options={OPTIONS} placeholder={PLACEHOLDER_TEXT} />);
-
-    expect(screen.getByText(PLACEHOLDER_TEXT)).toBeInTheDocument();
-  });
-
-  it('should render with default value', () => {
-    render(<Select options={OPTIONS} defaultValue={OPTIONS[0]} />);
-
-    expect(screen.getByText('Option 1')).toBeInTheDocument();
-  });
-
-  it('should open dropdown when clicked', async () => {
-    render(<Select options={OPTIONS} />);
-
-    const selectInput = screen.getByRole('combobox');
-
-    await selectEvent.openMenu(selectInput);
-
-    await waitFor(() => {
-      expect(screen.getByText('Option 1')).toBeInTheDocument();
-      expect(screen.getByText('Option 2')).toBeInTheDocument();
-      expect(screen.getByText('Option 3')).toBeInTheDocument();
-    });
-  });
-
-  it('should select option when clicked', async () => {
-    const onChangeMock = vi.fn();
-
-    render(<Select options={OPTIONS} onChange={onChangeMock} />);
-
-    const selectInput = screen.getByRole('combobox');
-
-    await selectEvent.select(selectInput, 'Option 2');
-
-    await waitFor(() => {
-      expect(onChangeMock).toHaveBeenCalledWith(OPTIONS[1], expect.any(Object));
-    });
-  });
-
-  it('should call onChange with correct value', async () => {
-    const onChangeMock = vi.fn();
-
-    render(<Select options={OPTIONS} onChange={onChangeMock} />);
-
-    const selectInput = screen.getByRole('combobox');
-
-    await selectEvent.select(selectInput, 'Option 1');
-
-    await waitFor(() => {
-      expect(onChangeMock).toHaveBeenCalledWith(
-        OPTIONS[0],
-        expect.objectContaining({
-          action: 'select-option',
-        }),
-      );
-    });
-  });
-
-  it('should display selected value', async () => {
-    render(<Select options={OPTIONS} />);
-
-    const selectInput = screen.getByRole('combobox');
-
-    await selectEvent.select(selectInput, 'Option 3');
-
-    await waitFor(() => {
-      expect(screen.getByText('Option 3')).toBeInTheDocument();
-    });
-  });
-
-  it('should be clearable when isClearable is true', async () => {
-    const onChangeMock = vi.fn();
-
-    render(
-      <Select options={OPTIONS} defaultValue={OPTIONS[0]} isClearable onChange={onChangeMock} />,
-    );
-
-    // Verify the option is initially selected
-    expect(screen.getByText('Option 1')).toBeInTheDocument();
-
-    // Find the select input
-    const selectInput = screen.getByRole('combobox');
-
-    // Look for any clickable element that might be the clear button
-    // This is more reliable than trying to use selectEvent.clearAll
-    const user = userEvent.setup();
-
-    // The clear indicator should be rendered somewhere in the select container
-    const selectContainer = selectInput.closest('[class*="select"]') ?? selectInput.parentElement;
-
-    if (selectContainer) {
-      // Look for elements that might be the clear button
-      const possibleClearButtons = selectContainer.querySelectorAll(
-        'svg, [role="button"], [class*="clear"]',
-      );
-
-      let cleared = false;
-
-      for (const element of possibleClearButtons) {
-        try {
-          await user.click(element as HTMLElement);
-
-          // Check if this click triggered a clear action
-          if (onChangeMock.mock.calls.some((call) => call[1]?.action === 'clear')) {
-            cleared = true;
-            break;
-          }
-        } catch {
-          // Continue to next element
-          continue;
-        }
-      }
-
-      if (cleared) {
-        expect(onChangeMock).toHaveBeenCalledWith(
-          null,
-          expect.objectContaining({ action: 'clear' }),
-        );
-      } else {
-        // Fallback: just verify that isClearable doesn't break the component
-        expect(selectInput).toBeInTheDocument();
-      }
-    }
-  });
-
-  it('should handle multi-select', async () => {
-    const onChangeMock = vi.fn();
-
-    render(<Select options={OPTIONS} isMulti onChange={onChangeMock} />);
-
-    const selectInput = screen.getByRole('combobox');
-
-    await selectEvent.select(selectInput, 'Option 1');
-
-    await waitFor(() => {
-      expect(onChangeMock).toHaveBeenCalledWith([OPTIONS[0]], expect.any(Object));
-    });
-  });
-
-  it('should display multiple selected values', async () => {
-    render(<Select options={OPTIONS} isMulti />);
-
-    const selectInput = screen.getByRole('combobox');
-
-    await selectEvent.select(selectInput, 'Option 1');
-    await selectEvent.select(selectInput, 'Option 2');
-
-    await waitFor(() => {
-      expect(screen.getByText('Option 1')).toBeInTheDocument();
-      expect(screen.getByText('Option 2')).toBeInTheDocument();
-    });
-  });
-
-  it('should remove multi-value when remove button is clicked', async () => {
-    const onChangeMock = vi.fn();
-    const { container } = render(
-      <Select
-        options={OPTIONS}
-        isMulti
-        defaultValue={[OPTIONS[0], OPTIONS[1]]}
-        onChange={onChangeMock}
-      />,
-    );
-
-    await waitFor(() => {
-      expect(screen.getByText('Option 1')).toBeInTheDocument();
-      expect(screen.getByText('Option 2')).toBeInTheDocument();
-    });
-
-    const user = userEvent.setup();
-
-    // Look for remove buttons (X icons) in the multi-value tags
-    const removeButtons = container.querySelectorAll(
-      'svg, [class*="multiValueRemove"], [class*="remove"]',
-    );
-
-    let removed = false;
-
-    for (const button of removeButtons) {
-      try {
-        await user.click(button as HTMLElement);
-
-        // Check if this click triggered a remove action
-        if (
-          onChangeMock.mock.calls.some(
-            (call) =>
-              call[1]?.action === 'remove-value' ||
-              (Array.isArray(call[0]) && call[0].length === 1),
-          )
-        ) {
-          removed = true;
-          break;
-        }
-      } catch {
-        // Continue to next button if this one fails
-        continue;
-      }
-    }
-
-    if (removed) {
-      // Verify that one option was removed and one remains
-      await waitFor(() => {
-        expect(onChangeMock).toHaveBeenCalledWith(
-          expect.arrayContaining([expect.objectContaining({ value: expect.any(String) })]),
-          expect.objectContaining({ action: 'remove-value' }),
-        );
-      });
-    } else {
-      // Fallback: just verify that multi-select with remove doesn't break the component
-      expect(screen.getByText('Option 1')).toBeInTheDocument();
-      expect(screen.getByText('Option 2')).toBeInTheDocument();
-    }
-  });
-
-  it('should be disabled when isDisabled is true', () => {
-    const { container } = render(<Select options={OPTIONS} isDisabled />);
-
-    // Look for the select container
-    const selectContainer = container.querySelector('[class*="select"]');
-
-    expect(selectContainer).toBeInTheDocument();
-
-    // Check for disabled state in various ways
-    const disabledInput =
-      container.querySelector('input[disabled]') ??
-      container.querySelector('[aria-disabled="true"]') ??
-      container.querySelector('[class*="disabled"]');
-
-    expect(disabledInput).toBeInTheDocument();
-
-    // Verify it's actually disabled
-    if (disabledInput instanceof HTMLInputElement) {
-      expect(disabledInput).toBeDisabled();
-    } else {
-      expect(disabledInput).toHaveAttribute('aria-disabled', 'true');
-    }
-  });
-
-  it('should show no options message when options are empty', async () => {
-    render(<Select options={[]} noOptionsMessage={() => NO_OPTIONS_MESSAGE} />);
-
-    const selectInput = screen.getByRole('combobox');
-
-    await selectEvent.openMenu(selectInput);
-
-    await waitFor(() => {
-      expect(screen.getByText(NO_OPTIONS_MESSAGE)).toBeInTheDocument();
-    });
-  });
-
-  it('should filter options when searchable', async () => {
-    const user = userEvent.setup();
-
-    render(<Select options={OPTIONS} isSearchable />);
-
-    const selectInput = screen.getByRole('combobox');
-
-    // Click to focus and open menu
-    await user.click(selectInput);
-    await user.type(selectInput, 'Option 2');
-
-    await waitFor(() => {
-      expect(screen.getByText('Option 2')).toBeInTheDocument();
-      expect(screen.queryByText('Option 1')).not.toBeInTheDocument();
-      expect(screen.queryByText('Option 3')).not.toBeInTheDocument();
-    });
-  });
-
-  it('should handle keyboard navigation', async () => {
-    const user = userEvent.setup();
-    const onChangeMock = vi.fn();
-
-    render(<Select options={OPTIONS} onChange={onChangeMock} />);
-
-    const selectInput = screen.getByRole('combobox');
-
-    // Focus the select
-    await user.click(selectInput);
-
-    // Navigate down once (should highlight first option)
-    await user.keyboard('{ArrowDown}');
-
-    // Navigate down again (should highlight second option)
-    await user.keyboard('{ArrowDown}');
-
-    // Select the highlighted option
-    await user.keyboard('{Enter}');
-
-    await waitFor(() => {
-      // Verify that an option was selected
-      expect(onChangeMock).toHaveBeenCalledWith(
-        expect.objectContaining({
-          value: expect.any(String),
-          label: expect.any(String),
-        }),
-        expect.objectContaining({
-          action: 'select-option',
-        }),
-      );
-    });
-
-    // Check which option was actually selected
-    const selectedCall = onChangeMock.mock.calls[0];
-    const selectedOption = selectedCall?.[0];
-
-    // Verify the selected option is displayed
-    await waitFor(() => {
-      expect(screen.getByText(selectedOption?.label)).toBeInTheDocument();
-    });
-  });
-
-  it('should accept custom classNames', () => {
-    const customClassNames = {
-      control: () => 'custom-control-class',
-      container: () => 'custom-container-class',
-    };
-
-    const { container } = render(<Select options={OPTIONS} classNames={customClassNames} />);
-
-    // Check that the container has the custom class
-    const selectContainer = container.querySelector('[class*="custom-container-class"]');
-
-    expect(selectContainer).toBeInTheDocument();
-
-    // Check that the control has the custom class
-    const selectControl = container.querySelector('[class*="custom-control-class"]');
-
-    expect(selectControl).toBeInTheDocument();
-  });
-
-  it('should handle value prop for controlled component', async () => {
-    const onChangeMock = vi.fn();
-
-    const { rerender } = render(
-      <Select options={OPTIONS} value={OPTIONS[0]} onChange={onChangeMock} />,
-    );
-
-    expect(screen.getByText('Option 1')).toBeInTheDocument();
-
-    // Try to select a different option
-    const selectInput = screen.getByRole('combobox');
-
-    await selectEvent.select(selectInput, 'Option 2');
-
-    await waitFor(() => {
-      expect(onChangeMock).toHaveBeenCalledWith(OPTIONS[1], expect.any(Object));
-    });
-
-    // Rerender with new value to simulate controlled component
-    rerender(<Select options={OPTIONS} value={OPTIONS[1]} onChange={onChangeMock} />);
-
-    expect(screen.getByText('Option 2')).toBeInTheDocument();
-  });
-
-  it('should render custom dropdown indicator', () => {
-    const { container } = render(<Select options={OPTIONS} />);
-
-    // Look for SVG elements (the LuChevronDown icon)
-    const svgElements = container.querySelectorAll('svg');
-
-    // Should have at least one SVG (the dropdown indicator)
-    expect(svgElements.length).toBeGreaterThan(0);
-
-    // Verify at least one SVG is present in the DOM
-    expect(svgElements[0]).toBeInTheDocument();
-  });
-
-  it('should handle loading state', () => {
-    // Test that component renders without crashing when isLoading is true
-    const { rerender } = render(<Select options={OPTIONS} />);
-
-    expect(screen.getByRole('combobox')).toBeInTheDocument();
-
-    // Rerender with isLoading=true - should not crash
-    rerender(<Select options={OPTIONS} isLoading />);
-
-    expect(screen.getByRole('combobox')).toBeInTheDocument();
-
-    // Test that it can handle both states
-    rerender(<Select options={OPTIONS} isLoading={false} />);
-
-    expect(screen.getByRole('combobox')).toBeInTheDocument();
-  });
-
-  it('should handle custom formatOptionLabel', async () => {
-    const formatOptionLabel = (option: { value: string; label: string }) =>
-      `Custom: ${option.label}`;
-
-    render(<Select options={OPTIONS} formatOptionLabel={formatOptionLabel} />);
-
-    const selectInput = screen.getByRole('combobox');
-
-    await selectEvent.openMenu(selectInput);
-
-    await waitFor(() => {
-      expect(screen.getByText('Custom: Option 1')).toBeInTheDocument();
-      expect(screen.getByText('Custom: Option 2')).toBeInTheDocument();
-    });
-  });
-
-  it('should generate unique instanceId', () => {
-    const { container: container1 } = render(<Select options={OPTIONS} />);
-    const { container: container2 } = render(<Select options={OPTIONS} />);
-
-    const select1 = container1.querySelector('[id*="react-select"]');
-    const select2 = container2.querySelector('[id*="react-select"]');
-
-    expect(select1?.id).not.toBe(select2?.id);
-  });
-
-  it('should handle complex option objects', async () => {
-    const complexOptions = [
-      { value: 'user1', label: 'John Doe', email: 'john@example.com' },
-      { value: 'user2', label: 'Jane Smith', email: 'jane@example.com' },
-    ];
-
-    const onChangeMock = vi.fn();
-
-    render(<Select options={complexOptions} onChange={onChangeMock} />);
-
-    const selectInput = screen.getByRole('combobox');
-
-    await selectEvent.select(selectInput, 'Jane Smith');
-
-    await waitFor(() => {
-      expect(onChangeMock).toHaveBeenCalledWith(complexOptions[1], expect.any(Object));
-    });
-  });
-});

package/src/components/select/Select.tsx

@@ -1,125 +0,0 @@
-'use client';
-
-import { useId } from 'react';
-
-import { LuChevronDown, LuX } from 'react-icons/lu';
-import type {
-  ClassNamesConfig,
-  ClearIndicatorProps,
-  DropdownIndicatorProps,
-  GroupBase,
-  MultiValueRemoveProps,
-  Props as ReactSelectProps,
-} from 'react-select';
-import { components, default as ReactSelect } from 'react-select';
-
-import { SELECT_CONTAINER_CLASSES, SELECT_CONTROL_CLASSES } from './common';
-import { cn } from '../../utils';
-
-// extends the react-select props with some of our own
-export type SelectProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = Omit<
-  ReactSelectProps<Option, IsMulti, Group>,
-  'className'
->;
-
-const getClassNames = <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
-  userClassNames?: ClassNamesConfig<Option, IsMulti, Group>,
-): ClassNamesConfig<Option, IsMulti, Group> => {
-  return {
-    container: (props) => cn(SELECT_CONTAINER_CLASSES, userClassNames?.container?.(props)),
-    control: (props) =>
-      cn(
-        SELECT_CONTROL_CLASSES,
-        props.isDisabled ? '!cursor-not-allowed bg-gray-100' : 'bg-white',
-        props.isFocused
-          ? 'shadow-[0px_0px_0px_theme(borderWidth.form)_theme(colors.focus)] border-focus'
-          : '',
-        userClassNames?.control?.(props),
-      ),
-    dropdownIndicator: (props) => cn('w-4 h-4', userClassNames?.dropdownIndicator?.(props)),
-    placeholder: (props) => cn('text-text-secondary', userClassNames?.placeholder?.(props)),
-    menu: (props) =>
-      cn(
-        'bg-white border border-black mt-1 overflow-hidden shadow-sm shadow-[0px_0px_6px_0px_#00000044]',
-        userClassNames?.menu?.(props),
-      ),
-    menuList: (props) => cn('flex flex-col', userClassNames?.menuList?.(props)),
-    option: (props) =>
-      cn(
-        'overflow-x-hidden text-ellipsis px-4 py-1 shrink-0',
-        !props.isSelected && props.isFocused ? 'bg-slate-100' : '',
-        props.isSelected ? 'bg-brand text-white' : '',
-        userClassNames?.option?.(props),
-      ),
-    noOptionsMessage: (props) => cn('px-4 py-1', userClassNames?.noOptionsMessage?.(props)),
-    clearIndicator: (props) =>
-      cn('cursor-pointer pointer-events-auto w-4 h-4', userClassNames?.clearIndicator?.(props)),
-    indicatorsContainer: (props) =>
-      cn('flex gap-1 items-center justify-center', userClassNames?.indicatorsContainer?.(props)),
-    indicatorSeparator: (props) =>
-      cn(
-        props.isMulti && props.hasValue ? 'bg-border-input/30' : '',
-        userClassNames?.indicatorSeparator?.(props),
-      ),
-    multiValue: (props) =>
-      cn(
-        'flex gap-2 items-center justify-center px-2 bg-brand text-white m-[2px]',
-        userClassNames?.multiValue?.(props),
-      ),
-    multiValueRemove: (props) => cn('w-3 h-3', userClassNames?.multiValueRemove?.(props)),
-  };
-};
-
-// custom components should be defined outside the rendering, according to
-// https://react-select.com/components#defining-components
-const customDropdownIndicator = <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
-  props: DropdownIndicatorProps<Option, IsMulti, Group>,
-) => {
-  return <LuChevronDown className={props.getClassNames('dropdownIndicator', props)} />;
-};
-
-const customClearIndicator = <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
-  props: ClearIndicatorProps<Option, IsMulti, Group>,
-) => {
-  return (
-    <components.ClearIndicator {...props}>
-      <LuX className={props.getClassNames('clearIndicator', props)} />
-    </components.ClearIndicator>
-  );
-};
-
-const customMultiValueRemove = <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
-  props: MultiValueRemoveProps<Option, IsMulti, Group>,
-) => {
-  return (
-    <components.MultiValueRemove {...props}>
-      <LuX className="w-full h-full" />
-    </components.MultiValueRemove>
-  );
-};
-
-export const Select = <
-  Option,
-  IsMulti extends boolean = false,
-  Group extends GroupBase<Option> = GroupBase<Option>,
->({
-  classNames: userClassNames,
-  ...props
-}: SelectProps<Option, IsMulti, Group>) => {
-  // use id to prevent hydration errors
-  const id = useId();
-
-  return (
-    <ReactSelect
-      {...props}
-      instanceId={id}
-      unstyled
-      classNames={getClassNames<Option, IsMulti, Group>(userClassNames)}
-      components={{
-        DropdownIndicator: customDropdownIndicator,
-        ClearIndicator: customClearIndicator,
-        MultiValueRemove: customMultiValueRemove,
-      }}
-    />
-  );
-};