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

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

@@ -3,7 +3,6 @@
 import * as React from 'react';
 
 import classify from '../../utils/classify';
-import {FormLabelMedium} from '../Text/Text';
 
 import css from './Toggle.module.css';
 
@@ -25,10 +24,11 @@ export type ToggleProps = {
   disabled?: boolean,
   focused?: boolean,
   value?: string,
+  ariaLabel?: string,
 };
 
-export const Toggle: React$AbstractComponent<ToggleProps, HTMLLabelElement> =
-  React.forwardRef<ToggleProps, HTMLLabelElement>(
+export const Toggle: React$AbstractComponent<ToggleProps, HTMLInputElement> =
+  React.forwardRef<ToggleProps, HTMLInputElement>(
     (
       {
         name = 'toggle',
@@ -39,11 +39,13 @@ export const Toggle: React$AbstractComponent<ToggleProps, HTMLLabelElement> =
         checked,
         focused,
         onChange,
+        ariaLabel,
         ...props
       }: ToggleProps,
-      ref,
+      forwardRef,
     ): React.Node => {
       const toggleInput = React.createRef<HTMLInputElement>();
+      React.useImperativeHandle(forwardRef, () => toggleInput.current);
       const handleOnChange = () => {
         if (!disabled) {
           onChange &&
@@ -54,13 +56,17 @@ export const Toggle: React$AbstractComponent<ToggleProps, HTMLLabelElement> =
         }
       };
 
+      const onWrapClickHandler = () => {
+        toggleInput.current?.click();
+      };
+
       React.useEffect(() => {
         if (toggleInput.current && focused) {
           toggleInput.current.focus();
         }
       }, [focused]);
       return (
-        <label
+        <div
           className={classify(
             css.container,
             {
@@ -68,7 +74,7 @@ export const Toggle: React$AbstractComponent<ToggleProps, HTMLLabelElement> =
             },
             classNames?.wrapper,
           )}
-          ref={ref}
+          onClick={onWrapClickHandler}
         >
           <span className={css.toggleWrap}>
             <input
@@ -79,6 +85,7 @@ export const Toggle: React$AbstractComponent<ToggleProps, HTMLLabelElement> =
               onChange={handleOnChange}
               ref={toggleInput}
               disabled={disabled}
+              aria-label={ariaLabel || children}
               {...props}
             />
             <span
@@ -88,14 +95,11 @@ export const Toggle: React$AbstractComponent<ToggleProps, HTMLLabelElement> =
             />
           </span>
           {React.Children.count(children) > 0 && (
-            <FormLabelMedium
-              color="secondary"
-              className={classify(css.toggleLabel, classNames?.label)}
-            >
+            <div className={classify(css.toggleLabel, classNames?.label)}>
               {children}
-            </FormLabelMedium>
+            </div>
           )}
-        </label>
+        </div>
       );
     },
   );

package/lib/components/Toggle/Toggle.module.css

@@ -138,5 +138,7 @@
 }
 
 .toggleLabel {
+  composes: formLabelMedium from '../../styles/typography.module.css';
+  composes: secondary from '../../styles/typography.module.css';
   margin-left: spaceNone;
 }

package/lib/utils/click-away.js.flow

@@ -16,7 +16,7 @@ export type ChildProps = {
   anchorRef: (?HTMLElement) => mixed,
 };
 
-type ClickAwayProps = {
+export type ClickAwayProps = {
   closeOnEscapeKeypress?: boolean,
   children: (props: ChildProps) => React.Node,
   shouldCancel: (event: MouseEvent) => boolean,

package/package.json

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