@evolve.ui/core-components 1.0.0 → 1.1.0

package/src/SegmentedControl/SegmentedControlGroup.tsx

@@ -0,0 +1,94 @@
+import { cn } from '@evolve.ui/theme-system';
+
+import { IconComponent } from '../Icons/IconBase';
+import { SegmentedControl } from './SegmentedControl';
+
+/**
+ * Represents an individual control item within the SegmentedControlGroup.
+ */
+export type ControlItem<ControlItemOptionId extends string> = {
+    /** Whether the control is disabled */
+    disabled?: boolean;
+    /** Icon component to be displayed on the left side of the control */
+    iconLeft?: IconComponent;
+    /** Icon component to be displayed on the right side of the control */
+    iconRight?: IconComponent;
+    /** Unique identifier for the control */
+    id: ControlItemOptionId;
+    /** Text label for the control */
+    label?: string;
+};
+
+/**
+ * Props for the SegmentedControlGroup component.
+ */
+export type SegmentedControlGroupProps<ControlItemOptionId extends string> = {
+    /** Additional CSS class name for the group */
+    className?: string;
+    /** Array of ControlItem objects representing the individual controls */
+    controls: ControlItem<ControlItemOptionId>[];
+    /** Name of the group, defaults to 'SegmentedControl'
+     * use when multiple groups are present on the page that may share control ids
+     */
+    name?: string;
+    /** Callback function triggered when a control is selected */
+    onChange: (id: ControlItemOptionId) => void;
+    /** ID of the currently selected control */
+    selectedId: ControlItemOptionId;
+};
+
+export const SegmentedControlGroup = <ControlItemOptionId extends string>({
+    className,
+    controls,
+    name = 'SegmentedControl',
+    onChange,
+    selectedId,
+}: SegmentedControlGroupProps<ControlItemOptionId>) => {
+    const groupClasses = cn(
+        'inline-flex h-[34px] gap-1 overflow-hidden rounded-md border border-border-secondary bg-background-subdued p-1',
+        className
+    );
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>, currentIndex: number) => {
+        if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+            event.preventDefault();
+            const direction = event.key === 'ArrowLeft' ? -1 : 1;
+            let newIndex = currentIndex;
+            do {
+                newIndex = (newIndex + direction + controls.length) % controls.length;
+            } while (controls[newIndex].disabled && newIndex !== currentIndex);
+            // Find the DOM element of the new selected control
+            const newSelectedControl = document.getElementById(`${name}-${controls[newIndex].id}`);
+            if (newSelectedControl) {
+                // Set focus to the new selected control
+                newSelectedControl.focus();
+            }
+        }
+    };
+
+    return (
+        <div
+            aria-label="Segmented Control Group"
+            className={groupClasses}
+            data-hui-id="SegmentedControlGroup"
+            role="group"
+        >
+            {controls.map((control, index) => (
+                <SegmentedControl
+                    aria-checked={control.id === selectedId}
+                    disabled={control.disabled}
+                    iconLeft={control.iconLeft}
+                    iconRight={control.iconRight}
+                    id={`${name}-${control.id}`}
+                    key={control.id}
+                    onClick={() => onChange(control.id)}
+                    onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => handleKeyDown(event, index)}
+                    selected={control.id === selectedId}
+                >
+                    {control.label}
+                </SegmentedControl>
+            ))}
+        </div>
+    );
+};
+
+SegmentedControlGroup.displayName = 'SegmentedControlGroup';

package/src/SegmentedControl/index.ts

@@ -0,0 +1,4 @@
+export { SegmentedControl } from './SegmentedControl';
+export { SegmentedControlGroup } from './SegmentedControlGroup';
+export type { ControlItem, SegmentedControlGroupProps } from './SegmentedControlGroup';
+export type { SegmentedControlProps } from './SegmentedControl';

package/src/Select/Select.tsx

