uikit-react-public 0.14.21 → 0.21.8

package/dist/components/Link/BaseLink.d.ts

@@ -1,10 +1,19 @@
-import { default as React, AnchorHTMLAttributes, ElementType } from 'react';
-export interface BaseLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
-    component?: ElementType;
+import { default as React, ComponentPropsWithoutRef, ElementType } from 'react';
+type BaseLinkOwnProps = {
     size?: 'small' | 'default';
     noVisited?: boolean;
     disabled?: boolean;
     testId?: string;
-}
-declare const BaseLink: React.ForwardRefExoticComponent<BaseLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+    className?: string;
+    children?: React.ReactNode;
+    to?: string;
+};
+type PolymorphicRef<C extends ElementType> = React.ComponentPropsWithRef<C>['ref'];
+export type BaseLinkProps<C extends ElementType = 'a'> = BaseLinkOwnProps & {
+    component?: C;
+} & Omit<ComponentPropsWithoutRef<C>, keyof BaseLinkOwnProps | 'component' | 'disabled'>;
+type BaseLinkComponent = <C extends ElementType = 'a'>(props: BaseLinkProps<C> & {
+    ref?: PolymorphicRef<C>;
+}) => React.JSX.Element;
+declare const BaseLink: BaseLinkComponent;
 export default BaseLink;

package/dist/components/Link/Link.d.ts

@@ -1,6 +1,11 @@
+import { default as React, ComponentPropsWithoutRef, ElementType } from 'react';
 import { BaseLinkProps } from './BaseLink';
-export interface LinkProps extends BaseLinkProps {
+type LinkOwnProps = {
     variant?: 'primary' | 'secondary';
-}
-declare const Link: import('react').ForwardRefExoticComponent<LinkProps & import('react').RefAttributes<HTMLAnchorElement>>;
+};
+export type LinkProps<C extends ElementType = 'a'> = LinkOwnProps & BaseLinkProps<C> & Omit<ComponentPropsWithoutRef<C>, keyof LinkOwnProps>;
+type LinkComponent = <C extends ElementType = 'a'>(props: LinkProps<C> & {
+    ref?: React.ComponentPropsWithRef<C>['ref'];
+}) => React.JSX.Element;
+declare const Link: LinkComponent;
 export default Link;

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

