@okta/odyssey-react-mui 1.0.0 → 1.0.2

package/package.json

@@ -1,11 +1,10 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "React MUI components for Odyssey, Okta's design system",
   "author": "Okta, Inc.",
   "license": "Apache-2.0",
   "sideEffects": false,
-  "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/src/index.d.ts",
@@ -23,9 +22,18 @@
     }
   },
   "exports": {
-    "./icons": "./dist/icons.generated/index.js",
-    "./labs": "./dist/labs/index.js",
-    ".": "./dist/index.js",
+    "./icons": {
+      "types": "./dist/src/icons.generated/index.d.ts",
+      "default": "./dist/icons.generated/index.js"
+    },
+    "./labs": {
+      "types": "./dist/src/labs/index.d.ts",
+      "default": "./dist/labs/index.js"
+    },
+    ".": {
+      "types": "./dist/src/index.d.ts",
+      "default": "./dist/index.js"
+    },
     "./README.md": "./README.md"
   },
   "repository": {
@@ -40,12 +48,13 @@
     "@mui/material": "^5.12.3",
     "@mui/utils": "^5.11.2",
     "@mui/x-date-pickers": "^5.0.15",
-    "@okta/odyssey-design-tokens": "1.0.0",
+    "@okta/odyssey-design-tokens": "1.0.2",
     "date-fns": "^2.30.0",
     "i18next": "^22.4.15",
     "material-react-table": "^1.14.0",
     "react-i18next": "^12.2.2",
-    "ts-node": "^10.9.1"
+    "ts-node": "^10.9.1",
+    "word-wrap": "~1.2.5"
   },
   "peerDependencies": {
     "@emotion/react": "^11",
@@ -53,5 +62,5 @@
     "react": ">=17 <19",
     "react-dom": ">=17 <19"
   },
-  "gitHead": "7b68d42ee9f74c21b72eb47bdfdda1df31388e87"
+  "gitHead": "06d0b602d3bf239b43a739dd3a63ec2fb7f0ba01"
 }

package/scripts/properties-to-ts.js

@@ -13,18 +13,18 @@
 // Part of this has been copied over from @okta/ui-build-tools' own internal node script
 // https://github.com/okta/ui-build-tools/blob/master/packages/clis/i18n/properties-to-json.js
 
-import { resolve, join, basename, extname } from "node:path";
-import {
+const { resolve, join, basename, extname } = require("node:path");
+const {
   readFileSync,
   writeFileSync,
   rmSync,
   existsSync,
   mkdirSync,
-} from "node:fs";
-import properties from "properties";
-import readdir from "recursive-readdir";
-import yargs from "yargs";
-import { hideBin } from "yargs/helpers";
+} = require("node:fs");
+const properties = require("properties");
+const readdir = require("recursive-readdir");
+const yargs = require("yargs");
+const { hideBin } = require("yargs/helpers");
 
 const convert = (baseFiles, propertiesTargetDir) => {
   for (const src of baseFiles) {

package/src/Box.tsx

@@ -16,12 +16,19 @@ import { ReactNode, forwardRef } from "react";
 export type BoxProps = {
   children?: ReactNode;
   component?: MuiBoxProps["component"];
+  id?: MuiBoxProps["id"];
   sx?: MuiBoxProps["sx"];
 };
 
 export const Box = forwardRef<HTMLElement, BoxProps>(
-  ({ children, component, sx }, ref) => (
-    <MuiBox ref={ref} children={children} component={component} sx={sx} />
+  ({ children, component, id, sx }, ref) => (
+    <MuiBox
+      ref={ref}
+      children={children}
+      component={component}
+      id={id}
+      sx={sx}
+    />
   )
 );
 

package/src/Fieldset.tsx

@@ -15,7 +15,7 @@ import { memo, ReactElement, useMemo } from "react";
 
 import { Callout } from "./Callout";
 import { FieldsetContext } from "./FieldsetContext";
-import { Legend, Subordinate } from "./Typography";
+import { Legend, Support } from "./Typography";
 import { useOdysseyDesignTokens } from "./OdysseyDesignTokensContext";
 import { useUniqueId } from "./useUniqueId";
 
@@ -89,7 +89,7 @@ const Fieldset = ({
     >
       <Legend>{legend}</Legend>
 
-      {description && <Subordinate component="p">{description}</Subordinate>}
+      {description && <Support>{description}</Support>}
 
       {alert}
 

package/src/labs/README.md

@@ -2,19 +2,21 @@
 
 ## Production Readiness
 
-This project has not yet hit version 1.0.0 and is still in active development.
+Odyssey is production-ready and available to use for real things. The API
+is stable for the duration of the point-release, meaning that while Odyssey is
+in version 1.x.x, there will be no changes that break the API.
 
-That said, it is beyond the early alpha stage in some key areas. For some
-early-adopters that means it is good enough to use for real things. Some
-other people think this means it is not ready yet.
+**Odyssey Labs** is the home for components that are usable, but not feature-complete.
+At minimum, they'll provide a good jumping-off point for your project; however, they
+are not guaranteed to have full support for the full suite of things that Odyssey
+provides, such as RTL support, internationalization, etc.
 
-Even though the project is in development, effort is still made to keep
-the API stable. Patch versions are intended for backwards-compatible
-changes and minor versions are intended for backwards-incompatible changes.
+This project follows semantic versioning conventions:
 
-If you plan to use this for something real, you should either pin the
-exact version (maximum safety) or pin the major and minor versions
-(only accept backwards-compatible upgrades).
+- **Major point releases** may include breaking changes, but the API is stable for the duration of
+  the major point release (for example, 1.x.x)
+- **Minor point releases** include new features and are backwards-compatible (eg, x.1.x)
+- **Patch releases** include bug fixes (eg, x.x.1)
 
 ## Getting Started
 

package/src/theme/components.tsx

@@ -48,6 +48,7 @@ import {
   WarningFilledIcon,
 } from "../icons.generated";
 import { DesignTokens } from "./theme";
+import { CSSProperties } from "react";
 
 export const components = (
   odysseyTokens: DesignTokens
@@ -1451,14 +1452,14 @@ export const components = (
 
           [`&::-webkit-search-cancel-button`]: {
             display: "none",
-            "-webkit-appearance": "none",
-            "-moz-appearance": "none",
-          },
+            MozAppearance: "none",
+            WebkitAppearance: "none",
+          } satisfies CSSProperties,
 
           [`&::-moz-search-cancel-button`]: {
             display: "none",
-            "-moz-appearance": "none",
-          },
+            MozAppearance: "none",
+          } satisfies CSSProperties,
 
           [`&::-ms-clear`]: {
             display: "none",