@danske/sapphire-react-lab 0.79.1 → 0.80.0

package/build/esm/NumberField/i18n/da-DK.js

@@ -0,0 +1,9 @@
+var increment = "øge";
+var decrement = "formindske";
+var da = {
+	increment: increment,
+	decrement: decrement
+};
+
+export { decrement, da as default, increment };
+//# sourceMappingURL=da-DK.js.map

package/build/esm/NumberField/i18n/da-DK.js.map

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

package/build/esm/NumberField/i18n/de-DE.js

@@ -0,0 +1,9 @@
+var increment = "erhöhen";
+var decrement = "verringern";
+var de = {
+	increment: increment,
+	decrement: decrement
+};
+
+export { decrement, de as default, increment };
+//# sourceMappingURL=de-DE.js.map

package/build/esm/NumberField/i18n/de-DE.js.map

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

package/build/esm/NumberField/i18n/en-US.js

@@ -0,0 +1,9 @@
+var increment = "Increase";
+var decrement = "Decrease";
+var en = {
+	increment: increment,
+	decrement: decrement
+};
+
+export { decrement, en as default, increment };
+//# sourceMappingURL=en-US.js.map

package/build/esm/NumberField/i18n/en-US.js.map

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

package/build/esm/NumberField/i18n/fi-FI.js

@@ -0,0 +1,9 @@
+var increment = "lisääntyä";
+var decrement = "vähentää";
+var fi = {
+	increment: increment,
+	decrement: decrement
+};
+
+export { decrement, fi as default, increment };
+//# sourceMappingURL=fi-FI.js.map

package/build/esm/NumberField/i18n/fi-FI.js.map

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

package/build/esm/NumberField/i18n/index.js

@@ -0,0 +1,20 @@
+import da from './da-DK.js';
+import en from './en-US.js';
+import de from './de-DE.js';
+import fi from './fi-FI.js';
+import no from './nb-NO.js';
+import pl from './pl-PL.js';
+import se from './sv-SE.js';
+
+var intlMessages = {
+  "da-DK": da,
+  "en-US": en,
+  "de-DE": de,
+  "fi-FI": fi,
+  "nb-NO": no,
+  "pl-PL": pl,
+  "sv-SE": se
+};
+
+export { intlMessages as default };
+//# sourceMappingURL=index.js.map

package/build/esm/NumberField/i18n/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/NumberField/i18n/index.ts"],"sourcesContent":["import da from './da-DK.json';\nimport en from './en-US.json';\nimport de from './de-DE.json';\nimport fi from './fi-FI.json';\nimport no from './nb-NO.json';\nimport pl from './pl-PL.json';\nimport se from './sv-SE.json';\n\nexport default {\n  'da-DK': da,\n  'en-US': en,\n  'de-DE': de,\n  'fi-FI': fi,\n  'nb-NO': no,\n  'pl-PL': pl,\n  'sv-SE': se,\n};\n"],"names":[],"mappings":";;;;;;;;AAQA,mBAAe;AAAA,EACb,OAAS,EAAA,EAAA;AAAA,EACT,OAAS,EAAA,EAAA;AAAA,EACT,OAAS,EAAA,EAAA;AAAA,EACT,OAAS,EAAA,EAAA;AAAA,EACT,OAAS,EAAA,EAAA;AAAA,EACT,OAAS,EAAA,EAAA;AAAA,EACT,OAAS,EAAA,EAAA;AAAA,CAAA;;;;"}

package/build/esm/NumberField/i18n/nb-NO.js

@@ -0,0 +1,9 @@
+var increment = "øke";
+var decrement = "avta";
+var no = {
+	increment: increment,
+	decrement: decrement
+};
+
+export { decrement, no as default, increment };
+//# sourceMappingURL=nb-NO.js.map

package/build/esm/NumberField/i18n/nb-NO.js.map

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

package/build/esm/NumberField/i18n/pl-PL.js

