uikit-react-public 0.14.21 → 0.17.4

package/README.md

@@ -1,3 +1,5 @@
-# UIKit - React - Public
+# UIKit-React public
 
-React component library.
+```bash
+npm install uikit-react-public
+```

package/dist/components/Accordion/Accordion.Heading.d.ts

@@ -1,7 +1,7 @@
-import { default as React, HTMLAttributes, JSX } from 'react';
-export declare const NAME = "ucl-accordion__heading";
-interface AccordionHeadingProps extends HTMLAttributes<HTMLElement> {
-    as?: keyof JSX.IntrinsicElements;
+import { default as React, HTMLAttributes } from 'react';
+export declare const NAME = "ucl-uikit-accordion__heading";
+export interface AccordionHeadingProps extends HTMLAttributes<HTMLElement> {
+    as?: keyof HTMLElementTagNameMap;
     testId?: string;
 }
 declare const AccordionHeading: React.FC<AccordionHeadingProps>;

package/dist/components/Accordion/Accordion.Panel.d.ts

@@ -1,6 +1,6 @@
 import { default as React, HTMLAttributes } from 'react';
-export declare const NAME = "ucl-accordion__panel";
-interface AccordionPanelProps extends HTMLAttributes<HTMLDivElement> {
+export declare const NAME = "ucl-uikit-accordion__panel";
+export interface AccordionPanelProps extends HTMLAttributes<HTMLDivElement> {
     testId?: string;
 }
 declare const AccordionPanel: React.FC<AccordionPanelProps>;

package/dist/components/Accordion/Accordion.d.ts

@@ -1,7 +1,7 @@
 import { default as React, HTMLAttributes } from 'react';
 import { default as AccordionHeading } from './Accordion.Heading';
 import { default as AccordionPanel } from './Accordion.Panel';
-export declare const NAME = "ucl-accordion";
+export declare const NAME = "ucl-uikit-accordion";
 interface AccordionContextProps {
     isOpen: boolean;
     toggleAccordion: () => void;

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

@@ -0,0 +1,57 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import('react').FC<import('./Accordion').AccordionProps> & {
+        Heading: import('react').FC<import('./Accordion.Heading').AccordionHeadingProps>;
+        Panel: import('react').FC<import('./Accordion.Panel').AccordionPanelProps>;
+    };
+    parameters: {
+        layout: string;
+    };
+    argTypes: {
+        size: {
+            options: string[];
+            control: {
+                type: "select";
+            };
+            type: "string";
+        };
+        disabled: {
+            control: {
+                type: "boolean";
+            };
+            type: "boolean";
+        };
+        isOpen: {
+            control: {
+                type: "boolean";
+            };
+            type: "boolean";
+        };
+        testId: {
+            control: {
+                type: "text";
+            };
+            type: "string";
+        };
+        className: {
+            control: {
+                type: "text";
+            };
+            type: "string";
+        };
+    };
+    args: {
+        isOpen: false;
+        disabled: false;
+        size: "medium";
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Disabled: Story;
+export declare const SmallSize: Story;
+export declare const CustomHeadingElement: Story;
+export declare const MultipleAccordions: Story;

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

@@ -1,2 +1,4 @@
 export { default } from './Accordion';
 export type { AccordionProps } from './Accordion';
+export type { AccordionHeadingProps } from './Accordion.Heading';
+export type { AccordionPanelProps } from './Accordion.Panel';

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

@@ -1,7 +1,110 @@
 import { StoryObj } from '@storybook/react';
+import { AvatarProps } from './Avatar';
+type AvatarSize = NonNullable<AvatarProps['size']>;
 declare const meta: {
     title: string;
-    component: import('react').NamedExoticComponent<import('./Avatar').AvatarProps & import('react').RefAttributes<HTMLButtonElement>>;
+    component: import('react').NamedExoticComponent<AvatarProps & import('react').RefAttributes<HTMLButtonElement>>;
+    parameters: {
+        layout: string;
+    };
+    argTypes: {
+        variant: {
+            description: string;
+            options: string[];
+            control: {
+                type: "select";
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        imageUrl: {
+            description: string;
+            control: {
+                type: "text";
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        name: {
+            description: string;
+            control: {
+                type: "text";
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        size: {
+            description: string;
+            options: AvatarSize[];
+            control: {
+                type: "inline-radio";
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        disabled: {
+            description: string;
+            control: {
+                type: "boolean";
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        testId: {
+            description: string;
+            control: {
+                type: "text";
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        className: {
+            description: string;
+            control: {
+                type: "text";
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        onClick: {
+            description: string;
+            action: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+    };
+    args: {
+        variant: "image";
+        imageUrl: string;
+        name: string;
+        size: 56;
+        disabled: false;
+    };
+    tags: string[];
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
@@ -9,3 +112,6 @@ export declare const Default: Story;
 export declare const Image: Story;
 export declare const Initials: Story;
 export declare const Icon: Story;
+export declare const Sizes: Story;
+export declare const Disabled: Story;
+export declare const BrokenImageFallback: Story;

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

@@ -17,6 +17,7 @@ export interface ButtonBaseProps {
 export type ButtonProps<C extends ElementType = 'button'> = {
     as?: C;
     ref?: PolymorphicRef<C>;
+    className?: string;
 } & ButtonBaseProps & MarginProps & 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;

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

@@ -1,2 +1,2 @@
 export { default } from './Calendar';
-export type { CalendarProps, CalendarEvent, AcademicWeek, } from './Calendar.types';
+export type { CalendarProps, CalendarEvent, AcademicWeek } from './Calendar.types';

package/dist/components/Datepicker/Datepicker.d.ts

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

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

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ value, onValueChange, minDate, maxDate, disabled, className, native, nativeRef, nativeHTMLAttributes, ...props }: import('./Datepicker.types').DatepickerProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ value, onValueChange, minDate, maxDate, disabled, className, clearable, ...props }: import('./Datepicker.types').DatepickerProps) => import("react/jsx-runtime").JSX.Element;
     parameters: {
         layout: string;
     };
@@ -26,7 +26,7 @@ declare const meta: {
                 type: "boolean";
             };
         };
-        native: {
+        clearable: {
             control: {
                 type: "boolean";
             };
@@ -42,7 +42,8 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const InAField: Story;
 export declare const WithEvents: Story;
 export declare const WithAcademicWeeks: Story;
 export declare const MinMaxDates: Story;
-export declare const Native: Story;
+export declare const Clearable: Story;

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

@@ -1,5 +1,6 @@
-import { InputHTMLAttributes, HTMLAttributes, RefObject } from 'react';
+import { HTMLAttributes, RefObject } from 'react';
 import { CalendarEvent, AcademicWeek } from '../Calendar';
+import { InputProps } from './subcomponents/DatepickerInput';
 export type DatepickerValue = Date | null;
 interface BaseDatepickerProps {
     value?: DatepickerValue;
@@ -11,13 +12,11 @@ interface BaseDatepickerProps {
     academicWeeks?: AcademicWeek[];
     testId?: string;
     disabled?: boolean;
+    clearable?: boolean;
     ref?: RefObject<HTMLDivElement>;
     inputRef?: RefObject<HTMLInputElement>;
+    inputProps?: InputProps;
 }
-type NativeDatepickerAttributeProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'min' | 'max' | 'className' | 'disabled'>;
 export interface DatepickerProps extends BaseDatepickerProps, HTMLAttributes<HTMLDivElement> {
-    native?: boolean;
-    nativeHTMLAttributes?: NativeDatepickerAttributeProps;
-    nativeRef?: RefObject<HTMLInputElement>;
 }
 export {};

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

@@ -1,17 +1,20 @@
 import { DatepickerValue } from '../Datepicker.types';
 import { CalendarEvent, AcademicWeek } from '../../Calendar';
+import { InputProps } from './DatepickerInput';
 interface CustomDatepickerProps extends React.HTMLAttributes<HTMLDivElement> {
     value?: DatepickerValue;
     onValueChange?: (value: DatepickerValue, event?: React.SyntheticEvent) => void;
     minDate?: string | null;
     maxDate?: string | null;
     disabled?: boolean;
+    clearable?: boolean;
     events?: CalendarEvent[];
     showAcademicWeeks?: boolean;
     academicWeeks?: AcademicWeek[];
     testId?: string;
     ref?: React.RefObject<HTMLDivElement>;
     inputRef?: React.RefObject<HTMLInputElement>;
+    inputProps?: InputProps;
 }
-declare const CustomDatepicker: ({ value, onValueChange, minDate, maxDate, disabled, events, showAcademicWeeks, academicWeeks, testId, className, ref, inputRef, ...props }: CustomDatepickerProps) => import("react/jsx-runtime").JSX.Element;
+declare const CustomDatepicker: ({ value, onValueChange, minDate, maxDate, disabled, clearable, events, showAcademicWeeks, academicWeeks, testId, className, ref, inputRef, inputProps, ...props }: CustomDatepickerProps) => import("react/jsx-runtime").JSX.Element;
 export default CustomDatepicker;

package/dist/components/Datepicker/subcomponents/DatepickerInput.d.ts

@@ -1,4 +1,17 @@
-interface DatepickerInputProps {
+/**
+ * HTML attributes that consumers can pass to the underlying `<input>` via the
+ * `inputProps` prop on `<Datepicker>`.
+ *
+ * Controlled and internally-managed attributes are omitted to prevent conflicts.
+ */
+export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'onKeyDown' | 'onFocus' | 'disabled' | 'type'> & {
+    testId?: string;
+};
+/**
+ * Internal props for `<DatepickerInput>`, combining consumer-facing
+ *  input attributes with controlled props managed by `<VisibleField>`.
+ */
+interface DatepickerInputProps extends InputProps {
     value: string;
     onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
     onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
@@ -6,5 +19,5 @@ interface DatepickerInputProps {
     disabled: boolean;
     ref: React.RefObject<HTMLInputElement | null>;
 }
-declare const DatepickerInput: ({ value, onChange, onKeyDown, onFocus, disabled, ref, }: DatepickerInputProps) => import("react/jsx-runtime").JSX.Element;
+declare const DatepickerInput: ({ disabled, placeholder, inputMode, testId, className, ...props }: DatepickerInputProps) => import("react/jsx-runtime").JSX.Element;
 export default DatepickerInput;

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

@@ -2,5 +2,5 @@ interface PanelProps {
     zIndex?: number;
     children: React.ReactNode;
 }
-declare const Panel: ({ zIndex, children }: PanelProps) => import("react/jsx-runtime").JSX.Element;
+declare const Panel: ({ zIndex, children, }: PanelProps) => import("react/jsx-runtime").JSX.Element;
 export default Panel;

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

@@ -1,12 +1,17 @@
 import { default as React } from 'react';
+import { InputProps } from './DatepickerInput';
 interface VisibleFieldProps {
     inputValue: string;
     onInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
     onInputKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
     onInputFocus: () => void;
     onButtonClick: () => void;
+    onClear: (event: React.SyntheticEvent) => void;
     disabled: boolean;
+    clearable?: boolean;
+    hasValue?: boolean;
     inputRef: React.RefObject<HTMLInputElement | null>;
+    inputProps: InputProps;
 }
-declare const VisibleField: ({ inputValue, onInputChange, onInputKeyDown, onInputFocus, onButtonClick, disabled, inputRef, }: VisibleFieldProps) => import("react/jsx-runtime").JSX.Element;
+declare const VisibleField: ({ inputValue, onInputChange, onInputKeyDown, onInputFocus, onButtonClick, onClear, disabled, clearable, hasValue, inputRef, inputProps, }: VisibleFieldProps) => import("react/jsx-runtime").JSX.Element;
 export default VisibleField;

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

@@ -1,5 +1,4 @@
 export { default as CustomDatepicker } from './CustomDatepicker';
-export { default as NativeDatepicker } from './NativeDatepicker';
 export { default as VisibleField } from './VisibleField';
 export { default as DatepickerInput } from './DatepickerInput';
 export { default as Panel } from './Panel';

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

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

package/dist/components/Dialog/BaseDialog.d.ts

@@ -15,7 +15,8 @@ export interface BaseDialogProps extends HTMLAttributes<HTMLDialogElement> {
     finalFocusRef?: React.RefObject<HTMLElement>;
     disableFocusTrap?: boolean;
     restoreFocus?: boolean;
+    skipCloseOnInitialFocus?: boolean;
     testId?: string;
 }
-declare const _default: React.MemoExoticComponent<({ open, size, modal, closeOnClickOutside, closeOnClickOutsideStopPropagation, nonModalCloseOnEscape, onClose, className, children, initialFocusRef, finalFocusRef, disableFocusTrap, restoreFocus, testId, ...props }: BaseDialogProps) => import("react/jsx-runtime").JSX.Element | null>;
+declare const _default: React.MemoExoticComponent<({ open, size, modal, closeOnClickOutside, closeOnClickOutsideStopPropagation, nonModalCloseOnEscape, onClose, className, children, initialFocusRef, finalFocusRef, disableFocusTrap, restoreFocus, skipCloseOnInitialFocus, testId, ...props }: BaseDialogProps) => import("react/jsx-runtime").JSX.Element | null>;
 export default _default;

package/dist/components/Dialog/Dialog.d.ts

@@ -4,6 +4,8 @@ import { default as DialogBody } from './DialogBody';
 import { default as DialogFooter } from './DialogFooter';
 export declare const NAME = "ucl-uikit-dialog";
 interface DialogContextValue {
+    dialogHeaderId?: string;
+    dialogBodyId?: string;
     onClose?: (ev: React.MouseEvent) => void;
     onSecondaryAction?: () => void;
     onAction?: () => void;

package/dist/components/Header/Header.d.ts

@@ -10,9 +10,12 @@ export interface HeaderProps extends HTMLAttributes<HTMLElement> {
     titleAs?: React.ElementType<React.HTMLAttributes<HTMLElement>>;
     titleClassName?: string;
     titleProps?: Record<string, unknown>;
+    homeLinkHref?: string;
+    homeLinkProps?: Record<string, unknown>;
+    homeLinkAriaLabel?: string;
     testId?: string;
 }
-declare const MemoAppHeader: import('react').MemoExoticComponent<({ title, fixed, titleAs, titleClassName, titleProps, testId, className, children, ...props }: HeaderProps) => import("react/jsx-runtime").JSX.Element>;
+declare const MemoAppHeader: import('react').MemoExoticComponent<({ title, fixed, titleAs, titleClassName, titleProps, homeLinkHref, homeLinkProps, homeLinkAriaLabel, testId, className, children, ...props }: HeaderProps) => import("react/jsx-runtime").JSX.Element>;
 export interface IHeaderSubComponents {
     Menu: typeof HeaderMenu;
 }

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

@@ -0,0 +1,40 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import('react').NamedExoticComponent<import('./Header').HeaderProps> & {
+        readonly type: ({ title, fixed, titleAs, titleClassName, titleProps, homeLinkHref, homeLinkProps, homeLinkAriaLabel, testId, className, children, ...props }: import('./Header').HeaderProps) => import("react/jsx-runtime").JSX.Element;
+    } & import('./Header').IHeaderSubComponents;
+    parameters: {
+        layout: string;
+    };
+    argTypes: {
+        title: {
+            control: "text";
+        };
+        fixed: {
+            control: "boolean";
+        };
+        homeLinkHref: {
+            control: "text";
+        };
+        homeLinkAriaLabel: {
+            control: "text";
+        };
+        className: {
+            control: "text";
+        };
+        children: {
+            control: false;
+        };
+    };
+    args: {
+        title: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Fixed: Story;
+export declare const WithHomeLink: Story;
+export declare const WithMenu: Story;

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

@@ -0,0 +1,21 @@
+export interface MainProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Determines whether to wrap children in a `<Layout>` component,
+     * to apply the grid layout from the UCL Design System.
+     */
+    layout?: boolean;
+    /**
+     * ID for testing purposes.
+     * Added to the `data-testid` attribute of top-level `<main>` element.
+     * Default is `'ucl-uikit-main'`.
+     */
+    testId?: string;
+}
+export declare const NAME = "ucl-uikit-main";
+/**
+ * Semantic wrapper around HTML `<main>` element
+ *
+ * Optionally wraps children in the UCL Design System `Layout` grid when `layout` is true
+ */
+declare const Main: ({ layout, testId, className, children, ...props }: MainProps) => import("react/jsx-runtime").JSX.Element;
+export default Main;

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/index.d.ts

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

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';