@@ -1,7 +1,9 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: import('react').ForwardRefExoticComponent<import('./Link').LinkProps & import('react').RefAttributes<HTMLAnchorElement>>;
+    component: <C extends import('react').ElementType = "a">(props: import('./Link').LinkProps<C> & {
+        ref?: React.ComponentPropsWithRef<C>["ref"];
+    }) => React.JSX.Element;
     args: {
         children: string;
         href: string;

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/__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/MenuNew/Menu.context.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+interface IContext {
+    isOpen: boolean;
+    toggleMenu: () => void;
+    triggerRef: React.RefObject<HTMLButtonElement | null>;
+    contentRef: React.RefObject<HTMLDivElement | null>;
+}
+export declare const AppMenuContext: React.Context<IContext>;
+export declare const useAppMenu: () => IContext;
+declare const MenuProvider: ({ defaultOpen, children, }: {
+    defaultOpen?: boolean;
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export default MenuProvider;

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

@@ -0,0 +1,20 @@
+import { HTMLAttributes } from 'react';
+import { default as MenuItem } from './MenuItem';
+import { default as MenuSection } from './MenuSection';
+import { ButtonMenuTriggerProps } from './trigger/ButtonMenuTrigger';
+export declare const NAME = "ucl-uikit-menu";
+export interface MenuProps extends HTMLAttributes<HTMLDivElement> {
+    defaultOpen?: boolean;
+    title?: string;
+    menuId?: string;
+    position?: 'left' | 'right';
+    trigger?: React.ComponentType<ButtonMenuTriggerProps>;
+    testId?: string;
+}
+export interface IMenuSubComponents {
+    Section: typeof MenuSection;
+    Item: typeof MenuItem;
+}
+declare const MemoMenu: import('react').MemoExoticComponent<({ defaultOpen, title, position, trigger, menuId, testId, children, className, ...props }: MenuProps) => import("react/jsx-runtime").JSX.Element>;
+declare const MenuWithSubComponents: typeof MemoMenu & IMenuSubComponents;
+export default MenuWithSubComponents;

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

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

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

@@ -0,0 +1,10 @@
+import { default as React, LiHTMLAttributes } from 'react';
+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/MenuNew/MenuSection.d.ts

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

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

@@ -0,0 +1,6 @@
+export { default } from './Menu';
+export type { MenuProps } from './Menu';
+export { default as MenuContent } from './MenuContent';
+export type { MenuContentProps } from './MenuContent';
+export { default as ButtonMenuTrigger } from './trigger/ButtonMenuTrigger';
+export type { ButtonMenuTriggerProps } from './trigger/ButtonMenuTrigger';

package/dist/components/MenuNew/trigger/ButtonMenuTrigger.d.ts

@@ -0,0 +1,8 @@
+import { IconButtonProps } from '../../IconButton';
+export declare const NAME = "ucl-uikit-menu__trigger--button";
+export declare const DEFAULT_ARIA_LABEL = "Menu button";
+export interface ButtonMenuTriggerProps extends IconButtonProps {
+    ariaLabel?: string;
+}
+declare const _default: import('react').MemoExoticComponent<({ id, ariaLabel, className, ...props }: ButtonMenuTriggerProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/dist/components/MenuNew/trigger/IconMenuTrigger.d.ts

@@ -0,0 +1,8 @@
+import { IconButtonProps } from '../../IconButton';
+export declare const NAME = "ucl-uikit-menu__trigger--icon";
+export declare const DEFAULT_ARIA_LABEL = "Menu button";
+export interface IconMenuTriggerProps extends IconButtonProps {
+    ariaLabel?: string;
+}
+declare const _default: import('react').MemoExoticComponent<({ id, ariaLabel, className, ...props }: IconMenuTriggerProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

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

@@ -96,7 +96,7 @@ declare const meta: {
         results?: number | undefined | undefined;
         security?: string | undefined | undefined;
         unselectable?: "on" | "off" | undefined | undefined;
-        popover?: "" | "auto" | "manual" | undefined | undefined;
+        popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
         popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
         popoverTarget?: string | undefined | undefined;
         inert?: boolean | undefined | undefined;
@@ -177,18 +177,18 @@ declare const meta: {
         onFocusCapture?: import('react').FocusEventHandler<HTMLDivElement> | undefined;
         onBlur?: import('react').FocusEventHandler<HTMLDivElement> | undefined;
         onBlurCapture?: import('react').FocusEventHandler<HTMLDivElement> | undefined;
-        onChange?: import('react').FormEventHandler<HTMLDivElement> | undefined;
-        onChangeCapture?: import('react').FormEventHandler<HTMLDivElement> | undefined;
+        onChange?: import('react').ChangeEventHandler<HTMLDivElement, Element> | undefined;
+        onChangeCapture?: import('react').ChangeEventHandler<HTMLDivElement, Element> | undefined;
         onBeforeInput?: import('react').InputEventHandler<HTMLDivElement> | undefined;
-        onBeforeInputCapture?: import('react').FormEventHandler<HTMLDivElement> | undefined;
-        onInput?: import('react').FormEventHandler<HTMLDivElement> | undefined;
-        onInputCapture?: import('react').FormEventHandler<HTMLDivElement> | undefined;
-        onReset?: import('react').FormEventHandler<HTMLDivElement> | undefined;
-        onResetCapture?: import('react').FormEventHandler<HTMLDivElement> | undefined;
-        onSubmit?: import('react').FormEventHandler<HTMLDivElement> | undefined;
-        onSubmitCapture?: import('react').FormEventHandler<HTMLDivElement> | undefined;
-        onInvalid?: import('react').FormEventHandler<HTMLDivElement> | undefined;
-        onInvalidCapture?: import('react').FormEventHandler<HTMLDivElement> | undefined;
+        onBeforeInputCapture?: import('react').InputEventHandler<HTMLDivElement> | undefined;
+        onInput?: import('react').InputEventHandler<HTMLDivElement> | undefined;
+        onInputCapture?: import('react').InputEventHandler<HTMLDivElement> | undefined;
+        onReset?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onResetCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onSubmit?: import('react').SubmitEventHandler<HTMLDivElement> | undefined;
+        onSubmitCapture?: import('react').SubmitEventHandler<HTMLDivElement> | undefined;
+        onInvalid?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onInvalidCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
         onLoad?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
         onLoadCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
         onError?: import('react').ReactEventHandler<HTMLDivElement> | undefined;

package/dist/components/ParagraphNew/Paragraph.d.ts

@@ -0,0 +1,13 @@
+import { HTMLAttributes } from 'react';
+import { MarginProps } from '../common/marginsStyle';
+export declare const NAME = "ucl-uikit-paragrah";
+export type ParagraphLevel = 'lg' | 'lg-medium' | 'lg-semibold' | 'lg-bold' | 'md' | 'md-medium' | 'md-semibold' | 'md-semibold' | 'md-medium-numeric' | 'sm' | 'sm-medium' | 'sm-semibold' | 'xs' | 'xs-medium';
+export interface ParagraphBaseProps extends HTMLAttributes<HTMLParagraphElement> {
+    level?: ParagraphLevel;
+    as?: 'p' | 'div' | 'span';
+    testId?: string;
+    ref?: React.Ref<HTMLParagraphElement>;
+}
+export type ParagraphProps = ParagraphBaseProps & MarginProps;
+declare const _default: import('react').MemoExoticComponent<({ level, as, testId, className, ref, ...props }: ParagraphProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

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

@@ -0,0 +1,4 @@
+export { default } from './Paragraph';
+export type { ParagraphProps } from './Paragraph';
+export { default as Text } from './Paragraph';
+export type { ParagraphProps as TextProps } from './Paragraph';

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

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

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

@@ -1,47 +1,208 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: <T extends string | number = string>(props: import('./Select.types').SelectProps<T>) => import("react/jsx-runtime").JSX.Element;
+    component: <T extends string | number = string>(props: import('./Select.types').SelectProps<T>) => React.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;
+                };
+            };
+        };
+        clearable: {
+            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 +212,6 @@ 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 Clearable: Story;
+export declare const SelectionBehaviourCommit: Story;