@websolutespa/bom-mixer-ui 1.8.15 → 1.9.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @websolutespa/bom-mixer-ui
 
+## 1.9.1
+
+### Patch Changes
+
+- Modified: FieldCombobox, Combobox, FormTester, Form
+- Updated dependencies
+  - @websolutespa/bom-mixer-forms@1.9.1
+
+## 1.9.0
+
+### Minor Changes
+
+- Added: Fieldset, Submit
+- Modified: FieldCombobox, FormTester, Form
+
+### Patch Changes
+
+- Updated dependencies
+  - @websolutespa/bom-mixer-forms@1.9.0
+
 ## 1.8.15
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -7559,6 +7559,12 @@ const Skeleton = _a => {
   }));
 };
 
+function Submit(props) {
+  return jsxRuntime.jsx(Button, Object.assign({}, props, {
+    type: "submit"
+  }));
+}
+
 const SvgAnimationStrategy = {
   Default: 'default',
   // autoplay
@@ -9363,28 +9369,45 @@ function Combobox$1(_a) {
   const value = outerToInnerSingleValue(outerValue);
   const defaultValue = outerToInnerSingleValue(outerDefaultValue) || '';
   const [innerValue, setInnerValue] = React.useState(value || defaultValue);
-  const selectedValue = outerToInnerValue(outerSelectedValue);
+  outerToInnerValue(outerSelectedValue);
   const defaultSelectedValue = outerToInnerValue(outerDefaultSelectedValue) || (multiple ? [] : '');
   const [innerSelectedValue, setInnerSelectedValue] = React.useState();
   // console.log('value', value, 'defaultValue', defaultValue);
   React.useEffect(() => {
+    const value = outerToInnerSingleValue(outerValue);
     if (innerValue !== value) {
       setInnerValue(value);
     }
-  }, [innerValue, value]);
+  }, [innerValue, outerValue]);
   React.useEffect(() => {
+    const selectedValue = outerToInnerValue(outerSelectedValue);
     if (innerSelectedValue !== selectedValue) {
+      // const value = Array.isArray(selectedValue) ? selectedValue[0] : selectedValue;
+      // setInnerValue(value);
       setInnerSelectedValue(selectedValue);
+      if (selectedValue) {
+        setInnerValue(Array.isArray(selectedValue) ? selectedValue[0] : selectedValue);
+      } else {
+        setInnerValue('');
+      }
+      // console.log('Combobox', innerSelectedValue, selectedValue);
     }
-  }, [innerSelectedValue, selectedValue]);
+  }, [innerSelectedValue, outerSelectedValue]);
   const onBlur_ = event => {
+    /*
+    if (selectedValue) {
+      setInnerValue(Array.isArray(selectedValue) ? selectedValue[0] : selectedValue);
+    }
+    */
     onBlur && onBlur(event);
   };
   const onFocus_ = event => {
     // console.log('onFocus_', selectedValue);
+    /*
     if (selectedValue) {
       setInnerValue('');
     }
+    */
     onFocus && onFocus(event);
   };
   const onSetValue = value => {
@@ -9402,11 +9425,11 @@ function Combobox$1(_a) {
   const globalVariants = useVariants('combobox', comboboxVariants);
   variants = variants || globalVariants;
   return jsxRuntime.jsx(Ariakit__namespace.ComboboxProvider, Object.assign({
-    value: innerValue,
     defaultValue: defaultValue,
+    value: innerValue,
     setValue: onSetValue,
-    selectedValue: innerSelectedValue,
     defaultSelectedValue: defaultSelectedValue,
+    selectedValue: innerSelectedValue,
     setSelectedValue: onSetSelectedValue
   }, props, {
     children: jsxRuntime.jsx(ComboboxContext.Provider, {
@@ -9518,6 +9541,13 @@ const ComboboxCombobox = /*#__PURE__*/React.forwardRef(function ComboboxCombobox
   if (!store) {
     return;
   }
+  const onPointerDown = () => {
+    // store.setValue('');
+  };
+  const onBlur = () => {
+    // store.setValue(Array.isArray(selectedValue) ? selectedValue[0] : selectedValue);
+  };
+  // console.log('selectedValue', selectedValue);
   const classNames = bomCore.getClassNames('combobox__combobox', {
     empty: isEmptyValue(selectedValue)
   }, className);
@@ -9528,6 +9558,8 @@ const ComboboxCombobox = /*#__PURE__*/React.forwardRef(function ComboboxCombobox
       variants: variants || context.variants,
       children: jsxRuntime.jsxs("div", {
         className: "combobox__input-group",
+        onPointerDown: onPointerDown,
+        onBlur: onBlur,
         children: [before, jsxRuntime.jsx(ComboboxInputStyle, Object.assign({
           ref: ref,
           className: bomCore.getClassNames('combobox__input'),
@@ -10365,6 +10397,51 @@ const Field = /*#__PURE__*/React.forwardRef((_a, ref) => {
 });
 Field.displayName = 'Field';
 
+// ${props => getVariantKey('fieldset', props.variant, props.variants)}
+const StyledFieldset = styled__default.default.fieldset`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+
+  & > * {
+    flex: 1 1 340px;
+  }
+
+  // reset
+  border: 0;
+  padding: 0.001em 0 0 0;
+  margin: 0;
+  min-width: 0;
+
+  legend {
+    padding: 0;
+    display: table;
+  }
+
+  ${props => getCssResponsive(props)}
+`;
+const Fieldset = /*#__PURE__*/React.forwardRef(function Fieldset(_a, ref) {
+  var {
+      as = 'fieldset',
+      className,
+      before,
+      children,
+      after
+    } = _a,
+    // variant = 'default',
+    // variants,
+    props = __rest(_a, ["as", "className", "before", "children", "after"]);
+  // const globalVariants = useVariants('fieldset', fieldsetVariants);
+  // variants = variants || globalVariants;
+  // const classNames = getClassNames('fieldset', className, variant);
+  const classNames = bomCore.getClassNames('fieldset', className);
+  return jsxRuntime.jsxs(StyledFieldset, Object.assign({
+    className: classNames
+  }, props, {
+    children: [before, children, after]
+  }));
+});
+
 const CssFormErrorDefault = styled.css`
   font-size: var(--form-error-font-size, 0.9rem);
   font-weight: var(--form-error-font-weight, 500);
@@ -10446,33 +10523,42 @@ const StyledFormTester = styled__default.default.div`
   ${props => getVariant(props.variant, props.variants)}
   ${props => getCssResponsive(props)}
 `;
-const FormTester = /*#__PURE__*/React.forwardRef((_a, ref) => {
+const FormTester = /*#__PURE__*/React.forwardRef(function FormTester(_a, ref) {
   var {
       className,
       form,
-      onReset,
-      onTest,
+      test,
       variant = 'default',
       variants
     } = _a,
-    props = __rest(_a, ["className", "form", "onReset", "onTest", "variant", "variants"]);
+    props = __rest(_a, ["className", "form", "test", "variant", "variants"]);
   const label = bomMixerHooks.useLabel();
   const globalVariants = useVariants('formTester', formTesterVariants);
   variants = variants || globalVariants;
+  const [json, setJson] = React.useState(form ? JSON.stringify(form.value, null, 2) : null);
+  React.useEffect(() => {
+    const onChange = value => {
+      // console.log('FormTesterComponent.onChange', value);
+      setJson(JSON.stringify(value, null, 2));
+    };
+    form.on('change', onChange);
+    return () => form.off('change', onChange);
+  }, [form]);
+  const onReset = () => {
+    form.reset();
+    props.onReset && props.onReset();
+  };
+  const onTest = () => {
+    form.patch(test);
+    props.onTest && props.onTest();
+  };
+  const classNames = bomCore.getClassNames('input', className, variant);
   const {
     enabled
   } = useFormTester();
   if (!enabled) {
     return null;
   }
-  const onReset_ = event => {
-    onReset && onReset(event);
-  };
-  const onTest_ = event => {
-    onTest && onTest(event);
-  };
-  const json = form ? JSON.stringify(form.value, null, 2) : null;
-  const classNames = bomCore.getClassNames('input', className, variant);
   return jsxRuntime.jsx(StyledFormTester, Object.assign({
     ref: ref,
     className: classNames,
@@ -10489,25 +10575,25 @@ const FormTester = /*#__PURE__*/React.forwardRef((_a, ref) => {
         }), jsxRuntime.jsx(Text, {
           variant: "paragraph30",
           lineHeight: "1.3",
-          children: "this component is visible only during development."
+          children: "this component is only visible during development."
         })]
       }), json && jsxRuntime.jsx("code", {
         children: json
-      }), (onReset || onTest) && jsxRuntime.jsxs(Flex.Row, {
+      }), jsxRuntime.jsxs(Flex.Row, {
         className: "actions",
         justifyContent: "space-between",
         children: [jsxRuntime.jsx(Flex, {
-          children: onReset && jsxRuntime.jsx(Button, {
+          children: jsxRuntime.jsx(Button, {
             variant: "outline",
             size: "sm",
-            onClick: onReset_,
+            onClick: () => onReset(),
             children: label('form.reset')
           })
         }), jsxRuntime.jsx(Flex, {
-          children: onTest && jsxRuntime.jsx(Button, {
+          children: jsxRuntime.jsx(Button, {
             variant: "primary",
             size: "sm",
-            onClick: onTest_,
+            onClick: () => onTest(),
             children: label('form.test')
           })
         })]
@@ -10515,7 +10601,6 @@ const FormTester = /*#__PURE__*/React.forwardRef((_a, ref) => {
     })
   }));
 });
-FormTester.displayName = 'FormTester';
 
 const StyledForm = styled__default.default.div`
   ${props => getForm(props)}
@@ -10524,13 +10609,33 @@ const StyledForm = styled__default.default.div`
 const Form = /*#__PURE__*/React.forwardRef((_a, ref) => {
   var {
       className,
-      state,
+      form,
       variant
     } = _a,
-    props = __rest(_a, ["className", "state", "variant"]);
-  const classNames = bomCore.getClassNames('form', className, state === null || state === void 0 ? void 0 : state.flags, variant);
+    props = __rest(_a, ["className", "form", "variant"]);
+  const innerRef = React.useRef(null);
+  React.useImperativeHandle(ref, () => innerRef.current);
+  React.useEffect(() => {
+    if (form) {
+      const onChange = value => {
+        // console.log('FormComponent.onChange', form.state);
+        if (innerRef.current !== null) {
+          const formElement = innerRef.current;
+          Object.entries(bomMixerForms.mapState_(form.state)).forEach(_ref => {
+            let [k, v] = _ref;
+            formElement.classList.toggle(k, v);
+          });
+        }
+      };
+      form.on('change', onChange);
+      return () => form.off('change', onChange);
+    }
+    return;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [form]);
+  const classNames = bomCore.getClassNames('form', className, variant);
   return jsxRuntime.jsx(StyledForm, Object.assign({
-    ref: ref,
+    ref: innerRef,
     className: classNames,
     as: "form",
     variant: variant
@@ -12579,6 +12684,7 @@ function FieldCombobox(_ref) {
   const onChange = option => {
     setValue(option);
   };
+  // console.log('FieldCombobox', control.value);
   return state.flags.hidden ? jsxRuntime.jsx("input", {
     type: "hidden",
     value: bomMixerForms.valueToString(state.value)
@@ -12595,6 +12701,7 @@ function FieldCombobox(_ref) {
         children: label(control.label)
       }), jsxRuntime.jsx(Combobox.Combobox, {
         after: icon || jsxRuntime.jsx(bomMixerIcons.IconChevronDown, {}),
+        autoSelect: true,
         placeholder: control.placeholder && label(control.placeholder)
       }), jsxRuntime.jsx(Combobox.Popover, {
         gutter: 4,
@@ -12612,10 +12719,10 @@ function FieldCombobox(_ref) {
             children: label('noResults')
           });
         }
-      }), jsxRuntime.jsx(FieldError, {
-        state: state
       })]
-    }), ((_a = control.customData) === null || _a === void 0 ? void 0 : _a.after) && control.customData.after]
+    }), ((_a = control.customData) === null || _a === void 0 ? void 0 : _a.after) && control.customData.after, jsxRuntime.jsx(FieldError, {
+      state: state
+    })]
   });
 }
 
@@ -13768,6 +13875,7 @@ exports.FieldRadio = FieldRadio;
 exports.FieldSelect = FieldSelect;
 exports.FieldText = FieldText;
 exports.FieldTextArea = FieldTextArea;
+exports.Fieldset = Fieldset;
 exports.Flex = Flex;
 exports.FlexRow = FlexRow;
 exports.Footer = Footer;
@@ -13857,6 +13965,7 @@ exports.SelectSelectCss = SelectSelectCss;
 exports.SelectValueCss = SelectValueCss;
 exports.Skeleton = Skeleton;
 exports.StyledContainer = StyledContainer;
+exports.Submit = Submit;
 exports.Svg = Svg;
 exports.SvgAnimation = SvgAnimation;
 exports.SwiperComponent = SwiperComponent;