@okta/odyssey-react-mui 1.12.0 → 1.12.4

package/dist/useNormalizedKey.js

@@ -0,0 +1,20 @@
+/*!
+ * Copyright (c) 2024-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.
+ */
+
+export const normalizedKey = function () {
+  const SEPARATOR = "-";
+  for (var _len = arguments.length, keyParts = new Array(_len), _key = 0; _key < _len; _key++) {
+    keyParts[_key] = arguments[_key];
+  }
+  return keyParts.join(SEPARATOR).replace(/\W+/g, SEPARATOR).toLowerCase();
+};
+//# sourceMappingURL=useNormalizedKey.js.map

package/dist/useNormalizedKey.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNormalizedKey.js","names":["normalizedKey","SEPARATOR","_len","arguments","length","keyParts","Array","_key","join","replace","toLowerCase"],"sources":["../src/useNormalizedKey.ts"],"sourcesContent":["/*!\n * Copyright (c) 2024-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\nexport const normalizedKey = (...keyParts: string[]): string => {\n  const SEPARATOR = \"-\";\n  // Joins all strings together with SEPARATOR, replaces any non-alphanumeric character with SEPARATOR and casts all to lowercase\n  return keyParts.join(SEPARATOR).replace(/\\W+/g, SEPARATOR).toLowerCase();\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAO,MAAMA,aAAa,GAAG,SAAAA,CAAA,EAAmC;EAC9D,MAAMC,SAAS,GAAG,GAAG;EAAC,SAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,EADSC,QAAQ,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA;IAARF,QAAQ,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA;EAAA;EAGvC,OAAOF,QAAQ,CAACG,IAAI,CAACP,SAAS,CAAC,CAACQ,OAAO,CAAC,MAAM,EAAER,SAAS,CAAC,CAACS,WAAW,CAAC,CAAC;AAC1E,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "1.12.0",
+  "version": "1.12.4",
   "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.12.0",
+    "@okta/odyssey-design-tokens": "1.12.4",
     "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": "1bffe33f2c5946144232f60f983bfe76b6339453"
+  "gitHead": "b5b53ea203c3017a6fd6dc6642a1dfc9a19df7fd"
 }

package/src/CircularProgress.tsx

@@ -10,6 +10,7 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
+import { memo } from "react";
 import { CircularProgress as MuiCircularProgress } from "@mui/material";
 
 import type { AllowedProps } from "./AllowedProps";
@@ -26,7 +27,7 @@ export type CircularProgressProps = {
   value?: number;
 } & AllowedProps;
 
-export const CircularProgress = ({
+const CircularProgress = ({
   ariaLabel,
   testId,
   value,
@@ -38,3 +39,8 @@ export const CircularProgress = ({
     aria-label={ariaLabel}
   />
 );
+
+const MemoizedCircularProgress = memo(CircularProgress);
+MemoizedCircularProgress.displayName = "CircularProgress";
+
+export { MemoizedCircularProgress as CircularProgress };

package/src/Select.tsx

@@ -40,6 +40,7 @@ import {
   useInputValues,
   getControlState,
 } from "./inputUtils";
+import { normalizedKey } from "./useNormalizedKey";
 
 export type SelectOption = {
   text: string;
@@ -215,7 +216,10 @@ const Select = <
         typeof option === "object"
           ? {
               text: option.text,
-              value: option.value || option.text,
+              value:
+                option?.value === ""
+                  ? option.value
+                  : option.value || option.text,
               type: option.type === "heading" ? "heading" : "option",
             }
           : { text: option, value: option, type: "option" }
@@ -261,19 +265,25 @@ const Select = <
   // that will populate the <Select>
   const children = useMemo(
     () =>
-      normalizedOptions.map((option) => {
+      normalizedOptions.map((option, index) => {
         if (option.type === "heading") {
           return <ListSubheader key={option.text}>{option.text}</ListSubheader>;
         }
         return (
-          <MenuItem key={option.value} value={option.value}>
+          <MenuItem
+            key={normalizedKey(option.text, index.toString())}
+            value={option.value}
+          >
             {hasMultipleChoices && (
               <MuiCheckbox
-                checked={internalSelectedValues?.includes(option.value)}
+                checked={
+                  option.value !== undefined &&
+                  internalSelectedValues?.includes(option.value)
+                }
               />
             )}
             {option.text}
-            {internalSelectedValues === option.value && (
+            {internalSelectedValues === option?.value && (
               <ListItemSecondaryAction>
                 <CheckIcon />
               </ListItemSecondaryAction>
@@ -291,6 +301,10 @@ const Select = <
         aria-describedby={ariaDescribedBy}
         aria-errormessage={errorMessageElementId}
         children={children}
+        data-se={testId}
+        displayEmpty={
+          inputValues?.value === "" || inputValues?.defaultValue === ""
+        }
         id={id}
         inputProps={{ "data-se": testId }}
         inputRef={localInputRef}

package/src/index.ts

@@ -52,6 +52,9 @@ export type {
   ThemeOptions,
 } from "@mui/material";
 
+export type { ForwardRefWithType } from "./@types/react-augment";
+export type { FocusHandle } from "./inputUtils";
+
 export { useOdysseyDesignTokens } from "./OdysseyDesignTokensContext";
 
 export * from "./Accordion";

package/src/useNormalizedKey.ts

@@ -0,0 +1,17 @@
+/*!
+ * Copyright (c) 2024-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.
+ */
+
+export const normalizedKey = (...keyParts: string[]): string => {
+  const SEPARATOR = "-";
+  // Joins all strings together with SEPARATOR, replaces any non-alphanumeric character with SEPARATOR and casts all to lowercase
+  return keyParts.join(SEPARATOR).replace(/\W+/g, SEPARATOR).toLowerCase();
+};