@spaced-out/ui-design-system 0.1.4 → 0.1.6

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.1.6](https://github.com/spaced-out/ui-design-system/compare/v0.1.5...v0.1.6) (2023-04-05)
+
+
+### Features
+
+* typeahead focus and loading states search input icon changes ([47363ef](https://github.com/spaced-out/ui-design-system/commit/47363efa8b7706f6cc166ffc2b617c796bd342e7))
+
+### [0.1.5](https://github.com/spaced-out/ui-design-system/compare/v0.1.4...v0.1.5) (2023-04-04)
+
+
+### Features
+
+* in context aleart and banner focus states ([9d3144d](https://github.com/spaced-out/ui-design-system/commit/9d3144dad0cc32f21cfd1ed4284b6eb5da99e742))
+
+
+### Bug Fixes
+
+* typeahead and dropdown fixes ([fa9d5ed](https://github.com/spaced-out/ui-design-system/commit/fa9d5ed1276fb3381fa71ac2f57c203ca9900dd8))
+
 ### [0.1.4](https://github.com/spaced-out/ui-design-system/compare/v0.1.3...v0.1.4) (2023-04-03)
 
 

package/lib/components/Dropdown/Dropdown.js

@@ -27,10 +27,9 @@ const Dropdown = _ref => {
     menu,
     onMenuOpen,
     onMenuClose,
-    dropdownInputText,
+    dropdownInputText = '',
     ...inputProps
   } = _ref;
-  const [inputValue, setInputValue] = React.useState(dropdownInputText || '');
   const dropdownRef = React.useRef();
   const {
     x,
@@ -44,9 +43,6 @@ const Dropdown = _ref => {
     whileElementsMounted: _reactDom.autoUpdate,
     middleware: [(0, _reactDom.flip)(), (0, _reactDom.offset)(parseInt(_space.spaceXXSmall))]
   });
-  React.useEffect(() => {
-    setInputValue(dropdownInputText || '');
-  }, [dropdownInputText]);
   const onMenuToggle = isOpen => {
     isOpen ? onMenuOpen && onMenuOpen() : onMenuClose && onMenuClose();
   };
@@ -67,7 +63,7 @@ const Dropdown = _ref => {
       boxRef: reference,
       size: size,
       placeholder: placeholder,
-      value: inputValue,
+      value: dropdownInputText,
       classNames: {
         box: _DropdownModule.default.inputBox
       }

package/lib/components/Dropdown/Dropdown.js.flow

@@ -45,10 +45,9 @@ export const Dropdown = ({
   menu,
   onMenuOpen,
   onMenuClose,
-  dropdownInputText,
+  dropdownInputText = '',
   ...inputProps
 }: DropdownProps): React.Node => {
-  const [inputValue, setInputValue] = React.useState(dropdownInputText || '');
   const dropdownRef = React.useRef();
   const {x, y, reference, floating, strategy} = useFloating({
     strategy: 'absolute',
@@ -57,10 +56,6 @@ export const Dropdown = ({
     middleware: [flip(), offset(parseInt(spaceXXSmall))],
   });
 
-  React.useEffect(() => {
-    setInputValue(dropdownInputText || '');
-  }, [dropdownInputText]);
-
   const onMenuToggle = (isOpen: boolean) => {
     isOpen ? onMenuOpen && onMenuOpen() : onMenuClose && onMenuClose();
   };
@@ -77,7 +72,7 @@ export const Dropdown = ({
             boxRef={reference}
             size={size}
             placeholder={placeholder}
-            value={inputValue}
+            value={dropdownInputText}
             classNames={{box: css.inputBox}}
             {...inputProps}
             iconRightName={isOpen ? 'angle-up' : 'angle-down'}

package/lib/components/InContextAlert/InContextAlert.js

@@ -8,6 +8,7 @@ var React = _interopRequireWildcard(require("react"));
 var _typography = require("../../types/typography");
 var _classify = require("../../utils/classify");
 var _Icon = require("../Icon");
+var _Link = require("../Link");
 var _Text = require("../Text");
 var _Truncate = require("../Truncate");
 var _InContextAlertModule = _interopRequireDefault(require("./InContextAlert.module.css"));
@@ -110,10 +111,10 @@ const InContextAlert = props => {
     line: 2
   }, children)), !!(actionText || dismissable) && /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.classify)(_InContextAlertModule.default.actionContainer, classNames?.actionContainer)
-  }, !!actionText && /*#__PURE__*/React.createElement(_Text.ButtonTextExtraSmall, {
-    className: _InContextAlertModule.default.actionText,
-    onClick: onAction
-  }, actionText), !!dismissable && /*#__PURE__*/React.createElement(_Icon.Icon, {
+  }, !!actionText && /*#__PURE__*/React.createElement(_Link.Link, {
+    onClick: onAction,
+    color: "primary"
+  }, actionText), !!dismissable && /*#__PURE__*/React.createElement(_Icon.ClickableIcon, {
     color: _typography.TEXT_COLORS.primary,
     name: "close",
     size: "small",

package/lib/components/InContextAlert/InContextAlert.js.flow

@@ -5,8 +5,9 @@ import * as React from 'react';
 import {TEXT_COLORS} from '../../types/typography';
 import {classify} from '../../utils/classify';
 import type {IconType} from '../Icon';
-import {Icon} from '../Icon';
-import {ButtonTextExtraSmall, SubTitleExtraSmall} from '../Text';
+import {ClickableIcon, Icon} from '../Icon';
+import {Link} from '../Link';
+import {SubTitleExtraSmall} from '../Text';
 import {Truncate} from '../Truncate';
 
 import css from './InContextAlert.module.css';
@@ -172,15 +173,12 @@ export const InContextAlert = (props: InContextAlertProps): React.Node => {
               )}
             >
               {!!actionText && (
-                <ButtonTextExtraSmall
-                  className={css.actionText}
-                  onClick={onAction}
-                >
+                <Link onClick={onAction} color="primary">
                   {actionText}
-                </ButtonTextExtraSmall>
+                </Link>
               )}
               {!!dismissable && (
-                <Icon
+                <ClickableIcon
                   color={TEXT_COLORS.primary}
                   name="close"
                   size="small"

package/lib/components/InContextAlert/InContextAlert.module.css

@@ -65,7 +65,6 @@
 }
 
 .closeIcon {
-  cursor: pointer;
   margin-left: auto;
 }
 
@@ -75,9 +74,3 @@
   align-items: center;
   gap: spaceSmall;
 }
-
-.actionText {
-  cursor: pointer;
-  text-decoration: underline;
-  white-space: nowrap;
-}

package/lib/components/Link/Link.js.flow

@@ -66,7 +66,7 @@ export type LinkProps = {
   underline?: boolean,
   target?: AnchorTarget,
   href?: string,
-  onClick?: (SyntheticEvent<HTMLElement>) => mixed,
+  onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
   tabIndex?: number,
   disabled?: boolean,
   ...

package/lib/components/SearchInput/SearchInput.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SearchInput = void 0;
 var React = _interopRequireWildcard(require("react"));
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _CircularLoader = require("../CircularLoader");
 var _Input = require("../Input");
 var _SearchInputModule = _interopRequireDefault(require("./SearchInput.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -19,26 +21,39 @@ const SearchInput = _ref => {
     placeholder = 'Search...',
     classNames,
     onClear,
+    isLoading,
+    size,
+    iconLeftName = 'magnifying-glass',
     ...searchInputProps
   } = _ref;
   const handleClearClick = () => {
     onClear?.();
   };
-  return /*#__PURE__*/React.createElement(_Input.Input, _extends({
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_SearchInputModule.default.searchInputWrapper, classNames?.wrapper)
+  }, /*#__PURE__*/React.createElement(_Input.Input, _extends({
     type: "text"
   }, searchInputProps, {
     classNames: {
-      ...classNames,
       iconRight: value && !(disabled || locked) ? _SearchInputModule.default.clickable : '',
-      iconLeft: value && !disabled ? _SearchInputModule.default.primaryText : ''
+      iconLeft: value && !disabled ? _SearchInputModule.default.primaryText : '',
+      box: classNames?.box
     },
     placeholder: placeholder,
     value: value,
     disabled: disabled,
     locked: locked,
-    iconLeftName: "magnifying-glass",
+    iconLeftName: iconLeftName,
+    size: size,
     iconRightName: value && !(disabled || locked) ? 'xmark' : 'fw',
     onIconRightClick: handleClearClick
-  }));
+  })), isLoading && /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_SearchInputModule.default.loaderContainer, {
+      [_SearchInputModule.default.small]: size === 'small'
+    })
+  }, /*#__PURE__*/React.createElement(_CircularLoader.CircularLoader, {
+    colorToken: "colorFillPrimary",
+    size: size
+  })));
 };
 exports.SearchInput = SearchInput;

package/lib/components/SearchInput/SearchInput.js.flow

@@ -2,18 +2,25 @@
 
 import * as React from 'react';
 
+import classify from '../../utils/classify';
+import {CircularLoader} from '../CircularLoader';
 import type {InputProps} from '../Input';
 import {Input} from '../Input';
 
 import css from './SearchInput.module.css';
 
 
-type ClassNames = $ReadOnly<{box?: string, iconLeft?: string}>;
+type ClassNames = $ReadOnly<{
+  wrapper?: string,
+  box?: string,
+  iconLeft?: string,
+}>;
 
 export type SearchInputProps = {
   ...InputProps,
   classNames?: ClassNames,
   onClear?: () => void,
+  isLoading?: boolean,
 };
 
 export const SearchInput = ({
@@ -23,6 +30,9 @@ export const SearchInput = ({
   placeholder = 'Search...',
   classNames,
   onClear,
+  isLoading,
+  size,
+  iconLeftName = 'magnifying-glass',
   ...searchInputProps
 }: SearchInputProps): React.Node => {
   const handleClearClick = () => {
@@ -30,21 +40,33 @@ export const SearchInput = ({
   };
 
   return (
-    <Input
-      type="text"
-      {...searchInputProps}
-      classNames={{
-        ...classNames,
-        iconRight: value && !(disabled || locked) ? css.clickable : '',
-        iconLeft: value && !disabled ? css.primaryText : '',
-      }}
-      placeholder={placeholder}
-      value={value}
-      disabled={disabled}
-      locked={locked}
-      iconLeftName="magnifying-glass"
-      iconRightName={value && !(disabled || locked) ? 'xmark' : 'fw'}
-      onIconRightClick={handleClearClick}
-    />
+    <div className={classify(css.searchInputWrapper, classNames?.wrapper)}>
+      <Input
+        type="text"
+        {...searchInputProps}
+        classNames={{
+          iconRight: value && !(disabled || locked) ? css.clickable : '',
+          iconLeft: value && !disabled ? css.primaryText : '',
+          box: classNames?.box,
+        }}
+        placeholder={placeholder}
+        value={value}
+        disabled={disabled}
+        locked={locked}
+        iconLeftName={iconLeftName}
+        size={size}
+        iconRightName={value && !(disabled || locked) ? 'xmark' : 'fw'}
+        onIconRightClick={handleClearClick}
+      />
+      {isLoading && (
+        <div
+          className={classify(css.loaderContainer, {
+            [css.small]: size === 'small',
+          })}
+        >
+          <CircularLoader colorToken="colorFillPrimary" size={size} />
+        </div>
+      )}
+    </div>
   );
 };

package/lib/components/SearchInput/SearchInput.module.css

@@ -2,6 +2,23 @@
   colorTextPrimary
 ) from '../../styles/variables/_color.css';
 
+@value (
+  size42,
+  size34
+) from '../../styles/variables/_size.css';
+
+@value (
+  spaceXXSmall
+) from '../../styles/variables/_space.css';
+
+.searchInputWrapper {
+  display: flex;
+  position: relative;
+  align-items: end;
+  gap: spaceXXSmall;
+  height: fit-content;
+}
+
 .clickable {
   cursor: pointer;
 }
@@ -9,3 +26,19 @@
 .primaryText {
   color: colorTextPrimary;
 }
+
+.loaderContainer {
+  display: flex;
+  height: size42;
+  width: size42;
+  align-items: center;
+  justify-content: center;
+  align-items: center;
+  margin-right: calc((size42 * -1) - spaceXXSmall);
+}
+
+.loaderContainer.small {
+  height: size34;
+  width: size34;
+  margin-right: calc((size34 * -1) - spaceXXSmall);
+}

package/lib/components/Typeahead/Typeahead.js

@@ -29,11 +29,12 @@ const Typeahead = _ref => {
     menu,
     onMenuOpen,
     onMenuClose,
-    typeaheadInputText,
+    typeaheadInputText = '',
+    isLoading,
+    menuOpenOffset = 1,
     ...inputProps
   } = _ref;
   const typeaheadRef = React.useRef();
-  const [inputValue, setInputValue] = React.useState(typeaheadInputText || '');
   const [filteredOptions, setFilteredOptions] = React.useState(menu?.options);
   const {
     x,
@@ -47,28 +48,19 @@ const Typeahead = _ref => {
     whileElementsMounted: _reactDom.autoUpdate,
     middleware: [(0, _reactDom.flip)(), (0, _reactDom.offset)(parseInt(_space.spaceXXSmall))]
   });
-  const handleSelect = option => {
-    if (option?.key) {
-      onSelect && onSelect(option);
-      setInputValue(option.label);
-    }
-  };
-  React.useEffect(() => {
-    setInputValue(typeaheadInputText || '');
-  }, [typeaheadInputText]);
   const onMenuToggle = isOpen => {
     isOpen ? onMenuOpen && onMenuOpen() : onMenuClose && onMenuClose();
   };
   React.useEffect(() => {
     const optionsFiltered = menu?.options && menu.options.filter(option => {
-      if (!option.label || !inputValue) {
+      if (!option.label || !typeaheadInputText) {
         return true;
       } else {
-        return option.label.toLowerCase().indexOf(inputValue.toLowerCase()) !== -1;
+        return option.label.toLowerCase().indexOf(typeaheadInputText.toLowerCase()) !== -1;
       }
     });
     setFilteredOptions(optionsFiltered || []);
-  }, [inputValue]);
+  }, [typeaheadInputText, menu?.options]);
   return /*#__PURE__*/React.createElement(_clickAway.ClickAway, {
     onChange: onMenuToggle
   }, _ref2 => {
@@ -81,31 +73,38 @@ const Typeahead = _ref => {
     return /*#__PURE__*/React.createElement("div", {
       "data-testid": "Typeahead",
       className: (0, _classify.classify)(_TypeaheadModule.default.typeaheadContainer, classNames?.wrapper),
-      ref: typeaheadRef
+      ref: typeaheadRef,
+      onClickCapture: cancelNext
     }, /*#__PURE__*/React.createElement(_SearchInput.SearchInput, _extends({
       boxRef: reference,
       size: size,
       placeholder: placeholder,
-      value: inputValue,
+      value: typeaheadInputText,
       classNames: {
         box: classNames?.box
-      }
+      },
+      isLoading: isLoading
     }, inputProps, {
       onChange: e => {
         e.stopPropagation();
-        setInputValue(e.target.value);
         onSearch && onSearch(e);
-        if (e.target.value.length > 0) {
+        if (e.target.value.length >= menuOpenOffset) {
+          onOpen();
+        } else {
+          clickAway();
+        }
+      },
+      onFocus: _e => {
+        if (typeaheadInputText.length >= menuOpenOffset) {
           onOpen();
         } else {
           clickAway();
         }
       },
       onClear: _e => {
-        setInputValue('');
         onClear?.();
       }
-    })), isOpen && menu && filteredOptions && !!filteredOptions.length && /*#__PURE__*/React.createElement("div", {
+    })), isOpen && !isLoading && menu && filteredOptions && !!filteredOptions.length && /*#__PURE__*/React.createElement("div", {
       onClickCapture: cancelNext,
       ref: floating,
       style: {
@@ -118,7 +117,7 @@ const Typeahead = _ref => {
     }, /*#__PURE__*/React.createElement(_Menu.Menu, _extends({}, menu, {
       options: filteredOptions,
       onSelect: option => {
-        handleSelect(option);
+        onSelect && onSelect(option);
         if (!menu.optionsVariant || menu.optionsVariant === 'normal') {
           clickAway();
         }

package/lib/components/Typeahead/Typeahead.js.flow

@@ -37,6 +37,8 @@ export type TypeaheadProps = {
   typeaheadInputText?: string,
   menu?: MenuProps,
   onClear?: () => void,
+  isLoading?: boolean,
+  menuOpenOffset?: number,
 };
 
 export const Typeahead = ({
@@ -49,12 +51,12 @@ export const Typeahead = ({
   menu,
   onMenuOpen,
   onMenuClose,
-  typeaheadInputText,
+  typeaheadInputText = '',
+  isLoading,
+  menuOpenOffset = 1,
   ...inputProps
 }: TypeaheadProps): React.Node => {
   const typeaheadRef = React.useRef();
-
-  const [inputValue, setInputValue] = React.useState(typeaheadInputText || '');
   const [filteredOptions, setFilteredOptions] = React.useState(menu?.options);
 
   const {x, y, reference, floating, strategy} = useFloating({
@@ -64,17 +66,6 @@ export const Typeahead = ({
     middleware: [flip(), offset(parseInt(spaceXXSmall))],
   });
 
-  const handleSelect = (option?: MenuOption) => {
-    if (option?.key) {
-      onSelect && onSelect(option);
-      setInputValue(option.label);
-    }
-  };
-
-  React.useEffect(() => {
-    setInputValue(typeaheadInputText || '');
-  }, [typeaheadInputText]);
-
   const onMenuToggle = (isOpen: boolean) => {
     isOpen ? onMenuOpen && onMenuOpen() : onMenuClose && onMenuClose();
   };
@@ -83,16 +74,18 @@ export const Typeahead = ({
     const optionsFiltered =
       menu?.options &&
       menu.options.filter((option) => {
-        if (!option.label || !inputValue) {
+        if (!option.label || !typeaheadInputText) {
           return true;
         } else {
           return (
-            option.label.toLowerCase().indexOf(inputValue.toLowerCase()) !== -1
+            option.label
+              .toLowerCase()
+              .indexOf(typeaheadInputText.toLowerCase()) !== -1
           );
         }
       });
     setFilteredOptions(optionsFiltered || []);
-  }, [inputValue]);
+  }, [typeaheadInputText, menu?.options]);
 
   return (
     <ClickAway onChange={onMenuToggle}>
@@ -101,31 +94,41 @@ export const Typeahead = ({
           data-testid="Typeahead"
           className={classify(css.typeaheadContainer, classNames?.wrapper)}
           ref={typeaheadRef}
+          onClickCapture={cancelNext}
         >
           <SearchInput
             boxRef={reference}
             size={size}
             placeholder={placeholder}
-            value={inputValue}
+            value={typeaheadInputText}
             classNames={{box: classNames?.box}}
+            isLoading={isLoading}
             {...inputProps}
             onChange={(e) => {
               e.stopPropagation();
-              setInputValue(e.target.value);
               onSearch && onSearch(e);
-              if (e.target.value.length > 0) {
+              if (e.target.value.length >= menuOpenOffset) {
+                onOpen();
+              } else {
+                clickAway();
+              }
+            }}
+            onFocus={(_e) => {
+              if (typeaheadInputText.length >= menuOpenOffset) {
                 onOpen();
               } else {
                 clickAway();
               }
             }}
             onClear={(_e) => {
-              setInputValue('');
               onClear?.();
             }}
           />
-
-          {isOpen && menu && filteredOptions && !!filteredOptions.length && (
+          {isOpen &&
+            !isLoading &&
+            menu &&
+            filteredOptions &&
+            !!filteredOptions.length && (
             <div
               onClickCapture={cancelNext}
               ref={floating}
@@ -141,10 +144,10 @@ export const Typeahead = ({
                 {...menu}
                 options={filteredOptions}
                 onSelect={(option) => {
-                  handleSelect(option);
+                  onSelect && onSelect(option);
                   if (
                     !menu.optionsVariant ||
-                    menu.optionsVariant === 'normal'
+                      menu.optionsVariant === 'normal'
                   ) {
                     clickAway();
                   }

package/lib/components/Typeahead/Typeahead.module.css

@@ -7,4 +7,5 @@
   position: relative;
   flex-flow: column;
   width: sizeFluid;
+  height: fit-content;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {