@spaced-out/ui-design-system 0.1.15 → 0.1.17

package/lib/components/Checkbox/Checkbox.js

@@ -7,13 +7,12 @@ exports.Checkbox = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _Icon = require("../Icon");
-var _Text = require("../Text/Text");
 var _CheckboxModule = _interopRequireDefault(require("./Checkbox.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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 Checkbox = _ref => {
+const Checkbox = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
   let {
     name = 'checkbox',
     value = '',
@@ -26,9 +25,11 @@ const Checkbox = _ref => {
     onChange,
     align,
     classNames,
-    tabIndex = 0
+    tabIndex = 0,
+    ariaLabel = ''
   } = _ref;
   const checkboxInput = /*#__PURE__*/React.createRef();
+  React.useImperativeHandle(forwardRef, () => checkboxInput.current);
   const handleOnChange = () => {
     if (!disabled) {
       onChange && onChange({
@@ -50,17 +51,21 @@ const Checkbox = _ref => {
       checkboxInput.current.indeterminate = false;
     }
   }, [indeterminate]);
-  return /*#__PURE__*/React.createElement("label", {
+  const onClickHandler = () => {
+    checkboxInput.current?.click();
+  };
+  return /*#__PURE__*/React.createElement("div", {
     "data-testid": "checkbox",
     className: (0, _classify.default)(_CheckboxModule.default.checkboxContainer, {
       [_CheckboxModule.default.disabled]: disabled,
       [_CheckboxModule.default.horizontalCheckbox]: align === 'horizontal-fixed',
       [_CheckboxModule.default.fluidCheckbox]: align === 'horizontal-fluid'
-    }, classNames?.wrapper)
+    }, classNames?.wrapper),
+    onClick: onClickHandler
   }, /*#__PURE__*/React.createElement("span", {
     className: (0, _classify.default)(_CheckboxModule.default.checkboxSquare, {
       [_CheckboxModule.default.disabled]: disabled
-    })
+    }, classNames?.checkboxSquare)
   }, /*#__PURE__*/React.createElement("input", {
     tabIndex: disabled ? -1 : tabIndex,
     type: "checkbox",
@@ -70,7 +75,8 @@ const Checkbox = _ref => {
     onChange: handleOnChange,
     className: (0, _classify.default)(_CheckboxModule.default.inputCheckbox),
     disabled: disabled,
-    name: name
+    name: name,
+    "aria-label": ariaLabel || children
   }), /*#__PURE__*/React.createElement("span", {
     className: (0, _classify.default)(_CheckboxModule.default.checkboxSquareInner, {
       [_CheckboxModule.default.enabled]: !disabled && !error,
@@ -87,9 +93,8 @@ const Checkbox = _ref => {
     name: "check",
     size: "small",
     type: "regular"
-  }))), React.Children.count(children) > 0 && /*#__PURE__*/React.createElement(_Text.FormLabelMedium, {
-    color: "secondary",
+  }))), React.Children.count(children) > 0 && /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_CheckboxModule.default.checkboxLabel, classNames?.label)
   }, children));
-};
+});
 exports.Checkbox = Checkbox;

package/lib/components/Checkbox/Checkbox.js.flow

@@ -5,12 +5,15 @@ import * as React from 'react';
 import type {GroupAlign} from '../../types/common';
 import classify from '../../utils/classify';
 import {Icon} from '../Icon';
-import {FormLabelMedium} from '../Text/Text';
 
 import css from './Checkbox.module.css';
 
 
