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

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 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)
 
 

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

@@ -30,6 +30,8 @@ const Typeahead = _ref => {
     onMenuOpen,
     onMenuClose,
     typeaheadInputText = '',
+    isLoading,
+    menuOpenOffset = 1,
     ...inputProps
   } = _ref;
   const typeaheadRef = React.useRef();
@@ -58,7 +60,7 @@ const Typeahead = _ref => {
       }
     });
     setFilteredOptions(optionsFiltered || []);
-  }, [typeaheadInputText]);
+  }, [typeaheadInputText, menu?.options]);
   return /*#__PURE__*/React.createElement(_clickAway.ClickAway, {
     onChange: onMenuToggle
   }, _ref2 => {
@@ -71,7 +73,8 @@ 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,
@@ -79,12 +82,20 @@ const Typeahead = _ref => {
       value: typeaheadInputText,
       classNames: {
         box: classNames?.box
-      }
+      },
+      isLoading: isLoading
     }, inputProps, {
       onChange: e => {
         e.stopPropagation();
         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();
@@ -93,7 +104,7 @@ const Typeahead = _ref => {
       onClear: _e => {
         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: {

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 = ({
@@ -50,6 +52,8 @@ export const Typeahead = ({
   onMenuOpen,
   onMenuClose,
   typeaheadInputText = '',
+  isLoading,
+  menuOpenOffset = 1,
   ...inputProps
 }: TypeaheadProps): React.Node => {
   const typeaheadRef = React.useRef();
@@ -81,7 +85,7 @@ export const Typeahead = ({
         }
       });
     setFilteredOptions(optionsFiltered || []);
-  }, [typeaheadInputText]);
+  }, [typeaheadInputText, menu?.options]);
 
   return (
     <ClickAway onChange={onMenuToggle}>
@@ -90,6 +94,7 @@ export const Typeahead = ({
           data-testid="Typeahead"
           className={classify(css.typeaheadContainer, classNames?.wrapper)}
           ref={typeaheadRef}
+          onClickCapture={cancelNext}
         >
           <SearchInput
             boxRef={reference}
@@ -97,11 +102,19 @@ export const Typeahead = ({
             placeholder={placeholder}
             value={typeaheadInputText}
             classNames={{box: classNames?.box}}
+            isLoading={isLoading}
             {...inputProps}
             onChange={(e) => {
               e.stopPropagation();
               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();
@@ -111,8 +124,11 @@ export const Typeahead = ({
               onClear?.();
             }}
           />
-
-          {isOpen && menu && filteredOptions && !!filteredOptions.length && (
+          {isOpen &&
+            !isLoading &&
+            menu &&
+            filteredOptions &&
+            !!filteredOptions.length && (
             <div
               onClickCapture={cancelNext}
               ref={floating}
@@ -131,7 +147,7 @@ export const Typeahead = ({
                   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.5",
+  "version": "0.1.6",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {