@spaced-out/ui-design-system 0.1.37-beta.1 → 0.1.37

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.37](https://github.com/spaced-out/ui-design-system/compare/v0.1.37-beta.1...v0.1.37) (2023-07-18)
+
+
+### Features
+
+* focus manager with arrow keys navigation ([#126](https://github.com/spaced-out/ui-design-system/issues/126)) ([2c728f4](https://github.com/spaced-out/ui-design-system/commit/2c728f4c5e1ad10ed7ae1ca209a0038de6db0b9b))
+* simple components for Dropdown, Typeahead and other Menu derivatives, option color fixes ([#123](https://github.com/spaced-out/ui-design-system/issues/123)) ([95c640e](https://github.com/spaced-out/ui-design-system/commit/95c640e34356e06d2a1be5e8d180dfb662d1045e))
+
+
+### Bug Fixes
+
+* ref-forwarding in Typeahead & handled cursor pointer on label in disabled case of radiobutton ([#124](https://github.com/spaced-out/ui-design-system/issues/124)) ([0d6af6e](https://github.com/spaced-out/ui-design-system/commit/0d6af6ea452c192827cbf0e504a7a3d6c23865ba))
+
 ### [0.1.37-beta.1](https://github.com/spaced-out/ui-design-system/compare/v0.1.37-beta.0...v0.1.37-beta.1) (2023-07-05)
 
 

package/lib/components/ButtonDropdown/SimpleButtonDropdown.js

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SimpleButtonDropdown = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _menu = require("../../utils/menu");
+var _ButtonDropdown = require("./ButtonDropdown");
+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 SimpleButtonDropdownBase = (props, ref) => {
+  const {
+    size = 'medium',
+    classNames,
+    anchorPosition,
+    options,
+    optionsVariant,
+    allowSearch,
+    selectedKeys,
+    onOptionSelect,
+    onMenuOpen,
+    onMenuClose,
+    resolveLabel,
+    resolveSecondaryLabel,
+    children,
+    isFluid,
+    ...buttonProps
+  } = props;
+  const [btnText, setBtnText] = React.useState('');
+  const [buttonDropdownSelectedKeys, setButtonDropdownSelectedKeys] = React.useState(selectedKeys);
+  React.useEffect(() => {
+    const newBtnText = (0, _menu.getButtonLabelFromSelectedKeys)(selectedKeys, children);
+    setButtonDropdownSelectedKeys(selectedKeys);
+    setBtnText(newBtnText);
+  }, [selectedKeys]);
+  const handleOptionChange = selectedOption => {
+    let newSelectedKeys = [];
+    if (optionsVariant === 'checkbox') {
+      newSelectedKeys = (0, _menu.getSelectedKeysFromSelectedOption)(selectedOption, buttonDropdownSelectedKeys);
+    } else {
+      newSelectedKeys = [selectedOption.key];
+    }
+    const newBtnText = (0, _menu.getButtonLabelFromSelectedKeys)(newSelectedKeys, children);
+    setButtonDropdownSelectedKeys(newSelectedKeys);
+    setBtnText(newBtnText);
+    setTimeout(() => {
+      onOptionSelect?.(selectedOption);
+    });
+  };
+  React.useImperativeHandle(ref, () => ({
+    selectedKeys: buttonDropdownSelectedKeys
+  }));
+  return /*#__PURE__*/React.createElement(_ButtonDropdown.ButtonDropdown, _extends({}, buttonProps, {
+    anchorPosition: anchorPosition,
+    classNames: classNames,
+    size: size,
+    onOptionSelect: handleOptionChange,
+    onMenuOpen: onMenuOpen,
+    onMenuClose: onMenuClose,
+    menu: {
+      isFluid,
+      options,
+      selectedKeys: buttonDropdownSelectedKeys,
+      optionsVariant,
+      allowSearch,
+      resolveLabel,
+      resolveSecondaryLabel,
+      size
+    }
+  }), optionsVariant === 'checkbox' ? btnText : children);
+};
+const SimpleButtonDropdown = /*#__PURE__*/React.forwardRef(SimpleButtonDropdownBase);
+exports.SimpleButtonDropdown = SimpleButtonDropdown;

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

@@ -0,0 +1,142 @@
+// @flow strict
+
+import * as React from 'react';
+
+import {
+  getButtonLabelFromSelectedKeys,
+  getSelectedKeysFromSelectedOption,
+} from '../../utils/menu';
+import type {ButtonProps} from '../Button';
+import type {MenuOption, MenuOptionsVariant} from '../Menu';
+import type {BaseTooltipProps} from '../Tooltip';
+
+import type {AnchorType} from './ButtonDropdown';
+import {ButtonDropdown} from './ButtonDropdown';
+
+
+type ClassNames = $ReadOnly<{
+  buttonWrapper?: string,
+  dropdownContainer?: string,
+  buttonIcon?: string,
+}>;
+
+export type SimpleButtonDropdownRef = {
+  selectedKeys?: Array<string>,
+};
+
+export type SimpleButtonDropdownProps = {
+  // Input props
+  ...ButtonProps,
+
+  classNames?: ClassNames,
+  anchorPosition?: AnchorType,
+  tooltip?: BaseTooltipProps,
+
+  // Menu props
+  options?: Array<MenuOption>,
+
+  optionsVariant?: MenuOptionsVariant,
+  allowSearch?: boolean,
+  selectedKeys?: Array<string>,
+
+  // events
+  onOptionSelect?: (option: MenuOption) => mixed,
+  onMenuOpen?: () => mixed,
+  onMenuClose?: () => mixed,
+
+  // Resolvers
+  resolveLabel?: (option: MenuOption) => string | React.Node,
+  resolveSecondaryLabel?: (option: MenuOption) => string | React.Node,
+  ...
+};
+
+const SimpleButtonDropdownBase = (props: SimpleButtonDropdownProps, ref) => {
+  const {
+    size = 'medium',
+    classNames,
+    anchorPosition,
+    options,
+    optionsVariant,
+    allowSearch,
+    selectedKeys,
+    onOptionSelect,
+    onMenuOpen,
+    onMenuClose,
+    resolveLabel,
+    resolveSecondaryLabel,
+    children,
+    isFluid,
+    ...buttonProps
+  } = props;
+
+  const [btnText, setBtnText] = React.useState('');
+  const [buttonDropdownSelectedKeys, setButtonDropdownSelectedKeys] =
+    React.useState(selectedKeys);
+
+  React.useEffect(() => {
+    const newBtnText = getButtonLabelFromSelectedKeys(selectedKeys, children);
+
+    setButtonDropdownSelectedKeys(selectedKeys);
+    setBtnText(newBtnText);
+  }, [selectedKeys]);
+
+  const handleOptionChange = (selectedOption: MenuOption) => {
+    let newSelectedKeys = [];
+
+    if (optionsVariant === 'checkbox') {
+      newSelectedKeys = getSelectedKeysFromSelectedOption(
+        selectedOption,
+        buttonDropdownSelectedKeys,
+      );
+    } else {
+      newSelectedKeys = [selectedOption.key];
+    }
+
+    const newBtnText = getButtonLabelFromSelectedKeys(
+      newSelectedKeys,
+      children,
+    );
+
+    setButtonDropdownSelectedKeys(newSelectedKeys);
+    setBtnText(newBtnText);
+
+    setTimeout(() => {
+      onOptionSelect?.(selectedOption);
+    });
+  };
+
+  React.useImperativeHandle(ref, () => ({
+    selectedKeys: buttonDropdownSelectedKeys,
+  }));
+
+  return (
+    <ButtonDropdown
+      {...buttonProps}
+      anchorPosition={anchorPosition}
+      classNames={classNames}
+      size={size}
+      onOptionSelect={handleOptionChange}
+      onMenuOpen={onMenuOpen}
+      onMenuClose={onMenuClose}
+      menu={{
+        isFluid,
+        options,
+        selectedKeys: buttonDropdownSelectedKeys,
+        optionsVariant,
+        allowSearch,
+        resolveLabel,
+        resolveSecondaryLabel,
+        size,
+      }}
+    >
+      {optionsVariant === 'checkbox' ? btnText : children}
+    </ButtonDropdown>
+  );
+};
+
+export const SimpleButtonDropdown: React.AbstractComponent<
+  SimpleButtonDropdownProps,
+  SimpleButtonDropdownRef,
+> = React.forwardRef<SimpleButtonDropdownProps, SimpleButtonDropdownRef>(
+  SimpleButtonDropdownBase,
+);

package/lib/components/ButtonDropdown/index.js

@@ -3,16 +3,25 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "ANCHOR_POSITION_TYPE", {
-  enumerable: true,
-  get: function () {
-    return _ButtonDropdown.ANCHOR_POSITION_TYPE;
-  }
+var _ButtonDropdown = require("./ButtonDropdown");
+Object.keys(_ButtonDropdown).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ButtonDropdown[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ButtonDropdown[key];
+    }
+  });
 });
-Object.defineProperty(exports, "ButtonDropdown", {
-  enumerable: true,
-  get: function () {
-    return _ButtonDropdown.ButtonDropdown;
-  }
-});
-var _ButtonDropdown = require("./ButtonDropdown");
+var _SimpleButtonDropdown = require("./SimpleButtonDropdown");
+Object.keys(_SimpleButtonDropdown).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _SimpleButtonDropdown[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _SimpleButtonDropdown[key];
+    }
+  });
+});

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

