@danske/sapphire-react-lab 0.79.1 → 0.81.0

package/build/esm/NumberField/src/useAutofillStyle.js

@@ -0,0 +1,21 @@
+import { useState } from 'react';
+
+function useAutofillStyle(inputRef) {
+  const [styles, setStyles] = useState({});
+  const updateStyle = () => {
+    const input = inputRef.current;
+    if (input) {
+      const color = window.getComputedStyle(input).backgroundColor;
+      setStyles({
+        boxShadow: `-100px 0 ${color}, 100px 0 ${color}`
+      });
+    }
+  };
+  return {
+    autofillStyles: styles,
+    updateStyle
+  };
+}
+
+export { useAutofillStyle };
+//# sourceMappingURL=useAutofillStyle.js.map

package/build/esm/NumberField/src/useAutofillStyle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAutofillStyle.js","sources":["../../../../src/NumberField/src/useAutofillStyle.ts"],"sourcesContent":["import { CSSProperties, RefObject, useState } from 'react';\n\ninterface UseAutofillStyle {\n  autofillStyles: CSSProperties;\n  updateStyle: () => void;\n}\n\n//Copied from TextFieldBase, once NumberField moves into Core, this file can be removed and the import updated\nexport function useAutofillStyle<T>(\n  inputRef: RefObject<\n    T extends 'input' ? HTMLInputElement : HTMLTextAreaElement\n  >\n): UseAutofillStyle {\n  const [styles, setStyles] = useState<CSSProperties>({});\n\n  const updateStyle = () => {\n    const input = inputRef.current;\n    if (input) {\n      const color = window.getComputedStyle(input).backgroundColor;\n\n      setStyles({\n        boxShadow: `-100px 0 ${color}, 100px 0 ${color}`,\n      });\n    }\n  };\n\n  return {\n    autofillStyles: styles,\n    updateStyle,\n  };\n}\n"],"names":[],"mappings":";;AAQO,SAAA,gBAAA,CACL,QAGkB,EAAA;AAClB,EAAM,MAAA,CAAC,MAAQ,EAAA,SAAA,CAAA,GAAa,QAAwB,CAAA,EAAA,CAAA,CAAA;AAEpD,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,MAAM,QAAQ,QAAS,CAAA,OAAA,CAAA;AACvB,IAAA,IAAI,KAAO,EAAA;AACT,MAAM,MAAA,KAAA,GAAQ,MAAO,CAAA,gBAAA,CAAiB,KAAO,CAAA,CAAA,eAAA,CAAA;AAE7C,MAAU,SAAA,CAAA;AAAA,QACR,SAAA,EAAW,YAAY,KAAkB,CAAA,UAAA,EAAA,KAAA,CAAA,CAAA;AAAA,OAAA,CAAA,CAAA;AAAA,KAAA;AAAA,GAAA,CAAA;AAK/C,EAAO,OAAA;AAAA,IACL,cAAgB,EAAA,MAAA;AAAA,IAChB,WAAA;AAAA,GAAA,CAAA;AAAA;;;;"}

package/build/esm/NumberField/src/useSapphireNumberField.js

@@ -0,0 +1,49 @@
+import { useNumberField } from '@react-aria/numberfield';
+import { useNumberFieldState } from '@react-stately/numberfield';
+import { useLocale } from '@react-aria/i18n';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const useSapphireNumberField = (_a, ref) => {
+  var _b = _a, { error } = _b, numberFieldProps = __objRest(_b, ["error"]);
+  const { locale } = useLocale();
+  const numberFieldState = useNumberFieldState(__spreadProps(__spreadValues({}, numberFieldProps), {
+    locale
+  }));
+  const numberFieldAria = useNumberField(__spreadProps(__spreadValues({}, numberFieldProps), {
+    validationState: error === false || error === void 0 ? void 0 : "invalid"
+  }), numberFieldState, ref);
+  return numberFieldAria;
+};
+
+export { useSapphireNumberField };
+//# sourceMappingURL=useSapphireNumberField.js.map

