@okta/odyssey-react-mui 1.13.11 → 1.14.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "1.13.11",
+  "version": "1.14.2",
   "description": "React MUI components for Odyssey, Okta's design system",
   "author": "Okta, Inc.",
   "license": "Apache-2.0",
@@ -42,26 +42,26 @@
     "directory": "packages/odyssey-react-mui"
   },
   "dependencies": {
-    "@emotion/cache": "^11.10.5",
-    "@emotion/react": "^11.11.1",
+    "@emotion/cache": "^11.11.0",
+    "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.11.0",
-    "@mui/lab": "^5.0.0-alpha.117",
-    "@mui/material": "^5.12.3",
-    "@mui/system": "^5.14.9",
-    "@mui/utils": "^5.11.2",
+    "@mui/icons-material": "^5.15.10",
+    "@mui/lab": "^5.0.0-alpha.165",
+    "@mui/material": "^5.15.10",
+    "@mui/system": "^5.15.9",
+    "@mui/utils": "^5.15.9",
     "@mui/x-date-pickers": "^5.0.15",
-    "@okta/odyssey-design-tokens": "1.13.11",
+    "@okta/odyssey-design-tokens": "^1.14.2",
     "date-fns": "^2.30.0",
-    "i18next": "^23.5.1",
-    "material-react-table": "^2.0.2",
-    "react-i18next": "^12.2.2",
-    "ts-node": "^10.9.1",
-    "word-wrap": "~1.2.5"
+    "i18next": "^23.8.2",
+    "material-react-table": "^2.11.3",
+    "react-i18next": "^14.0.5",
+    "tsx": "^4.7.1",
+    "word-wrap": "^1.2.5"
   },
   "peerDependencies": {
     "react": ">=17 <19",
     "react-dom": ">=17 <19"
   },
-  "gitHead": "056c36afdaaae83d531f50b9dd04eca4b8b5fb4c"
+  "gitHead": "0966a06e6eda85e0d9bae6a67988e08509feb82d"
 }

package/scripts/generateIconsIndex.ts

@@ -37,8 +37,8 @@ readdir("./src/icons.generated")
       filenames
         .map((filename) => basename(filename, extname(filename)))
         .map((filename) => `export * from "./${filename}";`)