-type ClassNames = $ReadOnly<{wrapper?: string, label?: string}>;
+type ClassNames = $ReadOnly<{
+  wrapper?: string,
+  checkboxSquare?: string,
+  label?: string,
+}>;
 
 /*
   Note: An indeterminate state has a higher priority.
@@ -30,111 +33,129 @@ export type CheckboxProps = {
   align?: GroupAlign,
   classNames?: ClassNames,
   tabIndex?: number,
+  ariaLabel?: string,
 };
 
-export const Checkbox = ({
-  name = 'checkbox',
-  value = '',
-  children,
-  checked = false,
-  indeterminate = false,
-  focused = false,
-  disabled = false,
-  error = false,
-  onChange,
-  align,
-  classNames,
-  tabIndex = 0,
-}: CheckboxProps): React.Node => {
-  const checkboxInput = React.createRef<HTMLInputElement>();
+export const Checkbox: React$AbstractComponent<
+  CheckboxProps,
+  HTMLInputElement,
+> = React.forwardRef<CheckboxProps, HTMLInputElement>(
+  (
+    {
+      name = 'checkbox',
+      value = '',
+      children,
+      checked = false,
+      indeterminate = false,
+      focused = false,
+      disabled = false,
+      error = false,
+      onChange,
+      align,
+      classNames,
+      tabIndex = 0,
+      ariaLabel = '',
+    }: CheckboxProps,
+    forwardRef,
+  ): React.Node => {
+    const checkboxInput = React.createRef<HTMLInputElement>();
+    React.useImperativeHandle(forwardRef, () => checkboxInput.current);
 
-  const handleOnChange = () => {
-    if (!disabled) {
-      onChange &&
-        onChange({
-          value,
-          checked: !checked,
-        });
-    }
-  };
+    const handleOnChange = () => {
+      if (!disabled) {
+        onChange &&
+          onChange({
+            value,
+            checked: !checked,
+          });
+      }
+    };
 
-  React.useEffect(() => {
-    if (checkboxInput.current && focused) {
-      checkboxInput.current.focus();
-    }
-  }, [focused]);
+    React.useEffect(() => {
+      if (checkboxInput.current && focused) {
+        checkboxInput.current.focus();
+      }
+    }, [focused]);
 
-  React.useEffect(() => {
-    if (checkboxInput.current && indeterminate) {
-      checkboxInput.current.indeterminate = true;
-    }
-    if (checkboxInput.current && !indeterminate) {
-      checkboxInput.current.indeterminate = false;
-    }
-  }, [indeterminate]);
+    React.useEffect(() => {
+      if (checkboxInput.current && indeterminate) {
+        checkboxInput.current.indeterminate = true;
+      }
+      if (checkboxInput.current && !indeterminate) {
+        checkboxInput.current.indeterminate = false;
+      }
+    }, [indeterminate]);
 
-  return (
-    <label
-      data-testid="checkbox"
-      className={classify(
-        css.checkboxContainer,
-        {
-          [css.disabled]: disabled,
-          [css.horizontalCheckbox]: align === 'horizontal-fixed',
-          [css.fluidCheckbox]: align === 'horizontal-fluid',
-        },
-        classNames?.wrapper,
-      )}
-    >
-      <span
-        className={classify(css.checkboxSquare, {
-          [css.disabled]: disabled,
-        })}
+    const onClickHandler = () => {
+      checkboxInput.current?.click();
+    };
+
+    return (
+      <div
+        data-testid="checkbox"
+        className={classify(
+          css.checkboxContainer,
+          {
+            [css.disabled]: disabled,
+            [css.horizontalCheckbox]: align === 'horizontal-fixed',
+            [css.fluidCheckbox]: align === 'horizontal-fluid',
+          },
+          classNames?.wrapper,
+        )}
+        onClick={onClickHandler}
       >
-        <input
-          tabIndex={disabled ? -1 : tabIndex}
-          type="checkbox"
-          value={value}
-          checked={checked}
-          ref={checkboxInput}
-          onChange={handleOnChange}
-          className={classify(css.inputCheckbox)}
-          disabled={disabled}
-          name={name}
-        />
         <span
-          className={classify(css.checkboxSquareInner, {
-            [css.enabled]: !disabled && !error,
-            [css.disabled]: disabled,
-            [css.error]: error && !disabled,
-          })}
-        >
-          {indeterminate && (
-            <Icon
-              color={disabled ? 'disabled' : 'inversePrimary'}
-              name="hyphen"
-              size="small"
-              type="regular"
-            />
+          className={classify(
+            css.checkboxSquare,
+            {
+              [css.disabled]: disabled,
+            },
+            classNames?.checkboxSquare,
           )}
-          {checked && !indeterminate && (
-            <Icon
-              color={disabled ? 'disabled' : 'inversePrimary'}
-              name="check"
-              size="small"
-              type="regular"
-            />
-          )}
-        </span>
-      </span>
-      {React.Children.count(children) > 0 && (
-        <FormLabelMedium
-          color="secondary"
-          className={classify(css.checkboxLabel, classNames?.label)}
         >
-          {children}
-        </FormLabelMedium>
-      )}
-    </label>
-  );
-};
+          <input
+            tabIndex={disabled ? -1 : tabIndex}
+            type="checkbox"
+            value={value}
+            checked={checked}
+            ref={checkboxInput}
+            onChange={handleOnChange}
+            className={classify(css.inputCheckbox)}
+            disabled={disabled}
+            name={name}
+            aria-label={ariaLabel || children}
+          />
+          <span
+            className={classify(css.checkboxSquareInner, {
+              [css.enabled]: !disabled && !error,
+              [css.disabled]: disabled,
+              [css.error]: error && !disabled,
+            })}
+          >
+            {indeterminate && (
+              <Icon
+                color={disabled ? 'disabled' : 'inversePrimary'}
+                name="hyphen"
+                size="small"
+                type="regular"
+              />
+            )}
+            {checked && !indeterminate && (
+              <Icon
+                color={disabled ? 'disabled' : 'inversePrimary'}
+                name="check"
+                size="small"
+                type="regular"
+              />
+            )}
+          </span>
+        </span>
+        {React.Children.count(children) > 0 && (
+          <div className={classify(css.checkboxLabel, classNames?.label)}>
+            {children}
+          </div>
+        )}
+      </div>
+    );
+  },
+);

package/lib/components/Checkbox/Checkbox.module.css

@@ -58,6 +58,8 @@
 .checkboxSquare {
   width: size24;
   height: size24;
+  min-width: size24;
+  min-height: size24;
   box-sizing: border-box;
   display: flex;
   align-items: center;
@@ -158,5 +160,6 @@ input[type='checkbox']:checked + .error {
 }
 
 .checkboxLabel {
-  composes: truncate from '../../styles/typography.module.css';
+  composes: formLabelMedium from '../../styles/typography.module.css';
+  composes: secondary from '../../styles/typography.module.css';
 }

package/lib/components/Checkbox/CheckboxGroup.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; }
 
-const CheckboxGroup = _ref => {
+const CheckboxGroup = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
   let {
     align = 'vertical',
     disabled = false,
@@ -72,10 +72,11 @@ const CheckboxGroup = _ref => {
       [_CheckboxGroupModule.default.vertical]: align === 'vertical',
       [_CheckboxGroupModule.default.horizontal]: align === 'horizontal-fixed',
       [_CheckboxGroupModule.default.horizontalFluid]: align === 'horizontal-fluid'
-    }, classNames?.checkboxGroup)
+    }, classNames?.checkboxGroup),
+    ref: forwardRef
   }, childrenWithProps), error && /*#__PURE__*/React.createElement(_Text.BodySmall, {
     className: (0, _classify.default)(classNames?.errorText),
     color: "danger"
   }, errorText));