package/build/esm/NumberField/src/useSapphireNumberField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSapphireNumberField.js","sources":["../../../../src/NumberField/src/useSapphireNumberField.ts"],"sourcesContent":["import { RefObject } from 'react';\nimport {\n  AriaNumberFieldProps,\n  NumberFieldAria,\n  useNumberField,\n} from '@react-aria/numberfield';\nimport { useNumberFieldState } from '@react-stately/numberfield';\nimport { useLocale } from '@react-aria/i18n';\nimport { Validation } from '@react-types/shared';\n\nexport interface SapphireNumberFieldProps\n  /**\n   * Reasons to omit the below properties:\n   * - Validation:\n   *   - validationState: we handle that with the `error` prop instead.\n   * - errorMessage: our own error-prop covers the same.\n   */\n  extends Omit<\n    AriaNumberFieldProps,\n    'errorMessage' | keyof Omit<Validation<unknown>, 'isRequired'>\n  > {\n  /**\n   * Whether the input should render as having an error and an error message.\n   * This also sets the appropriate `aria` attributes on the input.\n   *\n   * A `boolean` sets the error state.\n   * A `string` sets the error state with an additional error message.\n   *\n   * **An error message is strongly recommended because an error should always have an explanation about how to fix it.**\n   */\n  error?: boolean | string;\n}\n\nexport const useSapphireNumberField = (\n  { error, ...numberFieldProps }: SapphireNumberFieldProps,\n  ref: RefObject<HTMLInputElement>\n): NumberFieldAria => {\n  const { locale } = useLocale();\n  const numberFieldState = useNumberFieldState({\n    ...numberFieldProps,\n    locale,\n  });\n  const numberFieldAria = useNumberField(\n    {\n      ...numberFieldProps,\n      validationState:\n        error === false || error === undefined ? undefined : 'invalid',\n    },\n    numberFieldState,\n    ref\n  );\n\n  return numberFieldAria;\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCa,MAAA,sBAAA,GAAyB,CACpC,EAAA,EACA,GACoB,KAAA;AAFpB,EAAA,IAAA,EAAA,GAAA,EAAA,EAAE,EAAF,KAAA,EAAA,GAAA,EAAA,EAAY,gBAAZ,GAAA,SAAA,CAAA,EAAA,EAAY,CAAV,OAAA,CAAA,CAAA,CAAA;AAGF,EAAA,MAAM,EAAE,MAAW,EAAA,GAAA,SAAA,EAAA,CAAA;AACnB,EAAM,MAAA,gBAAA,GAAmB,mBAAoB,CAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACxC,gBADwC,CAAA,EAAA;AAAA,IAE3C,MAAA;AAAA,GAAA,CAAA,CAAA,CAAA;AAEF,EAAM,MAAA,eAAA,GAAkB,cACtB,CAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACK,gBADL,CAAA,EAAA;AAAA,IAEE,eACE,EAAA,KAAA,KAAU,KAAS,IAAA,KAAA,KAAU,SAAY,KAAY,CAAA,GAAA,SAAA;AAAA,GAAA,CAAA,EAEzD,gBACA,EAAA,GAAA,CAAA,CAAA;AAGF,EAAO,OAAA,eAAA,CAAA;AAAA;;;;"}

package/build/esm/index.js

@@ -17,5 +17,7 @@ export { Accordion } from './Accordion/index.js';
 export { Typography } from './Typography/index.js';
 export { Fieldset } from './Fieldset/src/Fieldset.js';
 export { Avatar } from './Avatar/src/Avatar.js';
+export { AlertDialog } from './AlertDialog/src/AlertDialog.js';
+export { NumberField } from './NumberField/src/NumberField.js';
 export { useLocale } from '@react-aria/i18n';
 //# sourceMappingURL=index.js.map

package/build/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}

package/build/index.d.ts

@@ -1,9 +1,9 @@
 import * as _react_types_shared from '@react-types/shared';
-import { PressEvents, Validation, RangeValue, HelpTextProps, LabelableProps, CollectionBase, DOMProps, Expandable, ItemProps } from '@react-types/shared';
+import { PressEvents, Validation, RangeValue, HelpTextProps, LabelableProps, CollectionBase, DOMProps, Expandable, ItemProps, FocusableRefValue } from '@react-types/shared';
 import * as React from 'react';
-import React__default, { ReactNode, ComponentType } from 'react';
+import React__default, { ReactNode, ComponentType, RefObject } from 'react';
 import { AriaToggleButtonProps } from '@react-aria/button';
