@xqmsg/ui-core 0.23.1-rc.0 → 0.23.1-rc.1

package/dist/ui-core.esm.js

@@ -801,7 +801,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-var _excluded = ["type", "isRequired", "rightElement", "leftElement", "defaultValue", "allowDefault", "variant"];
+var _excluded = ["type", "isRequired", "rightElement", "leftElement", "defaultValue", "allowDefault", "variant", "label"];
 /**
  * A functional React component utilized to render the `StackedInput` component.
  */
@@ -814,14 +814,17 @@ var StackedInput = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref)
     defaultValue = _ref2.defaultValue,
     allowDefault = _ref2.allowDefault,
     variant = _ref2.variant,
+    label = _ref2.label,
     props = _objectWithoutPropertiesLoose(_ref2, _excluded);
-  return /*#__PURE__*/React__default.createElement(InputGroup, null, leftElement && leftElement, variant, /*#__PURE__*/React__default.createElement(Input$2, Object.assign({
+  var isMobile = variant === 'mobile';
+  var placeholder = isMobile && label ? label : undefined;
+  return /*#__PURE__*/React__default.createElement(InputGroup, null, leftElement && leftElement, label, /*#__PURE__*/React__default.createElement(Input$2, Object.assign({}, props, {
+    placeholder: placeholder,
     type: type,
-    isRequired: isRequired
-  }, props, {
+    isRequired: isRequired,
     ref: _ref,
     defaultValue: defaultValue,
-    fontSize: variant === 'mobile' ? '17px' : '13px',
+    fontSize: isMobile ? '17px' : '13px',
     variant: variant,
     onKeyDown: function onKeyDown(e) {
       if (e.key === 'Enter' && !allowDefault) {
@@ -1165,20 +1168,23 @@ var StackedSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref
   }));
 });
 
-var _excluded$2 = ["isRequired", "allowDefault", "variant"];
+var _excluded$2 = ["isRequired", "allowDefault", "variant", "label"];
 /**
  * A functional React component utilized to render the `StackedTextarea` component.
  */
 var StackedTextarea = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref) {
   var allowDefault = _ref2.allowDefault,
     variant = _ref2.variant,
+    label = _ref2.label,
     props = _objectWithoutPropertiesLoose(_ref2, _excluded$2);
-  if (variant === 'mobile') {
-    return /*#__PURE__*/React__default.createElement(Flex, null, allowDefault, /*#__PURE__*/React__default.createElement(Textarea$1, Object.assign({
+  var isMobile = variant === 'mobile';
+  if (isMobile) {
+    return /*#__PURE__*/React__default.createElement(Flex, null, /*#__PURE__*/React__default.createElement(Textarea$1, Object.assign({
       ref: _ref
     }, props, {
       variant: variant,
       fontSize: "17px",
+      placeholder: label != null ? label : '',
       onKeyDown: function onKeyDown(e) {
         if (e.key === 'Enter' && !allowDefault) {
           e.stopPropagation();
@@ -1191,7 +1197,7 @@ var StackedTextarea = /*#__PURE__*/React__default.forwardRef(function (_ref2, _r
     ref: _ref
   }, props, {
     variant: variant,
-    fontSize: variant === '' ? '13px' : '17px',
+    fontSize: "13px",
     onKeyDown: function onKeyDown(e) {
       if (e.key === 'Enter' && !allowDefault) {
         e.stopPropagation();
@@ -1561,7 +1567,8 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
     disabled = _ref2.disabled,
     _ref2$separators = _ref2.separators,
     separators = _ref2$separators === void 0 ? ['Enter', ' ', ',', ';', 'Tab'] : _ref2$separators,
-    variant = _ref2.variant;
+    variant = _ref2.variant,
+    label = _ref2.label;
   var watchedValue = useWatch({
     control: control,
     name: name
@@ -1709,6 +1716,18 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
     borderRadius: isMobile ? '0' : '4px',
     alignItems: "center",
     justifyContent: "space-between",
+    style: isMobile ? {
+      cursor: 'pointer',
+      height: '48px',
+      fontSize: '17px',
+      lineHeight: '20px',
+      fontWeight: 400,
+      padding: '12px 16px 12px 0px',
+      borderRadius: 0,
+      border: '0.5px solid rgba(153, 153, 153, 0.1)',
+      borderLeft: 'none',
+      borderRight: 'none'
+    } : undefined,
     onClick: function onClick() {
       if (isFocussed && tokenIndex !== null) {
         setTokenIndex(null);
@@ -1788,7 +1807,11 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
       setIsFocussed(false);
       return setTokenIndex(null);
     },
-    variant: variant
+    placeholder: isMobile && label && lastestFormValueToArray.length === 0 ? label : '',
+    variant: variant,
+    style: isMobile ? {
+      border: 'none'
+    } : undefined
   }))));
 });
 
@@ -1890,7 +1913,8 @@ function Input(_ref) {
           defaultValue: defaultValue,
           value: value,
           allowDefault: allowDefault,
-          variant: variant
+          variant: variant,
+          label: label
         });
       case 'radio':
         return /*#__PURE__*/React__default.createElement(StackedRadioGroup, {
@@ -1939,7 +1963,8 @@ function Input(_ref) {
           ref: ref,
           disabled: disabled,
           value: value,
-          variant: variant
+          variant: variant,
+          label: label
         });
       case 'checkbox':
         return /*#__PURE__*/React__default.createElement(StackedCheckbox, {
@@ -1992,7 +2017,8 @@ function Input(_ref) {
           clearErrors: clearErrors,
           control: control,
           maxLength: maxLength,
-          variant: variant
+          variant: variant,
+          label: label
         });
       case 'switch':
         return /*#__PURE__*/React__default.createElement(StackedSwitch, {
@@ -2988,7 +3014,6 @@ var _excluded$4 = ["label", "ariaLabel", "className", "placeholder", "name", "he
  * A functional React component utilized to render the `SelectNative` component.
  */
 var SelectNative = function SelectNative(_ref) {
-  var _options$;
   var name = _ref.name,
     helperText = _ref.helperText,
     options = _ref.options,
@@ -3002,38 +3027,35 @@ var SelectNative = function SelectNative(_ref) {
     setValue = _ref.setValue,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
   // const [selectedOption, setSelectedOption] = useState(
-  //   options.find(option => option.value === value)?.label ?? ''
+  //   options ? options[0] ?? '' : ''
   // );
-  var _useState = useState(options ? (_options$ = options[0]) != null ? _options$ : '' : ''),
-    selectedOption = _useState[0],
-    setSelectedOption = _useState[1];
-  //const [selectedOption, setSelectedOption] = useState(null);
-  // useEffect(() => {
-  //   if (defaultValue) {
-  //     setSelectedOption(defaultValue);
-  //   }
-  //   setSelectedOption(
-  //     (fullOptions || options).find(option => option.value === value)?.label ??
-  //       ''
-  //   );
-  // }, [fullOptions, value]);
+  var style = {
+    cursor: 'pointer',
+    color: 'var(--chakra-colors-blue-500)',
+    height: '48px',
+    fontSize: '17px',
+    lineHeight: '20px',
+    fontWeight: 400,
+    padding: '12px 16px 12px 0px',
+    borderRadius: 0,
+    border: '0.5px solid rgba(153, 153, 153, 0.1)',
+    borderLeft: 'none',
+    borderRight: 'none'
+  };
   var handleOnSelectItem = function handleOnSelectItem(selectedValue) {
-    console.log(selectedValue);
     var selectedOption = options == null ? void 0 : options.find(function (_ref2) {
       var val = _ref2.value;
       return selectedValue === val;
     });
-    console.log(selectedValue);
-    setValue(name, selectedValue);
     if (selectedOption) {
       if (onChange) {
         onChange(selectedOption.value);
       }
-      setSelectedOption(selectedOption);
       setValue(name, selectedOption.value);
+    } else {
+      setValue(name, selectedValue);
     }
   };
-  console.log(selectedOption);
   useEffect(function () {
     if (defaultValue) {
       handleOnSelectItem(defaultValue);
@@ -3043,61 +3065,34 @@ var SelectNative = function SelectNative(_ref) {
   return /*#__PURE__*/React__default.createElement(Controller, {
     control: control,
     name: name,
-    // defaultValue={defaultValue as PathValue<T, Path<T>>}
     rules: {
       required: isRequired
     },
     /** @ts-ignore: issues with implicit */
     render: function render(_ref3) {
       var _ref3$field = _ref3.field,
-        ref = _ref3$field.ref;
+        ref = _ref3$field.ref,
+        value = _ref3$field.value;
       return /*#__PURE__*/React__default.createElement(FormControl, {
         id: name,
         isInvalid: isInvalid,
         position: "relative",
         py: 0
-      }, /*#__PURE__*/React__default.createElement(Box //ref={dropdownRef}
-      , {
-        position: "relative"
-      }, /*#__PURE__*/React__default.createElement(Flex, {
-        flexDirection: "column",
-        //ref={dropdownRef}
-        //scrollMargin="15px"
-        border: "0",
-        mt: "3px",
-        //maxH="240px"
-        overflowY: "auto",
-        width: "fit-content",
-        minWidth: "100%",
-        zIndex: 100,
-        tabIndex: -2000,
-        borderTop: "0.5px solid #9999991A"
       }, /*#__PURE__*/React__default.createElement(Select$1, Object.assign({}, props, {
         required: isRequired,
         ref: ref,
-        //value={selectedOption?.value ?? value}
-        // textShadow={`0 0 0 ${colors.label.primary.light}`}
+        value: value,
         disabled: disabled != null ? disabled : false,
         onChange: function onChange(e) {
           return handleOnSelectItem(e.target.value);
         },
-        // onKeyDown={handleOnKeyDown}
-        style: {
-          cursor: 'pointer',
-          color: 'var(--chakra-colors-blue-500)',
-          height: '48px',
-          fontSize: '17px',
-          lineHeight: '20px',
-          fontWeight: 400,
-          padding: '12px 16px 12px 0px',
-          borderRadius: 0
-        }
+        style: style
       }), options && options.map(function (i) {
         return /*#__PURE__*/React__default.createElement("option", {
           value: i.value,
           key: i.sortValue
         }, i.label);
-      })))), isInvalid ? /*#__PURE__*/React__default.createElement(FormErrorMessage, null, errorText) : helperText && /*#__PURE__*/React__default.createElement(FormHelperText, null, helperText));
+      })), isInvalid ? /*#__PURE__*/React__default.createElement(FormErrorMessage, null, errorText) : helperText && /*#__PURE__*/React__default.createElement(FormHelperText, null, helperText));
     }
   });
 };
@@ -3788,7 +3783,7 @@ var variantPrimaryFlat = function variantPrimaryFlat() {
     border: '0.5px',
     gap: '8px',
     height: '44px',
-    margin: '8px',
+    // margin: '8px',
     fontSize: '17px',
     fontWeight: '500',
     lineHeight: '24px',
@@ -3859,12 +3854,15 @@ var _createMultiStyleConf = /*#__PURE__*/createMultiStyleConfigHelpers(checkboxA
   defineMultiStyleConfig = _createMultiStyleConf.defineMultiStyleConfig;
 var roundedCheckbox = /*#__PURE__*/definePartsStyle({
   control: {
-    borderRadius: 50,
-    padding: 3
+    //borderRadius: 50,
   },
   label: {
-    fontSize: '17px'
-  }
+    fontSize: '17px',
+    fontWeight: 400,
+    lineHeight: '20px',
+    padding: '12px 16px 12px 0px'
+  },
+  height: '44px'
 });
 var variants$3 = {
   mobile: roundedCheckbox
@@ -3980,19 +3978,27 @@ var baseStyle$7 = {
       bg: '#ffffff',
       border: '2px solid',
       borderColor: colors.border.focus
+    },
+    _placeholder: {
+      color: colors.label.secondary.light
     }
   }
 };
 var mobileInputs = /*#__PURE__*/_extends$6({}, baseStyle$7, {
   field: {
     fontSize: '17px',
-    border: 'none',
     py: '14px',
     px: '16px',
     cursor: 'pointer',
     lineHeight: '21px',
     fontWeight: 400,
-    borderRadius: 0
+    borderRadius: 0,
+    height: '48px',
+    padding: '12px 16px 12px 0px',
+    border: '0.5px solid rgba(153, 153, 153, 0.1)',
+    borderColor: 'rgba(153, 153, 153, 0.1)',
+    borderLeft: 'none',
+    borderRight: 'none'
   }
 });
 var variants$5 = {
@@ -4551,15 +4557,16 @@ var baseStyle$e = /*#__PURE__*/_extends$6({}, Input$1.baseStyle.field, {
 var mobileInputs$1 = /*#__PURE__*/defineStyle$1( /*#__PURE__*/_extends$6({}, baseStyle$e, Input$1.variants.mobile.field, {
   border: 'none',
   borderRadius: 0,
-  paddingY: '14px',
-  paddingX: '16px',
-  padding: '14px 16px',
+  paddingY: '16px',
+  paddingX: '0',
+  // padding: '16px 16px',
   cursor: 'pointer',
   lineHeight: '21px',
   fontWeight: 400,
   resize: 'none',
   overflowY: 'auto',
-  fontSize: '17px'
+  fontSize: '17px',
+  minHeight: '208px'
 }));
 var variants$9 = {
   "default": baseStyle$e,