@gnist/design-system 3.6.0 → 3.7.0

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.7.0](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@3.6.0...@gnist/design-system@3.7.0) (2025-07-11)
+
+### Features
+
+* add mode prop to TextField ([015a59b](https://github.com/mollerdigital/design-system-design-system/commit/015a59b522fc04d0526a67de9d0e2ecc0fd3396f))
+
 ## [3.6.0](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@3.5.6...@gnist/design-system@3.6.0) (2025-07-07)
 
 ### Features

package/dist/components/inputs/textFields/TextField.cjs

@@ -23,17 +23,40 @@ const shared = require("../shared.cjs");
 const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
 const classNames__default = /* @__PURE__ */ _interopDefaultCompat(classNames);
 const TextField = React.forwardRef(function TextField2(props, ref) {
-  var _a, _b;
+  var _a, _b, _c, _d;
   const { wrapperProps, contentProps, commonInputProps } = shared.useInputFieldLogic(props);
   const { inputProps } = shared.getInputFieldProps(props);
+  const isModeCurrencyOrNumberFormatting = ((_a = props.mode) == null ? void 0 : _a.style) === "currency" || ((_b = props.mode) == null ? void 0 : _b.style) === "numberSpacing";
+  const onChangeHandler = (event) => {
+    var _a2;
+    if (isModeCurrencyOrNumberFormatting) {
+      event.target.value = event.target.value.replace(new RegExp("(?<!^)-|[^\\d\\W.,]+|[.,]|\\s+", "g"), "");
+    }
+    (_a2 = inputProps.onChange) == null ? void 0 : _a2.call(inputProps, event);
+  };
+  if (isModeCurrencyOrNumberFormatting && !!inputProps.value) {
+    inputProps.type = "text";
+    inputProps.inputMode = "numeric";
+    const number = inputProps.value;
+    const isNegativeNumber = number[0] === "-";
+    inputProps.value = isNegativeNumber ? inputProps.value.slice(1) : inputProps.value;
+    const numberPrefix = isNegativeNumber ? "-" : "";
+    const formattedValue = new Intl.NumberFormat("nb-NB", {
+      style: "currency",
+      currency: "NOK",
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 5
+    }).format(parseFloat(inputProps.value)).replaceAll(/[^0-9.,\W]/g, "").trim();
+    inputProps.value = numberPrefix + formattedValue;
+  }
   return jsxRuntime.jsxs("span", { ref, className: classNames__default.default(wrapperProps.className, inputField_css.wrapperStyle), children: [props.leadingIcon && shared.isClickableIcon(props.leadingIcon) && jsxRuntime.jsx("button", { className: iconButtonOverlay_css.iconButtonOverlayRecipe({
     placement: "left",
     density: wrapperProps.density
   }), title: props.leadingIcon.title, onClick: props.leadingIcon.onClick }), jsxRuntime.jsxs("label", { htmlFor: props.id, className: inputField_css.inputFieldWrapperRecipe({
     disabled: props.disabled,
     density: props.density,
-    validityType: (_a = props.validity) == null ? void 0 : _a.type
-  }), children: [jsxRuntime.jsx("input", { ...commonInputProps, ...inputProps, className: classNames__default.default(inputField_css.inputFieldStyle, inputProps.className), style: dynamic.assignInlineVars({
+    validityType: (_c = props.validity) == null ? void 0 : _c.type
+  }), children: [jsxRuntime.jsx("input", { ...commonInputProps, ...inputProps, value: inputProps.value, onChange: onChangeHandler, className: classNames__default.default(inputField_css.inputFieldStyle, inputProps.className), style: dynamic.assignInlineVars({
     [inputFieldConstants_css.preInputWidth]: wrapperProps.preInputWidth,
     [inputFieldConstants_css.postInputWidth]: wrapperProps.postInputWidth
   }), onFocus: (event) => {
@@ -44,7 +67,7 @@ const TextField = React.forwardRef(function TextField2(props, ref) {
     (_b2 = inputProps.onFocus) == null ? void 0 : _b2.call(inputProps, event);
   } }), jsxRuntime.jsxs("span", { className: inputField_css.inputContentWrapper({ density: props.density }), children: [props.leadingIcon && jsxRuntime.jsx(Icon.Icon, { icon: shared.isClickableIcon(props.leadingIcon) ? props.leadingIcon.icon : props.leadingIcon, className: atoms_css_js.atoms({ paddingRight: "xxs" }) }), props.prefix && jsxRuntime.jsx("span", { ref: contentProps.prefixRef, "aria-hidden": true, className: suffixPrefix_css.prefixStyle, children: props.prefix }), jsxRuntime.jsx("label", { id: contentProps.labelId, className: labelStyles_css.labelStyle({
     density: props.density,
-    validityType: (_b = props.validity) == null ? void 0 : _b.type,
+    validityType: (_d = props.validity) == null ? void 0 : _d.type,
     isElevated: !!props.value || props.type === "date" || props.type === "time",
     disabled: props.disabled
   }), style: {

package/dist/components/inputs/textFields/TextField.d.ts

@@ -1,12 +1,17 @@
 import { InputHTMLAttributes } from "react";
 import { TextInputProps } from "../shared.js";
-export type TextFieldProps = TextInputProps & Omit<InputHTMLAttributes<HTMLInputElement>, "placeholder" | "value" | "type"> & {
+export type TextFieldModeProps = {
     /**
-     * Input type
-     * @default text
+     * Applies number spacing and numeric input mode
      */
-    type?: "email" | "search" | "tel" | "text" | "url" | "password" | "number" | "date" | "time";
+    mode?: {
+        style: "numberSpacing";
+    } | {
+        style: "currency";
+        currency: "NOK";
+    };
 };
+export type TextFieldProps = TextInputProps & TextFieldModeProps & Omit<InputHTMLAttributes<HTMLInputElement>, "placeholder" | "value">;
 /**
 A text field is an input that allows a user to write or edit text. Text fields typically appear in forms and dialogs.
 
@@ -18,11 +23,5 @@ _Accessibility note:_ The leading/trailing icon and prefix/suffix text will not
 
 Documentation: [TextField](https://gnist.moller.no/developers/components/latest/?path=/docs/components-inputs-textfields-textfield--docs)
  */
-export declare const TextField: import("react").ForwardRefExoticComponent<TextInputProps & Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "type" | "placeholder"> & {
-    /**
-     * Input type
-     * @default text
-     */
-    type?: "email" | "search" | "tel" | "text" | "url" | "password" | "number" | "date" | "time";
-} & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const TextField: import("react").ForwardRefExoticComponent<TextInputProps & TextFieldModeProps & Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "placeholder"> & import("react").RefAttributes<HTMLSpanElement>>;
 //# sourceMappingURL=TextField.d.ts.map

package/dist/components/inputs/textFields/TextField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/textFields/TextField.tsx"],"names":[],"mappings":"AAIA,OAAO,EAA4B,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAetE,OAAO,EAGH,cAAc,EAEjB,MAAM,cAAc,CAAC;AAEtB,MAAM,MAAM,cAAc,GAAG,cAAc,GACvC,IAAI,CACA,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,aAAa,GAAG,OAAO,GAAG,MAAM,CACnC,GAAG;IACA;;;OAGG;IACH,IAAI,CAAC,EACC,OAAO,GACP,QAAQ,GACR,KAAK,GACL,MAAM,GACN,KAAK,GACL,UAAU,GACV,QAAQ,GACR,MAAM,GACN,MAAM,CAAC;CAChB,CAAC;AAEN;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS;IA3Bd;;;OAGG;WAEG,OAAO,GACP,QAAQ,GACR,KAAK,GACL,MAAM,GACN,KAAK,GACL,UAAU,GACV,QAAQ,GACR,MAAM,GACN,MAAM;mDAuJlB,CAAC"}
+{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/textFields/TextField.tsx"],"names":[],"mappings":"AAIA,OAAO,EAA4B,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAetE,OAAO,EAGH,cAAc,EAEjB,MAAM,cAAc,CAAC;AAEtB,MAAM,MAAM,kBAAkB,GAAG;IAC7B;;OAEG;IACH,IAAI,CAAC,EAAE;QAAE,KAAK,EAAE,eAAe,CAAA;KAAE,GAAG;QAAE,KAAK,EAAE,UAAU,CAAC;QAAC,QAAQ,EAAE,KAAK,CAAA;KAAE,CAAC;CAC9E,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,cAAc,GACvC,kBAAkB,GAClB,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC,CAAC;AAEzE;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS,wMAqLpB,CAAC"}

package/dist/components/inputs/textFields/TextField.js

@@ -19,17 +19,40 @@ import { labelStyle } from "../shared-styles/labelStyles.css.js";
 import { prefixStyle, suffixStyle } from "../shared-styles/suffixPrefix.css.js";
 import { useInputFieldLogic, getInputFieldProps, isClickableIcon } from "../shared.js";
 const TextField = forwardRef(function TextField2(props, ref) {
-  var _a, _b;
+  var _a, _b, _c, _d;
   const { wrapperProps, contentProps, commonInputProps } = useInputFieldLogic(props);
   const { inputProps } = getInputFieldProps(props);
+  const isModeCurrencyOrNumberFormatting = ((_a = props.mode) == null ? void 0 : _a.style) === "currency" || ((_b = props.mode) == null ? void 0 : _b.style) === "numberSpacing";
+  const onChangeHandler = (event) => {
+    var _a2;
+    if (isModeCurrencyOrNumberFormatting) {
+      event.target.value = event.target.value.replace(new RegExp("(?<!^)-|[^\\d\\W.,]+|[.,]|\\s+", "g"), "");
+    }
+    (_a2 = inputProps.onChange) == null ? void 0 : _a2.call(inputProps, event);
+  };
+  if (isModeCurrencyOrNumberFormatting && !!inputProps.value) {
+    inputProps.type = "text";
+    inputProps.inputMode = "numeric";
+    const number = inputProps.value;
+    const isNegativeNumber = number[0] === "-";
+    inputProps.value = isNegativeNumber ? inputProps.value.slice(1) : inputProps.value;
+    const numberPrefix = isNegativeNumber ? "-" : "";
+    const formattedValue = new Intl.NumberFormat("nb-NB", {
+      style: "currency",
+      currency: "NOK",
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 5
+    }).format(parseFloat(inputProps.value)).replaceAll(/[^0-9.,\W]/g, "").trim();
+    inputProps.value = numberPrefix + formattedValue;
+  }
   return jsxs("span", { ref, className: classNames(wrapperProps.className, wrapperStyle), children: [props.leadingIcon && isClickableIcon(props.leadingIcon) && jsx("button", { className: iconButtonOverlayRecipe({
     placement: "left",
     density: wrapperProps.density
   }), title: props.leadingIcon.title, onClick: props.leadingIcon.onClick }), jsxs("label", { htmlFor: props.id, className: inputFieldWrapperRecipe({
     disabled: props.disabled,
     density: props.density,
-    validityType: (_a = props.validity) == null ? void 0 : _a.type
-  }), children: [jsx("input", { ...commonInputProps, ...inputProps, className: classNames(inputFieldStyle, inputProps.className), style: assignInlineVars({
+    validityType: (_c = props.validity) == null ? void 0 : _c.type
+  }), children: [jsx("input", { ...commonInputProps, ...inputProps, value: inputProps.value, onChange: onChangeHandler, className: classNames(inputFieldStyle, inputProps.className), style: assignInlineVars({
     [preInputWidth]: wrapperProps.preInputWidth,
     [postInputWidth]: wrapperProps.postInputWidth
   }), onFocus: (event) => {
@@ -40,7 +63,7 @@ const TextField = forwardRef(function TextField2(props, ref) {
     (_b2 = inputProps.onFocus) == null ? void 0 : _b2.call(inputProps, event);
   } }), jsxs("span", { className: inputContentWrapper({ density: props.density }), children: [props.leadingIcon && jsx(Icon, { icon: isClickableIcon(props.leadingIcon) ? props.leadingIcon.icon : props.leadingIcon, className: atoms({ paddingRight: "xxs" }) }), props.prefix && jsx("span", { ref: contentProps.prefixRef, "aria-hidden": true, className: prefixStyle, children: props.prefix }), jsx("label", { id: contentProps.labelId, className: labelStyle({
     density: props.density,
-    validityType: (_b = props.validity) == null ? void 0 : _b.type,
+    validityType: (_d = props.validity) == null ? void 0 : _d.type,
     isElevated: !!props.value || props.type === "date" || props.type === "time",
     disabled: props.disabled
   }), style: {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gnist/design-system",
-    "version": "3.6.0",
+    "version": "3.7.0",
     "license": "UNLICENSED",
     "type": "module",
     "main": "dist/index.cjs",
@@ -102,5 +102,5 @@
             "optional": true
         }
     },
-    "gitHead": "13550fb6429db09a62cbcdeb9dad1cb142bc0f49"
+    "gitHead": "14c41444b303c99e0b9eca32b48848f84a07213c"
 }