@akinon/next 1.69.0 → 1.70.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @akinon/next
 
+## 1.70.0
+
+### Minor Changes
+
+- f046f8e: ZERO-2575: update version for react-number-format
+
 ## 1.69.0
 
 ### Minor Changes

package/components/input.tsx

@@ -1,17 +1,28 @@
 import clsx from 'clsx';
-import { forwardRef, FocusEvent, useState } from 'react';
+import { forwardRef, FocusEvent, useState, Ref } from 'react';
 import { Controller } from 'react-hook-form';
-import NumberFormat, { NumberFormatProps } from 'react-number-format';
+import { PatternFormat, PatternFormatProps } from 'react-number-format';
 import { InputProps } from '../types';
 import { twMerge } from 'tailwind-merge';
 
+const PatternFormatWithRef = forwardRef(
+  (props: PatternFormatProps, ref: Ref<HTMLInputElement>) => {
+    return <PatternFormat {...props} getInputRef={ref} />;
+  }
+);
+PatternFormatWithRef.displayName = 'PatternFormatWithRef';
+
 export const Input = forwardRef<
   HTMLInputElement,
   InputProps &
     Pick<
-      NumberFormatProps,
-      'format' | 'mask' | 'allowEmptyFormatting' | 'onValueChange'
-    >
+      PatternFormatProps,
+      'mask' | 'allowEmptyFormatting' | 'onValueChange'
+    > & {
+      format?: string;
+      defaultValue?: string;
+      type?: string;
+    }
 >((props, ref) => {
   const [focused, setFocused] = useState(false);
   const [hasValue, setHasValue] = useState(false);
@@ -36,6 +47,7 @@ export const Input = forwardRef<
     ),
     props.className
   );
+
   const inputProps: any = {
     id,
     ref,
@@ -78,14 +90,14 @@ export const Input = forwardRef<
             <Controller
               name={props.name ?? ''}
               control={props.control}
-              defaultValue={false}
               render={({ field }) => (
-                <NumberFormat
+                <PatternFormatWithRef
                   format={format}
                   mask={mask ?? ''}
                   {...rest}
                   {...field}
                   {...inputProps}
+                  type={props.type as 'text' | 'password' | 'tel'}
                 />
               )}
             />

package/components/price.tsx

@@ -1,11 +1,11 @@
 import { useMemo } from 'react';
-import NumberFormat, { NumberFormatProps } from 'react-number-format';
+import { NumericFormat, NumericFormatProps } from 'react-number-format';
 import { getCurrency } from '@akinon/next/utils';
 import { useLocalization } from '@akinon/next/hooks';
 import { PriceProps } from '../types';
 import Settings from 'settings';
 
-export const Price = (props: NumberFormatProps & PriceProps) => {
+export const Price = (props: NumericFormatProps & PriceProps) => {
   const {
     value,
     currencyCode,
@@ -59,7 +59,7 @@ export const Price = (props: NumberFormatProps & PriceProps) => {
   ).decimalScale;
 
   return (
-    <NumberFormat
+    <NumericFormat
       value={displayValue}
       displayType={displayType}
       thousandSeparator={thousandSeparator}
@@ -68,7 +68,6 @@ export const Price = (props: NumberFormatProps & PriceProps) => {
       fixedDecimalScale={fixedDecimalScale}
       prefix={!useCurrencyAfterPrice ? currency : undefined}
       suffix={useCurrencyAfterPrice ? currency : undefined}
-      isNumericString={true}
       {...rest}
     />
   );

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@akinon/next",
   "description": "Core package for Project Zero Next",
-  "version": "1.69.0",
+  "version": "1.70.0",
   "private": false,
   "license": "MIT",
   "bin": {
@@ -30,7 +30,7 @@
     "set-cookie-parser": "2.6.0"
   },
   "devDependencies": {
-    "@akinon/eslint-plugin-projectzero": "1.69.0",
+    "@akinon/eslint-plugin-projectzero": "1.70.0",
     "@types/react-redux": "7.1.30",
     "@types/set-cookie-parser": "2.4.7",
     "@typescript-eslint/eslint-plugin": "6.7.4",