sales-frontend-components 0.1.4 → 1.0.1

package/dist/index.cjs.js

@@ -30,24 +30,28 @@ var styles$g = require('./terms/components/unit/terms-mobile-card.module.scss');
 var styles$h = require('./terms/components/_shared/terms.module.scss');
 
 const HookFormCheckboxButton = ({
-  name,
-  control,
-  disabled,
-  children,
-  ...props
+  useControllerProps,
+  checkboxButtonProps,
+  children
 }) => {
-  const { field, fieldState } = reactHookForm.useController({ name, control, disabled });
+  const { field, fieldState } = reactHookForm.useController(useControllerProps);
+  const { onChange: fieldOnChange, onBlur: fieldOnBlur, ...restField } = field;
+  const { onChange: propsOnChange, id: propsId, onBlur: propsOnBlur, ...restProps } = checkboxButtonProps;
   return /* @__PURE__ */ jsxRuntime.jsx(
     salesFrontendDesignSystem.CheckboxButton,
     {
-      ...props,
-      ...field,
-      id: field.name,
+      ...restProps,
+      ...restField,
+      id: propsId ?? field.name,
       checked: field.value ?? false,
       error: fieldState.invalid,
       onChange: (checked) => {
-        field.onChange(checked);
-        props.onChange?.(checked);
+        propsOnChange?.(checked);
+        fieldOnChange?.(checked);
+      },
+      onBlur: (e) => {
+        propsOnBlur?.(e);
+        fieldOnBlur?.();
       },
       children
     }
@@ -55,14 +59,31 @@ const HookFormCheckboxButton = ({
 };
 
 const HookFormCheckbox = ({
-  name,
-  control,
-  disabled,
-  children,
-  ...props
+  useControllerProps,
+  checkboxProps,
+  children
 }) => {
-  const { field } = reactHookForm.useController({ name, control, disabled });
-  return /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Checkbox, { ...props, ...field, id: field.name, checked: field.value, onChange: field.onChange, children });
+  const { field } = reactHookForm.useController(useControllerProps);
+  const { onChange: fieldOnChange, onBlur: fieldOnBlur, ...restField } = field;
+  const { onChange: propsOnChange, onBlur: propsOnBlur, id: propsId, ...restProps } = checkboxProps;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    salesFrontendDesignSystem.Checkbox,
+    {
+      ...restProps,
+      ...restField,
+      id: propsId ?? field.name,
+      checked: field.value ?? false,
+      onChange: (checked) => {
+        propsOnChange?.(checked);
+        fieldOnChange?.(checked);
+      },
+      onBlur: (e) => {
+        propsOnBlur?.(e);
+        fieldOnBlur?.();
+      },
+      children
+    }
+  );
 };
 
 function getDefaultExportFromCjs (x) {
@@ -3876,40 +3897,56 @@ function JobVehicleSearchModal({ onClose }) {
 }
 
 const HookFormSearchJobField = ({
-  name,
-  control,
-  disabled,
-  error,
-  size = "medium",
-  placeholder = "\uC9C1\uC885 \uAC80\uC0C9",
-  onValueChange,
-  defaultValue,
-  ...props
+  useControllerProps,
+  searchJobFieldProps
 }) => {
+  const {
+    error: propsError,
+    size = "medium",
+    placeholder = "\uC9C1\uC885 \uAC80\uC0C9",
+    onValueChange: propsOnValueChange,
+    defaultValue,
+    onClick: propsOnClick,
+    onBlur: propsOnBlur,
+    id: propsId,
+    ...restProps
+  } = searchJobFieldProps;
   const [selected, setSelected] = React9.useState(defaultValue);
-  const { field, fieldState } = reactHookForm.useController({ name, control, disabled });
+  const { field, fieldState } = reactHookForm.useController(useControllerProps);
+  const { onChange: fieldOnChange, onBlur: fieldOnBlur, ...restField } = field;
   const { JobSearchModal, openJobSearchModal, selectedJob } = useJobSearchModal();
   React9.useEffect(() => {
     if (selectedJob) {
-      field.onChange(selectedJob.occupationIndustryName);
-      setSelected({ label: selectedJob.occupationIndustryName, value: selectedJob.occupationIndustryCode });
-      onValueChange?.({ label: selectedJob.occupationIndustryName, value: selectedJob.occupationIndustryCode });
+      const nextSelected = {
+        label: selectedJob.occupationIndustryName,
+        value: selectedJob.occupationIndustryCode
+      };
+      fieldOnChange?.(nextSelected.label);
+      setSelected(nextSelected);
+      propsOnValueChange?.(nextSelected);
     }
-  }, [selectedJob]);
+  }, [fieldOnChange, propsOnValueChange, selectedJob]);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       salesFrontendDesignSystem.FormField.ComboBox,
       {
-        ...props,
-        ...field,
-        id: field.name,
-        error: fieldState.invalid || error,
+        ...restProps,
+        ...restField,
+        id: propsId ?? field.name,
+        error: fieldState.invalid || propsError,
         value: selected?.label ?? "",
         icon: "search",
         size,
         placeholder,
         autoComplete: "off",
-        onClick: openJobSearchModal
+        onClick: (e) => {
+          propsOnClick?.(e);
+          openJobSearchModal();
+        },
+        onBlur: (e) => {
+          propsOnBlur?.(e);
+          fieldOnBlur?.();
+        }
       }
     ),
     JobSearchModal
