@danske/sapphire-react-lab 0.99.3 → 0.101.0

package/build/index.d.ts

@@ -1,95 +1,16 @@
 import * as React from 'react';
 import React__default, { ReactNode, ReactElement, RefObject, Key } from 'react';
-import { SapphireStyleProps, PopoverTriggerProps, SearchFieldPropsWithRef, ListBoxProps, TypographyHeadingProps, FieldProps, ButtonProps } from '@danske/sapphire-react';
 import * as _react_types_shared from '@react-types/shared';
 import { CollectionBase, DOMProps, Expandable, ItemProps, AriaLabelingProps, FocusableRefValue, PressEvents } from '@react-types/shared';
+import { SapphireStyleProps, TypographyHeadingProps, ListBoxProps, ButtonProps, PopoverTriggerProps, SearchFieldPropsWithRef, FieldProps } from '@danske/sapphire-react';
+import { ComboBoxProps } from '@react-types/combobox';
+import { BreadcrumbProps, BreadcrumbsProps as BreadcrumbsProps$1, SliderProps as SliderProps$1, SliderThumbProps, TimeValue } from 'react-aria-components';
 import { HoverProps } from '@react-aria/interactions';
 import { DropOptions } from '@react-aria/dnd';
 import { AriaNumberFieldProps } from '@react-aria/numberfield';
-import { SliderProps as SliderProps$1, SliderThumbProps, BreadcrumbProps, BreadcrumbsProps as BreadcrumbsProps$1 } from 'react-aria-components';
+import { AriaTimeFieldProps } from '@react-aria/datepicker';
 export { useLocale } from '@react-aria/i18n';
 
