@okta/odyssey-react-mui 1.29.0 → 1.32.4

package/dist/esm/Switch.js

@@ -0,0 +1,320 @@
+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.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import styled from "@emotion/styled";
+import { Box } from "./Box.js";
+import { FieldHint } from "./FieldHint.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, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const {
+  CONTROLLED
+} = ComponentControlledState;
+const nonForwardedProps = ["isChecked", "isDisabled", "isFullWidth", "isReadOnly", "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,
+  isReadOnly,
+  odysseyDesignTokens
+}) => ({
+  display: "block",
+  margin: 0,
+  color: odysseyDesignTokens.PaletteNeutralDark,
+  ...(isDisabled && {
+    color: odysseyDesignTokens.TypographyColorDisabled,
+    p: {
+      color: odysseyDesignTokens.TypographyColorDisabled
+    },
+    a: {
+      color: `${odysseyDesignTokens.TypographyColorDisabled} !important`
+    }
+  }),
+  ...(isReadOnly && {
+    color: odysseyDesignTokens.HueNeutral700,
+    p: {
+      color: odysseyDesignTokens.HueNeutral700
+    },
+    a: {
+      color: `${odysseyDesignTokens.HueNeutral700} !important`
+    }
+  })
+}));
+const SwitchTrack = styled("div", {
+  shouldForwardProp: prop => !nonForwardedProps.includes(prop)
+})(({
+  isChecked,
+  isDisabled,
+  isReadOnly,
+  odysseyDesignTokens
+}) => ({
+  position: "relative",
+  width: odysseyDesignTokens.Spacing7,
+  height: `calc(${odysseyDesignTokens.Spacing4} + ${odysseyDesignTokens.Spacing1})`,
+  borderRadius: odysseyDesignTokens.BorderRadiusOuter,
+  backgroundColor: odysseyDesignTokens.HueNeutral300,
+  transition: `background-color ${odysseyDesignTokens.TransitionDurationMain}`,
+  ...(isDisabled && {
+    backgroundColor: odysseyDesignTokens.HueNeutral200
+  }),
+  ...(isReadOnly && {
+    backgroundColor: odysseyDesignTokens.HueNeutral600
+  }),
+  ...(isChecked && !isDisabled && !isReadOnly && {
+    backgroundColor: odysseyDesignTokens.PaletteSuccessLight
+  })
+}));
+const SwitchThumb = styled("span", {
+  shouldForwardProp: prop => !nonForwardedProps.includes(prop)
+})(({
+  isChecked,
+  isDisabled,
+  isReadOnly,
+  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: odysseyDesignTokens.HueNeutralWhite,
+    transform: "translate3d(0, -50%, 0)",
+    transition: `transform ${odysseyDesignTokens.TransitionDurationMain}`,
+    ...(isDisabled && {
+      backgroundColor: odysseyDesignTokens.HueNeutral50
+    }),
+    ...(isReadOnly && {
+      backgroundColor: odysseyDesignTokens.HueNeutral400
+    }),
+    ...(isChecked && {
+      transform: `translate3d(${transformDistance}rem, -50%, 0)`
+    })
+  };
+});
+const SwitchCheckMark = styled(CheckIcon, {
+  shouldForwardProp: prop => !nonForwardedProps.includes(prop)
+})(({
+  isChecked,
+  isDisabled,
+  isReadOnly,
+  odysseyDesignTokens
+}) => ({
+  position: "absolute",
+  top: "50%",
+  left: 3,
+  width: odysseyDesignTokens.Spacing4,
+  transform: "translateY(-50%)",
+  transition: `opacity ${odysseyDesignTokens.TransitionDurationMain}`,
+  opacity: 0,
+  path: {
+    fill: odysseyDesignTokens.HueNeutralWhite
+  },
+  ...(isChecked && {
+    opacity: 1
+  }),
+  ...((isDisabled || isReadOnly) && {
+    path: {
+      fill: odysseyDesignTokens.HueNeutral50
+    }
+  })
+}));
+const HiddenCheckbox = styled.input(({
+  odysseyDesignTokens,
+  isReadOnly
+}) => ({
+  position: "absolute",
+  top: 0,
+  left: 0,
+  width: "100%",
+  height: "100%",
+  margin: 0,
+  opacity: 0,
+  cursor: isReadOnly ? "default" : "pointer",
+  zIndex: 2,
+  "&:focus-visible": {
+    "~ [data-switch-track='true']": {
+      boxShadow: `0 0 0 2px ${odysseyDesignTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyDesignTokens.PalettePrimaryMain}`
+    }
+  }
+}));
+const SwitchLabel = ({
+  hint,
+  hintId,
+  HintLinkComponent,
+  inputId,
+  isDisabled,
+  label,
+  isReadOnly
+}) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  return _jsx(_Fragment, {
+    children: _jsxs(StyledSwitchLabel, {
+      htmlFor: inputId,
+      isDisabled: isDisabled,
+      isReadOnly: isReadOnly,
+      odysseyDesignTokens: odysseyDesignTokens,
+      children: [label, hint && _jsx(FieldHint, {
+        id: hintId,
+        text: hint,
+        LinkComponent: HintLinkComponent
+      })]
+    })
+  });
+};
+const MemoizedSwitchLabel = memo(SwitchLabel);
+SwitchLabel.displayName = "SwitchLabel";
+const Switch = ({
+  hint,
+  HintLinkComponent,
+  id: idProp,
+  isChecked,
+  isDefaultChecked,
+  isDisabled,
+  isFullWidth = false,
+  isReadOnly = false,
+  label,
+  name,
+  onChange,
+  testId,
+  value
+}) => {
+  const {
+    t
+  } = useTranslation();
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const controlledStateRef = useRef(getControlState({
+    controlledValue: isChecked,
+    uncontrolledValue: isDefaultChecked
+  }));
+  const inputValues = useMemo(() => {
+    if (controlledStateRef.current === CONTROLLED) {
+      return {
+        checked: isChecked
+      };
+    }
+    return {
+      defaultChecked: isDefaultChecked
+    };
+  }, [isDefaultChecked, isChecked]);
+  const [internalSwitchChecked, setInternalSwitchChecked] = useState(controlledStateRef.current === CONTROLLED ? Boolean(isChecked) : Boolean(isDefaultChecked));
+  useEffect(() => {
+    if (controlledStateRef.current === CONTROLLED) {
+      setInternalSwitchChecked(Boolean(isChecked));
+    }
+  }, [isChecked]);
+  const inputId = useUniqueId(idProp);
+  const hintId = hint ? `${inputId}-hint` : undefined;
+  const labelElementId = `${inputId}-label`;
+  const handleOnChange = useCallback(event => {
+    if (isReadOnly) {
+      event.preventDefault();
+      return;
+    }
+    const target = event.target;
+    const {
+      checked,
+      value
+    } = target;
+    setInternalSwitchChecked(checked);
+    onChange?.({
+      checked,
+      value
+    });
+  }, [onChange, setInternalSwitchChecked, isReadOnly]);
+  return _jsx(Box, {
+    sx: {
+      marginBlockEnd: odysseyDesignTokens.Spacing2,
+      "&:last-child": {
+        marginBlockEnd: 0
+      }
+    },
+    children: _jsxs(SwitchAndLabelContainer, {
+      isFullWidth: isFullWidth,
+      odysseyDesignTokens: odysseyDesignTokens,
+      children: [_jsx(MemoizedSwitchLabel, {
+        hint: hint,
+        hintId: hintId,
+        HintLinkComponent: HintLinkComponent,
+        inputId: inputId,
+        isDisabled: isDisabled,
+        isFullWidth: isFullWidth,
+        label: label,
+        isReadOnly: isReadOnly
+      }), _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,
+          readOnly: isReadOnly,
+          isReadOnly: isReadOnly
+        }), _jsxs(SwitchTrack, {
+          "data-switch-track": true,
+          isChecked: internalSwitchChecked,
+          isDisabled: isDisabled,
+          isReadOnly: isReadOnly,
+          odysseyDesignTokens: odysseyDesignTokens,
+          children: [_jsx(SwitchThumb, {
+            isChecked: internalSwitchChecked,
+            isDisabled: isDisabled,
+            isReadOnly: isReadOnly,
+            odysseyDesignTokens: odysseyDesignTokens
+          }), _jsx(SwitchCheckMark, {
+            isChecked: internalSwitchChecked,
+            isDisabled: isDisabled,
+            isReadOnly: isReadOnly,
+            odysseyDesignTokens: odysseyDesignTokens
+          })]
+        })]
+      })]
+    })
+  });
+};
+const MemoizedSwitch = memo(Switch);
+MemoizedSwitch.displayName = "Switch";
+export { MemoizedSwitch as Switch };
+//# sourceMappingURL=Switch.js.map

