@danske/sapphire-react-lab 0.82.2 → 0.84.0

package/build/index.d.ts

@@ -1,18 +1,20 @@
 import * as _react_types_shared from '@react-types/shared';
-import { PressEvents, Validation, RangeValue, HelpTextProps, LabelableProps, CollectionBase, DOMProps, Expandable, ItemProps, FocusableRefValue } from '@react-types/shared';
+import { PressEvents, Validation, RangeValue, HelpTextProps, LabelableProps, CollectionBase, DOMProps, Expandable, ItemProps, AriaLabelingProps, FocusableRefValue } from '@react-types/shared';
 import * as React from 'react';
 import React__default, { ReactNode, ComponentType, RefObject } from 'react';
 import { AriaToggleButtonProps } from '@react-aria/button';
 import { SapphireStyleProps, PopoverTriggerProps, HeadingProps, TextStyleProps, DialogProps } from '@danske/sapphire-react';
 import { DateValue } from '@internationalized/date';
 import { AriaCalendarProps, AriaRangeCalendarProps } from '@react-aria/calendar';
-import { RangeCalendarStateOptions as RangeCalendarStateOptions$1 } from '@react-stately/calendar';
+import { CalendarStateOptions, RangeCalendarStateOptions as RangeCalendarStateOptions$1 } from '@react-stately/calendar';
 import { DateValue as DateValue$1, AriaDatePickerProps, AriaDateRangePickerProps } from '@react-aria/datepicker';
 import { DateRangePickerStateOptions as DateRangePickerStateOptions$1 } from '@react-stately/datepicker';
 import { ComboBoxProps } from '@react-types/combobox';
 import { AriaSearchFieldProps } from '@react-aria/searchfield';
 import { AriaToastRegionProps } from '@react-aria/toast';
 import { ToastState } from '@react-stately/toast';
+import { HoverProps } from '@react-aria/interactions';
+import { DropOptions } from '@react-aria/dnd';
 import { AriaModalOverlayProps } from '@react-aria/overlays';
 import { AriaNumberFieldProps } from '@react-aria/numberfield';
 export { useLocale } from '@react-aria/i18n';