-interface FilterDropdownProps extends SapphireStyleProps, Pick<PopoverTriggerProps, 'defaultOpen' | 'isOpen' | 'onOpenChange' | 'noMaxWidth'> {
-    /**
-     * "Filter by" label, shown inside the trigger button.
-     */
-    label: ReactNode;
-    /**
-     * Filter value, shown inside the trigger button. `null`, `undefined` and empty string are
-     * considered as unset value.
-     */
-    value: ReactNode;
-    /**
-     * Filtering UI controls, rendered in a popover.
-     */
-    children: ReactNode;
-    /**
-     * Called when:
-     * - `Enter` is pressed on form fields rendered inside the popover.
-     * - 'Apply' button is pressed (if `hasApplyButton` is true)
-     */
-    onApply?: () => void;
-    /**
-     * Whether to show the 'Apply' button.
-     */
-    hasApplyButton?: boolean;
-    /**
-     * Called when 'Clear' button is pressed.
-     */
-    onClear?: () => void;
-    /**
-     * Whether the button is disabled.
-     */
-    isDisabled?: boolean;
-    /**
-     * Whether the 'Apply' button is disabled.
-     */
-    isApplyDisabled?: boolean;
-    /**
-     * Whether the 'Clear' button is disabled.
-     */
-    isClearDisabled?: boolean;
-    /**
-     * The label of the 'Clear' button.
-     * @default "Clear"
-     */
-    clearButtonLabel?: ReactNode;
-    /**
-     * The label of the 'Apply' button.
-     * @default "Apply"
-     */
-    applyButtonLabel?: ReactNode;
-    /**
-     * The size of the buttons incl. the trigger itself.
-     * @default 'md'
-     */
-    buttonSize?: 'sm' | 'md' | 'lg';
-}
-/**
- * A button with a dropdown, used for filtering UI.
- */
-declare function FilterDropdown({ children, label, value, isDisabled, isApplyDisabled, isClearDisabled, isOpen: isOpenProp, applyButtonLabel, clearButtonLabel, defaultOpen, hasApplyButton, noMaxWidth, onApply, onClear, onOpenChange, buttonSize, }: FilterDropdownProps): JSX.Element;
-
-interface SearchableSelectFilterProps extends SapphireStyleProps, Omit<FilterDropdownProps, 'children'> {
-    /**
-     * The SearchField to search items with.
-     */
-    searchField: ReactElement<SearchFieldPropsWithRef<object>>;
-    /**
-     * The ListBox to select items from.
-     */
-    listBox: ReactElement<ListBoxProps<object>>;
-    /**
-     * The Button size of the trigger
-     * @default 'md'
-     */
-    size?: 'sm' | 'md' | 'lg';
-}
-/**
- * A button with a dropdown, used for filtering UI.
- */
-declare function SearchableSelectFilter(props: SearchableSelectFilterProps): JSX.Element;
-
 declare type TreeExpansionMode = 'single' | 'multiple';
 
 interface AccordionProps<T> extends SapphireStyleProps, CollectionBase<T>, DOMProps, Expandable {
@@ -147,6 +68,71 @@ declare const _Accordion: (<T extends object>(props: AccordionProps<T> & {
     Item: <T_1>(props: AccordionItemProps<T_1>) => JSX.Element;
 };
 
+interface SapphireAlertProps extends SapphireStyleProps {
+    /**
+     * The content of the alert.
+     */
+    children?: ReactNode;
+    /**
+     * The title of the alert.
+     */
+    title?: ReactNode;
+    /**
+     * @default 'info'
+     */
+    variant?: 'info' | 'positive' | 'negative' | 'warning';
+}
+declare function Alert({ children, title, variant, ...props }: SapphireAlertProps): React__default.JSX.Element;
+
+declare type AutocompleteProps<T extends object> = SapphireStyleProps & Pick<ComboBoxProps<T>, 'items' | 'children' | 'inputValue' | 'defaultInputValue' | 'onInputChange' | 'onSelectionChange' | 'isDisabled'> & Pick<ListBoxProps<T>, 'loadingState' | 'loadingSkeletonRowsCount'> & {
+    /**
+     * Render function for the input element.
+     * Receives props that should be spread onto the input component.
+     */
+    renderInput: (inputProps: any) => ReactElement;
+    /**
+     * Accessible label for the suggestions listbox.
+     */
+    listboxAriaLabel?: string;
+    /**
+     * Controlled selected value.
+     */
+    value?: React__default.Key | null;
+    /**
+     * Decide what items to display in the dropdown menu.
+     * @default 'String.includes'
+     */
+    defaultFilter?: (textValue: string, inputValue: string) => boolean;
+};
+declare function Autocomplete<T extends object>(props: AutocompleteProps<T>): ReactElement;
+
+declare type BreadcrumbItemProps = {
+    isDisabled?: boolean;
+} & SapphireStyleProps & Pick<BreadcrumbProps, 'children'>;
+declare const BreadcrumbItem: ({ children, isDisabled: individualDisabled, ...props }: BreadcrumbItemProps) => JSX.Element;
+
+declare type BreadcrumbsProps<T extends object> = Pick<BreadcrumbsProps$1<T>, 'aria-label' | 'isDisabled'> & {
+    children: React__default.ReactElement<BreadcrumbItemProps>[];
+    /**
+     * The size of the breadcrumbs component.
+     *
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Maximum width for the breadcrumbs container. When content overflows,
+     * it will show an overflow menu with the first and last items.
+     */
+    maxWidth?: React__default.CSSProperties['maxWidth'];
+} & SapphireStyleProps;
+/**
+ * Breadcrumbs display a hierarchy of links to the current page or resource in an application.
+ */
+declare const Breadcrumbs: <T extends object>({ size, children, maxWidth, ...props }: BreadcrumbsProps<T>) => JSX.Element;
+
+declare type BreadcrumbItemLinkProps = Omit<ButtonProps<'a'>, 'variant' | 'iconAlign'> & SapphireStyleProps;
+declare const BreadcrumbItemLink: React__default.ForwardRefExoticComponent<Omit<ButtonProps<"a">, "variant" | "iconAlign"> & SapphireStyleProps & React__default.RefAttributes<_react_types_shared.FocusableRefValue<HTMLAnchorElement, HTMLAnchorElement>>>;
+
 interface FileSelectProps {
     /**
      * List of file types that are allowed to be selected using the file select.
@@ -192,6 +178,87 @@ interface FileDropzoneProps extends SapphireStyleProps, Pick<DropOptions, 'getDr
 }
 declare const FileDropzone: React__default.ForwardRefExoticComponent<FileDropzoneProps & React__default.RefAttributes<HTMLDivElement>>;
 
+interface FilterDropdownProps extends SapphireStyleProps, Pick<PopoverTriggerProps, 'defaultOpen' | 'isOpen' | 'onOpenChange' | 'noMaxWidth'> {
+    /**
+     * "Filter by" label, shown inside the trigger button.
+     */
+    label: ReactNode;
+    /**
+     * Filter value, shown inside the trigger button. `null`, `undefined` and empty string are
+     * considered as unset value.
+     */
+    value: ReactNode;
+    /**
+     * Filtering UI controls, rendered in a popover.
+     */
+    children: ReactNode;
+    /**
+     * Called when:
+     * - `Enter` is pressed on form fields rendered inside the popover.
+     * - 'Apply' button is pressed (if `hasApplyButton` is true)
+     */
+    onApply?: () => void;
+    /**
+     * Whether to show the 'Apply' button.
+     */
+    hasApplyButton?: boolean;
+    /**
+     * Called when 'Clear' button is pressed.
+     */
+    onClear?: () => void;
+    /**
+     * Whether the button is disabled.
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether the 'Apply' button is disabled.
+     */
+    isApplyDisabled?: boolean;
+    /**
+     * Whether the 'Clear' button is disabled.
+     */
+    isClearDisabled?: boolean;
+    /**
+     * The label of the 'Clear' button.
+     * @default "Clear"
+     */
+    clearButtonLabel?: ReactNode;
+    /**
+     * The label of the 'Apply' button.
+     * @default "Apply"
+     */
+    applyButtonLabel?: ReactNode;
+    /**
+     * The size of the buttons incl. the trigger itself.
+     * @default 'md'
+     */
+    buttonSize?: 'sm' | 'md' | 'lg';
+}
+/**
+ * A button with a dropdown, used for filtering UI.
+ */
+declare function FilterDropdown({ children, label, value, isDisabled, isApplyDisabled, isClearDisabled, isOpen: isOpenProp, applyButtonLabel, clearButtonLabel, defaultOpen, hasApplyButton, noMaxWidth, onApply, onClear, onOpenChange, buttonSize, }: FilterDropdownProps): JSX.Element;
+
+interface SearchableSelectFilterProps extends SapphireStyleProps, Omit<FilterDropdownProps, 'children'> {
+    /**
+     * The SearchField to search items with.
+     */
+    searchField: ReactElement<SearchFieldPropsWithRef<object>>;
+    /**
+     * The ListBox to select items from.
+     */
+    listBox: ReactElement<ListBoxProps<object>>;
+    /**
+     * The Button size of the trigger
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
+}
+/**
+ * A button with a dropdown, used for filtering UI.
+ */
+declare function SearchableSelectFilter(props: SearchableSelectFilterProps): JSX.Element;
+
 declare type FlagProps = SapphireStyleProps & {
     'aria-label'?: string;
     /**
@@ -213,7 +280,7 @@ declare const Flag: React__default.ForwardRefExoticComponent<SapphireStyleProps
      * The size of the flag.
      * @default 'lg'
      */
-    size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
+    size?: "lg" | "sm" | "md" | "xl" | "xs" | undefined;
     /**
      * Flags come in square or rounded shapes. Square flags are used for display purposes, ensuring a clean and consistent look.
      * Rounded flags are reserved for actionable elements like buttons or selectors, providing a more interactive and approachable feel.
@@ -223,6 +290,28 @@ declare const Flag: React__default.ForwardRefExoticComponent<SapphireStyleProps
     children: React__default.ReactNode;
 } & React__default.RefAttributes<HTMLSpanElement>>;
 
+interface LabeledValueProps extends DOMProps, SapphireStyleProps {
+    children?: React__default.ReactNode;
+    /**
+     * A HelpButton element to place next to the label.
+     */
+    contextualHelp?: ReactNode;
+    /**
+     * The content to display as a label.
+     */
+    label: ReactNode;
+    /**
+     * Places the label either above (default) or on the left side of tags.
+     * @default 'above'
+     */
+    labelPlacement?: 'above' | 'side';
+    /**
+     * @default 'lg'
+     */
+    size?: 'lg' | 'md';
+}
+declare function LabeledValue({ children, contextualHelp, label, labelPlacement, size, ...otherProps }: LabeledValueProps): React__default.JSX.Element;
+
 interface SapphireNumberFieldProps extends Pick<AriaNumberFieldProps, 'label' | 'isDisabled' | 'isRequired' | 'value' | 'defaultValue' | 'onChange' | 'incrementAriaLabel' | 'decrementAriaLabel' | 'onFocus' | 'onBlur' | 'formatOptions' | 'step' | 'minValue' | 'maxValue' | 'placeholder' | 'isReadOnly' | 'autoFocus' | 'onFocusChange' | 'onKeyUp' | 'onKeyDown'> {
     /**
      * Whether the input should render as having an error and an error message.
@@ -326,33 +415,6 @@ declare const _Slider: (({ label, labelPlacement, note, name, ...props }: Slider
     } & React.HTMLAttributes<HTMLElement>) => React.JSX.Element;
 };
 
-declare type BreadcrumbItemProps = {
-    isDisabled?: boolean;
-} & SapphireStyleProps & Pick<BreadcrumbProps, 'children'>;
-declare const BreadcrumbItem: ({ children, isDisabled: individualDisabled, ...props }: BreadcrumbItemProps) => JSX.Element;
-
-declare type BreadcrumbsProps<T extends object> = Pick<BreadcrumbsProps$1<T>, 'aria-label' | 'isDisabled'> & {
-    children: React__default.ReactElement<BreadcrumbItemProps>[];
-    /**
-     * The size of the breadcrumbs component.
-     *
-     * @default 'md'
-     */
-    size?: 'sm' | 'md' | 'lg';
-    /**
-     * Maximum width for the breadcrumbs container. When content overflows,
-     * it will show an overflow menu with the first and last items.
-     */
-    maxWidth?: React__default.CSSProperties['maxWidth'];
-} & SapphireStyleProps;
-/**
- * Breadcrumbs display a hierarchy of links to the current page or resource in an application.
- */
-declare const Breadcrumbs: <T extends object>({ size, children, maxWidth, ...props }: BreadcrumbsProps<T>) => JSX.Element;
-
-declare type BreadcrumbItemLinkProps = Omit<ButtonProps<'a'>, 'variant' | 'iconAlign'> & SapphireStyleProps;
-declare const BreadcrumbItemLink: React__default.ForwardRefExoticComponent<Omit<ButtonProps<"a">, "variant" | "iconAlign"> & SapphireStyleProps & React__default.RefAttributes<_react_types_shared.FocusableRefValue<HTMLAnchorElement, HTMLAnchorElement>>>;
-
 interface TagGroupProps<T> extends CollectionBase<T>, DOMProps, Pick<AriaLabelingProps, 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-details'>, SapphireStyleProps {
     /**
      * A HelpButton element to place next to the label.
@@ -410,42 +472,93 @@ interface TagItemProps<T> extends ItemProps<T> {
 }
 declare const TagItem: <T>(props: TagItemProps<T>) => JSX.Element;
 
-interface LabeledValueProps extends DOMProps, SapphireStyleProps {
-    children?: React__default.ReactNode;
+declare type TimeFieldProps<T extends TimeValue> = Pick<AriaTimeFieldProps<T>, 'isDisabled' | 'isRequired' | 'isReadOnly' | 'label' | 'value' | 'defaultValue' | 'onChange' | 'onFocus' | 'onBlur' | 'shouldForceLeadingZeros'> & SapphireStyleProps & {
     /**
-     * A HelpButton element to place next to the label.
+     * @default 'lg'
      */
-    contextualHelp?: ReactNode;
+    size?: 'lg' | 'md';
     /**
-     * The content to display as a label.
+     * To visually indicate if this field is required or optional.
+     * @default false
      */
-    label: ReactNode;
+    necessityIndicator?: boolean;
     /**
-     * Places the label either above (default) or on the left side of tags.
+     * Places the label either above (default) or on the side of the control.
      * @default 'above'
      */
-    labelPlacement?: 'above' | 'side';
+    labelPlacement?: 'side' | 'above';
+    /**
+     * If it should hide the "clear" button when input is not empty.
+     *
+     * @default false
+     */
+    noClearButton?: boolean;
+    /**
+     * Whether the input should render as having an error and an error message.
+     * This also sets the appropriate `aria` attributes on the input.
+     *
+     * A `boolean` sets the error state. Can be paired with the "note" prop with Field.Note variant="error"
+     * A `ReactNode` sets the error state with an additional error message.
+     *
+     * **An error message is strongly recommended because an error should
+     * always have an explanation about how to fix it.**
+     */
+    error?: boolean | ReactNode;
+    /**
+     * A note to show below the input.
+     * If the input has an error message, this note will be replaced by that.
+     * Use {@Link Field.Note} to render the note.
+     */
+    note?: ReactNode;
+    /**
+     * A HelpButton to render next to the label.
+     */
+    contextualHelp?: ReactNode;
+};
+declare const TimeField: <T extends TimeValue>(props: Pick<AriaTimeFieldProps<T>, "value" | "label" | "onFocus" | "onBlur" | "onChange" | "isDisabled" | "isReadOnly" | "isRequired" | "defaultValue" | "shouldForceLeadingZeros"> & SapphireStyleProps & {
     /**
      * @default 'lg'
      */
-    size?: 'lg' | 'md';
-}
-declare function LabeledValue({ children, contextualHelp, label, labelPlacement, size, ...otherProps }: LabeledValueProps): React__default.JSX.Element;
-
-interface SapphireAlertProps extends SapphireStyleProps {
+    size?: "lg" | "md" | undefined;
     /**
-     * The content of the alert.
+     * To visually indicate if this field is required or optional.
+     * @default false
      */
-    children?: ReactNode;
+    necessityIndicator?: boolean | undefined;
     /**
-     * The title of the alert.
+     * Places the label either above (default) or on the side of the control.
+     * @default 'above'
      */
-    title?: ReactNode;
+    labelPlacement?: "above" | "side" | undefined;
     /**
-     * @default 'info'
+     * If it should hide the "clear" button when input is not empty.
+     *
+     * @default false
      */
-    variant?: 'info' | 'positive' | 'negative' | 'warning';
-}
-declare function Alert({ children, title, variant, ...props }: SapphireAlertProps): React__default.JSX.Element;
+    noClearButton?: boolean | undefined;
+    /**
+     * Whether the input should render as having an error and an error message.
+     * This also sets the appropriate `aria` attributes on the input.
+     *
+     * A `boolean` sets the error state. Can be paired with the "note" prop with Field.Note variant="error"
+     * A `ReactNode` sets the error state with an additional error message.
+     *
+     * **An error message is strongly recommended because an error should
+     * always have an explanation about how to fix it.**
+     */
+    error?: boolean | ReactNode;
+    /**
+     * A note to show below the input.
+     * If the input has an error message, this note will be replaced by that.
+     * Use {@Link Field.Note} to render the note.
+     */
+    note?: ReactNode;
+    /**
+     * A HelpButton to render next to the label.
+     */
+    contextualHelp?: ReactNode;
+} & {
+    ref?: React__default.RefObject<HTMLDivElement> | undefined;
+}) => React__default.ReactElement;
 
-export { _Accordion as Accordion, AccordionContext, AccordionHeadingProps, AccordionItemProps, AccordionProps, Alert, BreadcrumbItem, BreadcrumbItemLink, BreadcrumbItemLinkProps, BreadcrumbItemProps, Breadcrumbs, BreadcrumbsProps, FileDropzone, FileDropzoneProps, FileTrigger, FileTriggerProps, FilterDropdown, FilterDropdownProps, Flag, FlagProps, LabeledValue, NumberField, NumberFieldProps, NumberFieldRef, ProgressIndicator, ProgressIndicatorProps, SapphireAlertProps, SearchableSelectFilter, SearchableSelectFilterProps, _Slider as Slider, SliderProps, TagGroup, TagGroupProps, TagItem };
+export { _Accordion as Accordion, AccordionContext, AccordionHeadingProps, AccordionItemProps, AccordionProps, Alert, Autocomplete, AutocompleteProps, BreadcrumbItem, BreadcrumbItemLink, BreadcrumbItemLinkProps, BreadcrumbItemProps, Breadcrumbs, BreadcrumbsProps, FileDropzone, FileDropzoneProps, FileTrigger, FileTriggerProps, FilterDropdown, FilterDropdownProps, Flag, FlagProps, LabeledValue, NumberField, NumberFieldProps, NumberFieldRef, ProgressIndicator, ProgressIndicatorProps, SapphireAlertProps, SearchableSelectFilter, SearchableSelectFilterProps, _Slider as Slider, SliderProps, TagGroup, TagGroupProps, TagItem, TimeField, TimeFieldProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danske/sapphire-react-lab",
-  "version": "0.99.3",
+  "version": "0.101.0",
   "license": "SEE LICENSE IN LICENSE",
   "description": "Experimental React components of the Sapphire Design System from Danske Bank A/S",
   "exports": {
@@ -25,23 +25,24 @@
   },
   "peerDependencies": {
     "@danske/sapphire-icons": "^3.1.0",
-    "@danske/sapphire-react": "^5.6.1",
+    "@danske/sapphire-react": "^5.7.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
   "devDependencies": {
     "@danske/sapphire-icons": "^3.1.0",
-    "@danske/sapphire-react": "^5.6.1",
+    "@danske/sapphire-react": "^5.7.0",
     "@types/react-transition-group": "^4.4.5",
     "cross-env": "^7.0.3"
   },
   "dependencies": {
-    "@danske/sapphire-css": "^44.0.0",
+    "@danske/sapphire-css": "^45.0.0",
     "@internationalized/date": "^3.10.0",
     "@internationalized/string": "^3.2.7",
     "@react-aria/accordion": "3.0.0-alpha.37",
     "@react-aria/button": "^3.14.2",
     "@react-aria/combobox": "^3.14.0",
+    "@react-aria/datepicker": "^3.15.2",
     "@react-aria/dialog": "^3.5.31",
     "@react-aria/dnd": "^3.11.3",
     "@react-aria/focus": "^3.21.2",
@@ -57,8 +58,10 @@
     "@react-spectrum/utils": "^3.12.5",
     "@react-stately/collections": "^3.12.8",
     "@react-stately/combobox": "^3.12.0",
+    "@react-stately/datepicker": "^3.15.2",
     "@react-stately/list": "^3.13.1",
     "@react-stately/numberfield": "^3.10.2",
+    "@react-stately/overlays": "^3.6.20",
     "@react-stately/toggle": "^3.9.2",
     "@react-stately/tree": "^3.9.3",
     "@react-stately/utils": "^3.10.8",
@@ -68,5 +71,5 @@
     "react-aria-components": "^1.13.0",
     "react-transition-group": "^4.4.5"
   },
-  "gitHead": "631da638aac08cb1982daad7b49c1237525d8efb"
+  "gitHead": "956d65c795c2bffc1e4cc153c7721e94c35827c9"
 }