@nulogy/components 15.1.4 → 15.2.0

package/README.md

@@ -40,20 +40,18 @@ Note that loading fonts from Google API is just an example and not the most perf
 
 Wrap your application in the NDSProvider component to access Nulogy's theme values and add typographic defaults.
 
-```js
+```jsx
 import React from "react";
 import { NDSProvider } from "@nulogy/components";
 
-class App extends React.Component {
-  render() {
-    return <NDSProvider>// your application</NDSProvider>;
-  }
+export default function App() {
+  return <NDSProvider>// your application</NDSProvider>;
 }
 ```
 
 ### 3. Import desired components
 
-```js
+```jsx
 import { Button } from "@nulogy/components";
 
 const SomeView = () => <Button>Click me</Button>;

package/dist/main.js

@@ -25973,10 +25973,12 @@
       componentId: "sc-lf392x-0"
     })(function (_ref) {
       var _ref$color = _ref.color,
-        color = _ref$color === void 0 ? "black" : _ref$color;
+        color = _ref$color === void 0 ? "black" : _ref$color,
+        disabled = _ref.disabled;
       return {
         color: color,
-        display: "inline-block"
+        display: "inline-block",
+        cursor: disabled ? undefined : "pointer"
       };
     }, display, space, color);
 
@@ -54987,8 +54989,8 @@
       }
     };
 
-    var getSwitchBackground = function getSwitchBackground(toggled) {
-      return toggled ? "darkBlue" : "darkGrey";
+    var getSwitchBackground = function getSwitchBackground(checked) {
+      return checked ? "darkBlue" : "darkGrey";
     };
     var animationConfig = {
       transition: {
@@ -55002,8 +55004,7 @@
     function Switch(_ref) {
       var children = _ref.children,
         disabled = _ref.disabled,
-        toggled = _ref.toggled,
-        onClick = _ref.onClick;
+        checked = _ref.checked;
       var componentVariant = useComponentVariant();
       return /*#__PURE__*/React__default["default"].createElement(AnimatedBox, {
         marginTop: componentVariant === "touch" ? "x0_25" : "none",
@@ -55011,14 +55012,13 @@
         flexShrink: 0,
         height: "24px",
         width: "48px",
-        bg: disabled ? "grey" : getSwitchBackground(toggled),
+        bg: disabled ? "grey" : getSwitchBackground(checked),
         borderRadius: "20px",
         padding: "2px",
         boxShadow: "small",
-        animate: toggled ? "toggled" : "initial",
+        animate: checked ? "toggled" : "initial",
         whileHover: "active",
-        whileFocus: "active",
-        onClick: onClick
+        whileFocus: "active"
       }, children);
     }
     var Slider = function Slider(_ref2) {
@@ -55068,123 +55068,107 @@
         boxShadow: disabled ? undefined : theme.shadows.focus
       }, _ref4;
     });
-    var ToggleButton = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
-      var disabled = props.disabled,
-        defaultToggled = props.defaultToggled,
-        toggled = props.toggled;
-      var inputRef = React.useRef(null);
-      React.useImperativeHandle(ref, function () {
-        return inputRef.current;
-      });
-      var handleClick = function handleClick() {
-        if (inputRef.current) {
-          // triggers the onChange event on a checkbox input
-          inputRef.current.click();
-        }
-      };
+    var ToggleButton = /*#__PURE__*/React__default["default"].forwardRef(function (_a, ref) {
+      var disabled = _a.disabled,
+        checked = _a.checked,
+        props = __rest(_a, ["disabled", "checked"]);
       return /*#__PURE__*/React__default["default"].createElement(Switch, {
         disabled: disabled,
-        toggled: toggled,
-        onClick: handleClick
+        checked: checked
       }, /*#__PURE__*/React__default["default"].createElement(ToggleInput, Object.assign({
-        ref: inputRef,
         type: "checkbox",
-        defaultChecked: defaultToggled,
-        value: toggled ? "on" : "off"
+        role: "switch",
+        checked: checked,
+        ref: ref,
+        value: checked ? "on" : "off"
       }, props)), /*#__PURE__*/React__default["default"].createElement(Slider, {
         disabled: disabled
       }));
     });
 
-    var BaseToggle = function BaseToggle(_a) {
-      var disabled = _a.disabled,
-        onChange = _a.onChange,
-        onText = _a.onText,
-        offText = _a.offText,
+    var Toggle = /*#__PURE__*/React__default["default"].forwardRef(function (_a, ref) {
+      var _b;
+      var checked = _a.checked,
+        variant = _a.variant,
         className = _a.className,
-        required = _a.required,
-        error = _a.error,
-        id = _a.id,
         labelText = _a.labelText,
         requirementText = _a.requirementText,
         helpText = _a.helpText,
         hint = _a.hint,
+        disabled = _a.disabled,
         toggled = _a.toggled,
-        _a$onClick = _a.onClick,
-        onClick = _a$onClick === void 0 ? noop$2 : _a$onClick,
-        variant = _a.variant,
+        onChange = _a.onChange,
+        onText = _a.onText,
+        offText = _a.offText,
+        required = _a.required,
+        error = _a.error,
+        id = _a.id,
+        defaultToggled = _a.defaultToggled,
+        onClick = _a.onClick,
         dataTestId = _a["data-testid"],
-        props = __rest(_a, ["disabled", "onChange", "onText", "offText", "className", "required", "error", "id", "labelText", "requirementText", "helpText", "hint", "toggled", "onClick", "variant", "data-testid"]);
-      var handleClick = function handleClick(e) {
-        onClick(e);
-      };
+        props = __rest(_a, ["checked", "variant", "className", "labelText", "requirementText", "helpText", "hint", "disabled", "toggled", "onChange", "onText", "offText", "required", "error", "id", "defaultToggled", "onClick", "data-testid"]);
       var componentVariant = useComponentVariant(variant);
       var spaceProps = getSubset(props, propTypes$1.space);
       var restProps = omitSubset(props, propTypes$1.space);
+      React.useEffect(function () {
+        if (defaultToggled) {
+          console.warn("defaultToggled is deprecated. Use checked instead.");
+        }
+        if (checked) {
+          console.warn("checked is deprecated. Use checked instead.");
+        }
+        if (onClick) {
+          console.warn("onClick is deprecated. Use onChange instead.");
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, []);
+      var _checked = (_b = checked !== null && checked !== void 0 ? checked : defaultToggled) !== null && _b !== void 0 ? _b : toggled;
+      var _onChange = React.useCallback(function (e) {
+        if (onClick) {
+          onClick(e);
+        }
+        if (onChange) {
+          onChange(e);
+        }
+      }, [onClick, onChange]);
+      React.useEffect(function () {
+        if (_checked !== undefined && !(onChange || onClick)) {
+          console.warn("onChange or onClick is required when checked is set.");
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, []);
       return /*#__PURE__*/React__default["default"].createElement(Field, Object.assign({
         className: className,
         alignItems: "flex-start",
         py: "half"
-      }, spaceProps), /*#__PURE__*/React__default["default"].createElement(MaybeFieldLabel, {
+      }, spaceProps), /*#__PURE__*/React__default["default"].createElement(FieldLabel, {
+        htmlFor: id,
         labelText: labelText,
         requirementText: requirementText,
         helpText: helpText,
-        hint: hint
-      }, /*#__PURE__*/React__default["default"].createElement(ClickInputLabel, {
-        variant: componentVariant,
-        as: "div",
-        onClick: onClick,
+        hint: hint,
         disabled: disabled,
+        variant: componentVariant,
         "data-testid": dataTestId
+      }, /*#__PURE__*/React__default["default"].createElement(Flex, {
+        flexDirection: "row",
+        alignItems: "center"
       }, /*#__PURE__*/React__default["default"].createElement(ToggleButton, Object.assign({
         id: id,
-        checked: toggled,
-        onChange: onChange,
+        checked: _checked,
+        onChange: _onChange,
         disabled: disabled,
         required: required,
         "aria-required": required,
-        "aria-invalid": error,
-        "aria-labelledby": labelText && labelText + "-label",
-        onClick: handleClick,
-        toggled: toggled
+        "aria-invalid": error
       }, restProps, {
-        ref: props.innerRef
+        ref: ref
       })), (onText || offText) && (/*#__PURE__*/React__default["default"].createElement(Text, {
         disabled: disabled,
         mb: "none",
-        ml: "x1"
-      }, toggled ? onText : offText)))));
-    };
-    var StatefulToggle = function StatefulToggle(_a) {
-      var defaultToggled = _a.defaultToggled,
-        _a$onClick2 = _a.onClick,
-        onClick = _a$onClick2 === void 0 ? noop$2 : _a$onClick2,
-        disabled = _a.disabled,
-        props = __rest(_a, ["defaultToggled", "onClick", "disabled"]);
-      var _useState = React.useState(defaultToggled),
-        toggled = _useState[0],
-        setToggled = _useState[1];
-      var handleClick = function handleClick(e) {
-        if (!disabled) setToggled(!toggled);
-        onClick(e);
-      };
-      return /*#__PURE__*/React__default["default"].createElement(BaseToggle, Object.assign({
-        toggled: toggled,
-        onClick: handleClick,
-        disabled: disabled
-      }, props));
-    };
-    var Toggle = function Toggle(_a) {
-      var toggled = _a.toggled,
-        props = __rest(_a, ["toggled"]);
-      return toggled === undefined ? /*#__PURE__*/React__default["default"].createElement(StatefulToggle, Object.assign({}, props)) : /*#__PURE__*/React__default["default"].createElement(BaseToggle, Object.assign({
-        toggled: toggled
-      }, props));
-    };
-    var ToggleComponent = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
-      return /*#__PURE__*/React__default["default"].createElement(Toggle, Object.assign({
-        innerRef: ref
-      }, props));
+        ml: "x1",
+        "aria-hidden": true
+      }, _checked ? onText : offText)))));
     });
 
     var TOPBAR = {
@@ -55781,7 +55765,7 @@
     exports.TimeRange = TimeRange;
     exports.Toast = Toast;
     exports.ToastContainer = ToastContainer;
-    exports.Toggle = ToggleComponent;
+    exports.Toggle = Toggle;
     exports.Tooltip = Tooltip;
     exports.TopBar = TopBar;
     exports.TruncatedText = TruncatedText;

package/dist/main.module.js

@@ -25956,10 +25956,12 @@ var Label = styled.label.withConfig({
   componentId: "sc-lf392x-0"
 })(function (_ref) {
   var _ref$color = _ref.color,
-    color = _ref$color === void 0 ? "black" : _ref$color;
+    color = _ref$color === void 0 ? "black" : _ref$color,
+    disabled = _ref.disabled;
   return {
     color: color,
-    display: "inline-block"
+    display: "inline-block",
+    cursor: disabled ? undefined : "pointer"
   };
 }, display, space, color);
 
@@ -54970,8 +54972,8 @@ var toast = {
   }
 };
 
-var getSwitchBackground = function getSwitchBackground(toggled) {
-  return toggled ? "darkBlue" : "darkGrey";
+var getSwitchBackground = function getSwitchBackground(checked) {
+  return checked ? "darkBlue" : "darkGrey";
 };
 var animationConfig = {
   transition: {
@@ -54985,8 +54987,7 @@ var animationConfig = {
 function Switch(_ref) {
   var children = _ref.children,
     disabled = _ref.disabled,
-    toggled = _ref.toggled,
-    onClick = _ref.onClick;
+    checked = _ref.checked;
   var componentVariant = useComponentVariant();
   return /*#__PURE__*/React__default.createElement(AnimatedBox, {
     marginTop: componentVariant === "touch" ? "x0_25" : "none",
@@ -54994,14 +54995,13 @@ function Switch(_ref) {
     flexShrink: 0,
     height: "24px",
     width: "48px",
-    bg: disabled ? "grey" : getSwitchBackground(toggled),
+    bg: disabled ? "grey" : getSwitchBackground(checked),
     borderRadius: "20px",
     padding: "2px",
     boxShadow: "small",
-    animate: toggled ? "toggled" : "initial",
+    animate: checked ? "toggled" : "initial",
     whileHover: "active",
-    whileFocus: "active",
-    onClick: onClick
+    whileFocus: "active"
   }, children);
 }
 var Slider = function Slider(_ref2) {
@@ -55051,123 +55051,107 @@ var ToggleInput = styled.input.withConfig({
     boxShadow: disabled ? undefined : theme.shadows.focus
   }, _ref4;
 });
-var ToggleButton = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
-  var disabled = props.disabled,
-    defaultToggled = props.defaultToggled,
-    toggled = props.toggled;
-  var inputRef = useRef(null);
-  useImperativeHandle(ref, function () {
-    return inputRef.current;
-  });
-  var handleClick = function handleClick() {
-    if (inputRef.current) {
-      // triggers the onChange event on a checkbox input
-      inputRef.current.click();
-    }
-  };
+var ToggleButton = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
+  var disabled = _a.disabled,
+    checked = _a.checked,
+    props = __rest(_a, ["disabled", "checked"]);
   return /*#__PURE__*/React__default.createElement(Switch, {
     disabled: disabled,
-    toggled: toggled,
-    onClick: handleClick
+    checked: checked
   }, /*#__PURE__*/React__default.createElement(ToggleInput, Object.assign({
-    ref: inputRef,
     type: "checkbox",
-    defaultChecked: defaultToggled,
-    value: toggled ? "on" : "off"
+    role: "switch",
+    checked: checked,
+    ref: ref,
+    value: checked ? "on" : "off"
   }, props)), /*#__PURE__*/React__default.createElement(Slider, {
     disabled: disabled
   }));
 });
 
-var BaseToggle = function BaseToggle(_a) {
-  var disabled = _a.disabled,
-    onChange = _a.onChange,
-    onText = _a.onText,
-    offText = _a.offText,
+var Toggle = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
+  var _b;
+  var checked = _a.checked,
+    variant = _a.variant,
     className = _a.className,
-    required = _a.required,
-    error = _a.error,
-    id = _a.id,
     labelText = _a.labelText,
     requirementText = _a.requirementText,
     helpText = _a.helpText,
     hint = _a.hint,
+    disabled = _a.disabled,
     toggled = _a.toggled,
-    _a$onClick = _a.onClick,
-    onClick = _a$onClick === void 0 ? noop$2 : _a$onClick,
-    variant = _a.variant,
+    onChange = _a.onChange,
+    onText = _a.onText,
+    offText = _a.offText,
+    required = _a.required,
+    error = _a.error,
+    id = _a.id,
+    defaultToggled = _a.defaultToggled,
+    onClick = _a.onClick,
     dataTestId = _a["data-testid"],
-    props = __rest(_a, ["disabled", "onChange", "onText", "offText", "className", "required", "error", "id", "labelText", "requirementText", "helpText", "hint", "toggled", "onClick", "variant", "data-testid"]);
-  var handleClick = function handleClick(e) {
-    onClick(e);
-  };
+    props = __rest(_a, ["checked", "variant", "className", "labelText", "requirementText", "helpText", "hint", "disabled", "toggled", "onChange", "onText", "offText", "required", "error", "id", "defaultToggled", "onClick", "data-testid"]);
   var componentVariant = useComponentVariant(variant);
   var spaceProps = getSubset(props, propTypes$1.space);
   var restProps = omitSubset(props, propTypes$1.space);
+  useEffect(function () {
+    if (defaultToggled) {
+      console.warn("defaultToggled is deprecated. Use checked instead.");
+    }
+    if (checked) {
+      console.warn("checked is deprecated. Use checked instead.");
+    }
+    if (onClick) {
+      console.warn("onClick is deprecated. Use onChange instead.");
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var _checked = (_b = checked !== null && checked !== void 0 ? checked : defaultToggled) !== null && _b !== void 0 ? _b : toggled;
+  var _onChange = useCallback(function (e) {
+    if (onClick) {
+      onClick(e);
+    }
+    if (onChange) {
+      onChange(e);
+    }
+  }, [onClick, onChange]);
+  useEffect(function () {
+    if (_checked !== undefined && !(onChange || onClick)) {
+      console.warn("onChange or onClick is required when checked is set.");
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   return /*#__PURE__*/React__default.createElement(Field, Object.assign({
     className: className,
     alignItems: "flex-start",
     py: "half"
-  }, spaceProps), /*#__PURE__*/React__default.createElement(MaybeFieldLabel, {
+  }, spaceProps), /*#__PURE__*/React__default.createElement(FieldLabel, {
+    htmlFor: id,
     labelText: labelText,
     requirementText: requirementText,
     helpText: helpText,
-    hint: hint
-  }, /*#__PURE__*/React__default.createElement(ClickInputLabel, {
-    variant: componentVariant,
-    as: "div",
-    onClick: onClick,
+    hint: hint,
     disabled: disabled,
+    variant: componentVariant,
     "data-testid": dataTestId
+  }, /*#__PURE__*/React__default.createElement(Flex, {
+    flexDirection: "row",
+    alignItems: "center"
   }, /*#__PURE__*/React__default.createElement(ToggleButton, Object.assign({
     id: id,
-    checked: toggled,
-    onChange: onChange,
+    checked: _checked,
+    onChange: _onChange,
     disabled: disabled,
     required: required,
     "aria-required": required,
-    "aria-invalid": error,
-    "aria-labelledby": labelText && labelText + "-label",
-    onClick: handleClick,
-    toggled: toggled
+    "aria-invalid": error
   }, restProps, {
-    ref: props.innerRef
+    ref: ref
   })), (onText || offText) && (/*#__PURE__*/React__default.createElement(Text, {
     disabled: disabled,
     mb: "none",
-    ml: "x1"
-  }, toggled ? onText : offText)))));
-};
-var StatefulToggle = function StatefulToggle(_a) {
-  var defaultToggled = _a.defaultToggled,
-    _a$onClick2 = _a.onClick,
-    onClick = _a$onClick2 === void 0 ? noop$2 : _a$onClick2,
-    disabled = _a.disabled,
-    props = __rest(_a, ["defaultToggled", "onClick", "disabled"]);
-  var _useState = useState(defaultToggled),
-    toggled = _useState[0],
-    setToggled = _useState[1];
-  var handleClick = function handleClick(e) {
-    if (!disabled) setToggled(!toggled);
-    onClick(e);
-  };
-  return /*#__PURE__*/React__default.createElement(BaseToggle, Object.assign({
-    toggled: toggled,
-    onClick: handleClick,
-    disabled: disabled
-  }, props));
-};
-var Toggle = function Toggle(_a) {
-  var toggled = _a.toggled,
-    props = __rest(_a, ["toggled"]);
-  return toggled === undefined ? /*#__PURE__*/React__default.createElement(StatefulToggle, Object.assign({}, props)) : /*#__PURE__*/React__default.createElement(BaseToggle, Object.assign({
-    toggled: toggled
-  }, props));
-};
-var ToggleComponent = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
-  return /*#__PURE__*/React__default.createElement(Toggle, Object.assign({
-    innerRef: ref
-  }, props));
+    ml: "x1",
+    "aria-hidden": true
+  }, _checked ? onText : offText)))));
 });
 
 var TOPBAR = {
@@ -55659,4 +55643,4 @@ var TruncatedText = function TruncatedText(_a) {
   return fullWidth ? (/*#__PURE__*/React__default.createElement(TruncatedTextFillWidth, Object.assign({}, props), children)) : (/*#__PURE__*/React__default.createElement(TruncatedTextMaxCharacters, Object.assign({}, props), children));
 };
 
-export { ALL_NDS_LOCALES, Alert$1 as Alert, AnimatedBox, AppTag, ApplicationFrame, AsyncSelect, Banner, BottomSheet, BottomSheetParts, Box, BrandLogoContainer, NavBar as BrandedNavBar, Branding, Breadcrumbs, Button$1 as Button, ButtonGroup, Card, CardSet, Checkbox, CheckboxGroup, ControlIcon, DangerButton, DatePicker, DateRange, DescriptionDetails, DescriptionGroup, DescriptionList, DescriptionTerm, DesktopMenu, Divider$1 as Divider, DropdownButton, DropdownItem, DropdownLink, DropdownMenu, DropdownText, EnvironmentBanner, Field, FieldLabel, Fieldset, Flex, Form, FormSection, Header$3 as Header, Heading1, Heading2, Heading3, Heading4, HelpText$1 as HelpText, Icon, IconicButton, InlineFlex, InlineIcon, InlineValidation, Input, Link$1 as Link, List$1 as List, ListItem, LoadingAnimation, MenuTrigger, Modal, MonthPicker, NDSProvider, NavBarBackground, Navigation$1 as Navigation, NavigationLogo, NavigationLogoLink, NotificationTypes, NulogyLogo, Overlay$1 as Overlay, Page, Pagination, PrimaryButton, QuietButton, Radio, RadioGroup, RangeContainer, RequirementText, NDSSelect as Select, SelectClearIndicator, SelectContainer, SelectControl, SelectDropdownIndicator, SelectInput, SelectMenu, SelectMultiValue, SelectOption$1 as SelectOption, Sidebar, SmallNavBar, SortingTable, StatusIndicator, StatusIndicatorValues, Summary, SummaryDivider, SummaryItem, Switch$1 as Switch, Switcher, Tab, Table, Tabs, Text, Textarea, TimePicker, TimeRange, Toast, ToastContainer, ToggleComponent as Toggle, Tooltip, TopBar, TruncatedText, VerticalDivider, WeekPicker, addStyledProps, legacy as desktop, phone, tablet, themes, toast, useMediaQuery, useWindowDimensions };
+export { ALL_NDS_LOCALES, Alert$1 as Alert, AnimatedBox, AppTag, ApplicationFrame, AsyncSelect, Banner, BottomSheet, BottomSheetParts, Box, BrandLogoContainer, NavBar as BrandedNavBar, Branding, Breadcrumbs, Button$1 as Button, ButtonGroup, Card, CardSet, Checkbox, CheckboxGroup, ControlIcon, DangerButton, DatePicker, DateRange, DescriptionDetails, DescriptionGroup, DescriptionList, DescriptionTerm, DesktopMenu, Divider$1 as Divider, DropdownButton, DropdownItem, DropdownLink, DropdownMenu, DropdownText, EnvironmentBanner, Field, FieldLabel, Fieldset, Flex, Form, FormSection, Header$3 as Header, Heading1, Heading2, Heading3, Heading4, HelpText$1 as HelpText, Icon, IconicButton, InlineFlex, InlineIcon, InlineValidation, Input, Link$1 as Link, List$1 as List, ListItem, LoadingAnimation, MenuTrigger, Modal, MonthPicker, NDSProvider, NavBarBackground, Navigation$1 as Navigation, NavigationLogo, NavigationLogoLink, NotificationTypes, NulogyLogo, Overlay$1 as Overlay, Page, Pagination, PrimaryButton, QuietButton, Radio, RadioGroup, RangeContainer, RequirementText, NDSSelect as Select, SelectClearIndicator, SelectContainer, SelectControl, SelectDropdownIndicator, SelectInput, SelectMenu, SelectMultiValue, SelectOption$1 as SelectOption, Sidebar, SmallNavBar, SortingTable, StatusIndicator, StatusIndicatorValues, Summary, SummaryDivider, SummaryItem, Switch$1 as Switch, Switcher, Tab, Table, Tabs, Text, Textarea, TimePicker, TimeRange, Toast, ToastContainer, Toggle, Tooltip, TopBar, TruncatedText, VerticalDivider, WeekPicker, addStyledProps, legacy as desktop, phone, tablet, themes, toast, useMediaQuery, useWindowDimensions };

package/dist/src/FieldLabel/FieldLabel.story.js

@@ -32,7 +32,7 @@ export const WithRangeOfInputComponents = () => (React.createElement(Flex, { gap
                 { value: 2, label: "This is 2nd option" },
             ] })),
     React.createElement(FieldLabel, { labelText: "Label with hint", hint: "This is a hint for the input field", requirementText: "(Required)" },
-        React.createElement(Toggle, { onText: "on", offText: "off", defaultToggled: true })),
+        React.createElement(Toggle, { onText: "on", offText: "off", toggled: true })),
     React.createElement(FieldLabel, { labelText: "Label with hint", hint: "This is a hint for the input field", requirementText: "(Required)" },
         React.createElement(RadioGroup, { name: "settingSelection" },
             React.createElement(Radio, { value: "a", labelText: "Option A" }),

package/dist/src/FieldLabel/Label.d.ts

@@ -1,7 +1,10 @@
 import { DisplayProps } from "styled-system";
 import type { SpaceProps } from "styled-system";
 import type { ComponentPropsWithRef } from "react";
+import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
 export interface LabelProps extends SpaceProps, DisplayProps, Omit<ComponentPropsWithRef<"label">, "color"> {
+    disabled?: boolean;
+    variant?: ComponentVariant;
 }
 declare const Label: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, LabelProps>> & string;
 export default Label;

package/dist/src/FieldLabel/Label.js

@@ -1,7 +1,8 @@
 import styled from "styled-components";
 import { space, color, display } from "styled-system";
-const Label = styled.label(({ color = "black" }) => ({
+const Label = styled.label(({ color = "black", disabled }) => ({
     color: color,
     display: "inline-block",
+    cursor: disabled ? undefined : "pointer",
 }), display, space, color);
 export default Label;

package/dist/src/Toggle/Toggle.d.ts

@@ -2,10 +2,25 @@ import React from "react";
 import { SpaceProps } from "styled-system";
 import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
 import { DefaultNDSThemeType } from "../theme";
-declare const ToggleComponent: React.ForwardRefExoticComponent<SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & {
+interface ToggleProps extends SpaceProps {
+    /**
+     * @see FieldLabel
+     */
     hint?: string;
+    /**
+     * @note This prop is required when checked is set. It will not be optional in
+     * a future version.
+     */
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     variant?: ComponentVariant;
+    /**
+     * Controls whether the toggle is checked or not.
+     * @note This prop will be required in a future version.
+     */
+    checked?: boolean;
+    /**
+     * @deprecated use checked instead
+     */
     toggled?: boolean;
     disabled?: boolean;
     onText?: string;
@@ -13,16 +28,28 @@ declare const ToggleComponent: React.ForwardRefExoticComponent<SpaceProps<Requir
     id?: string;
     className?: string;
     required?: boolean;
+    /**
+     * @see FieldLabel
+     */
     helpText?: string;
+    /**
+     * @see FieldLabel
+     */
     labelText?: string;
     requirementText?: string;
     error?: boolean;
-    onClick?: (e: React.MouseEvent) => void;
-    innerRef?: React.Ref<HTMLInputElement>;
+    ref?: React.Ref<HTMLInputElement>;
     name?: string;
     theme?: DefaultNDSThemeType;
     "data-testid"?: string;
-} & {
+    /**
+     * @deprecated use onChange instead
+     */
+    onClick?: (e: React.MouseEvent<HTMLInputElement>) => void;
+    /**
+     * @deprecated set the default state through the checked prop instead
+     */
     defaultToggled?: boolean;
-} & React.RefAttributes<HTMLInputElement>>;
-export default ToggleComponent;
+}
+declare const Toggle: React.ForwardRefExoticComponent<Omit<ToggleProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export default Toggle;

package/dist/src/Toggle/Toggle.js

@@ -9,43 +9,52 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { useState } from "react";
+import React, { useCallback, useEffect } from "react";
 import propTypes from "@styled-system/prop-types";
-import { MaybeFieldLabel } from "../FieldLabel";
+import { FieldLabel } from "../FieldLabel";
 import { Field } from "../Form";
 import { Text } from "../Type";
 import { useComponentVariant } from "../NDSProvider/ComponentVariantContext";
-import { ClickInputLabel } from "../utils";
 import { getSubset, omitSubset } from "../utils/subset";
-import { noop } from "../utils/noop";
+import { Flex } from "../Flex";
 import ToggleButton from "./ToggleButton";
-const BaseToggle = (_a) => {
-    var { disabled, onChange, onText, offText, className, required, error, id, labelText, requirementText, helpText, hint, toggled, onClick = noop, variant, "data-testid": dataTestId } = _a, props = __rest(_a, ["disabled", "onChange", "onText", "offText", "className", "required", "error", "id", "labelText", "requirementText", "helpText", "hint", "toggled", "onClick", "variant", "data-testid"]);
-    const handleClick = (e) => {
-        onClick(e);
-    };
+const Toggle = React.forwardRef((_a, ref) => {
+    var _b;
+    var { checked, variant, className, labelText, requirementText, helpText, hint, disabled, toggled, onChange, onText, offText, required, error, id, defaultToggled, onClick, "data-testid": dataTestId } = _a, props = __rest(_a, ["checked", "variant", "className", "labelText", "requirementText", "helpText", "hint", "disabled", "toggled", "onChange", "onText", "offText", "required", "error", "id", "defaultToggled", "onClick", "data-testid"]);
     const componentVariant = useComponentVariant(variant);
     const spaceProps = getSubset(props, propTypes.space);
     const restProps = omitSubset(props, propTypes.space);
+    useEffect(() => {
+        if (defaultToggled) {
+            console.warn("defaultToggled is deprecated. Use checked instead.");
+        }
+        if (checked) {
+            console.warn("checked is deprecated. Use checked instead.");
+        }
+        if (onClick) {
+            console.warn("onClick is deprecated. Use onChange instead.");
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const _checked = (_b = checked !== null && checked !== void 0 ? checked : defaultToggled) !== null && _b !== void 0 ? _b : toggled;
+    const _onChange = useCallback((e) => {
+        if (onClick) {
+            onClick(e);
+        }
+        if (onChange) {
+            onChange(e);
+        }
+    }, [onClick, onChange]);
+    useEffect(() => {
+        if (_checked !== undefined && !(onChange || onClick)) {
+            console.warn("onChange or onClick is required when checked is set.");
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
     return (React.createElement(Field, Object.assign({ className: className, alignItems: "flex-start", py: "half" }, spaceProps),
-        React.createElement(MaybeFieldLabel, { labelText: labelText, requirementText: requirementText, helpText: helpText, hint: hint },
-            React.createElement(ClickInputLabel, { variant: componentVariant, as: "div", onClick: onClick, disabled: disabled, "data-testid": dataTestId },
-                React.createElement(ToggleButton, Object.assign({ id: id, checked: toggled, onChange: onChange, disabled: disabled, required: required, "aria-required": required, "aria-invalid": error, "aria-labelledby": labelText && `${labelText}-label`, onClick: handleClick, toggled: toggled }, restProps, { ref: props.innerRef })),
-                (onText || offText) && (React.createElement(Text, { disabled: disabled, mb: "none", ml: "x1" }, toggled ? onText : offText))))));
-};
-const StatefulToggle = (_a) => {
-    var { defaultToggled, onClick = noop, disabled } = _a, props = __rest(_a, ["defaultToggled", "onClick", "disabled"]);
-    const [toggled, setToggled] = useState(defaultToggled);
-    const handleClick = (e) => {
-        if (!disabled)
-            setToggled(!toggled);
-        onClick(e);
-    };
-    return React.createElement(BaseToggle, Object.assign({ toggled: toggled, onClick: handleClick, disabled: disabled }, props));
-};
-const Toggle = (_a) => {
-    var { toggled } = _a, props = __rest(_a, ["toggled"]);
-    return toggled === undefined ? React.createElement(StatefulToggle, Object.assign({}, props)) : React.createElement(BaseToggle, Object.assign({ toggled: toggled }, props));
-};
-const ToggleComponent = React.forwardRef((props, ref) => (React.createElement(Toggle, Object.assign({ innerRef: ref }, props))));
-export default ToggleComponent;
+        React.createElement(FieldLabel, { htmlFor: id, labelText: labelText, requirementText: requirementText, helpText: helpText, hint: hint, disabled: disabled, variant: componentVariant, "data-testid": dataTestId },
+            React.createElement(Flex, { flexDirection: "row", alignItems: "center" },
+                React.createElement(ToggleButton, Object.assign({ id: id, checked: _checked, onChange: _onChange, disabled: disabled, required: required, "aria-required": required, "aria-invalid": error }, restProps, { ref: ref })),
+                (onText || offText) && (React.createElement(Text, { disabled: disabled, mb: "none", ml: "x1", "aria-hidden": true }, _checked ? onText : offText))))));
+});
+export default Toggle;

package/dist/src/Toggle/Toggle.story.d.ts

@@ -6,45 +6,29 @@ export default _default;
 export declare const _Toggle: () => React.JSX.Element;
 export declare const ToggleWithAllProps: {
     (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const ToggleSetToDefaultToggled: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
+    storyName: string;
 };
 export declare const ToggleSetToDisabled: {
     (): React.JSX.Element;
-    story: {
-        name: string;
-    };
+    storyName: string;
 };
 export declare const WithCustomId: {
     (): React.JSX.Element;
-    story: {
-        name: string;
-    };
+    storyName: string;
 };
 export declare const WithText: {
     (): React.JSX.Element;
-    story: {
-        name: string;
-    };
+    storyName: string;
 };
 export declare const WithLongText: {
     (): React.JSX.Element;
-    story: {
-        name: string;
-    };
+    storyName: string;
+};
+export declare const WithContraintWidth: {
+    (): React.JSX.Element;
+    storyName: string;
 };
-export declare const WithContraintWidth: () => React.JSX.Element;
-export declare const ControlledToggle: () => React.JSX.Element;
 export declare const UsingRefToControlFocus: {
     (): React.JSX.Element;
-    story: {
-        name: string;
-    };
+    storyName: string;
 };

package/dist/src/Toggle/Toggle.story.js

@@ -1,51 +1,55 @@
-import React, { useRef } from "react";
+import React, { useRef, useState } from "react";
 import { action } from "@storybook/addon-actions";
-import { boolean } from "@storybook/addon-knobs";
 import { Toggle, Button, Box } from "../index";
 import { dashed } from "../utils/story/dashed";
 const DashedBox = dashed(Box);
 export default {
     title: "Components/Toggle",
 };
-export const _Toggle = () => React.createElement(Toggle, { "data-testid": "toggle-example", onChange: action("on change") });
-export const ToggleWithAllProps = () => (React.createElement(Toggle, { labelText: "Toggle", helpText: "Turns setting on/off", onText: "on", offText: "off", defaultToggled: true, required: true, requirementText: "(Required)", onChange: action("on change") }));
-ToggleWithAllProps.story = {
-    name: "Toggle with all props",
+export const _Toggle = () => {
+    const [toggled, setToggled] = useState(false);
+    return React.createElement(Toggle, { "data-testid": "toggle-example", toggled: toggled, onChange: (e) => setToggled(e.target.checked) });
 };
-export const ToggleSetToDefaultToggled = () => (React.createElement(Toggle, { labelText: "Toggle", defaultToggled: true, onChange: action("on change") }));
-ToggleSetToDefaultToggled.story = {
-    name: "Toggle set to defaultToggled",
+export const ToggleWithAllProps = () => {
+    const [toggled, setToggled] = useState(true);
+    return (React.createElement(Toggle, { labelText: "Toggle", helpText: "Turns setting on/off", onText: "on", offText: "off", toggled: toggled, required: true, requirementText: "(Required)", onChange: (e) => setToggled(e.target.checked) }));
 };
-export const ToggleSetToDisabled = () => (React.createElement(React.Fragment, null,
-    React.createElement(Toggle, { labelText: "Toggle", disabled: true, onText: "on", offText: "off", onChange: action("on change"), "data-testid": "toggle-example" }),
-    React.createElement(Toggle, { id: "toggle-2", disabled: true, onText: "on", offText: "off", defaultToggled: true, labelText: "Toggle", onChange: action("on change") })));
-ToggleSetToDisabled.story = {
-    name: "Toggle set to disabled",
-};
-export const WithCustomId = () => (React.createElement(Toggle, { id: "my-custom-id", labelText: "Toggle", onText: "on", offText: "off", onChange: action("on change") }));
-WithCustomId.story = {
-    name: "With custom id",
-};
-export const WithText = () => React.createElement(Toggle, { labelText: "Toggle", onText: "on", offText: "off", onChange: action("on change") });
-WithText.story = {
-    name: "With text",
-};
-export const WithLongText = () => (React.createElement(Toggle, { labelText: "Toggle", defaultToggled: true, onText: "this state has a very long text label to explain it's state", offText: "not this one", onChange: action("on change") }));
-WithLongText.story = {
-    name: "With long text",
-};
-export const WithContraintWidth = () => (React.createElement(DashedBox, { width: "200px", padding: "x2" },
-    React.createElement(Toggle, { labelText: "Toggle", onText: "This is a long On label for the toggle component.", offText: "This is a long Off label for the toggle component.", defaultToggled: true, onChange: action("on change") })));
-export const ControlledToggle = () => (React.createElement(Toggle, { labelText: "Controlled Toggle", toggled: boolean("Toggled", false), onText: "on", offText: "off", onChange: action("on change"), "data-testid": "toggle-example" }));
+ToggleWithAllProps.storyName = "Toggle with all props";
+export const ToggleSetToDisabled = () => {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Toggle, { labelText: "Toggle", disabled: true, onText: "on", offText: "off", onChange: action("on change"), "data-testid": "toggle-example" }),
+        React.createElement(Toggle, { id: "toggle-2", disabled: true, onText: "on", offText: "off", toggled: true, labelText: "Toggle", onChange: action("on change") })));
+};
+ToggleSetToDisabled.storyName = "Toggle set to disabled";
+export const WithCustomId = () => {
+    const [toggled, setToggled] = useState(true);
+    return (React.createElement(Toggle, { id: "my-custom-id", labelText: "Toggle", onText: "on", offText: "off", toggled: toggled, onChange: (e) => setToggled(e.target.checked) }));
+};
+WithCustomId.storyName = "With custom id";
+export const WithText = () => {
+    const [toggled, setToggled] = useState(true);
+    return (React.createElement(Toggle, { labelText: "Toggle", onText: "on", offText: "off", toggled: toggled, onChange: (e) => setToggled(e.target.checked) }));
+};
+WithText.storyName = "With text";
+export const WithLongText = () => {
+    const [toggled, setToggled] = useState(true);
+    return (React.createElement(Toggle, { labelText: "Toggle", toggled: toggled, onText: "this state has a very long text label to explain it's state", offText: "not this one", onChange: (e) => setToggled(e.target.checked) }));
+};
+WithLongText.storyName = "With long text";
+export const WithContraintWidth = () => {
+    const [toggled, setToggled] = useState(true);
+    return (React.createElement(DashedBox, { width: "200px", padding: "x2" },
+        React.createElement(Toggle, { labelText: "Toggle", onText: "This is a long On label for the toggle component.", offText: "This is a long Off label for the toggle component.", toggled: toggled, onChange: (e) => setToggled(e.target.checked) })));
+};
+WithContraintWidth.storyName = "With constraint width";
 export const UsingRefToControlFocus = () => {
+    const [toggled, setToggled] = useState(true);
     const ref = useRef(null);
     const handleClick = () => {
         ref.current.focus();
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement(Toggle, { id: "my-custom-id", labelText: "Toggle", onText: "on", offText: "off", onChange: action("on change"), ref: ref }),
+        React.createElement(Toggle, { id: "my-custom-id", labelText: "Toggle", onText: "on", offText: "off", toggled: toggled, onChange: (e) => setToggled(e.target.checked), ref: ref }),
         React.createElement(Button, { onClick: handleClick }, "Focus the Toggle")));
 };
-UsingRefToControlFocus.story = {
-    name: "using ref to control focus",
-};
+UsingRefToControlFocus.storyName = "Using ref to control focus";

package/dist/src/Toggle/ToggleButton.d.ts

@@ -1,11 +1,9 @@
 import React from "react";
 import { DefaultNDSThemeType } from "../theme";
-type ToggleButtonProps = React.ComponentPropsWithRef<"input"> & {
-    defaultToggled?: boolean;
-    toggled?: boolean;
+interface ToggleButtonProps extends React.ComponentPropsWithRef<"input"> {
     disabled?: boolean;
     name?: string;
     theme?: DefaultNDSThemeType;
-};
+}
 declare const ToggleButton: React.ForwardRefExoticComponent<Omit<ToggleButtonProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export default ToggleButton;

package/dist/src/Toggle/ToggleButton.js

@@ -1,9 +1,20 @@
-import React, { useRef, useImperativeHandle } from "react";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
 import { motion } from "framer-motion";
 import styled, { useTheme } from "styled-components";
 import { AnimatedBox } from "../Box";
 import { useComponentVariant } from "../NDSProvider/ComponentVariantContext";
-const getSwitchBackground = (toggled) => (toggled ? "darkBlue" : "darkGrey");
+const getSwitchBackground = (checked) => (checked ? "darkBlue" : "darkGrey");
 const animationConfig = {
     transition: {
         type: "spring",
@@ -13,9 +24,9 @@ const animationConfig = {
     },
     scale: 1.08,
 };
-function Switch({ children, disabled, toggled, onClick }) {
+function Switch({ children, disabled, checked }) {
     const componentVariant = useComponentVariant();
-    return (React.createElement(AnimatedBox, { marginTop: componentVariant === "touch" ? "x0_25" : "none", position: "relative", flexShrink: 0, height: "24px", width: "48px", bg: disabled ? "grey" : getSwitchBackground(toggled), borderRadius: "20px", padding: "2px", boxShadow: "small", animate: toggled ? "toggled" : "initial", whileHover: "active", whileFocus: "active", onClick: onClick }, children));
+    return (React.createElement(AnimatedBox, { marginTop: componentVariant === "touch" ? "x0_25" : "none", position: "relative", flexShrink: 0, height: "24px", width: "48px", bg: disabled ? "grey" : getSwitchBackground(checked), borderRadius: "20px", padding: "2px", boxShadow: "small", animate: checked ? "toggled" : "initial", whileHover: "active", whileFocus: "active" }, children));
 }
 const Slider = ({ disabled, children }) => {
     const theme = useTheme();
@@ -50,18 +61,10 @@ const ToggleInput = styled.input(({ disabled, theme }) => ({
         boxShadow: disabled ? undefined : theme.shadows.focus,
     },
 }));
-const ToggleButton = React.forwardRef((props, ref) => {
-    const { disabled, defaultToggled, toggled } = props;
-    const inputRef = useRef(null);
-    useImperativeHandle(ref, () => inputRef.current);
-    const handleClick = () => {
-        if (inputRef.current) {
-            // triggers the onChange event on a checkbox input
-            inputRef.current.click();
-        }
-    };
-    return (React.createElement(Switch, { disabled: disabled, toggled: toggled, onClick: handleClick },
-        React.createElement(ToggleInput, Object.assign({ ref: inputRef, type: "checkbox", defaultChecked: defaultToggled, value: toggled ? "on" : "off" }, props)),
+const ToggleButton = React.forwardRef((_a, ref) => {
+    var { disabled, checked } = _a, props = __rest(_a, ["disabled", "checked"]);
+    return (React.createElement(Switch, { disabled: disabled, checked: checked },
+        React.createElement(ToggleInput, Object.assign({ type: "checkbox", role: "switch", checked: checked, ref: ref, value: checked ? "on" : "off" }, props)),
         React.createElement(Slider, { disabled: disabled })));
 });
 export default ToggleButton;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nulogy/components",
-  "version": "15.1.4",
+  "version": "15.2.0",
   "description": "Component library for the Nulogy Design System - http://nulogy.design",
   "private": false,
   "publishConfig": {