@@ -47,7 +49,7 @@ interface ButtonWithoutIconProps {
 declare const ToggleButton: React__default.ForwardRefExoticComponent<SapphireToggleButtonProps & React__default.RefAttributes<_react_types_shared.FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>>;
 
 declare type CalendarView = 'days' | 'months' | 'years';
-interface SapphireCalendarStateOptions {
+interface SapphireCalendarStateOptions<T extends DateValue> extends CalendarStateOptions<T> {
     /**
      * Controls the calendar's view (day, month, year).
      */
@@ -62,7 +64,7 @@ interface SapphireCalendarStateOptions {
     onViewChange?: (value: CalendarView) => void;
 }
 
-interface SapphireCalendarProps extends SapphireStyleProps, Omit<AriaCalendarProps<DateValue>, 'validationState' | 'errorMessage'>, SapphireCalendarStateOptions {
+interface SapphireCalendarProps<T extends DateValue = DateValue> extends SapphireStyleProps, Omit<AriaCalendarProps<T>, 'validationState' | 'errorMessage'>, Omit<SapphireCalendarStateOptions<T>, 'createCalendar'> {
     /**
      * Whether week numbers are visible as a first column
      */
@@ -73,7 +75,7 @@ interface SapphireCalendarProps extends SapphireStyleProps, Omit<AriaCalendarPro
  * month, by default, and the user can navigate to previous and next months. It's also possible
  * to navigate to months and years view, to quickly jump to a date far away from the focused date.
  */
-declare const Calendar: ({ showWeekNumbers, ...props }: Omit<SapphireCalendarProps, 'locale'>) => JSX.Element;
+declare const Calendar: <T extends DateValue = DateValue>({ showWeekNumbers, ...props }: Omit<SapphireCalendarProps<T>, "locale">) => JSX.Element;
 
 declare type OriginalOnChange$1<T extends DateValue> = NonNullable<RangeCalendarStateOptions$1<T>['onChange']>;
 declare type RangeCalendarStateOptions<T extends DateValue, P extends string> = Omit<RangeCalendarStateOptions$1<T>, 'onChange'> & {
@@ -87,7 +89,7 @@ interface PredefinedDateRange {
         end: DateValue;
     };
 }
-interface SapphireRangeCalendarProps<P extends string = string> extends SapphireStyleProps, Omit<AriaRangeCalendarProps<DateValue>, 'validationState' | 'errorMessage' | 'allowsNonContiguousRanges' | 'onChange'> {
+interface SapphireRangeCalendarProps<T extends DateValue = DateValue, P extends string = string> extends SapphireStyleProps, Omit<AriaRangeCalendarProps<T>, 'validationState' | 'errorMessage' | 'allowsNonContiguousRanges' | 'onChange'> {
     /**
      * This callback also gives you the information if the selected range was a
      * predefined date according to the `predefinedRanges` prop.
@@ -114,8 +116,8 @@ interface SapphireRangeCalendarProps<P extends string = string> extends Sapphire
  * Displays a calendar and allow users to select a consecutive range of dates.
  * One or two months can be visible at the same time.
  */
-declare const _RangeCalendar: <T extends string>({ showWeekNumbers, showTwoMonths, allowUnavailableDatesWithinRange, predefinedRanges, ...props }: SapphireRangeCalendarProps<T>, forwardedRef: React__default.ForwardedRef<HTMLDivElement>) => JSX.Element;
-declare const RangeCalendar: <T extends string>(props: SapphireRangeCalendarProps<T> & {
+declare const _RangeCalendar: <T extends DateValue = DateValue, P extends string = string>({ showWeekNumbers, showTwoMonths, allowUnavailableDatesWithinRange, predefinedRanges, ...props }: SapphireRangeCalendarProps<T, P>, forwardedRef: React__default.ForwardedRef<HTMLDivElement>) => JSX.Element;
+declare const RangeCalendar: <T extends DateValue, P extends string>(props: SapphireRangeCalendarProps<T, P> & {
     ref?: React__default.ForwardedRef<HTMLDivElement> | undefined;
 }) => ReturnType<typeof _RangeCalendar>;
 
@@ -786,6 +788,51 @@ declare type SapphireAvatarProps = SapphireStyleProps & {
 });
 declare const Avatar: ({ monogram, icon, color, size, ...props }: SapphireAvatarProps) => React__default.ReactElement;
 
+interface FileSelectProps {
+    /**
+     * List of file types that are allowed to be selected using the file select.
+     * When no list is passed, all file types will be allowed to be selected.
+     * @default ""
+     */
+    acceptedFileTypes?: string[];
+    /**
+     * Whether multiple files are allowed to be selected using the file select.
+     * @default "false"
+     */
+    allowsMultiple?: boolean;
+}
+interface FileTriggerProps extends FileSelectProps {
+    /**
+     * Callback for file selection.
+     * @param files - the list of selected files
+     * @default "() => null"
+     */
+    onSelect?: (files: FileList | null) => void;
+    isDisabled?: boolean;
+    children?: React__default.ReactNode;
+}
+declare const FileTrigger: React__default.ForwardRefExoticComponent<FileTriggerProps & React__default.RefAttributes<HTMLInputElement>>;
+
+interface FileDropzoneProps extends SapphireStyleProps, Omit<DropOptions, 'hasDropButton'>, HoverProps, FileSelectProps, AriaLabelingProps {
+    /**
+     * Whether the dropzone has an error
+     * @default false
+     */
+    hasError?: boolean;
+    /**
+     * The body text of the dropzone which can contain the instructions for the files to be uploaded.
+     * Can be rendered differently based on the `isDropping` parameter, which is true if a file is about to be dropped in the zone.
+     * @param isDropping - boolean that marks whether a payload is about to be dropped in the dropzone.
+     */
+    renderInstruction: (isDropping: boolean) => string;
+    /**
+     * Function that is called when the file select is opened on press, before any file is selected.
+     * @default "() => null"
+     */
+    onFileSelectOpen?: () => void;
+}
+declare const FileDropzone: React__default.ForwardRefExoticComponent<Omit<FileDropzoneProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
+
 declare type SapphireAlertDialogProps = AriaModalOverlayProps & SapphireStyleProps & Pick<DialogProps, 'isOpen' | 'onClose'> & Omit<SapphireFeedbackMessageProps, 'heading' | 'actions'> & {
     /**
      *
@@ -879,4 +926,4 @@ interface NumberFieldProps extends SapphireNumberFieldProps, PressEvents, Sapphi
 }
 declare const NumberField: React__default.ForwardRefExoticComponent<NumberFieldProps & React__default.RefAttributes<NumberFieldRef>>;
 
-export { _Accordion as Accordion, AlertDialog, Avatar, Calendar, CalendarView, DateField, DateFieldProps, DateRangeField, DateRangeFieldProps, FeedbackMessage, Fieldset, FieldsetProps, FilterDropdown, NotificationBadge, NotificationBadgeProps, NumberField, NumberFieldProps, NumberFieldRef, PredefinedDateRange, RangeCalendar, SapphireAccordionHeadingProps, SapphireAccordionItemProps, SapphireAccordionProps, SapphireAlertDialogProps, SapphireAvatarProps, SapphireCalendarProps, SapphireFeedbackMessageProps, SapphireFilterDropdownProps, SapphireRangeCalendarProps, SapphireSearchFieldProps, SapphireToggleButtonProps, SearchField, ShowToastFn, ShowToastOptions, Spinner, SpinnerProps, ToastProvider, ToastProviderProps, ToggleButton, Typography, TypographyBodyProps, TypographyCaptionProps, TypographyHeadingProps, TypographySubheadingProps, isDateOutsideValidRange, isEndDateBeforeStartDate, useShowToast };
+export { _Accordion as Accordion, AlertDialog, Avatar, Calendar, CalendarView, DateField, DateFieldProps, DateRangeField, DateRangeFieldProps, FeedbackMessage, Fieldset, FieldsetProps, FileDropzone, FileDropzoneProps, FileTrigger, FileTriggerProps, FilterDropdown, NotificationBadge, NotificationBadgeProps, NumberField, NumberFieldProps, NumberFieldRef, PredefinedDateRange, RangeCalendar, SapphireAccordionHeadingProps, SapphireAccordionItemProps, SapphireAccordionProps, SapphireAlertDialogProps, SapphireAvatarProps, SapphireCalendarProps, SapphireFeedbackMessageProps, SapphireFilterDropdownProps, SapphireRangeCalendarProps, SapphireSearchFieldProps, SapphireToggleButtonProps, SearchField, ShowToastFn, ShowToastOptions, Spinner, SpinnerProps, ToastProvider, ToastProviderProps, ToggleButton, Typography, TypographyBodyProps, TypographyCaptionProps, TypographyHeadingProps, TypographySubheadingProps, isDateOutsideValidRange, isEndDateBeforeStartDate, useShowToast };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danske/sapphire-react-lab",
-  "version": "0.82.2",
+  "version": "0.84.0",
   "license": "SEE LICENSE IN LICENSE",
   "description": "Experimental React components of the Sapphire Design System from Danske Bank A/S",
   "exports": {
@@ -36,7 +36,7 @@
     "cross-env": "^7.0.3"
   },
   "dependencies": {
-    "@danske/sapphire-css": "^28.0.2",
+    "@danske/sapphire-css": "^28.1.0",
     "@internationalized/date": "^3.5.2",
     "@internationalized/string": "^3.2.1",
     "@react-aria/accordion": "^3.0.0-alpha.27",
@@ -45,6 +45,7 @@
     "@react-aria/combobox": "^3.8.4",
     "@react-aria/datepicker": "^3.9.3",
     "@react-aria/dialog": "^3.5.12",
+    "@react-aria/dnd": "^3.6.1",
     "@react-aria/focus": "^3.16.2",
     "@react-aria/i18n": "^3.10.2",
     "@react-aria/interactions": "^3.21.1",
@@ -71,5 +72,5 @@
     "clsx": "^1.1.1",
     "react-transition-group": "^4.4.5"
   },
-  "gitHead": "7d54dedcb0a2c2b5d5c1146c9b0c665c46c1b8aa"
+  "gitHead": "07a564af42921a372a62519265afe48ec303efdb"
 }