@@ -0,0 +1,9 @@
+var increment = "zwiększyć";
+var decrement = "zmniejszenie";
+var pl = {
+	increment: increment,
+	decrement: decrement
+};
+
+export { decrement, pl as default, increment };
+//# sourceMappingURL=pl-PL.js.map

package/build/esm/NumberField/i18n/pl-PL.js.map

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

package/build/esm/NumberField/i18n/sv-SE.js

@@ -0,0 +1,9 @@
+var increment = "öka";
+var decrement = "minska";
+var se = {
+	increment: increment,
+	decrement: decrement
+};
+
+export { decrement, se as default, increment };
+//# sourceMappingURL=sv-SE.js.map

package/build/esm/NumberField/i18n/sv-SE.js.map

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

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

@@ -0,0 +1,149 @@
+import { useObjectRef, mergeProps } from '@react-aria/utils';
+import { createFocusableRef } from '@react-spectrum/utils';
+import React, { forwardRef, useRef, useImperativeHandle } from 'react';
+import { useSapphireNumberField } from './useSapphireNumberField.js';
+import textFieldStyles from '@danske/sapphire-css/components/textField/textField.module.css';
+import { useFocusRing } from '@react-aria/focus';
+import clsx from 'clsx';
+import { useThemeCheck, useSapphireStyleProps, Field, Label } from '@danske/sapphire-react';
+import { useAutofillStyle } from './useAutofillStyle.js';
+import { useMessageFormatter } from '@react-aria/i18n';
+import intlMessages from '../i18n/index.js';
+import { StepperButton } from './StepperButton.js';
+
+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 NumberField = forwardRef(function NumberField2(props, ref) {
+  const _a = props, {
+    label,
+    isDisabled,
+    error,
+    note,
+    isRequired,
+    contextualHelp,
+    prefix,
+    postfix,
+    size = "large",
+    labelPlacement = "above",
+    necessityIndicator = false,
+    alignInputRight,
+    showButtons = false,
+    incrementAriaLabel,
+    decrementAriaLabel
+  } = _a, otherProps = __objRest(_a, [
+    "label",
+    "isDisabled",
+    "error",
+    "note",
+    "isRequired",
+    "contextualHelp",
+    "prefix",
+    "postfix",
+    "size",
+    "labelPlacement",
+    "necessityIndicator",
+    "alignInputRight",
+    "showButtons",
+    "incrementAriaLabel",
+    "decrementAriaLabel"
+  ]);
+  useThemeCheck();
+  const inputRef = useObjectRef(props.inputRef);
+  const formatMessage = useMessageFormatter(intlMessages);
+  const {
+    inputProps,
+    labelProps,
+    incrementButtonProps,
+    decrementButtonProps,
+    descriptionProps,
+    errorMessageProps
+  } = useSapphireNumberField(__spreadProps(__spreadValues({}, props), {
+    incrementAriaLabel: incrementAriaLabel != null ? incrementAriaLabel : formatMessage("increment"),
+    decrementAriaLabel: decrementAriaLabel != null ? decrementAriaLabel : formatMessage("decrement")
+  }), inputRef);
+  const { focusProps, isFocusVisible } = useFocusRing(props);
+  const { styleProps } = useSapphireStyleProps(props);
+  const { autofillStyles, updateStyle } = useAutofillStyle(inputRef);
+  const domRef = useRef(null);
+  useImperativeHandle(ref, () => __spreadProps(__spreadValues({}, createFocusableRef(domRef, inputRef)), {
+    getInputElement() {
+      return inputRef.current;
+    }
+  }));
+  return /* @__PURE__ */ React.createElement(Field, __spreadProps(__spreadValues({}, removeUniqueDOMProps(otherProps)), {
+    ref: domRef,
+    isDisabled,
+    error: !!error,
+    size,
+    labelPlacement
+  }), label && /* @__PURE__ */ React.createElement(Field.Label, null, /* @__PURE__ */ React.createElement(Label, __spreadProps(__spreadValues({}, labelProps), {
+    size,
+    necessityIndicator: isRequired && necessityIndicator ? "required" : !isRequired && necessityIndicator ? "optional" : void 0,
+    contextualHelp
+  }), label)), /* @__PURE__ */ React.createElement(Field.Control, null, /* @__PURE__ */ React.createElement("div", {
+    className: clsx(textFieldStyles["sapphire-text-field"], {
+      [textFieldStyles["is-focus"]]: isFocusVisible,
+      [textFieldStyles["sapphire-text-field--error"]]: error === true || typeof error === "string",
+      [textFieldStyles["sapphire-text-field--medium"]]: size === "medium"
+    }),
+    style: __spreadValues({}, styleProps.style.width ? { width: styleProps.style.width } : {})
+  }, prefix && /* @__PURE__ */ React.createElement("span", {
+    className: clsx(textFieldStyles["sapphire-text-field__prefix"], {
+      [textFieldStyles["sapphire-text-field__prefix--icon"]]: typeof prefix !== "string"
+    })
+  }, prefix), /* @__PURE__ */ React.createElement("input", __spreadProps(__spreadValues({}, mergeProps(inputProps, focusProps, {
+    onChange: updateStyle,
+    onBlur: updateStyle
+  })), {
+    ref: inputRef,
+    className: clsx(textFieldStyles["sapphire-text-field__input"], {
+      [textFieldStyles["sapphire-text-field__input--align-right"]]: !!alignInputRight
+    }),
+    style: autofillStyles
+  })), postfix && /* @__PURE__ */ React.createElement("span", {
+    className: clsx(textFieldStyles["sapphire-text-field__postfix"], {
+      [textFieldStyles["sapphire-text-field__postfix--icon"]]: typeof postfix !== "string"
+    })
+  }, postfix), showButtons && /* @__PURE__ */ React.createElement("div", {
+    className: clsx(textFieldStyles["sapphire-text-field__stepper"])
+  }, /* @__PURE__ */ React.createElement(StepperButton, __spreadValues({
+    variant: "increment",
+    size
+  }, incrementButtonProps)), /* @__PURE__ */ React.createElement(StepperButton, __spreadValues({
+    variant: "decrement",
+    size
+  }, decrementButtonProps))))), (error || note) && /* @__PURE__ */ React.createElement(Field.Footer, null, error ? /* @__PURE__ */ React.createElement(Field.Note, __spreadValues({}, errorMessageProps), error) : note ? /* @__PURE__ */ React.createElement(Field.Note, __spreadValues({}, descriptionProps), note) : /* @__PURE__ */ React.createElement(React.Fragment, null)));
+});
+const removeUniqueDOMProps = (props) => Object.fromEntries(Object.entries(props).filter(([name]) => name !== "id" && !name.startsWith("data-")));
+
+export { NumberField };
+//# sourceMappingURL=NumberField.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NumberField.js","sources":["../../../../src/NumberField/src/NumberField.tsx"],"sourcesContent":["import { mergeProps, useObjectRef } from '@react-aria/utils';\nimport { createFocusableRef } from '@react-spectrum/utils';\nimport { FocusableRefValue, PressEvents } from '@react-types/shared';\nimport React from 'react';\nimport {\n  ForwardedRef,\n  forwardRef,\n  ReactNode,\n  RefObject,\n  useImperativeHandle,\n  useRef,\n} from 'react';\nimport {\n  SapphireNumberFieldProps,\n  useSapphireNumberField,\n} from './useSapphireNumberField';\nimport textFieldStyles from '@danske/sapphire-css/components/textField/textField.module.css';\nimport { useFocusRing } from '@react-aria/focus';\nimport clsx from 'clsx';\nimport {\n  Field,\n  Label,\n  SapphireStyleProps,\n  useSapphireStyleProps,\n  useThemeCheck,\n} from '@danske/sapphire-react';\nimport { useAutofillStyle } from './useAutofillStyle';\nimport { useMessageFormatter } from '@react-aria/i18n';\nimport intlMessages from '../i18n';\nimport { StepperButton } from './StepperButton';\n\nexport type NumberFieldRef = FocusableRefValue<\n  HTMLInputElement,\n  HTMLDivElement\n> & {\n  getInputElement(): HTMLInputElement | null;\n};\n\nexport interface NumberFieldProps\n  extends SapphireNumberFieldProps,\n    PressEvents,\n    SapphireStyleProps {\n  prefix?: ReactNode;\n  postfix?: ReactNode;\n  inputRef?: RefObject<HTMLInputElement | null>;\n  /**\n   * A note to show below the input.\n   * If the input has an error message, this note will be replaced by that.\n   */\n  note?: ReactNode;\n  /**\n   * A ContextualHelp to render next to the label.\n   */\n  contextualHelp?: ReactNode;\n  /**\n   * To visually indicate if this field is required or optional.\n   * @default false\n   */\n  necessityIndicator?: boolean;\n  /**\n   * @default 'large'\n   */\n  size?: 'large' | 'medium';\n  /**\n   * Aligns the text inside the input fields without affecting the positioning of the label of the field.\n   */\n  alignInputRight?: boolean;\n  /**\n   * Places the label either above (default) or on the side of the control.\n   * @default 'above'\n   */\n  labelPlacement?: 'side' | 'above';\n  /**\n   * To show the buttons for incrementing and decrementing the value.\n   * @default false\n   */\n  showButtons?: boolean;\n}\n\nexport const NumberField = forwardRef(function NumberField(\n  props: NumberFieldProps,\n  ref: ForwardedRef<NumberFieldRef>\n) {\n  const {\n    label,\n    isDisabled,\n    error,\n    note,\n    isRequired,\n    contextualHelp,\n    prefix,\n    postfix,\n    size = 'large',\n    labelPlacement = 'above',\n    necessityIndicator = false,\n    alignInputRight,\n    showButtons = false,\n    incrementAriaLabel,\n    decrementAriaLabel,\n    ...otherProps\n  } = props;\n  useThemeCheck();\n  const inputRef = useObjectRef<HTMLInputElement>(props.inputRef);\n  const formatMessage = useMessageFormatter(intlMessages);\n  const {\n    inputProps,\n    labelProps,\n    incrementButtonProps,\n    decrementButtonProps,\n    descriptionProps,\n    errorMessageProps,\n  } = useSapphireNumberField(\n    {\n      ...props,\n      incrementAriaLabel: incrementAriaLabel ?? formatMessage('increment'),\n      decrementAriaLabel: decrementAriaLabel ?? formatMessage('decrement'),\n    },\n    inputRef\n  );\n  const { focusProps, isFocusVisible } = useFocusRing(props);\n  const { styleProps } = useSapphireStyleProps(props);\n  const { autofillStyles, updateStyle } = useAutofillStyle<'input'>(inputRef);\n\n  const domRef = useRef<HTMLDivElement>(null);\n\n  useImperativeHandle(ref, () => ({\n    ...createFocusableRef(domRef, inputRef),\n    /**\n     * (This function is deprecated. Use `inputRef` prop)\n     * @deprecated\n     */\n    getInputElement() {\n      return inputRef.current;\n    },\n  }));\n\n  return (\n    <Field\n      // otherProps contains some of the same props as inputProps. That is\n      // intended, but some DOM props, like \"id\", should not be repeated\n      {...removeUniqueDOMProps(otherProps)}\n      ref={domRef}\n      isDisabled={isDisabled}\n      error={!!error}\n      size={size}\n      labelPlacement={labelPlacement}\n    >\n      {label && (\n        <Field.Label>\n          <Label\n            {...labelProps}\n            size={size}\n            necessityIndicator={\n              isRequired && necessityIndicator\n                ? 'required'\n                : !isRequired && necessityIndicator\n                ? 'optional'\n                : undefined\n            }\n            contextualHelp={contextualHelp}\n          >\n            {label}\n          </Label>\n        </Field.Label>\n      )}\n      <Field.Control>\n        <div\n          className={clsx(textFieldStyles['sapphire-text-field'], {\n            [textFieldStyles['is-focus']]: isFocusVisible,\n            [textFieldStyles['sapphire-text-field--error']]:\n              error === true || typeof error === 'string',\n            [textFieldStyles['sapphire-text-field--medium']]: size === 'medium',\n          })}\n          style={{\n            ...(styleProps.style.width\n              ? { width: styleProps.style.width }\n              : {}),\n          }}\n        >\n          {prefix && (\n            <span\n              className={clsx(textFieldStyles['sapphire-text-field__prefix'], {\n                [textFieldStyles['sapphire-text-field__prefix--icon']]:\n                  typeof prefix !== 'string',\n              })}\n            >\n              {prefix}\n            </span>\n          )}\n          <input\n            {...mergeProps(inputProps, focusProps, {\n              onChange: updateStyle,\n              onBlur: updateStyle,\n            })}\n            ref={inputRef}\n            className={clsx(textFieldStyles['sapphire-text-field__input'], {\n              [textFieldStyles['sapphire-text-field__input--align-right']]:\n                !!alignInputRight,\n            })}\n            style={autofillStyles}\n          />\n          {postfix && (\n            <span\n              className={clsx(textFieldStyles['sapphire-text-field__postfix'], {\n                [textFieldStyles['sapphire-text-field__postfix--icon']]:\n                  typeof postfix !== 'string',\n              })}\n            >\n              {postfix}\n            </span>\n          )}\n          {showButtons && (\n            <div\n              className={clsx(textFieldStyles['sapphire-text-field__stepper'])}\n            >\n              <StepperButton\n                variant=\"increment\"\n                size={size}\n                {...incrementButtonProps}\n              />\n              <StepperButton\n                variant=\"decrement\"\n                size={size}\n                {...decrementButtonProps}\n              />\n            </div>\n          )}\n        </div>\n      </Field.Control>\n      {(error || note) && (\n        <Field.Footer>\n          {error ? (\n            <Field.Note {...errorMessageProps}>{error}</Field.Note>\n          ) : note ? (\n            <Field.Note {...descriptionProps}>{note}</Field.Note>\n          ) : (\n            <></>\n          )}\n        </Field.Footer>\n      )}\n    </Field>\n  );\n});\n\n// Once moved to the core package, this function should be removed and instead consume the one from TextFieldBase.\nconst removeUniqueDOMProps = (props: Record<any, any>): Record<any, any> =>\n  Object.fromEntries(\n    Object.entries(props).filter(\n      ([name]) => name !== 'id' && !name.startsWith('data-')\n    )\n  );\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,63 @@
+import React, { useRef } from 'react';
+import { useHover } from '@react-aria/interactions';
+import { mergeProps, filterDOMProps } from '@react-aria/utils';
+import clsx from 'clsx';
+import textFieldStyles from '@danske/sapphire-css/components/textField/textField.module.css';
+import { useButton, Icon } from '@danske/sapphire-react';
+import { CaretUp, CaretDown } from '@danske/sapphire-icons/react';
+
+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 StepperButton = (_a) => {
+  var _b = _a, {
+    variant,
+    size
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "size"
+  ]);
+  const ref = useRef(null);
+  const { buttonProps, isPressed } = useButton(props, ref);
+  const { hoverProps, isHovered } = useHover({ isDisabled: props.isDisabled });
+  return /* @__PURE__ */ React.createElement("button", __spreadProps(__spreadValues({}, mergeProps(buttonProps, hoverProps, filterDOMProps(props))), {
+    ref,
+    className: clsx(textFieldStyles["sapphire-text-field__stepper-button"], textFieldStyles["js-hover"], {
+      [textFieldStyles["is-active"]]: isPressed,
+      [textFieldStyles["is-hover"]]: isHovered
+    })
+  }), /* @__PURE__ */ React.createElement(Icon, {
+    size: size === "large" ? "m" : "s"
+  }, variant === "increment" ? /* @__PURE__ */ React.createElement(CaretUp, null) : /* @__PURE__ */ React.createElement(CaretDown, null)));
+};
+
+export { StepperButton };
+//# sourceMappingURL=StepperButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StepperButton.js","sources":["../../../../src/NumberField/src/StepperButton.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { AriaButtonProps } from '@react-aria/button';\nimport { useHover } from '@react-aria/interactions';\nimport { filterDOMProps, mergeProps } from '@react-aria/utils';\nimport clsx from 'clsx';\nimport styles from '@danske/sapphire-css/components/textField/textField.module.css';\nimport { Icon, useButton } from '@danske/sapphire-react';\nimport { CaretUp, CaretDown } from '@danske/sapphire-icons/react';\n\n/**\n * @internal\n */\nexport const StepperButton = ({\n  variant,\n  size,\n  ...props\n}: AriaButtonProps & {\n  variant: 'increment' | 'decrement';\n  size: 'large' | 'medium';\n}) => {\n  const ref = useRef(null);\n  const { buttonProps, isPressed } = useButton(props, ref);\n  const { hoverProps, isHovered } = useHover({ isDisabled: props.isDisabled });\n\n  return (\n    <button\n      {...mergeProps(buttonProps, hoverProps, filterDOMProps(props))}\n      ref={ref}\n      className={clsx(\n        styles['sapphire-text-field__stepper-button'],\n        styles['js-hover'],\n        {\n          [styles['is-active']]: isPressed,\n          [styles['is-hover']]: isHovered,\n        }\n      )}\n    >\n      <Icon size={size === 'large' ? 'm' : 's'}>\n        {variant === 'increment' ? <CaretUp /> : <CaretDown />}\n      </Icon>\n    </button>\n  );\n};\n"],"names":["styles"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYa,MAAA,aAAA,GAAgB,CAAC,EAOxB,KAAA;AAPwB,EAC5B,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,OAAA;AAAA,IACA,IAAA;AAAA,GAF4B,GAAA,EAAA,EAGzB,kBAHyB,EAGzB,EAAA;AAAA,IAFH,SAAA;AAAA,IACA,MAAA;AAAA,GAAA,CAAA,CAAA;AAMA,EAAA,MAAM,MAAM,MAAO,CAAA,IAAA,CAAA,CAAA;AACnB,EAAA,MAAM,EAAE,WAAA,EAAa,SAAc,EAAA,GAAA,SAAA,CAAU,KAAO,EAAA,GAAA,CAAA,CAAA;AACpD,EAAA,MAAM,EAAE,UAAY,EAAA,SAAA,EAAA,GAAc,QAAS,CAAA,EAAE,YAAY,KAAM,CAAA,UAAA,EAAA,CAAA,CAAA;AAE/D,EAAA,2CACG,QAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACM,WAAW,WAAa,EAAA,UAAA,EAAY,eAAe,KADzD,CAAA,CAAA,CAAA,EAAA;AAAA,IAEE,GAAA;AAAA,IACA,SAAW,EAAA,IAAA,CACTA,eAAO,CAAA,qCAAA,CAAA,EACPA,gBAAO,UACP,CAAA,EAAA;AAAA,MAAA,CACGA,gBAAO,WAAe,CAAA,GAAA,SAAA;AAAA,MAAA,CACtBA,gBAAO,UAAc,CAAA,GAAA,SAAA;AAAA,KAAA,CAAA;AAAA,GAAA,CAAA,sCAIzB,IAAD,EAAA;AAAA,IAAM,IAAA,EAAM,IAAS,KAAA,OAAA,GAAU,GAAM,GAAA,GAAA;AAAA,GAAA,EAClC,YAAY,WAAc,mBAAA,KAAA,CAAA,aAAA,CAAC,OAAD,EAAA,IAAA,CAAA,uCAAe,SAAD,EAAA,IAAA,CAAA,CAAA,CAAA,CAAA;AAAA;;;;"}

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,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 & {
@@ -773,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.79.1",
+  "version": "0.80.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.0.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": "e207779162338643e012a71b68cbd4d2ad5def7d"
 }