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

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 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.0](https://github.com/spaced-out/ui-design-system/compare/v0.0.68...v0.1.0) (2023-03-31)
+
+
+### Features
+
+* ⚠️ menu component extension dropdown and typeahead refactor ⚠️ ([#86](https://github.com/spaced-out/ui-design-system/issues/86)) ([621e61c](https://github.com/spaced-out/ui-design-system/commit/621e61c33e45a507c8e5da1c42b075a30fb45331))
+
+
+### Bug Fixes
+
+* chip transition states ([f526338](https://github.com/spaced-out/ui-design-system/commit/f52633859e11facdc5ff5663026f26b0b0260c62))
+* color swatch fix ([77de191](https://github.com/spaced-out/ui-design-system/commit/77de191670d0538b09dea8d7a4a130416e5f9361))
+
 ### [0.0.68](https://github.com/spaced-out/ui-design-system/compare/v0.0.67...v0.0.68) (2023-03-30)
 
 

package/lib/components/ButtonDropdown/ButtonDropdown.js

@@ -29,7 +29,7 @@ exports.ANCHOR_POSITION_TYPE = ANCHOR_POSITION_TYPE;
 const ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
   let {
     anchorPosition = 'bottom-start',
-    size,
+    size = 'medium',
     onOptionSelect,
     menu,
     classNames,
@@ -103,7 +103,9 @@ const ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
     }, /*#__PURE__*/React.createElement(_Menu.Menu, _extends({}, menu, {
       onSelect: option => {
         onOptionSelect && onOptionSelect(option);
-        clickAway();
+        if (!menu.optionsVariant || menu.optionsVariant === 'normal') {
+          clickAway();
+        }
       },
       size: menu.size || size
     }))));

package/lib/components/ButtonDropdown/ButtonDropdown.js.flow

@@ -44,7 +44,7 @@ type ClassNames = $ReadOnly<{
 export type ButtonDropdownProps = {
   ...ButtonProps,
   classNames?: ClassNames,
-  menu: MenuProps,
+  menu?: MenuProps,
   anchorPosition?: AnchorType,
   onOptionSelect?: (option: MenuOption) => mixed,
   onMenuOpen?: () => mixed,
@@ -59,7 +59,7 @@ export const ButtonDropdown: React$AbstractComponent<
   (
     {
       anchorPosition = 'bottom-start',
-      size,
+      size = 'medium',
       onOptionSelect,
       menu,
       classNames,
@@ -138,7 +138,12 @@ export const ButtonDropdown: React$AbstractComponent<
                   {...menu}
                   onSelect={(option) => {
                     onOptionSelect && onOptionSelect(option);
-                    clickAway();
+                    if (
+                      !menu.optionsVariant ||
+                      menu.optionsVariant === 'normal'
+                    ) {
+                      clickAway();
+                    }
                   }}
                   size={menu.size || size}
                 />

package/lib/components/Checkbox/Checkbox.js

@@ -25,7 +25,8 @@ const Checkbox = _ref => {
     error = false,
     onChange,
     align,
-    classNames
+    classNames,
+    tabIndex = 0
   } = _ref;
   const checkboxInput = /*#__PURE__*/React.createRef();
   const handleOnChange = () => {
@@ -61,12 +62,12 @@ const Checkbox = _ref => {
       [_CheckboxModule.default.disabled]: disabled
     })
   }, /*#__PURE__*/React.createElement("input", {
+    tabIndex: disabled ? -1 : tabIndex,
     type: "checkbox",
     value: value,
     checked: checked,
     ref: checkboxInput,
     onChange: handleOnChange,
-    tabIndex: disabled ? '-1' : 0,
     className: (0, _classify.default)(_CheckboxModule.default.inputCheckbox),
     disabled: disabled,
     name: name

package/lib/components/Checkbox/Checkbox.js.flow

@@ -29,6 +29,7 @@ export type CheckboxProps = {
   onChange?: ({value: string, checked: boolean}) => mixed,
   align?: GroupAlign,
   classNames?: ClassNames,
+  tabIndex?: number,
 };
 
 export const Checkbox = ({
@@ -43,6 +44,7 @@ export const Checkbox = ({
   onChange,
   align,
   classNames,
+  tabIndex = 0,
 }: CheckboxProps): React.Node => {
   const checkboxInput = React.createRef<HTMLInputElement>();
 
@@ -90,12 +92,12 @@ export const Checkbox = ({
         })}
       >
         <input
+          tabIndex={disabled ? -1 : tabIndex}
           type="checkbox"
           value={value}
           checked={checked}
           ref={checkboxInput}
           onChange={handleOnChange}
-          tabIndex={disabled ? '-1' : 0}
           className={classify(css.inputCheckbox)}
           disabled={disabled}
           name={name}

package/lib/components/Chip/Chip.module.css

@@ -30,6 +30,7 @@
 
 .chipWrapper {
   composes: formLabelSmall from '../../styles/typography.module.css';
+  composes: motionEaseInEaseOut from '../../styles/animation.module.css';
   display: flex;
   background-color: colorNeutralLightest;
   align-items: center;

package/lib/components/Dropdown/Dropdown.js

@@ -20,18 +20,17 @@ 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 Dropdown = _ref => {
   let {
-    options,
-    composeOptions,
-    groupTitleOptions,
-    size,
+    size = 'medium',
     classNames,
     placeholder = 'Select...',
     onChange,
-    selectedOption,
-    menuSize,
+    menu,
+    onMenuOpen,
+    onMenuClose,
+    dropdownInputText,
     ...inputProps
   } = _ref;
-  const [inputValue, setInputValue] = React.useState(selectedOption?.label || '');
+  const [inputValue, setInputValue] = React.useState(dropdownInputText || '');
   const dropdownRef = React.useRef();
   const {
     x,
@@ -45,18 +44,15 @@ const Dropdown = _ref => {
     whileElementsMounted: _reactDom.autoUpdate,
     middleware: [(0, _reactDom.flip)(), (0, _reactDom.offset)(parseInt(_space.spaceXXSmall))]
   });
-  const handleSelect = option => {
-    if (option?.key) {
-      onChange && onChange(option);
-      setInputValue(option.label || '');
-    }
-  };
   React.useEffect(() => {
-    if (selectedOption?.key) {
-      setInputValue(selectedOption.label || '');
-    }
-  }, [selectedOption]);
-  return /*#__PURE__*/React.createElement(_clickAway.ClickAway, null, _ref2 => {
+    setInputValue(dropdownInputText || '');
+  }, [dropdownInputText]);
+  const onMenuToggle = isOpen => {
+    isOpen ? onMenuOpen && onMenuOpen() : onMenuClose && onMenuClose();
+  };
+  return /*#__PURE__*/React.createElement(_clickAway.ClickAway, {
+    onChange: onMenuToggle
+  }, _ref2 => {
     let {
       isOpen,
       onOpen,
@@ -82,7 +78,7 @@ const Dropdown = _ref => {
         e.stopPropagation();
         onOpen();
       }
-    })), isOpen && (options || composeOptions || groupTitleOptions) && /*#__PURE__*/React.createElement("div", {
+    })), isOpen && menu && /*#__PURE__*/React.createElement("div", {
       onClickCapture: cancelNext,
       ref: floating,
       style: {
@@ -92,17 +88,15 @@ const Dropdown = _ref => {
         width: _size.sizeFluid,
         backgroundColor: _color.colorBackgroundTertiary
       }
-    }, /*#__PURE__*/React.createElement(_Menu.Menu, {
-      isFluid: true,
-      options: options,
-      composeOptions: composeOptions,
-      groupTitleOptions: groupTitleOptions,
+    }, /*#__PURE__*/React.createElement(_Menu.Menu, _extends({}, menu, {
       onSelect: option => {
-        handleSelect(option);
-        clickAway();
+        onChange && onChange(option);
+        if (!menu.optionsVariant || menu.optionsVariant === 'normal') {
+          clickAway();
+        }
       },
-      size: menuSize || size
-    })));
+      size: menu.size || size
+    }))));
   });
 };
 exports.Dropdown = Dropdown;

package/lib/components/Dropdown/Dropdown.js.flow

@@ -17,8 +17,9 @@ 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 {InputProps} from '../Input';
 import {Input} from '../Input';
-import type {MenuGroupTitleOption, MenuOption} from '../Menu';
+import type {MenuOption, MenuProps} from '../Menu';
 import {Menu} from '../Menu';
 
 import css from './Dropdown.module.css';
@@ -27,42 +28,27 @@ import css from './Dropdown.module.css';
 type ClassNames = $ReadOnly<{wrapper?: string, box?: string}>;
 
 export type DropdownProps = {
+  ...InputProps,
   classNames?: ClassNames,
   onChange?: (option: MenuOption) => 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>,
-  composeOptions?: Array<Array<MenuOption>>,
-  groupTitleOptions?: Array<MenuGroupTitleOption>,
-  selectedOption?: MenuOption,
-  menuSize?: 'medium' | 'small',
+  onMenuOpen?: () => mixed,
+  onMenuClose?: () => mixed,
+  dropdownInputText?: string,
+  menu?: MenuProps,
 };
 
 export const Dropdown = ({
-  options,
-  composeOptions,
-  groupTitleOptions,
-  size,
+  size = 'medium',
   classNames,
   placeholder = 'Select...',
   onChange,
-  selectedOption,
-  menuSize,
+  menu,
+  onMenuOpen,
+  onMenuClose,
+  dropdownInputText,
   ...inputProps
 }: DropdownProps): React.Node => {
-  const [inputValue, setInputValue] = React.useState(
-    selectedOption?.label || '',
-  );
+  const [inputValue, setInputValue] = React.useState(dropdownInputText || '');
   const dropdownRef = React.useRef();
   const {x, y, reference, floating, strategy} = useFloating({
     strategy: 'absolute',
@@ -71,21 +57,16 @@ export const Dropdown = ({
     middleware: [flip(), offset(parseInt(spaceXXSmall))],
   });
 
-  const handleSelect = (option?: MenuOption) => {
-    if (option?.key) {
-      onChange && onChange(option);
-      setInputValue(option.label || '');
-    }
-  };
-
   React.useEffect(() => {
-    if (selectedOption?.key) {
-      setInputValue(selectedOption.label || '');
-    }
-  }, [selectedOption]);
+    setInputValue(dropdownInputText || '');
+  }, [dropdownInputText]);
+
+  const onMenuToggle = (isOpen: boolean) => {
+    isOpen ? onMenuOpen && onMenuOpen() : onMenuClose && onMenuClose();
+  };
 
   return (
-    <ClickAway>
+    <ClickAway onChange={onMenuToggle}>
       {({isOpen, onOpen, cancelNext, clickAway}) => (
         <div
           data-testid="Dropdown"
@@ -107,7 +88,7 @@ export const Dropdown = ({
             }}
           />
 
-          {isOpen && (options || composeOptions || groupTitleOptions) && (
+          {isOpen && menu && (
             <div
               onClickCapture={cancelNext}
               ref={floating}
@@ -120,15 +101,17 @@ export const Dropdown = ({
               }}
             >
               <Menu
-                isFluid
-                options={options}
-                composeOptions={composeOptions}
-                groupTitleOptions={groupTitleOptions}
+                {...menu}
                 onSelect={(option) => {
-                  handleSelect(option);
-                  clickAway();
+                  onChange && onChange(option);
+                  if (
+                    !menu.optionsVariant ||
+                    menu.optionsVariant === 'normal'
+                  ) {
+                    clickAway();
+                  }
                 }}
-                size={menuSize || size}
+                size={menu.size || size}
               />
             </div>
           )}

package/lib/components/InlineDropdown/InlineDropdown.js

@@ -89,8 +89,11 @@ const InlineDropdown = _ref => {
     }, /*#__PURE__*/React.createElement(_Menu.Menu, _extends({}, menu, {
       onSelect: option => {
         onOptionSelect && onOptionSelect(option);
-        clickAway();
-      }
+        if (!menu.optionsVariant || menu.optionsVariant === 'normal') {
+          clickAway();
+        }
+      },
+      size: menu.size || 'medium'
     }))));
   });
 };

package/lib/components/InlineDropdown/InlineDropdown.js.flow

@@ -36,7 +36,7 @@ type ClassNames = $ReadOnly<{
 export type InlineDropdownProps = {
   ...UnstyledButtonProps,
   classNames?: ClassNames,
-  menu: MenuProps,
+  menu?: MenuProps,
   anchorPosition?: AnchorType,
   onOptionSelect?: (option: MenuOption) => mixed,
   onMenuOpen?: () => mixed,
@@ -122,8 +122,14 @@ export const InlineDropdown = ({
                 {...menu}
                 onSelect={(option) => {
                   onOptionSelect && onOptionSelect(option);
-                  clickAway();
+                  if (
+                    !menu.optionsVariant ||
+                    menu.optionsVariant === 'normal'
+                  ) {
+                    clickAway();
+                  }
                 }}
+                size={menu.size || 'medium'}
               />
             </div>
           )}

package/lib/components/Input/Input.js

@@ -86,7 +86,8 @@ const Input_ = (props, ref) => {
       [_InputModule.default.inputDisabled]: disabled ?? false,
       [_InputModule.default.medium]: size === 'medium',
       [_InputModule.default.small]: size === 'small',
-      [_InputModule.default.locked]: locked
+      [_InputModule.default.locked]: locked,
+      [_InputModule.default.color]: type === 'color'
     }),
     onClick: !(disabled || locked) ? onContainerClick : null,
     ref: boxRef

package/lib/components/Input/Input.js.flow

@@ -141,6 +141,7 @@ const Input_ = (props: InputProps, ref): React.Node => {
           [css.medium]: size === 'medium',
           [css.small]: size === 'small',
           [css.locked]: locked,
+          [css.color]: type === 'color',
         })}
         onClick={!(disabled || locked) ? onContainerClick : null}
         ref={boxRef}

package/lib/components/Input/Input.module.css

@@ -1,4 +1,5 @@
 @value (
+  size18,
   size42,
   size30,
   size34,
@@ -9,6 +10,7 @@
   spaceNone,
   spaceXSmall,
   spaceSmall,
+  spaceMedium,
   spaceXXSmall
 ) from '../../styles/variables/_space.css';
 
@@ -134,17 +136,28 @@ input::placeholder {
   pointer-events: none;
 }
 
+.box.color {
+  padding-right: spaceMedium;
+}
+
 .box > input[type='color'] {
   display: flex;
   cursor: pointer;
   align-items: center;
   width: fit-content;
   gap: spaceXSmall;
+  padding: spaceNone;
+  width: size18;
+  height: size18;
+  margin: spaceNone;
 }
 
 .box > input[type='color']::-webkit-color-swatch {
+  display: flex;
+  padding: spaceNone;
+  align-self: center;
   border: none;
-  min-width: size30;
-  max-width: size30;
+  min-width: size18;
+  min-height: size18;
   border-radius: borderRadiusXSmall;
 }

package/lib/components/Menu/Menu.js

@@ -17,13 +17,15 @@ const RenderOption = _ref => {
     options,
     composeOptions,
     groupTitleOptions,
+    classNames,
     ...restProps
   } = _ref;
   if (options && Array.isArray(options) && options.length) {
     return /*#__PURE__*/React.createElement(React.Fragment, null, options.map(option => /*#__PURE__*/React.createElement(React.Fragment, {
       key: option.key
     }, /*#__PURE__*/React.createElement(_MenuOptionButton.MenuOptionButton, _extends({
-      option: option
+      option: option,
+      classNames: classNames
     }, restProps)))));
   }
   if (composeOptions && Array.isArray(composeOptions) && composeOptions.length) {
@@ -36,7 +38,8 @@ const RenderOption = _ref => {
     }, composeMenuOptions.map(option => /*#__PURE__*/React.createElement(React.Fragment, {
       key: option.key
     }, /*#__PURE__*/React.createElement(_MenuOptionButton.MenuOptionButton, _extends({
-      option: option
+      option: option,
+      classNames: classNames
     }, restProps)))))));
   }
   if (groupTitleOptions && Array.isArray(groupTitleOptions) && groupTitleOptions.length) {
@@ -46,11 +49,12 @@ const RenderOption = _ref => {
     React.createElement(React.Fragment, {
       key: index
     }, !!optionsGroup.groupTitle && /*#__PURE__*/React.createElement("div", {
-      className: _MenuModule.default.groupTitleWrapper
+      className: (0, _classify.classify)(_MenuModule.default.groupTitleWrapper, classNames?.groupTitle)
     }, optionsGroup.groupTitle), optionsGroup.options?.map(option => /*#__PURE__*/React.createElement(React.Fragment, {
       key: option.key
     }, /*#__PURE__*/React.createElement(_MenuOptionButton.MenuOptionButton, _extends({
-      option: option
+      option: option,
+      classNames: classNames
     }, restProps)))))));
   }
   return /*#__PURE__*/React.createElement(React.Fragment, null);

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,
@@ -26,34 +30,43 @@ export type MenuOption = {
 
 // 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 +74,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 +96,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 +119,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;
 }