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

package/lib/components/Textarea/Textarea.js

@@ -65,7 +65,7 @@ const Textarea_ = (props, ref) => {
       [_TextareaModule.default.small]: size === 'small',
       [_TextareaModule.default.locked]: locked
     })
-  }, /*#__PURE__*/React.createElement("textarea", _extends({
+  }, /*#__PURE__*/React.createElement("textarea", _extends({}, textareaProps, {
     disabled: locked || disabled,
     name: name,
     ref: ref,
@@ -74,7 +74,7 @@ const Textarea_ = (props, ref) => {
     onChange: onChange,
     onFocus: onFocus,
     onBlur: onBlur
-  }, textareaProps))), (Boolean(helperText) || error) && /*#__PURE__*/React.createElement("div", {
+  }))), (Boolean(helperText) || error) && /*#__PURE__*/React.createElement("div", {
     className: _TextareaModule.default.info
   }, /*#__PURE__*/React.createElement(_Text.BodySmall, {
     color: error && errorText ? 'danger' : disabled ? 'disabled' : 'secondary'

package/lib/components/Textarea/Textarea.js.flow

@@ -30,6 +30,7 @@ export type TextareaProps = {
   size?: 'medium' | 'small',
   required?: boolean,
   textCountLimit?: number,
+  ...
 };
 
 const Textarea_ = (props: TextareaProps, ref): React.Node => {
@@ -98,6 +99,7 @@ const Textarea_ = (props: TextareaProps, ref): React.Node => {
         })}
       >
         <textarea
+          {...textareaProps}
           disabled={locked || disabled}
           name={name}
           ref={ref}
@@ -106,7 +108,6 @@ const Textarea_ = (props: TextareaProps, ref): React.Node => {
           onChange={onChange}
           onFocus={onFocus}
           onBlur={onBlur}
-          {...textareaProps}
         ></textarea>
       </div>
       {(Boolean(helperText) || error) && (

package/lib/components/Toast/Toast.js

@@ -71,7 +71,7 @@ const ToastIcon = _ref => {
       });
   }
 };
-const ToastTitle = _ref2 => {
+const ToastTitle = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children,
     semantic = '',
@@ -79,17 +79,21 @@ const ToastTitle = _ref2 => {
   } = _ref2;
   return /*#__PURE__*/React.createElement(_Text.SubTitleSmall, _extends({
     color: TOAST_TITLE_COLOR[semantic]
-  }, props), children);
-};
+  }, props, {
+    ref: ref
+  }), children);
+});
 exports.ToastTitle = ToastTitle;
 ToastTitle.displayName = 'ToastTitle';
-const ToastBody = _ref3 => {
+const ToastBody = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     children,
     ...props
   } = _ref3;
