@spaced-out/ui-design-system 0.0.67 → 0.1.0

package/lib/components/Menu/Menu.module.css

@@ -155,6 +155,18 @@
   color: colorTextPrimary;
 }
 
+.option:focus-within {
+  background: colorFillSecondary;
+  outline: none;
+  color: colorTextPrimary;
+}
+
+.option.selected {
+  background: colorFillSecondary;
+  outline: none;
+  color: colorTextPrimary;
+}
+
 .option:focus .optionTextSecondaryLabel {
   color: colorTextSecondary;
 }
@@ -187,12 +199,17 @@
   padding-bottom: spaceNone;
 }
 
+.optionsWrapper {
+  display: flex;
+  flex-flow: column;
+}
+
 .groupTitleWrapper {
   composes: formLabelSmall from '../../styles/typography.module.css';
   display: flex;
-  margin-bottom: spaceXSmall;
+  padding-bottom: spaceXSmall;
   padding-left: spaceSmall;
   padding-right: calc(spaceXSmall / 2);
   color: colorTextTertiary;
-  margin-top: spaceSmall;
+  padding-top: spaceSmall;
 }

package/lib/components/Menu/MenuOptionButton.js

@@ -7,7 +7,9 @@ exports.MenuOptionButton = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classify = require("../../utils/classify");
 var _Button = require("../Button");
+var _Checkbox = require("../Checkbox");
 var _Icon = require("../Icon");
