@danske/sapphire-react-lab 0.77.4 → 0.80.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/Toast/src/ToastRegion.js

@@ -1,6 +1,6 @@
 import React, { useRef } from 'react';
 import { useToastRegion } from '@react-aria/toast';
-import { SapphireOverlayContainer, ThemeRoot } from '@danske/sapphire-react';
+import { useThemeContext, SapphireOverlayContainer, ThemeRoot } from '@danske/sapphire-react';
 import styles from '@danske/sapphire-css/components/toast/toast.module.css';
 import { Toast } from './Toast.js';
 
@@ -39,12 +39,15 @@ const ToastRegion = (_a) => {
   var _b = _a, { state } = _b, props = __objRest(_b, ["state"]);
   const ref = useRef(null);
   const { regionProps } = useToastRegion(props, state, ref);
+  const { overlayZIndex = 100 } = useThemeContext();
   return /* @__PURE__ */ React.createElement(SapphireOverlayContainer, null, /* @__PURE__ */ React.createElement(ThemeRoot, {
     contrast: true
   }, /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, regionProps), {
     ref,
     className: styles["sapphire-toast-container"],
-    style: { zIndex: 200 }
+    style: {
+      zIndex: overlayZIndex + 200
+    }
   }), state.visibleToasts.map((toast) => /* @__PURE__ */ React.createElement(Toast, __spreadProps(__spreadValues({}, props), {
     key: toast.key,
     toast,

package/build/esm/Toast/src/ToastRegion.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastRegion.js","sources":["../../../../src/Toast/src/ToastRegion.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { AriaToastRegionProps, useToastRegion } from '@react-aria/toast';\nimport {\n  SapphireOverlayContainer,\n  SapphireStyleProps,\n  ThemeRoot,\n} from '@danske/sapphire-react';\n\nimport styles from '@danske/sapphire-css/components/toast/toast.module.css';\nimport { ToastState } from '@react-stately/toast';\nimport { Toast } from './Toast';\n\nexport type ToastRegionProps<T> = AriaToastRegionProps &\n  SapphireStyleProps & {\n    state: ToastState<T>;\n  };\n\nexport const ToastRegion = <T,>({ state, ...props }: ToastRegionProps<T>) => {\n  const ref = useRef(null);\n  const { regionProps } = useToastRegion(props, state, ref);\n\n  return (\n    <SapphireOverlayContainer>\n      <ThemeRoot contrast>\n        <div\n          {...regionProps}\n          ref={ref}\n          className={styles['sapphire-toast-container']}\n          style={{ zIndex: 200 } /* above overlays from @danske/sapphire-react */}\n        >\n          {state.visibleToasts.map((toast) => (\n            <Toast {...props} key={toast.key} toast={toast} state={state} />\n          ))}\n        </div>\n      </ThemeRoot>\n    </SapphireOverlayContainer>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBa,MAAA,WAAA,GAAc,CAAK,EAA6C,KAAA;AAA7C,EAAA,IAAA,EAAA,GAAA,EAAA,EAAE,EAAF,KAAA,EAAA,GAAA,EAAA,EAAY,KAAZ,GAAA,SAAA,CAAA,EAAA,EAAY,CAAV,OAAA,CAAA,CAAA,CAAA;AAChC,EAAA,MAAM,MAAM,MAAO,CAAA,IAAA,CAAA,CAAA;AACnB,EAAA,MAAM,EAAE,WAAA,EAAA,GAAgB,cAAe,CAAA,KAAA,EAAO,KAAO,EAAA,GAAA,CAAA,CAAA;AAErD,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,wBAAA,EAAD,IACE,kBAAA,KAAA,CAAA,aAAA,CAAC,SAAD,EAAA;AAAA,IAAW,QAAQ,EAAA,IAAA;AAAA,GACjB,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACM,WADN,CAAA,EAAA;AAAA,IAEE,GAAA;AAAA,IACA,WAAW,MAAO,CAAA,0BAAA,CAAA;AAAA,IAClB,KAAA,EAAO,EAAE,MAAQ,EAAA,GAAA,EAAA;AAAA,GAEhB,CAAA,EAAA,KAAA,CAAM,cAAc,GAAI,CAAA,CAAC,0BACvB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAD,iCAAW,KAAX,CAAA,EAAA;AAAA,IAAkB,KAAK,KAAM,CAAA,GAAA;AAAA,IAAK,KAAA;AAAA,IAAc,KAAA;AAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA;;;;"}
+{"version":3,"file":"ToastRegion.js","sources":["../../../../src/Toast/src/ToastRegion.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { AriaToastRegionProps, useToastRegion } from '@react-aria/toast';\nimport {\n  SapphireOverlayContainer,\n  SapphireStyleProps,\n  ThemeRoot,\n  useThemeContext,\n} from '@danske/sapphire-react';\n\nimport styles from '@danske/sapphire-css/components/toast/toast.module.css';\nimport { ToastState } from '@react-stately/toast';\nimport { Toast } from './Toast';\n\nexport type ToastRegionProps<T> = AriaToastRegionProps &\n  SapphireStyleProps & {\n    state: ToastState<T>;\n  };\n\nexport const ToastRegion = <T,>({ state, ...props }: ToastRegionProps<T>) => {\n  const ref = useRef(null);\n  const { regionProps } = useToastRegion(props, state, ref);\n  const { overlayZIndex = 100 } = useThemeContext();\n\n  return (\n    <SapphireOverlayContainer>\n      <ThemeRoot contrast>\n        <div\n          {...regionProps}\n          ref={ref}\n          className={styles['sapphire-toast-container']}\n          style={\n            {\n              zIndex: overlayZIndex + 200,\n            } /* above overlays from @danske/sapphire-react */\n          }\n        >\n          {state.visibleToasts.map((toast) => (\n            <Toast {...props} key={toast.key} toast={toast} state={state} />\n          ))}\n        </div>\n      </ThemeRoot>\n    </SapphireOverlayContainer>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBa,MAAA,WAAA,GAAc,CAAK,EAA6C,KAAA;AAA7C,EAAA,IAAA,EAAA,GAAA,EAAA,EAAE,EAAF,KAAA,EAAA,GAAA,EAAA,EAAY,KAAZ,GAAA,SAAA,CAAA,EAAA,EAAY,CAAV,OAAA,CAAA,CAAA,CAAA;AAChC,EAAA,MAAM,MAAM,MAAO,CAAA,IAAA,CAAA,CAAA;AACnB,EAAA,MAAM,EAAE,WAAA,EAAA,GAAgB,cAAe,CAAA,KAAA,EAAO,KAAO,EAAA,GAAA,CAAA,CAAA;AACrD,EAAM,MAAA,EAAE,gBAAgB,GAAQ,EAAA,GAAA,eAAA,EAAA,CAAA;AAEhC,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,wBAAA,EAAD,IACE,kBAAA,KAAA,CAAA,aAAA,CAAC,SAAD,EAAA;AAAA,IAAW,QAAQ,EAAA,IAAA;AAAA,GACjB,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACM,WADN,CAAA,EAAA;AAAA,IAEE,GAAA;AAAA,IACA,WAAW,MAAO,CAAA,0BAAA,CAAA;AAAA,IAClB,KACE,EAAA;AAAA,MACE,QAAQ,aAAgB,GAAA,GAAA;AAAA,KAAA;AAAA,GAI3B,CAAA,EAAA,KAAA,CAAM,cAAc,GAAI,CAAA,CAAC,0BACvB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAD,iCAAW,KAAX,CAAA,EAAA;AAAA,IAAkB,KAAK,KAAM,CAAA,GAAA;AAAA,IAAK,KAAA;AAAA,IAAc,KAAA;AAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA;;;;"}

package/build/esm/index.js

@@ -17,5 +17,6 @@ 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 { 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,7 +1,7 @@
 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 { DateValue } from '@internationalized/date';
@@ -13,6 +13,7 @@ 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 { AriaNumberFieldProps } from '@react-aria/numberfield';
 export { useLocale } from '@react-aria/i18n';
 
 declare type SapphireToggleButtonProps = Omit<AriaToggleButtonProps<'button'>, 'elementType' | 'type'> & SapphireStyleProps & PressEvents & {
@@ -263,6 +264,11 @@ declare type DateFieldProps<T extends DateValue$1> = Omit<AriaDatePickerProps<T>
      * @default false
      */
     necessityIndicator?: boolean;
+    /**
+     * Places the label either above (default) or on the side of the control.
+     * @default 'above'
+     */
+    labelPlacement?: 'side' | 'above';
 };
 /**
  * A date field allows users to enter or edit date values using the keyboard
@@ -308,6 +314,11 @@ declare const DateField: <T extends DateValue$1>(props: Omit<AriaDatePickerProps
      * @default false
      */
     necessityIndicator?: boolean | undefined;
+    /**
+     * Places the label either above (default) or on the side of the control.
+     * @default 'above'
+     */
+    labelPlacement?: "above" | "side" | undefined;
 } & {
     ref?: React__default.RefObject<HTMLDivElement> | undefined;
 }) => React__default.ReactElement;
@@ -380,6 +391,11 @@ declare type DateRangeFieldProps<T extends DateValue$1, P extends string> = Omit
      * @default false
      */
     necessityIndicator?: boolean;
+    /**
+     * Places the label either above (default) or on the side of the control.
+     * @default 'above'
+     */
+    labelPlacement?: 'side' | 'above';
 };
 /**
  * A date range field allows users to select a range of dates by selecting a to and a from date with keyboard and/or mouse.
@@ -447,6 +463,11 @@ declare const DateRangeField: <T extends DateValue$1, P extends string>(props: O
      * @default false
      */
     necessityIndicator?: boolean | undefined;
+    /**
+     * Places the label either above (default) or on the side of the control.
+     * @default 'above'
+     */
+    labelPlacement?: "above" | "side" | undefined;
 } & {
     ref?: React__default.RefObject<HTMLDivElement> | undefined;
 }) => React__default.ReactElement;
@@ -721,11 +742,16 @@ declare type FieldsetProps = SapphireStyleProps & {
      * ```
      */
     children: ReactNode;
+    /**
+     * Places the label either above (default) or on the side of the control.
+     * @default 'above'
+     */
+    labelPlacement?: 'side' | 'above';
 };
 /**
  * Sapphire search input field.
  */
-declare const Fieldset: ({ label, contextualHelp, note, error, isDisabled, isRequired, necessityIndicator, children, size, ...props }: FieldsetProps) => React__default.JSX.Element;
+declare const Fieldset: ({ label, contextualHelp, note, error, isDisabled, isRequired, necessityIndicator, children, size, labelPlacement, ...props }: FieldsetProps) => React__default.JSX.Element;
 
 declare type SapphireAvatarProps = SapphireStyleProps & {
     /**
@@ -748,4 +774,66 @@ 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 };
+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, Avatar, Calendar, CalendarView, DateField, DateFieldProps, DateRangeField, DateRangeFieldProps, FeedbackMessage, Fieldset, FieldsetProps, FilterDropdown, NotificationBadge, NotificationBadgeProps, NumberField, NumberFieldProps, NumberFieldRef, 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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danske/sapphire-react-lab",
-  "version": "0.77.4",
+  "version": "0.80.0",
   "license": "SEE LICENSE IN LICENSE",
   "description": "Experimental React components of the Sapphire Design System from Danske Bank A/S",
   "exports": {
@@ -19,23 +19,24 @@
   ],
   "scripts": {
     "build": "cross-env ../../node_modules/.bin/rollup --config ../../rollup.config.js",
+    "postpublish": "echo bypassing npx -y send-release-notes@latest --to=6d5d8a75.groupsmail.danskebank.com@emea.teams.ms",
     "prepare": "yarn run build",
     "prepublishOnly": "yarn run build"
   },
   "peerDependencies": {
     "@danske/sapphire-icons": "^2.1.0",
-    "@danske/sapphire-react": "^3.18.5",
+    "@danske/sapphire-react": "^3.27.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
   "devDependencies": {
     "@danske/sapphire-icons": "^2.1.0",
-    "@danske/sapphire-react": "^3.18.5",
+    "@danske/sapphire-react": "^3.27.0",
     "@types/react-transition-group": "^4.4.5",
     "cross-env": "^7.0.3"
   },
   "dependencies": {
-    "@danske/sapphire-css": "^26.2.0",
+    "@danske/sapphire-css": "^27.0.0",
     "@internationalized/date": "^3.5.2",
     "@internationalized/string": "^3.2.1",
     "@react-aria/accordion": "^3.0.0-alpha.27",
@@ -48,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",
@@ -58,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",
@@ -68,5 +71,5 @@
     "clsx": "^1.1.1",
     "react-transition-group": "^4.4.5"
   },
-  "gitHead": "ea739bbe8b80507c03c4349f98fa6a4248e2c902"
+  "gitHead": "e207779162338643e012a71b68cbd4d2ad5def7d"
 }