@hyphen/hyphen-components 2.9.0

package/src/components/SelectInput/SelectInput.test.tsx

@@ -0,0 +1,403 @@
+import React from 'react';
+import { render, fireEvent, screen, Matcher } from '@testing-library/react';
+import selectEvent from 'react-select-event';
+import { SelectInput, TextInputSize } from './SelectInput';
+
+const selectOptions = [
+  { value: 'chocolate', label: 'Chocolate' },
+  { value: 'strawberry', label: 'Strawberry' },
+  { value: 'vanilla', label: 'Vanilla' },
+];
+
+function getByTextWithMarkup(
+  text: string
+): (_content: any, element: Element) => boolean {
+  return (_content: any, element: Element) => {
+    const hasText = (node: Element) => node.textContent === text;
+    const elementHasText = hasText(element);
+    const childrenDontHaveText = Array.from(element.children).every(
+      (child) => !hasText(child)
+    );
+
+    return elementHasText && childrenDontHaveText;
+  };
+}
+
+describe('SelectInput', () => {
+  describe('Callback Handling', () => {
+    test('it fires onChange callback on change', async () => {
+      const mockedHandleChange = jest.fn();
+
+      const { getByLabelText } = render(
+        <SelectInput
+          value="chocolate"
+          id="testId"
+          onChange={mockedHandleChange}
+          placeholder="Test Placeholder"
+          label="onchange test"
+          options={selectOptions}
+        />
+      );
+
+      await selectEvent.select(getByLabelText('onchange test'), 'Vanilla');
+
+      expect(mockedHandleChange).toBeCalledTimes(1);
+    });
+
+    test('it fires onFocus callback on focus', () => {
+      const mockedHandleChange = jest.fn();
+      const mockedHandleFocus = jest.fn();
+
+      render(
+        <SelectInput
+          id="testId"
+          label="Test"
+          value="chocolate"
+          onChange={mockedHandleChange}
+          onFocus={mockedHandleFocus}
+          placeholder="Test Placeholder"
+          options={selectOptions}
+        />
+      );
+
+      fireEvent.focus(screen.getByRole('combobox'));
+
+      expect(mockedHandleFocus).toBeCalledTimes(1);
+    });
+
+    test('it fires onBlur callback on blur', () => {
+      const mockedHandleChange = jest.fn();
+      const mockedHandleBlur = jest.fn();
+
+      render(
+        <SelectInput
+          id="testId"
+          label="Test"
+          value="chocolate"
+          onChange={mockedHandleChange}
+          onBlur={mockedHandleBlur}
+          placeholder="Test Placeholder"
+          options={selectOptions}
+        />
+      );
+
+      fireEvent.blur(screen.getByRole('combobox'));
+
+      expect(mockedHandleBlur).toBeCalledTimes(1);
+    });
+  });
+
+  describe('States', () => {
+    describe('Hidden label, with a placeholder', () => {
+      test('it renders input without a visual label, and with a placeholder', () => {
+        const mockedHandleChange = jest.fn();
+
+        render(
+          <SelectInput
+            id="testId"
+            label="hidden label"
+            value="chocolate"
+            hideLabel
+            onChange={mockedHandleChange}
+            placeholder="Test Placeholder"
+            options={selectOptions}
+          />
+        );
+        expect(screen.queryByText('hidden label')).toBeNull();
+        expect(screen.getByText('Test Placeholder')).toBeInTheDocument();
+      });
+    });
+
+    test('does not assign "aria-labelledby" attribute when a label is hidden', () => {
+      const mockedHandleChange = jest.fn();
+
+      render(
+        <SelectInput
+          id="testInput"
+          label="hidden label"
+          hideLabel
+          onChange={mockedHandleChange}
+          options={selectOptions}
+          value="chocolate"
+        />
+      );
+      const inputElement = screen.getByLabelText('hidden label');
+      expect(inputElement).not.toHaveAttribute('aria-labelledby');
+    });
+
+    describe('With a label, and no custom placeholder', () => {
+      test('it renders input with a label, and with a default placeholder', () => {
+        const mockedHandleChange = jest.fn();
+
+        render(
+          <SelectInput
+            id="testId"
+            onChange={mockedHandleChange}
+            label="Select Label"
+            options={selectOptions}
+            value="chocolate"
+          />
+        );
+
+        expect(screen.getByLabelText('Select Label')).toBeInTheDocument();
+        expect(screen.getByText('Select...')).toBeInTheDocument();
+      });
+
+      test('assigns the "aria-labelledby" attribute and renders label correct id, when a label is provided', () => {
+        const mockedHandleChange = jest.fn();
+        render(
+          <SelectInput
+            id="testInput"
+            label="test label"
+            options={selectOptions}
+            value="chocolate"
+            onChange={mockedHandleChange}
+          />
+        );
+        const inputElement = screen.getByLabelText('test label');
+        expect(inputElement).toHaveAttribute(
+          'aria-labelledby',
+          'testInputLabel'
+        );
+        expect(document.getElementById('testInputLabel')).toBeInTheDocument();
+      });
+    });
+
+    describe('Single select, pre-selected', () => {
+      test('it renders with value pre-selected', () => {
+        const mockedHandleChange = jest.fn();
+
+        render(
+          <SelectInput
+            id="testId"
+            onChange={mockedHandleChange}
+            label="Select Label"
+            options={selectOptions}
+            value={selectOptions[2]}
+          />
+        );
+
+        expect(screen.getByText('Vanilla')).toBeInTheDocument();
+      });
+    });
+
+    describe('Multi select, no selection', () => {
+      test('it renders input with a label, and with a default placeholder', () => {
+        const mockedHandleChange = jest.fn();
+
+        render(
+          <SelectInput
+            id="testId"
+            onChange={mockedHandleChange}
+            label="Select Label"
+            options={selectOptions}
+            isMulti
+            value={[]}
+          />
+        );
+
+        expect(screen.getByLabelText('Select Label')).toBeInTheDocument();
+        expect(screen.getByText('Select...')).toBeInTheDocument();
+      });
+    });
+
+    describe('Multi select, with multiple items selected', () => {
+      test('it renders input with a label, and with two items selected', () => {
+        const mockedHandleChange = jest.fn();
+
+        render(
+          <SelectInput
+            id="testId"
+            onChange={mockedHandleChange}
+            label="Select Label"
+            options={selectOptions}
+            isMulti
+            value={[selectOptions[0], selectOptions[2]]}
+          />
+        );
+
+        expect(screen.getByLabelText('Select Label')).toBeInTheDocument();
+        expect(screen.queryByText('Select...')).toBeNull();
+        expect(screen.getByText('Chocolate')).toBeInTheDocument();
+        expect(screen.getByText('Vanilla')).toBeInTheDocument();
+      });
+    });
+
+    describe('Is Required', () => {
+      test('it renders an asterisk in the label', () => {
+        const mockedHandleChange = jest.fn();
+
+        render(
+          <SelectInput
+            id="testId"
+            onChange={mockedHandleChange}
+            label="Select Label"
+            options={selectOptions}
+            value="chocolate"
+            isRequired
+          />
+        );
+
+        expect(
+          screen.getByText(
+            getByTextWithMarkup('Select Label *') as unknown as Matcher
+          )
+        ).toBeInTheDocument();
+      });
+    });
+
+    describe('Is Disabled', () => {
+      test('it disables the input', () => {
+        const mockedHandleChange = jest.fn();
+
+        const { container } = render(
+          <SelectInput
+            id="testId"
+            onChange={mockedHandleChange}
+            label="Select Label"
+            options={selectOptions}
+            value="chocolate"
+            isDisabled
+          />
+        );
+
+        const combobox = container.querySelector(
+          '.react-select__control[aria-disabled="true"]'
+        );
+
+        expect(combobox).toBeInTheDocument();
+      });
+    });
+
+    describe('Is Invalid, with a helpful message', () => {
+      test('it renders the helpful message', () => {
+        const mockedHandleChange = jest.fn();
+
+        render(
+          <SelectInput
+            id="testId"
+            onChange={mockedHandleChange}
+            label="Select Label"
+            options={selectOptions}
+            error="Helpful message"
+            value="chocolate"
+          />
+        );
+
+        expect(screen.getByText('Helpful message')).toBeInTheDocument();
+      });
+    });
+
+    describe('Is Clearable', () => {
+      test('it does not render the X icon if input has value but is not clearable', () => {
+        const mockedHandleChange = jest.fn();
+
+        const { container } = render(
+          <SelectInput
+            id="testId"
+            onChange={mockedHandleChange}
+            label="Select Label"
+            options={selectOptions}
+            value={selectOptions[0]}
+            isClearable={false}
+          />
+        );
+
+        expect(
+          container.querySelector('.react-select__clear-indicator')
+        ).not.toBeInTheDocument();
+      });
+
+      test('it renders the X icon if input has value and is clearable', () => {
+        const mockedHandleChange = jest.fn();
+
+        const { container } = render(
+          <SelectInput
+            id="testId"
+            onChange={mockedHandleChange}
+            label="Select Label"
+            options={selectOptions}
+            value={selectOptions[0]}
+            isClearable
+          />
+        );
+
+        expect(
+          container.querySelector('.react-select__clear-indicator')
+        ).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Sizes', () => {
+    const mockedHandleChange = jest.fn();
+    const sizes: TextInputSize[] = ['sm', 'md', 'lg'];
+
+    const breakpoints = ['tablet', 'desktop', 'hd'];
+
+    sizes.forEach((size) => {
+      test(`it has a ${size} class applied to it`, () => {
+        const { container } = render(
+          <SelectInput
+            id="testId"
+            onChange={mockedHandleChange}
+            options={selectOptions}
+            value={selectOptions[0].value}
+            size={size}
+            label="size test"
+          />
+        );
+
+        expect(container.children[0].getAttribute('class')).toContain(size);
+      });
+
+      breakpoints.forEach((breakpoint) => {
+        test(`it applies responsive classes for breakpoint: ${breakpoint} and size: ${size}`, () => {
+          const { container } = render(
+            <SelectInput
+              id="testId"
+              onChange={mockedHandleChange}
+              options={selectOptions}
+              value={selectOptions[0].value}
+              size={{ [breakpoint]: size }}
+              label="size test"
+            />
+          );
+
+          expect(container.children[0].getAttribute('class')).toContain(
+            `size-${size}-${breakpoint}`
+          );
+        });
+      });
+    });
+
+    test('It applies responsive classes when multiple are applied', () => {
+      const { container } = render(
+        <SelectInput
+          id="testId"
+          onChange={mockedHandleChange}
+          options={selectOptions}
+          value={selectOptions[0].value}
+          size={{
+            base: 'sm',
+            tablet: 'md',
+            desktop: 'lg',
+            hd: 'sm',
+          }}
+          label="size test"
+        />
+      );
+
+      expect(container.children[0].getAttribute('class')).toContain('size-sm');
+      expect(container.children[0].getAttribute('class')).toContain(
+        'size-md-tablet'
+      );
+      expect(container.children[0].getAttribute('class')).toContain(
+        'size-lg-desktop'
+      );
+      expect(container.children[0].getAttribute('class')).toContain(
+        'size-sm-hd'
+      );
+    });
+  });
+});

package/src/components/SelectInput/SelectInput.tsx

@@ -0,0 +1,245 @@
+import React, { FC, FocusEvent, ReactNode, FocusEventHandler } from 'react';
+import classNames from 'classnames';
+import Select, {
+  components,
+  ClearIndicatorProps,
+  OptionsOrGroups,
+  OnChangeValue,
+} from 'react-select';
+import { ResponsiveProp } from '../../types';
+import { Z_INDEX_VALUES } from '../../lib/tokens';
+import { generateResponsiveClasses } from '../../lib/generateResponsiveClasses';
+import { Box } from '../Box/Box';
+import { Icon } from '../Icon/Icon';
+import { FormLabel } from '../FormLabel/FormLabel';
+import { InputValidationMessage } from '../InputValidationMessage/InputValidationMessage';
+import styles from './SelectInput.module.scss';
+import { GroupBase } from 'react-select/dist/declarations/src/types';
+
+type SelectOptions = any;
+type SelectGroupOptions = GroupBase<SelectOptions>;
+export type SelectInputOptions = OptionsOrGroups<
+  SelectOptions,
+  SelectGroupOptions
+>;
+
+export type SimulatedEventPayloadType = {
+  target: {
+    name: string;
+    value: OnChangeValue<SelectInputOptions, boolean>;
+  };
+};
+
+export type TextInputSize =
+  | 'sm'
+  | 'md'
+  | 'lg'
+  | ResponsiveProp<'sm' | 'md' | 'lg'>;
+
+export interface SelectInputProps {
+  /**
+   * The id attribute of the input.
+   */
+  id: string;
+  /**
+   * Custom content to be displayed above the input. If the label is hidden, will be used to set aria-label attribute.
+   */
+  label: string;
+  /**
+   * Callback function to call on change event.
+   */
+  onChange: (event: SimulatedEventPayloadType) => void;
+  /**
+   * Options for dropdown list.
+   */
+  options: SelectInputOptions;
+  /**
+   * The value(s) of select.
+   */
+  value: any | any[]; // eslint-disable-line @typescript-eslint/no-explicit-any
+  /**
+   * Autofocus select input on render.
+   */
+  autoFocus?: boolean;
+  /**
+   * Additional classes to add.
+   */
+  className?: string;
+  /**
+   * Mark the input field as invalid and display a validation message.
+   * Pass a string or node to render a validation message below the input.
+   */
+  error?: ReactNode;
+  /**
+   * Additional clarifying text to help describe the input
+   */
+  helpText?: ReactNode;
+  /**
+   * Visually hide the label.
+   */
+  hideLabel?: boolean;
+  /**
+   * If the input value is clearable programmatically.
+   */
+  isClearable?: boolean;
+  /**
+   * If the input should be disabled and not focusable.
+   */
+  isDisabled?: boolean;
+  /**
+   * Is multi select enabled.
+   */
+  isMulti?: boolean;
+  /**
+   * The required and aria-required attributes on the input
+   */
+  isRequired?: boolean;
+  /**
+   * Select 'name' attribute.
+   */
+  name?: string;
+  /**
+   * A ref to portal the dropdown menu to. This is useful when the dropdown is located in a smaller container
+   * and we want to avoid cutting off the menu.
+   */
+  menuPortalTarget?: HTMLElement;
+  /**
+   * Callback function to call on blur event.
+   */
+  onBlur?: (event: FocusEvent<HTMLElement>) => void;
+  /**
+   * Callback function to call on focus event.
+   */
+  onFocus?: (event: FocusEvent<HTMLElement>) => void;
+  /**
+   * Placeholder for input.
+   */
+  placeholder?: string;
+  /**
+   * Visual indicator that the field is required, that gets appended to the label
+   */
+  requiredIndicator?: ReactNode;
+  /**
+   * The size of the text input.
+   */
+  size?: TextInputSize;
+  /**
+   * Additional props to be spread. These will be applied specifically to
+   * the `react-select` component that powers the select. For full docs on
+   * react-select props, [Click Here](https://react-select.com/props)
+   */
+  [x: string]: any; // eslint-disable-line
+}
+
+export const SelectInput: FC<SelectInputProps> = ({
+  id,
+  label,
+  onChange,
+  options,
+  value,
+  autoFocus = false,
+  className = '',
+  error = false,
+  helpText,
+  hideLabel = false,
+  isClearable = false,
+  isDisabled = false,
+  isMulti = false,
+  isRequired = false,
+  menuPortalTarget = null,
+  name = '',
+  onFocus = null,
+  onBlur = null,
+  placeholder = undefined,
+  requiredIndicator = ' *',
+  size = 'md',
+  ...restProps
+}) => {
+  const handleChange = (values: OnChangeValue<SelectInputOptions, boolean>) => {
+    const simulatedEventPayloadType: SimulatedEventPayloadType = {
+      target: {
+        name,
+        value: values,
+      },
+    };
+
+    onChange(simulatedEventPayloadType);
+  };
+
+  const handleFocus: FocusEventHandler<HTMLInputElement> = (e) => {
+    if (onFocus) onFocus(e);
+  };
+
+  const handleBlur: FocusEventHandler<HTMLInputElement> = (e) => {
+    if (onBlur) onBlur(e);
+  };
+
+  const responsiveClasses = generateResponsiveClasses('size', size);
+
+  const wrapperClasses = classNames(
+    'hyphen-components__variables__form-control',
+    'select-input-wrapper',
+    className,
+    ...responsiveClasses.map((c) => styles[c]),
+    {
+      [styles.disabled]: isDisabled,
+    }
+  );
+
+  const inputClasses = classNames('react-select', { [styles.error]: error });
+
+  const labelProps = {
+    inputId: id,
+    helpText,
+    className: styles['select-input-label'],
+    isDisabled,
+    isFieldRequired: isRequired,
+    requiredIndicator,
+  };
+
+  const ClearIndicator = (
+    props: ClearIndicatorProps<
+      OptionsOrGroups<SelectOptions, SelectGroupOptions>
+    >
+  ) => (
+    <components.ClearIndicator {...props}>
+      <Icon name="remove" />
+    </components.ClearIndicator>
+  );
+
+  return (
+    <Box width="100%" className={wrapperClasses}>
+      {label && !hideLabel && <FormLabel {...labelProps}>{label}</FormLabel>}
+      <Select
+        {...restProps}
+        inputId={id}
+        aria-label={label}
+        components={{ ClearIndicator }}
+        aria-labelledby={label && !hideLabel ? `${id}Label` : undefined}
+        className={inputClasses}
+        classNamePrefix="react-select"
+        placeholder={placeholder}
+        isClearable={isClearable}
+        isDisabled={isDisabled}
+        isMulti={isMulti}
+        menuPortalTarget={menuPortalTarget}
+        name={name}
+        autoFocus={autoFocus}
+        options={options}
+        onChange={handleChange}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        styles={{
+          menuPortal: (base) => ({
+            ...base,
+            zIndex: Number(Z_INDEX_VALUES.popover),
+          }),
+        }}
+        value={value}
+      />
+      {error && typeof error !== 'boolean' && (
+        <InputValidationMessage>{error}</InputValidationMessage>
+      )}
+    </Box>
+  );
+};

package/src/components/SelectInputInset/SelectInputInset.mdx

@@ -0,0 +1,56 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/blocks';
+import { SelectInputInset } from './SelectInputInset';
+import * as Stories from './SelectInputInset.stories';
+
+<Meta of={Stories} />
+
+# SelectInputInset
+
+Use `SelectInputInset` to create a floating label input field, but unlike `TextInputInset` they always show the `label` in the floated state. It is a controlled component, which means that you need to provide a value and an `onChange` handler to update the value.
+
+<Canvas withSource="open" of={Stories.Default} />
+
+## Props
+
+<ArgTypes of={SelectInputInset} />
+
+### Required
+
+Use the `isRequired` prop to display an `*` after the label and set the `required` and `aria-required` on the underlying input element. You can also use the `requiredIndicator` prop to customize the indicator that appears next to the label.
+
+<Canvas of={Stories.Required} />
+
+### Help Text
+
+Use `helpText` to provide additional information about the input field.
+
+<Canvas of={Stories.HelpText} />
+
+### Validation Error
+
+Use the `error` prop to mark the input as invalid. `error` accepts a `boolean`, `string`, or `node`.
+
+<Canvas of={Stories.ValidationError} />
+
+### Disabled
+
+Add `isDisabled`to give it a grayed out appearance, remove pointer events, and prevent focusing.
+
+<Canvas of={Stories.Disabled} />
+
+### Clearable
+
+Use the `onClear` prop to display a clear icon (x) when the input has a value. `onClear` will fire
+a callback function when the clear icon is clicked, which can then be handled to clear the value.
+
+<Canvas of={Stories.Clearable} />
+
+### Sizes
+
+Two sizes, `md` and `lg` are available, with `md` being the default.
+
+<Canvas of={Stories.Sizes} />
+
+## Component Design Tokens
+
+This component shares component design tokens with all form controls. For a complete list of tokens, see the [Theming Form Controls documentation](/docs/theming-form-controls--custom-theme-form).