uikit-react-public 0.11.24 → 0.17.4

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

@@ -0,0 +1,15 @@
+import { StoryObj } from '@storybook/react';
+import { default as Main } from './Main';
+declare const meta: {
+    title: string;
+    component: ({ layout, testId, className, children, ...props }: import('./Main').MainProps) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof Main>;
+export declare const Default: Story;
+export declare const WithLayout: Story;
+export declare const WithChildren: Story;

package/dist/components/Main/__tests__/Main.test.d.ts

@@ -0,0 +1 @@
+export {};

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

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

package/dist/components/Menu/MenuContent.d.ts

@@ -1,6 +1,6 @@
 import { default as React, HTMLAttributes } from 'react';
 export declare const NAME = "ucl-uikit-menu__content";
-export interface MenuContentProps extends HTMLAttributes<HTMLDivElement> {
+export interface MenuContentProps extends HTMLAttributes<HTMLUListElement> {
     title?: string;
     testId?: string;
     position?: 'left' | 'right';

package/dist/components/Menu/MenuItem.d.ts

@@ -3,6 +3,8 @@ export declare const NAME = "ucl-uikit-menu__item";
 export interface MenuItemProps extends LiHTMLAttributes<HTMLLIElement> {
     testId?: string;
     icon?: React.ReactNode;
+    secondary?: boolean;
+    externalLink?: boolean;
 }
 declare const _default: React.NamedExoticComponent<MenuItemProps>;
 export default _default;

package/dist/components/Menu/MenuSection.d.ts

@@ -1,6 +1,6 @@
 import { default as React, HTMLAttributes } from 'react';
 export declare const NAME = "ucl-uikit-menu__section";
-export interface MenuSectionProps extends HTMLAttributes<HTMLElement> {
+export interface MenuSectionProps extends HTMLAttributes<HTMLLIElement> {
     testId?: string;
 }
 declare const MenuSection: React.FC<MenuSectionProps>;

package/dist/components/NativeDatepicker/NativeDatepicker.d.ts

@@ -0,0 +1,3 @@
+import { NativeDatepickerProps } from './NativeDatepicker.types';
+declare const NativeDatepicker: ({ value, onValueChange, minDate, maxDate, className, disabled, testId, ref, ...props }: NativeDatepickerProps) => import("react/jsx-runtime").JSX.Element;
+export default NativeDatepicker;

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

@@ -0,0 +1,36 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ value, onValueChange, minDate, maxDate, className, disabled, testId, ref, ...props }: import('./NativeDatepicker.types').NativeDatepickerProps) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    argTypes: {
+        value: {
+            control: {
+                type: "date";
+            };
+        };
+        minDate: {
+            control: {
+                type: "date";
+            };
+        };
+        maxDate: {
+            control: {
+                type: "date";
+            };
+        };
+        disabled: {
+            control: {
+                type: "boolean";
+            };
+        };
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Disabled: Story;
+export declare const WithMinMaxDates: Story;

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

@@ -0,0 +1,10 @@
+import { InputHTMLAttributes, RefObject } from 'react';
+export type DatepickerValue = Date | null;
+export interface NativeDatepickerProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'min' | 'max'> {
+    value?: DatepickerValue;
+    onValueChange?: (value: DatepickerValue, event?: React.SyntheticEvent) => void;
+    minDate?: string | null;
+    maxDate?: string | null;
+    testId?: string;
+    ref?: RefObject<HTMLInputElement>;
+}

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

@@ -0,0 +1,2 @@
+export { default } from './NativeDatepicker';
+export type { NativeDatepickerProps } from './NativeDatepicker.types';

package/dist/components/{Datepicker → NativeDatepicker}/utils/dateToLocaleISOString/dateToLocaleISOString.d.ts

@@ -1,7 +1,7 @@
 /**
  * Converts a Date object to a `YYYY-MM-DD` string based on the user's local timezone.
  *
- * Used for passing dates to <NativeDatepicker> in `Datepicker.tsx`
+ * Used for passing dates to <NativeDatepicker>
  *
  * This function uses the Swedish (`sv-SE`) locale with `toLocaleDateString`
  * as it conveniently defaults to the ISO 8601 `YYYY-MM-DD` format, while respecting

package/dist/components/NativeDatepicker/utils/dateToLocaleISOString/dateToLocaleISOString.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/NativeDatepicker/utils/index.d.ts

@@ -0,0 +1 @@
+export { default as dateToLocaleISOString } from './dateToLocaleISOString/dateToLocaleISOString';

package/dist/components/Search/Search.d.ts

@@ -0,0 +1,16 @@
+import { HTMLAttributes } from 'react';
+import { InputProps, IconButtonProps } from '../..';
+import { MarginProps } from '../common/marginsStyle';
+export interface SearchBaseProps extends HTMLAttributes<HTMLDivElement> {
+    onSearch?: (searchTerms: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    inputProps?: InputProps;
+    clearButtonProps?: IconButtonProps;
+    submitButtonProps?: IconButtonProps;
+    testId?: string;
+}
+export type SearchProps = SearchBaseProps & MarginProps;
+export declare const NAME = "ucl-uikit-search";
+declare const Search: ({ placeholder, testId, onSearch, disabled, m, mv, mh, mt, mb, ml, mr, noMargins, inputProps, clearButtonProps, submitButtonProps, className, ...props }: SearchProps) => import("react/jsx-runtime").JSX.Element;
+export default Search;

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

@@ -0,0 +1,34 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ placeholder, testId, onSearch, disabled, m, mv, mh, mt, mb, ml, mr, noMargins, inputProps, clearButtonProps, submitButtonProps, className, ...props }: import('./Search').SearchProps) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    argTypes: {
+        placeholder: {
+            control: {
+                type: "text";
+            };
+        };
+        disabled: {
+            control: {
+                type: "boolean";
+            };
+        };
+        testId: {
+            control: {
+                type: "text";
+            };
+        };
+        onSearch: {
+            action: string;
+        };
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Disabled: Story;
+export declare const WithPlaceholder: Story;

package/dist/components/Search/__tests__/Search.test.d.ts

@@ -0,0 +1 @@
+export {};

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

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

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

@@ -1,3 +1,3 @@
 import { SelectProps } from './Select.types';
-declare const Select: (props: SelectProps) => import("react/jsx-runtime").JSX.Element;
+declare const Select: <T extends string | number = string>(props: SelectProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default Select;

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

@@ -1,57 +1,205 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: (props: import('./Select.types').SelectProps) => import("react/jsx-runtime").JSX.Element;
+    component: <T extends string | number = string>(props: import('./Select.types').SelectProps<T>) => import("react/jsx-runtime").JSX.Element;
     argTypes: {
+        selectionBehaviour: {
+            description: string;
+            control: {
+                type: "radio";
+            };
+            options: string[];
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        options: {
+            description: string;
+            control: {
+                type: "object";
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
         value: {
+            description: string;
             control: {
                 type: "text";
             };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        onValueChange: {
+            description: string;
+            control: false;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
         };
         native: {
+            description: string;
             control: {
                 type: "boolean";
             };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        nativeHtmlAttributes: {
+            description: string;
+            control: false;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
         };
         disabled: {
+            description: string;
             control: {
                 type: "boolean";
             };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
         };
         placeholder: {
+            description: string;
             control: {
                 type: "text";
             };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
         };
-        testId: {
+        filterable: {
+            description: string;
+            control: {
+                type: "boolean";
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        filterInputProps: {
+            description: string;
+            control: {
+                type: "object";
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        id: {
+            description: string;
             control: {
                 type: "text";
             };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        title: {
+            description: string;
+            control: {
+                type: "text";
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        lineBreak: {
+            description: string;
+            control: {
+                type: "boolean";
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
         };
-        width: {
+        panelClassName: {
+            description: string;
             control: {
-                type: "range";
-                min: number;
-                max: number;
-                step: number;
+                type: "text";
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        className: {
+            description: string;
+            control: {
+                type: "text";
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        testId: {
+            description: string;
+            control: {
+                type: "text";
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
             };
         };
     };
     args: {
+        selectionBehaviour: "focus";
         value: undefined;
-        onChange: () => void;
         options: {
             label: string;
             value: string;
         }[];
     };
+    parameters: {
+        docs: {
+            story: {
+                inline: boolean;
+            };
+        };
+    };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: 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;
+export declare const filterable: Story;
+export declare const SelectionBehaviourCommit: Story;

package/dist/components/Select/Select.types.d.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,22 +12,34 @@ 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
+ * Additional props forwarded to the filter input when `filterable` is true
+ */
+export type FilterInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'disabled' | 'ref' | 'role' | 'aria-autocomplete' | 'aria-label'>;
+/**
+ * Public props for <Select>, used by both custom and native render paths.
  */
-interface BaseSelectProps {
+export interface SelectProps<T = string | number> extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'> {
+    /**
+     * Controls keyboard selection behaviour in the custom select variant.
+     * - `focus` (default): arrow keys move focus and commit value immediately.
+     * - `commit`: arrow keys only move focus; Enter or click commits value.
+     */
+    selectionBehaviour?: 'focus' | 'commit';
     /**
      * 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
@@ -48,35 +60,57 @@ interface BaseSelectProps {
      * Native flag determines which implementation to use
      */
     native?: boolean;
-}
-/**
- * Internal props for the custom implementation, with <div> as root element
- * onChange already exists on <div>. We override it.
- */
-export type CustomSelectProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> & BaseSelectProps & {
-    native?: false;
-    value?: string | number;
+    /**
+     * Adds a text input to filter options in the custom variant; ignored for native
+     */
+    filterable?: boolean;
+    /**
+     * Extra props to apply to the filter input when `filterable` is true
+     */
+    filterInputProps?: FilterInputProps;
+    /**
+     * Extra attributes forwarded to the native <select> when `native` is true
+     */
+    nativeHtmlAttributes?: React.SelectHTMLAttributes<HTMLSelectElement>;
+    /**
+     * Current value (controlled)
+     */
+    value?: T;
+    /**
+     * Disable interaction
+     */
     disabled?: boolean;
-    onValueChange?: (value: string, ev: React.UIEvent) => void;
-    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 type NativeSelectProps = React.SelectHTMLAttributes<HTMLSelectElement> & BaseSelectProps & {
-    native: true;
-    ref?: React.RefObject<HTMLSelectElement | null>;
-};
-export type SelectProps = NativeSelectProps | CustomSelectProps;
+    /**
+     * Allow long option labels to wrap instead of truncating
+     */
+    lineBreak?: boolean;
+    /**
+     * Custom className for the root element
+     */
+    className?: string;
+    /**
+     * Custom className for the options panel
+     */
+    panelClassName?: string;
+    /**
+     * Change handler for the custom variant
+     */
+    onValueChange?: (value: T, ev: React.UIEvent) => void;
+    /**
+     * Ref forwarded to the rendered element
+     * (div for custom, select for native)
+     */
+    ref?: React.Ref<HTMLDivElement | 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;
+export interface CustomOptionProps<T> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+    value: T;
+    optionIndex?: number;
     testId?: string;
     isSelected?: boolean;
-    onSelect: (event: React.MouseEvent, value: string) => void;
+    onSelect: (event: React.MouseEvent, value: T, optionIndex?: number) => void;
+    lineBreak?: boolean;
 }
-export {};

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

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

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

@@ -1,4 +1,4 @@
-import { CustomSelectProps } from '../Select.types';
-export declare const DEFAULT_WIDTH_PX = 200;
-declare const CustomSelect: ({ value, options, onValueChange, disabled, placeholder, width, testId, className, ref, ...props }: CustomSelectProps) => import("react/jsx-runtime").JSX.Element;
+import { SelectProps } from '../Select.types';
+type CustomSelectProps<T> = Omit<SelectProps<T>, 'native' | 'nativeHtmlAttributes'>;
+declare const CustomSelect: <T extends string | number>({ selectionBehaviour, value, options, onValueChange, disabled, placeholder, lineBreak, filterInputProps, width, testId, className, panelClassName, filterable, ref, ...props }: CustomSelectProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default CustomSelect;

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

@@ -0,0 +1,14 @@
+import { FilterInputProps } from '../Select.types';
+type FilterInputComponentProps = {
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    inputRef?: React.RefObject<HTMLInputElement | null>;
+    className?: string;
+    ariaControls?: string;
+    ariaExpanded?: boolean;
+    ariaActiveDescendant?: string;
+} & FilterInputProps;
+declare const FilterInput: ({ value, onChange, placeholder, disabled, inputRef, className, ariaControls, ariaExpanded, ariaActiveDescendant, ...rest }: FilterInputComponentProps) => import("react/jsx-runtime").JSX.Element;
+export default FilterInput;

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

@@ -1,3 +1,7 @@
-import { NativeSelectProps } from '../Select.types';
+import { SelectProps } from '../Select.types';
+type NativeSelectProps = Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'value' | 'defaultValue'> & Omit<SelectProps, 'native' | 'filterable' | 'nativeHtmlAttributes' | 'onValueChange' | 'ref'> & {
+    value?: string | number;
+    ref?: React.Ref<HTMLSelectElement>;
+};
 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

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

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

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

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

@@ -3,3 +3,4 @@ export { default as NativeSelect } from './NativeSelect';
 export { default as CustomOption } from './CustomOption';
 export { default as Panel } from './Panel';
 export { default as VisibleField } from './VisibleField';
+export { default as FilterInput } from './FilterInput';

package/dist/components/StandaloneLink/StandaloneLink.d.ts

@@ -0,0 +1,12 @@
+import { ReactElement } from 'react';
+import { IconProps } from '../Icon';
+import { BaseLinkProps } from '../Link/BaseLink';
+import { MarginProps } from '../common/marginsStyle';
+export interface StandaloneLinkBaseProps extends BaseLinkProps {
+    variant?: 'primary' | 'secondary' | 'tertiary';
+    icon?: ReactElement<IconProps>;
+    iconPosition?: 'left' | 'right';
+}
+export type StandaloneLinkProps = StandaloneLinkBaseProps & MarginProps;
+declare const StandaloneLink: import('react').ForwardRefExoticComponent<StandaloneLinkBaseProps & MarginProps & import('react').RefAttributes<HTMLAnchorElement>>;
+export default StandaloneLink;

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

@@ -0,0 +1,13 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./StandaloneLink').StandaloneLinkBaseProps & import('../common/marginsStyle').MarginProps & import('react').RefAttributes<HTMLAnchorElement>>;
+    args: {
+        children: string;
+        href: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const NewTab: Story;

package/dist/components/StandaloneLink/__tests__/StandaloneLink.test.d.ts

@@ -0,0 +1 @@
+export {};

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

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