Merge pull request #1187 from Wizleap-Inc/feat/1184_input

(Vue, React) base-inputを内部で使っているコンポーネントから、ComponentProps<"input">のプロパティを公開する

.changeset/slow-insects-enjoy.md

@@ -0,0 +1,6 @@
+---
+"@wizleap-inc/wiz-ui-react": patch
+"@wizleap-inc/wiz-ui-next": patch
+---
+
+[#1184] base-input の focusin, focusout の Event を受け取れるように修正

packages/wiz-ui-next/src/components/base/inputs/base/base.vue

@@ -10,8 +10,8 @@
     :placeholder="placeholder"
     :disabled="disabled"
     :type="type"
-    @focusin="hasFocus = true"
-    @focusout="hasFocus = false"
+    @focusin="onFocusIn"
+    @focusout="onFocusOut"
     v-model="textValue"
     :id="id"
     :autocomplete="autocomplete"
@@ -80,6 +80,8 @@ const props = defineProps({
 
 interface Emit {
   (e: "update:modelValue", value: string): void;
+  (e: "focusin", value: FocusEvent): void;
+  (e: "focusout", value: FocusEvent): void;
 }
 
 const emit = defineEmits<Emit>();
@@ -98,4 +100,13 @@ const state = computed(() => {
   if (hasFocus.value) return "active";
   return "default";
 });
+
+const onFocusIn = (e: FocusEvent) => {
+  hasFocus.value = true;
+  emit("focusin", e);
+};
+const onFocusOut = (e: FocusEvent) => {
+  hasFocus.value = false;
+  emit("focusout", e);
+};
 </script>

packages/wiz-ui-next/src/components/base/inputs/password/password.vue

@@ -11,6 +11,8 @@
       :type="isPasswordVisible ? 'text' : 'password'"
       :autocomplete="autocomplete"
       space-type="right"
+      @focusin="onFocusIn"
+      @focusout="onFocusOut"
     />
     <button
       type="button"
@@ -48,6 +50,8 @@ defineOptions({
 
 interface Emit {
   (e: "update:modelValue", value: string): void;
+  (e: "focusin", value: FocusEvent): void;
+  (e: "focusout", value: FocusEvent): void;
 }
 
 const props = defineProps({
@@ -98,4 +102,8 @@ const computedExpand = computed(() => (props.expand ? "expand" : "default"));
 // Form Control
 const form = inject(formControlKey);
 const isError = computed(() => (form ? form.isError.value : false));
+
+const onFocusIn = (e: FocusEvent) => emit("focusin", e);
+
+const onFocusOut = (e: FocusEvent) => emit("focusout", e);
 </script>

packages/wiz-ui-next/src/components/base/inputs/text/text.vue

@@ -12,6 +12,8 @@
       type="text"
       :space-type="icon ? 'left' : 'none'"
       :autocomplete="autocomplete"
+      @focusin="onFocusIn"
+      @focusout="onFocusOut"
     />
   </div>
 </template>
@@ -72,6 +74,8 @@ const props = defineProps({
 });
 interface Emit {
   (e: "update:modelValue", value: string): void;
+  (e: "focusin", value: FocusEvent): void;
+  (e: "focusout", value: FocusEvent): void;
 }
 
 const emit = defineEmits<Emit>();
@@ -86,4 +90,7 @@ const form = inject(formControlKey);
 const isError = computed(() => (form ? form.isError.value : false));
 
 const computedExpand = computed(() => (props.expand ? "expand" : "default"));
+
+const onFocusIn = (e: FocusEvent) => emit("focusin", e);
+const onFocusOut = (e: FocusEvent) => emit("focusout", e);
 </script>

packages/wiz-ui-react/src/components/base/inputs/password/components/password-input.tsx

@@ -5,14 +5,15 @@ import {
 } from "@wizleap-inc/wiz-ui-constants";
 import * as styles from "@wizleap-inc/wiz-ui-styles/bases/password-input.css";
 import clsx from "clsx";
-import { forwardRef, useContext, useState } from "react";
+import { ComponentProps, forwardRef, useContext, useState } from "react";
 
 import { WizIEye } from "@/components";
 import { FormControlContext } from "@/components/custom/form/components/form-control-context";
 import { BaseProps } from "@/types";
 
 import { PrivateBaseInput } from "../../base";
 
+type PrivateBaseInputProps = ComponentProps<typeof PrivateBaseInput>;
 type Props = BaseProps & {
   id?: string;
   value: string;
@@ -23,7 +24,7 @@ type Props = BaseProps & {
   autocomplete?: Extract<AutoCompleteKeys, "currentPassword" | "newPassword">;
   error?: boolean;
   onChange: (value: string) => void;
-};
+} & Omit<PrivateBaseInputProps, "onChange">;
 
 const PasswordInput = forwardRef<HTMLInputElement, Props>(
   (
@@ -39,6 +40,7 @@ const PasswordInput = forwardRef<HTMLInputElement, Props>(
       autocomplete = "off",
       error,
       onChange,
+      ...props
     },
     ref
   ) => {
@@ -69,6 +71,7 @@ const PasswordInput = forwardRef<HTMLInputElement, Props>(
           autoComplete={autocomplete}
           space-type="right"
           onChange={(e) => onChange(e.target.value)}
+          {...props}
         />
         <button
           type="button"