@spaced-out/ui-design-system 0.0.18 → 0.0.20

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 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.0.20](https://github.com/spaced-out/ui-design-system/compare/v0.0.19...v0.0.20) (2023-02-08)
+
+
+### Features
+
+* added flow checks in pre commit hook ([e60677c](https://github.com/spaced-out/ui-design-system/commit/e60677c1f7e7c8eb688485eddda04223fef397cd))
+* composemenu and separated menuoptionsbutton ([#58](https://github.com/spaced-out/ui-design-system/issues/58)) ([f4fc49e](https://github.com/spaced-out/ui-design-system/commit/f4fc49ee90da9b231929132f70e2df8d52e33a1a))
+
+### [0.0.19](https://github.com/spaced-out/ui-design-system/compare/v0.0.18...v0.0.19) (2023-02-06)
+
+
+### Bug Fixes
+
+* design fixes for chip ([09fab02](https://github.com/spaced-out/ui-design-system/commit/09fab02562c4fd0790e97dd1fc2ce78cbb045218))
+
 ### [0.0.18](https://github.com/spaced-out/ui-design-system/compare/v0.0.18-beta.3...v0.0.18) (2023-02-06)
 
 

package/lib/components/Chip/Chip.js

@@ -45,6 +45,7 @@ const Chip = _ref => {
       [_ChipModule.default.medium]: size === 'medium',
       [_ChipModule.default.small]: size === 'small',
       [_ChipModule.default.dismissable]: dismissable,
+      [_ChipModule.default.withIcon]: !!iconName && size !== 'small',
       [_ChipModule.default.disabled]: disabled
     }, classNames?.wrapper)
   }, iconName && size !== 'small' && /*#__PURE__*/React.createElement(_Icon.Icon, {

package/lib/components/Chip/Chip.js.flow

@@ -69,6 +69,7 @@ export const Chip = ({
         [css.medium]: size === 'medium',
         [css.small]: size === 'small',
         [css.dismissable]: dismissable,
+        [css.withIcon]: !!iconName && size !== 'small',
         [css.disabled]: disabled,
       },
       classNames?.wrapper,

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

@@ -55,6 +55,14 @@
   background-color: colorBackgroundTertiary;
 }
 
+.withIcon {
+  padding: spaceXXSmall spaceSmall spaceXXSmall spaceXSmall;
+}
+
+.dismissable {
+  padding: spaceXXSmall spaceXSmall spaceXXSmall spaceSmall;
+}
+
 .small {
   padding: spaceNone spaceXSmall;
 }

package/lib/components/Dropdown/Dropdown.js

@@ -21,6 +21,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 const Dropdown = _ref => {
   let {
     options,
+    composeOptions,
     size,
     classNames,
     placeholder = 'Select...',
@@ -79,7 +80,7 @@ const Dropdown = _ref => {
         e.stopPropagation();
         onOpen();
       }
-    })), isOpen && options && /*#__PURE__*/React.createElement("div", {
+    })), isOpen && (options || composeOptions) && /*#__PURE__*/React.createElement("div", {
       onClickCapture: cancelNext,
       ref: floating,
       style: {
@@ -92,6 +93,7 @@ const Dropdown = _ref => {
     }, /*#__PURE__*/React.createElement(_Menu.Menu, {
       isFluid: true,
       options: options,
+      composeOptions: composeOptions,
       onSelect: option => {
         handleSelect(option);
         clickAway();

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

@@ -42,11 +42,13 @@ export type DropdownProps = {
   size?: 'medium' | 'small',
   required?: boolean,
   options?: Array<MenuOption>,
+  composeOptions?: Array<Array<MenuOption>>,
   selectedOption?: MenuOption,
 };
 
 export const Dropdown = ({
   options,
+  composeOptions,
   size,
   classNames,
   placeholder = 'Select...',
@@ -99,7 +101,7 @@ export const Dropdown = ({
             }}
           />
 
-          {isOpen && options && (
+          {isOpen && (options || composeOptions) && (
             <div
               onClickCapture={cancelNext}
               ref={floating}
@@ -114,6 +116,7 @@ export const Dropdown = ({
               <Menu
                 isFluid
                 options={options}
+                composeOptions={composeOptions}
                 onSelect={(option) => {
                   handleSelect(option);
                   clickAway();

package/lib/components/Menu/Menu.js

@@ -6,23 +6,44 @@ Object.defineProperty(exports, "__esModule", {
 exports.Menu = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classify = require("../../utils/classify");
-var _Button = require("../Button");
-var _Icon = require("../Icon");
-var _Truncate = require("../Truncate");
+var _MenuOptionButton = require("./MenuOptionButton.js");
 var _MenuModule = _interopRequireDefault(require("./Menu.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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 RenderOption = _ref => {
+  let {
+    options,
+    composeOptions,
+    ...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
+    }, restProps)))));
+  }
+  if (composeOptions && Array.isArray(composeOptions) && composeOptions.length) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, composeOptions.map((composeMenuOptions, index) =>
+    /*#__PURE__*/
+    // eslint-disable-next-line react/no-array-index-key
+    React.createElement("span", {
+      className: _MenuModule.default.menuDivider,
+      key: index
+    }, composeMenuOptions.map(option => /*#__PURE__*/React.createElement(React.Fragment, {
+      key: option.key
+    }, /*#__PURE__*/React.createElement(_MenuOptionButton.MenuOptionButton, _extends({
+      option: option
+    }, restProps)))))));
+  }
+};
 const Menu = props => {
   const {
-    options,
-    onSelect,
-    selectedOption,
     classNames,
     size = 'medium',
     width,
-    menuDisabled,
     isFluid = true
   } = props;
   return /*#__PURE__*/React.createElement("div", {
@@ -34,50 +55,6 @@ const Menu = props => {
     style: {
       width
     }
-  }, options.map(_ref => {
-    let {
-      key,
-      label,
-      secondaryLabel,
-      iconLeft,
-      iconLeftType,
-      iconRight,
-      iconRightType,
-      disabled
-    } = _ref;
-    return /*#__PURE__*/React.createElement(_Button.UnstyledButton, {
-      className: (0, _classify.classify)(_MenuModule.default.option, {
-        [_MenuModule.default.selected]: key === selectedOption?.key,
-        [_MenuModule.default.optionSmall]: size === 'small',
-        [_MenuModule.default.optionMedium]: size === 'medium',
-        [_MenuModule.default.disabled]: menuDisabled || disabled,
-        [_MenuModule.default.withIconLeft]: !!iconLeft,
-        [_MenuModule.default.withIconRight]: !!iconRight
-      }),
-      key: key,
-      disabled: menuDisabled || disabled,
-      onClick: () => onSelect && onSelect({
-        key,
-        label
-      }),
-      autoFocus: selectedOption?.key === key
-    }, !!iconLeft && /*#__PURE__*/React.createElement(_Icon.Icon, {
-      name: iconLeft,
-      type: iconLeftType,
-      size: "small",
-      className: _MenuModule.default.icon
-    }), /*#__PURE__*/React.createElement("div", {
-      className: _MenuModule.default.optionTextContainer
-    }, /*#__PURE__*/React.createElement("div", {
-      className: _MenuModule.default.optionTextLabel
-    }, /*#__PURE__*/React.createElement(_Truncate.Truncate, null, label)), !!secondaryLabel && /*#__PURE__*/React.createElement("div", {
-      className: _MenuModule.default.optionTextSecondaryLabel
-    }, /*#__PURE__*/React.createElement(_Truncate.Truncate, null, secondaryLabel))), !!iconRight && /*#__PURE__*/React.createElement(_Icon.Icon, {
-      name: iconRight,
-      type: iconRightType,
-      size: "small",
-      className: (0, _classify.classify)(_MenuModule.default.icon, _MenuModule.default.rightIcon)
-    }));
-  }));
+  }, /*#__PURE__*/React.createElement(RenderOption, props));
 };
 exports.Menu = Menu;

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

@@ -2,10 +2,9 @@
 import * as React from 'react';
 
 import {classify} from '../../utils/classify';
-import {UnstyledButton} from '../Button';
-import {Icon} from '../Icon';
 import type {IconType} from '../Icon/Icon.js';
-import {Truncate} from '../Truncate';
+
+import {MenuOptionButton} from './MenuOptionButton.js';
 
 import css from './Menu.module.css';
 
@@ -23,8 +22,9 @@ export type MenuOption = {
   disabled?: boolean,
 };
 
+// Render first available option set
+
 export type MenuProps = {
-  options: Array<MenuOption>,
   onSelect?: (option: MenuOption) => mixed,
   selectedOption?: MenuOption,
   classNames?: ClassNames,
@@ -32,19 +32,54 @@ export type MenuProps = {
   width?: string,
   menuDisabled?: boolean,
   isFluid?: boolean,
+  ...MenuOptionTypes,
+};
+
+export type MenuOptionTypes = {
+  options?: Array<MenuOption>,
+  composeOptions?: Array<Array<MenuOption>>,
+};
+
+const RenderOption = ({
+  options,
+  composeOptions,
+  ...restProps
+}: MenuProps): React.Node => {
+  if (options && Array.isArray(options) && options.length) {
+    return (
+      <>
+        {options.map((option) => (
+          <React.Fragment key={option.key}>
+            <MenuOptionButton option={option} {...restProps} />
+          </React.Fragment>
+        ))}
+      </>
+    );
+  }
+  if (
+    composeOptions &&
+    Array.isArray(composeOptions) &&
+    composeOptions.length
+  ) {
+    return (
+      <>
+        {composeOptions.map((composeMenuOptions, index) => (
+          // eslint-disable-next-line react/no-array-index-key
+          <span className={css.menuDivider} key={index}>
+            {composeMenuOptions.map((option) => (
+              <React.Fragment key={option.key}>
+                <MenuOptionButton option={option} {...restProps} />
+              </React.Fragment>
+            ))}
+          </span>
+        ))}
+      </>
+    );
+  }
 };
 
 export const Menu = (props: MenuProps): React.Node => {
-  const {
-    options,
-    onSelect,
-    selectedOption,
-    classNames,
-    size = 'medium',
-    width,
-    menuDisabled,
-    isFluid = true,
-  } = props;
+  const {classNames, size = 'medium', width, isFluid = true} = props;
 
   return (
     <div
@@ -55,62 +90,7 @@ export const Menu = (props: MenuProps): React.Node => {
       })}
       style={{width}}
     >
-      {options.map(
-        ({
-          key,
-          label,
-          secondaryLabel,
-          iconLeft,
-          iconLeftType,
-          iconRight,
-          iconRightType,
-          disabled,
-        }) => (
-          <UnstyledButton
-            className={classify(css.option, {
-              [css.selected]: key === selectedOption?.key,
-              [css.optionSmall]: size === 'small',
-              [css.optionMedium]: size === 'medium',
-              [css.disabled]: menuDisabled || disabled,
-              [css.withIconLeft]: !!iconLeft,
-              [css.withIconRight]: !!iconRight,
-            })}
-            key={key}
-            disabled={menuDisabled || disabled}
-            onClick={() => onSelect && onSelect({key, label})}
-            autoFocus={selectedOption?.key === key}
-          >
-            {!!iconLeft && (
-              <Icon
-                name={iconLeft}
-                type={iconLeftType}
-                size="small"
-                className={css.icon}
-              />
-            )}
-            <div className={css.optionTextContainer}>
-              <div className={css.optionTextLabel}>
-                <Truncate>{label}</Truncate>
-              </div>
-
-              {!!secondaryLabel && (
-                <div className={css.optionTextSecondaryLabel}>
-                  <Truncate>{secondaryLabel}</Truncate>
-                </div>
-              )}
-            </div>
-
-            {!!iconRight && (
-              <Icon
-                name={iconRight}
-                type={iconRightType}
-                size="small"
-                className={classify(css.icon, css.rightIcon)}
-              />
-            )}
-          </UnstyledButton>
-        ),
-      )}
+      <RenderOption {...props} />
     </div>
   );
 };

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

@@ -160,3 +160,12 @@
 .disabled .optionTextSecondaryLabel {
   color: colorTextDisabled;
 }
+
+.menuDivider:not(:first-of-type) {
+  border-top: borderWidthPrimary solid colorBorderPrimary;
+  padding: spaceXSmall;
+}
+
+.menuDivider {
+  padding: spaceXSmall;
+}

package/lib/components/Menu/MenuOptionButton.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MenuOptionButton = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classify = require("../../utils/classify");
+var _Button = require("../Button");
+var _Icon = require("../Icon");
+var _Truncate = require("../Truncate");
+var _MenuModule = _interopRequireDefault(require("./Menu.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 MenuOptionButton = props => {
+  const {
+    option,
+    size,
+    onSelect,
+    selectedOption,
+    menuDisabled
+  } = props;
+  const {
+    key,
+    label,
+    secondaryLabel,
+    iconLeft,
+    iconLeftType,
+    iconRight,
+    iconRightType,
+    disabled
+  } = option;
+  return /*#__PURE__*/React.createElement(_Button.UnstyledButton, {
+    className: (0, _classify.classify)(_MenuModule.default.option, {
+      [_MenuModule.default.selected]: key === selectedOption?.key,
+      [_MenuModule.default.optionSmall]: size === 'small',
+      [_MenuModule.default.optionMedium]: size === 'medium',
+      [_MenuModule.default.disabled]: menuDisabled || disabled,
+      [_MenuModule.default.withIconLeft]: !!iconLeft,
+      [_MenuModule.default.withIconRight]: !!iconRight
+    }),
+    disabled: menuDisabled || disabled,
+    onClick: () => onSelect && onSelect(option),
+    autoFocus: selectedOption?.key === key
+  }, !!iconLeft && /*#__PURE__*/React.createElement(_Icon.Icon, {
+    name: iconLeft,
+    type: iconLeftType,
+    size: "small",
+    className: _MenuModule.default.icon
+  }), /*#__PURE__*/React.createElement("div", {
+    className: _MenuModule.default.optionTextContainer
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _MenuModule.default.optionTextLabel
+  }, /*#__PURE__*/React.createElement(_Truncate.Truncate, null, label)), !!secondaryLabel && /*#__PURE__*/React.createElement("div", {
+    className: _MenuModule.default.optionTextSecondaryLabel
+  }, /*#__PURE__*/React.createElement(_Truncate.Truncate, null, secondaryLabel))), !!iconRight && /*#__PURE__*/React.createElement(_Icon.Icon, {
+    name: iconRight,
+    type: iconRightType,
+    size: "small",
+    className: (0, _classify.classify)(_MenuModule.default.icon, _MenuModule.default.rightIcon)
+  }));
+};
+exports.MenuOptionButton = MenuOptionButton;

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

@@ -0,0 +1,83 @@
+// @flow strict
+import * as React from 'react';
+
+import {classify} from '../../utils/classify';
+import {UnstyledButton} from '../Button';
+import {Icon} from '../Icon';
+import {Truncate} from '../Truncate';
+
+import type {MenuOption} from './Menu.js';
+
+import css from './Menu.module.css';
+
+
+type ClassNames = $ReadOnly<{wrapper?: string}>;
+
+export type MenuOptionProps = {
+  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} = props;
+  const {
+    key,
+    label,
+    secondaryLabel,
+    iconLeft,
+    iconLeftType,
+    iconRight,
+    iconRightType,
+    disabled,
+  } = option;
+  return (
+    <UnstyledButton
+      className={classify(css.option, {
+        [css.selected]: key === selectedOption?.key,
+        [css.optionSmall]: size === 'small',
+        [css.optionMedium]: size === 'medium',
+        [css.disabled]: menuDisabled || disabled,
+        [css.withIconLeft]: !!iconLeft,
+        [css.withIconRight]: !!iconRight,
+      })}
+      disabled={menuDisabled || disabled}
+      onClick={() => onSelect && onSelect(option)}
+      autoFocus={selectedOption?.key === key}
+    >
+      {!!iconLeft && (
+        <Icon
+          name={iconLeft}
+          type={iconLeftType}
+          size="small"
+          className={css.icon}
+        />
+      )}
+      <div className={css.optionTextContainer}>
+        <div className={css.optionTextLabel}>
+          <Truncate>{label}</Truncate>
+        </div>
+
+        {!!secondaryLabel && (
+          <div className={css.optionTextSecondaryLabel}>
+            <Truncate>{secondaryLabel}</Truncate>
+          </div>
+        )}
+      </div>
+
+      {!!iconRight && (
+        <Icon
+          name={iconRight}
+          type={iconRightType}
+          size="small"
+          className={classify(css.icon, css.rightIcon)}
+        />
+      )}
+    </UnstyledButton>
+  );
+};

package/lib/components/Menu/index.js

@@ -9,4 +9,11 @@ Object.defineProperty(exports, "Menu", {
     return _Menu.Menu;
   }
 });
-var _Menu = require("./Menu");
+Object.defineProperty(exports, "MenuOptionButton", {
+  enumerable: true,
+  get: function () {
+    return _MenuOptionButton.MenuOptionButton;
+  }
+});
+var _Menu = require("./Menu");
+var _MenuOptionButton = require("./MenuOptionButton.js");

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

@@ -2,3 +2,4 @@
 
 export type {MenuOption, MenuProps} from './Menu';
 export {Menu} from './Menu';
+export {MenuOptionButton} from './MenuOptionButton.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {
@@ -115,7 +115,7 @@
   },
   "husky": {
     "hooks": {
-      "pre-commit": "lint-staged",
+      "pre-commit": "lint-staged && yarn flow",
       "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
     }
   },