-};
+});
 exports.CheckboxGroup = CheckboxGroup;

package/lib/components/Checkbox/CheckboxGroup.js.flow

@@ -31,75 +31,86 @@ export type CheckboxGroupProps = {
   children?: React.Node,
 };
 
-export const CheckboxGroup = ({
-  align = 'vertical',
-  disabled = false,
-  name,
-  value: checkedList,
-  onChange,
-  classNames,
-  error = false,
-  errorText = '',
-  children,
-}: CheckboxGroupProps): React.Node => {
-  const onChangeHandler = ({value, checked}) => {
-    const checkedListTemp = checkedList ? [...checkedList] : [];
-    if (checked && !checkedListTemp.includes(value)) {
-      checkedListTemp.push(value);
-    } else if (!checked && checkedListTemp.includes(value)) {
-      for (let i = 0; i < checkedListTemp.length; i++) {
-        if (checkedListTemp[i] === value) {
-          checkedListTemp.splice(i, 1);
-          break;
+export const CheckboxGroup: React$AbstractComponent<
+  CheckboxGroupProps,
+  HTMLDivElement,
+> = React.forwardRef<CheckboxGroupProps, HTMLDivElement>(
+  (
+    {
+      align = 'vertical',
+      disabled = false,
+      name,
+      value: checkedList,
+      onChange,
+      classNames,
+      error = false,
+      errorText = '',
+      children,
+    }: CheckboxGroupProps,
+    forwardRef,
+  ): React.Node => {
+    const onChangeHandler = ({value, checked}) => {
+      const checkedListTemp = checkedList ? [...checkedList] : [];
+      if (checked && !checkedListTemp.includes(value)) {
+        checkedListTemp.push(value);
+      } else if (!checked && checkedListTemp.includes(value)) {
+        for (let i = 0; i < checkedListTemp.length; i++) {
+          if (checkedListTemp[i] === value) {
+            checkedListTemp.splice(i, 1);
+            break;
+          }
         }
       }
-    }
-    onChange && onChange(checkedListTemp);
-  };
+      onChange && onChange(checkedListTemp);
+    };
 
-  const childrenWithProps = React.Children.map(children, (child) => {
-    if (React.isValidElement(child)) {
-      const {
-        value,
-        disabled: disabledChild,
-        error: errorChild,
-        onChange,
-      } = child.props;
-      const childOnChange = (...params) => {
-        onChangeHandler(...params);
-        onChange && onChange(...params);
-      };
-      return React.cloneElement(child, {
-        name,
-        checked: !!checkedList?.includes(value),
-        onChange: childOnChange,
-        align,
-        error: errorChild || error,
-        disabled: disabledChild || disabled,
-      });
-    }
-    return child;
-  });
+    const childrenWithProps = React.Children.map(children, (child) => {
+      if (React.isValidElement(child)) {
+        const {
+          value,
+          disabled: disabledChild,
+          error: errorChild,
+          onChange,
+        } = child.props;
+        const childOnChange = (...params) => {
+          onChangeHandler(...params);
+          onChange && onChange(...params);
+        };
+        return React.cloneElement(child, {
+          name,
+          checked: !!checkedList?.includes(value),
+          onChange: childOnChange,
+          align,
+          error: errorChild || error,
+          disabled: disabledChild || disabled,
+        });
+      }
+      return child;
+    });
 
-  return (
-    <div className={classify(css.checkboxGroupContainer, classNames?.wrapper)}>
+    return (
       <div
-        className={classify(
-          {
-            [css.vertical]: align === 'vertical',
-            [css.horizontal]: align === 'horizontal-fixed',
-            [css.horizontalFluid]: align === 'horizontal-fluid',
-          },
-          classNames?.checkboxGroup,
-        )}
+        className={classify(css.checkboxGroupContainer, classNames?.wrapper)}
       >
-        {childrenWithProps}
+        <div
+          className={classify(
+            {
+              [css.vertical]: align === 'vertical',
+              [css.horizontal]: align === 'horizontal-fixed',
+              [css.horizontalFluid]: align === 'horizontal-fluid',
+            },
+            classNames?.checkboxGroup,
+          )}
+          ref={forwardRef}
+        >
+          {childrenWithProps}
+        </div>
+        {error && (
+          <BodySmall className={classify(classNames?.errorText)} color="danger">
+            {errorText}
+          </BodySmall>
+        )}
       </div>
-      {error && (
-        <BodySmall className={classify(classNames?.errorText)} color="danger">
-          {errorText}
-        </BodySmall>
-      )}
-    </div>
-  );
-};
+    );
+  },
+);

package/lib/components/Chip/Chip.js

@@ -22,7 +22,7 @@ const CHIP_SEMANTIC = Object.freeze({
   secondary: 'secondary'
 });
 exports.CHIP_SEMANTIC = CHIP_SEMANTIC;
-const Chip = _ref => {
+const Chip = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     classNames,
     semantic = 'primary',
@@ -39,6 +39,7 @@ const Chip = _ref => {
   return /*#__PURE__*/React.createElement("div", _extends({
     "data-testid": "Chip"
   }, rest, {
+    ref: ref,
     className: (0, _classify.classify)(_ChipModule.default.chipWrapper, {
       [_ChipModule.default.primary]: semantic === CHIP_SEMANTIC.primary,
       [_ChipModule.default.information]: semantic === CHIP_SEMANTIC.information,
@@ -70,5 +71,5 @@ const Chip = _ref => {
       }
     }
   }));
-};
+});
 exports.Chip = Chip;

package/lib/components/Chip/Chip.js.flow

@@ -48,64 +48,71 @@ export type SmallChipProps = {
 };
 
 export type ChipProps = MediumChipProps | SmallChipProps;
-export const Chip = ({
-  classNames,
-  semantic = 'primary',
-  size = 'medium',
-  children,
-  iconName = '',
-  iconType = 'regular',
-  dismissable = false,
-  onDismiss = () => null,
-  onClick,
-  disabled,
-  ...rest
-}: ChipProps): React.Node => (
-  <div
-    data-testid="Chip"
-    {...rest}
-    className={classify(
-      css.chipWrapper,
+export const Chip: React$AbstractComponent<ChipProps, HTMLDivElement> =
+  React.forwardRef<ChipProps, HTMLDivElement>(
+    (
       {
-        [css.primary]: semantic === CHIP_SEMANTIC.primary,
-        [css.information]: semantic === CHIP_SEMANTIC.information,
-        [css.success]: semantic === CHIP_SEMANTIC.success,
-        [css.warning]: semantic === CHIP_SEMANTIC.warning,
-        [css.danger]: semantic === CHIP_SEMANTIC.danger,
-        [css.secondary]: semantic === CHIP_SEMANTIC.secondary,
-        [css.medium]: size === 'medium',
-        [css.small]: size === 'small',
-        [css.dismissable]: dismissable,
-        [css.withIcon]: !!iconName && size !== 'small',
-        [css.disabled]: disabled,
-      },
-      classNames?.wrapper,
-    )}
-    onClick={onClick}
-  >
-    {iconName && size !== 'small' && (
-      <Icon
-        className={css.chipIcon}
-        name={iconName}
-        type={iconType}
-        size="small"
-      />
-    )}
-    <Truncate>{children}</Truncate>
+        classNames,
+        semantic = 'primary',
+        size = 'medium',
+        children,
+        iconName = '',
+        iconType = 'regular',
+        dismissable = false,
+        onDismiss = () => null,
+        onClick,
+        disabled,
+        ...rest
+      }: ChipProps,
+      ref,
+    ): React.Node => (
+      <div
+        data-testid="Chip"
+        {...rest}
+        ref={ref}
+        className={classify(
+          css.chipWrapper,
+          {
+            [css.primary]: semantic === CHIP_SEMANTIC.primary,
+            [css.information]: semantic === CHIP_SEMANTIC.information,
+            [css.success]: semantic === CHIP_SEMANTIC.success,
+            [css.warning]: semantic === CHIP_SEMANTIC.warning,
+            [css.danger]: semantic === CHIP_SEMANTIC.danger,
+            [css.secondary]: semantic === CHIP_SEMANTIC.secondary,
+            [css.medium]: size === 'medium',
+            [css.small]: size === 'small',
+            [css.dismissable]: dismissable,
+            [css.withIcon]: !!iconName && size !== 'small',
+            [css.disabled]: disabled,
+          },
+          classNames?.wrapper,
+        )}
+        onClick={onClick}
+      >
+        {iconName && size !== 'small' && (
+          <Icon
+            className={css.chipIcon}
+            name={iconName}
+            type={iconType}
+            size="small"
+          />
+        )}
+        <Truncate>{children}</Truncate>
 
-    {dismissable && size !== 'small' && (
-      <Icon
-        className={css.dismissIcon}
-        name="xmark"
-        type={iconType}
-        size="small"
-        onClick={(event) => {
-          event.stopPropagation();
-          if (!disabled && onDismiss) {
-            onDismiss(event);
-          }
-        }}
-      />
-    )}
-  </div>
-);
+        {dismissable && size !== 'small' && (
+          <Icon
+            className={css.dismissIcon}
+            name="xmark"
+            type={iconType}
+            size="small"
+            onClick={(event) => {
+              event.stopPropagation();
+              if (!disabled && onDismiss) {
+                onDismiss(event);
+              }
+            }}
+          />
+        )}
+      </div>
+    ),
+  );