feat <DynamicWidthInput /> (#1430)

.changeset/rotten-houses-change.md

@@ -0,0 +1,5 @@
+---
+"ingred-ui": patch
+---
+
+fix DateField and DateRangeField width

src/components/DateField/DateField/DateField.tsx

@@ -5,6 +5,7 @@ import { useMergeRefs } from "../../../hooks/useMergeRefs";
 import { CalendarIcon, InputContainer } from "./styled";
 import { Dayjs } from "dayjs";
 import { useTheme } from "../../../themes";
+import { getInputWidth } from "../internal/utils";
 
 export type DateFieldProps = {
   /**
@@ -42,7 +43,7 @@ const DateField = forwardRef<HTMLInputElement, DateFieldProps>(
     propRef,
   ) {
     const theme = useTheme();
-    const width = useMemo(() => format.length * 10, [format]);
+    const width = useMemo(() => `${getInputWidth(format) * 10}px`, [format]);
     const { ref: inputRef, ...props } = useDateField({ format, ...rest });
     const ref = useMergeRefs<HTMLInputElement>(propRef, inputRef);
 

src/components/DateField/DateRangeField/DateRangeField.tsx

@@ -9,6 +9,7 @@ import {
   ClickStateType,
 } from "../../Calendar/CalendarRange/constants";
 import { useTheme } from "../../../themes";
+import { getInputWidth } from "../internal/utils";
 
 export type DateRangeFieldProps = {
   /**
@@ -52,7 +53,7 @@ const DateRangeField = forwardRef<HTMLInputElement, DateRangeFieldProps>(
     propRef,
   ) {
     const theme = useTheme();
-    const width = useMemo(() => format.length * 12, [format]);
+    const width = useMemo(() => `${getInputWidth(format) * 10}px`, [format]);
 
     const handleChange = (t: ClickStateType) => (date: Dayjs) => {
       const { startDate, endDate } = rest.date;

src/components/DateField/internal/__tests__/utils.test.ts

@@ -0,0 +1,27 @@
+import { getInputWidth } from "../utils";
+
+describe("getInputWidth", () => {
+  it("should return the correct width for a single-byte character", () => {
+    const input = "a";
+    const expectedWidth = 1;
+    expect(getInputWidth(input)).toEqual(expectedWidth);
+  });
+
+  it("should return the correct width for a double-byte character", () => {
+    const input = "あ";
+    const expectedWidth = 2;
+    expect(getInputWidth(input)).toEqual(expectedWidth);
+  });
+
+  it("should return the correct width for a mix of single-byte and double-byte characters", () => {
+    const input = "aあb";
+    const expectedWidth = 4;
+    expect(getInputWidth(input)).toEqual(expectedWidth);
+  });
+
+  it("should return 0 for an empty string", () => {
+    const input = "";
+    const expectedWidth = 0;
+    expect(getInputWidth(input)).toEqual(expectedWidth);
+  });
+});

src/components/DateField/internal/utils.ts

@@ -0,0 +1,5 @@
+export const getInputWidth = (input: string) =>
+  [...input.split("")].reduce((acc, char) => {
+    const code = char.charCodeAt(0);
+    return acc + (code >= 0x3000 && code <= 0xff60 ? 2 : 1);
+  }, 0);