@saas-ui/forms 2.0.0-rc.31 → 2.0.0

package/dist/index.mjs

@@ -1,18 +1,18 @@
-import * as React12 from 'react';
-import React12__default, { useState, useMemo } from 'react';
+import * as React11 from 'react';
+import React11__default, { useState, useMemo } from 'react';
 import { useFormContext as useFormContext$1, useForm, FormProvider as FormProvider$1, useFieldArray, useWatch, get, Controller } from 'react-hook-form';
 export { Controller, appendErrors, useController, useFieldArray, useForm, useFormState, useWatch } from 'react-hook-form';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { forwardRef, NumberInput as NumberInput$1, NumberInputField, NumberInputStepper, NumberIncrementStepper, NumberDecrementStepper, InputRightElement, Button, InputGroup, Input, RadioGroup, Stack, Radio, useMultiStyleConfig, useFormControlContext, MenuButton, omitThemingProps, Menu, chakra, MenuItemOption, Select as Select$1, Switch, Checkbox, HStack, PinInput, FormControl, FormLabel, Text, useControllableState, useFormControl, MenuList, MenuOptionGroup, Box, FormHelperText, FormErrorMessage, PinInputField, useTheme, SimpleGrid, useStyleConfig, useMergeRefs, Textarea } from '@chakra-ui/react';
+import { forwardRef, NumberInput as NumberInput$1, NumberInputField, NumberInputStepper, NumberIncrementStepper, NumberDecrementStepper, InputRightElement, Button, InputGroup, Input, RadioGroup, Stack, Radio, createStylesContext, useFormControlContext, useMenuButton, chakra, useMultiStyleConfig, omitThemingProps, Menu, MenuItemOption, Select as Select$1, Switch, Checkbox, HStack, PinInput, FormControl, FormLabel, Text, useControllableState, useFormControl, MenuList, MenuOptionGroup, Box, FormHelperText, FormErrorMessage, PinInputField, useTheme, SimpleGrid, useStyleConfig, useMergeRefs, Textarea } from '@chakra-ui/react';
 import { ChevronUpIcon, ChevronDownIcon, useStepper, useStep, useStepperContext, StepsItem, Steps, StepperProvider } from '@saas-ui/core';
 import { ViewIcon, ViewOffIcon, MinusIcon, PlusIcon } from '@saas-ui/core/icons';
 import { dataAttr, cx, isFunction, runIfFn, callAllHandlers, get as get$1 } from '@chakra-ui/utils';
 import { createContext } from '@chakra-ui/react-utils';
 
 // src/form-context.tsx