@@ -0,0 +1,154 @@
+import type ReactSelectAsync from 'react-select/async';
+import type ReactSelectAsyncCreatable from 'react-select/async-creatable';
+import type ReactSelectCreatable from 'react-select/creatable';
+
+import {
+    type ForwardRefExoticComponent,
+    type RefAttributes,
+    ComponentProps,
+    forwardRef,
+    useCallback,
+    useId,
+} from 'react';
+import ReactSelect, { ActionMeta, components as selectBuiltins } from 'react-select';
+
+import { extractFormLabelProps, FormLabel, FormLabelProps } from '../FormLabel/FormLabel';
+import {
+    ClearIndicator,
+    DropdownIndicator,
+    Input,
+    InsideLabelControl,
+    Menu,
+    MenuList,
+    MenuPortal,
+    NoOptionsMessage,
+    Option,
+    Placeholder,
+    SelectContainer,
+    SingleValue,
+    ValueContainer,
+} from './selectComponents';
+
+// Props are unwieldy, so, put them at the bottom.
+
+/**
+ * A customized + styled react-select
+ *
+ * @see https://react-select.com
+ */
+export const Select = forwardRef(
+    <SelectType extends AllSelects>(unfilteredProps: Props<SelectType>, ref: ComponentProps<SelectType>['ref']) => {
+        const defaultInstanceId = useId();
+        const [
+            formLabelProps,
+            {
+                components,
+                disabled,
+                isInsideLabel,
+                menuPlacement = 'auto',
+                menuPosition,
+                name,
+                onChange: propOnChange,
+                selectType: SelectComponent = ReactSelect,
+                small = false,
+                usePortalMenu,
+                ...selectProps
+            },
+        ] = extractFormLabelProps(unfilteredProps);
+
+        const onChange = useCallback<SelectOnChange>(
+            (event, action) => {
+                if (event) {
+                    event.name = name;
+                    propOnChange?.(event, action);
+                }
+            },
+            [name, propOnChange]
+        );
+
+        return (
+            <FormLabel
+                {...formLabelProps}
+                labelText={isInsideLabel ? undefined : formLabelProps.labelText}
+            >
+                <SelectComponent
+                    data-hui-id="Select"
+                    instanceId={defaultInstanceId}
+                    placeholder="Select"
+                    {...selectProps}
+                    components={{
+                        ClearIndicator,
+                        Control: InsideLabelControl,
+                        DropdownIndicator,
+                        IndicatorSeparator: null,
+                        Input,
+                        Menu,
+                        MenuList,
+                        MenuPortal,
+                        NoOptionsMessage,
+                        Option,
+                        Placeholder,
+                        SelectContainer,
+                        SingleValue,
+                        ValueContainer,
+                        ...components,
+                    }}
+                    hasError={formLabelProps.hasError}
+                    isDisabled={disabled}
+                    isInsideLabel={isInsideLabel}
+                    labelText={formLabelProps.labelText}
+                    menuPlacement={menuPlacement}
+                    menuPosition={menuPosition ?? (usePortalMenu ? 'fixed' : 'absolute')}
+                    menuPortalTarget={
+                        usePortalMenu && typeof document !== 'undefined'
+                            ? document.getElementById('hui-modal-target')
+                            : undefined
+                    }
+                    name={name}
+                    // This typing should be correct, but react-select is a bit of a mess
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    onChange={onChange as any}
+                    ref={ref}
+                    small={small}
+                />
+            </FormLabel>
+        );
+    }
+) as ForwardRefExoticComponent<Props<typeof ReactSelect> & RefAttributes<unknown>>;
+
+Select.displayName = 'Select';
+
+/**
+ * Re-export react-select built-ins
+ * @see https://react-select.com/components
+ */
+export { selectBuiltins as reactSelectBuiltins };
+
+type ExtendedProps = {
+    /** Adds autocomplete attribute to the dom element, used for accessibility and password managers. */
+    autoComplete?: string;
+    /** If true, the label will be inside the select. */
+    isInsideLabel?: boolean;
+    /** Set the size of the select to small (`34px` height, small=false is `42px`) */
+    small?: boolean;
+    /** Position the select dropdown menu absolutely, relative to <body />. Useful in places like modals where the menu may get cut off */
+    usePortalMenu?: boolean;
+} & FormLabelProps;
+
+type AllSelects =
+    | typeof ReactSelect
+    | typeof ReactSelectAsync
+    | typeof ReactSelectAsyncCreatable
+    | typeof ReactSelectCreatable;
+
+type OverridenOnChangeProps<SelectType extends AllSelects> = Omit<ComponentProps<SelectType>, 'onChange'> & {
+    onChange?: SelectOnChange;
+};
+
+type Props<SelectType extends AllSelects> = { selectType?: SelectType } & ExtendedProps &
+    OverridenOnChangeProps<SelectType>;
+
+// Hammer-parity public type — `value: any` is the published contract consumers rely on.
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type OptionType = { label: string; name?: string; value: any };
+export type SelectOnChange = (event?: OptionType, action?: ActionMeta<OptionType>) => void;

package/src/Select/SelectAsync.tsx

