@danske/sapphire-react-lab 0.99.2 → 0.100.0

package/build/index.d.ts

@@ -6,7 +6,8 @@ import { CollectionBase, DOMProps, Expandable, ItemProps, AriaLabelingProps, Foc
 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 { SliderProps as SliderProps$1, SliderThumbProps, BreadcrumbProps, BreadcrumbsProps as BreadcrumbsProps$1, TimeValue } 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'> {
@@ -448,4 +449,93 @@ interface SapphireAlertProps extends SapphireStyleProps {
 }
 declare function Alert({ children, title, variant, ...props }: SapphireAlertProps): React__default.JSX.Element;
 
-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 };
+declare type TimeFieldProps<T extends TimeValue> = Pick<AriaTimeFieldProps<T>, 'isDisabled' | 'isRequired' | 'isReadOnly' | 'label' | 'value' | 'defaultValue' | 'onChange' | 'onFocus' | 'onBlur' | 'shouldForceLeadingZeros'> & SapphireStyleProps & {
+    /**
+     * @default 'lg'
+     */
+    size?: 'lg' | 'md';
+    /**
+     * To visually indicate if this field is required or optional.
+     * @default false
+     */
+    necessityIndicator?: boolean;
+    /**
+     * Places the label either above (default) or on the side of the control.
+     * @default 'above'
+     */
+    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>, "label" | "value" | "isDisabled" | "onFocus" | "onBlur" | "onChange" | "defaultValue" | "isReadOnly" | "isRequired" | "shouldForceLeadingZeros"> & SapphireStyleProps & {
+    /**
+     * @default 'lg'
+     */
+    size?: "md" | "lg" | undefined;
+    /**
+     * To visually indicate if this field is required or optional.
+     * @default false
+     */
+    necessityIndicator?: boolean | undefined;
+    /**
+     * Places the label either above (default) or on the side of the control.
+     * @default 'above'
+     */
+    labelPlacement?: "above" | "side" | undefined;
+    /**
+     * If it should hide the "clear" button when input is not empty.
+     *
+     * @default false
+     */
+    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, TimeField, TimeFieldProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danske/sapphire-react-lab",
-  "version": "0.99.2",
+  "version": "0.100.0",
   "license": "SEE LICENSE IN LICENSE",
   "description": "Experimental React components of the Sapphire Design System from Danske Bank A/S",
   "exports": {
@@ -25,48 +25,50 @@
   },
   "peerDependencies": {
     "@danske/sapphire-icons": "^3.1.0",
-    "@danske/sapphire-react": "^5.6.0",
+    "@danske/sapphire-react": "^5.6.2",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
   "devDependencies": {
     "@danske/sapphire-icons": "^3.1.0",
-    "@danske/sapphire-react": "^5.6.0",
+    "@danske/sapphire-react": "^5.6.2",
     "@types/react-transition-group": "^4.4.5",
     "cross-env": "^7.0.3"
   },
   "dependencies": {
     "@danske/sapphire-css": "^44.0.0",
-    "@internationalized/date": "^3.9.0",
+    "@internationalized/date": "^3.10.0",
     "@internationalized/string": "^3.2.7",
     "@react-aria/accordion": "3.0.0-alpha.37",
-    "@react-aria/button": "^3.14.1",
-    "@react-aria/combobox": "^3.13.1",
-    "@react-aria/dialog": "^3.5.29",
-    "@react-aria/dnd": "^3.11.1",
-    "@react-aria/focus": "^3.21.1",
-    "@react-aria/i18n": "^3.12.12",
-    "@react-aria/interactions": "^3.25.5",
-    "@react-aria/label": "^3.7.21",
-    "@react-aria/numberfield": "^3.12.1",
-    "@react-aria/overlays": "^3.29.0",
-    "@react-aria/progress": "^3.4.26",
-    "@react-aria/tag": "^3.7.1",
-    "@react-aria/utils": "^3.30.1",
-    "@react-aria/visually-hidden": "^3.8.27",
+    "@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",
+    "@react-aria/i18n": "^3.12.13",
+    "@react-aria/interactions": "^3.25.6",
+    "@react-aria/label": "^3.7.22",
+    "@react-aria/numberfield": "^3.12.2",
+    "@react-aria/overlays": "^3.30.0",
+    "@react-aria/progress": "^3.4.27",
+    "@react-aria/tag": "^3.7.2",
+    "@react-aria/utils": "^3.31.0",
+    "@react-aria/visually-hidden": "^3.8.28",
     "@react-spectrum/utils": "^3.12.5",
-    "@react-stately/collections": "^3.12.7",
-    "@react-stately/combobox": "^3.11.1",
-    "@react-stately/list": "^3.13.0",
-    "@react-stately/numberfield": "^3.10.1",
-    "@react-stately/toggle": "^3.9.1",
-    "@react-stately/tree": "^3.9.2",
+    "@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/toggle": "^3.9.2",
+    "@react-stately/tree": "^3.9.3",
     "@react-stately/utils": "^3.10.8",
-    "@react-types/dialog": "^3.5.21",
-    "@react-types/shared": "^3.32.0",
+    "@react-types/dialog": "^3.5.22",
+    "@react-types/shared": "^3.32.1",
     "clsx": "^1.1.1",
-    "react-aria-components": "^1.12.2",
+    "react-aria-components": "^1.13.0",
     "react-transition-group": "^4.4.5"
   },
-  "gitHead": "8e444e6b304060b29ba5ba3485086b0eddae52e1"
+  "gitHead": "9f90f2527ecc5fdd374638c518ab372b71f88709"
 }