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

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @saas-ui/forms
 
+## 2.0.0-rc.32
+
+### Patch Changes
+
+- b5912297: Fix Select button overflow.
+- Updated dependencies [70af3ead]
+  - @saas-ui/core@2.0.0-rc.29
+
 ## 2.0.0-rc.31
 
 ### Patch Changes

package/dist/index.d.ts

@@ -5,7 +5,7 @@ import { FieldValues, FieldPath, UseFieldArrayReturn, RegisterOptions, UseFormRe
 export { BatchFieldArrayUpdate, ChangeHandler, Control, Controller, ControllerFieldState, ControllerProps, ControllerRenderProps, CriteriaMode, CustomElement, DeepMap, DeepPartial, DeepPartialSkipArrayKey, DefaultValues, DelayCallback, EmptyObject, ErrorOption, EventType, FieldArray, FieldArrayMethodProps, FieldArrayWithId, Field as FieldDef, FieldElement, FieldError, FieldErrors, FieldName, FieldNamesMarkedBoolean, FieldRefs, FieldValue, FieldValues, FormProviderProps, FormState, FormStateProxy, FormStateSubjectRef, GetIsDirty, InternalFieldErrors, InternalFieldName, InternalNameSet, IsAny, IsFlatObject, KeepStateOptions, LiteralUnion, Message, Mode, MultipleFieldErrors, Names, NativeFieldValue, NestedValue, NonUndefined, Noop, Primitive, ReadFormState, Ref, RefCallBack, RegisterOptions, Resolver, ResolverError, ResolverOptions, ResolverResult, ResolverSuccess, SetFieldValue, SetValueConfig, Subjects, SubmitErrorHandler, SubmitHandler, TriggerConfig, UnpackNestedValue, UseControllerProps, UseControllerReturn, UseFieldArrayProps, UseFieldArrayReturn, UseFormClearErrors, UseFormGetValues, UseFormHandleSubmit, UseFormProps, UseFormRegister, UseFormRegisterReturn, UseFormReset, UseFormResetField, UseFormReturn, UseFormSetError, UseFormSetFocus, UseFormSetValue, UseFormStateProps, UseFormStateReturn, UseFormTrigger, UseFormUnregister, UseFormWatch, UseWatchProps, Validate, ValidateResult, ValidationMode, ValidationRule, ValidationValue, ValidationValueMessage, WatchInternal, WatchObserver, appendErrors, useController, useFieldArray, useForm, useFormState, useWatch } from 'react-hook-form';
 import { MaybeRenderProp } from '@chakra-ui/react-utils';
 import { StepsProps, StepsItemProps, UseStepperReturn, UseStepperProps } from '@saas-ui/core';
-import { NumberInputProps as NumberInputProps$1, InputProps, RadioProps, RadioGroupProps, SystemProps, StackDirection, MenuProps, ButtonProps, MenuListProps, MenuItemOptionProps, SelectProps as SelectProps$1, TextareaProps, SwitchProps, CheckboxProps, UsePinInputProps, ResponsiveValue, FormLabelProps, SimpleGridProps, FormControlProps, HTMLChakraProps, ThemingProps } from '@chakra-ui/react';
+import { NumberInputProps as NumberInputProps$1, InputProps, RadioProps, RadioGroupProps, SystemProps, StackDirection, MenuProps, ThemingProps, ButtonProps, MenuListProps, MenuItemOptionProps, SelectProps as SelectProps$1, TextareaProps, SwitchProps, CheckboxProps, UsePinInputProps, ResponsiveValue, FormLabelProps, SimpleGridProps, FormControlProps, HTMLChakraProps } from '@chakra-ui/react';
 import { FocusableElement } from '@chakra-ui/utils';
 import * as _chakra_ui_system_dist_system_types from '@chakra-ui/system/dist/system.types';
 
@@ -90,9 +90,9 @@ interface SelectOptions {
     renderValue?: (value: string | string[]) => React__default.ReactNode;
 }
 
-interface SelectProps extends Omit<MenuProps, 'children'>, SelectOptions {
+interface SelectProps extends Omit<MenuProps, 'children' | 'variant' | 'size'>, ThemingProps<'SuiSelect'>, SelectOptions {
 }
-interface SelectButtonProps extends ButtonProps {
+interface SelectButtonProps extends Omit<ButtonProps, 'size' | 'variant'> {
 }
 /**
  * Button that opens the select menu and displays the selected value.

package/dist/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var React12 = require('react');
+var React11 = require('react');
 var reactHookForm = require('react-hook-form');
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('@chakra-ui/react');
@@ -27,12 +27,12 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React12__namespace = /*#__PURE__*/_interopNamespace(React12);
+var React11__namespace = /*#__PURE__*/_interopNamespace(React11);
 
 // src/form-context.tsx
-var FormContext = React12__namespace.createContext(null);
+var FormContext = React11__namespace.createContext(null);
 var useFormContext = () => {
-  const context = React12__namespace.useContext(FormContext);
+  const context = React11__namespace.useContext(FormContext);
   const hookContext = reactHookForm.useFormContext();
   if (!context) {
     throw new Error("FormProvider must be used within a Form component");
@@ -108,7 +108,7 @@ var PasswordInput = react.forwardRef(
       leftAddon,
       ...inputProps
     } = props;
-    const [show, setShow] = React12.useState(false);
+    const [show, setShow] = React11.useState(false);
     const handleClick = () => setShow(!show);
     const label = show ? "Hide password" : "Show password";
     let icon;
@@ -147,15 +147,15 @@ var PasswordInput = react.forwardRef(
 );
 PasswordInput.displayName = "PasswordInput";
 var mapNestedFields = (name, children) => {
-  return React12__namespace.Children.map(children, (child) => {
-    if (React12__namespace.isValidElement(child) && child.props.name) {
+  return React11__namespace.Children.map(children, (child) => {
+    if (React11__namespace.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__namespace.cloneElement(child, {
+      return React11__namespace.cloneElement(child, {
         ...child.props,
         name: `${name}.${childName}`
       });
@@ -194,6 +194,7 @@ var RadioInput = react.forwardRef(
   }
 );
 RadioInput.displayName = "RadioInput";
+var [SelectStylesProvider, useSelectStyles] = react.createStylesContext("SuiSelect");
 var [SelectProvider, useSelectContext] = reactUtils.createContext({
   strict: true
 });
@@ -215,14 +216,14 @@ var useSelect = (props) => {
     onChange
   });
   const controlProps = react.useFormControl({ name });
-  const options = React12__namespace.default.useMemo(
+  const options = React11__namespace.default.useMemo(
     () => optionsProp && mapOptions(optionsProp),
     [optionsProp]
   );
   const handleChange = (value2) => {
     setCurrentValue(value2);
   };
-  const getDisplayValue = React12__namespace.default.useCallback(
+  const getDisplayValue = React11__namespace.default.useCallback(
     (value2) => {
       if (!options) {
         return value2;
@@ -236,7 +237,7 @@ var useSelect = (props) => {
     },
     [options]
   );
-  const displayValue = React12__namespace.default.useMemo(
+  const displayValue = React11__namespace.default.useMemo(
     () => currentValue ? (Array.isArray(currentValue) ? currentValue : [currentValue]).map(
       getDisplayValue
     ) : [],
@@ -258,7 +259,6 @@ var useSelect = (props) => {
 var SelectButton = react.forwardRef(
   (props, ref) => {
     var _a, _b, _c, _d, _e;
-    const styles = react.useMultiStyleConfig("SuiSelect", props);
     const {
       displayValue,
       renderValue,
@@ -266,6 +266,7 @@ var SelectButton = react.forwardRef(
       isDisabled: isSelectDisabled
     } = useSelectContext();
     const context = react.useFormControlContext();
+    const styles = useSelectStyles();
     const {
       isInvalid,
       isReadOnly,
@@ -293,15 +294,17 @@ var SelectButton = react.forwardRef(
       _expanded: focusStyles,
       _readOnly: readOnlyStyles,
       _invalid: invalid,
+      minW: 0,
       ...styles.field,
       h: "auto"
     };
+    const buttonProps = react.useMenuButton(rest, ref);
     return /* @__PURE__ */ jsxRuntime.jsx(
-      react.MenuButton,
+      react.Button,
       {
-        as: react.Button,
-        id: id || React12__namespace.useId(),
+        ...buttonProps,
         ...buttonStyles,
+        id: id || buttonProps.id,
         ...rest,
         onFocus,
         onBlur,
@@ -311,8 +314,20 @@ var SelectButton = react.forwardRef(
         "data-focus": utils.dataAttr(isFocused),
         "data-required": utils.dataAttr(isRequired),
         rightIcon,
-        ref,
-        children: renderValue(displayValue) || placeholder
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          react.chakra.span,
+          {
+            __css: {
+              display: "block",
+              pointerEvents: "none",
+              flex: "1 1 auto",
+              minW: 0,
+              overflow: "hidden",
+              textOverflow: "ellipsis"
+            },
+            children: renderValue(displayValue) || placeholder
+          }
+        )
       }
     );
   }
@@ -320,10 +335,11 @@ var SelectButton = react.forwardRef(
 SelectButton.displayName = "SelectButton";
 var Select = react.forwardRef((props, ref) => {
   const { name, children, isDisabled, multiple, ...rest } = props;
+  const styles = react.useMultiStyleConfig("SuiSelect", props);
   const menuProps = react.omitThemingProps(rest);
   const context = useSelect(props);
   const { value, controlProps } = context;
-  return /* @__PURE__ */ jsxRuntime.jsx(SelectProvider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsx(react.Menu, { ...menuProps, closeOnSelect: !multiple, children: /* @__PURE__ */ jsxRuntime.jsxs(react.chakra.div, { className: utils.cx("sui-select"), children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(SelectProvider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsx(SelectStylesProvider, { value: styles, children: /* @__PURE__ */ jsxRuntime.jsx(react.Menu, { ...menuProps, closeOnSelect: !multiple, children: /* @__PURE__ */ jsxRuntime.jsxs(react.chakra.div, { className: utils.cx("sui-select"), children: [
     children,
     /* @__PURE__ */ jsxRuntime.jsx(
       react.chakra.input,
@@ -336,7 +352,7 @@ var Select = react.forwardRef((props, ref) => {
         className: "saas-select__input"
       }
     )
-  ] }) }) });
+  ] }) }) }) });
 });
 var SelectList = (props) => {
   const { defaultValue, value, options, multiple, onChange } = useSelectContext();
@@ -573,7 +589,7 @@ var defaultFieldTypes = {
   pin: PinField,
   "native-select": NativeSelectField
 };
-var FieldsContext = React12__namespace.default.createContext(
+var FieldsContext = React11__namespace.default.createContext(
   null
 );
 var FieldsProvider = (props) => {
@@ -581,11 +597,11 @@ var FieldsProvider = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(FieldsContext.Provider, { value: fields, children: props.children });
 };
 var useField = (type) => {
-  const context = React12__namespace.default.useContext(FieldsContext);
+  const context = React11__namespace.default.useContext(FieldsContext);
   return (context == null ? void 0 : context[type]) || InputField;
 };
 var defaultInputType = "text";
-var Field = React12__namespace.forwardRef(
+var Field = React11__namespace.forwardRef(
   (props, ref) => {
     const { type = defaultInputType, name } = props;
     const overrides = useFieldProps(name);
@@ -612,8 +628,8 @@ var FormLayout = ({ children, ...props }) => {
     {
       ...gridProps,
       className: utils.cx("sui-form__layout", props.className),
-      children: React12__namespace.Children.map(children, (child) => {
-        if (React12__namespace.isValidElement(child)) {
+      children: React11__namespace.Children.map(children, (child) => {
+        if (React11__namespace.isValidElement(child)) {
           return /* @__PURE__ */ jsxRuntime.jsx(FormLayoutItem, { children: child });
         }
         return child;
@@ -652,7 +668,7 @@ var useArrayField = ({
 var useArrayFieldRow = ({ index }) => {
   const { clearErrors } = useFormContext();
   const { name, remove, fields } = useArrayFieldContext();
-  React12__namespace.useEffect(() => {
+  React11__namespace.useEffect(() => {
     clearErrors(name);
   }, []);
   return {
@@ -660,7 +676,7 @@ var useArrayFieldRow = ({ index }) => {
     isFirst: index === 0,
     isLast: index === fields.length - 1,
     name: `${name}.${index}`,
-    remove: React12__namespace.useCallback(() => {
+    remove: React11__namespace.useCallback(() => {
       clearErrors(name);
       remove(index);
     }, [index])
@@ -755,7 +771,7 @@ var ArrayFieldRows = ({
   return children(fields);
 };
 ArrayFieldRows.displayName = "ArrayFieldRows";
-var ArrayFieldContainer = React12__namespace.forwardRef(
+var ArrayFieldContainer = React11__namespace.forwardRef(
   ({
     name,
     defaultValue,
@@ -773,7 +789,7 @@ var ArrayFieldContainer = React12__namespace.forwardRef(
       min: min || (overrides == null ? void 0 : overrides.min),
       max: max || (overrides == null ? void 0 : overrides.max)
     });
-    React12__namespace.useImperativeHandle(ref, () => context, [ref, context]);
+    React11__namespace.useImperativeHandle(ref, () => context, [ref, context]);
     return /* @__PURE__ */ jsxRuntime.jsx(ArrayFieldProvider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsx(BaseField, { name, ...fieldProps, ...overrides, children }) });
   }
 );
@@ -831,10 +847,10 @@ var AutoFields = ({
   const context = useFormContext();
   const schema = schemaProp || context.schema;
   const fieldResolver = fieldResolverProp || context.fieldResolver;
-  const resolver = React12__namespace.useMemo(() => fieldResolver, [schema, fieldResolver]);
-  const fields = React12__namespace.useMemo(() => resolver == null ? void 0 : resolver.getFields(), [resolver]);
+  const resolver = React11__namespace.useMemo(() => fieldResolver, [schema, fieldResolver]);
+  const fields = React11__namespace.useMemo(() => resolver == null ? void 0 : resolver.getFields(), [resolver]);
   const form = useFormContext();
-  React12__namespace.useEffect(() => {
+  React11__namespace.useEffect(() => {
     var _a;
     if (focusFirstField && ((_a = fields == null ? void 0 : fields[0]) == null ? void 0 : _a.name)) {
       form.setFocus(fields[0].name);
@@ -916,10 +932,10 @@ var [StepFormProvider, useStepFormContext] = reactUtils.createContext({
 function useStepForm(props) {
   const { onChange, steps: stepsOptions, resolver, ...rest } = props;
   const stepper = core.useStepper(rest);
-  const [options, setOptions] = React12__namespace.useState(stepsOptions);
+  const [options, setOptions] = React11__namespace.useState(stepsOptions);
   const { activeStep, isLastStep, nextStep } = stepper;
-  const [steps, updateSteps] = React12__namespace.useState({});
-  const onSubmitStep = React12__namespace.useCallback(
+  const [steps, updateSteps] = React11__namespace.useState({});
+  const onSubmitStep = React11__namespace.useCallback(
     async (data) => {
       var _a, _b;
       try {
@@ -940,7 +956,7 @@ function useStepForm(props) {
     },
     [steps, activeStep, isLastStep]
   );
-  const getFormProps = React12__namespace.useCallback(() => {
+  const getFormProps = React11__namespace.useCallback(() => {
     const step = steps[activeStep];
     return {
       onSubmit: onSubmitStep,
@@ -951,7 +967,7 @@ function useStepForm(props) {
       ) : void 0
     };
   }, [steps, onSubmitStep, activeStep]);
-  const updateStep = React12__namespace.useCallback(
+  const updateStep = React11__namespace.useCallback(
     (step) => {
       const stepOptions = options == null ? void 0 : options.find((s) => s.name === step.name);
       updateSteps((steps2) => {
@@ -977,7 +993,7 @@ function useFormStep(props) {
   const { name, schema, resolver, onSubmit } = props;
   const step = core.useStep({ name });
   const { steps, updateStep } = useStepFormContext();
-  React12__namespace.useEffect(() => {
+  React11__namespace.useEffect(() => {
     updateStep({ name, schema, resolver, onSubmit });
   }, [name, schema]);
   return {
@@ -997,8 +1013,8 @@ var FormStepper = (props) => {
     render,
     ...rest
   } = props;
-  const elements = React12__namespace.Children.map(children, (child) => {
-    if (React12__namespace.isValidElement(child) && (child == null ? void 0 : child.type) === FormStep) {
+  const elements = React11__namespace.Children.map(children, (child) => {
+    if (React11__namespace.isValidElement(child) && (child == null ? void 0 : child.type) === FormStep) {
       const { isCompleted } = useFormStep(child.props);
       return /* @__PURE__ */ jsxRuntime.jsx(
         core.StepsItem,
@@ -1014,7 +1030,7 @@ var FormStepper = (props) => {
     }
     return child;
   });
-  const onChange = React12__namespace.useCallback((i) => {
+  const onChange = React11__namespace.useCallback((i) => {
     setIndex(i);
     onChangeProp == null ? void 0 : onChangeProp(i);
   }, []);
@@ -1144,8 +1160,8 @@ var Form = react.forwardRef(
     };
     const methods = reactHookForm.useForm(form);
     const { handleSubmit } = methods;
-    React12__namespace.useImperativeHandle(formRef, () => methods, [formRef, methods]);
-    React12__namespace.useEffect(() => {
+    React11__namespace.useImperativeHandle(formRef, () => methods, [formRef, methods]);
+    React11__namespace.useEffect(() => {
       let subscription;
       if (onChange) {
         subscription = methods.watch(onChange);
@@ -1219,7 +1235,7 @@ function createStepForm({ fields, resolver, fieldResolver } = {}) {
       ...props
     });
     const { getFormProps, ...ctx } = stepper;
-    const context = React12.useMemo(() => ctx, [ctx]);
+    const context = React11.useMemo(() => ctx, [ctx]);
     return /* @__PURE__ */ jsxRuntime.jsx(core.StepperProvider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsx(StepFormProvider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsx(FieldsProvider, { value: fields || {}, children: /* @__PURE__ */ jsxRuntime.jsx(Form2, { ref, ...rest, ...getFormProps(), children: utils.runIfFn(children, {
       ...stepper,
       Field,