@spaced-out/ui-design-system 0.1.8 → 0.1.10

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 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.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)
+
+
+### Bug Fixes
+
+* search input loader and typeahead fixes ([67db0fe](https://github.com/spaced-out/ui-design-system/commit/67db0fe3ad41f6d8a40a7fc77fef835ae96cc668))
+
 ### [0.1.8](https://github.com/spaced-out/ui-design-system/compare/v0.1.7...v0.1.8) (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) {

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

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

@@ -147,23 +147,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/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 : '',
@@ -53,7 +52,8 @@ const SearchInput = _ref => {
     })
   }, /*#__PURE__*/React.createElement(_CircularLoader.CircularLoader, {
     colorToken: "colorFillPrimary",
-    size: size
+    className: _SearchInputModule.default.loader,
+    size: "small"
   })));
 };
 exports.SearchInput = SearchInput;

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 : '',
@@ -64,7 +65,11 @@ export const SearchInput = ({
             [css.small]: size === 'small',
           })}
         >
-          <CircularLoader colorToken="colorFillPrimary" size={size} />
+          <CircularLoader
+            colorToken="colorFillPrimary"
+            className={css.loader}
+            size="small"
+          />
         </div>
       )}
     </div>

package/lib/components/SearchInput/SearchInput.module.css

@@ -1,5 +1,6 @@
 @value (
-  colorTextPrimary
+  colorTextPrimary,
+  colorBackgroundTertiary
 ) from '../../styles/variables/_color.css';
 
 @value (
@@ -7,15 +8,10 @@
   size34
 ) from '../../styles/variables/_size.css';
 
-@value (
-  spaceXXSmall
-) from '../../styles/variables/_space.css';
-
 .searchInputWrapper {
   display: flex;
   position: relative;
   align-items: end;
-  gap: spaceXXSmall;
   height: fit-content;
 }
 
@@ -34,11 +30,15 @@
   align-items: center;
   justify-content: center;
   align-items: center;
-  margin-right: calc((size42 * -1) - spaceXXSmall);
+  margin-left: calc(size42 * -1);
 }
 
 .loaderContainer.small {
   height: size34;
   width: size34;
-  margin-right: calc((size34 * -1) - spaceXXSmall);
+  margin-left: calc(size34 * -1);
+}
+
+.loader {
+  background-color: colorBackgroundTertiary;
 }

package/lib/components/Table/Row.js

@@ -77,7 +77,9 @@ function DefaultRow(_ref2) {
       sticky
     } = item;
     const value = data[key];
-    return Renderer ? /*#__PURE__*/React.createElement(Renderer, {
+    return Renderer ? /*#__PURE__*/React.createElement(Renderer
+    // eslint-disable-next-line react/no-array-index-key
+    , {
       key: index,
       data: data,
       extras: extras,
@@ -85,7 +87,9 @@ function DefaultRow(_ref2) {
       className: (0, _classify.default)({
         [_TableModule.default.stickyCell]: sticky
       })
-    }) : /*#__PURE__*/React.createElement(_Cell.SingleCell, {
+    }) : /*#__PURE__*/React.createElement(_Cell.SingleCell
+    // eslint-disable-next-line react/no-array-index-key
+    , {
       key: index,
       title: String(value),
       className: (0, _classify.default)(cellClassName, {

package/lib/components/Table/Row.js.flow

@@ -126,6 +126,7 @@ export function DefaultRow<T: GenericObject, U: GenericObject>({
         const value = data[key];
         return Renderer ? (
           <Renderer
+            // eslint-disable-next-line react/no-array-index-key
             key={index}
             data={data}
             extras={extras}
@@ -134,6 +135,7 @@ export function DefaultRow<T: GenericObject, U: GenericObject>({
           />
         ) : (
           <SingleCell
+            // eslint-disable-next-line react/no-array-index-key
             key={index}
             title={String(value)}
             className={classify(cellClassName, {[css.stickyCell]: sticky})}

package/lib/components/Table/TableHeader.js

@@ -100,7 +100,9 @@ function DefaultTableHeader(props) {
     return /*#__PURE__*/React.createElement(BasicHeadCell, {
       className: (0, _classify.default)({
         [_TableModule.default.selectedHeader]: sortKey === key && columnSortDirection !== 'original'
-      }, headerClassName),
+      }, headerClassName)
+      // eslint-disable-next-line react/no-array-index-key
+      ,
       key: index,
       scope: "col",
       onClick: headCellClickHandler

package/lib/components/Table/TableHeader.js.flow

@@ -166,6 +166,7 @@ export function DefaultTableHeader<T: GenericObject, U: GenericObject>(
               },
               headerClassName,
             )}
+            // eslint-disable-next-line react/no-array-index-key
             key={index}
             scope="col"
             onClick={headCellClickHandler}