-  return /*#__PURE__*/React.createElement(_Text.BodyMedium, props, children);
-};
+  return /*#__PURE__*/React.createElement(_Text.BodyMedium, _extends({}, props, {
+    ref: ref
+  }), children);
+});
 exports.ToastBody = ToastBody;
 ToastBody.displayName = 'ToastBody';
 const ToastFooter = _ref4 => {

package/lib/components/Toast/Toast.js.flow

@@ -112,14 +112,15 @@ export type ToastTitleProps = {
   color?: ColorTypes,
 };
 
-export const ToastTitle = ({
-  children,
-  semantic = '',
-  ...props
-}: ToastTitleProps): React.Node => (
-  <SubTitleSmall color={TOAST_TITLE_COLOR[semantic]} {...props}>
-    {children}
-  </SubTitleSmall>
+export const ToastTitle: React$AbstractComponent<
+  ToastTitleProps,
+  HTMLHeadingElement,
+> = React.forwardRef<ToastTitleProps, HTMLHeadingElement>(
+  ({children, semantic = '', ...props}: ToastTitleProps, ref): React.Node => (
+    <SubTitleSmall color={TOAST_TITLE_COLOR[semantic]} {...props} ref={ref}>
+      {children}
+    </SubTitleSmall>
+  ),
 );
 
 ToastTitle.displayName = 'ToastTitle';
@@ -130,8 +131,15 @@ export type ToastBodyProps = {
   color?: ColorTypes,
 };
 
-export const ToastBody = ({children, ...props}: ToastBodyProps): React.Node => (
-  <BodyMedium {...props}>{children}</BodyMedium>
+export const ToastBody: React$AbstractComponent<
+  ToastBodyProps,
+  HTMLParagraphElement,
+> = React.forwardRef<ToastBodyProps, HTMLParagraphElement>(
+  ({children, ...props}: ToastBodyProps, ref): React.Node => (
+    <BodyMedium {...props} ref={ref}>
+      {children}
+    </BodyMedium>
+  ),
 );
 
 ToastBody.displayName = 'ToastBody';

package/lib/components/Toggle/Toggle.js

@@ -12,7 +12,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 Toggle = _ref => {
+const Toggle = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     name = 'toggle',
     value = '',
@@ -41,7 +41,8 @@ const Toggle = _ref => {
   return /*#__PURE__*/React.createElement("label", {
     className: (0, _classify.default)(_ToggleModule.default.container, {
       [_ToggleModule.default.disabled]: disabled
-    }, classNames?.wrapper)
+    }, classNames?.wrapper),
+    ref: ref
   }, /*#__PURE__*/React.createElement("span", {
     className: _ToggleModule.default.toggleWrap
   }, /*#__PURE__*/React.createElement("input", _extends({
@@ -60,5 +61,5 @@ const Toggle = _ref => {
     color: "secondary",
     className: (0, _classify.default)(_ToggleModule.default.toggleLabel, classNames?.label)
   }, children));
-};
+});
 exports.Toggle = Toggle;

package/lib/components/Toggle/Toggle.js.flow

@@ -27,68 +27,75 @@ export type ToggleProps = {
   value?: string,
 };
 
-export const Toggle = ({
-  name = 'toggle',
-  value = '',
-  classNames,
-  children,
-  disabled,
-  checked,
-  focused,
-  onChange,
-  ...props
-}: ToggleProps): React.Node => {
-  const toggleInput = React.createRef<HTMLInputElement>();
-  const handleOnChange = () => {
-    if (!disabled) {
-      onChange &&
-        onChange({
-          value,
-          checked: !checked,
-        });
-    }
-  };
+export const Toggle: React$AbstractComponent<ToggleProps, HTMLLabelElement> =
+  React.forwardRef<ToggleProps, HTMLLabelElement>(
+    (
+      {
+        name = 'toggle',
+        value = '',
+        classNames,
+        children,
+        disabled,
+        checked,
+        focused,
+        onChange,
+        ...props
+      }: ToggleProps,
+      ref,
+    ): React.Node => {
+      const toggleInput = React.createRef<HTMLInputElement>();
+      const handleOnChange = () => {
+        if (!disabled) {
+          onChange &&
+            onChange({
+              value,
+              checked: !checked,
+            });
+        }
+      };
 
-  React.useEffect(() => {
-    if (toggleInput.current && focused) {
-      toggleInput.current.focus();
-    }
-  }, [focused]);
-  return (
-    <label
-      className={classify(
-        css.container,
-        {
-          [css.disabled]: disabled,
-        },
-        classNames?.wrapper,
-      )}
-    >
-      <span className={css.toggleWrap}>
-        <input
-          type="checkbox"
-          name={name}
-          value={value}
-          checked={checked}
-          onChange={handleOnChange}
-          ref={toggleInput}
-          disabled={disabled}
-          {...props}
-        />
-        <span
-          className={classify(css.toggle, {
-            [css.disabledButton]: disabled,
-          })}
-        />
-      </span>
-      {React.Children.count(children) > 0 && (
-        <FormLabelMedium
-          color="secondary"
-          className={classify(css.toggleLabel, classNames?.label)}
+      React.useEffect(() => {
+        if (toggleInput.current && focused) {
+          toggleInput.current.focus();
+        }
+      }, [focused]);
+      return (
+        <label
+          className={classify(
+            css.container,
+            {
+              [css.disabled]: disabled,
+            },
+            classNames?.wrapper,
+          )}
+          ref={ref}
         >
-          {children}
-        </FormLabelMedium>
-      )}
-    </label>
+          <span className={css.toggleWrap}>
+            <input
+              type="checkbox"
+              name={name}
+              value={value}
+              checked={checked}
+              onChange={handleOnChange}
+              ref={toggleInput}
+              disabled={disabled}
+              {...props}
+            />
+            <span
+              className={classify(css.toggle, {
+                [css.disabledButton]: disabled,
+              })}
+            />
+          </span>
+          {React.Children.count(children) > 0 && (
+            <FormLabelMedium
+              color="secondary"
+              className={classify(css.toggleLabel, classNames?.label)}
+            >
+              {children}
+            </FormLabelMedium>
+          )}
+        </label>
+      );
+    },
   );
-};

package/lib/components/Truncate/Truncate.js

@@ -11,7 +11,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; }
 
-const BaseTruncate = _ref => {
+const BaseTruncate = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     line = 1,
@@ -22,11 +22,12 @@ const BaseTruncate = _ref => {
     style: {
       WebkitLineClamp: `${line}`
     },
-    title: showFullTextOnHover ? children : ''
+    title: showFullTextOnHover ? children : '',
+    ref: ref
   }, children);
-};
+});
 exports.BaseTruncate = BaseTruncate;
