@spaced-out/ui-design-system 0.1.9 → 0.1.11

package/CHANGELOG.md

@@ -2,6 +2,24 @@
 
 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.11](https://github.com/spaced-out/ui-design-system/compare/v0.1.10...v0.1.11) (2023-04-11)
+
+
+### Bug Fixes
+
+* added classnames for menu custom component ([#95](https://github.com/spaced-out/ui-design-system/issues/95)) ([a860c29](https://github.com/spaced-out/ui-design-system/commit/a860c2979592d5e69301fb46374853ae960a54de))
+* propagating disabled to button ([b14be23](https://github.com/spaced-out/ui-design-system/commit/b14be23a352d136c1c73f091b36bd7d1df8c35df))
+
+### [0.1.10](https://github.com/spaced-out/ui-design-system/compare/v0.1.9...v0.1.10) (2023-04-10)
+
+
+### Bug Fixes
+
+* added tabIndex support for buttons ([e3eb705](https://github.com/spaced-out/ui-design-system/commit/e3eb705a1dee1ee6ac9b9431974f0e216dcea171))
+* aded nested dialog example ([b56a835](https://github.com/spaced-out/ui-design-system/commit/b56a835350137f1b291b3a5e72e241af5f6b0b9b))
+* props fix ([952c7f0](https://github.com/spaced-out/ui-design-system/commit/952c7f0c8e9bd85b9a05db3564064985d8e6d852))
+* ref forwarding in text, truncate, menu etc ([#94](https://github.com/spaced-out/ui-design-system/issues/94)) ([eb4f559](https://github.com/spaced-out/ui-design-system/commit/eb4f559e83c298d0376c99abf59cea386afd4bca))
+
 ### [0.1.9](https://github.com/spaced-out/ui-design-system/compare/v0.1.8...v0.1.9) (2023-04-05)
 
 

package/lib/components/Button/Button.js

@@ -41,6 +41,7 @@ const UnstyledButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     className,
     ariaLabel,
     actionType,
+    tabIndex = 0,
     ...props
   } = _ref;
   return /*#__PURE__*/React.createElement("button", _extends({}, props, ariaLabel ? {
@@ -50,6 +51,7 @@ const UnstyledButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     ref: ref,
     role: "button",
     disabled: disabled,
+    tabIndex: disabled ? -1 : tabIndex,
     type: actionType,
     onClick: event => {
       if (disabled) {
@@ -78,6 +80,7 @@ const Button = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   } = _ref2;
   return /*#__PURE__*/React.createElement(UnstyledButton, _extends({}, props, {
     actionType: actionType,
+    disabled: disabled,
     className: (0, _classify.classify)(_ButtonModule.default.button, {
       [_ButtonModule.default.primary]: type === 'primary',
       [_ButtonModule.default.secondary]: type === 'secondary',

package/lib/components/Button/Button.js.flow

@@ -36,6 +36,7 @@ export type UnstyledButtonProps = {
   onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
   className?: string,
   ariaLabel?: string,
+  tabIndex?: number,
   ...
 };
 
@@ -53,6 +54,7 @@ export type ButtonProps = {
   disabled?: boolean,
   size?: 'medium' | 'small',
   ariaLabel?: string,
+  tabIndex?: number,
   ...
 };
 
@@ -75,6 +77,7 @@ export const UnstyledButton: React$AbstractComponent<
       className,
       ariaLabel,
       actionType,
+      tabIndex = 0,
       ...props
     }: UnstyledButtonProps,
     ref: React.Ref<'button'>,
@@ -86,6 +89,7 @@ export const UnstyledButton: React$AbstractComponent<
       ref={ref}
       role="button"
       disabled={disabled}
+      tabIndex={disabled ? -1 : tabIndex}
       type={actionType}
       onClick={(event) => {
         if (disabled) {
@@ -120,6 +124,7 @@ export const Button: React$AbstractComponent<ButtonProps, HTMLButtonElement> =
       <UnstyledButton
         {...props}
         actionType={actionType}
+        disabled={disabled}
         className={classify(
           css.button,
           {

package/lib/components/Dropdown/Dropdown.js

@@ -59,15 +59,14 @@ const Dropdown = _ref => {
       "data-testid": "Dropdown",
       className: (0, _classify.classify)(_DropdownModule.default.dropdownContainer, classNames?.wrapper),
       ref: dropdownRef
-    }, /*#__PURE__*/React.createElement(_Input.Input, _extends({
+    }, /*#__PURE__*/React.createElement(_Input.Input, _extends({}, inputProps, {
       boxRef: reference,
       size: size,
       placeholder: placeholder,
       value: dropdownInputText,
       classNames: {
         box: _DropdownModule.default.inputBox
-      }
-    }, inputProps, {
+      },
       iconRightName: isOpen ? 'angle-up' : 'angle-down',
       readOnly: true,
       onContainerClick: e => {

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

@@ -35,6 +35,7 @@ export type DropdownProps = {
   onMenuClose?: () => mixed,
   dropdownInputText?: string,
   menu?: MenuProps,
+  ...
 };
 
 export const Dropdown = ({
@@ -69,12 +70,12 @@ export const Dropdown = ({
           ref={dropdownRef}
         >
           <Input
+            {...inputProps}
             boxRef={reference}
             size={size}
             placeholder={placeholder}
             value={dropdownInputText}
             classNames={{box: css.inputBox}}
-            {...inputProps}
             iconRightName={isOpen ? 'angle-up' : 'angle-down'}
             readOnly
             onContainerClick={(e) => {

package/lib/components/Input/Input.js

@@ -97,7 +97,7 @@ const Input_ = (props, ref) => {
     color: disabled ? 'disabled' : 'secondary',
     size: "small",
     type: iconLeftType
-  }), /*#__PURE__*/React.createElement("input", _extends({
+  }), /*#__PURE__*/React.createElement("input", _extends({}, inputProps, {
     disabled: locked || disabled,
     name: name,
     ref: ref,
@@ -108,7 +108,7 @@ const Input_ = (props, ref) => {
     onBlur: onBlur,
     type: showPassword ? 'text' : type,
     readOnly: readOnly && 'readOnly'
-  }, inputProps)), type === 'color' && /*#__PURE__*/React.createElement("div", {
+  })), type === 'color' && /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.classify)(_InputModule.default.colorText, _InputModule.default[size], {
       [_InputModule.default.hasValue]: value
     })

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

@@ -72,6 +72,7 @@ export type InputProps = {
    * Only values which are equal to the basis for stepping (min if specified, value otherwise, and an
    * appropriate default value if neither of those is provided) are valid. */
   step?: string,
+  ...
 };
 
 const Input_ = (props: InputProps, ref): React.Node => {
@@ -156,6 +157,7 @@ const Input_ = (props: InputProps, ref): React.Node => {
           />
         )}
         <input
+          {...inputProps}
           disabled={locked || disabled}
           name={name}
           ref={ref}
@@ -166,7 +168,6 @@ const Input_ = (props: InputProps, ref): React.Node => {
           onBlur={onBlur}
           type={showPassword ? 'text' : type}
           readOnly={readOnly && 'readOnly'}
-          {...inputProps}
         />
         {type === 'color' && (
           <div

package/lib/components/Menu/Menu.js

@@ -59,7 +59,7 @@ const RenderOption = _ref => {
   }
   return /*#__PURE__*/React.createElement(React.Fragment, null);
 };
-const Menu = props => {
+const Menu = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     classNames,
     size = 'medium',
@@ -74,7 +74,8 @@ const Menu = props => {
     }, classNames?.wrapper),
     style: {
       width
-    }
+    },
+    ref: ref
   }, /*#__PURE__*/React.createElement(RenderOption, props));
-};
+});
 exports.Menu = Menu;

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

@@ -13,6 +13,8 @@ type ClassNames = $ReadOnly<{
   wrapper?: string,
   option?: string,
   groupTitle?: string,
+  optionTextContainer?: string,
+  optionTextLabel?: string,
 }>;
 
 export type MenuOption = {
@@ -147,23 +149,27 @@ const RenderOption = ({
   return <></>;
 };
 
-export const Menu = (props: MenuProps): React.Node => {
-  const {classNames, size = 'medium', width, isFluid = true} = props;
-
-  return (
-    <div
-      className={classify(
-        css.menuCard,
-        {
-          [css.fluid]: isFluid,
-          [css.medium]: size === 'medium',
-          [css.small]: size === 'small',
-        },
-        classNames?.wrapper,
-      )}
-      style={{width}}
-    >
-      <RenderOption {...props} />
-    </div>
+export const Menu: React$AbstractComponent<MenuProps, HTMLDivElement> =
+  React.forwardRef<MenuProps, HTMLDivElement>(
+    (props: MenuProps, ref): React.Node => {
+      const {classNames, size = 'medium', width, isFluid = true} = props;
+
+      return (
+        <div
+          className={classify(
+            css.menuCard,
+            {
+              [css.fluid]: isFluid,
+              [css.medium]: size === 'medium',
+              [css.small]: size === 'small',
+            },
+            classNames?.wrapper,
+          )}
+          style={{width}}
+          ref={ref}
+        >
+          <RenderOption {...props} />
+        </div>
+      );
+    },
   );
-};

package/lib/components/Menu/MenuOptionButton.js

@@ -77,10 +77,10 @@ const MenuOptionButton = props => {
     size: "small",
     className: _MenuModule.default.icon
   }), /*#__PURE__*/React.createElement("div", {
-    className: _MenuModule.default.optionTextContainer
-  }, /*#__PURE__*/React.createElement("div", {
-    className: _MenuModule.default.optionTextLabel
-  }, /*#__PURE__*/React.isValidElement(customComponent) ? customComponent : /*#__PURE__*/React.createElement(_Truncate.Truncate, null, label)), !!secondaryLabel && /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.classify)(_MenuModule.default.optionTextContainer, classNames?.optionTextContainer)
+  }, /*#__PURE__*/React.isValidElement(customComponent) ? customComponent : /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.classify)(_MenuModule.default.optionTextLabel, classNames?.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,

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

@@ -96,14 +96,24 @@ export const MenuOptionButton = (props: MenuOptionProps): React.Node => {
           className={css.icon}
         />
       )}
-      <div className={css.optionTextContainer}>
-        <div className={css.optionTextLabel}>
-          {React.isValidElement(customComponent) ? (
-            customComponent
-          ) : (
+      <div
+        className={classify(
+          css.optionTextContainer,
+          classNames?.optionTextContainer,
+        )}
+      >
+        {React.isValidElement(customComponent) ? (
+          customComponent
+        ) : (
+          <div
+            className={classify(
+              css.optionTextLabel,
+              classNames?.optionTextLabel,
+            )}
+          >
             <Truncate>{label}</Truncate>
-          )}
-        </div>
+          </div>
+        )}
 
         {!!secondaryLabel && (
           <div className={css.optionTextSecondaryLabel}>

package/lib/components/SearchInput/SearchInput.js

@@ -31,9 +31,8 @@ const SearchInput = _ref => {
   };
   return /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_SearchInputModule.default.searchInputWrapper, classNames?.wrapper)
-  }, /*#__PURE__*/React.createElement(_Input.Input, _extends({
-    type: "text"
-  }, searchInputProps, {
+  }, /*#__PURE__*/React.createElement(_Input.Input, _extends({}, searchInputProps, {
+    type: "text",
     classNames: {
       iconRight: value && !(disabled || locked) ? _SearchInputModule.default.clickable : '',
       iconLeft: value && !disabled ? _SearchInputModule.default.primaryText : '',

package/lib/components/SearchInput/SearchInput.js.flow

@@ -21,6 +21,7 @@ export type SearchInputProps = {
   classNames?: ClassNames,
   onClear?: () => void,
   isLoading?: boolean,
+  ...
 };
 
 export const SearchInput = ({
@@ -42,8 +43,8 @@ export const SearchInput = ({
   return (
     <div className={classify(css.searchInputWrapper, classNames?.wrapper)}>
       <Input
-        type="text"
         {...searchInputProps}
+        type="text"
         classNames={{
           iconRight: value && !(disabled || locked) ? css.clickable : '',
           iconLeft: value && !disabled ? css.primaryText : '',