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

package/lib/components/OptionButton/SimpleOptionButton.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SimpleOptionButton = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _menu = require("../../utils/menu");
+var _OptionButton = require("./OptionButton");
+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 SimpleOptionButtonBase = (props, ref) => {
+  const {
+    size = 'small',
+    classNames,
+    tooltip,
+    anchorPosition,
+    options,
+    optionsVariant,
+    allowSearch,
+    selectedKeys,
+    onOptionSelect,
+    onButtonClick,
+    onMenuOpen,
+    onMenuClose,
+    resolveLabel,
+    resolveSecondaryLabel,
+    children,
+    menuSize = 'small',
+    ...buttonProps
+  } = props;
+  const [optionButtonSelectedKeys, setOptionButtonSelectedKeys] = React.useState(selectedKeys);
+  React.useEffect(() => {
+    setOptionButtonSelectedKeys(selectedKeys);
+  }, [selectedKeys]);
+  const handleOptionChange = selectedOption => {
+    let newSelectedKeys = [selectedOption.key];
+    if (optionsVariant === 'checkbox') {
+      newSelectedKeys = (0, _menu.getSelectedKeysFromSelectedOption)(selectedOption, optionButtonSelectedKeys);
+    } else {
+      newSelectedKeys = [selectedOption.key];
+    }
+    setOptionButtonSelectedKeys(newSelectedKeys);
+    setTimeout(() => {
+      onOptionSelect?.(selectedOption);
+    });
+  };
+  React.useImperativeHandle(ref, () => ({
+    selectedKeys: optionButtonSelectedKeys
+  }));
+  return /*#__PURE__*/React.createElement(_OptionButton.OptionButton, _extends({}, buttonProps, {
+    tooltip: tooltip,
+    onButtonClick: onButtonClick,
+    anchorPosition: anchorPosition,
+    classNames: classNames,
+    size: size,
+    onOptionSelect: handleOptionChange,
+    onMenuOpen: onMenuOpen,
+    onMenuClose: onMenuClose,
+    menu: {
+      isFluid: false,
+      options,
+      selectedKeys: optionButtonSelectedKeys,
+      optionsVariant,
+      allowSearch,
+      resolveLabel,
+      resolveSecondaryLabel,
+      size: menuSize
+    }
+  }), children);
+};
+const SimpleOptionButton = /*#__PURE__*/React.forwardRef(SimpleOptionButtonBase);
+exports.SimpleOptionButton = SimpleOptionButton;

package/lib/components/OptionButton/SimpleOptionButton.js.flow

