@okta/odyssey-react-mui 1.15.8 → 1.20.0

package/dist/labs/Switch.js

@@ -1,5 +1,4 @@
-import _FormControlLabel from "@mui/material/FormControlLabel";
-import _Switch from "@mui/material/Switch";
+import _FormLabel from "@mui/material/FormLabel";
 /*!
  * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
  * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
@@ -14,72 +13,167 @@ import _Switch from "@mui/material/Switch";
 
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext.js";
+import styled from "@emotion/styled";
 import { Box } from "../Box.js";
 import { FieldHint } from "../FieldHint.js";
-import { useUniqueId } from "../useUniqueId.js";
+import { CheckIcon } from "../icons.generated/index.js";
 import { ComponentControlledState, getControlState } from "../inputUtils.js";
+import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext.js";
+import { stripRem, toRem } from "../remUtils.js";
+import { useUniqueId } from "../useUniqueId.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 const {
   CONTROLLED
 } = ComponentControlledState;
+const nonForwardedProps = ["isChecked", "isDisabled", "isFullWidth", "odysseyDesignTokens"];
+const SwitchAndLabelContainer = styled("div", {
+  shouldForwardProp: prop => !nonForwardedProps.includes(prop)
+})(({
+  isFullWidth,
+  odysseyDesignTokens
+}) => ({
+  display: "flex",
+  alignItems: "flex-start",
+  justifyContent: "space-between",
+  maxWidth: isFullWidth ? "100%" : odysseyDesignTokens.TypographyLineLengthMax
+}));
+const SwitchContainer = styled.div({
+  position: "relative"
+});
+const StyledSwitchLabel = styled(_FormLabel, {
+  shouldForwardProp: prop => !nonForwardedProps.includes(prop)
+})(({
+  isDisabled,
+  odysseyDesignTokens
+}) => ({
+  display: "block",
+  margin: 0,
+  color: isDisabled ? odysseyDesignTokens.TypographyColorDisabled : odysseyDesignTokens.PaletteNeutralDark,
+  ...(isDisabled && {
+    p: {
+      color: odysseyDesignTokens.TypographyColorDisabled
+    },
+    a: {
+      color: `${odysseyDesignTokens.TypographyColorDisabled} !important`
+    }
+  })
+}));
+const SwitchTrack = styled("div", {
+  shouldForwardProp: prop => !nonForwardedProps.includes(prop)
+})(({
+  isChecked,
+  isDisabled,
+  odysseyDesignTokens
+}) => ({
+  position: "relative",
+  width: odysseyDesignTokens.Spacing7,
+  height: `calc(${odysseyDesignTokens.Spacing4} + ${odysseyDesignTokens.Spacing1})`,
+  borderRadius: odysseyDesignTokens.BorderRadiusOuter,
+  backgroundColor: isDisabled ? odysseyDesignTokens.HueNeutral200 : isChecked ? odysseyDesignTokens.PaletteSuccessLight : odysseyDesignTokens.HueNeutral300,
+  transition: `background-color ${odysseyDesignTokens.TransitionDurationMain}`
+}));
+const SwitchThumb = styled("span", {
+  shouldForwardProp: prop => !nonForwardedProps.includes(prop)
+})(({
+  isChecked,
+  isDisabled,
+  odysseyDesignTokens
+}) => {
+  const thumbOffset = toRem(3);
+  const trackWidth = stripRem(odysseyDesignTokens.Spacing7);
+  const thumbWidth = stripRem(odysseyDesignTokens.Spacing4) - toRem(2);
+  const transformDistance = trackWidth - thumbWidth - thumbOffset * 2;
+  return {
+    position: "absolute",
+    top: "50%",
+    left: `${thumbOffset}rem`,
+    width: `calc(${odysseyDesignTokens.Spacing4} - ${toRem(2)}rem)`,
+    height: `calc(${odysseyDesignTokens.Spacing4} - ${toRem(2)}rem)`,
+    borderRadius: odysseyDesignTokens.BorderRadiusRound,
+    backgroundColor: isDisabled ? odysseyDesignTokens.HueNeutral50 : odysseyDesignTokens.HueNeutralWhite,
+    transform: isChecked ? `translate3d(${transformDistance}rem, -50%, 0)` : "translate3d(0, -50%, 0)",
+    transition: `transform ${odysseyDesignTokens.TransitionDurationMain}`
+  };
+});
+const SwitchCheckMark = styled(CheckIcon, {
+  shouldForwardProp: prop => !nonForwardedProps.includes(prop)
+})(({
+  isChecked,
+  isDisabled,
+  odysseyDesignTokens
+}) => ({
+  position: "absolute",
+  top: "50%",
+  left: 3,
+  width: odysseyDesignTokens.Spacing4,
+  transform: "translateY(-50%)",
+  transition: `opacity ${odysseyDesignTokens.TransitionDurationMain}`,
+  opacity: isChecked ? 1 : 0,
+  path: {
+    fill: isDisabled ? odysseyDesignTokens.HueNeutral50 : odysseyDesignTokens.HueNeutralWhite
+  }
+}));
+const HiddenCheckbox = styled.input(({
+  odysseyDesignTokens
+}) => ({
+  position: "absolute",
+  top: 0,
+  left: 0,
+  width: "100%",
+  height: "100%",
+  margin: 0,
+  opacity: 0,
+  cursor: "pointer",
+  zIndex: 2,
+  "&:focus-visible": {
+    "~ [data-switch-track='true']": {
+      boxShadow: `0 0 0 2px ${odysseyDesignTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyDesignTokens.PalettePrimaryMain}`
+    }
+  }
+}));
 const SwitchLabel = ({
-  checked,
   hint,
   hintId,
-  isFullWidth,
+  HintLinkComponent,
+  inputId,
+  isDisabled,
   label
 }) => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
-  const {
-    t
-  } = useTranslation();
-  return _jsxs(_Fragment, {
-    children: [_jsxs(Box, {
-      sx: {
-        display: "flex",
-        alignItems: "center",
-        flexWrap: "wrap",
-        gap: odysseyDesignTokens.Spacing1,
-        margin: 0,
-        maxWidth: isFullWidth ? "100%" : odysseyDesignTokens.TypographyLineLengthMax,
-        fontWeight: odysseyDesignTokens.TypographyWeightBodyBold
-      },
-      children: [label, _jsx(Box, {
-        sx: {
-          padding: "2px 4px",
-          backgroundColor: checked ? odysseyDesignTokens.PaletteSuccessLighter : odysseyDesignTokens.HueNeutral100,
-          borderRadius: odysseyDesignTokens.BorderRadiusMain,
-          color: checked ? odysseyDesignTokens.PaletteSuccessText : odysseyDesignTokens.HueNeutral700,
-          fontWeight: odysseyDesignTokens.TypographyWeightBodyBold,
-          fontSize: odysseyDesignTokens.TypographyScale0,
-          lineHeight: odysseyDesignTokens.TypographyLineHeightOverline,
-          transitionProperty: "background-color, color",
-          transitionDuration: odysseyDesignTokens.TransitionDurationMain
-        },
-        children: checked ? t("switch.active") : t("switch.inactive")
+  return _jsx(_Fragment, {
+    children: _jsxs(StyledSwitchLabel, {
+      htmlFor: inputId,
+      isDisabled: isDisabled,
+      odysseyDesignTokens: odysseyDesignTokens,
+      children: [label, hint && _jsx(FieldHint, {
+        id: hintId,
+        text: hint,
+        LinkComponent: HintLinkComponent
       })]
-    }), hint && _jsx(FieldHint, {
-      id: hintId,
-      text: hint
-    })]
+    })
   });
 };
+const MemoizedSwitchLabel = memo(SwitchLabel);
+SwitchLabel.displayName = "SwitchLabel";
 const Switch = ({
   hint,
-  id: _id,
+  HintLinkComponent,
+  id: idProp,
   isChecked,
   isDefaultChecked,
   isDisabled,
   isFullWidth = false,
   label,
-  name: _name,
+  name,
   onChange,
   testId,
-  value = "Something"
+  value
 }) => {
+  const {
+    t
+  } = useTranslation();
   const odysseyDesignTokens = useOdysseyDesignTokens();
   const controlledStateRef = useRef(getControlState({
     controlledValue: isChecked,
@@ -101,55 +195,70 @@ const Switch = ({
       setInternalSwitchChecked(Boolean(isChecked));
     }
   }, [isChecked]);
-  const id = useUniqueId(_id);
-  const hintId = hint ? `${id}-hint` : undefined;
-  const labelElementId = `${id}-label`;
-  const handleOnChange = useCallback((_, checked) => {
+  const inputId = useUniqueId(idProp);
+  const hintId = hint ? `${inputId}-hint` : undefined;
+  const labelElementId = `${inputId}-label`;
+  const handleOnChange = useCallback(event => {
+    const target = event.target;
+    const {
+      checked,
+      value
+    } = target;
     setInternalSwitchChecked(checked);
     onChange?.({
       checked,
       value
     });
-  }, [onChange, setInternalSwitchChecked, value]);
-  const renderSwitchComponent = useMemo(() => _jsx(_Switch, {
-    ...inputValues,
-    disabled: isDisabled,
-    disableRipple: true,
-    inputProps: {
-      "aria-checked": internalSwitchChecked,
-      "aria-describedby": hintId,
-      "aria-label": label,
-      "aria-labelledby": labelElementId,
-      "data-se": testId
-    },
-    name: _name ?? id,
-    onChange: handleOnChange
-  }), [handleOnChange, hintId, inputValues, internalSwitchChecked, id, isDisabled, label, labelElementId, _name, testId]);
+  }, [onChange, setInternalSwitchChecked]);
   return _jsx(Box, {
     sx: {
-      marginBlockEnd: odysseyDesignTokens.Spacing2
+      marginBlockEnd: odysseyDesignTokens.Spacing2,
+      "&:last-child": {
+        marginBlockEnd: 0
+      }
     },
-    children: _jsx(_FormControlLabel, {
-      checked: internalSwitchChecked,
-      control: renderSwitchComponent,
-      disabled: isDisabled,
-      id: labelElementId,
-      label: _jsx(SwitchLabel, {
-        checked: internalSwitchChecked,
+    children: _jsxs(SwitchAndLabelContainer, {
+      isFullWidth: isFullWidth,
+      odysseyDesignTokens: odysseyDesignTokens,
+      children: [_jsx(MemoizedSwitchLabel, {
         hint: hint,
         hintId: hintId,
+        HintLinkComponent: HintLinkComponent,
+        inputId: inputId,
+        isDisabled: isDisabled,
         isFullWidth: isFullWidth,
         label: label
-      }),
-      labelPlacement: "start",
-      sx: {
-        justifyContent: "space-between",
-        alignItems: "flex-start",
-        gap: odysseyDesignTokens.Spacing4,
-        width: "100%",
-        maxWidth: isFullWidth ? "100%" : odysseyDesignTokens.TypographyLineLengthMax
-      },
-      value: value
+      }), _jsxs(SwitchContainer, {
+        children: [_jsx(HiddenCheckbox, {
+          ...inputValues,
+          "aria-checked": internalSwitchChecked,
+          "aria-describedby": hintId,
+          "aria-label": internalSwitchChecked ? `${label}: ${t("switch.active")}` : `${label}: ${t("switch.inactive")}`,
+          "aria-labelledby": labelElementId,
+          "data-se": testId,
+          disabled: isDisabled,
+          id: inputId,
+          name: name ?? inputId,
+          onChange: handleOnChange,
+          odysseyDesignTokens: odysseyDesignTokens,
+          type: "checkbox",
+          value: value
+        }), _jsxs(SwitchTrack, {
+          "data-switch-track": true,
+          isChecked: internalSwitchChecked,
+          isDisabled: isDisabled,
+          odysseyDesignTokens: odysseyDesignTokens,
+          children: [_jsx(SwitchThumb, {
+            isChecked: internalSwitchChecked,
+            isDisabled: isDisabled,
+            odysseyDesignTokens: odysseyDesignTokens
+          }), _jsx(SwitchCheckMark, {
+            isChecked: internalSwitchChecked,
+            isDisabled: isDisabled,
+            odysseyDesignTokens: odysseyDesignTokens
+          })]
+        })]
+      })]
     })
   });
 };

package/dist/labs/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","names":["memo","useCallback","useEffect","useMemo","useRef","useState","useTranslation","useOdysseyDesignTokens","Box","FieldHint","useUniqueId","ComponentControlledState","getControlState","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","CONTROLLED","SwitchLabel","checked","hint","hintId","isFullWidth","label","odysseyDesignTokens","t","children","sx","display","alignItems","flexWrap","gap","Spacing1","margin","maxWidth","TypographyLineLengthMax","fontWeight","TypographyWeightBodyBold","padding","backgroundColor","PaletteSuccessLighter","HueNeutral100","borderRadius","BorderRadiusMain","color","PaletteSuccessText","HueNeutral700","fontSize","TypographyScale0","lineHeight","TypographyLineHeightOverline","transitionProperty","transitionDuration","TransitionDurationMain","id","text","Switch","_id","isChecked","isDefaultChecked","isDisabled","name","_name","onChange","testId","value","controlledStateRef","controlledValue","uncontrolledValue","inputValues","current","defaultChecked","internalSwitchChecked","setInternalSwitchChecked","Boolean","undefined","labelElementId","handleOnChange","_","renderSwitchComponent","_Switch","disabled","disableRipple","inputProps","marginBlockEnd","Spacing2","_FormControlLabel","control","labelPlacement","justifyContent","Spacing4","width","MemoizedSwitch","displayName"],"sources":["../../src/labs/Switch.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n  memo,\n  SyntheticEvent,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  Switch as MuiSwitch,\n  SwitchProps as MuiSwitchProps,\n  FormControlLabel,\n} from \"@mui/material\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { useOdysseyDesignTokens } from \"../OdysseyDesignTokensContext\";\nimport { Box } from \"../Box\";\nimport { FieldComponentProps } from \"../FieldComponentProps\";\nimport { FieldHint } from \"../FieldHint\";\nimport type { HtmlProps } from \"../HtmlProps\";\nimport { useUniqueId } from \"../useUniqueId\";\nimport { ComponentControlledState, getControlState } from \"../inputUtils\";\nimport { CheckedFieldProps } from \"../FormCheckedProps\";\n\nconst { CONTROLLED } = ComponentControlledState;\n\ntype OnChangeCallbackArguments = {\n  checked: boolean;\n  value: string;\n};\n\nexport type SwitchProps = {\n  /**\n   * if `true`, the label and switch span entire containing element's width\n   */\n  isFullWidth?: boolean;\n  /**\n   * The label text for the Switch\n   */\n  label: string;\n  /**\n   * The change event handler for the Switch\n   */\n  onChange?: ({ checked, value }: OnChangeCallbackArguments) => void;\n  /**\n   * The value attribute of the Switch\n   */\n  value: string;\n} & Pick<\n  FieldComponentProps,\n  \"hint\" | \"id\" | \"isFullWidth\" | \"isDisabled\" | \"name\"\n> &\n  CheckedFieldProps<MuiSwitchProps> &\n  Pick<HtmlProps, \"testId\">;\n\ntype SwitchLabelProps = {\n  checked: boolean;\n  hint: SwitchProps[\"hint\"];\n  hintId?: string;\n  isFullWidth: SwitchProps[\"isFullWidth\"];\n  label: SwitchProps[\"label\"];\n};\n\nconst SwitchLabel = ({\n  checked,\n  hint,\n  hintId,\n  isFullWidth,\n  label,\n}: SwitchLabelProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const { t } = useTranslation();\n\n  return (\n    <>\n      <Box\n        sx={{\n          display: \"flex\",\n          alignItems: \"center\",\n          flexWrap: \"wrap\",\n          gap: odysseyDesignTokens.Spacing1,\n          margin: 0,\n          maxWidth: isFullWidth\n            ? \"100%\"\n            : odysseyDesignTokens.TypographyLineLengthMax,\n          fontWeight: odysseyDesignTokens.TypographyWeightBodyBold,\n        }}\n      >\n        {label}\n        <Box\n          sx={{\n            padding: \"2px 4px\",\n            backgroundColor: checked\n              ? odysseyDesignTokens.PaletteSuccessLighter\n              : odysseyDesignTokens.HueNeutral100,\n            borderRadius: odysseyDesignTokens.BorderRadiusMain,\n            color: checked\n              ? odysseyDesignTokens.PaletteSuccessText\n              : odysseyDesignTokens.HueNeutral700,\n            fontWeight: odysseyDesignTokens.TypographyWeightBodyBold,\n            fontSize: odysseyDesignTokens.TypographyScale0,\n            lineHeight: odysseyDesignTokens.TypographyLineHeightOverline,\n            transitionProperty: \"background-color, color\",\n            transitionDuration: odysseyDesignTokens.TransitionDurationMain,\n          }}\n        >\n          {checked ? t(\"switch.active\") : t(\"switch.inactive\")}\n        </Box>\n      </Box>\n      {hint && <FieldHint id={hintId} text={hint} />}\n    </>\n  );\n};\n\nconst Switch = ({\n  hint,\n  id: _id,\n  isChecked,\n  isDefaultChecked,\n  isDisabled,\n  isFullWidth = false,\n  label,\n  name: _name,\n  onChange,\n  testId,\n  value = \"Something\",\n}: SwitchProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const controlledStateRef = useRef(\n    getControlState({\n      controlledValue: isChecked,\n      uncontrolledValue: isDefaultChecked,\n    }),\n  );\n  const inputValues = useMemo(() => {\n    if (controlledStateRef.current === CONTROLLED) {\n      return { checked: isChecked };\n    }\n    return { defaultChecked: isDefaultChecked };\n  }, [isDefaultChecked, isChecked]);\n\n  const [internalSwitchChecked, setInternalSwitchChecked] = useState(\n    controlledStateRef.current === CONTROLLED\n      ? Boolean(isChecked)\n      : Boolean(isDefaultChecked),\n  );\n\n  useEffect(() => {\n    if (controlledStateRef.current === CONTROLLED) {\n      setInternalSwitchChecked(Boolean(isChecked));\n    }\n  }, [isChecked]);\n\n  const id = useUniqueId(_id);\n\n  const hintId = hint ? `${id}-hint` : undefined;\n  const labelElementId = `${id}-label`;\n\n  const handleOnChange = useCallback(\n    (_: SyntheticEvent<Element, Event>, checked: boolean) => {\n      setInternalSwitchChecked(checked);\n      onChange?.({ checked, value });\n    },\n    [onChange, setInternalSwitchChecked, value],\n  );\n\n  const renderSwitchComponent = useMemo(\n    () => (\n      <MuiSwitch\n        {...inputValues}\n        disabled={isDisabled}\n        disableRipple\n        inputProps={{\n          \"aria-checked\": internalSwitchChecked,\n          \"aria-describedby\": hintId,\n          \"aria-label\": label,\n          \"aria-labelledby\": labelElementId,\n          \"data-se\": testId,\n        }}\n        name={_name ?? id}\n        onChange={handleOnChange}\n      />\n    ),\n    [\n      handleOnChange,\n      hintId,\n      inputValues,\n      internalSwitchChecked,\n      id,\n      isDisabled,\n      label,\n      labelElementId,\n      _name,\n      testId,\n    ],\n  );\n\n  return (\n    <Box\n      sx={{\n        marginBlockEnd: odysseyDesignTokens.Spacing2,\n      }}\n    >\n      <FormControlLabel\n        checked={internalSwitchChecked}\n        control={renderSwitchComponent}\n        disabled={isDisabled}\n        id={labelElementId}\n        label={\n          <SwitchLabel\n            checked={internalSwitchChecked}\n            hint={hint}\n            hintId={hintId}\n            isFullWidth={isFullWidth}\n            label={label}\n          />\n        }\n        labelPlacement=\"start\"\n        sx={{\n          justifyContent: \"space-between\",\n          alignItems: \"flex-start\",\n          gap: odysseyDesignTokens.Spacing4,\n          width: \"100%\",\n          maxWidth: isFullWidth\n            ? \"100%\"\n            : odysseyDesignTokens.TypographyLineLengthMax,\n        }}\n        value={value}\n      />\n    </Box>\n  );\n};\n\nconst MemoizedSwitch = memo(Switch);\nMemoizedSwitch.displayName = \"Switch\";\n\nexport { MemoizedSwitch as Switch };\n"],"mappings":"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"}
+{"version":3,"file":"Switch.js","names":["memo","useCallback","useEffect","useMemo","useRef","useState","useTranslation","styled","Box","FieldHint","CheckIcon","ComponentControlledState","getControlState","useOdysseyDesignTokens","stripRem","toRem","useUniqueId","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","CONTROLLED","nonForwardedProps","SwitchAndLabelContainer","shouldForwardProp","prop","includes","isFullWidth","odysseyDesignTokens","display","alignItems","justifyContent","maxWidth","TypographyLineLengthMax","SwitchContainer","div","position","StyledSwitchLabel","_FormLabel","isDisabled","margin","color","TypographyColorDisabled","PaletteNeutralDark","p","a","SwitchTrack","isChecked","width","Spacing7","height","Spacing4","Spacing1","borderRadius","BorderRadiusOuter","backgroundColor","HueNeutral200","PaletteSuccessLight","HueNeutral300","transition","TransitionDurationMain","SwitchThumb","thumbOffset","trackWidth","thumbWidth","transformDistance","top","left","BorderRadiusRound","HueNeutral50","HueNeutralWhite","transform","SwitchCheckMark","opacity","path","fill","HiddenCheckbox","input","cursor","zIndex","boxShadow","PalettePrimaryMain","SwitchLabel","hint","hintId","HintLinkComponent","inputId","label","children","htmlFor","id","text","LinkComponent","MemoizedSwitchLabel","displayName","Switch","idProp","isDefaultChecked","name","onChange","testId","value","t","controlledStateRef","controlledValue","uncontrolledValue","inputValues","current","checked","defaultChecked","internalSwitchChecked","setInternalSwitchChecked","Boolean","undefined","labelElementId","handleOnChange","event","target","sx","marginBlockEnd","Spacing2","disabled","type","MemoizedSwitch"],"sources":["../../src/labs/Switch.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n  ChangeEventHandler,\n  memo,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { SwitchProps as MuiSwitchProps, FormLabel } from \"@mui/material\";\nimport { useTranslation } from \"react-i18next\";\nimport styled from \"@emotion/styled\";\n\nimport { Box } from \"../Box\";\nimport { FieldComponentProps } from \"../FieldComponentProps\";\nimport { FieldHint } from \"../FieldHint\";\nimport { CheckedFieldProps } from \"../FormCheckedProps\";\nimport type { HtmlProps } from \"../HtmlProps\";\nimport { CheckIcon } from \"../icons.generated\";\nimport { ComponentControlledState, getControlState } from \"../inputUtils\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../OdysseyDesignTokensContext\";\nimport { stripRem, toRem } from \"../remUtils\";\nimport { useUniqueId } from \"../useUniqueId\";\n\nconst { CONTROLLED } = ComponentControlledState;\n\nconst nonForwardedProps = [\n  \"isChecked\",\n  \"isDisabled\",\n  \"isFullWidth\",\n  \"odysseyDesignTokens\",\n];\n\nconst SwitchAndLabelContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => !nonForwardedProps.includes(prop),\n})<\n  Pick<SwitchProps, \"isFullWidth\" | \"isDisabled\"> & {\n    odysseyDesignTokens: DesignTokens;\n  }\n>(({ isFullWidth, odysseyDesignTokens }) => ({\n  display: \"flex\",\n  alignItems: \"flex-start\",\n  justifyContent: \"space-between\",\n  maxWidth: isFullWidth ? \"100%\" : odysseyDesignTokens.TypographyLineLengthMax,\n}));\n\nconst SwitchContainer = styled.div({\n  position: \"relative\",\n});\n\nconst StyledSwitchLabel = styled(FormLabel, {\n  shouldForwardProp: (prop) => !nonForwardedProps.includes(prop),\n})<\n  Pick<SwitchLabelComponentProps, \"isDisabled\"> & {\n    odysseyDesignTokens: DesignTokens;\n  }\n>(({ isDisabled, odysseyDesignTokens }) => ({\n  display: \"block\",\n  margin: 0,\n  color: isDisabled\n    ? odysseyDesignTokens.TypographyColorDisabled\n    : odysseyDesignTokens.PaletteNeutralDark,\n\n  ...(isDisabled && {\n    p: {\n      color: odysseyDesignTokens.TypographyColorDisabled,\n    },\n    a: {\n      color: `${odysseyDesignTokens.TypographyColorDisabled} !important`,\n    },\n  }),\n}));\n\nconst SwitchTrack = styled(\"div\", {\n  shouldForwardProp: (prop) => !nonForwardedProps.includes(prop),\n})<\n  Pick<SwitchProps, \"isChecked\" | \"isDisabled\"> & {\n    odysseyDesignTokens: DesignTokens;\n  }\n>(({ isChecked, isDisabled, odysseyDesignTokens }) => ({\n  position: \"relative\",\n  width: odysseyDesignTokens.Spacing7,\n  height: `calc(${odysseyDesignTokens.Spacing4} + ${odysseyDesignTokens.Spacing1})`,\n  borderRadius: odysseyDesignTokens.BorderRadiusOuter,\n  backgroundColor: isDisabled\n    ? odysseyDesignTokens.HueNeutral200\n    : isChecked\n      ? odysseyDesignTokens.PaletteSuccessLight\n      : odysseyDesignTokens.HueNeutral300,\n  transition: `background-color ${odysseyDesignTokens.TransitionDurationMain}`,\n}));\n\nconst SwitchThumb = styled(\"span\", {\n  shouldForwardProp: (prop) => !nonForwardedProps.includes(prop),\n})<\n  Pick<SwitchProps, \"isChecked\" | \"isDisabled\"> & {\n    odysseyDesignTokens: DesignTokens;\n  }\n>(({ isChecked, isDisabled, odysseyDesignTokens }) => {\n  const thumbOffset = toRem(3);\n  const trackWidth = stripRem(odysseyDesignTokens.Spacing7);\n  const thumbWidth = stripRem(odysseyDesignTokens.Spacing4) - toRem(2);\n\n  const transformDistance = trackWidth - thumbWidth - thumbOffset * 2;\n\n  return {\n    position: \"absolute\",\n    top: \"50%\",\n    left: `${thumbOffset}rem`,\n    width: `calc(${odysseyDesignTokens.Spacing4} - ${toRem(2)}rem)`,\n    height: `calc(${odysseyDesignTokens.Spacing4} - ${toRem(2)}rem)`,\n    borderRadius: odysseyDesignTokens.BorderRadiusRound,\n    backgroundColor: isDisabled\n      ? odysseyDesignTokens.HueNeutral50\n      : odysseyDesignTokens.HueNeutralWhite,\n    transform: isChecked\n      ? `translate3d(${transformDistance}rem, -50%, 0)`\n      : \"translate3d(0, -50%, 0)\",\n    transition: `transform ${odysseyDesignTokens.TransitionDurationMain}`,\n  };\n});\n\nconst SwitchCheckMark = styled(CheckIcon, {\n  shouldForwardProp: (prop) => !nonForwardedProps.includes(prop),\n})<\n  Pick<SwitchProps, \"isChecked\" | \"isDisabled\"> & {\n    odysseyDesignTokens: DesignTokens;\n  }\n>(({ isChecked, isDisabled, odysseyDesignTokens }) => ({\n  position: \"absolute\",\n  top: \"50%\",\n  left: 3,\n  width: odysseyDesignTokens.Spacing4,\n  transform: \"translateY(-50%)\",\n  transition: `opacity ${odysseyDesignTokens.TransitionDurationMain}`,\n  opacity: isChecked ? 1 : 0,\n  path: {\n    fill: isDisabled\n      ? odysseyDesignTokens.HueNeutral50\n      : odysseyDesignTokens.HueNeutralWhite,\n  },\n}));\n\nconst HiddenCheckbox = styled.input<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  position: \"absolute\",\n  top: 0,\n  left: 0,\n  width: \"100%\",\n  height: \"100%\",\n  margin: 0,\n  opacity: 0,\n  cursor: \"pointer\",\n  zIndex: 2,\n\n  \"&:focus-visible\": {\n    \"~ [data-switch-track='true']\": {\n      boxShadow: `0 0 0 2px ${odysseyDesignTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyDesignTokens.PalettePrimaryMain}`,\n    },\n  },\n}));\n\ntype OnChangeCallbackArguments = {\n  checked: boolean;\n  value: string;\n};\n\nexport type SwitchProps = {\n  /**\n   * The label text for the Switch\n   */\n  label: string;\n  /**\n   * The change event handler for the Switch\n   */\n  onChange?: ({ checked, value }: OnChangeCallbackArguments) => void;\n  /**\n   * The value attribute of the Switch\n   */\n  value: string;\n} & Pick<\n  FieldComponentProps,\n  \"hint\" | \"HintLinkComponent\" | \"id\" | \"isFullWidth\" | \"isDisabled\" | \"name\"\n> &\n  Pick<CheckedFieldProps<MuiSwitchProps>, \"isChecked\" | \"isDefaultChecked\"> &\n  Pick<HtmlProps, \"testId\">;\n\ntype SwitchLabelComponentProps = {\n  hint: SwitchProps[\"hint\"];\n  hintId?: string;\n  HintLinkComponent: SwitchProps[\"HintLinkComponent\"];\n  inputId: string;\n  isDisabled: SwitchProps[\"isDisabled\"];\n  isFullWidth: SwitchProps[\"isFullWidth\"];\n  label: SwitchProps[\"label\"];\n};\n\nconst SwitchLabel = ({\n  hint,\n  hintId,\n  HintLinkComponent,\n  inputId,\n  isDisabled,\n  label,\n}: SwitchLabelComponentProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  return (\n    <>\n      <StyledSwitchLabel\n        htmlFor={inputId}\n        isDisabled={isDisabled}\n        odysseyDesignTokens={odysseyDesignTokens}\n      >\n        {label}\n        {hint && (\n          <FieldHint\n            id={hintId}\n            text={hint}\n            LinkComponent={HintLinkComponent}\n          />\n        )}\n      </StyledSwitchLabel>\n    </>\n  );\n};\n\nconst MemoizedSwitchLabel = memo(SwitchLabel);\nSwitchLabel.displayName = \"SwitchLabel\";\n\nconst Switch = ({\n  hint,\n  HintLinkComponent,\n  id: idProp,\n  isChecked,\n  isDefaultChecked,\n  isDisabled,\n  isFullWidth = false,\n  label,\n  name,\n  onChange,\n  testId,\n  value,\n}: SwitchProps) => {\n  const { t } = useTranslation();\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const controlledStateRef = useRef(\n    getControlState({\n      controlledValue: isChecked,\n      uncontrolledValue: isDefaultChecked,\n    }),\n  );\n  const inputValues = useMemo(() => {\n    if (controlledStateRef.current === CONTROLLED) {\n      return { checked: isChecked };\n    }\n    return { defaultChecked: isDefaultChecked };\n  }, [isDefaultChecked, isChecked]);\n\n  const [internalSwitchChecked, setInternalSwitchChecked] = useState(\n    controlledStateRef.current === CONTROLLED\n      ? Boolean(isChecked)\n      : Boolean(isDefaultChecked),\n  );\n\n  useEffect(() => {\n    if (controlledStateRef.current === CONTROLLED) {\n      setInternalSwitchChecked(Boolean(isChecked));\n    }\n  }, [isChecked]);\n\n  const inputId = useUniqueId(idProp);\n\n  const hintId = hint ? `${inputId}-hint` : undefined;\n  const labelElementId = `${inputId}-label`;\n\n  const handleOnChange = useCallback<ChangeEventHandler<HTMLInputElement>>(\n    (event) => {\n      const target = event.target;\n      const { checked, value } = target;\n      setInternalSwitchChecked(checked);\n      onChange?.({ checked, value });\n    },\n    [onChange, setInternalSwitchChecked],\n  );\n\n  return (\n    <Box\n      sx={{\n        marginBlockEnd: odysseyDesignTokens.Spacing2,\n        \"&:last-child\": {\n          marginBlockEnd: 0,\n        },\n      }}\n    >\n      <SwitchAndLabelContainer\n        isFullWidth={isFullWidth}\n        odysseyDesignTokens={odysseyDesignTokens}\n      >\n        <MemoizedSwitchLabel\n          hint={hint}\n          hintId={hintId}\n          HintLinkComponent={HintLinkComponent}\n          inputId={inputId}\n          isDisabled={isDisabled}\n          isFullWidth={isFullWidth}\n          label={label}\n        />\n        <SwitchContainer>\n          <HiddenCheckbox\n            {...inputValues}\n            aria-checked={internalSwitchChecked}\n            aria-describedby={hintId}\n            aria-label={\n              internalSwitchChecked\n                ? `${label}: ${t(\"switch.active\")}`\n                : `${label}: ${t(\"switch.inactive\")}`\n            }\n            aria-labelledby={labelElementId}\n            data-se={testId}\n            disabled={isDisabled}\n            id={inputId}\n            name={name ?? inputId}\n            onChange={handleOnChange}\n            odysseyDesignTokens={odysseyDesignTokens}\n            type=\"checkbox\"\n            value={value}\n          />\n          <SwitchTrack\n            data-switch-track\n            isChecked={internalSwitchChecked}\n            isDisabled={isDisabled}\n            odysseyDesignTokens={odysseyDesignTokens}\n          >\n            <SwitchThumb\n              isChecked={internalSwitchChecked}\n              isDisabled={isDisabled}\n              odysseyDesignTokens={odysseyDesignTokens}\n            />\n            <SwitchCheckMark\n              isChecked={internalSwitchChecked}\n              isDisabled={isDisabled}\n              odysseyDesignTokens={odysseyDesignTokens}\n            />\n          </SwitchTrack>\n        </SwitchContainer>\n      </SwitchAndLabelContainer>\n    </Box>\n  );\n};\n\nconst MemoizedSwitch = memo(Switch);\nMemoizedSwitch.displayName = \"Switch\";\n\nexport { MemoizedSwitch as Switch };\n"],"mappings":"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"}