diff --git a/dist/form.js b/dist/form.js
index cd6e64c..93853a4 100644
--- a/dist/form.js
+++ b/dist/form.js
@@ -1,8 +1,9 @@
-import { jsx as l, jsxs as R } from "react/jsx-runtime";
-import { Input as I, Checkbox as ee, Textarea as re, RadioGroup as te, HStack as le, Radio as ne, Select as oe, Modal as ie, ModalOverlay as ce, ModalContent as ue, ModalHeader as se, ModalCloseButton as ae, ModalBody as de, VStack as fe, SimpleGrid as be, ModalFooter as pe, Button as A, FormControl as ve, FormLabel as me, FormErrorMessage as xe, useDisclosure as Fe } from "@chakra-ui/react";
-import { useContext as he, useMemo as m, useRef as ge, useEffect as G, createContext as ke, useState as Se, useCallback as E } from "react";
-import { Controller as P, useForm as ye, useWatch as Re } from "react-hook-form";
-const Me = {}, y = {
+import { jsx as n, jsxs as C } from "react/jsx-runtime";
+import { Input as P, Checkbox as ee, Textarea as re, RadioGroup as te, HStack as le, Radio as ne, Modal as oe, ModalOverlay as ie, ModalContent as ce, ModalHeader as ue, ModalCloseButton as se, ModalBody as ae, VStack as de, SimpleGrid as fe, ModalFooter as be, Button as G, FormControl as me, FormLabel as ve, FormErrorMessage as xe, useDisclosure as pe } from "@chakra-ui/react";
+import { Select as Fe } from "chakra-react-select";
+import { useContext as he, useMemo as p, useRef as ke, useEffect as H, createContext as ge, useState as Se, useCallback as I } from "react";
+import { Controller as z, useForm as ye, useWatch as Re } from "react-hook-form";
+const Me = {}, M = {
create: {
titlePrefix: "افزودن",
submitText: "ثبت"
@@ -11,21 +12,21 @@ const Me = {}, y = {
titlePrefix: "ویرایش",
submitText: "ویرایش"
}
-}, H = ke(null);
+}, U = ge(null);
function Ce({ item: e, mode: r }) {
return e ? [r, e.rowId, e.entityId, e.id].filter(Boolean).join("-") : r;
}
-function x({ required: e, validate: r, rules: t }) {
- const n = { ...t ?? {} };
- return e && (n.required = typeof e == "string" ? e : "این فیلد الزامی است."), r && (n.validate = r), n;
+function F({ required: e, validate: r, rules: t }) {
+ const l = { ...t ?? {} };
+ return e && (l.required = typeof e == "string" ? e : "این فیلد الزامی است."), r && (l.validate = r), l;
}
-function v() {
- const e = he(H);
+function x() {
+ const e = he(U);
if (!e)
throw new Error("Field باید داخل FormModal استفاده شود.");
return e;
}
-function U(e = []) {
+function _(e = []) {
return e.map((r, t) => {
if (typeof r != "object" || r === null) {
const o = String(r);
@@ -36,57 +37,67 @@ function U(e = []) {
disabled: !1
};
}
- const n = r.value ?? r.id;
+ const l = r.value ?? r.id;
return {
- key: String(r.key ?? n ?? t),
- label: r.label ?? r.name ?? n,
- value: String(n),
+ key: String(r.key ?? l ?? t),
+ label: r.label ?? r.name ?? l,
+ value: String(l),
disabled: !!r.disabled
};
});
}
-function Ve({ options: e = [] }) {
- return e.map((r, t) => /* @__PURE__ */ l(
- "option",
- {
- value: r.value,
- disabled: r.disabled,
- children: r.label
- },
- `${r.key}-${t}`
- ));
-}
-function F({ name: e, label: r, showWhen: t, children: n }) {
+function h({ name: e, label: r, showWhen: t, children: l }) {
var s;
- const { errors: o, control: u } = v(), c = Re({
+ const { errors: o, control: u } = x(), c = Re({
control: u,
name: t == null ? void 0 : t.name
});
- return m(() => t ? typeof t == "function" ? t({
+ return p(() => t ? typeof t == "function" ? t({
value: c
- }) : c === t.value : !0, [t, c]) ? /* @__PURE__ */ R(ve, { isInvalid: !!o[e], children: [
- r && /* @__PURE__ */ l(me, { fontSize: "sm", fontWeight: "bold", children: r }),
- n,
- /* @__PURE__ */ l(xe, { children: (s = o[e]) == null ? void 0 : s.message })
+ }) : c === t.value : !0, [t, c]) ? /* @__PURE__ */ C(me, { isInvalid: !!o[e], children: [
+ r && /* @__PURE__ */ n(ve, { fontSize: "sm", fontWeight: "bold", children: r }),
+ l,
+ /* @__PURE__ */ n(xe, { children: (s = o[e]) == null ? void 0 : s.message })
] }) : null;
}
-function Be({
+function Ve({
name: e,
label: r,
required: t,
- validate: n,
+ validate: l,
rules: o,
showWhen: u,
placeholder: c,
...i
}) {
- const { register: s } = v();
- return /* @__PURE__ */ l(F, { name: e, label: r, showWhen: u, children: /* @__PURE__ */ l(
- I,
+ const { register: s } = x();
+ return /* @__PURE__ */ n(h, { name: e, label: r, showWhen: u, children: /* @__PURE__ */ n(
+ P,
{
borderRadius: "xl",
placeholder: c,
- ...s(e, x({ required: t, validate: n, rules: o })),
+ ...s(e, F({ required: t, validate: l, rules: o })),
+ ...i
+ }
+ ) });
+}
+function Be({
+ name: e,
+ label: r,
+ required: t,
+ validate: l,
+ rules: o,
+ showWhen: u,
+ placeholder: c,
+ ...i
+}) {
+ const { register: s } = x();
+ return /* @__PURE__ */ n(h, { name: e, label: r, showWhen: u, children: /* @__PURE__ */ n(
+ re,
+ {
+ borderRadius: "xl",
+ placeholder: c,
+ ...s(e, F({ required: t, validate: l, rules: o })),
...i
}
) });
@@ -95,20 +106,57 @@ function Ee({
name: e,
label: r,
required: t,
- validate: n,
+ validate: l,
rules: o,
showWhen: u,
- placeholder: c,
- ...i
+ placeholder: c = "انتخاب کنید",
+ options: i = [],
+ onChange: s,
+ isClearable: f = !0,
+ ...m
}) {
- const { register: s } = v();
- return /* @__PURE__ */ l(F, { name: e, label: r, showWhen: u, children: /* @__PURE__ */ l(
- re,
+ const { control: b, setValue: a } = x(), S = p(() => _(i), [i]);
+ return /* @__PURE__ */ n(h, { name: e, label: r, showWhen: u, children: /* @__PURE__ */ n(
+ z,
{
- borderRadius: "xl",
- placeholder: c,
- ...s(e, x({ required: t, validate: n, rules: o })),
- ...i
+ name: e,
+ control: b,
+ rules: F({ required: t, validate: l, rules: o }),
+ render: ({ field: g }) => {
+ const V = S.find((d) => d.value === g.value) ?? null;
+ return /* @__PURE__ */ n(
+ Fe,
+ {
+ placeholder: c,
+ options: S,
+ value: V,
+ isClearable: f,
+ isRtl: !0,
+ menuPlacement: "auto",
+ menuPosition: "fixed",
+ selectedOptionStyle: "check",
+ chakraStyles: {
+ control: (d) => ({
+ ...d,
+ borderRadius: "var(--chakra-radii-xl)"
+ }),
+ menu: (d) => ({
+ ...d,
+ zIndex: 2e3
+ })
+ },
+ onChange: (d) => {
+ const y = (d == null ? void 0 : d.value) ?? "";
+ g.onChange(y), s == null || s({
+ value: y,
+ option: d,
+ setValue: a
+ });
+ },
+ ...m
+ }
+ );
+ }
}
) });
}
@@ -116,37 +164,38 @@ function Ie({
name: e,
label: r,
required: t,
- validate: n,
+ validate: l,
rules: o,
showWhen: u,
- placeholder: c = "انتخاب کنید",
- options: i = [],
- onChange: s,
- isClearable: d = !0,
- ...b
+ options: c = [],
+ onChange: i
}) {
- const { control: f, setValue: a } = v(), M = m(() => U(i), [i]);
- return /* @__PURE__ */ l(F, { name: e, label: r, showWhen: u, children: /* @__PURE__ */ l(
- P,
+ const { control: s, setValue: f } = x(), m = _(c);
+ return /* @__PURE__ */ n(h, { name: e, label: r, showWhen: u, children: /* @__PURE__ */ n(
+ z,
{
name: e,
- control: f,
- rules: x({ required: t, validate: n, rules: o }),
- render: ({ field: g }) => /* @__PURE__ */ l(
- oe,
+ control: s,
+ rules: F({ required: t, validate: l, rules: o }),
+ render: ({ field: b }) => /* @__PURE__ */ n(
+ te,
{
- borderRadius: "xl",
- placeholder: d ? c : void 0,
- value: g.value ?? "",
- onChange: (C) => {
- const k = C.target.value;
- g.onChange(k), s == null || s({
- value: k,
- setValue: a
+ value: b.value,
+ onChange: (a) => {
+ b.onChange(a), i == null || i({
+ value: a,
+ setValue: f
});
},
- ...b,
- children: /* @__PURE__ */ l(Ve, { options: M })
+ children: /* @__PURE__ */ n(le, { pt: "8px", spacing: 3, children: m.map((a) => /* @__PURE__ */ n(
+ ne,
+ {
+ value: a.value,
+ isDisabled: a.disabled,
+ children: a.label
+ },
+ a.value
+ )) })
}
)
}
@@ -156,61 +205,28 @@ function Pe({
name: e,
label: r,
required: t,
- validate: n,
- rules: o,
- showWhen: u,
- options: c = [],
- onChange: i
-}) {
- const { control: s, setValue: d } = v(), b = U(c);
- return /* @__PURE__ */ l(F, { name: e, label: r, showWhen: u, children: /* @__PURE__ */ l(
- P,
- {
- name: e,
- control: s,
- rules: x({ required: t, validate: n, rules: o }),
- render: ({ field: f }) => /* @__PURE__ */ l(
- te,
- {
- value: f.value,
- onChange: (a) => {
- f.onChange(a), i == null || i({
- value: a,
- setValue: d
- });
- },
- children: /* @__PURE__ */ l(le, { pt: "8px", spacing: 3, children: b.map((a) => /* @__PURE__ */ l(ne, { value: a.value, children: a.label }, a.value)) })
- }
- )
- }
- ) });
-}
-function $e({
- name: e,
- label: r,
- required: t,
- validate: n,
+ validate: l,
rules: o,
showWhen: u,
children: c,
onChange: i
}) {
- const { control: s, setValue: d } = v();
- return /* @__PURE__ */ l(F, { name: e, label: r, showWhen: u, children: /* @__PURE__ */ l(
- P,
+ const { control: s, setValue: f } = x();
+ return /* @__PURE__ */ n(h, { name: e, label: r, showWhen: u, children: /* @__PURE__ */ n(
+ z,
{
name: e,
control: s,
- rules: x({ required: t, validate: n, rules: o }),
- render: ({ field: b }) => /* @__PURE__ */ l(
+ rules: F({ required: t, validate: l, rules: o }),
+ render: ({ field: m }) => /* @__PURE__ */ n(
ee,
{
- isChecked: !!b.value,
- onChange: (f) => {
- const a = f.target.checked;
- b.onChange(a), i == null || i({
+ isChecked: !!m.value,
+ onChange: (b) => {
+ const a = b.target.checked;
+ m.onChange(a), i == null || i({
value: a,
- setValue: d
+ setValue: f
});
},
children: c ?? r
@@ -223,18 +239,18 @@ function ze({
name: e,
label: r,
required: t,
- validate: n,
+ validate: l,
rules: o,
showWhen: u,
...c
}) {
- const { register: i } = v();
- return /* @__PURE__ */ l(F, { name: e, label: r, showWhen: u, children: /* @__PURE__ */ l(
- I,
+ const { register: i } = x();
+ return /* @__PURE__ */ n(h, { name: e, label: r, showWhen: u, children: /* @__PURE__ */ n(
+ P,
{
type: "file",
borderRadius: "xl",
- ...i(e, x({ required: t, validate: n, rules: o })),
+ ...i(e, F({ required: t, validate: l, rules: o })),
...c
}
) });
@@ -243,115 +259,115 @@ function De({
name: e,
label: r,
required: t,
- validate: n,
+ validate: l,
rules: o,
showWhen: u,
...c
}) {
- const { register: i } = v();
- return /* @__PURE__ */ l(F, { name: e, label: r, showWhen: u, children: /* @__PURE__ */ l(
- I,
+ const { register: i } = x();
+ return /* @__PURE__ */ n(h, { name: e, label: r, showWhen: u, children: /* @__PURE__ */ n(
+ P,
{
type: "date",
borderRadius: "xl",
- ...i(e, x({ required: t, validate: n, rules: o })),
+ ...i(e, F({ required: t, validate: l, rules: o })),
...c
}
) });
}
const Ae = {
- Input: Be,
- Select: Ie,
- Radio: Pe,
- Textarea: Ee,
- Check: $e,
+ Input: Ve,
+ Select: Ee,
+ Radio: Ie,
+ Textarea: Be,
+ Check: Pe,
Filepicker: ze,
Datepicker: De,
- useForm: v
+ useForm: x
};
function Ge({
isOpen: e,
close: r,
item: t = null,
- entityName: n = "آیتم",
+ entityName: l = "آیتم",
title: o,
createTitle: u,
editTitle: c,
submitText: i,
createSubmitText: s,
- editSubmitText: d,
- defaultValues: b = Me,
- getDefaultValues: f,
+ editSubmitText: f,
+ defaultValues: m = Me,
+ getDefaultValues: b,
resetKey: a,
- onSubmit: M,
+ onSubmit: S,
transformValues: g,
- children: C,
- isLoading: k = !1,
- size: _ = "lg",
+ children: V,
+ isLoading: d = !1,
+ size: y = "lg",
columns: Y = { base: 1, md: 2 }
}) {
- const p = !!t, h = p ? "edit" : "create", w = m(() => o || (p ? c ?? `${y.edit.titlePrefix} ${n}` : u ?? `${y.create.titlePrefix} ${n}`), [o, c, u, n, p]), J = m(() => i || (p ? d ?? y.edit.submitText : s ?? y.create.submitText), [i, d, s, p]), S = m(() => typeof f == "function" ? f({
+ const v = !!t, k = v ? "edit" : "create", w = p(() => o || (v ? c ?? `${M.edit.titlePrefix} ${l}` : u ?? `${M.create.titlePrefix} ${l}`), [o, c, u, l, v]), J = p(() => i || (v ? f ?? M.edit.submitText : s ?? M.create.submitText), [i, f, s, v]), R = p(() => typeof b == "function" ? b({
item: t,
- mode: h,
- isEdit: p
- }) : b, [f, b, t, h, p]), V = ge(S);
- G(() => {
- V.current = S;
- }, [S]);
- const K = m(() => a || Ce({
+ mode: k,
+ isEdit: v
+ }) : m, [b, m, t, k, v]), B = ke(R);
+ H(() => {
+ B.current = R;
+ }, [R]);
+ const K = p(() => a || Ce({
item: t,
- mode: h
- }), [a, t, h]), Q = ye({
- defaultValues: S
+ mode: k
+ }), [a, t, k]), Q = ye({
+ defaultValues: R
}), {
handleSubmit: X,
- reset: B,
- register: $,
- control: z,
- setValue: D,
- watch: L,
- formState: { isSubmitting: Z, errors: O }
+ reset: E,
+ register: D,
+ control: O,
+ setValue: L,
+ watch: T,
+ formState: { isSubmitting: Z, errors: j }
} = Q;
- G(() => {
- e && B(V.current);
- }, [e, K, B]);
- const T = () => {
- B(V.current), r();
- }, q = X(async (j) => {
+ H(() => {
+ e && E(B.current);
+ }, [e, K, E]);
+ const $ = () => {
+ E(B.current), r();
+ }, q = X(async (A) => {
const W = typeof g == "function" ? g({
- values: j,
+ values: A,
item: t,
- mode: h,
- isEdit: p
- }) : j;
- await M({
+ mode: k,
+ isEdit: v
+ }) : A;
+ await S({
values: W,
item: t,
- mode: h,
- isEdit: p
+ mode: k,
+ isEdit: v
});
- }), N = m(
+ }), N = p(
() => ({
- register: $,
- control: z,
- setValue: D,
- watch: L,
- errors: O
+ register: D,
+ control: O,
+ setValue: L,
+ watch: T,
+ errors: j
}),
- [$, z, D, L, O]
+ [D, O, L, T, j]
);
- return /* @__PURE__ */ R(ie, { isOpen: e, onClose: T, isCentered: !0, size: _, children: [
- /* @__PURE__ */ l(ce, { backdropFilter: "blur(6px)" }),
- /* @__PURE__ */ R(
- ue,
+ return /* @__PURE__ */ C(oe, { isOpen: e, onClose: $, isCentered: !0, size: y, children: [
+ /* @__PURE__ */ n(ie, { backdropFilter: "blur(6px)" }),
+ /* @__PURE__ */ C(
+ ce,
{
as: "form",
onSubmit: q,
borderRadius: "2xl",
overflow: "visible",
children: [
- /* @__PURE__ */ l(
- se,
+ /* @__PURE__ */ n(
+ ue,
{
bgGradient: "linear(to-l, blue.600, facebook.500)",
color: "white",
@@ -360,17 +376,17 @@ function Ge({
children: w
}
),
- /* @__PURE__ */ l(ae, { color: "white" }),
- /* @__PURE__ */ l(de, { py: 5, children: /* @__PURE__ */ l(H.Provider, { value: N, children: /* @__PURE__ */ l(fe, { spacing: 4, alignItems: "stretch", children: /* @__PURE__ */ l(be, { columns: Y, spacing: 4, children: C }) }) }) }),
- /* @__PURE__ */ R(pe, { gap: 2, bg: "gray.50", children: [
- /* @__PURE__ */ l(A, { type: "button", variant: "ghost", onClick: T, children: "انصراف" }),
- /* @__PURE__ */ l(
- A,
+ /* @__PURE__ */ n(se, { color: "white" }),
+ /* @__PURE__ */ n(ae, { py: 5, children: /* @__PURE__ */ n(U.Provider, { value: N, children: /* @__PURE__ */ n(de, { spacing: 4, alignItems: "stretch", children: /* @__PURE__ */ n(fe, { columns: Y, spacing: 4, children: V }) }) }) }),
+ /* @__PURE__ */ C(be, { gap: 2, bg: "gray.50", children: [
+ /* @__PURE__ */ n(G, { type: "button", variant: "ghost", onClick: $, children: "انصراف" }),
+ /* @__PURE__ */ n(
+ G,
{
type: "submit",
colorScheme: "blue",
borderRadius: "xl",
- isLoading: Z || k,
+ isLoading: Z || d,
children: J
}
)
@@ -381,27 +397,27 @@ function Ge({
] });
}
function He() {
- const { isOpen: e, onOpen: r, onClose: t } = Fe(), [n, o] = Se(null), u = E(() => {
+ const { isOpen: e, onOpen: r, onClose: t } = pe(), [l, o] = Se(null), u = I(() => {
o(null), r();
- }, [r]), c = E(
- (d) => {
- o(d), r();
+ }, [r]), c = I(
+ (f) => {
+ o(f), r();
},
[r]
- ), i = E(() => {
+ ), i = I(() => {
o(null), t();
- }, [t]), s = !!n;
- return m(
+ }, [t]), s = !!l;
+ return p(
() => ({
isOpen: e,
- item: n,
+ item: l,
isEdit: s,
isCreate: !s,
openCreate: u,
openEdit: c,
close: i
}),
- [e, n, s, u, c, i]
+ [e, l, s, u, c, i]
);
}
export {
diff --git a/package.json b/package.json
index de27664..721d04c 100644
--- a/package.json
+++ b/package.json
@@ -42,12 +42,14 @@
"@tanstack/react-query": "^5.0.0",
"@tanstack/react-table": "^8.21.3",
"axios": "^1.0.0",
+ "chakra-react-select": "^5.0.0",
"framer-motion": "^10.0.0 || ^11.0.0 || ^12.0.0",
"keycloak-js": "^26.0.0",
"react": "^18.0.0 || ^19.0.0",
"react-dom": "^18.0.0 || ^19.0.0",
+ "react-hook-form": "^7.0.0",
"react-icons": "^5.0.0",
- "react-hook-form": "^7.0.0"
+ "react-select": "^5.0.0"
},
"peerDependenciesMeta": {
"@chakra-ui/react": {
@@ -68,6 +70,9 @@
"axios": {
"optional": true
},
+ "chakra-react-select": {
+ "optional": true
+ },
"framer-motion": {
"optional": true
},
@@ -80,10 +85,13 @@
"react-dom": {
"optional": true
},
+ "react-hook-form": {
+ "optional": true
+ },
"react-icons": {
"optional": true
},
- "react-hook-form": {
+ "react-select": {
"optional": true
}
},
@@ -95,13 +103,15 @@
"@tanstack/react-table": "^8.21.3",
"@vitejs/plugin-react": "4.3.4",
"axios": "^1.17.0",
+ "chakra-react-select": "5",
"framer-motion": "^12.0.0",
"keycloak-js": "^26.2.4",
"react": "^18.0.0",
"react-dom": "^18.0.0",
+ "react-hook-form": "^7.0.0",
"react-icons": "^5.0.0",
- "vite": "5.4.19",
- "react-hook-form": "^7.0.0"
+ "react-select": "5",
+ "vite": "5.4.19"
},
"dependencies": {}
}
diff --git a/src/form/FormModal.jsx b/src/form/FormModal.jsx
index 20559de..d9264fb 100644
--- a/src/form/FormModal.jsx
+++ b/src/form/FormModal.jsx
@@ -15,11 +15,11 @@ import {
ModalOverlay,
Radio,
RadioGroup,
- Select,
SimpleGrid,
Textarea,
VStack,
} from "@chakra-ui/react";
+import { Select as ChakraReactSelect } from "chakra-react-select";
import { createContext, useContext, useEffect, useMemo, useRef } from "react";
import { Controller, useForm, useWatch } from "react-hook-form";
@@ -95,18 +95,6 @@ function normalizeOptions(options = []) {
});
}
-function NativeSelectOptions({ options = [] }) {
- return options.map((option, index) => (
-
- ));
-}
-
// ----- field wrapper -----
function FieldWrapper({ name, label, showWhen, children }) {
@@ -219,26 +207,46 @@ function SelectField({
name={name}
control={control}
rules={getRules({ required, validate, rules })}
- render={({ field }) => (
-
- )}
+ field.onChange(value);
+
+ onChange?.({
+ value,
+ option,
+ setValue,
+ });
+ }}
+ {...props}
+ />
+ );
+ }}
/>
);
@@ -277,7 +285,11 @@ function RadioField({
>
{normalizedOptions.map((option) => (
-
+
{option.label}
))}
@@ -420,8 +432,6 @@ export function FormModal({
const isEdit = Boolean(item);
const mode = isEdit ? "edit" : "create";
- // ----- title -----
-
const resolvedTitle = useMemo(() => {
if (title) return title;
@@ -436,8 +446,6 @@ export function FormModal({
);
}, [title, editTitle, createTitle, entityName, isEdit]);
- // ----- submit text -----
-
const resolvedSubmitText = useMemo(() => {
if (submitText) return submitText;
@@ -448,8 +456,6 @@ export function FormModal({
return createSubmitText ?? defaultActionLabels.create.submitText;
}, [submitText, editSubmitText, createSubmitText, isEdit]);
- // ----- default values -----
-
const resolvedDefaultValues = useMemo(() => {
if (typeof getDefaultValues === "function") {
return getDefaultValues({
@@ -468,8 +474,6 @@ export function FormModal({
latestDefaultValuesRef.current = resolvedDefaultValues;
}, [resolvedDefaultValues]);
- // ----- reset key -----
-
const resolvedResetKey = useMemo(() => {
if (resetKey) return resetKey;
@@ -479,8 +483,6 @@ export function FormModal({
});
}, [resetKey, item, mode]);
- // ----- form -----
-
const methods = useForm({
defaultValues: resolvedDefaultValues,
});
@@ -495,23 +497,17 @@ export function FormModal({
formState: { isSubmitting, errors },
} = methods;
- // ----- reset on open -----
-
useEffect(() => {
if (!isOpen) return;
reset(latestDefaultValuesRef.current);
}, [isOpen, resolvedResetKey, reset]);
- // ----- close -----
-
const handleClose = () => {
reset(latestDefaultValuesRef.current);
close();
};
- // ----- submit -----
-
const handleFormSubmit = handleSubmit(async (values) => {
const finalValues =
typeof transformValues === "function"
@@ -531,8 +527,6 @@ export function FormModal({
});
});
- // ----- context -----
-
const contextValue = useMemo(
() => ({
register,
@@ -544,8 +538,6 @@ export function FormModal({
[register, control, setValue, watch, errors],
);
- // ----- jsx -----
-
return (
diff --git a/vite.config.js b/vite.config.js
index 527eddc..74a7ba9 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -21,6 +21,8 @@ const externalPackages = [
"react-icons",
"react-hook-form",
+ "react-select",
+ "chakra-react-select",
];
export default defineConfig({
@@ -46,7 +48,8 @@ export default defineConfig({
return (
externalPackages.includes(id) ||
id.startsWith("react-icons/") ||
- id.startsWith("@emotion/")
+ id.startsWith("@emotion/") ||
+ id.startsWith("react-select/")
);
},
diff --git a/yarn.lock b/yarn.lock
index 50025f9..873bb86 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -130,7 +130,7 @@
dependencies:
"@babel/helper-plugin-utils" "^7.29.7"
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7":
version "7.29.7"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.29.7.tgz#12022450c45a4da6d8d8287b18a4ff2ddb23f768"
integrity sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==
@@ -247,7 +247,7 @@
source-map "^0.5.7"
stylis "4.2.0"
-"@emotion/cache@^11.14.0":
+"@emotion/cache@^11.14.0", "@emotion/cache@^11.4.0":
version "11.14.0"
resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.14.0.tgz#ee44b26986eeb93c8be82bb92f1f7a9b21b2ed76"
integrity sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA==
@@ -263,12 +263,19 @@
resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.2.tgz#ff9221b9f58b4dfe61e619a7788734bd63f6898b"
integrity sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==
+"@emotion/is-prop-valid@^1.3.0":
+ version "1.4.0"
+ resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.4.0.tgz#e9ad47adff0b5c94c72db3669ce46de33edf28c0"
+ integrity sha512-QgD4fyscGcbbKwJmqNvUMSE02OsHUa+lAWKdEUIJKgqe5IwRSKd7+KhibEWdaKwgjLj0DRSHA9biAIqGBk05lw==
+ dependencies:
+ "@emotion/memoize" "^0.9.0"
+
"@emotion/memoize@^0.9.0":
version "0.9.0"
resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.9.0.tgz#745969d649977776b43fc7648c556aaa462b4102"
integrity sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==
-"@emotion/react@^11.14.0":
+"@emotion/react@^11.14.0", "@emotion/react@^11.8.1":
version "11.14.0"
resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.14.0.tgz#cfaae35ebc67dd9ef4ea2e9acc6cd29e157dd05d"
integrity sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==
@@ -298,6 +305,18 @@
resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.4.0.tgz#c9299c34d248bc26e82563735f78953d2efca83c"
integrity sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==
+"@emotion/styled@^11.14.0":
+ version "11.14.1"
+ resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.14.1.tgz#8c34bed2948e83e1980370305614c20955aacd1c"
+ integrity sha512-qEEJt42DuToa3gurlH4Qqc1kVpNq8wO8cJtDzU46TjlzWjDlsVyevtYCRijVq3SrHsROS+gVQ8Fnea108GnKzw==
+ dependencies:
+ "@babel/runtime" "^7.18.3"
+ "@emotion/babel-plugin" "^11.13.5"
+ "@emotion/is-prop-valid" "^1.3.0"
+ "@emotion/serialize" "^1.3.3"
+ "@emotion/use-insertion-effect-with-fallbacks" "^1.2.0"
+ "@emotion/utils" "^1.4.2"
+
"@emotion/unitless@^0.10.0":
version "0.10.0"
resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.10.0.tgz#2af2f7c7e5150f497bdabd848ce7b218a27cf745"
@@ -433,6 +452,26 @@
resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz#acad351d582d157bb145535db2a6ff53dd514b5c"
integrity sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==
+"@floating-ui/core@^1.7.5":
+ version "1.7.5"
+ resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.7.5.tgz#d4af157a03330af5a60e69da7a4692507ada0622"
+ integrity sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==
+ dependencies:
+ "@floating-ui/utils" "^0.2.11"
+
+"@floating-ui/dom@^1.0.1":
+ version "1.7.6"
+ resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.7.6.tgz#f915bba5abbb177e1f227cacee1b4d0634b187bf"
+ integrity sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==
+ dependencies:
+ "@floating-ui/core" "^1.7.5"
+ "@floating-ui/utils" "^0.2.11"
+
+"@floating-ui/utils@^0.2.11":
+ version "0.2.11"
+ resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.11.tgz#a269e055e40e2f45873bae9d1a2fdccbd314ea3f"
+ integrity sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==
+
"@jridgewell/gen-mapping@^0.3.12", "@jridgewell/gen-mapping@^0.3.5":
version "0.3.13"
resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz#6342a19f44347518c93e43b1ac69deb3c4656a1f"
@@ -676,6 +715,11 @@
resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.2.tgz#5950e50960793055845e956c427fc2b0d70c5239"
integrity sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==
+"@types/react-transition-group@^4.4.0":
+ version "4.4.12"
+ resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.12.tgz#b5d76568485b02a307238270bfe96cb51ee2a044"
+ integrity sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==
+
"@vitejs/plugin-react@4.3.4":
version "4.3.4"
resolved "https://registry.yarnpkg.com/@vitejs/plugin-react/-/plugin-react-4.3.4.tgz#c64be10b54c4640135a5b28a2432330e88ad7c20"
@@ -776,6 +820,13 @@ caniuse-lite@^1.0.30001782:
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001799.tgz#5c909138c27f1a61219d3e092071c1cc7d32dc55"
integrity sha512-hG1bReV+OUU+MOqK4t/ZWI0tZOyz3rqS9XuhOUz1cIcbwBKjOyJEJuw9ER5JuNyqxNk8u/JUVbGibBOL1yrjFw==
+chakra-react-select@5:
+ version "5.1.1"
+ resolved "https://registry.yarnpkg.com/chakra-react-select/-/chakra-react-select-5.1.1.tgz#e6d24ed5ceb87229e19b102df740b2fe8f08dddf"
+ integrity sha512-edHbC7Vnzw055f8jtAJzs7K/NXOt8q9AEqJmA/VANZzJeEPwhZ5JtjZBpXa/WORndEhiD2NSYcKrGL+73S306w==
+ dependencies:
+ react-select "^5.10.2"
+
color2k@^2.0.2:
version "2.0.3"
resolved "https://registry.yarnpkg.com/color2k/-/color2k-2.0.3.tgz#a771244f6b6285541c82aa65ff0a0c624046e533"
@@ -838,6 +889,14 @@ detect-node-es@^1.1.0:
resolved "https://registry.yarnpkg.com/detect-node-es/-/detect-node-es-1.1.0.tgz#163acdf643330caa0b4cd7c21e7ee7755d6fa493"
integrity sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==
+dom-helpers@^5.0.1:
+ version "5.2.1"
+ resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
+ integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
+ dependencies:
+ "@babel/runtime" "^7.8.7"
+ csstype "^3.0.2"
+
dunder-proto@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/dunder-proto/-/dunder-proto-1.0.1.tgz#d7ae667e1dc83482f8b70fd0f6eefc50da30f58a"
@@ -953,6 +1012,15 @@ form-data@^4.0.5:
hasown "^2.0.4"
mime-types "^2.1.35"
+framer-motion@^12.0.0:
+ version "12.40.0"
+ resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-12.40.0.tgz#68e53aecd51c8a8a62b565f059b418bef2add0e2"
+ integrity sha512-uaBd3qC1v3KQqBEjwTUd183K6PbS+j0yR9w9VmEOLWA/tnUcSn8Xa3uck7t4dgpDoUss8xQTcj8W2L07lrnLFg==
+ dependencies:
+ motion-dom "^12.40.0"
+ motion-utils "^12.39.0"
+ tslib "^2.4.0"
+
framesync@6.1.2:
version "6.1.2"
resolved "https://registry.yarnpkg.com/framesync/-/framesync-6.1.2.tgz#755eff2fb5b8f3b4d2b266dd18121b300aefea27"
@@ -1117,6 +1185,11 @@ math-intrinsics@^1.1.0:
resolved "https://registry.yarnpkg.com/math-intrinsics/-/math-intrinsics-1.1.0.tgz#a0dd74be81e2aa5c2f27e65ce283605ee4e2b7f9"
integrity sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==
+memoize-one@^6.0.0:
+ version "6.0.0"
+ resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-6.0.0.tgz#b2591b871ed82948aee4727dc6abceeeac8c1045"
+ integrity sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==
+
mime-db@1.52.0:
version "1.52.0"
resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
@@ -1129,6 +1202,18 @@ mime-types@^2.1.35:
dependencies:
mime-db "1.52.0"
+motion-dom@^12.40.0:
+ version "12.40.0"
+ resolved "https://registry.yarnpkg.com/motion-dom/-/motion-dom-12.40.0.tgz#95fb411ac72e8adbaf5f1b17b8f07783da223bee"
+ integrity sha512-HxU3ZaBwNPVQUBQf1xxgq+7JrPNZvjLVxgbpEZL7RrWJnsxOf0/OM+yrHG9ogLQ31Do/r57Oz2gQWPK+6q62mg==
+ dependencies:
+ motion-utils "^12.39.0"
+
+motion-utils@^12.39.0:
+ version "12.39.0"
+ resolved "https://registry.yarnpkg.com/motion-utils/-/motion-utils-12.39.0.tgz#e1c66f0e912999804bc5e69b4630c3bc794ef29f"
+ integrity sha512-8nadJAJjTtqRkmRF36FoJTrywK9nnFmnPwnSMyxaOCU7GDjN9RTMJIxx9De8ErM+vpPhMccr/6fo5WciyQLnMQ==
+
ms@^2.1.3:
version "2.1.3"
resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
@@ -1190,7 +1275,7 @@ postcss@^8.4.43:
picocolors "^1.1.1"
source-map-js "^1.2.1"
-prop-types@^15.6.2:
+prop-types@^15.6.0, prop-types@^15.6.2:
version "15.8.1"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -1236,6 +1321,11 @@ react-focus-lock@^2.9.6:
use-callback-ref "^1.3.3"
use-sidecar "^1.1.3"
+react-hook-form@^7.0.0:
+ version "7.80.0"
+ resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.80.0.tgz#028e142324d592239599ab7cf1c0d82167696194"
+ integrity sha512-4P+fk6oXsxY+6xSj7Euhc2sumQD8zQqCuVHoJwoyp9EchP+IUW9OESB7uHFJOKsIBQ4MQqYE84INJFqUCYNoOg==
+
react-icons@^5.0.0:
version "5.6.0"
resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-5.6.0.tgz#27bcc4acbc836e762548d76041cf9b9fef4e3837"
@@ -1270,6 +1360,21 @@ react-remove-scroll@^2.5.7:
use-callback-ref "^1.3.3"
use-sidecar "^1.1.3"
+react-select@5, react-select@^5.10.2:
+ version "5.10.2"
+ resolved "https://registry.yarnpkg.com/react-select/-/react-select-5.10.2.tgz#8dffc69dfd7d74684d9613e6eb27204e3b99e127"
+ integrity sha512-Z33nHdEFWq9tfnfVXaiM12rbJmk+QjFEztWLtmXqQhz6Al4UZZ9xc0wiatmGtUOCCnHN0WizL3tCMYRENX4rVQ==
+ dependencies:
+ "@babel/runtime" "^7.12.0"
+ "@emotion/cache" "^11.4.0"
+ "@emotion/react" "^11.8.1"
+ "@floating-ui/dom" "^1.0.1"
+ "@types/react-transition-group" "^4.4.0"
+ memoize-one "^6.0.0"
+ prop-types "^15.6.0"
+ react-transition-group "^4.3.0"
+ use-isomorphic-layout-effect "^1.2.0"
+
react-style-singleton@^2.2.2, react-style-singleton@^2.2.3:
version "2.2.3"
resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.3.tgz#4265608be69a4d70cfe3047f2c6c88b2c3ace388"
@@ -1278,6 +1383,16 @@ react-style-singleton@^2.2.2, react-style-singleton@^2.2.3:
get-nonce "^1.0.0"
tslib "^2.0.0"
+react-transition-group@^4.3.0:
+ version "4.4.5"
+ resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
+ integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==
+ dependencies:
+ "@babel/runtime" "^7.5.5"
+ dom-helpers "^5.0.1"
+ loose-envify "^1.4.0"
+ prop-types "^15.6.2"
+
react@^18.0.0:
version "18.3.1"
resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"
@@ -1376,7 +1491,7 @@ tslib@2.4.0:
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
-tslib@^2.0.0, tslib@^2.0.3, tslib@^2.1.0:
+tslib@^2.0.0, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.4.0:
version "2.8.1"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
@@ -1396,6 +1511,11 @@ use-callback-ref@^1.3.3:
dependencies:
tslib "^2.0.0"
+use-isomorphic-layout-effect@^1.2.0:
+ version "1.2.1"
+ resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.2.1.tgz#2f11a525628f56424521c748feabc2ffcc962fce"
+ integrity sha512-tpZZ+EX0gaghDAiFR37hj5MgY6ZN55kLiPkJsKxBMZ6GZdOSPJXiOzPM984oPYZ5AnehYx5WQp1+ME8I/P/pRA==
+
use-sidecar@^1.1.3:
version "1.1.3"
resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.1.3.tgz#10e7fd897d130b896e2c546c63a5e8233d00efdb"