@@ -3917,15 +3954,27 @@ const HookFormSearchJobField = ({
 };
 
 const HookFormSegmentGroup = ({
-  name,
-  control,
-  disabled,
-  disabledItems,
-  defaultValue,
-  items,
-  ...props
+  useControllerProps,
+  segmentGroupProps
 }) => {
-  const { field, fieldState } = reactHookForm.useController({ name, control, disabled, defaultValue });
+  const { field, fieldState } = reactHookForm.useController(useControllerProps);
+  const {
+    onChange: fieldOnChange,
+    onBlur: fieldOnBlur,
+    ref: fieldRef,
+    value: fieldValue,
+    disabled: fieldDisabled,
+    name: fieldName
+  } = field;
+  const {
+    items,
+    disabledItems,
+    onValueChange: propsOnValueChange,
+    onBlur: propsOnBlur,
+    id: propsId,
+    error: propsError,
+    ...restProps
+  } = segmentGroupProps;
   const itemList = items.map((item) => {
     return {
       ...item,
@@ -3935,42 +3984,48 @@ const HookFormSegmentGroup = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     salesFrontendDesignSystem.SegmentGroup,
     {
-      ...props,
-      id: field.name,
-      ref: field.ref,
-      defaultValue: field.value,
-      disabled: field.disabled,
-      error: fieldState.invalid,
-      onBlur: field.onBlur,
+      ...restProps,
+      id: propsId ?? fieldName,
+      ref: fieldRef,
+      defaultValue: fieldValue,
+      disabled: fieldDisabled,
+      error: fieldState.invalid || propsError,
+      onBlur: (e) => {
+        propsOnBlur?.(e);
+        fieldOnBlur?.();
+      },
       items: itemList,
       onValueChange: (selected) => {
-        field.onChange(selected);
-        props.onValueChange?.(selected);
+        propsOnValueChange?.(selected);
+        fieldOnChange?.(selected);
       }
     }
   );
 };
 
 const HookFormSelect = ({
-  name,
-  control,
-  disabled,
-  error,
-  children,
-  ...props
+  useControllerProps,
+  selectProps,
+  children
 }) => {
-  const { field, fieldState } = reactHookForm.useController({ name, control, disabled });
+  const { field, fieldState } = reactHookForm.useController(useControllerProps);
+  const { onChange: fieldOnChange, onBlur: fieldOnBlur, ...restField } = field;
+  const { onChange: propsOnChange, onBlur: propsOnBlur, id: propsId, error: propsError, ...restProps } = selectProps;
   return /* @__PURE__ */ jsxRuntime.jsx(
     salesFrontendDesignSystem.Select,
     {
-      ...props,
-      id: field.name,
+      ...restProps,
+      ...restField,
+      id: propsId ?? field.name,
       disabled: field.disabled,
-      error: fieldState.invalid || error,
-      onBlur: field.onBlur,
-      value: field.value,
+      error: fieldState.invalid || propsError,
+      onBlur: (e) => {
+        propsOnBlur?.(e);
+        fieldOnBlur?.();
+      },
       onChange: (selected) => {
-        field.onChange(selected);
+        propsOnChange?.(selected);
+        fieldOnChange?.(selected);
       },
       children
     }
@@ -3982,9 +4037,10 @@ const HookFormSelectOption = ({ children, value, ...rest }) => {
 const HookFormSelectGroup = ({
   options,
   optionsProps,
-  ...props
+  selectProps,
+  useControllerProps
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(HookFormSelect, { ...props, children: options.map(
+  return /* @__PURE__ */ jsxRuntime.jsx(HookFormSelect, { selectProps, useControllerProps, children: options.map(
     (option) => option.label && /* @__PURE__ */ jsxRuntime.jsx(HookFormSelectOption, { value: option.value, ...optionsProps, children: option.label }, option.value)
   ) });
 };
@@ -3992,41 +4048,52 @@ HookFormSelect.Option = HookFormSelectOption;
 HookFormSelect.Group = HookFormSelectGroup;
 
 const HookFormTextField = ({
-  name,
-  control,
-  size = "medium",
-  disabled,
-  error,
-  onBlur,
-  onChange,
-  rootProps,
-  ...props
+  useControllerProps,
+  textFieldProps
 }) => {
-  const { field, fieldState } = reactHookForm.useController({ name, control, disabled });
+  const { field, fieldState } = reactHookForm.useController(useControllerProps);
+  const {
+    onChange: fieldOnChange,
+    onBlur: fieldOnBlur,
+    value: fieldValue,
+    name: fieldName,
+    disabled: fieldDisabled,
+    ...restField
+  } = field;
+  const {
+    onChange: propsOnChange,
+    onBlur: propsOnBlur,
+    id: propsId,
+    error: propsError,
+    size = "medium",
+    rootProps: propsRootProps,
+    ...restProps
+  } = textFieldProps;
   return /* @__PURE__ */ jsxRuntime.jsx(
     salesFrontendDesignSystem.FormField.TextField,
     {
-      ...props,
-      id: field.name,
+      ...restProps,
+      ...restField,
+      id: propsId ?? fieldName,
       size,
       autoComplete: "off",
-      name: field.name,
-      value: field.value ?? "",
-      disabled: field.disabled,
-      error: fieldState.invalid || error,
+      name: fieldName,
+      value: fieldValue ?? "",
+      disabled: fieldDisabled,
+      error: fieldState.invalid || propsError,
       onChange: (e) => {
-        field.onChange(e);
-        onChange?.(e);
+        propsOnChange?.(e);
+        fieldOnChange?.(e);
       },
       onBlur: (e) => {
-        field.onBlur();
-        onBlur?.(e);
+        propsOnBlur?.(e);
+        fieldOnBlur?.();
       },
       rootProps: {
-        ...rootProps,
+        ...propsRootProps,
         onClear: () => {
-          field.onChange("");
-          rootProps?.onClear?.();
+          fieldOnChange?.("");
+          propsRootProps?.onClear?.();
         }
       }
     }
@@ -4034,55 +4101,59 @@ const HookFormTextField = ({
 };
 
 const HookFormDatePickerRenew = ({
-  name,
-  control,
-  disabled,
-  defaultValue,
+  useControllerProps,
   datepickerProps
 }) => {
-  const { field, fieldState } = reactHookForm.useController({ name, control, disabled, defaultValue });
+  const controllerDefaultValue = datepickerProps.defaultValue ? dayjs(datepickerProps.defaultValue).toDate() : void 0;
+  const { field, fieldState } = reactHookForm.useController({
+    defaultValue: controllerDefaultValue,
+    ...useControllerProps
+  });
   return /* @__PURE__ */ jsxRuntime.jsx(
     salesFrontendDesignSystem.DatePickerSingleRenew,
     {
+      ...datepickerProps,
       defaultValue: field.value ? dayjs(field.value) : void 0,
       onValueChange: (value) => {
+        datepickerProps.onValueChange?.(value);
         field.onChange(dayjs(value).toDate());
       },
       inputProps: {
+        ...datepickerProps.inputProps,
         comboBoxItemProps: {
-          error: fieldState.invalid,
           ...datepickerProps.inputProps?.comboBoxItemProps,
+          error: fieldState.invalid,
           ...field
-        },
-        ...datepickerProps.inputProps
-      },
-      ...datepickerProps
+        }
+      }
     }
   );
 };
 
 const HookFormDateRangePickerRenew = ({
-  name,
-  control,
-  disabled,
-  defaultValue,
+  useControllerProps,
   startDateProps,
   endDateProps
 }) => {
+  const controllerDefaultValue = {
+    startDate: startDateProps.defaultValue ? dayjs(startDateProps.defaultValue) : void 0,
+    endDate: endDateProps.defaultValue ? dayjs(endDateProps.defaultValue) : void 0
+  };
   const { field, fieldState } = reactHookForm.useController({
-    name,
-    control,
-    disabled,
-    defaultValue
+    defaultValue: controllerDefaultValue,
+    ...useControllerProps
   });
   const { name: fieldName, onChange, ...restField } = field;
   const startDateMergedProps = {
+    ...startDateProps,
+    inputFormat: startDateProps.inputFormat || "YY.MM.DD",
     defaultValue: field.value?.startDate ? dayjs(field.value?.startDate) : void 0,
     calendarProps: {
       max: field.value?.endDate ? dayjs(field.value?.endDate) : void 0,
-      ...startDateProps?.calendarProps
+      ...startDateProps.calendarProps
     },
     onValueChange: (value) => {
+      startDateProps.onValueChange?.(value);
       if (field.value) {
         onChange({
           startDate: value.toDate(),
@@ -4090,26 +4161,27 @@ const HookFormDateRangePickerRenew = ({
         });
       }
     },
-    inputFormat: "YY.MM.DD",
     inputProps: {
+      ...startDateProps.inputProps,
       comboBoxItemProps: {
+        ...startDateProps.inputProps?.comboBoxItemProps,
         name: `${fieldName}.startDate`,
-        size: "small",
+        size: startDateProps.inputProps?.comboBoxItemProps?.size || "small",
         error: fieldState.invalid,
-        ...startDateProps?.inputProps?.comboBoxItemProps,
         ...restField
-      },
-      ...startDateProps?.inputProps
-    },
-    ...startDateProps
+      }
+    }
   };
   const endDateMergedProps = {
+    ...endDateProps,
+    inputFormat: endDateProps.inputFormat || "YY.MM.DD",
     defaultValue: field.value?.endDate ? dayjs(field.value?.endDate) : void 0,
     calendarProps: {
       min: field.value?.startDate ? dayjs(field.value?.startDate) : void 0,
-      ...endDateProps?.calendarProps
+      ...endDateProps.calendarProps
     },
     onValueChange: (value) => {
+      endDateProps.onValueChange?.(value);
       if (field.value) {
         onChange({
           startDate: field.value?.startDate,
@@ -4117,18 +4189,16 @@ const HookFormDateRangePickerRenew = ({
         });
       }
     },
-    inputFormat: "YY.MM.DD",
     inputProps: {
+      ...endDateProps.inputProps,
       comboBoxItemProps: {
+        ...endDateProps.inputProps?.comboBoxItemProps,
         name: `${fieldName}.endDate`,
-        size: "small",
+        size: endDateProps.inputProps?.comboBoxItemProps?.size || "small",
         error: fieldState.invalid,
-        ...endDateProps?.inputProps?.comboBoxItemProps,
         ...restField
-      },
-      ...endDateProps?.inputProps
-    },
-    ...endDateProps
+      }
+    }
   };
   return /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.DatePickerRangeRenew, { startDateProps: startDateMergedProps, endDateProps: endDateMergedProps });
 };