@@ -0,0 +1,13 @@
+import { ComponentProps } from 'react';
+import ReactSelectAsync, { AsyncProps } from 'react-select/async';
+
+import { OptionType, Select, SelectOnChange } from './Select';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- hammer-parity react-select generics
+export const SelectAsync = ({ ...props }: ComponentProps<typeof Select> & AsyncProps<OptionType, any, any>) => (
+    <Select
+        {...props}
+        onChange={props.onChange as SelectOnChange}
+        selectType={ReactSelectAsync}
+    />
+);

package/src/Select/SelectAsyncCreatable.tsx

@@ -0,0 +1,14 @@
+import { ComponentProps } from 'react';
+import ReactSelectAsyncCreatable, { AsyncCreatableProps } from 'react-select/async-creatable';
+
+import { OptionType, Select } from './Select';
+
+export const SelectAsyncCreatable = ({
+    ...props
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- hammer-parity react-select generics
+}: ComponentProps<typeof Select> & AsyncCreatableProps<OptionType, any, any>) => (
+    <Select
+        {...props}
+        selectType={ReactSelectAsyncCreatable}
+    />
+);

package/src/Select/SelectCreatable.tsx

@@ -0,0 +1,12 @@
+import { ComponentProps } from 'react';
+import ReactSelectCreatable, { CreatableProps } from 'react-select/creatable';
+
+import { OptionType, Select } from './Select';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- hammer-parity react-select generics
+export const SelectCreatable = ({ ...props }: ComponentProps<typeof Select> & CreatableProps<OptionType, any, any>) => (
+    <Select
+        {...props}
+        selectType={ReactSelectCreatable}
+    />
+);

package/src/Select/reexportedComponents.tsx

@@ -0,0 +1,5 @@
+/**
+ * Re-export react-select built-ins
+ * @see https://react-select.com/components
+ */
+export { components } from 'react-select';

package/src/Select/selectComponents.tsx

