diff --git a/.yarn/cache/@nrwl-nx-linux-x64-gnu-npm-15.8.6-81aaee94e9-8.zip b/.yarn/cache/@nrwl-nx-linux-x64-gnu-npm-15.8.6-81aaee94e9-8.zip new file mode 100644 index 0000000000..73ca82ebec Binary files /dev/null and b/.yarn/cache/@nrwl-nx-linux-x64-gnu-npm-15.8.6-81aaee94e9-8.zip differ diff --git a/.yarn/cache/vm2-npm-3.9.11-c063b14f5f-aab39e6e4b.zip b/.yarn/cache/vm2-npm-3.9.11-c063b14f5f-aab39e6e4b.zip deleted file mode 100644 index 5be60674c4..0000000000 Binary files a/.yarn/cache/vm2-npm-3.9.11-c063b14f5f-aab39e6e4b.zip and /dev/null differ diff --git a/.yarn/cache/vm2-npm-3.9.17-b9dcf1e7fb-9a03740a40.zip b/.yarn/cache/vm2-npm-3.9.17-b9dcf1e7fb-9a03740a40.zip new file mode 100644 index 0000000000..24a7b5b8d6 Binary files /dev/null and b/.yarn/cache/vm2-npm-3.9.17-b9dcf1e7fb-9a03740a40.zip differ diff --git a/CHANGELOG.md b/CHANGELOG.md index 7122719f77..7045c9b290 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,25 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.22.0](https://github.com/okta/odyssey/compare/v0.21.4...v0.22.0) (2023-04-21) + +### Features + +- **odyssey-react-mui:** add styling for Autocomplete ([b03516b](https://github.com/okta/odyssey/commit/b03516ba469ef1045c17326590a97e39f0235aa8)) +- wrap the Button ([507cf60](https://github.com/okta/odyssey/commit/507cf60c045a445e09c039dc1f35574271114697)) +- wrapped Tag and TagList ([43ab012](https://github.com/okta/odyssey/commit/43ab012d17934503bd827624ad17c6d00531a978)) + +### Bug Fixes + +- added extra props to Autocomplete to fix MUI types ([d7aff4a](https://github.com/okta/odyssey/commit/d7aff4ab510cbb512bee043b4056e1085ce0d059)) +- created Autocomplete wrapper component ([dbb1210](https://github.com/okta/odyssey/commit/dbb12100e656e9db3deb2a0d76bdcf5fb715e93d)) +- export types for Autocomplete ([28be391](https://github.com/okta/odyssey/commit/28be391f49bbce4882b68334a1d5805e50d47a4e)) +- minor type improvement in Autocomplete stories ([79d42e1](https://github.com/okta/odyssey/commit/79d42e16ac304a3856697b8711a1b38fe8cfe28f)) +- pulled out TextField into separate components ([#1744](https://github.com/okta/odyssey/issues/1744)) ([0b7a412](https://github.com/okta/odyssey/commit/0b7a41290eb1a60693ee827f45e240531e7fbbcb)) +- removed explicit displayName from MenuItem ([ab84734](https://github.com/okta/odyssey/commit/ab84734a4f8dc11aba42f56818bce59dbd469ddf)) +- separated InputProps and params in Autocomplete ([a93542c](https://github.com/okta/odyssey/commit/a93542c6238ab56a0a06075aceb5cf0997ceb7f1)) +- types for Autocomplete in stories ([8d28a8c](https://github.com/okta/odyssey/commit/8d28a8c640dfccac92fdcad5af9bdc33759c9de3)) + ## [0.21.4](https://github.com/okta/odyssey/compare/v0.21.3...v0.21.4) (2023-04-13) ### Features diff --git a/lerna.json b/lerna.json index 47c63d3b58..b7e3c0625c 100644 --- a/lerna.json +++ b/lerna.json @@ -5,5 +5,5 @@ "packages": ["packages/*"], "useNx": false, "useWorkspaces": true, - "version": "0.21.4" + "version": "0.22.0" } diff --git a/packages/babel-plugin-fully-specified/CHANGELOG.md b/packages/babel-plugin-fully-specified/CHANGELOG.md index ab265e0350..df970a13bf 100644 --- a/packages/babel-plugin-fully-specified/CHANGELOG.md +++ b/packages/babel-plugin-fully-specified/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.22.0](https://github.com/okta/odyssey/compare/v0.21.4...v0.22.0) (2023-04-21) + +**Note:** Version bump only for package @okta/babel-plugin-fully-specified + ## [0.21.4](https://github.com/okta/odyssey/compare/v0.21.3...v0.21.4) (2023-04-13) **Note:** Version bump only for package @okta/babel-plugin-fully-specified diff --git a/packages/babel-plugin-fully-specified/package.json b/packages/babel-plugin-fully-specified/package.json index 68561d1c7a..7009a20234 100644 --- a/packages/babel-plugin-fully-specified/package.json +++ b/packages/babel-plugin-fully-specified/package.json @@ -1,6 +1,6 @@ { "name": "@okta/babel-plugin-fully-specified", - "version": "0.21.4", + "version": "0.22.0", "private": true, "description": "Babel plugin to generate fully specified ESM module syntax", "author": "Okta, Inc.", diff --git a/packages/browserslist-config-odyssey/CHANGELOG.md b/packages/browserslist-config-odyssey/CHANGELOG.md index 4666badd6d..0a6e859cce 100644 --- a/packages/browserslist-config-odyssey/CHANGELOG.md +++ b/packages/browserslist-config-odyssey/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.22.0](https://github.com/okta/odyssey/compare/v0.21.4...v0.22.0) (2023-04-21) + +**Note:** Version bump only for package @okta/browserslist-config-odyssey + ## [0.21.4](https://github.com/okta/odyssey/compare/v0.21.3...v0.21.4) (2023-04-13) **Note:** Version bump only for package @okta/browserslist-config-odyssey diff --git a/packages/browserslist-config-odyssey/package.json b/packages/browserslist-config-odyssey/package.json index 9700d3da93..299e7b636d 100644 --- a/packages/browserslist-config-odyssey/package.json +++ b/packages/browserslist-config-odyssey/package.json @@ -1,6 +1,6 @@ { "name": "@okta/browserslist-config-odyssey", - "version": "0.21.4", + "version": "0.22.0", "description": "Browserslist config for Odyssey, Okta's design system", "author": "Okta, Inc.", "license": "Apache-2.0", diff --git a/packages/conventional-changelog-odyssey/CHANGELOG.md b/packages/conventional-changelog-odyssey/CHANGELOG.md index e531859f69..5878696dae 100644 --- a/packages/conventional-changelog-odyssey/CHANGELOG.md +++ b/packages/conventional-changelog-odyssey/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.22.0](https://github.com/okta/odyssey/compare/v0.21.4...v0.22.0) (2023-04-21) + +**Note:** Version bump only for package @okta/conventional-changelog-odyssey + ## [0.21.4](https://github.com/okta/odyssey/compare/v0.21.3...v0.21.4) (2023-04-13) **Note:** Version bump only for package @okta/conventional-changelog-odyssey diff --git a/packages/conventional-changelog-odyssey/package.json b/packages/conventional-changelog-odyssey/package.json index f751cfc1ff..5d79d54174 100644 --- a/packages/conventional-changelog-odyssey/package.json +++ b/packages/conventional-changelog-odyssey/package.json @@ -1,6 +1,6 @@ { "name": "@okta/conventional-changelog-odyssey", - "version": "0.21.4", + "version": "0.22.0", "main": "index.js", "author": "Okta, Inc.", "license": "Apache-2.0", diff --git a/packages/eslint-plugin-odyssey/CHANGELOG.md b/packages/eslint-plugin-odyssey/CHANGELOG.md index 2d9f480344..027355b676 100644 --- a/packages/eslint-plugin-odyssey/CHANGELOG.md +++ b/packages/eslint-plugin-odyssey/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.22.0](https://github.com/okta/odyssey/compare/v0.21.4...v0.22.0) (2023-04-21) + +**Note:** Version bump only for package @okta/eslint-plugin-odyssey + ## [0.21.4](https://github.com/okta/odyssey/compare/v0.21.3...v0.21.4) (2023-04-13) **Note:** Version bump only for package @okta/eslint-plugin-odyssey diff --git a/packages/eslint-plugin-odyssey/package.json b/packages/eslint-plugin-odyssey/package.json index 12f4267a0e..6f796b133a 100644 --- a/packages/eslint-plugin-odyssey/package.json +++ b/packages/eslint-plugin-odyssey/package.json @@ -1,6 +1,6 @@ { "name": "@okta/eslint-plugin-odyssey", - "version": "0.21.4", + "version": "0.22.0", "main": "src/index.js", "author": "Okta, Inc.", "license": "Apache-2.0", diff --git a/packages/odyssey-babel-loader/CHANGELOG.md b/packages/odyssey-babel-loader/CHANGELOG.md index 1baf5b6c20..8eb2c6f96a 100644 --- a/packages/odyssey-babel-loader/CHANGELOG.md +++ b/packages/odyssey-babel-loader/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.22.0](https://github.com/okta/odyssey/compare/v0.21.4...v0.22.0) (2023-04-21) + +**Note:** Version bump only for package @okta/odyssey-babel-loader + ## [0.21.4](https://github.com/okta/odyssey/compare/v0.21.3...v0.21.4) (2023-04-13) **Note:** Version bump only for package @okta/odyssey-babel-loader diff --git a/packages/odyssey-babel-loader/package.json b/packages/odyssey-babel-loader/package.json index 96c36594e2..9e9dd378ea 100644 --- a/packages/odyssey-babel-loader/package.json +++ b/packages/odyssey-babel-loader/package.json @@ -1,6 +1,6 @@ { "name": "@okta/odyssey-babel-loader", - "version": "0.21.4", + "version": "0.22.0", "description": "Babel webpack loader for Odyssey, Okta's design system", "author": "Okta, Inc.", "license": "Apache-2.0", diff --git a/packages/odyssey-babel-preset/CHANGELOG.md b/packages/odyssey-babel-preset/CHANGELOG.md index 3d4cad8a5f..f8f07f5ab0 100644 --- a/packages/odyssey-babel-preset/CHANGELOG.md +++ b/packages/odyssey-babel-preset/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.22.0](https://github.com/okta/odyssey/compare/v0.21.4...v0.22.0) (2023-04-21) + +**Note:** Version bump only for package @okta/odyssey-babel-preset + ## [0.21.4](https://github.com/okta/odyssey/compare/v0.21.3...v0.21.4) (2023-04-13) **Note:** Version bump only for package @okta/odyssey-babel-preset diff --git a/packages/odyssey-babel-preset/package.json b/packages/odyssey-babel-preset/package.json index 4f40fe77c9..15cddad904 100644 --- a/packages/odyssey-babel-preset/package.json +++ b/packages/odyssey-babel-preset/package.json @@ -1,6 +1,6 @@ { "name": "@okta/odyssey-babel-preset", - "version": "0.21.4", + "version": "0.22.0", "description": "Babel preset for Odyssey, Okta's design system", "author": "Okta, Inc.", "license": "Apache-2.0", diff --git a/packages/odyssey-commitlint/CHANGELOG.md b/packages/odyssey-commitlint/CHANGELOG.md index 754502eb87..8093ad5b68 100644 --- a/packages/odyssey-commitlint/CHANGELOG.md +++ b/packages/odyssey-commitlint/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.22.0](https://github.com/okta/odyssey/compare/v0.21.4...v0.22.0) (2023-04-21) + +**Note:** Version bump only for package @okta/odyssey-commitlint + ## [0.21.4](https://github.com/okta/odyssey/compare/v0.21.3...v0.21.4) (2023-04-13) **Note:** Version bump only for package @okta/odyssey-commitlint diff --git a/packages/odyssey-commitlint/package.json b/packages/odyssey-commitlint/package.json index 440e62bb57..0653dcc6ef 100644 --- a/packages/odyssey-commitlint/package.json +++ b/packages/odyssey-commitlint/package.json @@ -1,6 +1,6 @@ { "name": "@okta/odyssey-commitlint", - "version": "0.21.4", + "version": "0.22.0", "main": "src/index.js", "author": "Okta, Inc.", "license": "Apache-2.0", diff --git a/packages/odyssey-design-tokens/CHANGELOG.md b/packages/odyssey-design-tokens/CHANGELOG.md index d5f54cea88..77ca7362a0 100644 --- a/packages/odyssey-design-tokens/CHANGELOG.md +++ b/packages/odyssey-design-tokens/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.22.0](https://github.com/okta/odyssey/compare/v0.21.4...v0.22.0) (2023-04-21) + +**Note:** Version bump only for package @okta/odyssey-design-tokens + ## [0.21.4](https://github.com/okta/odyssey/compare/v0.21.3...v0.21.4) (2023-04-13) **Note:** Version bump only for package @okta/odyssey-design-tokens diff --git a/packages/odyssey-design-tokens/package.json b/packages/odyssey-design-tokens/package.json index f7f49fe52e..75758fb505 100644 --- a/packages/odyssey-design-tokens/package.json +++ b/packages/odyssey-design-tokens/package.json @@ -1,6 +1,6 @@ { "name": "@okta/odyssey-design-tokens", - "version": "0.21.4", + "version": "0.22.0", "description": "Design tokens for Odyssey, Okta's design system", "author": "Okta, Inc.", "license": "Apache-2.0", diff --git a/packages/odyssey-eslint-config/CHANGELOG.md b/packages/odyssey-eslint-config/CHANGELOG.md index 0690a338c1..1bf8911c8d 100644 --- a/packages/odyssey-eslint-config/CHANGELOG.md +++ b/packages/odyssey-eslint-config/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.22.0](https://github.com/okta/odyssey/compare/v0.21.4...v0.22.0) (2023-04-21) + +**Note:** Version bump only for package @okta/odyssey-eslint-config + ## [0.21.4](https://github.com/okta/odyssey/compare/v0.21.3...v0.21.4) (2023-04-13) **Note:** Version bump only for package @okta/odyssey-eslint-config diff --git a/packages/odyssey-eslint-config/package.json b/packages/odyssey-eslint-config/package.json index cbb179a18c..d7d198e884 100644 --- a/packages/odyssey-eslint-config/package.json +++ b/packages/odyssey-eslint-config/package.json @@ -1,6 +1,6 @@ { "name": "@okta/odyssey-eslint-config", - "version": "0.21.4", + "version": "0.22.0", "main": "src/index.js", "author": "Okta, Inc.", "license": "Apache-2.0", diff --git a/packages/odyssey-icons/CHANGELOG.md b/packages/odyssey-icons/CHANGELOG.md index c8fccfc793..bb0544ffcb 100644 --- a/packages/odyssey-icons/CHANGELOG.md +++ b/packages/odyssey-icons/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.22.0](https://github.com/okta/odyssey/compare/v0.21.4...v0.22.0) (2023-04-21) + +**Note:** Version bump only for package @okta/odyssey-icons + ## [0.21.4](https://github.com/okta/odyssey/compare/v0.21.3...v0.21.4) (2023-04-13) **Note:** Version bump only for package @okta/odyssey-icons diff --git a/packages/odyssey-icons/package.json b/packages/odyssey-icons/package.json index 6b71b52a18..2140c2a45e 100644 --- a/packages/odyssey-icons/package.json +++ b/packages/odyssey-icons/package.json @@ -1,6 +1,6 @@ { "name": "@okta/odyssey-icons", - "version": "0.21.4", + "version": "0.22.0", "private": true, "description": "The home for Odyssey's supported icons.", "homepage": "https://github.com/okta/odyssey", diff --git a/packages/odyssey-lifecycle/CHANGELOG.md b/packages/odyssey-lifecycle/CHANGELOG.md index 70124b1663..2a37e9859c 100644 --- a/packages/odyssey-lifecycle/CHANGELOG.md +++ b/packages/odyssey-lifecycle/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.22.0](https://github.com/okta/odyssey/compare/v0.21.4...v0.22.0) (2023-04-21) + +**Note:** Version bump only for package @okta/odyssey-lifecycle + ## [0.21.4](https://github.com/okta/odyssey/compare/v0.21.3...v0.21.4) (2023-04-13) **Note:** Version bump only for package @okta/odyssey-lifecycle diff --git a/packages/odyssey-lifecycle/package.json b/packages/odyssey-lifecycle/package.json index e74128b476..7344ee3d73 100644 --- a/packages/odyssey-lifecycle/package.json +++ b/packages/odyssey-lifecycle/package.json @@ -1,6 +1,6 @@ { "name": "@okta/odyssey-lifecycle", - "version": "0.21.4", + "version": "0.22.0", "description": "Lifecycle scripts for lerna and npm", "author": "Okta, Inc.", "license": "Apache-2.0", diff --git a/packages/odyssey-lint-staged/CHANGELOG.md b/packages/odyssey-lint-staged/CHANGELOG.md index 48eb6a1ff8..036f17c1b7 100644 --- a/packages/odyssey-lint-staged/CHANGELOG.md +++ b/packages/odyssey-lint-staged/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.22.0](https://github.com/okta/odyssey/compare/v0.21.4...v0.22.0) (2023-04-21) + +**Note:** Version bump only for package @okta/odyssey-lint-staged + ## [0.21.4](https://github.com/okta/odyssey/compare/v0.21.3...v0.21.4) (2023-04-13) **Note:** Version bump only for package @okta/odyssey-lint-staged diff --git a/packages/odyssey-lint-staged/package.json b/packages/odyssey-lint-staged/package.json index 9a518404bc..7a6eca65c6 100644 --- a/packages/odyssey-lint-staged/package.json +++ b/packages/odyssey-lint-staged/package.json @@ -1,6 +1,6 @@ { "name": "@okta/odyssey-lint-staged", - "version": "0.21.4", + "version": "0.22.0", "main": "src/index.js", "author": "Okta, Inc.", "license": "Apache-2.0", diff --git a/packages/odyssey-react-labs/CHANGELOG.md b/packages/odyssey-react-labs/CHANGELOG.md index e3b5f4cb3d..24dcac6d9b 100644 --- a/packages/odyssey-react-labs/CHANGELOG.md +++ b/packages/odyssey-react-labs/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.22.0](https://github.com/okta/odyssey/compare/v0.21.4...v0.22.0) (2023-04-21) + +**Note:** Version bump only for package @okta/odyssey-react-labs + ## [0.21.4](https://github.com/okta/odyssey/compare/v0.21.3...v0.21.4) (2023-04-13) **Note:** Version bump only for package @okta/odyssey-react-labs diff --git a/packages/odyssey-react-labs/package.json b/packages/odyssey-react-labs/package.json index f05fd8347c..58a9b947e2 100644 --- a/packages/odyssey-react-labs/package.json +++ b/packages/odyssey-react-labs/package.json @@ -1,6 +1,6 @@ { "name": "@okta/odyssey-react-labs", - "version": "0.21.4", + "version": "0.22.0", "description": "React components for Odyssey, that will eventually be part of Odyssey React but who's implementation isn't yet approved.", "author": "Okta, Inc.", "license": "Apache-2.0", diff --git a/packages/odyssey-react-mui/CHANGELOG.md b/packages/odyssey-react-mui/CHANGELOG.md index 33c2b50277..30ff205e13 100644 --- a/packages/odyssey-react-mui/CHANGELOG.md +++ b/packages/odyssey-react-mui/CHANGELOG.md @@ -3,6 +3,23 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.22.0](https://github.com/okta/odyssey/compare/v0.21.4...v0.22.0) (2023-04-21) + +### Features + +- **odyssey-react-mui:** add styling for Autocomplete ([b03516b](https://github.com/okta/odyssey/commit/b03516ba469ef1045c17326590a97e39f0235aa8)) +- wrap the Button ([507cf60](https://github.com/okta/odyssey/commit/507cf60c045a445e09c039dc1f35574271114697)) +- wrapped Tag and TagList ([43ab012](https://github.com/okta/odyssey/commit/43ab012d17934503bd827624ad17c6d00531a978)) + +### Bug Fixes + +- added extra props to Autocomplete to fix MUI types ([d7aff4a](https://github.com/okta/odyssey/commit/d7aff4ab510cbb512bee043b4056e1085ce0d059)) +- created Autocomplete wrapper component ([dbb1210](https://github.com/okta/odyssey/commit/dbb12100e656e9db3deb2a0d76bdcf5fb715e93d)) +- export types for Autocomplete ([28be391](https://github.com/okta/odyssey/commit/28be391f49bbce4882b68334a1d5805e50d47a4e)) +- pulled out TextField into separate components ([#1744](https://github.com/okta/odyssey/issues/1744)) ([0b7a412](https://github.com/okta/odyssey/commit/0b7a41290eb1a60693ee827f45e240531e7fbbcb)) +- removed explicit displayName from MenuItem ([ab84734](https://github.com/okta/odyssey/commit/ab84734a4f8dc11aba42f56818bce59dbd469ddf)) +- separated InputProps and params in Autocomplete ([a93542c](https://github.com/okta/odyssey/commit/a93542c6238ab56a0a06075aceb5cf0997ceb7f1)) + ## [0.21.4](https://github.com/okta/odyssey/compare/v0.21.3...v0.21.4) (2023-04-13) ### Features diff --git a/packages/odyssey-react-mui/package.json b/packages/odyssey-react-mui/package.json index c370376277..159e30456f 100644 --- a/packages/odyssey-react-mui/package.json +++ b/packages/odyssey-react-mui/package.json @@ -1,6 +1,6 @@ { "name": "@okta/odyssey-react-mui", - "version": "0.21.4", + "version": "0.22.0", "description": "React MUI components for Odyssey, Okta's design system", "author": "Okta, Inc.", "license": "Apache-2.0", diff --git a/packages/odyssey-react-mui/src/Autocomplete.tsx b/packages/odyssey-react-mui/src/Autocomplete.tsx new file mode 100644 index 0000000000..849c1557f0 --- /dev/null +++ b/packages/odyssey-react-mui/src/Autocomplete.tsx @@ -0,0 +1,132 @@ +/*! + * 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.") + * + * 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 { + Autocomplete as MuiAutocomplete, + AutocompleteProps as MuiAutocompleteProps, + InputBase, +} from "@mui/material"; +import { memo, useCallback } from "react"; + +import { Field } from "./Field"; + +export type AutocompleteProps< + OptionType, + HasMultipleChoices extends boolean | undefined, + IsCustomValueAllowed extends boolean | undefined +> = { + hasMultipleChoices?: MuiAutocompleteProps< + OptionType, + HasMultipleChoices, + undefined, + IsCustomValueAllowed + >["multiple"]; + hint?: string; + isCustomValueAllowed?: MuiAutocompleteProps< + OptionType, + HasMultipleChoices, + undefined, + IsCustomValueAllowed + >["freeSolo"]; + isDisabled?: MuiAutocompleteProps< + OptionType, + HasMultipleChoices, + undefined, + IsCustomValueAllowed + >["disabled"]; + isLoading?: MuiAutocompleteProps< + OptionType, + HasMultipleChoices, + undefined, + IsCustomValueAllowed + >["loading"]; + isReadOnly?: MuiAutocompleteProps< + OptionType, + HasMultipleChoices, + undefined, + IsCustomValueAllowed + >["readOnly"]; + label: string; + onChange?: MuiAutocompleteProps< + OptionType, + HasMultipleChoices, + undefined, + IsCustomValueAllowed + >["onChange"]; + options: MuiAutocompleteProps< + OptionType, + HasMultipleChoices, + undefined, + IsCustomValueAllowed + >["options"]; + value?: MuiAutocompleteProps< + OptionType, + HasMultipleChoices, + undefined, + IsCustomValueAllowed + >["value"]; +}; + +const Autocomplete = < + OptionType, + HasMultipleChoices extends boolean | undefined, + IsCustomValueAllowed extends boolean | undefined +>({ + isCustomValueAllowed, + hasMultipleChoices, + isDisabled, + isLoading, + isReadOnly, + hint, + label, + onChange, + options, + value, +}: AutocompleteProps) => { + const renderInput = useCallback( + ({ InputLabelProps, InputProps, ...params }) => ( + ( + + )} + /> + ), + [hint, label] + ); + + return ( + + ); +}; + +const MemoizedAutocomplete = memo(Autocomplete) as typeof Autocomplete; + +export { MemoizedAutocomplete as Autocomplete }; diff --git a/packages/odyssey-react-mui/src/Button.tsx b/packages/odyssey-react-mui/src/Button.tsx new file mode 100644 index 0000000000..5bc9cace75 --- /dev/null +++ b/packages/odyssey-react-mui/src/Button.tsx @@ -0,0 +1,75 @@ +/*! + * 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 { Button as MuiButton } from "@mui/material"; +import type { ButtonProps as MuiButtonProps } from "@mui/material"; +import { Tooltip } from "./"; +import { memo } from "react"; + +export type ButtonProps = { + endIcon?: React.ReactNode; + id?: string; + isDisabled?: boolean; + isFullWidth?: boolean; + onClick?: MuiButtonProps["onClick"]; + size?: MuiButtonProps["size"]; + startIcon?: React.ReactNode; + text?: string; + /** + * `tooltipText` determines the text of the tooltip that wraps the button if it's icon-only. + */ + tooltipText?: string; + variant?: "primary" | "secondary" | "danger" | "floating"; +}; + +const Button = ({ + endIcon, + id, + isDisabled, + isFullWidth, + onClick, + size = "medium", + startIcon, + text, + tooltipText, + variant, +}: ButtonProps) => { + const button = ( + + {text} + + ); + + return ( + <> + {tooltipText && ( + + {button} + + )} + {!tooltipText && button} + + ); +}; + +const MemoizedButton = memo(Button); + +export { MemoizedButton as Button }; diff --git a/packages/odyssey-react-mui/src/Field.tsx b/packages/odyssey-react-mui/src/Field.tsx new file mode 100644 index 0000000000..b27f8586f4 --- /dev/null +++ b/packages/odyssey-react-mui/src/Field.tsx @@ -0,0 +1,112 @@ +/*! + * 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, ReactElement, useMemo } from "react"; + +import { + FieldError, + FieldHint, + FieldLabel, + FormControl, + useUniqueId, +} from "./"; + +export type FieldProps = { + /** + * If `error` is not undefined, the `input` will indicate an error. + */ + errorMessage?: string; + hasVisibleLabel: boolean; + /** + * The helper text content. + */ + hint?: string; + /** + * The id of the `input` element. + */ + id?: string; + /** + * If `true`, the component is disabled. + */ + isDisabled?: boolean; + /** + * If `true`, the `input` element is required. + */ + isRequired?: boolean; + /** + * The label for the `input` element. + */ + label: string; + /** + * The label for the `input` element if the it's not optional + */ + optionalLabel?: string; + /** + * The short hint displayed in the `input` before the user enters a value. + */ + placeholder?: string; + renderFieldComponent: ({ + ariaDescribedBy, + id, + }: { + ariaDescribedBy?: string; + id: string; + }) => ReactElement; +}; + +const Field = ({ + errorMessage, + hasVisibleLabel, + hint, + id: idOverride, + isDisabled = false, + isRequired = true, + label, + optionalLabel, + renderFieldComponent, +}: FieldProps) => { + const id = useUniqueId(idOverride); + const hintId = hint ? `${id}-hint` : undefined; + const errorId = errorMessage ? `${id}-error` : undefined; + const labelId = `${id}-label`; + + const ariaDescribedBy = useMemo( + () => [hintId, errorId].join(" ").trim() || undefined, + [errorId, hintId] + ); + + return ( + + + + {hint && } + + {renderFieldComponent({ + ariaDescribedBy, + id, + })} + + {errorMessage && } + + ); +}; + +const MemoizedField = memo(Field); + +export { MemoizedField as Field }; diff --git a/packages/odyssey-react-mui/src/FieldError.tsx b/packages/odyssey-react-mui/src/FieldError.tsx new file mode 100644 index 0000000000..4edadc8dc2 --- /dev/null +++ b/packages/odyssey-react-mui/src/FieldError.tsx @@ -0,0 +1,34 @@ +/*! + * 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.") + * + * 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 } from "react"; + +import { FormHelperText } from "."; +import { ScreenReaderText } from "./ScreenReaderText"; + +export type FieldErrorProps = { + id?: string; + text: string; +}; + +const FieldError = ({ id, text }: FieldErrorProps) => { + return ( + + Error: + {text} + + ); +}; + +const MemoizedFieldError = memo(FieldError); + +export { MemoizedFieldError as FieldError }; diff --git a/packages/odyssey-react-mui/src/FieldHint.tsx b/packages/odyssey-react-mui/src/FieldHint.tsx new file mode 100644 index 0000000000..76196b5d65 --- /dev/null +++ b/packages/odyssey-react-mui/src/FieldHint.tsx @@ -0,0 +1,28 @@ +/*! + * 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.") + * + * 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 } from "react"; + +import { FormHelperText } from "./"; + +export type FieldHintProps = { + id?: string; + text: string; +}; + +const FieldHint = ({ id, text }: FieldHintProps) => { + return {text}; +}; + +const MemoizedFieldHint = memo(FieldHint); + +export { MemoizedFieldHint as FieldHint }; diff --git a/packages/odyssey-react-mui/src/FieldLabel.tsx b/packages/odyssey-react-mui/src/FieldLabel.tsx new file mode 100644 index 0000000000..c59cec3574 --- /dev/null +++ b/packages/odyssey-react-mui/src/FieldLabel.tsx @@ -0,0 +1,57 @@ +/*! + * 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.") + * + * 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 { InputLabel } from "@mui/material"; +import { memo, useMemo } from "react"; + +import { ScreenReaderText } from "./ScreenReaderText"; +import { Typography } from "."; + +export type FieldLabelProps = { + hasVisibleLabel: boolean; + id: string; + inputId: string; + isRequired: boolean; + optionalText?: string; + text: string; +}; + +const FieldLabel = ({ + hasVisibleLabel, + id, + inputId, + isRequired, + optionalText, + text, +}: FieldLabelProps) => { + const inputLabel = useMemo( + () => ( + + {text} + {!isRequired && ( + {optionalText} + )} + + ), + [id, inputId, isRequired, optionalText, text] + ); + + return hasVisibleLabel ? ( + inputLabel + ) : ( + {inputLabel} + ); +}; + +const MemoizedFieldLabel = memo(FieldLabel); + +export { MemoizedFieldLabel as FieldLabel }; diff --git a/packages/odyssey-react-mui/src/MenuButton.tsx b/packages/odyssey-react-mui/src/MenuButton.tsx index 4992bed4b5..008f868693 100644 --- a/packages/odyssey-react-mui/src/MenuButton.tsx +++ b/packages/odyssey-react-mui/src/MenuButton.tsx @@ -77,10 +77,9 @@ const MenuButton = ({ aria-haspopup="true" aria-expanded={open ? "true" : undefined} onClick={handleClick} + text={buttonLabel} variant={buttonVariant} - > - {buttonLabel} - + /> ( ); const MemoizedMenuItem = memo(MenuItem); -MemoizedMenuItem.displayName = "MenuItem"; export { MemoizedMenuItem as MenuItem }; diff --git a/packages/odyssey-react-mui/src/OdysseyCacheProvider.test.tsx b/packages/odyssey-react-mui/src/OdysseyCacheProvider.test.tsx index c0f999261c..ca62942fce 100644 --- a/packages/odyssey-react-mui/src/OdysseyCacheProvider.test.tsx +++ b/packages/odyssey-react-mui/src/OdysseyCacheProvider.test.tsx @@ -29,7 +29,7 @@ describe("OdysseyCacheProvider", () => { it("themes a Button", () => { render( - + + + - + + + - + - + + + + + size="small" + startIcon={} + /> ) } > @@ -116,9 +117,9 @@ const StaticTemplate: Story = (args) => { + /> ) } > diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Tooltip/Tooltip.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/Tooltip/Tooltip.stories.tsx index d8c20f1a5e..4ebaf33443 100644 --- a/packages/odyssey-storybook/src/components/odyssey-mui/Tooltip/Tooltip.stories.tsx +++ b/packages/odyssey-storybook/src/components/odyssey-mui/Tooltip/Tooltip.stories.tsx @@ -56,7 +56,7 @@ const Template: Story = (args) => { export const Default = Template.bind({}); Default.args = { - children: , + children: - ), + children: + + + + + +