@websolutespa/bom-mixer-ui 1.9.4 → 1.9.6

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @websolutespa/bom-mixer-ui
 
+## 1.9.6
+
+### Patch Changes
+
+- Fixing: Select, FieldSelect
+
+## 1.9.5
+
+### Patch Changes
+
+- Fixing: Select, FieldSelect
+
 ## 1.9.4
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -8231,6 +8231,30 @@ function isEmptyValue(value) {
   }
   return Boolean(value) === false;
 }
+function outerToInnerSelectValue(value) {
+  if (Array.isArray(value)) {
+    return value.map(x => outerToInnerSelectValue(x));
+  }
+  if (bomCore.isObject(value)) {
+    return String(value.id);
+  }
+  if (value == null) {
+    return undefined;
+  }
+  return value;
+}
+function innerToOuterSelectValue(value, options) {
+  if (Array.isArray(value)) {
+    return value.map(x => innerToOuterSelectValue(x, options));
+  }
+  if (value == null) {
+    return null;
+  }
+  if (Array.isArray(options)) {
+    return options.find(x => String(x.id) === value) || null;
+  }
+  return value;
+}
 function outerToInnerValue(value) {
   if (Array.isArray(value)) {
     return value.map(x => outerToInnerValue(x));
@@ -11809,8 +11833,8 @@ const selectVariants = {
 function Select$1(_a) {
   var {
       name,
+      label,
       value: outerValue,
-      label: outerLabel,
       defaultValue: outerDefaultValue,
       options,
       multiple,
@@ -11822,42 +11846,44 @@ function Select$1(_a) {
       onChange,
       children
     } = _a,
-    props = __rest(_a, ["name", "value", "label", "defaultValue", "options", "multiple", "placeholder", "variant", "variants", "onBlur", "onFocus", "onChange", "children"]);
-  const value = outerToInnerValue(outerValue);
-  const defaultValue = outerToInnerValue(outerDefaultValue) || (multiple ? [] : '');
+    props = __rest(_a, ["name", "label", "value", "defaultValue", "options", "multiple", "placeholder", "variant", "variants", "onBlur", "onFocus", "onChange", "children"]);
+  const value = outerToInnerSelectValue(outerValue);
+  const defaultValue = outerToInnerSelectValue(outerDefaultValue) || (multiple ? [] : '');
   const [innerValue, setInnerValue] = React.useState(value || defaultValue);
-  // console.log('value', value, 'defaultValue', defaultValue);
+  const [previousOuterValue, setPreviousOuterValue] = React.useState(outerValue);
+  // console.log('outerValue', outerValue, 'innerValue', innerValue);
   React.useEffect(() => {
+    if (previousOuterValue !== outerValue) {
+      setPreviousOuterValue(outerValue);
+      setInnerValue(value);
+      // console.log('useEffect.setInnerValue', value);
+    }
+  }, [previousOuterValue, outerValue, value]);
+  const onChange_ = value => {
     if (innerValue !== value) {
       setInnerValue(value);
+      // console.log('onChange_.setInnerValue', value);
+      const outerValue = innerToOuterSelectValue(value, options);
+      onChange && onChange(outerValue);
+      // console.log('onChange_.setOuterValue', outerValue);
     }
-  }, [innerValue, value]);
+  };
   const onBlur_ = event => {
     onBlur && onBlur(event);
   };
   const onFocus_ = event => {
     onFocus && onFocus(event);
   };
-  const onChange_ = value => {
-    if (innerValue !== value) {
-      setInnerValue(value);
-      const outerValue = innerToOuterValue(value, options);
-      onChange && onChange(outerValue);
-    }
-  };
   const globalVariants = useVariants('select', selectVariants);
   variants = variants || globalVariants;
   return jsxRuntime.jsx(Ariakit__namespace.SelectProvider, Object.assign({
-    value: value,
-    defaultValue: defaultValue,
+    value: innerValue,
     setValue: onChange_
   }, props, {
     children: jsxRuntime.jsx(SelectContext.Provider, {
       value: {
         name,
-        value: outerValue,
-        label: outerLabel,
-        defaultValue: outerDefaultValue,
+        label,
         options,
         multiple,
         placeholder,
@@ -12046,7 +12072,10 @@ function SelectSelection() {
     return;
   }
   const state = selectContext === null || selectContext === void 0 ? void 0 : selectContext.getState();
-  const items = ((state === null || state === void 0 ? void 0 : state.items) || []).filter(x => x.element.parentElement !== (state === null || state === void 0 ? void 0 : state.anchorElement)).map(x => ({
+  const items = context.options ? context.options.map(x => ({
+    value: String(x.id),
+    label: x.name
+  })) : ((state === null || state === void 0 ? void 0 : state.items) || []).filter(x => x.element.parentElement !== (state === null || state === void 0 ? void 0 : state.anchorElement)).map(x => ({
     value: x.value,
     label: x.element.innerText || x.value
   }));
@@ -12065,6 +12094,7 @@ function SelectSelection() {
       return context.placeholder || 'Select';
     }
   }
+  // console.log(context.options, state?.items, items, value);
   return ((_a = items.find(x => x.value === value)) === null || _a === void 0 ? void 0 : _a.label) || context.placeholder || 'Select';
 }
 
@@ -13863,6 +13893,7 @@ exports.getVariantResponsive = getVariantResponsive;
 exports.hasChild = hasChild;
 exports.hasChildOfType = hasChildOfType;
 exports.highligthText = highligthText;
+exports.innerToOuterSelectValue = innerToOuterSelectValue;
 exports.innerToOuterSingleValue = innerToOuterSingleValue;
 exports.innerToOuterValue = innerToOuterValue;
 exports.inputVariants = inputVariants;
@@ -13886,6 +13917,7 @@ exports.mediaMin = mediaMin;
 exports.mediaOnly = mediaOnly;
 exports.mediaUp = mediaUp;
 exports.modalVariants = modalVariants;
+exports.outerToInnerSelectValue = outerToInnerSelectValue;
 exports.outerToInnerSingleValue = outerToInnerSingleValue;
 exports.outerToInnerValue = outerToInnerValue;
 exports.pickChild = pickChild;