@@ -1,4 +1,4 @@
 // @flow strict
 
-export type {AnchorType, ButtonDropdownProps} from './ButtonDropdown';
-export {ANCHOR_POSITION_TYPE, ButtonDropdown} from './ButtonDropdown';
+export * from './ButtonDropdown';
+export * from './SimpleButtonDropdown';

package/lib/components/Dropdown/Dropdown.js

@@ -65,7 +65,7 @@ const Dropdown = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       placeholder: placeholder,
       value: dropdownInputText,
       classNames: {
-        box: _DropdownModule.default.inputBox
+        box: (0, _classify.classify)(_DropdownModule.default.inputBox, classNames?.box)
       },
       iconRightName: isOpen ? 'angle-up' : 'angle-down',
       readOnly: true,

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

@@ -83,7 +83,7 @@ export const Dropdown: React$AbstractComponent<
               size={size}
               placeholder={placeholder}
               value={dropdownInputText}
-              classNames={{box: css.inputBox}}
+              classNames={{box: classify(css.inputBox, classNames?.box)}}
               iconRightName={isOpen ? 'angle-up' : 'angle-down'}
               readOnly
               onContainerClick={(e) => {

package/lib/components/Dropdown/SimpleDropdown.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SimpleDropdown = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _menu = require("../../utils/menu");
+var _Dropdown = require("./Dropdown");
+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 SimpleDropdownBase = (props, ref) => {
+  const {
+    size = 'medium',
+    classNames,
+    placeholder = 'Select...',
+    options,
+    optionsVariant,
+    allowSearch,
+    selectedKeys,
+    onChange,
+    onMenuOpen,
+    onMenuClose,
+    resolveLabel,
+    resolveSecondaryLabel,
+    ...inputProps
+  } = props;
+  const [dropdownInputText, setDropdownInputText] = React.useState('');
+  const [dropdownSelectedKeys, setDropdownSelectedKeys] = React.useState(selectedKeys);
+  React.useEffect(() => {
+    const newDropdownText = (0, _menu.getTextLabelFromSelectedKeys)(selectedKeys, options);
+    setDropdownSelectedKeys(selectedKeys);
+    setDropdownInputText(newDropdownText);
+  }, [selectedKeys]);
+  const handleOptionChange = selectedOption => {
+    let newSelectedKeys = [];
+    if (optionsVariant === 'checkbox') {
+      newSelectedKeys = (0, _menu.getSelectedKeysFromSelectedOption)(selectedOption, dropdownSelectedKeys);
+    } else {
+      newSelectedKeys = [selectedOption.key];
+    }
+    const newDropdownText = (0, _menu.getTextLabelFromSelectedKeys)(newSelectedKeys, options);
+    setDropdownSelectedKeys(newSelectedKeys);
+    setDropdownInputText(newDropdownText);
+    setTimeout(() => {
+      onChange?.(selectedOption);
+    });
+  };
+  React.useImperativeHandle(ref, () => ({
+    selectedKeys: dropdownSelectedKeys
+  }));
+  return /*#__PURE__*/React.createElement(_Dropdown.Dropdown, _extends({}, inputProps, {
+    classNames: classNames,
+    label: "Form Label",
+    size: size,
+    placeholder: placeholder,
+    onChange: handleOptionChange,
+    onMenuOpen: onMenuOpen,
+    onMenuClose: onMenuClose,
+    dropdownInputText: dropdownInputText,
+    menu: {
+      options,
+      selectedKeys: dropdownSelectedKeys,
+      optionsVariant,
+      allowSearch,
+      resolveLabel,
+      resolveSecondaryLabel,
+      size
+    }
+  }));
+};
+const SimpleDropdown = /*#__PURE__*/React.forwardRef(SimpleDropdownBase);
+exports.SimpleDropdown = SimpleDropdown;

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

@@ -0,0 +1,134 @@
+// @flow strict
+
+import * as React from 'react';
+
+import {
+  getSelectedKeysFromSelectedOption,
+  getTextLabelFromSelectedKeys,
+} from '../../utils/menu';
+import type {InputProps} from '../Input';
+import type {MenuOption, MenuOptionsVariant} from '../Menu';
+
+import {Dropdown} from './Dropdown';
+
+
+type ClassNames = $ReadOnly<{
+  wrapper?: string,
+  box?: string,
+}>;
+
+export type SimpleDropdownRef = {
+  selectedKeys?: Array<string>,
+};
+
+export type SimpleDropdownProps = {
+  // Input props
+  ...InputProps,
+
+  classNames?: ClassNames,
+
+  // Menu props
+  options?: Array<MenuOption>,
+
+  optionsVariant?: MenuOptionsVariant,
+  allowSearch?: boolean,
+  selectedKeys?: Array<string>,
+
+  // events
+  onChange?: (option: MenuOption) => mixed,
+  onMenuOpen?: () => mixed,
+  onMenuClose?: () => mixed,
+
+  // Resolvers
+  resolveLabel?: (option: MenuOption) => string | React.Node,
+  resolveSecondaryLabel?: (option: MenuOption) => string | React.Node,
+  ...
+};
+
+const SimpleDropdownBase = (props: SimpleDropdownProps, ref) => {
+  const {
+    size = 'medium',
+    classNames,
+    placeholder = 'Select...',
+    options,
+    optionsVariant,
+    allowSearch,
+    selectedKeys,
+    onChange,
+    onMenuOpen,
+    onMenuClose,
+    resolveLabel,
+    resolveSecondaryLabel,
+    ...inputProps
+  } = props;
+
+  const [dropdownInputText, setDropdownInputText] = React.useState('');
+  const [dropdownSelectedKeys, setDropdownSelectedKeys] =
+    React.useState(selectedKeys);
+
+  React.useEffect(() => {
+    const newDropdownText = getTextLabelFromSelectedKeys(selectedKeys, options);
+
+    setDropdownSelectedKeys(selectedKeys);
+    setDropdownInputText(newDropdownText);
+  }, [selectedKeys]);
+
+  const handleOptionChange = (selectedOption: MenuOption) => {
+    let newSelectedKeys = [];
+
+    if (optionsVariant === 'checkbox') {
+      newSelectedKeys = getSelectedKeysFromSelectedOption(
+        selectedOption,
+        dropdownSelectedKeys,
+      );
+    } else {
+      newSelectedKeys = [selectedOption.key];
+    }
+
+    const newDropdownText = getTextLabelFromSelectedKeys(
+      newSelectedKeys,
+      options,
+    );
+
+    setDropdownSelectedKeys(newSelectedKeys);
+    setDropdownInputText(newDropdownText);
+
+    setTimeout(() => {
+      onChange?.(selectedOption);
+    });
+  };
+
+  React.useImperativeHandle(ref, () => ({
+    selectedKeys: dropdownSelectedKeys,
+  }));
+
+  return (
+    <Dropdown
+      {...inputProps}
+      classNames={classNames}
+      label="Form Label"
+      size={size}
+      placeholder={placeholder}
+      onChange={handleOptionChange}
+      onMenuOpen={onMenuOpen}
+      onMenuClose={onMenuClose}
+      dropdownInputText={dropdownInputText}
+      menu={{
+        options,
+        selectedKeys: dropdownSelectedKeys,
+        optionsVariant,
+        allowSearch,
+        resolveLabel,
+        resolveSecondaryLabel,
+        size,
+      }}
+    />
+  );
+};
+
+export const SimpleDropdown: React.AbstractComponent<
+  SimpleDropdownProps,
+  SimpleDropdownRef,
+> = React.forwardRef<SimpleDropdownProps, SimpleDropdownRef>(
+  SimpleDropdownBase,
+);

package/lib/components/Dropdown/index.js

@@ -13,4 +13,15 @@ Object.keys(_Dropdown).forEach(function (key) {
       return _Dropdown[key];
     }
   });
+});
+var _SimpleDropdown = require("./SimpleDropdown");
+Object.keys(_SimpleDropdown).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _SimpleDropdown[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _SimpleDropdown[key];
+    }
+  });
 });

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