@@ -0,0 +1,139 @@
+// @flow strict
+
+import * as React from 'react';
+
+import {getSelectedKeysFromSelectedOption} from '../../utils/menu';
+import type {ButtonProps} from '../Button';
+import type {AnchorType} from '../ButtonDropdown';
+import type {MenuOption, MenuOptionsVariant} from '../Menu';
+
+import type {OptionButtonTooltipProps} from './OptionButton';
+import {OptionButton} from './OptionButton';
+
+
+type ClassNames = $ReadOnly<{
+  wrapper?: string,
+  baseButtonWrapper?: string,
+  baseButtonIcon?: string,
+  optionsButtonWrapper?: string,
+  optionsButtonIcon?: string,
+  dropdownContainer?: string,
+}>;
+
+export type SimpleOptionButtonRef = {
+  selectedKeys?: Array<string>,
+};
+
+export type SimpleOptionButtonProps = {
+  // Input props
+  ...ButtonProps,
+
+  classNames?: ClassNames,
+  tooltip?: OptionButtonTooltipProps,
+  anchorPosition?: AnchorType,
+  tooltip?: OptionButtonTooltipProps,
+  menuSize?: 'small' | 'medium',
+
+  // Menu props
+  options?: Array<MenuOption>,
+
+  optionsVariant?: MenuOptionsVariant,
+  allowSearch?: boolean,
+  selectedKeys?: Array<string>,
+
+  // events
+  onOptionSelect?: (option: MenuOption) => mixed,
+  onButtonClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
+  onMenuOpen?: () => mixed,
+  onMenuClose?: () => mixed,
+
+  // Resolvers
+  resolveLabel?: (option: MenuOption) => string | React.Node,
+  resolveSecondaryLabel?: (option: MenuOption) => string | React.Node,
+  ...
+};
+
+const SimpleOptionButtonBase = (props: SimpleOptionButtonProps, ref) => {
+  const {
+    size = 'small',
+    classNames,
+    tooltip,
+    anchorPosition,
+    options,
+    optionsVariant,
+    allowSearch,
+    selectedKeys,
+    onOptionSelect,
+    onButtonClick,
+    onMenuOpen,
+    onMenuClose,
+    resolveLabel,
+    resolveSecondaryLabel,
+    children,
+    menuSize = 'small',
+    ...buttonProps
+  } = props;
+
+  const [optionButtonSelectedKeys, setOptionButtonSelectedKeys] =
+    React.useState(selectedKeys);
+
+  React.useEffect(() => {
+    setOptionButtonSelectedKeys(selectedKeys);
+  }, [selectedKeys]);
+
+  const handleOptionChange = (selectedOption: MenuOption) => {
+    let newSelectedKeys = [selectedOption.key];
+
+    if (optionsVariant === 'checkbox') {
+      newSelectedKeys = getSelectedKeysFromSelectedOption(
+        selectedOption,
+        optionButtonSelectedKeys,
+      );
+    } else {
+      newSelectedKeys = [selectedOption.key];
+    }
+
+    setOptionButtonSelectedKeys(newSelectedKeys);
+
+    setTimeout(() => {
+      onOptionSelect?.(selectedOption);
+    });
+  };
+
+  React.useImperativeHandle(ref, () => ({
+    selectedKeys: optionButtonSelectedKeys,
+  }));
+
+  return (
+    <OptionButton
+      {...buttonProps}
+      tooltip={tooltip}
+      onButtonClick={onButtonClick}
+      anchorPosition={anchorPosition}
+      classNames={classNames}
+      size={size}
+      onOptionSelect={handleOptionChange}
+      onMenuOpen={onMenuOpen}
+      onMenuClose={onMenuClose}
+      menu={{
+        isFluid: false,
+        options,
+        selectedKeys: optionButtonSelectedKeys,
+        optionsVariant,
+        allowSearch,
+        resolveLabel,
+        resolveSecondaryLabel,
+        size: menuSize,
+      }}
+    >
+      {children}
+    </OptionButton>
+  );
+};
+
+export const SimpleOptionButton: React.AbstractComponent<
+  SimpleOptionButtonProps,
+  SimpleOptionButtonRef,
+> = React.forwardRef<SimpleOptionButtonProps, SimpleOptionButtonRef>(
+  SimpleOptionButtonBase,
+);

package/lib/components/OptionButton/index.js

@@ -3,10 +3,25 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "OptionButton", {
-  enumerable: true,
-  get: function () {
-    return _OptionButton.OptionButton;
-  }
+var _OptionButton = require("./OptionButton");
+Object.keys(_OptionButton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _OptionButton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _OptionButton[key];
+    }
+  });
 });
-var _OptionButton = require("./OptionButton");
+var _SimpleOptionButton = require("./SimpleOptionButton");
+Object.keys(_SimpleOptionButton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _SimpleOptionButton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _SimpleOptionButton[key];
+    }
+  });
+});

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

@@ -1,3 +1,4 @@
 //@flow strict
-export type {OptionButtonProps, OptionButtonTooltipProps} from './OptionButton';
-export {OptionButton} from './OptionButton';
+
+export * from './OptionButton';
+export * from './SimpleOptionButton';

package/lib/components/RadioButton/RadioButton.js

@@ -51,7 +51,8 @@ const RadioButton = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
   return /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_RadioButtonModule.default.container, {
       [_RadioButtonModule.default.horizontalRadioButton]: align === 'horizontal-fixed',
-      [_RadioButtonModule.default.fluidRadioButton]: align === 'horizontal-fluid'
+      [_RadioButtonModule.default.fluidRadioButton]: align === 'horizontal-fluid',
+      [_RadioButtonModule.default.containerDisabled]: disabled
     }, classNames?.wrapper),
     onClick: onWrapClickHandler
   }, /*#__PURE__*/React.createElement("input", _extends({

package/lib/components/RadioButton/RadioButton.js.flow

@@ -87,6 +87,7 @@ export const RadioButton: React$AbstractComponent<
           {
             [css.horizontalRadioButton]: align === 'horizontal-fixed',
             [css.fluidRadioButton]: align === 'horizontal-fluid',
+            [css.containerDisabled]: disabled,
           },
           classNames?.wrapper,
         )}

package/lib/components/RadioButton/RadioButton.module.css

@@ -39,6 +39,10 @@
   cursor: pointer;
 }
 
