uikit-react-public 0.11.13 → 0.11.16

package/dist/components/Button/Button.d.ts

@@ -1,4 +1,22 @@
-import { ButtonProps } from './Button.types';
+import { ReactElement, ElementType, ComponentPropsWithRef } from 'react';
 export declare const NAME = "ucl-uikit-button";
-declare const _default: import('react').MemoExoticComponent<({ as, variant, destructive, size, disabled, icon, iconPosition, tooltip, loading, fullWidth, testId, ref, children, className, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element>;
-export default _default;
+type PolymorphicRef<C extends ElementType> = ComponentPropsWithRef<C>['ref'];
+export interface ButtonBaseProps {
+    variant?: 'primary' | 'secondary' | 'tertiary';
+    destructive?: boolean;
+    size?: 'large' | 'default' | 'small';
+    disabled?: boolean;
+    icon?: ReactElement;
+    iconPosition?: 'left' | 'right';
+    tooltip?: string;
+    loading?: boolean;
+    fullWidth?: boolean;
+    testId?: string;
+}
+export type ButtonProps<C extends ElementType = 'button'> = {
+    as?: C;
+    ref?: PolymorphicRef<C>;
+} & ButtonBaseProps & Omit<ComponentPropsWithRef<C>, keyof ButtonBaseProps | 'as'>;
+declare const Button: <C extends ElementType = "button">({ as, variant, destructive, size, disabled, icon, iconPosition, tooltip, loading, fullWidth, testId, ref, children, className, ...props }: ButtonProps<C>) => import("react/jsx-runtime").JSX.Element;
+declare const MemoizedButton: typeof Button;
+export default MemoizedButton;

package/dist/components/Button/Button.stories.d.ts

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: import('react').MemoExoticComponent<({ as, variant, destructive, size, disabled, icon, iconPosition, tooltip, loading, fullWidth, testId, ref, children, className, ...props }: import('./Button.types').ButtonProps) => import("react/jsx-runtime").JSX.Element>;
+    component: <C extends import('react').ElementType = "button">({ as, variant, destructive, size, disabled, icon, iconPosition, tooltip, loading, fullWidth, testId, ref, children, className, ...props }: import('./Button').ButtonProps<C>) => import("react/jsx-runtime").JSX.Element;
     parameters: {
         layout: string;
     };

package/dist/components/Button/buttonPrimaryStyle.d.ts

@@ -1,4 +1,4 @@
 import { ThemeType } from '../../theme';
-import { ButtonProps } from './Button.types';
-declare const buttonPrimaryStyle: (theme: ThemeType, destructive: ButtonProps["destructive"], disabled: ButtonProps["disabled"], loading: ButtonProps["loading"]) => string;
+import { ButtonBaseProps } from './Button';
+declare const buttonPrimaryStyle: (theme: ThemeType, destructive: ButtonBaseProps["destructive"], disabled: ButtonBaseProps["disabled"], loading: ButtonBaseProps["loading"]) => string;
 export default buttonPrimaryStyle;

package/dist/components/Button/buttonSecondaryStyle.d.ts

@@ -1,4 +1,4 @@
 import { ThemeType } from '../../theme';
-import { ButtonProps } from './Button.types';
-declare const buttonSecondaryStyle: (theme: ThemeType, destructive: ButtonProps["destructive"], disabled: ButtonProps["disabled"], loading: ButtonProps["loading"]) => string;
+import { ButtonBaseProps } from './Button';
+declare const buttonSecondaryStyle: (theme: ThemeType, destructive: ButtonBaseProps["destructive"], disabled: ButtonBaseProps["disabled"], loading: ButtonBaseProps["loading"]) => string;
 export default buttonSecondaryStyle;

package/dist/components/Button/buttonTertiaryStyle.d.ts

@@ -1,4 +1,4 @@
 import { ThemeType } from '../../theme';
-import { ButtonProps } from './Button.types';
-declare const buttonTertiaryStyle: (theme: ThemeType, disabled: ButtonProps["disabled"], loading: ButtonProps["loading"]) => string;
+import { ButtonBaseProps } from './Button';
+declare const buttonTertiaryStyle: (theme: ThemeType, disabled: ButtonBaseProps["disabled"], loading: ButtonBaseProps["loading"]) => string;
 export default buttonTertiaryStyle;

package/dist/components/Button/index.d.ts

@@ -1,2 +1,2 @@
 export { default } from './Button';
-export type { ButtonProps } from './Button.types';
+export type { ButtonProps, ButtonBaseProps } from './Button';

package/dist/components/Select/Select.d.ts

@@ -1,8 +1,3 @@
-import { SelectHTMLAttributes } from 'react';
-export declare const NAME = "ucl-uikit-select";
-export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
-    testId?: string;
-}
-export type Ref = HTMLSelectElement;
-declare const _default: import('react').NamedExoticComponent<SelectProps & import('react').RefAttributes<HTMLSelectElement>>;
-export default _default;
+import { SelectProps } from './Select.types';
+declare const Select: (props: SelectProps) => import("react/jsx-runtime").JSX.Element;
+export default Select;

package/dist/components/Select/Select.stories.d.ts

@@ -1,9 +1,57 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: import('react').NamedExoticComponent<import('./Select').SelectProps & import('react').RefAttributes<HTMLSelectElement>>;
+    component: (props: import('./Select.types').SelectProps) => import("react/jsx-runtime").JSX.Element;
+    argTypes: {
+        value: {
+            control: {
+                type: "text";
+            };
+        };
+        native: {
+            control: {
+                type: "boolean";
+            };
+        };
+        disabled: {
+            control: {
+                type: "boolean";
+            };
+        };
+        placeholder: {
+            control: {
+                type: "text";
+            };
+        };
+        testId: {
+            control: {
+                type: "text";
+            };
+        };
+        width: {
+            control: {
+                type: "range";
+                min: number;
+                max: number;
+                step: number;
+            };
+        };
+    };
+    args: {
+        value: undefined;
+        onChange: () => void;
+        options: {
+            text: string;
+            value: string;
+        }[];
+    };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
-export declare const NoOptions: Story;
+export declare const Native: Story;
+export declare const OptionsWithIcons: Story;
+export declare const Disabled: Story;
+export declare const WithPlaceholder: Story;
+export declare const SingleLongOption: Story;
+export declare const ManyOptions: Story;

package/dist/components/Select/Select.types.d.ts

@@ -0,0 +1,122 @@
+/**
+ * Represents an 'option' in the <Select>
+ * Maps to a native <option> element in <NativeSelect>
+ * or a <CustomOption> in <CustomSelect>
+ */
+export type OptionData = {
+    /**
+     * Display text shown to the user
+     */
+    text: string;
+    /**
+     * 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;
+    /**
+     * Optional icon to be displayed to the left of the option text.
+     * Only used by <CustomOption>
+     * Takes in an actual <Icon> component
+     */
+    icon?: React.ReactNode;
+};
+/**
+ * Utility type we expose to developers
+ * We expect this to be used in typing event handlers
+ * This only applies to the top-level <Select> component
+ */
+export type SelectEvent = React.ChangeEvent<HTMLSelectElement> | React.MouseEvent | React.KeyboardEvent;
+/**
+ * Top level props that <Select> accepts when implemented
+ */
+interface BaseSelectProps {
+    /**
+     * An array of option data, to be rendered either natively or custom
+     */
+    options: OptionData[];
+    /**
+     * The currently selected value
+     * This determines which option is shown when the select is closed
+     */
+    value: string | undefined | null;
+    /**
+     * Generic onChange that splits into native and custom versions
+     * The original event is exposed, and the value always returns the value of the selected option
+     */
+    onChange: (event: SelectEvent, value: string) => void;
+    /**
+     * Prevents use, including focus events
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Placeholder text shown when no option is selected
+     * Displayed in visible field of custom implementation
+     * or as a disabled option in the native implementation
+     */
+    placeholder?: string;
+    /**
+     * Specify a specific width if the default (325px) is not suitable
+     */
+    width?: number;
+    /**
+     * Test ID for testing purposes
+     * This is passed to the root element of the component
+     * as `data-testid`
+     */
+    testId?: string;
+    /**
+     * Optional className for styling
+     * This is passed to the root element of the component
+     * for additional CSS styling via Emotion.
+     */
+    className?: string;
+    /**
+     * Native flag determines which implementation to use
+     */
+    native?: boolean;
+}
+export type SelectProps = BaseSelectProps & (({
+    native: true;
+    ref?: React.RefObject<HTMLSelectElement | null>;
+} & Omit<React.SelectHTMLAttributes<HTMLSelectElement>, keyof BaseSelectProps>) | ({
+    native?: false;
+    ref?: React.RefObject<HTMLDivElement | null>;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, keyof BaseSelectProps>));
+/**
+ * Internal props for the custom implementation, with <div> as root element
+ * onChange already exists on <div>. We override it.
+ */
+export interface CustomSelectProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    options: OptionData[];
+    value: string | undefined | null;
+    onChange: (event: React.MouseEvent | React.KeyboardEvent, value: string) => void;
+    disabled?: boolean;
+    placeholder?: string;
+    width?: number;
+    testId?: string;
+    className?: string;
+    ref?: React.RefObject<HTMLDivElement | null>;
+}
+/**
+ * Internal props for native implementation, with <select> as root element
+ * Default props like value and onChange are passed to the <select> element automatically
+ */
+export interface NativeSelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
+    options: OptionData[];
+    placeholder?: string;
+    width?: number;
+    testId?: string;
+    className?: string;
+    ref?: React.RefObject<HTMLSelectElement | null>;
+}
+/**
+ * Each option as displayed in the Panel of <CustomSelect>
+ * Roughly equivalent to a custom version of <option>
+ */
+export interface CustomOptionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+    value: string;
+    testId?: string;
+    isSelected?: boolean;
+    onSelect: (event: React.MouseEvent, value: string) => void;
+}
+export {};

