@okta/odyssey-react-mui 1.9.8 → 1.9.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "1.9.8",
+  "version": "1.9.10",
   "description": "React MUI components for Odyssey, Okta's design system",
   "author": "Okta, Inc.",
   "license": "Apache-2.0",
@@ -51,7 +51,7 @@
     "@mui/system": "^5.14.9",
     "@mui/utils": "^5.11.2",
     "@mui/x-date-pickers": "^5.0.15",
-    "@okta/odyssey-design-tokens": "1.9.8",
+    "@okta/odyssey-design-tokens": "1.9.10",
     "date-fns": "^2.30.0",
     "i18next": "^23.5.1",
     "material-react-table": "^2.0.2",
@@ -63,5 +63,5 @@
     "react": ">=17 <19",
     "react-dom": ">=17 <19"
   },
-  "gitHead": "b7e137230a43e2d028a0c5026b2ed6c9d70f790b"
+  "gitHead": "4a4a98d1b9e421122332cb0635d823189ee4e72b"
 }

package/src/OdysseyTranslationProvider.tsx

@@ -19,6 +19,7 @@ import { I18nextProvider } from "react-i18next";
 import { getTypedObjectKeys } from "./getTypedObjectKeys";
 
 export type OdysseyI18nResourceKeys = (typeof resources)["en"];
+export const odysseyI18nResourceKeysList = getTypedObjectKeys(resources["en"]);
 
 export type TranslationOverrides<
   SupportedLanguages extends string = DefaultSupportedLanguages

package/src/index.ts

@@ -96,6 +96,7 @@ export * from "./TextField";
 export * from "./theme";
 export * from "./Toast";
 export * from "./ToastStack";
+export * from "./labs/Switch";
 export * from "./Tooltip";
 export * from "./Typography";
 export * from "./useUniqueId";

package/src/labs/Switch.tsx

@@ -0,0 +1,246 @@
+/*!
+ * 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,
+  SyntheticEvent,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import {
+  Switch as MuiSwitch,
+  SwitchProps as MuiSwitchProps,
+  FormControlLabel,
+} from "@mui/material";
+
+const { CONTROLLED } = ComponentControlledState;
+import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext";
+import { Box } from "../Box";
+import { FieldComponentProps } from "../FieldComponentProps";
+import { FieldHint } from "../FieldHint";
+import type { SeleniumProps } from "../SeleniumProps";
+import { useUniqueId } from "../useUniqueId";
+import { ComponentControlledState, getControlState } from "../inputUtils";
+import { CheckedFieldProps } from "../FormCheckedProps";
+
+type OnChangeCallbackArguments = {
+  checked: boolean;
+  value: string;
+};
+
+export type SwitchProps = {
+  /**
+   * if `true`, the label and switch span entire containing element's width
+   */
+  isFullWidth?: boolean;
+  /**
+   * The label text for the Switch
+   */
+  label: string;
+  /**
+   * The change event handler for the Switch
+   */
+  onChange?: ({ checked, value }: OnChangeCallbackArguments) => void;
+  /**
+   * The value attribute of the Switch
+   */
+  value: string;
+} & Pick<
+  FieldComponentProps,
+  "hint" | "id" | "isFullWidth" | "isDisabled" | "name"
+> &
+  CheckedFieldProps<MuiSwitchProps> &
+  SeleniumProps;
+
+type SwitchLabelProps = {
+  checked: boolean;
+  hint: SwitchProps["hint"];
+  hintId?: string;
+  isFullWidth: SwitchProps["isFullWidth"];
+  label: SwitchProps["label"];
+};
+
+const SwitchLabel = ({
+  checked,
+  hint,
+  hintId,
+  isFullWidth,
+  label,
+}: SwitchLabelProps) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+
+  return (
+    <>
+      <Box
+        sx={{
+          display: "flex",
+          alignItems: "center",
+          flexWrap: "wrap",
+          gap: odysseyDesignTokens.Spacing1,
+          margin: 0,
+          maxWidth: isFullWidth
+            ? "100%"
+            : odysseyDesignTokens.TypographyLineLengthMax,
+          fontWeight: odysseyDesignTokens.TypographyWeightBodyBold,
+        }}
+      >
+        {label}
+        <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,
+          }}
+        >
+          {checked ? "Active" : "Inactive"}
+        </Box>
+      </Box>
+      {hint && <FieldHint id={hintId} text={hint} />}
+    </>
+  );
+};
+
+const Switch = ({
+  hint,
+  id: _id,
+  isChecked,
+  isDefaultChecked,
+  isDisabled,
+  isFullWidth = false,
+  label,
+  name: _name,
+  onChange,
+  testId,
+  value = "Something",
+}: SwitchProps) => {
+  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 id = useUniqueId(_id);
+
+  const hintId = hint ? `${id}-hint` : undefined;
+  const labelElementId = `${id}-label`;
+
+  const handleOnChange = useCallback(
+    (_: SyntheticEvent<Element, Event>, checked: boolean) => {
+      setInternalSwitchChecked(checked);
+      onChange?.({ checked, value });
+    },
+    [onChange, setInternalSwitchChecked, value]
+  );
+
+  const renderSwitchComponent = useMemo(
+    () => (
+      <MuiSwitch
+        {...inputValues}
+        disabled={isDisabled}
+        disableRipple
+        inputProps={{
+          "aria-checked": internalSwitchChecked,
+          "aria-describedby": hintId,
+          "aria-label": label,
+          "aria-labelledby": labelElementId,
+        }}
+        name={_name ?? id}
+        onChange={handleOnChange}
+      />
+    ),
+    [
+      handleOnChange,
+      hintId,
+      inputValues,
+      internalSwitchChecked,
+      id,
+      isDisabled,
+      label,
+      labelElementId,
+      _name,
+    ]
+  );
+
+  return (
+    <Box
+      sx={{
+        marginBlockEnd: odysseyDesignTokens.Spacing2,
+      }}
+    >
+      <FormControlLabel
+        checked={internalSwitchChecked}
+        control={renderSwitchComponent}
+        data-se={testId}
+        disabled={isDisabled}
+        id={labelElementId}
+        label={
+          <SwitchLabel
+            checked={internalSwitchChecked}
+            hint={hint}
+            hintId={hintId}
+            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}
+      />
+    </Box>
+  );
+};
+
+const MemoizedSwitch = memo(Switch);
+MemoizedSwitch.displayName = "Switch";
+
+export { MemoizedSwitch as Switch };

