@trackunit/react-form-components 0.0.128-alpha-b0920fa0dd.0 → 0.0.129

package/index.cjs.js

@@ -341,23 +341,6 @@ const cvaCheckbox = cssClassVarianceUtilities.cvaMerge([
     "group-active:ring-blue-700",
 ], {
     variants: {
-        disabled: {
-            true: [
-                "bg-slate-300",
-                "border-slate-300",
-                "cursor-not-allowed",
-                "group-hover:bg-slate-300",
-                "group-focus:bg-slate-300",
-                "hover:bg-slate-300",
-                "focus:bg-slate-300",
-                "active:bg-slate-300",
-                "focus:ring-0",
-                "focus:ring-offset-0",
-                "group-active:ring-0",
-                "group-active:ring-offset-0",
-            ],
-            false: "",
-        },
         invalid: {
             true: [
                 "border-red-600",
@@ -397,6 +380,23 @@ const cvaCheckbox = cssClassVarianceUtilities.cvaMerge([
                 "group-focus:border-blue-800",
             ],
         },
+        disabled: {
+            true: [
+                "bg-slate-300",
+                "border-slate-300",
+                "cursor-not-allowed",
+                "group-hover:bg-slate-300",
+                "group-focus:bg-slate-300",
+                "hover:bg-slate-300",
+                "focus:bg-slate-300",
+                "active:bg-slate-300",
+                "focus:ring-0",
+                "focus:ring-offset-0",
+                "group-active:ring-0",
+                "group-active:ring-offset-0",
+            ],
+            false: "",
+        },
     },
     compoundVariants: [
         {
@@ -421,7 +421,7 @@ const cvaCheckbox = cssClassVarianceUtilities.cvaMerge([
     ],
     defaultVariants: {
         state: "deselected",
-    }
+    },
 });
 const cvaCheckboxContainer = cssClassVarianceUtilities.cvaMerge([
     "grid",
@@ -3110,7 +3110,9 @@ const EmailField = React.forwardRef((_a, ref) => {
  *
  * NOTE: If shown with a label, please use the `NumberField` component instead.
  */
-const NumberInput = React.forwardRef((props, ref) => (jsxRuntime.jsx(BaseInput, Object.assign({ ref: ref, type: "number" }, props))));
+const NumberInput = React.forwardRef((props, ref) => {
+    return jsxRuntime.jsx(BaseInput, Object.assign({ ref: ref, type: "number" }, props, { value: props.value }));
+});
 
 /**
  * The number field component is used for entering numeric values and includes controls for incrementally increasing or decreasing the value.
@@ -14515,7 +14517,7 @@ const CountryCodeSelect = ({ excludedCountries, countryCode, isInvalid, onChange
  * @returns {JSX.Element} - The PhoneInput component.
  */
 const PhoneInput = React.forwardRef((_a, ref) => {
-    var { dataTestId, isInvalid, disabled = false, value, defaultValue, fieldSize = "medium", disableAction = false, onChange, onChangeGetSeparateValues, onBlurCountryCode, readOnly, countryCodePlaceholder } = _a, rest = __rest(_a, ["dataTestId", "isInvalid", "disabled", "value", "defaultValue", "fieldSize", "disableAction", "onChange", "onChangeGetSeparateValues", "onBlurCountryCode", "readOnly", "countryCodePlaceholder"]);
+    var { dataTestId, isInvalid, disabled = false, value, defaultValue, fieldSize = "medium", disableAction = false, onChange, onChangeGetSeparateValues, onBlurCountryCode, readOnly, countryCodePlaceholder, onChangeCountryCode } = _a, rest = __rest(_a, ["dataTestId", "isInvalid", "disabled", "value", "defaultValue", "fieldSize", "disableAction", "onChange", "onChangeGetSeparateValues", "onBlurCountryCode", "readOnly", "countryCodePlaceholder", "onChangeCountryCode"]);
     const hiddenInputRef = React.useRef(null);
     const { countryCode, phoneNumber, isCountryCodeInvalid, isPhoneNumberInvalid, handleCountryCodeChange, handlePhoneNumberChange, combinedValue, isCombinedValueInvalid, } = usePhoneInput(!!value ? value : defaultValue);
     React.useEffect(() => {
@@ -14530,7 +14532,10 @@ const PhoneInput = React.forwardRef((_a, ref) => {
         onChangeGetSeparateValues && onChangeGetSeparateValues({ countryCode, phoneNumber });
     }, [countryCode, onChangeGetSeparateValues, phoneNumber]);
     const countryCodePlaceholderValue = countryCodePlaceholder || "+45";
-    return (jsxRuntime.jsxs("div", { className: "grid grid-cols-min-fr gap-2", "data-testid": dataTestId && `${dataTestId}-container`, children: [jsxRuntime.jsx("input", { hidden: true, id: "phone-input", "data-testid": dataTestId, value: combinedValue, ref: hiddenInputRef, onChange: onChange, "aria-invalid": isCombinedValueInvalid || isInvalid }), jsxRuntime.jsx(CountryCodeSelect, { dataTestId: dataTestId && `${dataTestId}-countryCodeSelect`, countryCode: countryCode, onChange: handleCountryCodeChange, disabled: disabled, readOnly: readOnly, isInvalid: isCountryCodeInvalid || isInvalid, placeholder: countryCodePlaceholderValue, onBlur: onBlurCountryCode }), jsxRuntime.jsx(BaseInput, Object.assign({ id: "phoneInput-number", dataTestId: dataTestId && `${dataTestId}-phoneNumberInput`, fieldSize: fieldSize, type: "tel", value: phoneNumber, disabled: disabled, readOnly: readOnly, onChange: handlePhoneNumberChange, isInvalid: isPhoneNumberInvalid || isInvalid, actions: !disableAction && (jsxRuntime.jsx(ActionButton, { disabled: disabled || isInvalid || isCountryCodeInvalid || isPhoneNumberInvalid, value: `${countryCode}${phoneNumber}`, type: "PHONE_NUMBER", dataTestId: dataTestId && `${dataTestId}-phoneIcon`, iconSize: fieldSize })) }, rest))] }));
+    return (jsxRuntime.jsxs("div", { className: "grid grid-cols-min-fr gap-2", "data-testid": dataTestId && `${dataTestId}-container`, children: [jsxRuntime.jsx("input", { hidden: true, id: "phone-input", "data-testid": dataTestId, value: combinedValue, ref: hiddenInputRef, onChange: onChange, "aria-invalid": isCombinedValueInvalid || isInvalid }), jsxRuntime.jsx(CountryCodeSelect, { dataTestId: dataTestId && `${dataTestId}-countryCodeSelect`, countryCode: countryCode, onChange: e => {
+                    handleCountryCodeChange(e);
+                    onChangeCountryCode && onChangeCountryCode(e);
+                }, disabled: disabled, readOnly: readOnly, isInvalid: isCountryCodeInvalid || isInvalid, placeholder: countryCodePlaceholderValue, onBlur: onBlurCountryCode }), jsxRuntime.jsx(BaseInput, Object.assign({ id: "phoneInput-number", dataTestId: dataTestId && `${dataTestId}-phoneNumberInput`, fieldSize: fieldSize, type: "tel", value: phoneNumber, disabled: disabled, readOnly: readOnly, onChange: handlePhoneNumberChange, isInvalid: isPhoneNumberInvalid || isInvalid, actions: !disableAction && (jsxRuntime.jsx(ActionButton, { disabled: disabled || isInvalid || isCountryCodeInvalid || isPhoneNumberInvalid, value: `${countryCode}${phoneNumber}`, type: "PHONE_NUMBER", dataTestId: dataTestId && `${dataTestId}-phoneIcon`, iconSize: fieldSize })) }, rest))] }));
 });
 
 /**

package/index.esm.js

@@ -315,23 +315,6 @@ const cvaCheckbox = cvaMerge([
     "group-active:ring-blue-700",
 ], {
     variants: {
-        disabled: {
-            true: [
-                "bg-slate-300",
-                "border-slate-300",
-                "cursor-not-allowed",
-                "group-hover:bg-slate-300",
-                "group-focus:bg-slate-300",
-                "hover:bg-slate-300",
-                "focus:bg-slate-300",
-                "active:bg-slate-300",
-                "focus:ring-0",
-                "focus:ring-offset-0",
-                "group-active:ring-0",
-                "group-active:ring-offset-0",
-            ],
-            false: "",
-        },
         invalid: {
             true: [
                 "border-red-600",
@@ -371,6 +354,23 @@ const cvaCheckbox = cvaMerge([
                 "group-focus:border-blue-800",
             ],
         },
+        disabled: {
+            true: [
+                "bg-slate-300",
+                "border-slate-300",
+                "cursor-not-allowed",
+                "group-hover:bg-slate-300",
+                "group-focus:bg-slate-300",
+                "hover:bg-slate-300",
+                "focus:bg-slate-300",
+                "active:bg-slate-300",
+                "focus:ring-0",
+                "focus:ring-offset-0",
+                "group-active:ring-0",
+                "group-active:ring-offset-0",
+            ],
+            false: "",
+        },
     },
     compoundVariants: [
         {
@@ -395,7 +395,7 @@ const cvaCheckbox = cvaMerge([
     ],
     defaultVariants: {
         state: "deselected",
-    }
+    },
 });
 const cvaCheckboxContainer = cvaMerge([
     "grid",
@@ -3084,7 +3084,9 @@ const EmailField = forwardRef((_a, ref) => {
  *
  * NOTE: If shown with a label, please use the `NumberField` component instead.
  */
-const NumberInput = forwardRef((props, ref) => (jsx$1(BaseInput, Object.assign({ ref: ref, type: "number" }, props))));
+const NumberInput = forwardRef((props, ref) => {
+    return jsx$1(BaseInput, Object.assign({ ref: ref, type: "number" }, props, { value: props.value }));
+});
 
 /**
  * The number field component is used for entering numeric values and includes controls for incrementally increasing or decreasing the value.
@@ -14489,7 +14491,7 @@ const CountryCodeSelect = ({ excludedCountries, countryCode, isInvalid, onChange
  * @returns {JSX.Element} - The PhoneInput component.
  */
 const PhoneInput = forwardRef((_a, ref) => {
-    var { dataTestId, isInvalid, disabled = false, value, defaultValue, fieldSize = "medium", disableAction = false, onChange, onChangeGetSeparateValues, onBlurCountryCode, readOnly, countryCodePlaceholder } = _a, rest = __rest(_a, ["dataTestId", "isInvalid", "disabled", "value", "defaultValue", "fieldSize", "disableAction", "onChange", "onChangeGetSeparateValues", "onBlurCountryCode", "readOnly", "countryCodePlaceholder"]);
+    var { dataTestId, isInvalid, disabled = false, value, defaultValue, fieldSize = "medium", disableAction = false, onChange, onChangeGetSeparateValues, onBlurCountryCode, readOnly, countryCodePlaceholder, onChangeCountryCode } = _a, rest = __rest(_a, ["dataTestId", "isInvalid", "disabled", "value", "defaultValue", "fieldSize", "disableAction", "onChange", "onChangeGetSeparateValues", "onBlurCountryCode", "readOnly", "countryCodePlaceholder", "onChangeCountryCode"]);
     const hiddenInputRef = useRef(null);
     const { countryCode, phoneNumber, isCountryCodeInvalid, isPhoneNumberInvalid, handleCountryCodeChange, handlePhoneNumberChange, combinedValue, isCombinedValueInvalid, } = usePhoneInput(!!value ? value : defaultValue);
     useEffect(() => {
@@ -14504,7 +14506,10 @@ const PhoneInput = forwardRef((_a, ref) => {
         onChangeGetSeparateValues && onChangeGetSeparateValues({ countryCode, phoneNumber });
     }, [countryCode, onChangeGetSeparateValues, phoneNumber]);
     const countryCodePlaceholderValue = countryCodePlaceholder || "+45";
-    return (jsxs("div", { className: "grid grid-cols-min-fr gap-2", "data-testid": dataTestId && `${dataTestId}-container`, children: [jsx$1("input", { hidden: true, id: "phone-input", "data-testid": dataTestId, value: combinedValue, ref: hiddenInputRef, onChange: onChange, "aria-invalid": isCombinedValueInvalid || isInvalid }), jsx$1(CountryCodeSelect, { dataTestId: dataTestId && `${dataTestId}-countryCodeSelect`, countryCode: countryCode, onChange: handleCountryCodeChange, disabled: disabled, readOnly: readOnly, isInvalid: isCountryCodeInvalid || isInvalid, placeholder: countryCodePlaceholderValue, onBlur: onBlurCountryCode }), jsx$1(BaseInput, Object.assign({ id: "phoneInput-number", dataTestId: dataTestId && `${dataTestId}-phoneNumberInput`, fieldSize: fieldSize, type: "tel", value: phoneNumber, disabled: disabled, readOnly: readOnly, onChange: handlePhoneNumberChange, isInvalid: isPhoneNumberInvalid || isInvalid, actions: !disableAction && (jsx$1(ActionButton, { disabled: disabled || isInvalid || isCountryCodeInvalid || isPhoneNumberInvalid, value: `${countryCode}${phoneNumber}`, type: "PHONE_NUMBER", dataTestId: dataTestId && `${dataTestId}-phoneIcon`, iconSize: fieldSize })) }, rest))] }));
+    return (jsxs("div", { className: "grid grid-cols-min-fr gap-2", "data-testid": dataTestId && `${dataTestId}-container`, children: [jsx$1("input", { hidden: true, id: "phone-input", "data-testid": dataTestId, value: combinedValue, ref: hiddenInputRef, onChange: onChange, "aria-invalid": isCombinedValueInvalid || isInvalid }), jsx$1(CountryCodeSelect, { dataTestId: dataTestId && `${dataTestId}-countryCodeSelect`, countryCode: countryCode, onChange: e => {
+                    handleCountryCodeChange(e);
+                    onChangeCountryCode && onChangeCountryCode(e);
+                }, disabled: disabled, readOnly: readOnly, isInvalid: isCountryCodeInvalid || isInvalid, placeholder: countryCodePlaceholderValue, onBlur: onBlurCountryCode }), jsx$1(BaseInput, Object.assign({ id: "phoneInput-number", dataTestId: dataTestId && `${dataTestId}-phoneNumberInput`, fieldSize: fieldSize, type: "tel", value: phoneNumber, disabled: disabled, readOnly: readOnly, onChange: handlePhoneNumberChange, isInvalid: isPhoneNumberInvalid || isInvalid, actions: !disableAction && (jsx$1(ActionButton, { disabled: disabled || isInvalid || isCountryCodeInvalid || isPhoneNumberInvalid, value: `${countryCode}${phoneNumber}`, type: "PHONE_NUMBER", dataTestId: dataTestId && `${dataTestId}-phoneIcon`, iconSize: fieldSize })) }, rest))] }));
 });
 
 /**

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "0.0.128-alpha-b0920fa0dd.0",
+  "version": "0.0.129",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
     "node": ">=18.x"
   },
   "dependencies": {
-    "@trackunit/css-class-variance-utilities": "0.0.13-alpha-b0920fa0dd.0",
-    "@trackunit/i18n-library-translation": "0.0.73-alpha-b0920fa0dd.0",
-    "@trackunit/react-components": "0.1.151-alpha-b0920fa0dd.0",
-    "@trackunit/shared-utils": "0.0.4-alpha-b0920fa0dd.0",
+    "@trackunit/css-class-variance-utilities": "0.0.12",
+    "@trackunit/i18n-library-translation": "0.0.72",
+    "@trackunit/react-components": "0.1.151",
+    "@trackunit/shared-utils": "0.0.4",
     "date-fns": "2.29.3",
     "libphonenumber-js": "1.10.36",
     "react": "18.2.0",

package/src/components/Checkbox/Checkbox.variants.d.ts

@@ -1,7 +1,7 @@
 export declare const cvaCheckbox: (props?: ({
-    disabled?: boolean | null | undefined;
     invalid?: boolean | null | undefined;
     state?: "selected" | "deselected" | "indeterminate" | null | undefined;
+    disabled?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaCheckboxContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaCheckboxInput: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

package/src/components/PhoneInput/PhoneInput.d.ts

@@ -1,5 +1,6 @@
 import { FocusEventHandler } from "react";
 import { BaseInputProps } from "../BaseInput";
+import { SingleValue } from "react-select";
 type BaseInputExposedProps = Omit<BaseInputProps, "actions">;
 export interface PhoneNumberProps {
     countryCode: string;
@@ -23,6 +24,13 @@ export interface PhoneInputProps extends BaseInputExposedProps {
      * On blur handler for country code component.
      */
     onBlurCountryCode?: FocusEventHandler<HTMLInputElement> | undefined;
+    /**
+     * On change handler for country code component.
+     */
+    onChangeCountryCode?: (value: SingleValue<{
+        label: string;
+        value: string;
+    }>) => void;
     /**
      * A placeholder value for country code.
      */