@okta/odyssey-contribution-tooling 1.48.0 → 1.49.0

package/dist/cjs/Switch.cjs

@@ -0,0 +1,326 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Switch = void 0;
+var _FormLabel2 = _interopRequireDefault(require("@mui/material/FormLabel"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _react = require("react");
+var _Box = require("./Box.cjs");
+var _FieldHint = require("./FieldHint.cjs");
+var _i18n = require("./i18n.generated/i18n.cjs");
+var _index = require("./icons.generated/index.cjs");
+var _inputUtils = require("./inputUtils.cjs");
+var _OdysseyDesignTokensContext = require("./OdysseyDesignTokensContext.cjs");
+var _remUtils = require("./remUtils.cjs");
+var _useUniqueId = require("./useUniqueId.cjs");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/*!
+ * 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.
+ */
+
+const {
+  CONTROLLED
+} = _inputUtils.ComponentControlledState;
+const nonForwardedProps = ["isChecked", "isDisabled", "isFullWidth", "isReadOnly", "odysseyDesignTokens"];
+const SwitchAndLabelContainer = (0, _styled.default)("div", {
+  shouldForwardProp: prop => !nonForwardedProps.includes(prop)
+})(({
+  isFullWidth,
+  odysseyDesignTokens
+}) => ({
+  display: "flex",
+  alignItems: "flex-start",
+  justifyContent: "space-between",
+  maxWidth: isFullWidth ? "100%" : odysseyDesignTokens.TypographyLineLengthMax
+}));
+const SwitchContainer = _styled.default.div({
+  position: "relative"
+});
+const StyledSwitchLabel = (0, _styled.default)(_FormLabel2.default, {
+  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 = (0, _styled.default)("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 = (0, _styled.default)("span", {
+  shouldForwardProp: prop => !nonForwardedProps.includes(prop)
+})(({
+  isChecked,
+  isDisabled,
+  isReadOnly,
+  odysseyDesignTokens
+}) => {
+  const thumbOffset = (0, _remUtils.toRem)(3);
+  const trackWidth = (0, _remUtils.stripRem)(odysseyDesignTokens.Spacing7);
+  const thumbWidth = (0, _remUtils.stripRem)(odysseyDesignTokens.Spacing4) - (0, _remUtils.toRem)(2);
+  const transformDistance = trackWidth - thumbWidth - thumbOffset * 2;
+  return {
+    position: "absolute",
+    top: "50%",
+    left: `${thumbOffset}rem`,
+    width: `calc(${odysseyDesignTokens.Spacing4} - ${(0, _remUtils.toRem)(2)}rem)`,
+    height: `calc(${odysseyDesignTokens.Spacing4} - ${(0, _remUtils.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 = (0, _styled.default)(_index.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.default.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 = (0, _OdysseyDesignTokensContext.useOdysseyDesignTokens)();
+  return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: (0, _jsxRuntime.jsxs)(StyledSwitchLabel, {
+      htmlFor: inputId,
+      isDisabled: isDisabled,
+      isReadOnly: isReadOnly,
+      odysseyDesignTokens: odysseyDesignTokens,
+      children: [label, hint && (0, _jsxRuntime.jsx)(_FieldHint.FieldHint, {
+        id: hintId,
+        LinkComponent: HintLinkComponent,
+        text: hint
+      })]
+    })
+  });
+};
+const MemoizedSwitchLabel = (0, _react.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
+  } = (0, _i18n.useTranslation)();
+  const odysseyDesignTokens = (0, _OdysseyDesignTokensContext.useOdysseyDesignTokens)();
+  const controlledStateRef = (0, _react.useRef)((0, _inputUtils.getControlState)({
+    controlledValue: isChecked,
+    uncontrolledValue: isDefaultChecked
+  }));
+  const inputValues = (0, _react.useMemo)(() => {
+    if (controlledStateRef.current === CONTROLLED) {
+      return {
+        checked: isChecked
+      };
+    }
+    return {
+      defaultChecked: isDefaultChecked
+    };
+  }, [isDefaultChecked, isChecked]);
+  const [internalSwitchChecked, setInternalSwitchChecked] = (0, _react.useState)(controlledStateRef.current === CONTROLLED ? Boolean(isChecked) : Boolean(isDefaultChecked));
+  (0, _react.useEffect)(() => {
+    if (controlledStateRef.current === CONTROLLED) {
+      setInternalSwitchChecked(Boolean(isChecked));
+    }
+  }, [isChecked]);
+  const inputId = (0, _useUniqueId.useUniqueId)(idProp);
+  const hintId = hint ? `${inputId}-hint` : undefined;
+  const labelElementId = `${inputId}-label`;
+  const handleOnChange = (0, _react.useCallback)(event => {
+    if (isReadOnly) {
+      event.preventDefault();
+      return;
+    }
+    const target = event.target;
+    const {
+      checked,
+      value
+    } = target;
+    setInternalSwitchChecked(checked);
+    onChange?.({
+      checked,
+      value
+    });
+  }, [onChange, setInternalSwitchChecked, isReadOnly]);
+  return (0, _jsxRuntime.jsx)(_Box.Box, {
+    sx: {
+      marginBlockEnd: odysseyDesignTokens.Spacing2,
+      "&:last-child": {
+        marginBlockEnd: 0
+      }
+    },
+    children: (0, _jsxRuntime.jsxs)(SwitchAndLabelContainer, {
+      isFullWidth: isFullWidth,
+      odysseyDesignTokens: odysseyDesignTokens,
+      children: [(0, _jsxRuntime.jsx)(MemoizedSwitchLabel, {
+        hint: hint,
+        hintId: hintId,
+        HintLinkComponent: HintLinkComponent,
+        inputId: inputId,
+        isDisabled: isDisabled,
+        isFullWidth: isFullWidth,
+        isReadOnly: isReadOnly,
+        label: label
+      }), (0, _jsxRuntime.jsxs)(SwitchContainer, {
+        children: [(0, _jsxRuntime.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,
+          isReadOnly: isReadOnly,
+          name: name ?? inputId,
+          odysseyDesignTokens: odysseyDesignTokens,
+          onChange: handleOnChange,
+          readOnly: isReadOnly,
+          type: "checkbox",
+          value: value
+        }), (0, _jsxRuntime.jsxs)(SwitchTrack, {
+          "data-switch-track": true,
+          isChecked: internalSwitchChecked,
+          isDisabled: isDisabled,
+          isReadOnly: isReadOnly,
+          odysseyDesignTokens: odysseyDesignTokens,
+          children: [(0, _jsxRuntime.jsx)(SwitchThumb, {
+            isChecked: internalSwitchChecked,
+            isDisabled: isDisabled,
+            isReadOnly: isReadOnly,
+            odysseyDesignTokens: odysseyDesignTokens
+          }), (0, _jsxRuntime.jsx)(SwitchCheckMark, {
+            isChecked: internalSwitchChecked,
+            isDisabled: isDisabled,
+            isReadOnly: isReadOnly,
+            odysseyDesignTokens: odysseyDesignTokens
+          })]
+        })]
+      })]
+    })
+  });
+};
+const MemoizedSwitch = exports.Switch = (0, _react.memo)(Switch);
+MemoizedSwitch.displayName = "Switch";
+//# sourceMappingURL=Switch.cjs.map

package/dist/cjs/Switch.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.cjs","names":["_styled","_interopRequireDefault","require","_react","_Box","_FieldHint","_i18n","_index","_inputUtils","_OdysseyDesignTokensContext","_remUtils","_useUniqueId","_jsxRuntime","e","__esModule","default","CONTROLLED","ComponentControlledState","nonForwardedProps","SwitchAndLabelContainer","styled","shouldForwardProp","prop","includes","isFullWidth","odysseyDesignTokens","display","alignItems","justifyContent","maxWidth","TypographyLineLengthMax","SwitchContainer","div","position","StyledSwitchLabel","_FormLabel2","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","toRem","trackWidth","stripRem","thumbWidth","transformDistance","top","left","BorderRadiusRound","HueNeutralWhite","transform","HueNeutral50","HueNeutral400","SwitchCheckMark","CheckIcon","opacity","path","fill","HiddenCheckbox","input","cursor","zIndex","boxShadow","PalettePrimaryMain","SwitchLabel","hint","hintId","HintLinkComponent","inputId","label","useOdysseyDesignTokens","jsx","Fragment","children","jsxs","htmlFor","FieldHint","id","LinkComponent","text","MemoizedSwitchLabel","memo","displayName","Switch","idProp","isDefaultChecked","name","onChange","testId","value","t","useTranslation","controlledStateRef","useRef","getControlState","controlledValue","uncontrolledValue","inputValues","useMemo","current","checked","defaultChecked","internalSwitchChecked","setInternalSwitchChecked","useState","Boolean","useEffect","useUniqueId","undefined","labelElementId","handleOnChange","useCallback","event","preventDefault","target","Box","sx","marginBlockEnd","Spacing2","disabled","readOnly","type","MemoizedSwitch","exports"],"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 styled from \"@emotion/styled\";\nimport { FormLabel, SwitchProps as MuiSwitchProps } from \"@mui/material\";\nimport {\n  ChangeEventHandler,\n  memo,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport type { HtmlProps } from \"./HtmlProps.js\";\n\nimport { Box } from \"./Box.js\";\nimport { FieldComponentProps } from \"./FieldComponentProps.js\";\nimport { FieldHint } from \"./FieldHint.js\";\nimport { CheckedFieldProps } from \"./FormCheckedProps.js\";\nimport { useTranslation } from \"./i18n.generated/i18n.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  isReadOnly?: boolean;\n  odysseyDesignTokens: DesignTokens;\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   * Determines whether the Switch is read-only\n   */\n  isReadOnly?: 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\" | \"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  isReadOnly: SwitchProps[\"isReadOnly\"];\n  label: SwitchProps[\"label\"];\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            LinkComponent={HintLinkComponent}\n            text={hint}\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          isReadOnly={isReadOnly}\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            isReadOnly={isReadOnly}\n            name={name ?? inputId}\n            odysseyDesignTokens={odysseyDesignTokens}\n            onChange={handleOnChange}\n            readOnly={isReadOnly}\n            type=\"checkbox\"\n            value={value}\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/cjs/Tabs.cjs

@@ -0,0 +1,126 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Tabs = void 0;
+var _Tab2 = _interopRequireDefault(require("@mui/material/Tab"));
+var _lab = require("@mui/lab");
+var _react = require("react");
+var _Badge = require("./Badge.cjs");
+var _Box = require("./Box.cjs");
+var _OdysseyDesignTokensContext = require("./OdysseyDesignTokensContext.cjs");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/*!
+ * 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.
+ */
+
+const TabLabel = ({
+  label,
+  notificationCount,
+  notificationCountMax,
+  tabState,
+  value
+}) => {
+  const odysseyDesignTokens = (0, _OdysseyDesignTokensContext.useOdysseyDesignTokens)();
+  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [label, notificationCount !== undefined && notificationCount > 0 && (0, _jsxRuntime.jsx)(_Box.Box, {
+      sx: {
+        marginInlineStart: notificationCount ? odysseyDesignTokens.Spacing2 : 0
+      },
+      children: (0, _jsxRuntime.jsx)(_Badge.Badge, {
+        badgeContent: notificationCount,
+        badgeContentMax: notificationCountMax,
+        type: value === tabState ? "attention" : "default"
+      })
+    })]
+  });
+};
+const Tabs = ({
+  ariaLabel,
+  initialValue,
+  tabs,
+  value,
+  onChange: onChangeProp
+}) => {
+  const [tabState, setTabState] = (0, _react.useState)(initialValue ?? value ?? "0");
+  const [scrollButtons, setScrollButtons] = (0, _react.useState)(false);
+  const onChange = (0, _react.useCallback)((event, value) => {
+    setTabState(value);
+    onChangeProp?.(event, value);
+  }, [onChangeProp]);
+  (0, _react.useEffect)(() => {
+    if (value !== undefined) {
+      setTabState(value);
+    }
+  }, [value]);
+  (0, _react.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 = (0, _react.useCallback)((tab, index) => {
+    const {
+      testId,
+      isDisabled,
+      label,
+      startIcon,
+      value,
+      notificationCount,
+      notificationCountMax
+    } = tab;
+    return (0, _jsxRuntime.jsx)(_Tab2.default, {
+      "data-se": testId,
+      disabled: isDisabled,
+      icon: startIcon,
+      label: (0, _jsxRuntime.jsx)(TabLabel, {
+        label: label,
+        notificationCount: notificationCount,
+        notificationCountMax: notificationCountMax,
+        tabState: tabState,
+        value: value
+      }),
+      tabIndex: 0,
+      value: value ? value : index.toString()
+    }, value ? value : index.toString());
+  }, [tabState]);
+  return (0, _jsxRuntime.jsxs)(_lab.TabContext, {
+    value: tabState,
+    children: [(0, _jsxRuntime.jsx)(_lab.TabList, {
+      "aria-label": ariaLabel,
+      onChange: onChange,
+      scrollButtons: scrollButtons,
+      variant: "scrollable",
+      children: tabs.map((tab, index) => renderTab(tab, index))
+    }), tabs.map((tab, index) => (0, _jsxRuntime.jsx)(_lab.TabPanel, {
+      value: tab.value ? tab.value : index.toString(),
+      children: tab.children
+    }, tab.value ? tab.value : index.toString()))]
+  });
+};
+const MemoizedTabs = exports.Tabs = (0, _react.memo)(Tabs);
+MemoizedTabs.displayName = "Tabs";
+//# sourceMappingURL=Tabs.cjs.map

package/dist/cjs/Tabs.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.cjs","names":["_lab","require","_react","_Badge","_Box","_OdysseyDesignTokensContext","_jsxRuntime","_interopRequireDefault","e","__esModule","default","TabLabel","label","notificationCount","notificationCountMax","tabState","value","odysseyDesignTokens","useOdysseyDesignTokens","jsxs","Fragment","children","undefined","jsx","Box","sx","marginInlineStart","Spacing2","Badge","badgeContent","badgeContentMax","type","Tabs","ariaLabel","initialValue","tabs","onChange","onChangeProp","setTabState","useState","scrollButtons","setScrollButtons","useCallback","event","useEffect","animationFrame","cleanup","cancelAnimationFrame","document","removeEventListener","refreshScrollButtons","requestAnimationFrame","addEventListener","renderTab","tab","index","testId","isDisabled","startIcon","_Tab2","disabled","icon","tabIndex","toString","TabContext","TabList","variant","map","TabPanel","MemoizedTabs","exports","memo","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  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\";\nimport {\n  memo,\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useEffect,\n  useState,\n} from \"react\";\n\nimport { Badge, BadgeProps } from \"./Badge.js\";\nimport { Box } from \"./Box.js\";\nimport { HtmlProps } from \"./HtmlProps.js\";\nimport { useOdysseyDesignTokens } from \"./OdysseyDesignTokensContext.js\";\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   * Callback fired when the active tab is changed.\n   */\n  onChange?: MuiTabListProps[\"onChange\"];\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\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          key={value ? value : index.toString()}\n          label={\n            <TabLabel\n              label={label}\n              notificationCount={notificationCount}\n              notificationCountMax={notificationCountMax}\n              tabState={tabState}\n              value={value}\n            />\n          }\n          tabIndex={0}\n          value={value ? value : index.toString()}\n        />\n      );\n    },\n    [tabState],\n  );\n\n  return (\n    <MuiTabContext value={tabState}>\n      <MuiTabList\n        aria-label={ariaLabel}\n        onChange={onChange}\n        scrollButtons={scrollButtons}\n        variant=\"scrollable\"\n      >\n        {tabs.map((tab, index) => renderTab(tab, index))}\n      </MuiTabList>\n      {tabs.map((tab, index) => (\n        <MuiTabPanel\n          key={tab.value ? tab.value : index.toString()}\n          value={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":[]}