@app-studio/web 0.8.24 → 0.8.26

package/dist/web.umd.development.js

@@ -160,16 +160,16 @@
   var _excluded$1 = ["justifyContent", "isReversed"];
   var Vertical = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     var {
-        // Sets a default alignment for content within the Vertical container to 'flex-start'
         justifyContent = 'flex-start',
-        // Determines the direction in which the Vertical elements are stacked, default not reversed
         isReversed = false
       } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
-    return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
-      display: "flex",
-      justifyContent: justifyContent,
-      flexDirection: isReversed ? 'column-reverse' : 'column'
+    return /*#__PURE__*/React__default.createElement("div", Object.assign({
+      style: {
+        display: 'flex',
+        justifyContent: justifyContent,
+        flexDirection: isReversed ? 'column-reverse' : 'column'
+      }
     }, props, {
       ref: ref
     }));
@@ -2494,7 +2494,8 @@
       options
     } = _ref;
     // Determines the default value based on the 'placeholder' and 'isMulti' props, setting to an empty array for multi-select or an empty string/single default option
-    var defaultValue = placeholder ? isMulti ? [] : '' : options[0].value;
+    var defaultValue = placeholder ? isMulti ? [] : '' // If there's a placeholder, set default to empty array for multi-select or empty string for single select
+    : Array.isArray(options) && options.length > 0 ? options[0].value : ''; // If no placeholder, use the first option value if available, otherwise undefined
     // State hook for managing visibility of the Select dropdown, initially set to hidden
     var [hide, setHide] = React__default.useState(true);
     // State hook for tracking mouse hover status over the Select component
@@ -2838,7 +2839,7 @@
     }, style), option.label));
   };
   var SelectBox = _ref2 => {
-    var _option$label;
+    var _ref3;
     var {
       size = 'md',
       styles = {
@@ -2863,16 +2864,21 @@
       color: isDisabled ? 'color.trueGray.600' : 'color.blueGray.700',
       cursor: isDisabled ? 'not-allowed' : 'auto'
     }, styles['field'], styles['text']);
-    var option = options.find(option => option.value === value);
-    return /*#__PURE__*/React__default.createElement(Text, Object.assign({}, fieldStyles), (value === '' || value && value.length === 0) && !!placeholder ? placeholder : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, typeof value === 'string' ? (_option$label = option == null ? void 0 : option.label) != null ? _option$label : value : value && value.length > 0 && (/*#__PURE__*/React__default.createElement(Horizontal, {
+    var option = options.length > 0 && options.find(option => option.value === value);
+    return /*#__PURE__*/React__default.createElement(Text, Object.assign({}, fieldStyles), (value === '' || Array.isArray(value) && value.length === 0) && !!placeholder ? placeholder : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, typeof value === 'string' ? (_ref3 = option && option.label) != null ? _ref3 : value :
+    // If value is an array and not empty, render MultiSelect options
+    Array.isArray(value) && value.length > 0 ? (/*#__PURE__*/React__default.createElement(Horizontal, {
       gap: 6
     }, value.map(option => (/*#__PURE__*/React__default.createElement(MultiSelect, {
       key: option,
       option: option,
       removeOption: removeOption
-    }))))))));
+    }))))) : (
+    /*#__PURE__*/
+    // Handle any other types of value (including objects or unexpected values)
+    React__default.createElement("span", null, value)))));
   };
-  var HiddenSelect = _ref3 => {
+  var HiddenSelect = _ref4 => {
     var {
         id,
         name,
@@ -2882,8 +2888,8 @@
         isDisabled = false,
         isReadOnly = false,
         options = []
-      } = _ref3,
-      props = _objectWithoutPropertiesLoose(_ref3, _excluded2$3);
+      } = _ref4,
+      props = _objectWithoutPropertiesLoose(_ref4, _excluded2$3);
     var handleChange = event => {
       if (onChange) onChange(event);
     };
@@ -2900,14 +2906,14 @@
       readOnly: isReadOnly,
       onChange: handleChange,
       multiple: isMulti
-    }, props), options.map(option => {
+    }, props), options.length > 0 && options.map(option => {
       return /*#__PURE__*/React__default.createElement("option", {
         key: option.value,
         value: option.value
       }, option.label);
     }));
   };
-  var DropDown = _ref4 => {
+  var DropDown = _ref5 => {
     var {
       size,
       styles = {
@@ -2917,7 +2923,7 @@
       callback = () => {},
       highlightedIndex,
       setHighlightedIndex
-    } = _ref4;
+    } = _ref5;
     var itemStates = useItemState();
     var handleCallback = option => callback(option);
     var shadow = typeof document !== undefined ? {
@@ -2957,7 +2963,7 @@
           display: 'none'
         }
       }
-    }, shadow, styles['dropDown']), options.map((option, index) => (/*#__PURE__*/React__default.createElement(Item, Object.assign({
+    }, shadow, styles['dropDown']), options.length > 0 && options.map((option, index) => (/*#__PURE__*/React__default.createElement(Item, Object.assign({
       key: option.value,
       size: size,
       style: styles['text'],
@@ -2967,13 +2973,13 @@
       onMouseEnter: () => setHighlightedIndex(index)
     }, itemStates)))));
   };
-  var MultiSelect = _ref5 => {
+  var MultiSelect = _ref6 => {
     var {
         option,
         size = 'md',
         removeOption = () => {}
-      } = _ref5,
-      props = _objectWithoutPropertiesLoose(_ref5, _excluded3$2);
+      } = _ref6,
+      props = _objectWithoutPropertiesLoose(_ref6, _excluded3$2);
     var handleClick = () => removeOption(option);
     return /*#__PURE__*/React__default.createElement(Horizontal, Object.assign({
       gap: 10,
@@ -2992,7 +2998,7 @@
       onClick: handleClick
     }));
   };
-  var SelectView = _ref6 => {
+  var SelectView = _ref7 => {
     var {
         id,
         name,
@@ -3028,8 +3034,8 @@
         setIsFocused = () => {},
         setHighlightedIndex,
         highlightedIndex
-      } = _ref6,
-      props = _objectWithoutPropertiesLoose(_ref6, _excluded4$2);
+      } = _ref7,
+      props = _objectWithoutPropertiesLoose(_ref7, _excluded4$2);
     var isWithLabel = !!(isFocused && label);
     var handleHover = () => setIsHovered(!isHovered);
     var handleFocus = () => setIsFocused(true);