-const Truncate = _ref2 => {
+const Truncate = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children,
     line = 1,
@@ -45,14 +46,16 @@ const Truncate = _ref2 => {
         style: {
           WebkitLineClamp: `${line}`
         },
-        title: showFullTextOnHover ? children : ''
+        title: showFullTextOnHover ? children : '',
+        ref
       });
     }
     return /*#__PURE__*/React.createElement(BaseTruncate, {
       line: line,
-      showFullTextOnHover: showFullTextOnHover
+      showFullTextOnHover: showFullTextOnHover,
+      ref: ref
     }, children);
   }
   return null;
-};
+});
 exports.Truncate = Truncate;

package/lib/components/Truncate/Truncate.js.flow

@@ -13,42 +13,54 @@ export type TruncateProps = {
   showFullTextOnHover?: boolean,
 };
 
-export const BaseTruncate = ({
-  children,
-  line = 1,
-  showFullTextOnHover = false,
-}: TruncateProps): React.Node => (
-  <span
-    className={classify(css.truncateLineClamp)}
-    style={{WebkitLineClamp: `${line}`}}
-    title={showFullTextOnHover ? children : ''}
-  >
-    {children}
-  </span>
+export const BaseTruncate: React$AbstractComponent<
+  TruncateProps,
+  HTMLSpanElement,
+> = React.forwardRef<TruncateProps, HTMLSpanElement>(
+  (
+    {children, line = 1, showFullTextOnHover = false}: TruncateProps,
+    ref,
+  ): React.Node => (
+    <span
+      className={classify(css.truncateLineClamp)}
+      style={{WebkitLineClamp: `${line}`}}
+      title={showFullTextOnHover ? children : ''}
+      ref={ref}
+    >
+      {children}
+    </span>
+  ),
 );
 
-export const Truncate = ({
-  children,
-  line = 1,
-  showFullTextOnHover = false,
-}: TruncateProps): React.Node => {
-  const arrayChildren = React.Children.toArray(children);
-  if (arrayChildren.length) {
-    const child = arrayChildren[0];
-    if (React.isValidElement(child)) {
-      const {className, children} = child.props;
-
-      return React.cloneElement(child, {
-        className: classify(css.truncateLineClamp, className),
-        style: {WebkitLineClamp: `${line}`},
-        title: showFullTextOnHover ? children : '',
-      });
-    }
-    return (
-      <BaseTruncate line={line} showFullTextOnHover={showFullTextOnHover}>
-        {children}
-      </BaseTruncate>
-    );
-  }
-  return null;
-};
+export const Truncate: React$AbstractComponent<TruncateProps, HTMLSpanElement> =
+  React.forwardRef<TruncateProps, HTMLSpanElement>(
+    (
+      {children, line = 1, showFullTextOnHover = false}: TruncateProps,
+      ref,
+    ): React.Node => {
+      const arrayChildren = React.Children.toArray(children);
+      if (arrayChildren.length) {
+        const child = arrayChildren[0];
+        if (React.isValidElement(child)) {
+          const {className, children} = child.props;
+
+          return React.cloneElement(child, {
+            className: classify(css.truncateLineClamp, className),
+            style: {WebkitLineClamp: `${line}`},
+            title: showFullTextOnHover ? children : '',
+            ref,
+          });
+        }
+        return (
+          <BaseTruncate
+            line={line}
+            showFullTextOnHover={showFullTextOnHover}
+            ref={ref}
+          >
+            {children}
+          </BaseTruncate>
+        );
+      }
+      return null;
+    },
+  );

package/lib/components/Typeahead/Typeahead.js

@@ -75,7 +75,7 @@ const Typeahead = _ref => {
       className: (0, _classify.classify)(_TypeaheadModule.default.typeaheadContainer, classNames?.wrapper),
       ref: typeaheadRef,
       onClickCapture: cancelNext
-    }, /*#__PURE__*/React.createElement(_SearchInput.SearchInput, _extends({
+    }, /*#__PURE__*/React.createElement(_SearchInput.SearchInput, _extends({}, inputProps, {
       boxRef: reference,
       size: size,
       placeholder: placeholder,
@@ -83,8 +83,7 @@ const Typeahead = _ref => {
       classNames: {
         box: classNames?.box
       },
-      isLoading: isLoading
-    }, inputProps, {
+      isLoading: isLoading,
       onChange: e => {
         e.stopPropagation();
         onSearch && onSearch(e);

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

@@ -39,6 +39,7 @@ export type TypeaheadProps = {
   onClear?: () => void,
   isLoading?: boolean,
   menuOpenOffset?: number,
+  ...
 };
 
 export const Typeahead = ({
@@ -97,13 +98,13 @@ export const Typeahead = ({
           onClickCapture={cancelNext}
         >
           <SearchInput
+            {...inputProps}
             boxRef={reference}
             size={size}
             placeholder={placeholder}
             value={typeaheadInputText}
             classNames={{box: classNames?.box}}
             isLoading={isLoading}
-            {...inputProps}
             onChange={(e) => {
               e.stopPropagation();
               onSearch && onSearch(e);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {