@spaced-out/ui-design-system 0.0.68 → 0.1.1

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

@@ -17,7 +17,8 @@ import {sizeFluid} from '../../styles/variables/_size';
 import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
 import {classify} from '../../utils/classify';
 import {ClickAway} from '../../utils/click-away';
-import type {MenuOption} from '../Menu';
+import type {InputProps} from '../Input';
+import type {MenuOption, MenuProps} from '../Menu';
 import {Menu} from '../Menu';
 import {SearchInput} from '../SearchInput';
 
@@ -27,43 +28,34 @@ import css from './Typeahead.module.css';
 type ClassNames = $ReadOnly<{wrapper?: string, box?: string}>;
 
 export type TypeaheadProps = {
+  ...InputProps,
   classNames?: ClassNames,
   onSelect?: (option: MenuOption) => mixed,
   onSearch?: (evt: SyntheticInputEvent<HTMLInputElement>) => mixed,
-  onFocus?: (e: SyntheticInputEvent<HTMLInputElement>) => mixed,
-  onBlur?: (e: SyntheticInputEvent<HTMLInputElement>) => mixed,
-  name?: string,
-  disabled?: boolean,
-  placeholder?: string,
-  locked?: boolean,
-  error?: boolean,
-  errorText?: string,
-  label?: string | React.Node,
-  helperText?: string | React.Node,
-  size?: 'medium' | 'small',
-  required?: boolean,
-  options?: Array<MenuOption>,
-  selectedOption?: MenuOption,
-  menuSize?: 'medium' | 'small',
+  onMenuOpen?: () => mixed,
+  onMenuClose?: () => mixed,
+  typeaheadInputText?: string,
+  menu?: MenuProps,
   onClear?: () => void,
 };
 
 export const Typeahead = ({
-  options,
-  size,
+  size = 'medium',
   classNames,
   placeholder = 'Select...',
   onSelect,
   onSearch,
-  selectedOption,
-  menuSize,
   onClear,
+  menu,
+  onMenuOpen,
+  onMenuClose,
+  typeaheadInputText,
   ...inputProps
 }: TypeaheadProps): React.Node => {
   const typeaheadRef = React.useRef();
 
-  const [inputValue, setInputValue] = React.useState(selectedOption?.label);
-  const [filteredOptions, setFilteredOptions] = React.useState(options);
+  const [inputValue, setInputValue] = React.useState(typeaheadInputText || '');
+  const [filteredOptions, setFilteredOptions] = React.useState(menu?.options);
 
   const {x, y, reference, floating, strategy} = useFloating({
     strategy: 'absolute',
@@ -80,15 +72,17 @@ export const Typeahead = ({
   };
 
   React.useEffect(() => {
-    if (selectedOption?.key) {
-      setInputValue(selectedOption.label);
-    }
-  }, [selectedOption]);
+    setInputValue(typeaheadInputText || '');
+  }, [typeaheadInputText]);
+
+  const onMenuToggle = (isOpen: boolean) => {
+    isOpen ? onMenuOpen && onMenuOpen() : onMenuClose && onMenuClose();
+  };
 
   React.useEffect(() => {
     const optionsFiltered =
-      options &&
-      options.filter((option) => {
+      menu?.options &&
+      menu.options.filter((option) => {
         if (!option.label || !inputValue) {
           return true;
         } else {
@@ -101,7 +95,7 @@ export const Typeahead = ({
   }, [inputValue]);
 
   return (
-    <ClickAway>
+    <ClickAway onChange={onMenuToggle}>
       {({isOpen, onOpen, cancelNext, clickAway}) => (
         <div
           data-testid="Typeahead"
@@ -131,7 +125,7 @@ export const Typeahead = ({
             }}
           />
 
-          {isOpen && filteredOptions && !!filteredOptions.length && (
+          {isOpen && menu && filteredOptions && !!filteredOptions.length && (
             <div
               onClickCapture={cancelNext}
               ref={floating}
@@ -144,13 +138,18 @@ export const Typeahead = ({
               }}
             >
               <Menu
-                isFluid
+                {...menu}
                 options={filteredOptions}
                 onSelect={(option) => {
                   handleSelect(option);
-                  clickAway();
+                  if (
+                    !menu.optionsVariant ||
+                    menu.optionsVariant === 'normal'
+                  ) {
+                    clickAway();
+                  }
                 }}
-                size={menuSize || size}
+                size={menu.size || size}
               />
             </div>
           )}

package/lib/utils/menu.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTextLabelFromSelectedKeys = exports.getSelectedKeysFromSelectedOption = exports.getOptionsFromKeys = exports.getOptionFromKey = exports.getButtonLabelFromSelectedKeys = void 0;
+var React = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const getSelectedKeysFromSelectedOption = (currentOption, currentSelectedKeys) => {
+  if (!Array.isArray(currentSelectedKeys) || !currentOption?.key) {
+    return [];
+  }
+  let newSelectedKeys = [];
+  if (currentSelectedKeys.includes(currentOption.key)) {
+    newSelectedKeys = currentSelectedKeys.filter(item => item !== currentOption.key);
+  } else {
+    newSelectedKeys = [...currentSelectedKeys, currentOption.key];
+  }
+  return newSelectedKeys;
+};
+exports.getSelectedKeysFromSelectedOption = getSelectedKeysFromSelectedOption;
+const getTextLabelFromSelectedKeys = (currentSelectedKeys, options) => {
+  if (!Array.isArray(currentSelectedKeys) || !Array.isArray(options)) {
+    return '';
+  }
+  const selectedOptions = getOptionsFromKeys(options, currentSelectedKeys);
+  return selectedOptions.map(option => option.label).join(', ');
+};
+exports.getTextLabelFromSelectedKeys = getTextLabelFromSelectedKeys;
+const getButtonLabelFromSelectedKeys = (currentSelectedKeys, label) => {
+  if (!Array.isArray(currentSelectedKeys) || typeof label !== 'string' || !currentSelectedKeys.length) {
+    return label;
+  }
+  return `(${currentSelectedKeys.length}) ${label}`;
+};
+exports.getButtonLabelFromSelectedKeys = getButtonLabelFromSelectedKeys;
+const getOptionFromKey = (options, key) => {
+  if (!Array.isArray(options) || !key || !options.length) {
+    return null;
+  }
+  return options.find(option => option.key === key);
+};
+exports.getOptionFromKey = getOptionFromKey;
+const getOptionsFromKeys = (options, keys) => {
+  if (!Array.isArray(options) || !Array.isArray(keys) || !options.length || !keys.length) {
+    return [];
+  }
+  return options.filter(option => keys.includes(option.key));
+};
+exports.getOptionsFromKeys = getOptionsFromKeys;

package/lib/utils/menu.js.flow

@@ -0,0 +1,81 @@
+// @flow strict
+import * as React from 'react';
+
+import type {MenuOption} from '../components/Menu';
+
+
+export const getSelectedKeysFromSelectedOption = (
+  currentOption?: MenuOption,
+  currentSelectedKeys?: Array<string>,
+): Array<string> => {
+  if (!Array.isArray(currentSelectedKeys) || !currentOption?.key) {
+    return [];
+  }
+
+  let newSelectedKeys = [];
+
+  if (currentSelectedKeys.includes(currentOption.key)) {
+    newSelectedKeys = currentSelectedKeys.filter(
+      (item) => item !== currentOption.key,
+    );
+  } else {
+    newSelectedKeys = [...currentSelectedKeys, currentOption.key];
+  }
+
+  return newSelectedKeys;
+};
+
+export const getTextLabelFromSelectedKeys = (
+  currentSelectedKeys?: Array<string>,
+  options?: MenuOption[],
+): string => {
+  if (!Array.isArray(currentSelectedKeys) || !Array.isArray(options)) {
+    return '';
+  }
+
+  const selectedOptions = getOptionsFromKeys(options, currentSelectedKeys);
+
+  return selectedOptions.map((option) => option.label).join(', ');
+};
+
+export const getButtonLabelFromSelectedKeys = (
+  currentSelectedKeys?: Array<string>,
+  label?: React.Node,
+): React.Node => {
+  if (
+    !Array.isArray(currentSelectedKeys) ||
+    typeof label !== 'string' ||
+    !currentSelectedKeys.length
+  ) {
+    return label;
+  }
+
+  return `(${currentSelectedKeys.length}) ${label}`;
+};
+
+export const getOptionFromKey = (
+  options?: MenuOption[],
+  key?: string,
+): ?MenuOption => {
+  if (!Array.isArray(options) || !key || !options.length) {
+    return null;
+  }
+
+  return options.find((option) => option.key === key);
+};
+
+export const getOptionsFromKeys = (
+  options?: MenuOption[],
+  keys?: Array<string>,
+): Array<MenuOption> => {
+  if (
+    !Array.isArray(options) ||
+    !Array.isArray(keys) ||
+    !options.length ||
+    !keys.length
+  ) {
+    return [];
+  }
+
+  return options.filter((option) => keys.includes(option.key));
+};

package/package.json

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