+var _RadioButton = require("../RadioButton");
 var _Truncate = require("../Truncate");
 var _MenuModule = _interopRequireDefault(require("./Menu.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -21,7 +23,9 @@ const MenuOptionButton = props => {
     onSelect,
     selectedOption,
     menuDisabled,
-    classNames
+    classNames,
+    optionsVariant = 'normal',
+    selectedKeys
   } = props;
   const {
     key,
@@ -36,12 +40,18 @@ const MenuOptionButton = props => {
     optionSize
   } = option;
   const [buttonSize, setButtonSize] = React.useState(optionSize || size);
+  const isSelected = () => {
+    if (!selectedKeys || !Array.isArray(selectedKeys) || !selectedKeys.length) {
+      return false;
+    }
+    return selectedKeys.includes(option.key);
+  };
   React.useEffect(() => {
     setButtonSize(optionSize || size);
   }, [optionSize, size]);
   return /*#__PURE__*/React.createElement(_Button.UnstyledButton, {
     className: (0, _classify.classify)(_MenuModule.default.option, {
-      [_MenuModule.default.selected]: key === selectedOption?.key,
+      [_MenuModule.default.selected]: isSelected() || key === selectedOption?.key,
       [_MenuModule.default.optionSmall]: buttonSize === 'small',
       [_MenuModule.default.optionMedium]: buttonSize === 'medium',
       [_MenuModule.default.disabled]: menuDisabled || disabled,
@@ -51,7 +61,16 @@ const MenuOptionButton = props => {
     disabled: menuDisabled || disabled,
     onClick: () => onSelect && onSelect(option),
     autoFocus: selectedOption?.key === key
-  }, !!iconLeft && /*#__PURE__*/React.createElement(_Icon.Icon, {
+  }, optionsVariant === 'checkbox' && /*#__PURE__*/React.createElement(_Checkbox.Checkbox, {
+    tabIndex: -1,
+    disabled: menuDisabled || disabled,
+    checked: isSelected()
+  }), optionsVariant === 'radio' && /*#__PURE__*/React.createElement(_RadioButton.RadioButton, {
+    disabled: menuDisabled || disabled,
+    value: option.key,
+    selectedValue: selectedKeys?.[0],
+    tabIndex: -1
+  }), !!iconLeft && /*#__PURE__*/React.createElement(_Icon.Icon, {
     name: iconLeft,
     type: iconLeftType,
     size: "small",

package/lib/components/Menu/MenuOptionButton.js.flow

@@ -3,30 +3,32 @@ import * as React from 'react';
 
 import {classify} from '../../utils/classify';
 import {UnstyledButton} from '../Button';
+import {Checkbox} from '../Checkbox';
 import {Icon} from '../Icon';
+import {RadioButton} from '../RadioButton';
 import {Truncate} from '../Truncate';
 
-import type {MenuOption} from './Menu';
+import type {BaseMenuProps, MenuOption} from './Menu';
 
 import css from './Menu.module.css';
 
 
-type ClassNames = $ReadOnly<{wrapper?: string, option?: string}>;
-
 export type MenuOptionProps = {
+  ...BaseMenuProps,
   option: MenuOption,
-  onSelect?: (option: MenuOption) => mixed,
-  selectedOption?: MenuOption,
-  classNames?: ClassNames,
-  size?: 'medium' | 'small',
-  width?: string,
-  menuDisabled?: boolean,
-  isFluid?: boolean,
 };
 
 export const MenuOptionButton = (props: MenuOptionProps): React.Node => {
-  const {option, size, onSelect, selectedOption, menuDisabled, classNames} =
-    props;
+  const {
+    option,
+    size,
+    onSelect,
+    selectedOption,
+    menuDisabled,
+    classNames,
+    optionsVariant = 'normal',
+    selectedKeys,
+  } = props;
   const {
     key,
     label,
@@ -40,6 +42,13 @@ export const MenuOptionButton = (props: MenuOptionProps): React.Node => {
     optionSize,
   } = option;
   const [buttonSize, setButtonSize] = React.useState(optionSize || size);
+  const isSelected = () => {
+    if (!selectedKeys || !Array.isArray(selectedKeys) || !selectedKeys.length) {
+      return false;
+    }
+
+    return selectedKeys.includes(option.key);
+  };
 
   React.useEffect(() => {
     setButtonSize(optionSize || size);
@@ -50,7 +59,7 @@ export const MenuOptionButton = (props: MenuOptionProps): React.Node => {
       className={classify(
         css.option,
         {
-          [css.selected]: key === selectedOption?.key,
+          [css.selected]: isSelected() || key === selectedOption?.key,
           [css.optionSmall]: buttonSize === 'small',
           [css.optionMedium]: buttonSize === 'medium',
           [css.disabled]: menuDisabled || disabled,
@@ -63,6 +72,21 @@ export const MenuOptionButton = (props: MenuOptionProps): React.Node => {
       onClick={() => onSelect && onSelect(option)}
       autoFocus={selectedOption?.key === key}
     >
+      {optionsVariant === 'checkbox' && (
+        <Checkbox
+          tabIndex={-1}
+          disabled={menuDisabled || disabled}
+          checked={isSelected()}
+        />
+      )}
+      {optionsVariant === 'radio' && (
+        <RadioButton
+          disabled={menuDisabled || disabled}
+          value={option.key}
+          selectedValue={selectedKeys?.[0]}
+          tabIndex={-1}
+        />
+      )}
       {!!iconLeft && (
         <Icon
           name={iconLeft}

package/lib/components/RadioButton/RadioButton.js

@@ -24,6 +24,7 @@ const RadioButton = _ref => {
     align = 'vertical',
     className,
     error = false,
+    tabIndex = 0,
     ...props
   } = _ref;
   const radioInput = /*#__PURE__*/React.createRef();
@@ -61,7 +62,7 @@ const RadioButton = _ref => {
     ref: radioInput,
     onChange: onChangeHandler,
     onKeyDown: onKeyDownHandler,
-    tabIndex: disabled ? '-1' : 0,
+    tabIndex: disabled ? -1 : tabIndex,
     name: name,
     value: value || ''
   }, props)), React.Children.count(children) > 0 && /*#__PURE__*/React.createElement(_Text.FormLabelMedium, {

package/lib/components/RadioButton/RadioButton.js.flow

@@ -26,6 +26,7 @@ export type RadioButtonProps = {
   className?: string,
   error?: boolean,
   onChange?: (newValue: string) => mixed,
+  tabIndex?: number,
 };
 
 export const RadioButton = ({
@@ -39,6 +40,7 @@ export const RadioButton = ({
   align = 'vertical',
   className,
   error = false,
+  tabIndex = 0,
   ...props
 }: RadioButtonProps): React.Node => {
   const radioInput = React.createRef<HTMLInputElement>();
@@ -87,7 +89,7 @@ export const RadioButton = ({
         ref={radioInput}
         onChange={onChangeHandler}
         onKeyDown={onKeyDownHandler}
-        tabIndex={disabled ? '-1' : 0}
+        tabIndex={disabled ? -1 : tabIndex}
         name={name}
         value={value || ''}
         {...props}

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

@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 
+import type {InputProps} from '../Input';
 import {Input} from '../Input';
 
 import css from './SearchInput.module.css';
@@ -10,29 +11,8 @@ import css from './SearchInput.module.css';
 type ClassNames = $ReadOnly<{box?: string, iconLeft?: string}>;
 
 export type SearchInputProps = {
+  ...InputProps,
   classNames?: ClassNames,
-  name?: string,
-  placeholder?: string,
-  disabled?: boolean,
-  locked?: boolean,
-  value?: string,
-  error?: boolean,
-  errorText?: string,
-  label?: string | React.Node,
-  helperText?: string | React.Node,
-  size?: 'medium' | 'small',
-  required?: boolean,
-  boxRef?: (?HTMLElement) => mixed,
-  onChange?: (
-    evt: SyntheticInputEvent<HTMLInputElement>,
-    isEnter?: boolean,
-  ) => mixed,
-  onFocus?: (e: SyntheticInputEvent<HTMLInputElement>) => mixed,
-  onBlur?: (e: SyntheticInputEvent<HTMLInputElement>) => mixed,
-  onKeyDown?: (e: SyntheticKeyboardEvent<HTMLInputElement>) => mixed,
-  onPaste?: (e: ClipboardEvent) => mixed,
-  onPaste?: (e: ClipboardEvent) => mixed,
-  onContainerClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
   onClear?: () => void,
 };
 

package/lib/components/Tabs/Tab/Tab.js

@@ -63,7 +63,7 @@ const Tab = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
     style: {
       width
     },
-    tabIndex: disabled ? '-1' : 0,
+    tabIndex: disabled ? -1 : 0,
     ref: tabRef
   }), /*#__PURE__*/React.createElement("span", {
     className: (0, _classify.classify)(_TabModule.default.iconTextWrap, {

package/lib/components/Tabs/Tab/Tab.js.flow

@@ -83,7 +83,7 @@ export const Tab: React$AbstractComponent<TabProps, HTMLButtonElement> =
           )}
           onClick={onClickHandler}
           style={{width}}
-          tabIndex={disabled ? '-1' : 0}
+          tabIndex={disabled ? -1 : 0}
           ref={tabRef}
         >
           <span

package/lib/components/Tabs/TabList/TabList.js

@@ -74,10 +74,7 @@ const TabList = _ref => {
         label
       });
     };
-    const selectedOption = {
-      key: selectedTab?.tabId,
-      label: selectedTab?.label || ''
-    };
+    const selectedKeys = [selectedTab?.tabId || ''];
     const isMenuOptionSelected = (() => {
       for (let i = 0; i < menuOptions.length; i++) {
         if (menuOptions[i].key === selectedTab?.tabId) {
@@ -102,7 +99,7 @@ const TabList = _ref => {
           isFluid: false,
           menuDisabled: false,
           options: menuOptions,
-          selectedOption,
+          selectedKeys,
           width: menuWidth
         }
       }

package/lib/components/Tabs/TabList/TabList.js.flow

@@ -15,10 +15,10 @@ type ClassNames = $ReadOnly<{wrapper?: string}>;
 
 export type TabListProps = {
   classNames?: ClassNames,
-  onSelect?: ({tabId?: string, label?: string}) => mixed,
+  onSelect?: ({tabId: string, label?: string}) => mixed,
   children?: React.Node,
   size?: 'medium',
-  selectedTab?: {tabId?: string, label?: string},
+  selectedTab?: {tabId: string, label?: string},
   menuWidth?: string,
 };
 
@@ -80,10 +80,7 @@ export const TabList = ({
     const menuOnSelect = ({key, label}) => {
       onSelect && onSelect({tabId: key, label});
     };
-    const selectedOption = {
-      key: selectedTab?.tabId,
-      label: selectedTab?.label || '',
-    };
+    const selectedKeys = [selectedTab?.tabId || ''];
 
     const isMenuOptionSelected = (() => {
       for (let i = 0; i < menuOptions.length; i++) {
@@ -109,7 +106,7 @@ export const TabList = ({
             isFluid: false,
             menuDisabled: false,
             options: menuOptions,
-            selectedOption,
+            selectedKeys,
             width: menuWidth,
           },
         }}

package/lib/components/Typeahead/Typeahead.js

@@ -20,20 +20,21 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 const Typeahead = _ref => {
   let {
-    options,
-    size,
+    size = 'medium',
     classNames,
     placeholder = 'Select...',
     onSelect,
     onSearch,
-    selectedOption,
-    menuSize,
     onClear,
+    menu,
+    onMenuOpen,
+    onMenuClose,
+    typeaheadInputText,
     ...inputProps
   } = _ref;
   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,
@@ -53,12 +54,13 @@ const Typeahead = _ref => {
     }
   };
   React.useEffect(() => {
-    if (selectedOption?.key) {
-      setInputValue(selectedOption.label);
-    }
-  }, [selectedOption]);
+    setInputValue(typeaheadInputText || '');
+  }, [typeaheadInputText]);
+  const onMenuToggle = isOpen => {
+    isOpen ? onMenuOpen && onMenuOpen() : onMenuClose && onMenuClose();
+  };
   React.useEffect(() => {
-    const optionsFiltered = options && options.filter(option => {
+    const optionsFiltered = menu?.options && menu.options.filter(option => {
       if (!option.label || !inputValue) {
         return true;
       } else {
@@ -67,7 +69,9 @@ const Typeahead = _ref => {
     });
     setFilteredOptions(optionsFiltered || []);
   }, [inputValue]);
-  return /*#__PURE__*/React.createElement(_clickAway.ClickAway, null, _ref2 => {
+  return /*#__PURE__*/React.createElement(_clickAway.ClickAway, {
+    onChange: onMenuToggle
+  }, _ref2 => {
     let {
       isOpen,
       onOpen,
@@ -101,7 +105,7 @@ const Typeahead = _ref => {
         setInputValue('');
         onClear?.();
       }
-    })), isOpen && filteredOptions && !!filteredOptions.length && /*#__PURE__*/React.createElement("div", {
+    })), isOpen && menu && filteredOptions && !!filteredOptions.length && /*#__PURE__*/React.createElement("div", {
       onClickCapture: cancelNext,
       ref: floating,
       style: {
@@ -111,15 +115,16 @@ const Typeahead = _ref => {
         width: _size.sizeFluid,
         backgroundColor: _color.colorBackgroundTertiary
       }
-    }, /*#__PURE__*/React.createElement(_Menu.Menu, {
-      isFluid: true,
+    }, /*#__PURE__*/React.createElement(_Menu.Menu, _extends({}, menu, {
       options: filteredOptions,
       onSelect: option => {
         handleSelect(option);
-        clickAway();
+        if (!menu.optionsVariant || menu.optionsVariant === 'normal') {
+          clickAway();
+        }
       },
-      size: menuSize || size
-    })));
+      size: menu.size || size
+    }))));
   });
 };
 exports.Typeahead = Typeahead;

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;