-var FormContext = React12.createContext(null);
+var FormContext = React11.createContext(null);
 var useFormContext = () => {
-  const context = React12.useContext(FormContext);
+  const context = React11.useContext(FormContext);
   const hookContext = useFormContext$1();
   if (!context) {
     throw new Error("FormProvider must be used within a Form component");
@@ -127,15 +127,15 @@ var PasswordInput = forwardRef(
 );
 PasswordInput.displayName = "PasswordInput";
 var mapNestedFields = (name, children) => {
-  return React12.Children.map(children, (child) => {
-    if (React12.isValidElement(child) && child.props.name) {
+  return React11.Children.map(children, (child) => {
+    if (React11.isValidElement(child) && child.props.name) {
       let childName = child.props.name;
       if (childName.includes(".")) {
         childName = childName.replace(/^.*\.(.*)/, "$1");
       } else if (childName.includes(".$")) {
         childName = childName.replace(/^.*\.\$(.*)/, "$1");
       }
-      return React12.cloneElement(child, {
+      return React11.cloneElement(child, {
         ...child.props,
         name: `${name}.${childName}`
       });
@@ -174,6 +174,7 @@ var RadioInput = forwardRef(
   }
 );
 RadioInput.displayName = "RadioInput";
+var [SelectStylesProvider, useSelectStyles] = createStylesContext("SuiSelect");
 var [SelectProvider, useSelectContext] = createContext({
   strict: true
 });
@@ -195,14 +196,14 @@ var useSelect = (props) => {
     onChange
   });
   const controlProps = useFormControl({ name });
-  const options = React12__default.useMemo(
+  const options = React11__default.useMemo(
     () => optionsProp && mapOptions(optionsProp),
     [optionsProp]
   );
   const handleChange = (value2) => {
     setCurrentValue(value2);
   };
-  const getDisplayValue = React12__default.useCallback(
+  const getDisplayValue = React11__default.useCallback(
     (value2) => {
       if (!options) {
         return value2;
@@ -216,7 +217,7 @@ var useSelect = (props) => {
     },
     [options]
   );
-  const displayValue = React12__default.useMemo(
+  const displayValue = React11__default.useMemo(
     () => currentValue ? (Array.isArray(currentValue) ? currentValue : [currentValue]).map(
       getDisplayValue
     ) : [],
@@ -238,7 +239,6 @@ var useSelect = (props) => {
 var SelectButton = forwardRef(
   (props, ref) => {
     var _a, _b, _c, _d, _e;
-    const styles = useMultiStyleConfig("SuiSelect", props);
     const {
       displayValue,
       renderValue,
@@ -246,6 +246,7 @@ var SelectButton = forwardRef(
       isDisabled: isSelectDisabled
     } = useSelectContext();
     const context = useFormControlContext();
+    const styles = useSelectStyles();
     const {
       isInvalid,
       isReadOnly,
@@ -273,15 +274,17 @@ var SelectButton = forwardRef(
       _expanded: focusStyles,
       _readOnly: readOnlyStyles,
       _invalid: invalid,
+      minW: 0,
       ...styles.field,
       h: "auto"
     };
+    const buttonProps = useMenuButton(rest, ref);
     return /* @__PURE__ */ jsx(
-      MenuButton,
+      Button,
       {
-        as: Button,
-        id: id || React12.useId(),
+        ...buttonProps,
         ...buttonStyles,
+        id: id || buttonProps.id,
         ...rest,
         onFocus,
         onBlur,
@@ -291,8 +294,20 @@ var SelectButton = forwardRef(
         "data-focus": dataAttr(isFocused),
         "data-required": dataAttr(isRequired),
         rightIcon,
-        ref,
-        children: renderValue(displayValue) || placeholder
+        children: /* @__PURE__ */ jsx(
+          chakra.span,
+          {
+            __css: {
+              display: "block",
+              pointerEvents: "none",
+              flex: "1 1 auto",
+              minW: 0,
+              overflow: "hidden",
+              textOverflow: "ellipsis"
+            },
+            children: renderValue(displayValue) || placeholder
+          }
+        )
       }
     );
   }
@@ -300,10 +315,11 @@ var SelectButton = forwardRef(
 SelectButton.displayName = "SelectButton";
 var Select = forwardRef((props, ref) => {
   const { name, children, isDisabled, multiple, ...rest } = props;
+  const styles = useMultiStyleConfig("SuiSelect", props);
   const menuProps = omitThemingProps(rest);
   const context = useSelect(props);
   const { value, controlProps } = context;
-  return /* @__PURE__ */ jsx(SelectProvider, { value: context, children: /* @__PURE__ */ jsx(Menu, { ...menuProps, closeOnSelect: !multiple, children: /* @__PURE__ */ jsxs(chakra.div, { className: cx("sui-select"), children: [
+  return /* @__PURE__ */ jsx(SelectProvider, { value: context, children: /* @__PURE__ */ jsx(SelectStylesProvider, { value: styles, children: /* @__PURE__ */ jsx(Menu, { ...menuProps, closeOnSelect: !multiple, children: /* @__PURE__ */ jsxs(chakra.div, { className: cx("sui-select"), children: [
     children,
     /* @__PURE__ */ jsx(
       chakra.input,
@@ -316,7 +332,7 @@ var Select = forwardRef((props, ref) => {
         className: "saas-select__input"
       }
     )
-  ] }) }) });
+  ] }) }) }) });
 });
 var SelectList = (props) => {
   const { defaultValue, value, options, multiple, onChange } = useSelectContext();
@@ -553,7 +569,7 @@ var defaultFieldTypes = {
   pin: PinField,
   "native-select": NativeSelectField
 };
-var FieldsContext = React12__default.createContext(
+var FieldsContext = React11__default.createContext(
   null
 );
 var FieldsProvider = (props) => {
@@ -561,11 +577,11 @@ var FieldsProvider = (props) => {
   return /* @__PURE__ */ jsx(FieldsContext.Provider, { value: fields, children: props.children });
 };
 var useField = (type) => {
-  const context = React12__default.useContext(FieldsContext);
+  const context = React11__default.useContext(FieldsContext);
   return (context == null ? void 0 : context[type]) || InputField;
 };
 var defaultInputType = "text";
-var Field = React12.forwardRef(
+var Field = React11.forwardRef(
   (props, ref) => {
     const { type = defaultInputType, name } = props;
     const overrides = useFieldProps(name);
@@ -592,8 +608,8 @@ var FormLayout = ({ children, ...props }) => {
     {
       ...gridProps,
       className: cx("sui-form__layout", props.className),
-      children: React12.Children.map(children, (child) => {
-        if (React12.isValidElement(child)) {
+      children: React11.Children.map(children, (child) => {
+        if (React11.isValidElement(child)) {
           return /* @__PURE__ */ jsx(FormLayoutItem, { children: child });
         }
         return child;
@@ -632,7 +648,7 @@ var useArrayField = ({
 var useArrayFieldRow = ({ index }) => {
   const { clearErrors } = useFormContext();
   const { name, remove, fields } = useArrayFieldContext();
-  React12.useEffect(() => {
+  React11.useEffect(() => {
     clearErrors(name);
   }, []);
   return {
@@ -640,7 +656,7 @@ var useArrayFieldRow = ({ index }) => {
     isFirst: index === 0,
     isLast: index === fields.length - 1,
     name: `${name}.${index}`,
-    remove: React12.useCallback(() => {
+    remove: React11.useCallback(() => {
       clearErrors(name);
       remove(index);
     }, [index])
@@ -735,7 +751,7 @@ var ArrayFieldRows = ({
   return children(fields);
 };
 ArrayFieldRows.displayName = "ArrayFieldRows";
-var ArrayFieldContainer = React12.forwardRef(
+var ArrayFieldContainer = React11.forwardRef(
   ({
     name,
     defaultValue,
@@ -753,7 +769,7 @@ var ArrayFieldContainer = React12.forwardRef(
       min: min || (overrides == null ? void 0 : overrides.min),
       max: max || (overrides == null ? void 0 : overrides.max)
     });
-    React12.useImperativeHandle(ref, () => context, [ref, context]);
+    React11.useImperativeHandle(ref, () => context, [ref, context]);
     return /* @__PURE__ */ jsx(ArrayFieldProvider, { value: context, children: /* @__PURE__ */ jsx(BaseField, { name, ...fieldProps, ...overrides, children }) });
   }
 );
@@ -811,10 +827,10 @@ var AutoFields = ({
   const context = useFormContext();
   const schema = schemaProp || context.schema;
   const fieldResolver = fieldResolverProp || context.fieldResolver;
-  const resolver = React12.useMemo(() => fieldResolver, [schema, fieldResolver]);
-  const fields = React12.useMemo(() => resolver == null ? void 0 : resolver.getFields(), [resolver]);
+  const resolver = React11.useMemo(() => fieldResolver, [schema, fieldResolver]);
+  const fields = React11.useMemo(() => resolver == null ? void 0 : resolver.getFields(), [resolver]);
   const form = useFormContext();
-  React12.useEffect(() => {
+  React11.useEffect(() => {
     var _a;
     if (focusFirstField && ((_a = fields == null ? void 0 : fields[0]) == null ? void 0 : _a.name)) {
       form.setFocus(fields[0].name);
@@ -896,10 +912,10 @@ var [StepFormProvider, useStepFormContext] = createContext({
 function useStepForm(props) {
   const { onChange, steps: stepsOptions, resolver, ...rest } = props;
   const stepper = useStepper(rest);
-  const [options, setOptions] = React12.useState(stepsOptions);
+  const [options, setOptions] = React11.useState(stepsOptions);
   const { activeStep, isLastStep, nextStep } = stepper;
-  const [steps, updateSteps] = React12.useState({});
-  const onSubmitStep = React12.useCallback(
+  const [steps, updateSteps] = React11.useState({});
+  const onSubmitStep = React11.useCallback(
     async (data) => {
       var _a, _b;
       try {
@@ -920,7 +936,7 @@ function useStepForm(props) {
     },
     [steps, activeStep, isLastStep]
   );
-  const getFormProps = React12.useCallback(() => {
+  const getFormProps = React11.useCallback(() => {
     const step = steps[activeStep];
     return {
       onSubmit: onSubmitStep,
@@ -931,7 +947,7 @@ function useStepForm(props) {
       ) : void 0
     };
   }, [steps, onSubmitStep, activeStep]);
-  const updateStep = React12.useCallback(
+  const updateStep = React11.useCallback(
     (step) => {
       const stepOptions = options == null ? void 0 : options.find((s) => s.name === step.name);
       updateSteps((steps2) => {
@@ -957,7 +973,7 @@ function useFormStep(props) {
   const { name, schema, resolver, onSubmit } = props;
   const step = useStep({ name });
   const { steps, updateStep } = useStepFormContext();
-  React12.useEffect(() => {
+  React11.useEffect(() => {
     updateStep({ name, schema, resolver, onSubmit });
   }, [name, schema]);
   return {
@@ -977,8 +993,8 @@ var FormStepper = (props) => {
     render,
     ...rest
   } = props;
-  const elements = React12.Children.map(children, (child) => {
-    if (React12.isValidElement(child) && (child == null ? void 0 : child.type) === FormStep) {
+  const elements = React11.Children.map(children, (child) => {
+    if (React11.isValidElement(child) && (child == null ? void 0 : child.type) === FormStep) {
       const { isCompleted } = useFormStep(child.props);
       return /* @__PURE__ */ jsx(
         StepsItem,
@@ -994,7 +1010,7 @@ var FormStepper = (props) => {
     }
     return child;
   });
-  const onChange = React12.useCallback((i) => {
+  const onChange = React11.useCallback((i) => {
     setIndex(i);
     onChangeProp == null ? void 0 : onChangeProp(i);
   }, []);
@@ -1124,8 +1140,8 @@ var Form = forwardRef(
     };
     const methods = useForm(form);
     const { handleSubmit } = methods;
-    React12.useImperativeHandle(formRef, () => methods, [formRef, methods]);
-    React12.useEffect(() => {
+    React11.useImperativeHandle(formRef, () => methods, [formRef, methods]);
+    React11.useEffect(() => {
       let subscription;
       if (onChange) {
         subscription = methods.watch(onChange);