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

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

@@ -9,10 +9,14 @@ import {MenuOptionButton} from './MenuOptionButton';
 import css from './Menu.module.css';
 
 
-type ClassNames = $ReadOnly<{wrapper?: string, option?: string}>;
+type ClassNames = $ReadOnly<{
+  wrapper?: string,
+  option?: string,
+  groupTitle?: string,
+}>;
 
 export type MenuOption = {
-  key?: string,
+  key: string,
   label?: string,
   secondaryLabel?: string,
   customComponent?: React.Node,
@@ -22,38 +26,48 @@ export type MenuOption = {
   iconRightType?: IconType,
   disabled?: boolean,
   optionSize?: MenuSizeTypes,
+  optionVariant?: MenuOptionsVariant,
 };
 
 // Render first available option set
 
-export type MenuProps = {
+export type BaseMenuProps = {
   onSelect?: (option: MenuOption) => mixed,
-  selectedOption?: MenuOption,
+  selectedOption?: ?MenuOption,
+  optionsVariant?: MenuOptionsVariant,
+  selectedKeys?: Array<string>,
   classNames?: ClassNames,
   size?: MenuSizeTypes,
   width?: string,
   menuDisabled?: boolean,
   isFluid?: boolean,
-  ...MenuOptionTypes,
+};
+
+export type MenuOptionTypes = {
+  options?: Array<MenuOption>,
+  composeOptions?: Array<Array<MenuOption>>,
+  groupTitleOptions?: Array<MenuGroupTitleOption>,
 };
 
 export type MenuSizeTypes = 'medium' | 'small';
+export type MenuOptionsVariant = 'checkbox' | 'radio' | 'normal';
 
 export type MenuGroupTitleOption = {
   groupTitle?: React.Node,
   options?: Array<MenuOption>,
+  showLineDivider?: boolean,
 };
 
-export type MenuOptionTypes = {
-  options?: Array<MenuOption>,
-  composeOptions?: Array<Array<MenuOption>>,
-  groupTitleOptions?: Array<MenuGroupTitleOption>,
+export type MenuProps = {
+  ...BaseMenuProps,
+  ...MenuOptionTypes,
 };
 
 const RenderOption = ({
   options,
   composeOptions,
   groupTitleOptions,
+  classNames,
   ...restProps
 }: MenuProps): React.Node => {
   if (options && Array.isArray(options) && options.length) {
@@ -61,7 +75,11 @@ const RenderOption = ({
       <>
         {options.map((option) => (
           <React.Fragment key={option.key}>
-            <MenuOptionButton option={option} {...restProps} />
+            <MenuOptionButton
+              option={option}
+              classNames={classNames}
+              {...restProps}
+            />
           </React.Fragment>
         ))}
       </>
@@ -79,7 +97,11 @@ const RenderOption = ({
           <span className={css.menuDivider} key={index}>
             {composeMenuOptions.map((option) => (
               <React.Fragment key={option.key}>
-                <MenuOptionButton option={option} {...restProps} />
+                <MenuOptionButton
+                  option={option}
+                  classNames={classNames}
+                  {...restProps}
+                />
               </React.Fragment>
             ))}
           </span>
@@ -98,14 +120,23 @@ const RenderOption = ({
           // eslint-disable-next-line react/no-array-index-key
           <React.Fragment key={index}>
             {!!optionsGroup.groupTitle && (
-              <div className={css.groupTitleWrapper}>
+              <div
+                className={classify(
+                  css.groupTitleWrapper,
+                  classNames?.groupTitle,
+                )}
+              >
                 {optionsGroup.groupTitle}
               </div>
             )}
 
             {optionsGroup.options?.map((option) => (
               <React.Fragment key={option.key}>
-                <MenuOptionButton option={option} {...restProps} />
+                <MenuOptionButton
+                  option={option}
+                  classNames={classNames}
+                  {...restProps}
+                />
               </React.Fragment>
             ))}
           </React.Fragment>

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,
@@ -33,15 +37,22 @@ const MenuOptionButton = props => {
     iconRight,
     iconRightType,
     disabled,
-    optionSize
+    optionSize,
+    optionVariant = optionsVariant
   } = 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 +62,16 @@ const MenuOptionButton = props => {
     disabled: menuDisabled || disabled,
     onClick: () => onSelect && onSelect(option),
     autoFocus: selectedOption?.key === key
-  }, !!iconLeft && /*#__PURE__*/React.createElement(_Icon.Icon, {
+  }, optionVariant === 'checkbox' && /*#__PURE__*/React.createElement(_Checkbox.Checkbox, {
+    tabIndex: -1,
+    disabled: menuDisabled || disabled,
+    checked: isSelected()
+  }), optionVariant === '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,
@@ -38,8 +40,16 @@ export const MenuOptionButton = (props: MenuOptionProps): React.Node => {
     iconRightType,
     disabled,
     optionSize,
+    optionVariant = optionsVariant,
   } = 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 +60,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 +73,21 @@ export const MenuOptionButton = (props: MenuOptionProps): React.Node => {
       onClick={() => onSelect && onSelect(option)}
       autoFocus={selectedOption?.key === key}
     >
+      {optionVariant === 'checkbox' && (
+        <Checkbox
+          tabIndex={-1}
+          disabled={menuDisabled || disabled}
+          checked={isSelected()}
+        />
+      )}
+      {optionVariant === '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/Tooltip/Tooltip.js

@@ -47,6 +47,7 @@ const Tooltip = _ref => {
     strategy,
     context
   } = (0, _reactDomInteractions.useFloating)({
+    strategy: 'fixed',
     placement,
     open,
     onOpenChange: setOpen,

package/lib/components/Tooltip/Tooltip.js.flow

@@ -85,6 +85,7 @@ export const Tooltip = ({
 }: TooltipProps): React.Node => {
   const [open, setOpen] = React.useState(false);
   const {x, y, reference, floating, strategy, context} = useFloating({
+    strategy: 'fixed',
     placement,
     open,
     onOpenChange: setOpen,

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;