@@ -0,0 +1,306 @@
+import { cn } from '@evolve.ui/theme-system';
+import { ComponentProps, ReactNode } from 'react';
+import { components as selectBuiltins } from 'react-select';
+
+import { CaretDown, Check } from '../Icons';
+import { BodyPrimary } from '../Typography/Text/Text';
+
+export const InsideLabelControl = ({
+    children,
+    ...props
+}: ComponentProps<typeof selectBuiltins.Control> & {
+    selectProps: {
+        hasError?: boolean;
+        isInsideLabel?: boolean;
+        labelText?: ReactNode;
+        small?: boolean;
+    };
+}) => {
+    const { hasError, isInsideLabel, labelText, small } = props.selectProps;
+    return (
+        <selectBuiltins.Control
+            {...props}
+            className={cn(
+                // GENERAL
+                '!m-0 !min-h-[42px] !flex-nowrap !rounded-input !border !border-solid !border-border-secondary !bg-background-primary !p-0 ![box-shadow:none]',
+                // HOVER
+                {
+                    'hover:!border-border-hover': !props.menuIsOpen,
+                    'hover:!border-border-selected': props.menuIsOpen,
+                },
+                {
+                    '!border-border-critical': props.selectProps['aria-invalid'] === 'true',
+                    '!border-border-selected': props.menuIsOpen || props.isFocused,
+                    '!min-h-[34px]': small,
+                },
+                // ERROR
+                {
+                    '!border-border-critical': hasError && !props.menuIsOpen && !props.isDisabled,
+                }
+            )}
+        >
+            {isInsideLabel && Boolean(labelText) && (
+                <BodyPrimary
+                    className="ml-xs mr--2xs"
+                    color="secondary"
+                >
+                    {labelText}
+                </BodyPrimary>
+            )}
+            {children}
+        </selectBuiltins.Control>
+    );
+};
+
+/**
+ * Add custom icon for dropdown indicator
+ * @see https://react-select.com/components#components
+ */
+export const DropdownIndicator = (props: ComponentProps<typeof selectBuiltins.DropdownIndicator>) => {
+    return (
+        <selectBuiltins.DropdownIndicator
+            {...props}
+            className="flex h-full w-full items-center justify-center !py-0 px-xs"
+        >
+            <CaretDown
+                aria-label={props.selectProps.menuIsOpen ? 'Caret Up' : 'Caret Down'}
+                className={cn({
+                    'rotate-180': props.selectProps.menuIsOpen,
+                })}
+                color={props.selectProps.isDisabled ? 'disabled' : 'primary'}
+                size="sm"
+            />
+        </selectBuiltins.DropdownIndicator>
+    );
+};
+
+/**
+ * Add data-testid prop to the select component container
+ * @see https://react-select.com/components#components
+ */
+export const SelectContainer = ({ className, ...props }: ComponentProps<typeof selectBuiltins.SelectContainer>) => (
+    <selectBuiltins.SelectContainer
+        {...props}
+        className={cn(className, 'hui-text-body-primary !rounded-input text-text-primary ![box-shadow:none]')}
+        innerProps={{
+            ...props.innerProps,
+            // @ts-expect-error all attributes are passed and we have the custom "data-testid", so this is ok.
+            ...(Boolean(props.selectProps['data-testid']) && {
+                // @ts-expect-error all attributes are passed and we have the custom "data-testid", so this is ok.
+                'data-testid': props.selectProps['data-testid'],
+            }),
+        }}
+    />
+);
+
+export const NoOptionsMessage = (props: ComponentProps<typeof selectBuiltins.NoOptionsMessage>) => (
+    <selectBuiltins.NoOptionsMessage
+        {...props}
+        className="p-0"
+    >
+        <BodyPrimary
+            className="normal-case"
+            color="secondary"
+        >
+            No results
+        </BodyPrimary>
+    </selectBuiltins.NoOptionsMessage>
+);
+
+export const Input = (props: ComponentProps<typeof selectBuiltins.Input>) => (
+    <selectBuiltins.Input
+        {...props}
+        aria-activedescendant={props['aria-activedescendant'] || undefined}
+        // @ts-expect-error prop type does exist on parent, just not here.
+        autoComplete={props.selectProps.autoComplete}
+        className="!m-0 !p-0"
+    />
+);
+
+export const Option = ({
+    children,
+    isDisabled,
+    isFocused,
+    isSelected,
+    ...rest
+}: ComponentProps<typeof selectBuiltins.Option>) => {
+    const isSelectedAndDisabled = isSelected && isDisabled;
+
+    return (
+        <selectBuiltins.Option
+            {...rest}
+            className={cn(
+                // BASE
+                'hui-text-body-primary !px-[8px] !py-[4px] text-[16px] text-text-primary',
+                // HOVER
+                'hover:cursor-pointer hover:bg-background-hover',
+                // SELECTED
+                {
+                    '!bg-background-hover': !isDisabled && isFocused,
+                    '!bg-background-inverse !text-text-inverse hover:!bg-background-inverse': !isDisabled && isSelected,
+                    '!bg-background-primary': isDisabled && isFocused && !isSelected,
+                    // Selected AND disabled - show as selected but with disabled text color
+                    '!cursor-not-allowed !bg-background-inverse !text-text-disabled hover:!bg-background-inverse':
+                        isSelectedAndDisabled,
+                    '!cursor-not-allowed !text-text-disabled hover:!bg-background-primary focus:!bg-background-primary':
+                        isDisabled && !isSelected,
+                }
+            )}
+            innerProps={{
+                ...rest.innerProps,
+                // @ts-expect-error all attributes are passed and we have the custom "data-testid", so this is ok.
+                ...(Boolean(rest.selectProps['data-testid']) && {
+                    // @ts-expect-error all attributes are passed and we have the custom "data-testid", so this is ok.
+                    'data-testid': rest.selectProps['data-testid'],
+                }),
+            }}
+            isDisabled={Boolean(isDisabled)}
+            isFocused={isFocused}
+            isSelected={isSelected}
+        >
+            <div
+                // adds data-testid attribute to dropdown option
+                {...(rest.data && typeof rest.data === 'object' && 'data-testid' in rest.data
+                    ? { 'data-testid': rest.data['data-testid'] }
+                    : {})}
+                className={cn('flex h-full w-full items-center', {
+                    'bg-background-inverse text-text-disabled': isSelectedAndDisabled,
+                    'bg-background-inverse text-text-inverse': isSelected && !isDisabled,
+                    'pl-sm': !isSelected,
+                })}
+            >
+                {isSelected && (
+                    <Check
+                        className="mr-[2px]"
+                        color={isDisabled ? 'disabled' : 'inverse'}
+                        size="xs"
+                    />
+                )}
+                {children}
+            </div>
+        </selectBuiltins.Option>
+    );
+};
+
+export const ClearIndicator = (props: ComponentProps<typeof selectBuiltins.ClearIndicator>) => (
+    <selectBuiltins.ClearIndicator
+        {...props}
+        className="!py-0"
+    >
+        {props.children}
+    </selectBuiltins.ClearIndicator>
+);
+
+/**
+ * Reads the scroll offset that `PreventModalScroll` parks on `document.body.style.top`.
+ *
+ * When a modal is open, `PreventModalScroll` sets `body.style.top = "-${scrollPosition}px"`
+ * and `body.style.position = "fixed"`. React-select uses `window.pageYOffset` for the
+ * portal offset, but that returns 0 when the body is fixed, so we read the stored scroll
+ * position directly from `body.style.top` to compensate. Zoom-agnostic because it's a
+ * stored value, not a layout measurement.
+ */
+const getBodyScrollOffset = () => {
+    const bodyTop = typeof document !== 'undefined' ? document.body.style.top : '';
+    return bodyTop ? Math.abs(parseFloat(bodyTop)) : 0;
+};
+
+/**
+ * Adds the stored body-scroll offset to react-select's computed `top` style.
+ *
+ * react-select only sets `top` when placement === 'bottom'. When it flips to 'top'
+ * it sets `bottom` instead and leaves `top` undefined, so we must guard before adding
+ * the scroll offset — otherwise `Number(undefined)` NaN-stomps the style and breaks
+ * the flipped portal menu.
+ *
+ * @internal exported for unit testing only.
+ */
+export const applyBodyScrollOffsetToTop = <T extends Record<string, unknown>>(
+    baseStyles: T,
+    scrollOffset: number
+): T => ({
+    ...baseStyles,
+    ...(typeof baseStyles.top === 'number' ? { top: baseStyles.top + scrollOffset } : {}),
+});
+
+export const Menu = ({ getStyles, ...props }: ComponentProps<typeof selectBuiltins.Menu>) => {
+    if (props.selectProps.menuPortalTarget) {
+        const customGetStyles: typeof getStyles = (name, styleProps) =>
+            applyBodyScrollOffsetToTop(getStyles(name, styleProps), getBodyScrollOffset());
+
+        return (
+            <selectBuiltins.Menu
+                {...props}
+                getStyles={customGetStyles}
+                className={cn(
+                    props.className,
+                    '!z-[11111] !mt-2xs !rounded-input !border !border-border-secondary !bg-background-primary'
+                )}
+            >
+                {props.children}
+            </selectBuiltins.Menu>
+        );
+    }
+
+    return (
+        <selectBuiltins.Menu
+            {...props}
+            getStyles={getStyles}
+            className={cn(
+                props.className,
+                '!z-[11111] !mt-2xs !rounded-input !border !border-border-secondary !bg-background-primary'
+            )}
+        >
+            {props.children}
+        </selectBuiltins.Menu>
+    );
+};
+
+export const MenuList = (props: ComponentProps<typeof selectBuiltins.MenuList>) => (
+    <selectBuiltins.MenuList
+        {...props}
+        className="!px-0 !py-xs"
+    >
+        {props.children}
+    </selectBuiltins.MenuList>
+);
+
+export const MenuPortal = (props: ComponentProps<typeof selectBuiltins.MenuPortal>) => (
+    <selectBuiltins.MenuPortal
+        {...props}
+        className="!z-[11111]"
+    >
+        {props.children}
+    </selectBuiltins.MenuPortal>
+);
+
+export const Placeholder = (props: ComponentProps<typeof selectBuiltins.Placeholder>) => (
+    <selectBuiltins.Placeholder
+        {...props}
+        className="!hui-text-body-primary overflow-hidden text-nowrap"
+    >
+        {props.children}
+    </selectBuiltins.Placeholder>
+);
+
+export const SingleValue = ({ isDisabled, ...rest }: ComponentProps<typeof selectBuiltins.SingleValue>) => (
+    <selectBuiltins.SingleValue
+        {...rest}
+        className={cn('!hui-text-body-primary m-0', {
+            '!cursor-not-allowed !text-text-disabled': isDisabled,
+            '!text-text-primary': !isDisabled,
+        })}
+        isDisabled={isDisabled}
+    >
+        {rest.children}
+    </selectBuiltins.SingleValue>
+);
+
+export const ValueContainer = (props: ComponentProps<typeof selectBuiltins.ValueContainer>) => (
+    <selectBuiltins.ValueContainer
+        {...props}
+        className="!m-0 flex h-full items-center !py-0"
+    >
+        {props.children}
+    </selectBuiltins.ValueContainer>
+);

package/src/Skeleton/Skeleton.tsx

@@ -0,0 +1,13 @@
+import { ComponentProps } from 'react';
+import ContentLoader from 'react-content-loader';
+
+/**
+ * A reexported version of `react-content-loader`.
+ *
+ * This component is mostly reserved here for any future styling updates that might want to apply to _every_ skeleton.
+ *
+ * @see https://skeletonreact.com/
+ */
+export const Skeleton = (props: ComponentProps<typeof ContentLoader>) => {
+    return <ContentLoader {...props} />;
+};