@xqmsg/ui-core 0.15.4 → 0.16.1

package/dist/components/banner/index.d.ts

@@ -5,6 +5,7 @@ export interface BannerProps {
     message: ReactNode;
     buttonText?: string;
     onClick?: () => void;
+    type?: 'condensed' | 'expanded';
 }
 /**
  * A functional React component utilized to render the `Banner` component

package/dist/components/input/components/dropdown/index.d.ts

@@ -5,6 +5,7 @@ export interface DropdownProps {
     options: FieldOptions;
     dropdownRef: RefObject<HTMLDivElement>;
     position: 'top' | 'bottom';
+    optionIndex?: number | null;
 }
 /**
  * A functional React component utilized to render the `Dropdown` component

package/dist/theme/components/button.d.ts

@@ -4,6 +4,7 @@ declare const _default: {
         fontSize: string;
         bg: string;
         color: string;
+        h: string;
         border: string;
         px: string;
         py: string;
@@ -34,6 +35,7 @@ declare const _default: {
             fontSize: string;
             bg: string;
             color: string;
+            h: string;
             border: string;
             px: string;
             py: string;
@@ -74,6 +76,7 @@ declare const _default: {
             };
             borderRadius: string;
             fontSize: string;
+            h: string;
             border: string;
             px: string;
             py: string;

package/dist/theme/components/table.d.ts

@@ -11,8 +11,12 @@ declare const _default: {
         };
         tr: {
             fontSize: string;
+            h: string;
+            lineHeight: string;
             _odd: {
                 td: {
+                    h: string;
+                    lineHeight: string;
                     bg: string;
                     _first: {
                         borderTopLeftRadius: string;
@@ -27,6 +31,8 @@ declare const _default: {
         };
         td: {
             padding: string;
+            lineHeight: string;
+            h: string;
         };
     };
 };

package/dist/theme/styles.d.ts

@@ -8,6 +8,7 @@ declare const _default: {
                 base: string;
                 lg: string;
             };
+            lineHeight: string;
         };
         '*, *::before, *::after': {
             borderColor: string;

package/dist/ui-core.cjs.development.js

@@ -57,7 +57,9 @@ var Banner = function Banner(_ref) {
   var variant = _ref.variant,
       message = _ref.message,
       buttonText = _ref.buttonText,
-      onClick = _ref.onClick;
+      onClick = _ref.onClick,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'expanded' : _ref$type;
   var Icon = React.useMemo(function () {
     switch (variant) {
       case 'error':
@@ -94,18 +96,24 @@ var Banner = function Banner(_ref) {
   }, [variant]);
   return /*#__PURE__*/React__default.createElement(react.Alert, {
     variant: variant
-  }, /*#__PURE__*/React__default.createElement(react.AlertDescription, null, /*#__PURE__*/React__default.createElement(react.Box, {
-    pb: "8px"
-  }, Icon), message, onClick && buttonText && /*#__PURE__*/React__default.createElement(react.Flex, {
-    pt: "8px",
-    justifyContent: "flex-end"
+  }, /*#__PURE__*/React__default.createElement(react.AlertDescription, null, /*#__PURE__*/React__default.createElement(react.Flex, {
+    flexDirection: type === 'condensed' ? 'row' : 'column',
+    alignItems: type === 'condensed' ? 'center' : ''
+  }, /*#__PURE__*/React__default.createElement(react.Box, {
+    pr: "8px"
+  }, Icon), /*#__PURE__*/React__default.createElement(react.Box, {
+    pt: type === 'condensed' ? 0 : '8px'
+  }, " ", message), onClick && buttonText && /*#__PURE__*/React__default.createElement(react.Flex, {
+    ml: type === 'condensed' ? 'auto' : '',
+    pt: type === 'condensed' ? 0 : '8px',
+    justifyContent: type === 'condensed' ? 'flex-end' : 'flex-end'
   }, /*#__PURE__*/React__default.createElement(Button, {
     variant: "secondary",
     onClick: onClick,
     text: buttonText,
     width: "variable",
     ariaLabel: "banner button"
-  }))));
+  })))));
 };
 
 var blue = {
@@ -373,12 +381,12 @@ var SpinnerButton = function SpinnerButton(_ref) {
       type = _ref.type,
       ariaLabel = _ref.ariaLabel,
       _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'solid' : _ref$variant,
+      variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
       disabled = _ref.disabled,
       className = _ref.className;
   return /*#__PURE__*/React__default.createElement(react.Button, {
     spinner: /*#__PURE__*/React__default.createElement(react.Spinner, {
-      size: 'md'
+      size: 'sm'
     }),
     isLoading: isLoading,
     onClick: onClick,
@@ -505,7 +513,8 @@ var Dropdown = function Dropdown(_ref) {
   var onSelectItem = _ref.onSelectItem,
       options = _ref.options,
       dropdownRef = _ref.dropdownRef,
-      position = _ref.position;
+      position = _ref.position,
+      optionIndex = _ref.optionIndex;
   var DropdownContent = React.useMemo(function () {
     return options.map(function (option, idx) {
       return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, option.value === 'section_header' && options[idx + 1] && options[idx + 1].value !== 'section_header' && /*#__PURE__*/React__default.createElement(react.Box, {
@@ -532,18 +541,19 @@ var Dropdown = function Dropdown(_ref) {
         px: "8px",
         py: "4px",
         width: "100%",
-        color: colors.label.primary.light,
+        color: optionIndex === idx ? colors.label.primary.dark : colors.label.primary.light,
         _hover: {
           color: colors.label.primary.dark,
           bg: colors.fill.action,
           borderRadius: '4px',
           width: '100%'
         },
-        bg: "inherit",
-        whiteSpace: "nowrap"
+        bg: optionIndex === idx ? colors.fill.action : 'inherit',
+        whiteSpace: "nowrap",
+        id: option.value
       }, option.label));
     });
-  }, [onSelectItem, options]);
+  }, [onSelectItem, optionIndex, options]);
   return /*#__PURE__*/React__default.createElement(react.Flex, {
     flexDirection: "column",
     ref: dropdownRef,
@@ -602,7 +612,7 @@ function useOnClickOutside(ref, handler) {
   [ref, handler]);
 }
 
-var _excluded$1 = ["isRequired", "options", "name", "setValue", "handleOnChange", "value"];
+var _excluded$1 = ["isRequired", "options", "name", "setValue", "handleOnChange", "disabled", "value"];
 /**
  * A functional React component utilized to render the `StackedSelect` component.
  */
@@ -615,6 +625,7 @@ var StackedSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref
       name = _ref2.name,
       setValue = _ref2.setValue,
       handleOnChange = _ref2.handleOnChange,
+      disabled = _ref2.disabled,
       value = _ref2.value,
       props = _objectWithoutPropertiesLoose(_ref2, _excluded$1);
 
@@ -631,9 +642,21 @@ var StackedSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref
       selectedOption = _useState2[0],
       setSelectedOption = _useState2[1];
 
-  var _useState3 = React.useState('top'),
-      position = _useState3[0],
-      setPosition = _useState3[1];
+  var _useState3 = React.useState(null),
+      optionIndex = _useState3[0],
+      setOptionIndex = _useState3[1];
+
+  var _useState4 = React.useState('top'),
+      position = _useState4[0],
+      setPosition = _useState4[1];
+
+  var _useState5 = React.useState(''),
+      searchValue = _useState5[0],
+      setSearchValue = _useState5[1];
+
+  var _useState6 = React.useState(''),
+      debouncedSearchValue = _useState6[0],
+      setDebouncedSearchValue = _useState6[1];
 
   var boundingClientRect = (_dropdownRef$current = dropdownRef.current) == null ? void 0 : _dropdownRef$current.getBoundingClientRect();
   React.useEffect(function () {
@@ -668,6 +691,92 @@ var StackedSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref
     setIsFocussed(false);
   };
 
+  var handleOnKeyDown = function handleOnKeyDown(e) {
+    var initialOptionIndex = options[0].value === 'section_header' ? 1 : 0;
+
+    if (!isFocussed && (e.key === 'Enter' || e.key === 'ArrowUp' || e.key === 'ArrowDown')) {
+      setIsFocussed(true);
+      return setOptionIndex(initialOptionIndex);
+    }
+
+    if (isFocussed) {
+      if (optionIndex === null && (e.key === 'Enter' || e.key === 'ArrowUp' || e.key === 'ArrowDown')) {
+        return setOptionIndex(initialOptionIndex);
+      }
+
+      if (e.key === 'ArrowUp' && optionIndex !== null && optionIndex > 0) {
+        var _dropdownMenuRef$curr;
+
+        var incrementValue = options[optionIndex - 1] && options[optionIndex - 1].value === 'section_header' ? 2 : 1;
+        setOptionIndex(optionIndex - incrementValue);
+        return (_dropdownMenuRef$curr = dropdownMenuRef.current) == null ? void 0 : _dropdownMenuRef$curr.scrollTo({
+          top: optionIndex * 24,
+          behavior: 'smooth'
+        });
+      }
+
+      if (e.key === 'ArrowDown' && optionIndex !== null && optionIndex < options.length) {
+        var _dropdownMenuRef$curr2;
+
+        var _incrementValue = options[optionIndex + 1] && options[optionIndex + 1].value === 'section_header' ? 2 : 1;
+
+        setOptionIndex(optionIndex + _incrementValue);
+        return (_dropdownMenuRef$curr2 = dropdownMenuRef.current) == null ? void 0 : _dropdownMenuRef$curr2.scrollTo({
+          top: optionIndex * 24,
+          behavior: 'smooth'
+        });
+      }
+
+      if (e.key === 'Enter' && optionIndex !== null) {
+        var option = options.find(function (_, idx) {
+          return optionIndex === idx;
+        });
+        if (!option) return;
+
+        if (handleOnChange) {
+          handleOnChange(option.value);
+        }
+
+        setSelectedOption(option == null ? void 0 : option.label);
+        setValue(name, option.value, {
+          shouldDirty: true,
+          shouldValidate: true
+        });
+        return setIsFocussed(false);
+      }
+
+      if (e.key === 'Tab') {
+        return setIsFocussed(false);
+      }
+    }
+  };
+
+  React.useEffect(function () {
+    if (searchValue.length) {
+      var _dropdownMenuRef$curr3;
+
+      var idx = options.findIndex(function (option) {
+        return option.label.substring(0, searchValue.length).toLowerCase() === searchValue.toLowerCase();
+      });
+      (_dropdownMenuRef$curr3 = dropdownMenuRef.current) == null ? void 0 : _dropdownMenuRef$curr3.scrollTo({
+        top: idx * 24,
+        behavior: 'smooth'
+      });
+      setSearchValue('');
+      setDebouncedSearchValue('');
+    }
+  }, [options, searchValue]);
+  var updateSearchValue = React.useMemo(function () {
+    return lodash.debounce(function (val) {
+      setSearchValue(val);
+    }, 1000);
+  }, []);
+
+  var update = function update(value) {
+    updateSearchValue(value);
+    setDebouncedSearchValue(value);
+  };
+
   return /*#__PURE__*/React__default.createElement(react.Box, {
     ref: dropdownRef,
     position: "relative"
@@ -683,29 +792,16 @@ var StackedSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref
     fontSize: "13px",
     textShadow: "0 0 0 " + colors.label.primary.light,
     value: selectedOption,
+    disabled: disabled,
     autoComplete: "off",
-    onKeyDown: function onKeyDown(e) {
-      if (isFocussed) {
-        var _dropdownMenuRef$curr;
-
-        if (e.key === 'Tab') {
-          return setIsFocussed(false);
-        }
-
-        var idx = options.findIndex(function (option) {
-          return option.label[0].toLocaleLowerCase() === e.key;
-        });
-        console.log(idx);
-        (_dropdownMenuRef$curr = dropdownMenuRef.current) == null ? void 0 : _dropdownMenuRef$curr.scrollTo({
-          top: idx * 27,
-          behavior: 'smooth'
-        });
-      }
-    }
+    onChange: function onChange(e) {
+      return update(debouncedSearchValue.concat(e.target.value));
+    },
+    onKeyDown: handleOnKeyDown
   })), /*#__PURE__*/React__default.createElement(react.InputRightElement, {
-    cursor: "pointer",
+    cursor: disabled ? 'not-allowed' : 'pointer',
     onClick: function onClick() {
-      return setIsFocussed(!isFocussed);
+      return !disabled && setIsFocussed(!isFocussed);
     }
   }, /*#__PURE__*/React__default.createElement(react.Image, {
     src: SubtractIcon,
@@ -717,7 +813,8 @@ var StackedSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref
     onSelectItem: function onSelectItem(option) {
       return handleOnSelectItem(option);
     },
-    options: options
+    options: options,
+    optionIndex: optionIndex
   }));
 });
 
@@ -823,10 +920,26 @@ var StackedMultiSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2,
       shouldSideScroll = _useState4[0],
       setShouldSideScroll = _useState4[1];
 
-  var _useState5 = React.useState('top'),
-      position = _useState5[0],
-      setPosition = _useState5[1];
+  var _useState5 = React.useState(null),
+      optionIndex = _useState5[0],
+      setOptionIndex = _useState5[1];
+
+  var _useState6 = React.useState('top'),
+      position = _useState6[0],
+      setPosition = _useState6[1];
+
+  var _useState7 = React.useState(''),
+      searchValue = _useState7[0],
+      setSearchValue = _useState7[1];
+
+  var _useState8 = React.useState(''),
+      debouncedSearchValue = _useState8[0],
+      setDebouncedSearchValue = _useState8[1];
 
+  console.log({
+    searchValue: searchValue,
+    debouncedSearchValue: debouncedSearchValue
+  });
   var boundingClientRect = (_dropdownRef$current = dropdownRef.current) == null ? void 0 : _dropdownRef$current.getBoundingClientRect();
   React.useEffect(function () {
     if (window.innerHeight - ((boundingClientRect == null ? void 0 : boundingClientRect.y) + 240) >= 0) {
@@ -906,26 +1019,89 @@ var StackedMultiSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2,
     });
   };
 
-  return /*#__PURE__*/React__default.createElement(react.Box, {
-    ref: dropdownRef,
-    position: "relative",
-    onKeyDown: function onKeyDown(e) {
-      if (isFocussed) {
-        var _dropdownMenuRef$curr;
+  var handleOnKeyDown = function handleOnKeyDown(e) {
+    var initialOptionIndex = options[0].value === 'section_header' ? 1 : 0;
 
-        if (e.key === 'Tab') {
-          return setIsFocussed(false);
-        }
+    if (!isFocussed && (e.key === 'Enter' || e.key === 'ArrowUp' || e.key === 'ArrowDown')) {
+      setIsFocussed(true);
+      return setOptionIndex(initialOptionIndex);
+    }
+
+    if (isFocussed) {
+      if (optionIndex === null && (e.key === 'Enter' || e.key === 'ArrowUp' || e.key === 'ArrowDown')) {
+        return setOptionIndex(initialOptionIndex);
+      }
 
-        var idx = options.findIndex(function (option) {
-          return option.label[0].toLocaleLowerCase() === e.key;
+      if (e.key === 'ArrowUp' && optionIndex !== null && optionIndex > 0) {
+        var _dropdownMenuRef$curr;
+
+        var incrementValue = localOptions[optionIndex - 1] && localOptions[optionIndex - 1].value === 'section_header' ? 2 : 1;
+        setOptionIndex(optionIndex - incrementValue);
+        return (_dropdownMenuRef$curr = dropdownMenuRef.current) == null ? void 0 : _dropdownMenuRef$curr.scrollTo({
+          top: optionIndex * 24,
+          behavior: 'smooth'
         });
-        (_dropdownMenuRef$curr = dropdownMenuRef.current) == null ? void 0 : _dropdownMenuRef$curr.scrollTo({
-          top: idx * 27,
+      }
+
+      if (e.key === 'ArrowDown' && optionIndex !== null && optionIndex < localOptions.length) {
+        var _dropdownMenuRef$curr2;
+
+        var _incrementValue = localOptions[optionIndex + 1] && localOptions[optionIndex + 1].value === 'section_header' ? 2 : 1;
+
+        setOptionIndex(optionIndex + _incrementValue);
+        return (_dropdownMenuRef$curr2 = dropdownMenuRef.current) == null ? void 0 : _dropdownMenuRef$curr2.scrollTo({
+          top: optionIndex * 24,
           behavior: 'smooth'
         });
       }
+
+      if (e.key === 'Enter' && optionIndex !== null) {
+        var option = localOptions.find(function (_, idx) {
+          return optionIndex === idx;
+        });
+        if (!option) return;
+        handleChange(option);
+        return setIsFocussed(false);
+      }
+
+      if (e.key === 'Tab') {
+        return setIsFocussed(false);
+      }
+
+      return update(debouncedSearchValue.concat(e.key));
+    }
+  };
+
+  React.useEffect(function () {
+    if (searchValue.length) {
+      var _dropdownMenuRef$curr3;
+
+      var idx = options.findIndex(function (option) {
+        return option.label.substring(0, searchValue.length).toLowerCase() === searchValue.toLowerCase();
+      });
+      (_dropdownMenuRef$curr3 = dropdownMenuRef.current) == null ? void 0 : _dropdownMenuRef$curr3.scrollTo({
+        top: idx * 24,
+        behavior: 'smooth'
+      });
+      setSearchValue('');
+      setDebouncedSearchValue('');
     }
+  }, [options, searchValue]);
+  var updateSearchValue = React.useMemo(function () {
+    return lodash.debounce(function (val) {
+      setSearchValue(val);
+    }, 1000);
+  }, []);
+
+  var update = function update(value) {
+    updateSearchValue(value);
+    setDebouncedSearchValue(value);
+  };
+
+  return /*#__PURE__*/React__default.createElement(react.Box, {
+    ref: dropdownRef,
+    position: "relative",
+    onKeyDown: handleOnKeyDown
   }, /*#__PURE__*/React__default.createElement(react.Flex, {
     fontSize: "13px",
     h: "26px",
@@ -1008,7 +1184,8 @@ var StackedMultiSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2,
       return handleChange(option);
     },
     options: localOptions,
-    position: position
+    position: position,
+    optionIndex: optionIndex
   }));
 });
 
@@ -1812,7 +1989,7 @@ var EmptyTable = function EmptyTable() {
     return i + 1;
   }).map(function (i) {
     return /*#__PURE__*/React__default.createElement(react.Tr, null, /*#__PURE__*/React__default.createElement(react.Td, {
-      height: "23px",
+      height: "26px",
       opacity: getOpacity(i)
     }));
   })));
@@ -2074,6 +2251,7 @@ var baseStyle$2 = /*#__PURE__*/system.defineStyle({
   fontSize: '13px',
   bg: colors.fill.action,
   color: colors.label.primary.dark,
+  h: '26px',
   border: 'none',
   px: '8px',
   py: '4px',
@@ -2717,8 +2895,12 @@ var baseStyle$c = {
   },
   tr: {
     fontSize: '13px',
+    h: '26px',
+    lineHeight: 'normal',
     _odd: {
       td: {
+        h: '26px ',
+        lineHeight: 'normal',
         bg: colors.fill.light.tertiary,
         _first: {
           borderTopLeftRadius: 'md',
@@ -2732,7 +2914,9 @@ var baseStyle$c = {
     }
   },
   td: {
-    padding: '5px 8px !important'
+    padding: '5px 8px !important',
+    lineHeight: 'normal',
+    h: '26px'
   }
 };
 var Table$1 = {
@@ -3003,7 +3187,7 @@ var baseStyle$f = {
   fontWeight: typography.fontWeights.normal,
   fontFamily: typography.fonts.base,
   fontSize: typography.fontSizes.sm,
-  lineHeight: typography.lineHeights.base,
+  lineHeight: typography.lineHeights.normal,
   letterSpacing: typography.letterSpacings.wide
 };
 
@@ -3051,7 +3235,8 @@ var styles = {
       overflow: {
         base: 'visible',
         lg: 'hidden'
-      }
+      },
+      lineHeight: 'normal'
     },
     '*, *::before, *::after': {
       borderColor: 'gray.200'