uikit-react-public 0.14.21 → 0.17.4

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

@@ -3,45 +3,195 @@ declare const meta: {
     title: string;
     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;
+                };
+            };
+        };
+        panelClassName: {
+            description: string;
+            control: {
+                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>;
@@ -51,3 +201,5 @@ 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

@@ -23,9 +23,19 @@ export type OptionData<T> = {
     icon?: React.ReactNode;
 };
 /**
- * Top level props that <Select> accepts when implemented
+ * Additional props forwarded to the filter input when `filterable` is true
  */
-interface BaseSelectProps<T = string> {
+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.
+ */
+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
      */
@@ -50,38 +60,57 @@ interface BaseSelectProps<T = string> {
      * 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<T> = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> & BaseSelectProps<T> & {
-    native?: false;
+    /**
+     * 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;
+    /**
+     * 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?: 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<T> = NativeSelectProps | CustomSelectProps<T>;
+    /**
+     * 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<T> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
     value: T;
+    optionIndex?: number;
     testId?: string;
     isSelected?: boolean;
-    onSelect: (event: React.MouseEvent, value: T) => 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: <T extends string | number>({ value, isSelected, onSelect, lineBreak, testId, className, children, ...props }: CustomOptionProps<T>) => 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,3 +1,4 @@
-import { CustomSelectProps } from '../Select.types';
-declare const CustomSelect: <T extends string | number>({ value, options, onValueChange, disabled, placeholder, lineBreak, width, testId, className, panelClassName, ref, ...props }: CustomSelectProps<T>) => 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/VisibleField.d.ts

@@ -4,6 +4,8 @@ interface VisibleFieldProps<T> {
     disabled?: boolean;
     selectedOption: OptionData<T> | null | undefined;
     placeholder?: string;
+    filterable?: boolean;
+    children?: React.ReactNode;
 }
-declare const VisibleField: <T extends string | number>({ selectedOption, isOpen, placeholder, disabled, }: VisibleFieldProps<T>) => import("react/jsx-runtime").JSX.Element;
+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/WeekPicker/WeekPicker.d.ts

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

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

@@ -0,0 +1,41 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ value, onValueChange, minDate, maxDate, disabled, className, ...props }: import('./WeekPicker.types').WeekPickerProps) => 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";
+            };
+        };
+        showAcademicWeeks: {
+            control: {
+                type: "boolean";
+            };
+        };
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithAcademicWeeks: Story;
+export declare const Disabled: Story;

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

@@ -0,0 +1,16 @@
+import { HTMLAttributes, RefObject } from 'react';
+import { CalendarEvent, AcademicWeek } from '../Calendar';
+export type DatepickerValue = Date | null;
+export interface WeekPickerProps extends HTMLAttributes<HTMLDivElement> {
+    value?: DatepickerValue;
+    onValueChange?: (value: DatepickerValue, event?: React.SyntheticEvent) => void;
+    minDate?: string | null;
+    maxDate?: string | null;
+    disabled?: boolean;
+    events?: CalendarEvent[];
+    showAcademicWeeks?: boolean;
+    academicWeeks?: AcademicWeek[];
+    testId?: string;
+    ref?: RefObject<HTMLDivElement>;
+    inputRef?: RefObject<HTMLInputElement>;
+}

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

@@ -1 +1,2 @@
 export { default } from './WeekPicker';
+export type { WeekPickerProps, DatepickerValue } from './WeekPicker.types';

package/dist/components/WeekPicker/subcomponents/CustomDatepicker.d.ts

@@ -1,4 +1,4 @@
-import { DatepickerValue } from '../../Datepicker/Datepicker.types';
+import { DatepickerValue } from '../WeekPicker.types';
 import { CalendarEvent, AcademicWeek } from '../../Calendar';
 interface CustomDatepickerProps extends React.HTMLAttributes<HTMLDivElement> {
     value?: DatepickerValue;

package/dist/components/index.d.ts

@@ -67,6 +67,8 @@ export type { AlertProps } from './Alert';
 export { default as Tabs } from './Tabs';
 export type { TabsProps } from './Tabs';
 export type { TabProps } from './Tabs/Tab';
+export { default as Accordion } from './Accordion';
+export type { AccordionProps } from './Accordion';
 export { default as Field } from './Field';
 export type { FieldProps } from './Field';
 export { default as Pagination } from './Pagination';
@@ -79,6 +81,8 @@ export { default as Radio, LabelledRadio } from './Radio';
 export type { RadioProps, LabelledRadioProps } from './Radio';
 export { default as Datepicker } from './Datepicker';
 export type { DatepickerProps } from './Datepicker';
+export { default as NativeDatepicker } from './NativeDatepicker';
+export type { NativeDatepickerProps } from './NativeDatepicker';
 export { default as Calendar } from './Calendar';
 export type { CalendarProps } from './Calendar';
 export { default as WeekPicker } from './WeekPicker';
@@ -90,3 +94,7 @@ export { default as CookieNotice } from './CookieNotice';
 export type { CookieNoticeProps } from './CookieNotice';
 export { default as Search } from './Search';
 export type { SearchProps } from './Search';
+export { default as Layout } from './Layout';
+export type { LayoutProps } from './Layout';
+export { default as Main } from './Main';
+export type { MainProps } from './Main';

package/dist/hooks/useFocusTrap.d.ts

@@ -4,6 +4,7 @@ interface UseFocusTrapOptions {
     initialFocusRef?: React.RefObject<HTMLElement>;
     finalFocusRef?: React.RefObject<HTMLElement>;
     restoreFocus?: boolean;
+    skipFirstFocusable?: boolean;
 }
-export declare const useFocusTrap: ({ isActive, containerRef, initialFocusRef, finalFocusRef, restoreFocus, }: UseFocusTrapOptions) => void;
+export declare const useFocusTrap: ({ isActive, containerRef, initialFocusRef, finalFocusRef, restoreFocus, skipFirstFocusable, }: UseFocusTrapOptions) => void;
 export {};

package/dist/index.d.ts

@@ -2,3 +2,4 @@ export { cx, css } from '@emotion/css';
 export * from './components';
 export * from './theme';
 export * from './hooks';
+export * from './utils';