@@ -1,3 +1,4 @@
 // @flow strict
 
 export * from './Dropdown';
+export * from './SimpleDropdown';

package/lib/components/FocusManager/FocusManager.js

@@ -23,11 +23,17 @@ const FocusManager = props => {
     classNames,
     children,
     initialFocus = -1,
+    returnFocus = true,
+    modal = true,
+    guards = true,
     ...restFloatingFocusManagerProps
   } = props;
   return /*#__PURE__*/React.createElement(_react2.FloatingFocusManager, _extends({
     context: context,
-    initialFocus: initialFocus
+    initialFocus: initialFocus,
+    modal: modal,
+    guards: guards,
+    returnFocus: returnFocus
   }, restFloatingFocusManagerProps), /*#__PURE__*/React.createElement("div", {
     ref: refs.setFloating,
     "data-testid": "FocusManager",

package/lib/components/FocusManager/FocusManager.js.flow

@@ -21,6 +21,7 @@ export type FocusManagerProps = {
   initialFocus?: number,
   returnFocus?: boolean,
   guards?: boolean,
+  modal?: boolean,
 };
 
 export const FocusManager = (props: FocusManagerProps): React.Node => {
@@ -29,6 +30,9 @@ export const FocusManager = (props: FocusManagerProps): React.Node => {
     classNames,
     children,
     initialFocus = -1,
+    returnFocus = true,
+    modal = true,
+    guards = true,
     ...restFloatingFocusManagerProps
   } = props;
 
@@ -36,6 +40,9 @@ export const FocusManager = (props: FocusManagerProps): React.Node => {
     <FloatingFocusManager
       context={context}
       initialFocus={initialFocus}
+      modal={modal}
+      guards={guards}
+      returnFocus={returnFocus}
       {...restFloatingFocusManagerProps}
     >
       <div