@danske/sapphire-react-lab 0.104.0 → 0.105.1

package/build/index.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import React__default, { ReactNode, ReactElement, RefObject, Key } from 'react';
+import React__default, { ReactNode, Key, ReactElement, RefObject } from 'react';
 import * as _react_types_shared from '@react-types/shared';
 import { DOMProps, AriaLabelingProps, FocusableRefValue, PressEvents, CollectionBase, ItemProps } from '@react-types/shared';
 import * as _danske_sapphire_react from '@danske/sapphire-react';
-import { GlobalDomAttributes, SapphireStyleProps, TypographyHeadingProps, ListBoxProps, ButtonProps, PopoverTriggerProps, SearchFieldPropsWithRef, IconButtonProps, ThemeVariant, FieldProps } from '@danske/sapphire-react';
+import { GlobalDomAttributes, SapphireStyleProps, TypographyHeadingProps, TypographyBodyProps, ListBoxProps, ButtonProps, PopoverTriggerProps, SearchFieldPropsWithRef, IconButtonProps, ThemeVariant, FieldProps } from '@danske/sapphire-react';
 import { DisclosureGroupProps, DisclosureProps, DisclosurePanelProps, BreadcrumbsProps as BreadcrumbsProps$1, BreadcrumbProps, SliderProps as SliderProps$1, SliderThumbProps, TimeValue } from 'react-aria-components';
 import { ComboBoxProps } from '@react-types/combobox';
 import { HoverProps, FocusWithinProps } from '@react-aria/interactions';
@@ -82,7 +82,50 @@ interface SapphireAlertProps extends GlobalDomAttributes, SapphireStyleProps {
 }
 declare function Alert({ children, title, variant, ...props }: SapphireAlertProps): React__default.JSX.Element;
 
-declare type AutocompleteProps<T extends object> = GlobalDomAttributes & SapphireStyleProps & Pick<ComboBoxProps<T>, 'items' | 'children' | 'inputValue' | 'defaultInputValue' | 'onInputChange' | 'onSelectionChange' | 'isDisabled'> & Pick<ListBoxProps<T>, 'loadingState' | 'loadingSkeletonRowsCount'> & {
+/**
+ * Format options for currency amounts.
+ * The style is always 'currency', so only currency-related options are exposed.
+ */
+declare type CurrencyFormatOptions = Pick<Intl.NumberFormatOptions, 'currency' | 'currencyDisplay' | 'currencySign' | 'signDisplay' | 'minimumFractionDigits' | 'maximumFractionDigits' | 'minimumSignificantDigits' | 'maximumSignificantDigits' | 'useGrouping' | 'notation'>;
+declare type AmountProps = {
+    /**
+     * When displaying amounts, readability and visual hierarchy are key. Use medium weight for primary emphasis to highlight amounts or regular weight for secondary emphasis.
+     *
+     * @default 'regular'
+     */
+    emphasis?: 'primary' | 'regular';
+    /**
+     * The variant of the Amount component. `positive` shows a green color, and should be used for amounts greater than zero.
+     *
+     * @default 'neutal'
+     */
+    variant?: 'neutal' | 'positive';
+    /**
+     * The amount value to be formatted and displayed.
+     *
+     * If displaying the sign is a requirement, ensure the value is a string that starts with '+' or '-'.
+     * Alternatively, you can use the `signDisplay` option in `formatOptions` to control the display of the sign for numeric values.
+     */
+    value: string | number;
+    /** Currency formatting options */
+    formatOptions?: CurrencyFormatOptions;
+} & Pick<TypographyBodyProps, 'size'> & SapphireStyleProps & GlobalDomAttributes;
+declare const Amount: ({ emphasis, variant, formatOptions, value, size, ...props }: AmountProps) => JSX.Element;
+
+declare type AutocompleteProps<T extends object> = GlobalDomAttributes & SapphireStyleProps & Pick<ComboBoxProps<T>, 'items' | 'children' | 'inputValue' | 'defaultInputValue' | 'onInputChange' | 'isDisabled'> & Pick<ListBoxProps<T>, 'loadingState' | 'loadingSkeletonRowsCount'> & {
+    /**
+     * This prop is badly named. It is NOT related to a selection state being
+     * changed since there is no selection state in this component.
+     *
+     * This callback simply notifies you when the user filled in the text field
+     * by selecting an option from the autocomplete dropdown. Similar to an
+     * onClick.
+     *
+     * @deprecated
+     * Use `onSuggestionSelected` instead.
+     */
+    onSelectionChange?: Pick<ComboBoxProps<T>, 'onSelectionChange'>['onSelectionChange'];
+    onSuggestionSelected?: (key: Key) => void;
     /**
      * Render function for the input element.
      * Receives props that should be spread onto the input component.
@@ -230,6 +273,10 @@ interface FilterDropdownProps extends GlobalDomAttributes, SapphireStyleProps, P
      * Whether the 'Apply' button is disabled.
      */
     isApplyDisabled?: boolean;
+    /**
+     * Whether the 'Clear' button is hidden.
+     */
+    hideClearButton?: boolean;
     /**
      * Whether the 'Clear' button is disabled.
      */
@@ -253,7 +300,7 @@ interface FilterDropdownProps extends GlobalDomAttributes, SapphireStyleProps, P
 /**
  * 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, ...props }: FilterDropdownProps): JSX.Element;
+declare function FilterDropdown({ children, label, value, isDisabled, isApplyDisabled, isClearDisabled, isOpen: isOpenProp, applyButtonLabel, clearButtonLabel, hideClearButton, defaultOpen, hasApplyButton, noMaxWidth, onApply, onClear, onOpenChange, buttonSize, ...props }: FilterDropdownProps): JSX.Element;
 
 interface SearchableSelectFilterProps extends GlobalDomAttributes, SapphireStyleProps, Omit<FilterDropdownProps, 'children'> {
     /**
@@ -345,8 +392,20 @@ declare type NumberFieldRef = FocusableRefValue<HTMLInputElement, HTMLDivElement
     getInputElement(): HTMLInputElement | null;
 };
 interface NumberFieldProps extends SapphireNumberFieldProps, PressEvents, SapphireStyleProps, GlobalDomAttributes {
-    prefix?: ReactNode;
-    postfix?: ReactNode;
+    /**
+     * A string or element to show before / after the input value.
+     *
+     * By default (`'auto'`), the component will automatically extract currency/unit symbols
+     * from the locale formatter and display them as prefix/postfix.
+     * If you provide a custom prefix or postfix, those will be used instead and
+     * the extracted symbols will be ignored.
+     *
+     * @default 'auto' - automatically extracts currency/unit symbols from locale formatter
+     */
+    affix?: 'auto' | {
+        prefix?: ReactNode;
+        postfix?: ReactNode;
+    };
     inputRef?: RefObject<HTMLInputElement | null>;
     /**
      * A note to show below the input.
@@ -380,6 +439,12 @@ interface NumberFieldProps extends SapphireNumberFieldProps, PressEvents, Sapphi
      * @default false
      */
     showButtons?: boolean;
+    /**
+     * Enables automatic formatting of the input value as the user types, based on the provided formatter and affix.
+     *
+     * @default false
+     */
+    autoFormat?: boolean;
 }
 declare const NumberField: React__default.ForwardRefExoticComponent<NumberFieldProps & React__default.RefAttributes<NumberFieldRef>>;
 
@@ -726,4 +791,4 @@ declare const TimeField: <T extends TimeValue>(props: Pick<AriaTimeFieldProps<T>
     ref?: React__default.RefObject<HTMLDivElement> | undefined;
 }) => React__default.ReactElement;
 