-import { SapphireStyleProps, PopoverTriggerProps, HeadingProps, TextStyleProps } from '@danske/sapphire-react';
+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';
@@ -13,6 +13,8 @@ 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 { AriaModalOverlayProps } from '@react-aria/overlays';
+import { AriaNumberFieldProps } from '@react-aria/numberfield';
 export { useLocale } from '@react-aria/i18n';
 
 declare type SapphireToggleButtonProps = Omit<AriaToggleButtonProps<'button'>, 'elementType' | 'type'> & SapphireStyleProps & PressEvents & {
@@ -479,18 +481,23 @@ declare const DateRangeField: <T extends DateValue$1, P extends string>(props: O
 declare const isEndDateBeforeStartDate: (dateRange?: RangeValue<DateValue$1> | null) => boolean | null | undefined;
 declare const isDateOutsideValidRange: (value?: DateValue$1 | null, minValue?: DateValue$1 | null, maxValue?: DateValue$1 | null) => "after" | "before" | undefined;
 
+declare type FeedbackMessageVariant = 'success' | 'error' | 'warning' | 'informative' | 'neutral';
 interface SapphireFeedbackMessageProps extends SapphireStyleProps {
     /**
      * Heading content, rendered in a sapphire Heading component.
      */
-    heading: React__default.ReactNode;
+    heading: React__default.ReactNode | string;
     /**
      * The type of message.
      * The 'error' and 'success' are meant to attract more attention.
      *
      * @default 'neutral'
      */
-    type?: 'error' | 'success' | 'neutral';
+    variant?: FeedbackMessageVariant;
+    /**
+     * Optional icon to override the default icon for the message type.
+     */
+    icon?: React__default.ReactNode;
     /**
      * Optional description, rendered as a section below heading.
      */
@@ -504,7 +511,7 @@ interface SapphireFeedbackMessageProps extends SapphireStyleProps {
 /**
  * Implements layout and style of a feedback message.
  */
-declare const FeedbackMessage: ({ heading, body, actions, type, ...otherProps }: SapphireFeedbackMessageProps) => JSX.Element;
+declare const FeedbackMessage: ({ heading, body, actions, variant, icon, ...otherProps }: SapphireFeedbackMessageProps) => JSX.Element;
 
 declare type SapphireSearchFieldProps<T extends object> = SapphireStyleProps & Omit<AriaSearchFieldProps, keyof HelpTextProps | keyof Validation<unknown> | keyof LabelableProps> & AutocompleteProps<T> & {
     /**
@@ -756,7 +763,7 @@ declare type SapphireAvatarProps = SapphireStyleProps & {
     /**
      * @default 'medium'
      */
-    size?: 'large' | 'medium' | 'small' | 'extraSmall';
+    size?: 'extraLarge' | 'large' | 'medium' | 'small' | 'extraSmall';
     /**
      * The background color of the avatar.
      * Can either be semantic or one of the named decorative colors.
@@ -773,4 +780,97 @@ declare type SapphireAvatarProps = SapphireStyleProps & {
 });
 declare const Avatar: ({ monogram, icon, color, size, ...props }: SapphireAvatarProps) => React__default.ReactElement;
 
-export { _Accordion as Accordion, Avatar, Calendar, CalendarView, DateField, DateFieldProps, DateRangeField, DateRangeFieldProps, FeedbackMessage, Fieldset, FieldsetProps, FilterDropdown, NotificationBadge, NotificationBadgeProps, PredefinedDateRange, RangeCalendar, SapphireAccordionHeadingProps, SapphireAccordionItemProps, SapphireAccordionProps, SapphireAvatarProps, SapphireCalendarProps, SapphireFeedbackMessageProps, SapphireFilterDropdownProps, SapphireRangeCalendarProps, SapphireSearchFieldProps, SapphireToggleButtonProps, SearchField, ShowToastFn, ShowToastOptions, Spinner, SpinnerProps, ToastProvider, ToastProviderProps, ToggleButton, Typography, TypographyBodyProps, TypographyCaptionProps, TypographyHeadingProps, TypographySubheadingProps, isDateOutsideValidRange, isEndDateBeforeStartDate, useShowToast };
+declare type SapphireAlertDialogProps = AriaModalOverlayProps & SapphireStyleProps & Pick<DialogProps, 'isOpen' | 'onClose'> & Omit<SapphireFeedbackMessageProps, 'heading' | 'actions'> & {
+    /**
+     *
+     * @default "horizontal"
+     */
+    actionsOrientation?: 'vertical' | 'horizontal';
+    /**
+     * The elements that will be rendered in the footer of the dialog.
+     */
+    actions: ReactNode;
+    /**
+     * The title of the dialog.
+     */
+    heading: string;
+};
+declare const AlertDialog: React__default.ForwardRefExoticComponent<AriaModalOverlayProps & SapphireStyleProps & Pick<DialogProps, "isOpen" | "onClose"> & Omit<SapphireFeedbackMessageProps, "heading" | "actions"> & {
+    /**
+     *
+     * @default "horizontal"
+     */
+    actionsOrientation?: "horizontal" | "vertical" | undefined;
+    /**
+     * The elements that will be rendered in the footer of the dialog.
+     */
+    actions: ReactNode;
+    /**
+     * The title of the dialog.
+     */
+    heading: string;
+} & React__default.RefAttributes<_react_types_shared.DOMRefValue<HTMLDivElement>>>;
+
+interface SapphireNumberFieldProps
+/**
+ * Reasons to omit the below properties:
+ * - Validation:
+ *   - validationState: we handle that with the `error` prop instead.
+ * - errorMessage: our own error-prop covers the same.
+ */
+ extends Omit<AriaNumberFieldProps, 'errorMessage' | keyof Omit<Validation<unknown>, 'isRequired'>> {
+    /**
+     * 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.
+     * A `string` 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 | string;
+}
+
+declare type NumberFieldRef = FocusableRefValue<HTMLInputElement, HTMLDivElement> & {
+    getInputElement(): HTMLInputElement | null;
+};
+interface NumberFieldProps extends SapphireNumberFieldProps, PressEvents, SapphireStyleProps {
+    prefix?: ReactNode;
+    postfix?: ReactNode;
+    inputRef?: RefObject<HTMLInputElement | null>;
+    /**
+     * A note to show below the input.
+     * If the input has an error message, this note will be replaced by that.
+     */
+    note?: ReactNode;
+    /**
+     * A ContextualHelp to render next to the label.
+     */
+    contextualHelp?: ReactNode;
+    /**
+     * To visually indicate if this field is required or optional.
+     * @default false
+     */
+    necessityIndicator?: boolean;
+    /**
+     * @default 'large'
+     */
+    size?: 'large' | 'medium';
+    /**
+     * Aligns the text inside the input fields without affecting the positioning of the label of the field.
+     */
+    alignInputRight?: boolean;
+    /**
+     * Places the label either above (default) or on the side of the control.
+     * @default 'above'
+     */
+    labelPlacement?: 'side' | 'above';
+    /**
+     * To show the buttons for incrementing and decrementing the value.
+     * @default false
+     */
+    showButtons?: boolean;
+}
+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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danske/sapphire-react-lab",
-  "version": "0.79.1",
+  "version": "0.81.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": "^26.6.0",
+    "@danske/sapphire-css": "^27.1.0",
     "@internationalized/date": "^3.5.2",
     "@internationalized/string": "^3.2.1",
     "@react-aria/accordion": "^3.0.0-alpha.27",
@@ -49,6 +49,7 @@
     "@react-aria/i18n": "^3.10.2",
     "@react-aria/interactions": "^3.21.1",
     "@react-aria/label": "^3.7.6",
+    "@react-aria/numberfield": "^3.11.3",
     "@react-aria/overlays": "^3.21.1",
     "@react-aria/searchfield": "^3.7.3",
     "@react-aria/toast": "^3.0.0-beta.10",
@@ -59,6 +60,7 @@
     "@react-stately/collections": "^3.10.5",
     "@react-stately/combobox": "^3.8.2",
     "@react-stately/datepicker": "^3.9.2",
+    "@react-stately/numberfield": "^3.9.3",
     "@react-stately/searchfield": "^3.5.1",
     "@react-stately/toast": "^3.0.0-beta.2",
     "@react-stately/toggle": "^3.7.2",
@@ -69,5 +71,5 @@
     "clsx": "^1.1.1",
     "react-transition-group": "^4.4.5"
   },
-  "gitHead": "18d399194b252d505e09222e08996991f1a9d68a"
+  "gitHead": "b32c314ce39dda19db3c38304864b4e63c0f9470"
 }