package/dist/esm/Switch.js.map

@@ -0,0 +1 @@
+{"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","isReadOnly","margin","color","PaletteNeutralDark","TypographyColorDisabled","p","a","HueNeutral700","SwitchTrack","isChecked","width","Spacing7","height","Spacing4","Spacing1","borderRadius","BorderRadiusOuter","backgroundColor","HueNeutral300","transition","TransitionDurationMain","HueNeutral200","HueNeutral600","PaletteSuccessLight","SwitchThumb","thumbOffset","trackWidth","thumbWidth","transformDistance","top","left","BorderRadiusRound","HueNeutralWhite","transform","HueNeutral50","HueNeutral400","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","preventDefault","target","sx","marginBlockEnd","Spacing2","disabled","type","readOnly","MemoizedSwitch"],"sources":["../../src/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.js\";\nimport { FieldComponentProps } from \"./FieldComponentProps.js\";\nimport { FieldHint } from \"./FieldHint.js\";\nimport { CheckedFieldProps } from \"./FormCheckedProps.js\";\nimport type { HtmlProps } from \"./HtmlProps.js\";\nimport { CheckIcon } from \"./icons.generated/index.js\";\nimport { ComponentControlledState, getControlState } from \"./inputUtils.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"./OdysseyDesignTokensContext.js\";\nimport { stripRem, toRem } from \"./remUtils.js\";\nimport { useUniqueId } from \"./useUniqueId.js\";\n\nconst { CONTROLLED } = ComponentControlledState;\n\nconst nonForwardedProps = [\n  \"isChecked\",\n  \"isDisabled\",\n  \"isFullWidth\",\n  \"isReadOnly\",\n  \"odysseyDesignTokens\",\n];\n\nconst SwitchAndLabelContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => !nonForwardedProps.includes(prop),\n})<\n  Pick<SwitchProps, \"isFullWidth\" | \"isDisabled\" | \"isReadOnly\"> & {\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\" | \"isReadOnly\"> & {\n    odysseyDesignTokens: DesignTokens;\n  }\n>(({ isDisabled, isReadOnly, odysseyDesignTokens }) => ({\n  display: \"block\",\n  margin: 0,\n  color: odysseyDesignTokens.PaletteNeutralDark,\n\n  ...(isDisabled && {\n    color: odysseyDesignTokens.TypographyColorDisabled,\n    p: {\n      color: odysseyDesignTokens.TypographyColorDisabled,\n    },\n    a: {\n      color: `${odysseyDesignTokens.TypographyColorDisabled} !important`,\n    },\n  }),\n\n  ...(isReadOnly && {\n    color: odysseyDesignTokens.HueNeutral700,\n    p: {\n      color: odysseyDesignTokens.HueNeutral700,\n    },\n    a: {\n      color: `${odysseyDesignTokens.HueNeutral700} !important`,\n    },\n  }),\n}));\n\nconst SwitchTrack = styled(\"div\", {\n  shouldForwardProp: (prop) => !nonForwardedProps.includes(prop),\n})<\n  Pick<SwitchProps, \"isChecked\" | \"isDisabled\" | \"isReadOnly\"> & {\n    odysseyDesignTokens: DesignTokens;\n  }\n>(({ isChecked, isDisabled, isReadOnly, odysseyDesignTokens }) => ({\n  position: \"relative\",\n  width: odysseyDesignTokens.Spacing7,\n  height: `calc(${odysseyDesignTokens.Spacing4} + ${odysseyDesignTokens.Spacing1})`,\n  borderRadius: odysseyDesignTokens.BorderRadiusOuter,\n  backgroundColor: odysseyDesignTokens.HueNeutral300,\n  transition: `background-color ${odysseyDesignTokens.TransitionDurationMain}`,\n\n  ...(isDisabled && {\n    backgroundColor: odysseyDesignTokens.HueNeutral200,\n  }),\n\n  ...(isReadOnly && {\n    backgroundColor: odysseyDesignTokens.HueNeutral600,\n  }),\n\n  ...(isChecked &&\n    !isDisabled &&\n    !isReadOnly && {\n      backgroundColor: odysseyDesignTokens.PaletteSuccessLight,\n    }),\n}));\n\nconst SwitchThumb = styled(\"span\", {\n  shouldForwardProp: (prop) => !nonForwardedProps.includes(prop),\n})<\n  Pick<SwitchProps, \"isChecked\" | \"isDisabled\" | \"isReadOnly\"> & {\n    odysseyDesignTokens: DesignTokens;\n  }\n>(({ isChecked, isDisabled, isReadOnly, odysseyDesignTokens }) => {\n  const thumbOffset = toRem(3);\n  const trackWidth = stripRem(odysseyDesignTokens.Spacing7);\n  const thumbWidth = stripRem(odysseyDesignTokens.Spacing4) - toRem(2);\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: odysseyDesignTokens.HueNeutralWhite,\n    transform: \"translate3d(0, -50%, 0)\",\n    transition: `transform ${odysseyDesignTokens.TransitionDurationMain}`,\n\n    ...(isDisabled && {\n      backgroundColor: odysseyDesignTokens.HueNeutral50,\n    }),\n\n    ...(isReadOnly && {\n      backgroundColor: odysseyDesignTokens.HueNeutral400,\n    }),\n\n    ...(isChecked && {\n      transform: `translate3d(${transformDistance}rem, -50%, 0)`,\n    }),\n  };\n});\n\nconst SwitchCheckMark = styled(CheckIcon, {\n  shouldForwardProp: (prop) => !nonForwardedProps.includes(prop),\n})<\n  Pick<SwitchProps, \"isChecked\" | \"isDisabled\" | \"isReadOnly\"> & {\n    odysseyDesignTokens: DesignTokens;\n  }\n>(({ isChecked, isDisabled, isReadOnly, 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: 0,\n  path: {\n    fill: odysseyDesignTokens.HueNeutralWhite,\n  },\n\n  ...(isChecked && {\n    opacity: 1,\n  }),\n\n  ...((isDisabled || isReadOnly) && {\n    path: {\n      fill: odysseyDesignTokens.HueNeutral50,\n    },\n  }),\n}));\n\nconst HiddenCheckbox = styled.input<{\n  odysseyDesignTokens: DesignTokens;\n  isReadOnly?: boolean;\n}>(({ odysseyDesignTokens, isReadOnly }) => ({\n  position: \"absolute\",\n  top: 0,\n  left: 0,\n  width: \"100%\",\n  height: \"100%\",\n  margin: 0,\n  opacity: 0,\n  cursor: isReadOnly ? \"default\" : \"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  /**\n   * Determines whether the Switch is read-only\n   */\n  isReadOnly?: boolean;\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  isReadOnly: SwitchProps[\"isReadOnly\"];\n};\n\nconst SwitchLabel = ({\n  hint,\n  hintId,\n  HintLinkComponent,\n  inputId,\n  isDisabled,\n  label,\n  isReadOnly,\n}: SwitchLabelComponentProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  return (\n    <>\n      <StyledSwitchLabel\n        htmlFor={inputId}\n        isDisabled={isDisabled}\n        isReadOnly={isReadOnly}\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  isReadOnly = 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      if (isReadOnly) {\n        event.preventDefault();\n        return;\n      }\n      const target = event.target;\n      const { checked, value } = target;\n      setInternalSwitchChecked(checked);\n      onChange?.({ checked, value });\n    },\n    [onChange, setInternalSwitchChecked, isReadOnly],\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          isReadOnly={isReadOnly}\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            readOnly={isReadOnly}\n            isReadOnly={isReadOnly}\n          />\n          <SwitchTrack\n            data-switch-track\n            isChecked={internalSwitchChecked}\n            isDisabled={isDisabled}\n            isReadOnly={isReadOnly}\n            odysseyDesignTokens={odysseyDesignTokens}\n          >\n            <SwitchThumb\n              isChecked={internalSwitchChecked}\n              isDisabled={isDisabled}\n              isReadOnly={isReadOnly}\n              odysseyDesignTokens={odysseyDesignTokens}\n            />\n            <SwitchCheckMark\n              isChecked={internalSwitchChecked}\n              isDisabled={isDisabled}\n              isReadOnly={isReadOnly}\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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","ignoreList":[]}