package/dist/components/Select/index.d.ts

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

package/dist/components/Select/subcomponents/CustomOption.d.ts

@@ -0,0 +1,3 @@
+import { CustomOptionProps } from '../Select.types';
+declare const CustomOption: ({ value, isSelected, onSelect, testId, className, children, ...props }: CustomOptionProps) => import("react/jsx-runtime").JSX.Element;
+export default CustomOption;

package/dist/components/Select/subcomponents/CustomSelect.d.ts

@@ -0,0 +1,3 @@
+import { CustomSelectProps } from '../Select.types';
+declare const CustomSelect: ({ value, options, onChange, disabled, placeholder, width, testId, className, ref, ...props }: CustomSelectProps) => import("react/jsx-runtime").JSX.Element;
+export default CustomSelect;

package/dist/components/Select/subcomponents/NativeSelect.d.ts

@@ -0,0 +1,3 @@
+import { NativeSelectProps } from '../Select.types';
+declare const NativeSelect: ({ options, width, disabled, placeholder, testId, className, ...props }: NativeSelectProps) => import("react/jsx-runtime").JSX.Element;
+export default NativeSelect;

package/dist/components/Select/subcomponents/Panel.d.ts

@@ -0,0 +1,3 @@
+type PanelProps = React.ComponentPropsWithoutRef<'div'>;
+declare const Panel: (props: PanelProps) => import("react/jsx-runtime").JSX.Element;
+export default Panel;

package/dist/components/Select/subcomponents/VisibleField.d.ts

@@ -0,0 +1,9 @@
+import { OptionData } from '../Select.types';
+interface VisibleFieldProps {
+    isOpen?: boolean;
+    disabled?: boolean;
+    selectedOption: OptionData | null | undefined;
+    placeholder?: string;
+}
+declare const Field: ({ selectedOption, isOpen, placeholder, disabled, }: VisibleFieldProps) => import("react/jsx-runtime").JSX.Element;
+export default Field;

package/dist/components/Select/subcomponents/index.d.ts

@@ -0,0 +1,5 @@
+export { default as CustomSelect } from './CustomSelect';
+export { default as NativeSelect } from './NativeSelect';
+export { default as CustomOption } from './CustomOption';
+export { default as Panel } from './Panel';
+export { default as VisibleField } from './VisibleField';