package/src/labs/index.ts

@@ -27,3 +27,5 @@ export * from "./PaginatedTable";
 
 export * from "./GroupPicker";
 export * from "./VirtualizedAutocomplete";
+
+export * from "./Switch";

package/src/theme/components.tsx

@@ -1355,6 +1355,62 @@ export const components = ({
         },
       },
     },
+    MuiSwitch: {
+      styleOverrides: {
+        root: {
+          position: "relative",
+          padding: `${odysseyTokens.Spacing0} 0`,
+          width: odysseyTokens.Spacing7,
+          height: odysseyTokens.Spacing5,
+          overflow: "visible",
+        },
+        switchBase: ({ ownerState }) => ({
+          top: odysseyTokens.Spacing1,
+          left: odysseyTokens.Spacing1,
+          padding: `${odysseyTokens.Spacing0} 0`,
+
+          ...(ownerState.checked === true && {
+            color: `${odysseyTokens.HueNeutralWhite} !important`,
+            transform: `translateX(${odysseyTokens.Spacing4}) !important`,
+          }),
+
+          "&:hover": {
+            backgroundColor: "transparent",
+
+            ...(ownerState.checked === true && {
+              backgroundColor: "transparent !important",
+            }),
+          },
+          // Had to use `Mui-focusVisible` class here. `:focus-visible` was not being triggered correctly.
+          "&.Mui-focusVisible": {
+            // Focus styles applied this way due to MUI not applying `Mui-focusVisible` class to the correct element see: https://github.com/mui/material-ui/issues/34986
+            " + .MuiSwitch-track": {
+              boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PalettePrimaryMain}`,
+            },
+          },
+        }),
+        thumb: {
+          width: odysseyTokens.Spacing4,
+          height: odysseyTokens.Spacing4,
+          boxShadow: "none",
+        },
+        track: ({ ownerState }) => ({
+          borderRadius: odysseyTokens.BorderRadiusRound,
+          backgroundColor: `${odysseyTokens.HueNeutral300}`,
+          opacity: 1,
+
+          ...(ownerState.checked === true && {
+            // !important used to override more specific .Mui-checked class
+            opacity: "1 !important",
+            backgroundColor: `${odysseyTokens.PaletteSuccessLight} !important`,
+          }),
+        }),
+        input: {
+          height: "44px",
+          top: "-14px",
+        },
+      },
+    },
     MuiDialog: {
       defaultProps: {
         scroll: "paper",