package/dist/esm/Tabs.js

@@ -0,0 +1,140 @@
+import _Tab from "@mui/material/Tab";
+/*!
+ * 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.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { memo, useCallback, useEffect, useState } from "react";
+import { TabContext as MuiTabContext, TabList as MuiTabList, TabPanel as MuiTabPanel } from "@mui/lab";
+import { Badge } from "./Badge.js";
+import { Box } from "./Box.js";
+import { useOdysseyDesignTokens } from "./OdysseyDesignTokensContext.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export const TabsTestSelector = {
+  children: {
+    tabItem: {
+      elementSelector: {
+        method: "ByRole",
+        options: {
+          label: "name"
+        },
+        role: "tab"
+      }
+    }
+  },
+  elementSelector: {
+    method: "ByRole",
+    options: {
+      label: "name"
+    },
+    role: "tablist"
+  }
+};
+const TabLabel = ({
+  label,
+  notificationCount,
+  notificationCountMax,
+  tabState,
+  value
+}) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  return _jsxs(_Fragment, {
+    children: [label, notificationCount !== undefined && notificationCount > 0 && _jsx(Box, {
+      sx: {
+        marginInlineStart: notificationCount ? odysseyDesignTokens.Spacing2 : 0
+      },
+      children: _jsx(Badge, {
+        badgeContent: notificationCount,
+        badgeContentMax: notificationCountMax,
+        type: value === tabState ? "attention" : "default"
+      })
+    })]
+  });
+};
+const Tabs = ({
+  ariaLabel,
+  initialValue,
+  tabs,
+  value,
+  onChange: onChangeProp
+}) => {
+  const [tabState, setTabState] = useState(initialValue ?? value ?? "0");
+  const [scrollButtons, setScrollButtons] = useState(false);
+  const onChange = useCallback((event, value) => {
+    setTabState(value);
+    onChangeProp?.(event, value);
+  }, [onChangeProp]);
+  useEffect(() => {
+    if (value !== undefined) {
+      setTabState(value);
+    }
+  }, [value]);
+  useEffect(() => {
+    let animationFrame;
+    const cleanup = () => {
+      cancelAnimationFrame(animationFrame);
+      document.removeEventListener("visibilitychange", refreshScrollButtons);
+    };
+    function refreshScrollButtons() {
+      animationFrame = requestAnimationFrame(() => {
+        cleanup();
+        setScrollButtons("auto");
+      });
+    }
+    if (scrollButtons !== "auto") {
+      document.addEventListener("visibilitychange", refreshScrollButtons);
+    }
+    return () => {
+      cleanup();
+    };
+  }, [scrollButtons]);
+  const renderTab = useCallback((tab, index) => {
+    const {
+      testId,
+      isDisabled,
+      label,
+      startIcon,
+      value,
+      notificationCount,
+      notificationCountMax
+    } = tab;
+    return _jsx(_Tab, {
+      "data-se": testId,
+      disabled: isDisabled,
+      icon: startIcon,
+      tabIndex: 0,
+      label: _jsx(TabLabel, {
+        label: label,
+        notificationCount: notificationCount,
+        notificationCountMax: notificationCountMax,
+        tabState: tabState,
+        value: value
+      }),
+      value: value ? value : index.toString()
+    }, value ? value : index.toString());
+  }, [tabState]);
+  return _jsxs(MuiTabContext, {
+    value: tabState,
+    children: [_jsx(MuiTabList, {
+      onChange: onChange,
+      "aria-label": ariaLabel,
+      variant: "scrollable",
+      scrollButtons: scrollButtons,
+      children: tabs.map((tab, index) => renderTab(tab, index))
+    }), tabs.map((tab, index) => _jsx(MuiTabPanel, {
+      value: tab.value ? tab.value : index.toString(),
+      children: tab.children
+    }, tab.value ? tab.value : index.toString()))]
+  });
+};
+const MemoizedTabs = memo(Tabs);
+MemoizedTabs.displayName = "Tabs";
+export { MemoizedTabs as Tabs };
+//# sourceMappingURL=Tabs.js.map

package/dist/esm/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","names":["memo","useCallback","useEffect","useState","TabContext","MuiTabContext","TabList","MuiTabList","TabPanel","MuiTabPanel","Badge","Box","useOdysseyDesignTokens","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","TabsTestSelector","children","tabItem","elementSelector","method","options","label","role","TabLabel","notificationCount","notificationCountMax","tabState","value","odysseyDesignTokens","undefined","sx","marginInlineStart","Spacing2","badgeContent","badgeContentMax","type","Tabs","ariaLabel","initialValue","tabs","onChange","onChangeProp","setTabState","scrollButtons","setScrollButtons","event","animationFrame","cleanup","cancelAnimationFrame","document","removeEventListener","refreshScrollButtons","requestAnimationFrame","addEventListener","renderTab","tab","index","testId","isDisabled","startIcon","_Tab","disabled","icon","tabIndex","toString","variant","map","MemoizedTabs","displayName"],"sources":["../../src/Tabs.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  ReactElement,\n  ReactNode,\n  memo,\n  useCallback,\n  useEffect,\n  useState,\n} from \"react\";\nimport {\n  TabContext as MuiTabContext,\n  TabList as MuiTabList,\n  TabListProps as MuiTabListProps,\n  TabPanel as MuiTabPanel,\n} from \"@mui/lab\";\nimport { Tab as MuiTab } from \"@mui/material\";\n\nimport { Badge, BadgeProps } from \"./Badge.js\";\nimport { Box } from \"./Box.js\";\nimport { HtmlProps } from \"./HtmlProps.js\";\nimport { useOdysseyDesignTokens } from \"./OdysseyDesignTokensContext.js\";\nimport { type TestSelector } from \"./test-selectors/index.js\";\n\nexport const TabsTestSelector = {\n  children: {\n    tabItem: {\n      elementSelector: {\n        method: \"ByRole\",\n        options: {\n          label: \"name\",\n        },\n        role: \"tab\",\n      },\n    },\n  },\n  elementSelector: {\n    method: \"ByRole\",\n    options: {\n      label: \"name\",\n    },\n    role: \"tablist\",\n  },\n} as const satisfies TestSelector;\n\nexport type TabItemProps = {\n  /**\n   * The content of the Tab itself\n   */\n  children: ReactNode;\n  /**\n   * If `true`, the TabItem is disabled\n   */\n  isDisabled?: boolean;\n  /**\n   * The label text for the TabItem\n   */\n  label: string;\n  /**\n   * An optional icon to display at the start of the TabItem\n   */\n  startIcon?: ReactElement;\n  /**\n   * The value associated with the TabItem\n   */\n  value?: string;\n} & {\n  notificationCount?: BadgeProps[\"badgeContent\"];\n  notificationCountMax?: BadgeProps[\"badgeContentMax\"];\n} & Pick<HtmlProps, \"testId\" | \"translate\">;\n\nexport type TabsProps = {\n  /**\n   * @deprecated please use the `value` prop instead\n   * When `value` is provided, `initialValue` isn't used.\n   */\n  initialValue?: string;\n  /**\n   * The TabItems to be included in the Tabs group\n   */\n  tabs: TabItemProps[];\n  /**\n   * Identifier for the selected tab.\n   */\n  value?: string;\n  /**\n   * Callback fired when the active tab is changed.\n   */\n  onChange?: MuiTabListProps[\"onChange\"];\n};\n\nconst TabLabel = ({\n  label,\n  notificationCount,\n  notificationCountMax,\n  tabState,\n  value,\n}: Pick<\n  TabItemProps,\n  \"label\" | \"notificationCount\" | \"notificationCountMax\" | \"value\"\n> & {\n  tabState: string;\n}) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  return (\n    <>\n      {label}\n      {notificationCount !== undefined && notificationCount > 0 && (\n        <Box\n          sx={{\n            marginInlineStart: notificationCount\n              ? odysseyDesignTokens.Spacing2\n              : 0,\n          }}\n        >\n          <Badge\n            badgeContent={notificationCount}\n            badgeContentMax={notificationCountMax}\n            type={value === tabState ? \"attention\" : \"default\"}\n          />\n        </Box>\n      )}\n    </>\n  );\n};\n\nconst Tabs = ({\n  ariaLabel,\n  initialValue,\n  tabs,\n  value,\n  onChange: onChangeProp,\n}: TabsProps & Pick<HtmlProps, \"ariaLabel\">) => {\n  const [tabState, setTabState] = useState(initialValue ?? value ?? \"0\");\n  /*\n    The scrollButtons prop is initially set to `false`.\n    It's then reset to `auto` when the document is visible.\n    This prevents a rare bug where scroll buttons appear\n    when the component is rendered while hidden and the\n    screen is wide enough to not need scroll buttons.\n  */\n  const [scrollButtons, setScrollButtons] =\n    useState<MuiTabListProps[\"scrollButtons\"]>(false);\n  const onChange = useCallback<NonNullable<MuiTabListProps[\"onChange\"]>>(\n    (event, value: string) => {\n      setTabState(value);\n      onChangeProp?.(event, value);\n    },\n    [onChangeProp],\n  );\n\n  useEffect(() => {\n    if (value !== undefined) {\n      setTabState(value);\n    }\n  }, [value]);\n\n  // listen for visibility change to reset scroll buttons override\n  useEffect(() => {\n    // keep track of animation frame to cancel when needed\n    let animationFrame: number;\n\n    // called when unmounted or scroll buttons is reset\n    const cleanup = () => {\n      cancelAnimationFrame(animationFrame);\n      document.removeEventListener(\"visibilitychange\", refreshScrollButtons);\n    };\n\n    // Reset the scroll buttons override when the document becomes visible.\n    // If called, then the document is hidden because the event listener\n    // is only registered if the document is hidden\n    function refreshScrollButtons() {\n      animationFrame = requestAnimationFrame(() => {\n        cleanup();\n        setScrollButtons(\"auto\");\n      });\n    }\n\n    // don't override scroll buttons if it's already set to \"auto\"\n    if (scrollButtons !== \"auto\") {\n      document.addEventListener(\"visibilitychange\", refreshScrollButtons);\n    }\n    return () => {\n      cleanup();\n    };\n  }, [scrollButtons]);\n\n  const renderTab = useCallback(\n    (tab: TabItemProps, index: number) => {\n      const {\n        testId,\n        isDisabled,\n        label,\n        startIcon,\n        value,\n        notificationCount,\n        notificationCountMax,\n      } = tab;\n\n      return (\n        <MuiTab\n          data-se={testId}\n          disabled={isDisabled}\n          icon={startIcon}\n          tabIndex={0}\n          label={\n            <TabLabel\n              label={label}\n              notificationCount={notificationCount}\n              notificationCountMax={notificationCountMax}\n              tabState={tabState}\n              value={value}\n            />\n          }\n          value={value ? value : index.toString()}\n          key={value ? value : index.toString()}\n        />\n      );\n    },\n    [tabState],\n  );\n\n  return (\n    <MuiTabContext value={tabState}>\n      <MuiTabList\n        onChange={onChange}\n        aria-label={ariaLabel}\n        variant=\"scrollable\"\n        scrollButtons={scrollButtons}\n      >\n        {tabs.map((tab, index) => renderTab(tab, index))}\n      </MuiTabList>\n      {tabs.map((tab, index) => (\n        <MuiTabPanel\n          value={tab.value ? tab.value : index.toString()}\n          key={tab.value ? tab.value : index.toString()}\n        >\n          {tab.children}\n        </MuiTabPanel>\n      ))}\n    </MuiTabContext>\n  );\n};\n\nconst MemoizedTabs = memo(Tabs);\nMemoizedTabs.displayName = \"Tabs\";\n\nexport { MemoizedTabs as Tabs };\n"],"mappings":"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","ignoreList":[]}