@spaced-out/ui-design-system 0.1.37-beta.1 → 0.1.37

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

@@ -42,125 +42,131 @@ export type TypeaheadProps = {
   ...
 };
 
-export const Typeahead = ({
-  size = 'medium',
-  classNames,
-  placeholder = 'Select...',
-  onSelect,
-  onSearch,
-  onClear,
-  menu,
-  onMenuOpen,
-  onMenuClose,
-  typeaheadInputText = '',
-  isLoading,
-  menuOpenOffset = 1,
-  ...inputProps
-}: TypeaheadProps): React.Node => {
-  const typeaheadRef = React.useRef();
-  const [filteredOptions, setFilteredOptions] = React.useState(menu?.options);
+export const Typeahead: React$AbstractComponent<
+  TypeaheadProps,
+  HTMLInputElement,
+> = React.forwardRef<TypeaheadProps, HTMLInputElement>(
+  (
+    {
+      size = 'medium',
+      classNames,
+      placeholder = 'Select...',
+      onSelect,
+      onSearch,
+      onClear,
+      menu,
+      onMenuOpen,
+      onMenuClose,
+      typeaheadInputText = '',
+      isLoading,
+      menuOpenOffset = 1,
+      ...inputProps
+    }: TypeaheadProps,
+    ref,
+  ): React.Node => {
+    const [filteredOptions, setFilteredOptions] = React.useState(menu?.options);
+    const {x, y, refs, strategy} = useFloating({
+      open: true,
+      strategy: 'absolute',
+      placement: 'bottom-start',
+      whileElementsMounted: autoUpdate,
+      middleware: [flip(), offset(parseInt(spaceXXSmall))],
+    });
 
-  const {x, y, refs, strategy} = useFloating({
-    open: true,
-    strategy: 'absolute',
-    placement: 'bottom-start',
-    whileElementsMounted: autoUpdate,
-    middleware: [flip(), offset(parseInt(spaceXXSmall))],
-  });
+    const onMenuToggle = (isOpen: boolean) => {
+      isOpen ? onMenuOpen && onMenuOpen() : onMenuClose && onMenuClose();
+    };
 
-  const onMenuToggle = (isOpen: boolean) => {
-    isOpen ? onMenuOpen && onMenuOpen() : onMenuClose && onMenuClose();
-  };
+    React.useEffect(() => {
+      const optionsFiltered =
+        menu?.options &&
+        menu.options.filter((option) => {
+          if (!option.label || !typeaheadInputText) {
+            return true;
+          } else {
+            return (
+              option.label
+                .toLowerCase()
+                .indexOf(typeaheadInputText.toLowerCase()) !== -1
+            );
+          }
+        });
+      setFilteredOptions(optionsFiltered || []);
+    }, [typeaheadInputText, menu?.options]);
 
-  React.useEffect(() => {
-    const optionsFiltered =
-      menu?.options &&
-      menu.options.filter((option) => {
-        if (!option.label || !typeaheadInputText) {
-          return true;
-        } else {
-          return (
-            option.label
-              .toLowerCase()
-              .indexOf(typeaheadInputText.toLowerCase()) !== -1
-          );
-        }
-      });
-    setFilteredOptions(optionsFiltered || []);
-  }, [typeaheadInputText, menu?.options]);
-
-  return (
-    <ClickAway onChange={onMenuToggle}>
-      {({isOpen, onOpen, cancelNext, clickAway}) => (
-        <div
-          data-testid="Typeahead"
-          className={classify(css.typeaheadContainer, classNames?.wrapper)}
-          ref={typeaheadRef}
-          onClickCapture={cancelNext}
-        >
-          <SearchInput
-            {...inputProps}
-            boxRef={refs.setReference}
-            size={size}
-            placeholder={placeholder}
-            value={typeaheadInputText}
-            classNames={{box: classNames?.box}}
-            isLoading={isLoading}
-            onChange={(e) => {
-              e.stopPropagation();
-              onSearch && onSearch(e);
-              if (e.target.value.length >= menuOpenOffset) {
-                onOpen();
-              } else {
-                clickAway();
-              }
-            }}
-            onFocus={(_e) => {
-              if (typeaheadInputText.length >= menuOpenOffset) {
-                onOpen();
-              } else {
-                clickAway();
-              }
-            }}
-            onClear={(_e) => {
-              onClear?.();
-            }}
-          />
-          {isOpen &&
-            !isLoading &&
-            menu &&
-            filteredOptions &&
-            !!filteredOptions.length && (
-            <div
-              onClickCapture={cancelNext}
-              ref={refs.setFloating}
-              style={{
-                position: strategy,
-                top: y ?? spaceNone,
-                left: x ?? spaceNone,
-                width: sizeFluid,
-                backgroundColor: colorBackgroundTertiary,
+    return (
+      <ClickAway onChange={onMenuToggle}>
+        {({isOpen, onOpen, cancelNext, clickAway}) => (
+          <div
+            data-testid="Typeahead"
+            className={classify(css.typeaheadContainer, classNames?.wrapper)}
+            onClickCapture={cancelNext}
+          >
+            <SearchInput
+              {...inputProps}
+              ref={ref}
+              boxRef={refs.setReference}
+              size={size}
+              placeholder={placeholder}
+              value={typeaheadInputText}
+              classNames={{box: classNames?.box}}
+              isLoading={isLoading}
+              onChange={(e) => {
+                e.stopPropagation();
+                onSearch && onSearch(e);
+                if (e.target.value.length >= menuOpenOffset) {
+                  onOpen();
+                } else {
+                  clickAway();
+                }
+              }}
+              onFocus={(_e) => {
+                if (typeaheadInputText.length >= menuOpenOffset) {
+                  onOpen();
+                } else {
+                  clickAway();
+                }
               }}
-            >
-              <Menu
-                {...menu}
-                options={filteredOptions}
-                onSelect={(option) => {
-                  onSelect && onSelect(option);
-                  if (
-                    !menu.optionsVariant ||
-                      menu.optionsVariant === 'normal'
-                  ) {
-                    clickAway();
-                  }
+              onClear={(_e) => {
+                onClear?.();
+              }}
+            />
+            {isOpen &&
+              !isLoading &&
+              menu &&
+              filteredOptions &&
+              !!filteredOptions.length && (
+              <div
+                onClickCapture={cancelNext}
+                ref={refs.setFloating}
+                style={{
+                  position: strategy,
+                  top: y ?? spaceNone,
+                  left: x ?? spaceNone,
+                  width: sizeFluid,
+                  backgroundColor: colorBackgroundTertiary,
                 }}
-                size={menu.size || size}
-                onTabOut={clickAway}
-              />
-            </div>
-          )}
-        </div>
-      )}
-    </ClickAway>
-  );
-};
+              >
+                <Menu
+                  {...menu}
+                  options={filteredOptions}
+                  onSelect={(option) => {
+                    onSelect && onSelect(option);
+                    if (
+                      !menu.optionsVariant ||
+                        menu.optionsVariant === 'normal'
+                    ) {
+                      clickAway();
+                    }
+                  }}
+                  size={menu.size || size}
+                  onTabOut={clickAway}
+                />
+              </div>
+            )}
+          </div>
+        )}
+      </ClickAway>
+    );
+  },
+);

package/lib/components/Typeahead/index.js

@@ -3,10 +3,25 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "Typeahead", {
-  enumerable: true,
-  get: function () {
-    return _Typeahead.Typeahead;
-  }
+var _SimpleTypeahead = require("./SimpleTypeahead");
+Object.keys(_SimpleTypeahead).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _SimpleTypeahead[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _SimpleTypeahead[key];
+    }
+  });
 });
-var _Typeahead = require("./Typeahead");
+var _Typeahead = require("./Typeahead");
+Object.keys(_Typeahead).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Typeahead[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Typeahead[key];
+    }
+  });
+});

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

@@ -1,4 +1,4 @@
 // @flow strict
 
-export type {TypeaheadProps} from './Typeahead';
-export {Typeahead} from './Typeahead';
+export * from './SimpleTypeahead';
+export * from './Typeahead';

package/lib/components/index.js

@@ -212,6 +212,17 @@ Object.keys(_FocusManager).forEach(function (key) {
     }
   });
 });
+var _FocusManagerWithArrowKeyNavigation = require("./FocusManagerWithArrowKeyNavigation");
+Object.keys(_FocusManagerWithArrowKeyNavigation).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _FocusManagerWithArrowKeyNavigation[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _FocusManagerWithArrowKeyNavigation[key];
+    }
+  });
+});
 var _Grid = require("./Grid");
 Object.keys(_Grid).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/components/index.js.flow

@@ -19,6 +19,7 @@ export * from './EmptyState';
 export * from './ErrorMessage';
 export * from './FileUpload';
 export * from './FocusManager';
+export * from './FocusManagerWithArrowKeyNavigation';
 export * from './Grid';
 export * from './Icon';
 export * from './InContextAlert';

package/package.json

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