+.containerDisabled {
+  cursor: not-allowed;
+}
+
 .radio {
   /* secret sauce to styling radio buttons */
   appearance: none;

package/lib/components/Typeahead/SimpleTypeahead.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SimpleTypeahead = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _menu = require("../../utils/menu");
+var _Typeahead = require("./Typeahead");
+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 SimpleTypeaheadBase = (props, ref) => {
+  const {
+    size = 'medium',
+    classNames,
+    placeholder = 'Select...',
+    options,
+    selectedKeys,
+    onSelect,
+    onMenuOpen,
+    onMenuClose,
+    resolveLabel,
+    resolveSecondaryLabel,
+    onClear,
+    onSearch,
+    ...inputProps
+  } = props;
+  const [typeaheadInputText, setTypeaheadInputText] = React.useState('');
+  const [typeaheadSelectedKeys, setTypeaheadSelectedKeys] = React.useState(selectedKeys);
+  React.useEffect(() => {
+    const newTypeaheadText = (0, _menu.getTextLabelFromSelectedKeys)(selectedKeys, options);
+    setTypeaheadSelectedKeys(selectedKeys);
+    setTypeaheadInputText(newTypeaheadText);
+  }, [selectedKeys]);
+  const handleOptionChange = selectedOption => {
+    const newSelectedKeys = [selectedOption.key];
+    const newTypeaheadText = (0, _menu.getTextLabelFromSelectedKeys)(newSelectedKeys, options);
+    setTypeaheadSelectedKeys(newSelectedKeys);
+    setTypeaheadInputText(newTypeaheadText);
+    setTimeout(() => {
+      onSelect?.(selectedOption);
+    });
+  };
+  React.useImperativeHandle(ref, () => ({
+    selectedKeys: typeaheadSelectedKeys
+  }));
+  return /*#__PURE__*/React.createElement(_Typeahead.Typeahead, _extends({}, inputProps, {
+    classNames: classNames,
+    label: "Form Label",
+    size: size,
+    placeholder: placeholder,
+    onSelect: handleOptionChange,
+    onMenuOpen: onMenuOpen,
+    onMenuClose: onMenuClose,
+    typeaheadInputText: typeaheadInputText,
+    onSearch: e => {
+      setTypeaheadInputText(e.target.value);
+      onSearch?.(e);
+    },
+    onClear: () => {
+      setTypeaheadInputText('');
+      setTypeaheadSelectedKeys([]);
+      onClear?.();
+    },
+    menu: {
+      options,
+      selectedKeys: typeaheadSelectedKeys,
+      resolveLabel,
+      resolveSecondaryLabel,
+      size
+    }
+  }));
+};
+const SimpleTypeahead = /*#__PURE__*/React.forwardRef(SimpleTypeaheadBase);
+exports.SimpleTypeahead = SimpleTypeahead;

package/lib/components/Typeahead/SimpleTypeahead.js.flow

@@ -0,0 +1,134 @@
+// @flow strict
+
+import * as React from 'react';
+
+import {getTextLabelFromSelectedKeys} from '../../utils/menu';
+import type {InputProps} from '../Input';
+import type {MenuOption} from '../Menu';
+
+import {Typeahead} from './Typeahead';
+
+
+type ClassNames = $ReadOnly<{
+  wrapper?: string,
+  box?: string,
+}>;
+
+export type SimpleTypeaheadRef = {
+  selectedKeys?: Array<string>,
+};
+
+export type SimpleTypeaheadProps = {
+  // Input props
+  ...InputProps,
+
+  isLoading?: boolean,
+  menuOpenOffset?: number,
+
+  classNames?: ClassNames,
+
+  // Menu props
+  options?: Array<MenuOption>,
+  selectedKeys?: Array<string>,
+
+  // events
+  onSelect?: (option: MenuOption) => mixed,
+  onSearch?: (evt: SyntheticInputEvent<HTMLInputElement>) => mixed,
+  onMenuOpen?: () => mixed,
+  onMenuClose?: () => mixed,
+  onClear?: () => void,
+
+  // Resolvers
+  resolveLabel?: (option: MenuOption) => string | React.Node,
+  resolveSecondaryLabel?: (option: MenuOption) => string | React.Node,
+  ...
+};
+
+const SimpleTypeaheadBase = (props: SimpleTypeaheadProps, ref) => {
+  const {
+    size = 'medium',
+    classNames,
+    placeholder = 'Select...',
+    options,
+    selectedKeys,
+    onSelect,
+    onMenuOpen,
+    onMenuClose,
+    resolveLabel,
+    resolveSecondaryLabel,
+    onClear,
+    onSearch,
+    ...inputProps
+  } = props;
+
+  const [typeaheadInputText, setTypeaheadInputText] = React.useState('');
+  const [typeaheadSelectedKeys, setTypeaheadSelectedKeys] =
+    React.useState(selectedKeys);
+
+  React.useEffect(() => {
+    const newTypeaheadText = getTextLabelFromSelectedKeys(
+      selectedKeys,
+      options,
+    );
+
+    setTypeaheadSelectedKeys(selectedKeys);
+    setTypeaheadInputText(newTypeaheadText);
+  }, [selectedKeys]);
+
+  const handleOptionChange = (selectedOption: MenuOption) => {
+    const newSelectedKeys = [selectedOption.key];
+
+    const newTypeaheadText = getTextLabelFromSelectedKeys(
+      newSelectedKeys,
+      options,
+    );
+
+    setTypeaheadSelectedKeys(newSelectedKeys);
+    setTypeaheadInputText(newTypeaheadText);
+
+    setTimeout(() => {
+      onSelect?.(selectedOption);
+    });
+  };
+
+  React.useImperativeHandle(ref, () => ({
+    selectedKeys: typeaheadSelectedKeys,
+  }));
+
+  return (
+    <Typeahead
+      {...inputProps}
+      classNames={classNames}
+      label="Form Label"
+      size={size}
+      placeholder={placeholder}
+      onSelect={handleOptionChange}
+      onMenuOpen={onMenuOpen}
+      onMenuClose={onMenuClose}
+      typeaheadInputText={typeaheadInputText}
+      onSearch={(e) => {
+        setTypeaheadInputText(e.target.value);
+        onSearch?.(e);
+      }}
+      onClear={() => {
+        setTypeaheadInputText('');
+        setTypeaheadSelectedKeys([]);
+        onClear?.();
+      }}
+      menu={{
+        options,
+        selectedKeys: typeaheadSelectedKeys,
+        resolveLabel,
+        resolveSecondaryLabel,
+        size,
+      }}
+    />
+  );
+};
+
+export const SimpleTypeahead: React.AbstractComponent<
+  SimpleTypeaheadProps,
+  SimpleTypeaheadRef,
+> = React.forwardRef<SimpleTypeaheadProps, SimpleTypeaheadRef>(
+  SimpleTypeaheadBase,
+);

package/lib/components/Typeahead/Typeahead.js

@@ -18,7 +18,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 Typeahead = _ref => {
+const Typeahead = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     size = 'medium',
     classNames,
@@ -34,7 +34,6 @@ const Typeahead = _ref => {
     menuOpenOffset = 1,
     ...inputProps
   } = _ref;
-  const typeaheadRef = React.useRef();
   const [filteredOptions, setFilteredOptions] = React.useState(menu?.options);
   const {
     x,
@@ -73,9 +72,9 @@ const Typeahead = _ref => {
     return /*#__PURE__*/React.createElement("div", {
       "data-testid": "Typeahead",
       className: (0, _classify.classify)(_TypeaheadModule.default.typeaheadContainer, classNames?.wrapper),
-      ref: typeaheadRef,
       onClickCapture: cancelNext
     }, /*#__PURE__*/React.createElement(_SearchInput.SearchInput, _extends({}, inputProps, {
+      ref: ref,
       boxRef: refs.setReference,
       size: size,
       placeholder: placeholder,
@@ -125,5 +124,5 @@ const Typeahead = _ref => {
       onTabOut: clickAway
     }))));
   });
-};
+});
 exports.Typeahead = Typeahead;