@xqmsg/ui-core 0.24.9 → 0.24.11

package/dist/ui-core.esm.js

@@ -1034,7 +1034,7 @@ var Dropdown$1 = function Dropdown(_ref) {
   });
 };
 
-var _excluded$1 = ["isRequired", "options", "name", "setValue", "handleOnChange", "disabled", "value", "fullOptions", "loadingOptions"];
+var _excluded$1 = ["isRequired", "options", "name", "setValue", "handleOnChange", "disabled", "value", "fullOptions", "loadingOptions", "searchable"];
 /**
  * A functional React component utilized to render the `StackedSelect` component.
  */
@@ -1049,6 +1049,8 @@ var StackedSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref
     value = _ref2.value,
     fullOptions = _ref2.fullOptions,
     loadingOptions = _ref2.loadingOptions,
+    _ref2$searchable = _ref2.searchable,
+    searchable = _ref2$searchable === void 0 ? true : _ref2$searchable,
     props = _objectWithoutPropertiesLoose(_ref2, _excluded$1);
   var dropdownRef = useRef(null);
   var dropdownMenuRef = useRef(null);
@@ -1167,11 +1169,13 @@ var StackedSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref
     }));
   }, [options, searchValue]);
   var handleInput = function handleInput(e) {
-    var _filteredOptions$;
-    var initialOptionIndex = filteredOptions.length && ((_filteredOptions$ = filteredOptions[0]) == null ? void 0 : _filteredOptions$.value) === 'section_header' ? 1 : 0;
-    setOptionIndex(initialOptionIndex);
-    var value = e.target.value;
-    setSearchValue(value);
+    if (searchable) {
+      var _filteredOptions$;
+      var initialOptionIndex = filteredOptions.length && ((_filteredOptions$ = filteredOptions[0]) == null ? void 0 : _filteredOptions$.value) === 'section_header' ? 1 : 0;
+      setOptionIndex(initialOptionIndex);
+      var _value = e.target.value;
+      setSearchValue(_value);
+    }
   };
   return /*#__PURE__*/React__default.createElement(Box, {
     ref: dropdownRef,
@@ -1184,7 +1188,6 @@ var StackedSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref
       return setIsFocussed(!isFocussed);
     },
     cursor: isFocussed ? 'default' : 'pointer',
-    color: loadingOptions ? 'transparent' : 'inital',
     fontSize: "13px",
     value: isFocussed ? searchValue : selectedOption,
     autoComplete: "off",
@@ -1590,6 +1593,7 @@ var StackedMultiSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2,
     optionIndex: optionIndex,
     loading: loadingOptions
   }, /*#__PURE__*/React__default.createElement(Input$2, {
+    autoFocus: true,
     value: searchValue,
     onChange: handleInput,
     disabled: loadingOptions
@@ -1939,7 +1943,8 @@ function Input(_ref) {
     separators = _ref.separators,
     _ref$loadingOptions = _ref.loadingOptions,
     loadingOptions = _ref$loadingOptions === void 0 ? false : _ref$loadingOptions,
-    truncatePillLength = _ref.truncatePillLength;
+    truncatePillLength = _ref.truncatePillLength,
+    searchable = _ref.searchable;
   function selectedInputField(onChange, onBlur, ref, value) {
     switch (inputType) {
       case 'text':
@@ -1994,7 +1999,8 @@ function Input(_ref) {
           defaultValue: defaultValue,
           placeholder: placeholder,
           fullOptions: fullOptions,
-          loadingOptions: loadingOptions
+          loadingOptions: loadingOptions,
+          searchable: searchable
         });
       case 'textarea':
         return /*#__PURE__*/React__default.createElement(StackedTextarea, {
@@ -3027,7 +3033,8 @@ var Workspace = function Workspace(_ref) {
     filled = _ref$filled === void 0 ? false : _ref$filled;
   if (filled) {
     return /*#__PURE__*/React__default.createElement(Memo$w, {
-      boxSize: boxSize
+      width: boxSize,
+      height: boxSize
     });
   }
   return /*#__PURE__*/React__default.createElement(Image$1, {
@@ -4263,8 +4270,75 @@ var Link$1 = {
   variants: variants$6
 };
 
-var parts$4 = ['overlay', 'dialogContainer', 'dialog', 'header', 'closeButton', 'body', 'footer'];
-var baseStyle$9 = {
+var parts$4 = ['item', 'command', 'list', 'button', 'groupTitle'];
+function baseStyleList(props) {
+  return {
+    bg: colors.fill.light.quaternary,
+    boxShadow: mode("2xl", "dark-lg")(props),
+    color: 'inherit',
+    minW: '3xs',
+    py: 4,
+    px: 2,
+    zIndex: 'docked',
+    borderWidth: 0,
+    overflow: 'hidden',
+    backdropFilter: 'auto',
+    backdropBlur: '64px',
+    borderRadius: '4px',
+    border: '0.25px solid',
+    borderColor: colors.fill.light.tertiary
+  };
+}
+function baseStyleItem(props) {
+  return {
+    fontSize: '13px;',
+    fontWeight: 500,
+    lineHeight: '16px',
+    py: 3,
+    px: 4,
+    borderRadius: '4px',
+    width: '100%',
+    transition: 'background 50ms ease-in 0s',
+    _hover: {
+      color: colors.white,
+      background: colors.fill.action
+    },
+    _active: {
+      bg: mode("gray.200", "whiteAlpha.200")(props)
+    },
+    _expanded: {
+      bg: mode("gray.100", "whiteAlpha.100")(props)
+    },
+    _disabled: {
+      opacity: 0.4,
+      cursor: 'not-allowed'
+    }
+  };
+}
+var baseStyleGroupTitle = {
+  mx: 4,
+  my: 2,
+  fontWeight: 'semibold',
+  fontSize: 'sm'
+};
+var baseStyleCommand = {
+  opacity: 0.6
+};
+var baseStyle$9 = function baseStyle(props) {
+  return {
+    list: baseStyleList(props),
+    item: baseStyleItem(props),
+    groupTitle: baseStyleGroupTitle,
+    command: baseStyleCommand
+  };
+};
+var Menu$1 = {
+  parts: parts$4,
+  baseStyle: baseStyle$9
+};
+
+var parts$5 = ['overlay', 'dialogContainer', 'dialog', 'header', 'closeButton', 'body', 'footer'];
+var baseStyle$a = {
   width: 'fit-content',
   height: 'fit-content',
   background: '#F6F6F6',
@@ -4295,8 +4369,8 @@ var baseStyle$9 = {
   }
 };
 var Modal$1 = {
-  parts: parts$4,
-  baseStyle: baseStyle$9
+  parts: parts$5,
+  baseStyle: baseStyle$a
 };
 
 var Popover = {
@@ -4309,7 +4383,7 @@ var Popover = {
 
 var defaultProps$5 = Input$1.defaultProps,
   variants$7 = Input$1.variants;
-var parts$5 = ['field', 'icon'];
+var parts$6 = ['field', 'icon'];
 function baseStyleField() {
   return _extends$6({}, Input$1.baseStyle.field, {
     appearance: 'none',
@@ -4328,20 +4402,20 @@ var baseStyleInput = {
     opacity: 0.5
   }
 };
-var baseStyle$a = function baseStyle() {
+var baseStyle$b = function baseStyle() {
   return {
     field: baseStyleField(),
     icon: baseStyleInput
   };
 };
 var Select = {
-  parts: parts$5,
-  baseStyle: baseStyle$a,
+  parts: parts$6,
+  baseStyle: baseStyle$b,
   variants: variants$7,
   defaultProps: defaultProps$5
 };
 
-var parts$6 = ['track', 'thumb'];
+var parts$7 = ['track', 'thumb'];
 function baseStyleTrack(props) {
   var c = props.colorScheme,
     theme = props.theme;
@@ -4371,7 +4445,7 @@ var baseStyleThumb = {
   borderRadius: 'full',
   transform: 'translateX(0)'
 };
-var baseStyle$b = function baseStyle(props) {
+var baseStyle$c = function baseStyle(props) {
   return {
     track: baseStyleTrack(props),
     thumb: baseStyleThumb
@@ -4423,14 +4497,14 @@ var defaultProps$6 = {
   colorScheme: 'blue'
 };
 var Switch = {
-  parts: parts$6,
-  baseStyle: baseStyle$b,
+  parts: parts$7,
+  baseStyle: baseStyle$c,
   sizes: sizes,
   defaultProps: defaultProps$6
 };
 
-var parts$7 = ['th', 'td', 'tr', 'body', 'thead'];
-var baseStyle$c = {
+var parts$8 = ['th', 'td', 'tr', 'body', 'thead'];
+var baseStyle$d = {
   thead: {
     bg: colors.label.primary.dark
   },
@@ -4466,11 +4540,11 @@ var baseStyle$c = {
   }
 };
 var Table = {
-  parts: parts$7,
-  baseStyle: baseStyle$c
+  parts: parts$8,
+  baseStyle: baseStyle$d
 };
 
-var parts$8 = ['root', 'tablist', 'tab', 'tabpanel', 'indicator'];
+var parts$9 = ['root', 'tablist', 'tab', 'tabpanel', 'indicator'];
 function baseStyleRoot(props) {
   var orientation = props.orientation;
   return {
@@ -4505,7 +4579,7 @@ function baseStyleTablist(props) {
 var baseStyleTabpanel = {
   p: 4
 };
-var baseStyle$d = function baseStyle(props) {
+var baseStyle$e = function baseStyle(props) {
   return {
     root: baseStyleRoot(props),
     tab: baseStyleTab(props),
@@ -4691,14 +4765,14 @@ var defaultProps$7 = {
   colorScheme: 'blue'
 };
 var Tabs = {
-  parts: parts$8,
-  baseStyle: baseStyle$d,
+  parts: parts$9,
+  baseStyle: baseStyle$e,
   sizes: sizes$1,
   variants: variants$8,
   defaultProps: defaultProps$7
 };
 
-var baseStyle$e = /*#__PURE__*/_extends$6({}, Input$1.baseStyle.field, {
+var baseStyle$f = /*#__PURE__*/_extends$6({}, Input$1.baseStyle.field, {
   fontSize: '13px',
   display: 'block',
   paddingY: '8px',
@@ -4706,7 +4780,7 @@ var baseStyle$e = /*#__PURE__*/_extends$6({}, Input$1.baseStyle.field, {
   height: '78px',
   lineHeight: 'short'
 });
-var mobileInputs$1 = /*#__PURE__*/defineStyle$1( /*#__PURE__*/_extends$6({}, baseStyle$e, Input$1.variants.mobile.field, {
+var mobileInputs$1 = /*#__PURE__*/defineStyle$1( /*#__PURE__*/_extends$6({}, baseStyle$f, Input$1.variants.mobile.field, {
   border: 'none',
   borderRadius: 0,
   paddingY: '16px',
@@ -4721,14 +4795,14 @@ var mobileInputs$1 = /*#__PURE__*/defineStyle$1( /*#__PURE__*/_extends$6({}, bas
   minHeight: '208px'
 }));
 var variants$9 = {
-  "default": baseStyle$e,
+  "default": baseStyle$f,
   mobile: mobileInputs$1
 };
 var defaultProps$8 = {
   variant: 'default'
 };
 var Textarea = {
-  baseStyle: baseStyle$e,
+  baseStyle: baseStyle$f,
   variants: variants$9,
   defaultProps: defaultProps$8
 };
@@ -4860,6 +4934,7 @@ var customXQChakraTheme = /*#__PURE__*/extendTheme( /*#__PURE__*/_extends$6({
     FormLabel: FormLabel,
     Input: Input$1,
     Link: Link$1,
+    Menu: Menu$1,
     Modal: Modal$1,
     Popover: Popover,
     Select: Select,