-        .join("\n")
-    )
+        .join("\n"),
+    ),
   )
   .then((content) => writeFile("./src/icons.generated/index.ts", content))
   .then(() => {

package/scripts/{properties-to-ts.js → properties-to-ts.ts}

@@ -1,3 +1,4 @@
+#!/usr/bin/env node
 /*!
  * Copyright (c) 2023-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.")
@@ -10,87 +11,100 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-// Part of this has been copied over from @okta/ui-build-tools' own internal node script
+// This was originally copied over from @okta/ui-build-tools' own internal node script:
 // https://github.com/okta/ui-build-tools/blob/main/packages/clis/i18n/properties-to-json.js
 
-const { resolve, join, basename, extname } = require("node:path");
-const {
-  readFileSync,
-  writeFileSync,
-  rmSync,
+import { basename, extname, join, resolve } from "node:path";
+import {
   existsSync,
   mkdirSync,
-} = require("node:fs");
-const properties = require("properties");
-const readdir = require("recursive-readdir");
-const yargs = require("yargs");
-const { hideBin } = require("yargs/helpers");
+  readFileSync,
+  rmSync,
+  writeFileSync,
+} from "node:fs";
+import { readdir } from "node:fs/promises";
+import properties from "properties";
+import { hideBin } from "yargs/helpers";
+import yargs from "yargs/yargs";
 
-const convert = (baseFiles, propertiesTargetDir) => {
-  for (const src of baseFiles) {
-    const filename = basename(src);
+const convert = (baseFiles: string[], propertiesTargetDir: string) => {
+  baseFiles.forEach((src) => {
     const extension = extname(src);
+    const filename = basename(src, extension);
     const source = `${readFileSync(src)}`;
 
-    properties.parse(source, function (error, obj) {
+    properties.parse(source, (error, propertiesJson) => {
       if (error) {
         return console.error(error);
       }
 
-      const targetFile = join(
-        propertiesTargetDir,
-        filename.replace(extension, ".ts")
-      );
+      const targetFile = join(propertiesTargetDir, filename.concat(".ts"));
+
       writeFileSync(
         targetFile,
-        `export const translation = ${JSON.stringify(obj)};`
+        `export const translation = ${JSON.stringify(propertiesJson)};`,
       );
     });
-  }
+  });
 };
 
-async function convertPropertiesToJson({ resourcePath, targetJsonPath }) {
-  const sourceDirectory = resolve(resourcePath);
-  const propertiesTargetDirectory = resolve(targetJsonPath);
+async function convertPropertiesToJson({
+  jsonOutputPath,
+  propertiesFilesPath,
+}: {
+  jsonOutputPath: string;
+  propertiesFilesPath: string;
+}) {
+  const sourceDirectory = resolve(propertiesFilesPath);
+  const propertiesTargetDirectory = resolve(jsonOutputPath);
 
   if (!existsSync(sourceDirectory)) {
     mkdirSync(sourceDirectory);
   }
+
   if (existsSync(propertiesTargetDirectory)) {
     rmSync(propertiesTargetDirectory, { recursive: true, force: true });
   }
+
   mkdirSync(propertiesTargetDirectory);
 
-  let baseFiles = await readdir(sourceDirectory);
-  convert(baseFiles, propertiesTargetDirectory);
+  const propertiesFilePaths = await readdir(sourceDirectory, {
+    recursive: true,
+  });
+
+  convert(
+    propertiesFilePaths
+      .filter((propertiesFilePath) =>
+        propertiesFilePath.endsWith(".properties"),
+      )
+      .map((propertiesFilePath) => join(sourceDirectory, propertiesFilePath)),
+    propertiesTargetDirectory,
+  );
 }
 
 yargs(hideBin(process.argv))
   .scriptName("properties-to-ts")
   .usage("$0 <cmd> [args]")
   .command(
-    "bundle",
-    "Converts properties file to ts",
-    (yargs) => {
+    "bundle [propertiesFilesPath] [jsonOutputPath]",
+    "Converts `properties` files to TypeScript types.",
+    (yargs) =>
       yargs
-        .positional("resourcePath", {
-          type: "string",
+        .positional("propertiesFilesPath", {
           default: "src/properties",
           describe: "A relative path to resources based on cwd.",
-        })
-        .positional("targetJsonPath", {
           type: "string",
+        })
+        .positional("jsonOutputPath", {
           default: "src/properties/ts",
           describe: "A relative path to directory for ts file output",
-        });
-    },
-    function (argv) {
-      const { resourcePath, targetJsonPath } = argv;
-
+          type: "string",
+        }),
+    (argv) => {
       convertPropertiesToJson({
-        resourcePath,
-        targetJsonPath,
+        jsonOutputPath: argv.jsonOutputPath,
+        propertiesFilesPath: argv.propertiesFilesPath,
       });
-    }
+    },
   )
   .help().argv;

package/src/@types/properties.d.ts

@@ -0,0 +1,292 @@
+/*!
+ * 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.
+ */
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+/**
+ * Copied this in from a PR that will hopefully get merged:
+ * @see https://github.com/gagle/node-properties/pull/35
+ */
+declare module "properties" {
+  export interface ParseOptions {
+    /**
+     * By default `parse()` reads a String.
+     * If you want to read a file, set this option to true.
+     * If this option is used, the callback is mandatory.
+     * It gets 2 parameters, a possible error and the object with all the properties.
+     */
+    path?: boolean;
+
+    /**
+     * Allows you to add additional comment tokens.
+     * The token must be a single printable non-whitespae ascii character.
+     * If the `strict` option is not set, the tokens `#` and `!` are parsed as comment tokens.
+     *
+     * @example
+     * comments: ";"
+     * @example
+     * comments: [";", "@"]
+     */
+    comments?: string | string[];
+
+    /**
+     * Allows you to add additional separator tokens.
+     * The token must be a single printable non-whitespae ascii character.
+     * If the `strict` option is not set, the tokens `=` and `:` are parsed as comment tokens.
+     *
+     * @example
+     * separators: "-"
+     * @example
+     * separators: ["-", ">"]
+     */
+    separators?: string | string[];
+
+    /**
+     * This option can be used with the `comments` and `separators` options.
+     * If true, **only** the tokens specified in these options are used to parse comments and separators.
+     */
+    strict?: boolean;
+
+    /**
+     * Parses INI sections.
+     * Read the INI section for further details.
+     *
+     * @link https://www.npmjs.com/package/properties#ini
+     */
+    sections?: boolean;
+
+    /**
+     * Parses dot separated keys as JavaScript objects.
+     *
+     * Look at the namespaces section for further details.
+     * @link https://www.npmjs.com/package/properties#namespaces
+     */
+    namespaces?: boolean;
+
+    /**
+     * Allows you to read the value of a key while the file is being parsed.
+     *
+     * Look at the variables section for further details.
+     * @link https://www.npmjs.com/package/properties#variables
+     */
+    variables?: boolean;
+
+    /**
+     * External variables can be passed to the file if the variables option is enabled.
+     *
+     * Look at the variables section for further details.
+     * @link https://www.npmjs.com/package/properties#variables
+     */
+    vars?: boolean;
+
+    /**
+     * Files can be linked and imported with the include key.
+     * If this option is used, the callback is mandatory.
+     *
+     * Look at the include section for further details.
+     * @link https://www.npmjs.com/package/properties#include
+     */
+    include?: boolean;
+
+    /**
+     * Each property or section can be removed or modified from the final object.
+     * It's similar to the reviver of the `JSON.parse()` function.
+     *
+     * The reviver it's exactly the same as the replacer from `stringify()`.
+     * The same function can be reused.
+     *
+     * The callback gets 3 parameters: key, value and section.
+     *
+     * A property has a key and a value and can belong to a section.
+     * If it's a global property, the section is set to null.
+     * If **undefined** is returned, the property will be removed from the final object, otherwise the returned value will be used as the property value.
+     *
+     * If the key and the value are set to null, then it's a section line.
+     * If it returns a falsy value, it won't be added to the final object, the entire section _including all the properties_ will be discarded.
+     * If it returns a truthy value, the section is parsed.
+     *
+     * For your convenience, to know whether the line is a property or section you can access to `this.isProperty` and `this.isSection` from inside the replacer function.
+     * Also, `this.assert()` can be used to return the default value, the unmodified value that will be used to parse the line.
+     *
+     * Look at the reviver example for further details.
+     * @link https://github.com/gagle/node-properties/blob/master/examples/reviver/reviver.js
+     */
+    reviver?: (this: Context, key: any, value: any) => any;
+  }
+
+  export interface Context {
+    assert(): any;
+  }
+
+  /**
+   * Parses a .properties string.
+   *
+   * @param data
+   * @param options
+   */
+  export function parse(data: string, options?: ParseOptions): object;
+
+  /**
+   * Parses a .properties string.
+   *
+   * If a callback is given, the result is returned as the second parameter. Some options will require a callback.
+   *
+   * @param data
+   * @param cb
+   */
+  export function parse(
+    data: string,
+    cb: (err: Error, result: { [key: string]: unknown } | undefined) => void,
+  ): void;
+
+  /**
+   * Parses a .properties string.
+   *
+   * If a callback is given, the result is returned as the second parameter. Some options will require a callback.
+   *
+   * @param data
+   * @param options
+   * @param cb
+   */
+  export function parse(
+    data: string,
+    options: ParseOptions | undefined,
+    cb: (err: Error, result: { [key: string]: unknown } | undefined) => void,
+  ): void;
+
+  export interface StringifyOptions {
+    /**
+     * By default `stringify()` returns a string.
+     * If you want to write it to a file, use this option and pass the path of a file.
+     * If this option is used, the callback is mandatory.
+     * It gets two parameters, a possible error and the string.
+     */
+    path?: string;
+
+    /**
+     * The token to use to write comments.
+     * It must be a single printable non-whitespace ascii character.
+     * @default `#`
+     */
+    comment?: string;
+
+    /**
+     * The token to use to separate keys from values.
+     * It must be a single printable non-whitespace ascii character.
+     * @default `=`
+     */
+    separator?: string;
+
+    /**
+     * The .properties specification uses iso 8859-1 (latin-1) as a default encoding.
+     * In the other hand, Node.js has a utf8 default encoding.
+     * This means that if you want a full compatibility with Java, that is, you are generating a .properties file that is going to be read by a Java program, then set this option to true.
+     * This will encode all ascii extended and multibyte characters to their unicode string representation (`\uXXXX`).
+     *
+     * Non-printable control codes (control sets 0 and 1) are always encoded as unicode strings except `\t`, `\n`, `\f` and `\r`.
+     *
+     * If you are in a platform that can handle utf8 strings, e.g. Node.js, you don't need to use this option.
+     */
+    unicode?: boolean;
+
+    /**
+     * Each property or section can be removed or modified from the final string.
+     * It's similar to the replacer of the `JSON.stringify()` function.
+     *
+     * The replacer it's exatcly the same as the reviver from `parse()`.
+     * The same function can be reused.
+     *
+     * The callback gets three parameters: key, value and section.
+     *
+     * A property has a key and a value and can belong to a section.
+     * If it's a global property, the section is set to null.
+     * If **undefined** is returned, the property won't be stringified, otherwise the returned value will be used as the property value.
+     *
+     * If the key and the value are set to null, then it's a section line.
+     * If it returns a falsy value, it won't be added to the final string, the entire section _including all the properties_ will be discarded.
+     * If it returns a truthy value, the section is stringified.
+     *
+     * For your convenience, to know whether the line is a property or section you can access to `this.isProperty` and `this.isSection` from inside the replacer function.
+     * Also, `this.assert()` can be used to return the default value, the unmodified value that will be used to stringify the line.
+     *
+     * Look at the replacer example for further details.
+     * @link https://github.com/gagle/node-properties/blob/master/examples/replacer.js
+     */
+    replacer?: (this: Context, key: string, value: any) => any;
+  }
+
+  /**
+   * Stringifies an `object` or a `Stringifier`.
+   *
+   * If you don't need to add sections or comments simply pass an object, otherwise use a `Stringifier`.
+   *
+   * @param obj
+   * @param options
+   */
+  export function stringify(obj: object, options?: StringifyOptions): string;
+
+  /**
+   * Stringifies an `object` or a `Stringifier`.
+   *
+   * If you don't need to add sections or comments simply pass an object, otherwise use a `Stringifier`.
+   *
+   * The callback is only necessary when the `path` option is used.
+   *
+   * @param obj
+   * @param options
+   * @param cb
+   */
+  export function stringify(
+    obj: object,
+    options: StringifyOptions | undefined,
+    cb: (err: Error, result: string) => void,
+  ): void;
+
+  /**
+   * This class is used when you want to add sections or comments to the final string.
+   *
+   * To create a Stringifier use the `createStringifier()` function.
+   *
+   * Look at the stringify-ini example for further details.
+   * @link https://github.com/gagle/node-properties/blob/master/examples/ini/stringify-ini.js
+   */
+  export interface Stringifier {
+    /**
+     * Writes a header comment.
+     * It will be written to the top of the final string.
+     * Returns the Stringifier being used.
+     */
+    header(comment: string): this;
+
+    /**
+     * Writes a property line.
+     * It takes an object with three options: `key`, `value` and comment.
+     * Both the key and the value are converted into a string automatically.
+     * Returns the Stringifier being used.
+     */
+    property(obj: { key?: string; value?: string; comment?: string }): this;
+
+    /**
+     * Writes a section line.
+     * It gets an object with two options: `name` and `comment`.
+     * The name is converted into a string.
+     * If you don't need to write a comment, you can pass the name instead of an object.
+     * Returns the stringifier being used.
+     */
+    section(obj: string | { name: string; comment?: string }): this;
+  }
+
+  /**
+   * Returns a new `Stringifier` instance.
+   */
+  export function createStringifier(): Stringifier;
+}

package/src/Accordion.tsx

@@ -61,7 +61,7 @@ export type AccordionProps = {
       isExpanded?: never;
     }
 ) &
-  HtmlProps;
+  Pick<HtmlProps, "testId" | "translate">;
 
 const Accordion = ({
   children,

package/src/Autocomplete.tsx

@@ -16,6 +16,7 @@ import {
   InputBase,
   UseAutocompleteProps,
   AutocompleteValue,
+  AutocompleteRenderInputParams,
 } from "@mui/material";
 import { memo, useCallback, useMemo, useRef } from "react";
 
@@ -31,7 +32,7 @@ import {
 export type AutocompleteProps<
   OptionType,
   HasMultipleChoices extends boolean | undefined,
-  IsCustomValueAllowed extends boolean | undefined
+  IsCustomValueAllowed extends boolean | undefined,
 > = {
   /**
    * The default value. Use when the component is not controlled.
@@ -161,7 +162,6 @@ export type AutocompleteProps<
   getIsOptionEqualToValue?: (option: OptionType, value: OptionType) => boolean;
 } & Pick<
   FieldComponentProps,
-  | "ariaDescribedBy"
   | "errorMessage"
   | "errorMessageList"
   | "hint"
@@ -171,12 +171,12 @@ export type AutocompleteProps<
   | "isOptional"
   | "name"
 > &
-  HtmlProps;
+  Pick<HtmlProps, "ariaDescribedBy" | "testId" | "translate">;
 
 const Autocomplete = <
   OptionType,
   HasMultipleChoices extends boolean | undefined,
-  IsCustomValueAllowed extends boolean | undefined
+  IsCustomValueAllowed extends boolean | undefined,
 >({
   ariaDescribedBy,
   defaultValue,
@@ -206,7 +206,10 @@ const Autocomplete = <
   translate,
 }: AutocompleteProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>) => {
   const controlledStateRef = useRef(
-    getControlState({ controlledValue: value, uncontrolledValue: defaultValue })
+    getControlState({
+      controlledValue: value,
+      uncontrolledValue: defaultValue,
+    }),
   );
   const defaultValueProp = useMemo<
     | AutocompleteValue<
@@ -245,13 +248,18 @@ const Autocomplete = <
   }, [inputValue]);
 
   const renderInput = useCallback(
-    ({ InputLabelProps, InputProps, ...params }) => (
+    ({
+      InputLabelProps,
+      InputProps,
+      ...params
+    }: AutocompleteRenderInputParams) => (
       <Field
         ariaDescribedBy={ariaDescribedBy}
         errorMessage={errorMessage}
         errorMessageList={errorMessageList}
         fieldType="single"
         hasVisibleLabel
+        //@ts-expect-error htmlFor does not exist ont he InputLabelProps for autocomplete
         id={InputLabelProps.htmlFor}
         hint={hint}
         HintLinkComponent={HintLinkComponent}
@@ -290,7 +298,7 @@ const Autocomplete = <
       label,
       nameOverride,
       testId,
-    ]
+    ],
   );
   const onChange = useCallback<
     NonNullable<
@@ -305,7 +313,7 @@ const Autocomplete = <
     (event, value, reason, details) => {
       onChangeProp?.(event, value, reason, details);
     },
-    [onChangeProp]
+    [onChangeProp],
   );
 
   const onInputChange = useCallback<
@@ -321,7 +329,7 @@ const Autocomplete = <
     (event, value, reason) => {
       onInputChangeProp?.(event, value, reason);
     },
-    [onInputChangeProp]
+    [onInputChangeProp],
   );
 
   return (

package/src/Badge.tsx

@@ -27,7 +27,7 @@ export type BadgeProps = {
   badgeContent: number;
   badgeContentMax?: BadgeContentMax;
   type?: (typeof badgeTypeValues)[number];
-} & HtmlProps;
+} & Pick<HtmlProps, "testId" | "translate">;
 
 const badgeTypeColors = (odysseyTokens: DesignTokens) => ({
   default: {

package/src/Banner.tsx

@@ -56,7 +56,7 @@ export type BannerProps = {
    * The text content of the alert
    */
   text: string;
-} & HtmlProps;
+} & Pick<HtmlProps, "testId" | "translate">;
 
 const Banner = ({
   linkUrl,

package/src/Box.tsx

@@ -20,7 +20,7 @@ export type BoxProps = {
   component?: MuiBoxProps["component"];
   id?: MuiBoxProps["id"];
   sx?: MuiBoxProps["sx"];
-} & HtmlProps;
+} & Pick<HtmlProps, "testId" | "translate">;
 
 const Box = forwardRef<HTMLElement, BoxProps>(
   ({ children, component, id, sx, testId, translate }, ref) => (
@@ -33,7 +33,7 @@ const Box = forwardRef<HTMLElement, BoxProps>(
       sx={sx}
       translate={translate}
     />
-  )
+  ),
 );
 
 const MemoizedBox = memo(Box);

package/src/Breadcrumbs.tsx

@@ -43,7 +43,7 @@ export type BreadcrumbsProps = {
   children: ReactElement<typeof Breadcrumb>[];
   homeHref?: string;
   maxVisibleItems?: number;
-} & HtmlProps;
+} & Pick<HtmlProps, "testId" | "translate">;
 
 export type BreadcrumbContextType = {
   breadcrumbType: BreadcrumbType;
@@ -130,7 +130,7 @@ const BreadcrumbList = ({
 
   const onMenuButtonClick = useCallback<MouseEventHandler<HTMLButtonElement>>(
     (event) => setAnchorEl(event.currentTarget),
-    []
+    [],
   );
   const onCloseMenu = useCallback(() => {
     setAnchorEl(null);