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

package/CHANGELOG.md

@@ -2,6 +2,27 @@
 
 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.1](https://github.com/spaced-out/ui-design-system/compare/v0.1.0...v0.1.1) (2023-03-31)
+
+
+### Bug Fixes
+
+* forward ref in clickableIcon ([#92](https://github.com/spaced-out/ui-design-system/issues/92)) ([8037aa4](https://github.com/spaced-out/ui-design-system/commit/8037aa4b4c5ee77076ea6a8dc002e5526e3d9da7))
+* tooltip fixes menu option accepts optionVariant override ([2d23b04](https://github.com/spaced-out/ui-design-system/commit/2d23b040885a5bf380c383e596647e76d988454b))
+
+## [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/Icon/ClickableIcon.js

@@ -14,7 +14,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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; }
 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 ClickableIcon = _ref => {
+const ClickableIcon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     size = 'medium',
     className,
@@ -35,13 +35,14 @@ const ClickableIcon = _ref => {
     className: (0, _classify.default)(_ClickableIconModule.default.button, {
       [_ClickableIconModule.default.small]: size === 'small',
       [_ClickableIconModule.default.medium]: size === 'medium'
-    }, className)
+    }, className),
+    ref: ref
   }), /*#__PURE__*/React.createElement(_.Icon, _extends({
     size: size
   }, props)));
-};
+});
 exports.ClickableIcon = ClickableIcon;
-const CloseIcon = _ref2 => {
+const CloseIcon = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     size = 'medium',
     type = 'regular',
@@ -53,6 +54,8 @@ const CloseIcon = _ref2 => {
     size: size,
     type: type,
     color: color
-  }, props));
-};
+  }, props, {
+    ref: ref
+  }));
+});
 exports.CloseIcon = CloseIcon;

package/lib/components/Icon/ClickableIcon.js.flow

@@ -13,38 +13,41 @@ import {Icon} from './';
 import css from './ClickableIcon.module.css';
 
 
-export const ClickableIcon = ({
-  size = 'medium',
-  className,
-  ariaLabel,
-  onClick,
-  ...props
-}: IconProps): React.Node => {
-  const onKeyDownHandler = (e) => {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      onClick && onClick(e);
-    }
-  };
-  return (
-    <UnstyledButton
-      {...props}
-      onClick={onClick}
-      onKeyDown={onKeyDownHandler}
-      ariaLabel={ariaLabel}
-      className={classify(
-        css.button,
-        {
-          [css.small]: size === 'small',
-          [css.medium]: size === 'medium',
-        },
-        className,
-      )}
-    >
-      <Icon size={size} {...props} />
-    </UnstyledButton>
-  );
-};
+export const ClickableIcon: React$AbstractComponent<
+  IconProps,
+  HTMLButtonElement,
+> = React.forwardRef<IconProps, HTMLButtonElement>(
+  (
+    {size = 'medium', className, ariaLabel, onClick, ...props}: IconProps,
+    ref,
+  ) => {
+    const onKeyDownHandler = (e) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        onClick && onClick(e);
+      }
+    };
+    return (
+      <UnstyledButton
+        {...props}
+        onClick={onClick}
+        onKeyDown={onKeyDownHandler}
+        ariaLabel={ariaLabel}
+        className={classify(
+          css.button,
+          {
+            [css.small]: size === 'small',
+            [css.medium]: size === 'medium',
+          },
+          className,
+        )}
+        ref={ref}
+      >
+        <Icon size={size} {...props} />
+      </UnstyledButton>
+    );
+  },
+);
 
 export type CloseIconProps = {
   size?: IconSize,
@@ -55,17 +58,26 @@ export type CloseIconProps = {
   ariaLabel?: string,
 };
 
-export const CloseIcon = ({
-  size = 'medium',
-  type = 'regular',
-  color = TEXT_COLORS.primary,
-  ...props
-}: CloseIconProps): React.Node => (
-  <ClickableIcon
-    name="close"
-    size={size}
-    type={type}
-    color={color}
-    {...props}
-  />
+export const CloseIcon: React$AbstractComponent<
+  CloseIconProps,
+  HTMLButtonElement,
+> = React.forwardRef<CloseIconProps, HTMLButtonElement>(
+  (
+    {
+      size = 'medium',
+      type = 'regular',
+      color = TEXT_COLORS.primary,
+      ...props
+    }: CloseIconProps,
+    ref,
+  ) => (
+    <ClickableIcon
+      name="close"
+      size={size}
+      type={type}
+      color={color}
+      {...props}
+      ref={ref}
+    />
+  ),
 );

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);