-export { _Accordion as Accordion, AccordionContext, AccordionHeadingProps, AccordionItemProps, AccordionPanelProps, AccordionProps, Alert, Autocomplete, AutocompleteProps, BreadcrumbItem, BreadcrumbItemProps, Breadcrumbs, BreadcrumbsProps, FileDropzone, FileDropzoneProps, FileTrigger, FileTriggerProps, FilterDropdown, FilterDropdownProps, Flag, FlagProps, LabeledValue, NumberField, NumberFieldProps, NumberFieldRef, ProgressIndicator, ProgressIndicatorProps, SapphireAlertProps, SearchableSelectFilter, SearchableSelectFilterProps, _Sidebar as Sidebar, SidebarBodyProps, SidebarExpandableItemProps, SidebarHeaderProps, SidebarItemProps, SidebarListProps, SidebarProps, SidebarSectionProps, _Slider as Slider, SliderProps, TagGroup, TagGroupProps, TagItem, TimeField, TimeFieldProps };
+export { _Accordion as Accordion, AccordionContext, AccordionHeadingProps, AccordionItemProps, AccordionPanelProps, AccordionProps, Alert, Amount, AmountProps, Autocomplete, AutocompleteProps, BreadcrumbItem, BreadcrumbItemProps, Breadcrumbs, BreadcrumbsProps, FileDropzone, FileDropzoneProps, FileTrigger, FileTriggerProps, FilterDropdown, FilterDropdownProps, Flag, FlagProps, LabeledValue, NumberField, NumberFieldProps, NumberFieldRef, ProgressIndicator, ProgressIndicatorProps, SapphireAlertProps, SearchableSelectFilter, SearchableSelectFilterProps, _Sidebar as Sidebar, SidebarBodyProps, SidebarExpandableItemProps, SidebarHeaderProps, SidebarItemProps, SidebarListProps, SidebarProps, SidebarSectionProps, _Slider as Slider, SliderProps, TagGroup, TagGroupProps, TagItem, TimeField, TimeFieldProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danske/sapphire-react-lab",
-  "version": "0.104.0",
+  "version": "0.105.1",
   "license": "SEE LICENSE IN LICENSE",
   "description": "Experimental React components of the Sapphire Design System from Danske Bank A/S",
   "exports": {
@@ -25,53 +25,53 @@
   },
   "peerDependencies": {
     "@danske/sapphire-icons": "^3.1.0",
-    "@danske/sapphire-react": "^5.9.0",
+    "@danske/sapphire-react": "^5.12.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
   "devDependencies": {
     "@danske/sapphire-icons": "^3.1.0",
-    "@danske/sapphire-react": "^5.11.0",
+    "@danske/sapphire-react": "^5.13.0",
     "@types/react-transition-group": "^4.4.5",
     "cross-env": "^7.0.3"
   },
   "dependencies": {
-    "@danske/sapphire-css": "^49.0.0",
-    "@internationalized/date": "^3.10.1",
+    "@danske/sapphire-css": "^50.1.0",
+    "@internationalized/date": "^3.11.0",
     "@internationalized/string": "^3.2.7",
-    "@react-aria/breadcrumbs": "^3.5.29",
-    "@react-aria/button": "^3.14.3",
-    "@react-aria/collections": "^3.0.0",
-    "@react-aria/combobox": "^3.14.1",
-    "@react-aria/datepicker": "^3.15.3",
-    "@react-aria/dialog": "^3.5.32",
-    "@react-aria/dnd": "^3.11.4",
-    "@react-aria/focus": "^3.21.3",
-    "@react-aria/i18n": "^3.12.14",
-    "@react-aria/interactions": "^3.26.0",
-    "@react-aria/label": "^3.7.23",
-    "@react-aria/listbox": "^3.15.0",
-    "@react-aria/numberfield": "^3.12.3",
-    "@react-aria/overlays": "^3.31.0",
-    "@react-aria/progress": "^3.4.28",
-    "@react-aria/tag": "^3.7.3",
-    "@react-aria/utils": "^3.32.0",
-    "@react-aria/visually-hidden": "^3.8.29",
+    "@react-aria/breadcrumbs": "^3.5.31",
+    "@react-aria/button": "^3.14.4",
+    "@react-aria/collections": "^3.0.2",
+    "@react-aria/combobox": "^3.14.2",
+    "@react-aria/datepicker": "^3.16.0",
+    "@react-aria/dialog": "^3.5.33",
+    "@react-aria/dnd": "^3.11.5",
+    "@react-aria/focus": "^3.21.4",
+    "@react-aria/i18n": "^3.12.15",
+    "@react-aria/interactions": "^3.27.0",
+    "@react-aria/label": "^3.7.24",
+    "@react-aria/listbox": "^3.15.2",
+    "@react-aria/numberfield": "^3.12.4",
+    "@react-aria/overlays": "^3.31.1",
+    "@react-aria/progress": "^3.4.29",
+    "@react-aria/tag": "^3.8.0",
+    "@react-aria/utils": "^3.33.0",
+    "@react-aria/visually-hidden": "^3.8.30",
     "@react-spectrum/utils": "^3.12.5",
-    "@react-stately/collections": "^3.12.8",
-    "@react-stately/combobox": "^3.12.1",
-    "@react-stately/datepicker": "^3.15.3",
-    "@react-stately/list": "^3.13.2",
-    "@react-stately/numberfield": "^3.10.3",
-    "@react-stately/overlays": "^3.6.21",
-    "@react-stately/toggle": "^3.9.3",
-    "@react-stately/tree": "^3.9.4",
+    "@react-stately/collections": "^3.12.9",
+    "@react-stately/combobox": "^3.12.2",
+    "@react-stately/datepicker": "^3.16.0",
+    "@react-stately/list": "^3.13.3",
+    "@react-stately/numberfield": "^3.10.4",
+    "@react-stately/overlays": "^3.6.22",
+    "@react-stately/toggle": "^3.9.4",
+    "@react-stately/tree": "^3.9.5",
     "@react-stately/utils": "^3.11.0",
-    "@react-types/dialog": "^3.5.22",
-    "@react-types/shared": "^3.32.1",
+    "@react-types/dialog": "^3.5.23",
+    "@react-types/shared": "^3.33.0",
     "clsx": "^1.1.1",
-    "react-aria-components": "^1.14.0",
+    "react-aria-components": "^1.15.1",
     "react-transition-group": "^4.4.5"
   },
-  "gitHead": "95e11ee77650ba6158811bcc5969bc7c7aaab530"
+  "gitHead": "6e7cb3028dc134adc624e161700df8cb3bc3bfb7"
 }