@okta/odyssey-react-mui 0.21.4 → 0.23.0

package/CHANGELOG.md

@@ -3,6 +3,47 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.23.0](https://github.com/okta/odyssey/compare/v0.22.0...v0.23.0) (2023-05-08)
+
+### Features
+
+- add uniqueId to MenuButton button ([a06377b](https://github.com/okta/odyssey/commit/a06377b1c10c49b5e68722b0bb775b8277cac781))
+- wrap the Dialog ([1f8b331](https://github.com/okta/odyssey/commit/1f8b3314a135333369f44efc21de097cd0d42712))
+- wrapped Toast ([bf6d5c7](https://github.com/okta/odyssey/commit/bf6d5c779d0b57a0bd74f537ada7be763df1080e))
+
+### Bug Fixes
+
+- add Field wrapper to CheckboxGroup and RadioGroup ([#1762](https://github.com/okta/odyssey/issues/1762)) ([6f8c14d](https://github.com/okta/odyssey/commit/6f8c14d9d7ebcf0c5f9bbcb0e867820b5631b7a3))
+- add missing onInput to Autocomplete ([#1757](https://github.com/okta/odyssey/issues/1757)) ([9d6c628](https://github.com/okta/odyssey/commit/9d6c628e3cc8675a6752f5a617d55f580d475c04))
+- add name to fields ([a891438](https://github.com/okta/odyssey/commit/a89143845ddd72ecfa218233cdd3ab0c51e94aca))
+- Fix broken Toast stories ([b5651f6](https://github.com/okta/odyssey/commit/b5651f6eb8d6578305fecd3d92be7c9d18eea27d))
+- fix disabled selection radios ([50be355](https://github.com/okta/odyssey/commit/50be3557e46d23bc9e99bfdcbf668fe097b58fb4))
+- Icon generation now using newest version of SVGR and SVGO ([#1755](https://github.com/okta/odyssey/issues/1755)) ([89a30a3](https://github.com/okta/odyssey/commit/89a30a3685d1bd1600abf3876d910a19ff236f9b))
+- **odyssey-react-mui:** allow pointer-events on :disabled buttons but not :active:disabled ([30bb4bf](https://github.com/okta/odyssey/commit/30bb4bf93edeffe7558204c2cce46ffe7b2b85bf))
+- **odyssey-react-mui:** ensure pointer events are disabled when Button is ([bfd162f](https://github.com/okta/odyssey/commit/bfd162f2ec86d866f8e77b94d0f828440a4c78e2))
+- **odyssey-react-mui:** fix Icon sizing for Checkbox ([96c5acd](https://github.com/okta/odyssey/commit/96c5acdf9916c8db9edbf744f774eb17695b25ef))
+- **odyssey-react-mui:** fixed TextField always showing input adronment ([#1785](https://github.com/okta/odyssey/issues/1785)) ([9170df0](https://github.com/okta/odyssey/commit/9170df0f8c771fdad398e5460766da77f27c0b3e))
+- **odyssey-react-mui:** pass variant and target props to Link ([6594fcd](https://github.com/okta/odyssey/commit/6594fcd801689518da4ec7df13fd33c8726bd44b))
+- **odyssey-react-mui:** the Tooltip not working on Button ([7935b94](https://github.com/okta/odyssey/commit/7935b940dda9969aedaf16b7d9ef776352f7ec28))
+- updated Migration doc ([87c37ca](https://github.com/okta/odyssey/commit/87c37caa7ae39733ddd378a45f8a275af3ac670d))
+
+## [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

package/dist/Autocomplete.js

@@ -0,0 +1,62 @@
+import _Autocomplete from "@mui/material/Autocomplete";
+import _InputBase from "@mui/material/InputBase";
+import { memo, useCallback } from "react";
+import { Field } from "./Field.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const Autocomplete = _ref => {
+  let {
+    isCustomValueAllowed,
+    hasMultipleChoices,
+    isDisabled,
+    isLoading,
+    isReadOnly,
+    hint,
+    label,
+    onChange,
+    onInputChange,
+    options,
+    value
+  } = _ref;
+  const renderInput = useCallback(_ref2 => {
+    let {
+      InputLabelProps,
+      InputProps,
+      ...params
+    } = _ref2;
+    return _jsx(Field, {
+      fieldType: "single",
+      hasVisibleLabel: true,
+      id: InputLabelProps.htmlFor,
+      hint: hint,
+      label: label,
+      renderFieldComponent: _ref3 => {
+        let {
+          ariaDescribedBy,
+          id
+        } = _ref3;
+        return _jsx(_InputBase, { ...params,
+          ...InputProps,
+          "aria-describedby": ariaDescribedBy,
+          id: id
+        });
+      }
+    });
+  }, [hint, label]);
+  return _jsx(_Autocomplete, {
+    disabled: isDisabled,
+    freeSolo: isCustomValueAllowed,
+    loading: isLoading,
+    multiple: hasMultipleChoices,
+    onChange: onChange,
+    onInputChange: onInputChange,
+    options: options,
+    readOnly: isReadOnly,
+    renderInput: renderInput,
+    value: value
+  });
+};
+
+const MemoizedAutocomplete = memo(Autocomplete);
+export { MemoizedAutocomplete as Autocomplete };
+//# sourceMappingURL=Autocomplete.js.map

package/dist/Autocomplete.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Autocomplete.js","names":["memo","useCallback","Field","Autocomplete","isCustomValueAllowed","hasMultipleChoices","isDisabled","isLoading","isReadOnly","hint","label","onChange","onInputChange","options","value","renderInput","InputLabelProps","InputProps","params","htmlFor","ariaDescribedBy","id","MemoizedAutocomplete"],"sources":["../src/Autocomplete.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-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\nimport {\n  Autocomplete as MuiAutocomplete,\n  AutocompleteProps as MuiAutocompleteProps,\n  InputBase,\n} from \"@mui/material\";\nimport { memo, useCallback } from \"react\";\n\nimport { Field } from \"./Field\";\n\nexport type AutocompleteProps<\n  OptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined\n> = {\n  hasMultipleChoices?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"multiple\"];\n  hint?: string;\n  isCustomValueAllowed?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"freeSolo\"];\n  isDisabled?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"disabled\"];\n  isLoading?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"loading\"];\n  isReadOnly?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"readOnly\"];\n  label: string;\n  onChange?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"onChange\"];\n  onInputChange?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"onInputChange\"];\n  options: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"options\"];\n  value?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"value\"];\n};\n\nconst Autocomplete = <\n  OptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined\n>({\n  isCustomValueAllowed,\n  hasMultipleChoices,\n  isDisabled,\n  isLoading,\n  isReadOnly,\n  hint,\n  label,\n  onChange,\n  onInputChange,\n  options,\n  value,\n}: AutocompleteProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>) => {\n  const renderInput = useCallback(\n    ({ InputLabelProps, InputProps, ...params }) => (\n      <Field\n        fieldType=\"single\"\n        hasVisibleLabel\n        id={InputLabelProps.htmlFor}\n        hint={hint}\n        label={label}\n        renderFieldComponent={({ ariaDescribedBy, id }) => (\n          <InputBase\n            {...params}\n            {...InputProps}\n            aria-describedby={ariaDescribedBy}\n            id={id}\n          />\n        )}\n      />\n    ),\n    [hint, label]\n  );\n\n  return (\n    <MuiAutocomplete\n      disabled={isDisabled}\n      freeSolo={isCustomValueAllowed}\n      loading={isLoading}\n      multiple={hasMultipleChoices}\n      onChange={onChange}\n      onInputChange={onInputChange}\n      options={options}\n      readOnly={isReadOnly}\n      renderInput={renderInput}\n      value={value}\n    />\n  );\n};\n\nconst MemoizedAutocomplete = memo(Autocomplete) as typeof Autocomplete;\n\nexport { MemoizedAutocomplete as Autocomplete };\n"],"mappings":";;AAiBA,SAASA,IAAT,EAAeC,WAAf,QAAkC,OAAlC;SAESC,K;;;AAiET,MAAMC,YAAY,GAAG,QAgB0D;EAAA,IAZ7E;IACAC,oBADA;IAEAC,kBAFA;IAGAC,UAHA;IAIAC,SAJA;IAKAC,UALA;IAMAC,IANA;IAOAC,KAPA;IAQAC,QARA;IASAC,aATA;IAUAC,OAVA;IAWAC;EAXA,CAY6E;EAC7E,MAAMC,WAAW,GAAGd,WAAW,CAC7B;IAAA,IAAC;MAAEe,eAAF;MAAmBC,UAAnB;MAA+B,GAAGC;IAAlC,CAAD;IAAA,OACE,KAAC,KAAD;MACE,SAAS,EAAC,QADZ;MAEE,eAAe,MAFjB;MAGE,EAAE,EAAEF,eAAe,CAACG,OAHtB;MAIE,IAAI,EAAEV,IAJR;MAKE,KAAK,EAAEC,KALT;MAME,oBAAoB,EAAE;QAAA,IAAC;UAAEU,eAAF;UAAmBC;QAAnB,CAAD;QAAA,OACpB,sBACMH,MADN;UAAA,GAEMD,UAFN;UAGE,oBAAkBG,eAHpB;UAIE,EAAE,EAAEC;QAJN,EADoB;MAAA;IANxB,EADF;EAAA,CAD6B,EAkB7B,CAACZ,IAAD,EAAOC,KAAP,CAlB6B,CAA/B;EAqBA,OACE;IACE,QAAQ,EAAEJ,UADZ;IAEE,QAAQ,EAAEF,oBAFZ;IAGE,OAAO,EAAEG,SAHX;IAIE,QAAQ,EAAEF,kBAJZ;IAKE,QAAQ,EAAEM,QALZ;IAME,aAAa,EAAEC,aANjB;IAOE,OAAO,EAAEC,OAPX;IAQE,QAAQ,EAAEL,UARZ;IASE,WAAW,EAAEO,WATf;IAUE,KAAK,EAAED;EAVT,EADF;AAcD,CApDD;;AAsDA,MAAMQ,oBAAoB,GAAGtB,IAAI,CAACG,YAAD,CAAjC;AAEA,SAASmB,oBAAoB,IAAInB,YAAjC"}

package/dist/Banner.js

@@ -16,11 +16,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 
 const Banner = _ref => {
   let {
-    onClose,
-    severity,
-    role,
     linkUrl,
     linkText,
+    onClose,
+    role,
+    severity,
     text
   } = _ref;
   return _jsxs(Alert, {

package/dist/Banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.js","names":["memo","Alert","Link","ScreenReaderText","Banner","onClose","severity","role","linkUrl","linkText","text","MemoizedBanner"],"sources":["../src/Banner.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-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\nimport { AlertColor, AlertProps } from \"@mui/material\";\nimport { memo } from \"react\";\nimport { Alert, Link, ScreenReaderText } from \"./\";\n\nexport interface BannerProps {\n  /**\n   * Determine the color and icon of the alert\n   */\n  severity: AlertColor;\n  /**\n   * Sets the ARIA role of the alert\n   * (\"status\" for something that dynamically updates, \"alert\" for errors, null for something\n   * unchanging)\n   */\n  role?: \"status\" | \"alert\";\n  /**\n   * The text content of the alert\n   */\n  text: string;\n  /**\n   * The function that's fired when the user clicks the close button. If undefined,\n   * the close button will not be shown.\n   */\n  onClose?: AlertProps[\"onClose\"];\n  /**\n   * If defined, the alert will include a link to the URL\n   */\n  linkUrl?: string;\n  /**\n   * If linkUrl is not undefined, this is the text of the link.\n   * If left blank, it defaults to \"Learn more\".\n   * Note that linkText does nothing if linkUrl is not defined\n   */\n  linkText?: string;\n}\n\nconst Banner = ({\n  onClose,\n  severity,\n  role,\n  linkUrl,\n  linkText,\n  text,\n}: BannerProps) => (\n  <Alert onClose={onClose} role={role} severity={severity} variant=\"banner\">\n    <ScreenReaderText>{severity}:</ScreenReaderText>\n    {text}\n    {linkUrl && (\n      <Link href={linkUrl} variant=\"monochrome\">\n        {linkText}\n      </Link>\n    )}\n  </Alert>\n);\n\nconst MemoizedBanner = memo(Banner);\n\nexport { MemoizedBanner as Banner };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,SAASA,IAAT,QAAqB,OAArB;SACSC,K,EAAOC,I,EAAMC,gB;;;;AAkCtB,MAAMC,MAAM,GAAG;EAAA,IAAC;IACdC,OADc;IAEdC,QAFc;IAGdC,IAHc;IAIdC,OAJc;IAKdC,QALc;IAMdC;EANc,CAAD;EAAA,OAQb,MAAC,KAAD;IAAO,OAAO,EAAEL,OAAhB;IAAyB,IAAI,EAAEE,IAA/B;IAAqC,QAAQ,EAAED,QAA/C;IAAyD,OAAO,EAAC,QAAjE;IAAA,WACE,MAAC,gBAAD;MAAA,WAAmBA,QAAnB;IAAA,EADF,EAEGI,IAFH,EAGGF,OAAO,IACN,KAAC,IAAD;MAAM,IAAI,EAAEA,OAAZ;MAAqB,OAAO,EAAC,YAA7B;MAAA,UACGC;IADH,EAJJ;EAAA,EARa;AAAA,CAAf;;AAmBA,MAAME,cAAc,GAAGX,IAAI,CAACI,MAAD,CAA3B;AAEA,SAASO,cAAc,IAAIP,MAA3B"}
+{"version":3,"file":"Banner.js","names":["memo","Alert","Link","ScreenReaderText","Banner","linkUrl","linkText","onClose","role","severity","text","MemoizedBanner"],"sources":["../src/Banner.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-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\nimport { AlertColor, AlertProps } from \"@mui/material\";\nimport { memo } from \"react\";\nimport { Alert, Link, ScreenReaderText } from \"./\";\n\nexport type BannerProps = {\n  /**\n   * If linkUrl is not undefined, this is the text of the link.\n   * If left blank, it defaults to \"Learn more\".\n   * Note that linkText does nothing if linkUrl is not defined\n   */\n  linkText?: string;\n  /**\n   * If defined, the alert will include a link to the URL\n   */\n  linkUrl?: string;\n  /**\n   * The function that's fired when the user clicks the close button. If undefined,\n   * the close button will not be shown.\n   */\n  onClose?: AlertProps[\"onClose\"];\n  /**\n   * Sets the ARIA role of the alert\n   * (\"status\" for something that dynamically updates, \"alert\" for errors, null for something\n   * unchanging)\n   */\n  role?: \"status\" | \"alert\";\n  /**\n   * Determine the color and icon of the alert\n   */\n  severity: AlertColor;\n  /**\n   * The text content of the alert\n   */\n  text: string;\n};\n\nconst Banner = ({\n  linkUrl,\n  linkText,\n  onClose,\n  role,\n  severity,\n  text,\n}: BannerProps) => (\n  <Alert onClose={onClose} role={role} severity={severity} variant=\"banner\">\n    <ScreenReaderText>{severity}:</ScreenReaderText>\n    {text}\n    {linkUrl && (\n      <Link href={linkUrl} variant=\"monochrome\">\n        {linkText}\n      </Link>\n    )}\n  </Alert>\n);\n\nconst MemoizedBanner = memo(Banner);\n\nexport { MemoizedBanner as Banner };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,SAASA,IAAT,QAAqB,OAArB;SACSC,K,EAAOC,I,EAAMC,gB;;;;AAkCtB,MAAMC,MAAM,GAAG;EAAA,IAAC;IACdC,OADc;IAEdC,QAFc;IAGdC,OAHc;IAIdC,IAJc;IAKdC,QALc;IAMdC;EANc,CAAD;EAAA,OAQb,MAAC,KAAD;IAAO,OAAO,EAAEH,OAAhB;IAAyB,IAAI,EAAEC,IAA/B;IAAqC,QAAQ,EAAEC,QAA/C;IAAyD,OAAO,EAAC,QAAjE;IAAA,WACE,MAAC,gBAAD;MAAA,WAAmBA,QAAnB;IAAA,EADF,EAEGC,IAFH,EAGGL,OAAO,IACN,KAAC,IAAD;MAAM,IAAI,EAAEA,OAAZ;MAAqB,OAAO,EAAC,YAA7B;MAAA,UACGC;IADH,EAJJ;EAAA,EARa;AAAA,CAAf;;AAmBA,MAAMK,cAAc,GAAGX,IAAI,CAACI,MAAD,CAA3B;AAEA,SAASO,cAAc,IAAIP,MAA3B"}

package/dist/Button.js

@@ -0,0 +1,46 @@
+import _Button from "@mui/material/Button";
+import { memo, useContext, useMemo } from "react";
+import { MuiPropsContext } from "./MuiPropsContext.js";
+import { Tooltip } from "./Tooltip.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const Button = _ref => {
+  let {
+    endIcon,
+    id,
+    isDisabled,
+    isFullWidth,
+    onClick,
+    size = "medium",
+    startIcon,
+    text,
+    tooltipText,
+    variant
+  } = _ref;
+  const muiProps = useContext(MuiPropsContext);
+  const button = useMemo(() => _jsx(_Button, { ...muiProps,
+    disabled: isDisabled,
+    endIcon: endIcon,
+    fullWidth: isFullWidth,
+    id: id,
+    onClick: onClick,
+    size: size,
+    startIcon: startIcon,
+    variant: variant,
+    children: text
+  }), [endIcon, id, isDisabled, isFullWidth, muiProps, onClick, size, startIcon, text, variant]);
+  return _jsxs(_Fragment, {
+    children: [tooltipText && _jsx(Tooltip, {
+      ariaType: "description",
+      placement: "top",
+      text: tooltipText,
+      children: button
+    }), !tooltipText && button]
+  });
+};
+
+const MemoizedButton = memo(Button);
+export { MemoizedButton as Button };
+//# sourceMappingURL=Button.js.map

package/dist/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","names":["memo","useContext","useMemo","MuiPropsContext","Tooltip","Button","endIcon","id","isDisabled","isFullWidth","onClick","size","startIcon","text","tooltipText","variant","muiProps","button","MemoizedButton"],"sources":["../src/Button.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-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\nimport { Button as MuiButton } from \"@mui/material\";\nimport type { ButtonProps as MuiButtonProps } from \"@mui/material\";\nimport { memo, ReactElement, useContext, useMemo } from \"react\";\n\nimport { Icon } from \"./Icon\";\nimport { MuiPropsContext } from \"./MuiPropsContext\";\nimport { Tooltip } from \"./Tooltip\";\n\nexport type ButtonProps = {\n  endIcon?: ReactElement<typeof Icon>;\n  id?: string;\n  isDisabled?: boolean;\n  isFullWidth?: boolean;\n  onClick?: MuiButtonProps[\"onClick\"];\n  size?: MuiButtonProps[\"size\"];\n  startIcon?: ReactElement<typeof Icon>;\n  text?: string;\n  /**\n   * `tooltipText` determines the text of the tooltip that wraps the button if it's icon-only.\n   */\n  tooltipText?: string;\n  variant?: \"primary\" | \"secondary\" | \"danger\" | \"floating\";\n};\n\nconst Button = ({\n  endIcon,\n  id,\n  isDisabled,\n  isFullWidth,\n  onClick,\n  size = \"medium\",\n  startIcon,\n  text,\n  tooltipText,\n  variant,\n}: ButtonProps) => {\n  const muiProps = useContext(MuiPropsContext);\n\n  const button = useMemo(\n    () => (\n      <MuiButton\n        {...muiProps}\n        disabled={isDisabled}\n        endIcon={endIcon}\n        fullWidth={isFullWidth}\n        id={id}\n        onClick={onClick}\n        size={size}\n        startIcon={startIcon}\n        variant={variant}\n      >\n        {text}\n      </MuiButton>\n    ),\n    [\n      endIcon,\n      id,\n      isDisabled,\n      isFullWidth,\n      muiProps,\n      onClick,\n      size,\n      startIcon,\n      text,\n      variant,\n    ]\n  );\n\n  return (\n    <>\n      {tooltipText && (\n        <Tooltip ariaType=\"description\" placement=\"top\" text={tooltipText}>\n          {button}\n        </Tooltip>\n      )}\n      {!tooltipText && button}\n    </>\n  );\n};\n\nconst MemoizedButton = memo(Button);\n\nexport { MemoizedButton as Button };\n"],"mappings":";AAcA,SAASA,IAAT,EAA6BC,UAA7B,EAAyCC,OAAzC,QAAwD,OAAxD;SAGSC,e;SACAC,O;;;;;AAkBT,MAAMC,MAAM,GAAG,QAWI;EAAA,IAXH;IACdC,OADc;IAEdC,EAFc;IAGdC,UAHc;IAIdC,WAJc;IAKdC,OALc;IAMdC,IAAI,GAAG,QANO;IAOdC,SAPc;IAQdC,IARc;IASdC,WATc;IAUdC;EAVc,CAWG;EACjB,MAAMC,QAAQ,GAAGf,UAAU,CAACE,eAAD,CAA3B;EAEA,MAAMc,MAAM,GAAGf,OAAO,CACpB,MACE,mBACMc,QADN;IAEE,QAAQ,EAAER,UAFZ;IAGE,OAAO,EAAEF,OAHX;IAIE,SAAS,EAAEG,WAJb;IAKE,EAAE,EAAEF,EALN;IAME,OAAO,EAAEG,OANX;IAOE,IAAI,EAAEC,IAPR;IAQE,SAAS,EAAEC,SARb;IASE,OAAO,EAAEG,OATX;IAAA,UAWGF;EAXH,EAFkB,EAgBpB,CACEP,OADF,EAEEC,EAFF,EAGEC,UAHF,EAIEC,WAJF,EAKEO,QALF,EAMEN,OANF,EAOEC,IAPF,EAQEC,SARF,EASEC,IATF,EAUEE,OAVF,CAhBoB,CAAtB;EA8BA,OACE;IAAA,WACGD,WAAW,IACV,KAAC,OAAD;MAAS,QAAQ,EAAC,aAAlB;MAAgC,SAAS,EAAC,KAA1C;MAAgD,IAAI,EAAEA,WAAtD;MAAA,UACGG;IADH,EAFJ,EAMG,CAACH,WAAD,IAAgBG,MANnB;EAAA,EADF;AAUD,CAtDD;;AAwDA,MAAMC,cAAc,GAAGlB,IAAI,CAACK,MAAD,CAA3B;AAEA,SAASa,cAAc,IAAIb,MAA3B"}

package/dist/CheckboxGroup.js

@@ -1,18 +1,7 @@
-/*!
- * 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, useMemo } from "react";
-import { FormControl, FormGroup, FormHelperText, FormLabel, ScreenReaderText } from "./index.js";
+import _FormGroup from "@mui/material/FormGroup";
+import { memo, useCallback } from "react";
+import { Field } from "./Field.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 
 const CheckboxGroup = _ref => {
   let {
@@ -20,30 +9,29 @@ const CheckboxGroup = _ref => {
     isDisabled,
     errorMessage,
     hint,
-    label,
-    name
+    id: idOverride,
+    label
   } = _ref;
-  const ariaDescribedBy = useMemo(() => errorMessage || hint ? [hint && `${name}-hint`, errorMessage && `${name}-error`].filter(Boolean).join(" ") : undefined, [errorMessage, hint, name]);
-  return _jsxs(FormControl, {
-    component: "fieldset",
-    disabled: isDisabled,
-    error: Boolean(errorMessage),
-    children: [label && _jsx(FormLabel, {
-      component: "legend",
-      children: label
-    }), hint && _jsx(FormHelperText, {
-      id: `${name}-hint`,
-      children: hint
-    }), _jsx(FormGroup, {
+  const renderFieldComponent = useCallback(_ref2 => {
+    let {
+      ariaDescribedBy,
+      id
+    } = _ref2;
+    return _jsx(_FormGroup, {
       "aria-describedby": ariaDescribedBy,
+      id: id,
       children: children
-    }), errorMessage && _jsxs(FormHelperText, {
-      id: `${name}-error`,
-      error: true,
-      children: [_jsx(ScreenReaderText, {
-        children: "Error:"
-      }), " ", errorMessage]
-    })]
+    });
+  }, [children]);
+  return _jsx(Field, {
+    errorMessage: errorMessage,
+    fieldType: "group",
+    hasVisibleLabel: false,
+    hint: hint,
+    id: idOverride,
+    isDisabled: isDisabled,
+    label: label,
+    renderFieldComponent: renderFieldComponent
   });
 };
 

package/dist/CheckboxGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.js","names":["memo","useMemo","FormControl","FormGroup","FormHelperText","FormLabel","ScreenReaderText","CheckboxGroup","children","isDisabled","errorMessage","hint","label","name","ariaDescribedBy","filter","Boolean","join","undefined","MemoizedCheckboxGroup"],"sources":["../src/CheckboxGroup.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-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\nimport { memo, ReactElement, useMemo } from \"react\";\n\nimport {\n  Checkbox,\n  FormControl,\n  FormGroup,\n  FormHelperText,\n  FormLabel,\n  ScreenReaderText,\n} from \".\";\n\nexport type CheckboxGroupProps = {\n  children:\n    | ReactElement<typeof Checkbox>\n    | Array<ReactElement<typeof Checkbox>>;\n  errorMessage?: string;\n  hint?: string;\n  isDisabled?: boolean;\n  label?: string;\n  name?: string;\n};\n\nconst CheckboxGroup = ({\n  children,\n  isDisabled,\n  errorMessage,\n  hint,\n  label,\n  name,\n}: CheckboxGroupProps) => {\n  const ariaDescribedBy = useMemo(\n    () =>\n      errorMessage || hint\n        ? [hint && `${name}-hint`, errorMessage && `${name}-error`]\n            .filter(Boolean)\n            .join(\" \")\n        : undefined,\n    [errorMessage, hint, name]\n  );\n\n  return (\n    <FormControl\n      component=\"fieldset\"\n      disabled={isDisabled}\n      error={Boolean(errorMessage)}\n    >\n      {label && <FormLabel component=\"legend\">{label}</FormLabel>}\n      {hint && <FormHelperText id={`${name}-hint`}>{hint}</FormHelperText>}\n      <FormGroup aria-describedby={ariaDescribedBy}>{children}</FormGroup>\n      {errorMessage && (\n        <FormHelperText id={`${name}-error`} error>\n          <ScreenReaderText>Error:</ScreenReaderText> {errorMessage}\n        </FormHelperText>\n      )}\n    </FormControl>\n  );\n};\n\nconst MemoizedCheckboxGroup = memo(CheckboxGroup);\n\nexport { MemoizedCheckboxGroup as CheckboxGroup };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,SAASA,IAAT,EAA6BC,OAA7B,QAA4C,OAA5C;SAIEC,W,EACAC,S,EACAC,c,EACAC,S,EACAC,gB;;;;AAcF,MAAMC,aAAa,GAAG,QAOI;EAAA,IAPH;IACrBC,QADqB;IAErBC,UAFqB;IAGrBC,YAHqB;IAIrBC,IAJqB;IAKrBC,KALqB;IAMrBC;EANqB,CAOG;EACxB,MAAMC,eAAe,GAAGb,OAAO,CAC7B,MACES,YAAY,IAAIC,IAAhB,GACI,CAACA,IAAI,IAAK,GAAEE,IAAK,OAAjB,EAAyBH,YAAY,IAAK,GAAEG,IAAK,QAAjD,EACGE,MADH,CACUC,OADV,EAEGC,IAFH,CAEQ,GAFR,CADJ,GAIIC,SANuB,EAO7B,CAACR,YAAD,EAAeC,IAAf,EAAqBE,IAArB,CAP6B,CAA/B;EAUA,OACE,MAAC,WAAD;IACE,SAAS,EAAC,UADZ;IAEE,QAAQ,EAAEJ,UAFZ;IAGE,KAAK,EAAEO,OAAO,CAACN,YAAD,CAHhB;IAAA,WAKGE,KAAK,IAAI,KAAC,SAAD;MAAW,SAAS,EAAC,QAArB;MAAA,UAA+BA;IAA/B,EALZ,EAMGD,IAAI,IAAI,KAAC,cAAD;MAAgB,EAAE,EAAG,GAAEE,IAAK,OAA5B;MAAA,UAAqCF;IAArC,EANX,EAOE,KAAC,SAAD;MAAW,oBAAkBG,eAA7B;MAAA,UAA+CN;IAA/C,EAPF,EAQGE,YAAY,IACX,MAAC,cAAD;MAAgB,EAAE,EAAG,GAAEG,IAAK,QAA5B;MAAqC,KAAK,MAA1C;MAAA,WACE,KAAC,gBAAD;QAAA;MAAA,EADF,OAC+CH,YAD/C;IAAA,EATJ;EAAA,EADF;AAgBD,CAlCD;;AAoCA,MAAMS,qBAAqB,GAAGnB,IAAI,CAACO,aAAD,CAAlC;AAEA,SAASY,qBAAqB,IAAIZ,aAAlC"}
+{"version":3,"file":"CheckboxGroup.js","names":["memo","useCallback","Field","CheckboxGroup","children","isDisabled","errorMessage","hint","id","idOverride","label","renderFieldComponent","ariaDescribedBy","MemoizedCheckboxGroup"],"sources":["../src/CheckboxGroup.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-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\nimport { FormGroup as MuiFormGroup } from \"@mui/material\";\nimport { memo, ReactElement, useCallback } from \"react\";\n\nimport { Checkbox } from \"./Checkbox\";\nimport { Field } from \"./Field\";\n\nexport type CheckboxGroupProps = {\n  children:\n    | ReactElement<typeof Checkbox>\n    | Array<ReactElement<typeof Checkbox>>;\n  errorMessage?: string;\n  hint?: string;\n  /**\n   * The id of the `input` element. This will also be the input's `name` field.\n   */\n  id?: string;\n  isDisabled?: boolean;\n  label: string;\n};\n\nconst CheckboxGroup = ({\n  children,\n  isDisabled,\n  errorMessage,\n  hint,\n  id: idOverride,\n  label,\n}: CheckboxGroupProps) => {\n  const renderFieldComponent = useCallback(\n    ({ ariaDescribedBy, id }) => (\n      <MuiFormGroup aria-describedby={ariaDescribedBy} id={id}>\n        {children}\n      </MuiFormGroup>\n    ),\n    [children]\n  );\n\n  return (\n    <Field\n      errorMessage={errorMessage}\n      fieldType=\"group\"\n      hasVisibleLabel={false}\n      hint={hint}\n      id={idOverride}\n      isDisabled={isDisabled}\n      label={label}\n      renderFieldComponent={renderFieldComponent}\n    />\n  );\n};\n\nconst MemoizedCheckboxGroup = memo(CheckboxGroup);\n\nexport { MemoizedCheckboxGroup as CheckboxGroup };\n"],"mappings":";AAaA,SAASA,IAAT,EAA6BC,WAA7B,QAAgD,OAAhD;SAGSC,K;;;AAgBT,MAAMC,aAAa,GAAG,QAOI;EAAA,IAPH;IACrBC,QADqB;IAErBC,UAFqB;IAGrBC,YAHqB;IAIrBC,IAJqB;IAKrBC,EAAE,EAAEC,UALiB;IAMrBC;EANqB,CAOG;EACxB,MAAMC,oBAAoB,GAAGV,WAAW,CACtC;IAAA,IAAC;MAAEW,eAAF;MAAmBJ;IAAnB,CAAD;IAAA,OACE;MAAc,oBAAkBI,eAAhC;MAAiD,EAAE,EAAEJ,EAArD;MAAA,UACGJ;IADH,EADF;EAAA,CADsC,EAMtC,CAACA,QAAD,CANsC,CAAxC;EASA,OACE,KAAC,KAAD;IACE,YAAY,EAAEE,YADhB;IAEE,SAAS,EAAC,OAFZ;IAGE,eAAe,EAAE,KAHnB;IAIE,IAAI,EAAEC,IAJR;IAKE,EAAE,EAAEE,UALN;IAME,UAAU,EAAEJ,UANd;IAOE,KAAK,EAAEK,KAPT;IAQE,oBAAoB,EAAEC;EARxB,EADF;AAYD,CA7BD;;AA+BA,MAAME,qBAAqB,GAAGb,IAAI,CAACG,aAAD,CAAlC;AAEA,SAASU,qBAAqB,IAAIV,aAAlC"}

package/dist/Dialog.js

@@ -0,0 +1,68 @@
+import _Dialog from "@mui/material/Dialog";
+import _DialogActions from "@mui/material/DialogActions";
+import _DialogContent from "@mui/material/DialogContent";
+import _DialogTitle from "@mui/material/DialogTitle";
+import _DialogContentText from "@mui/material/DialogContentText";
+import { Button, CloseIcon } from "./index.js";
+import { memo, useState, useEffect, useRef } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const Dialog = _ref => {
+  let {
+    callToActionPrimaryComponent,
+    callToActionSecondaryComponent,
+    callToActionTertiaryComponent,
+    children,
+    isOpen,
+    onClose,
+    title
+  } = _ref;
+  const [isContentScrollable, setIsContentScrollable] = useState(false);
+  const dialogContentRef = useRef(null);
+  useEffect(() => {
+    let frameId;
+
+    const handleContentScroll = () => {
+      const dialogContentElement = dialogContentRef.current;
+
+      if (dialogContentElement) {
+        setIsContentScrollable(dialogContentElement.scrollHeight > dialogContentElement.clientHeight);
+      }
+
+      frameId = requestAnimationFrame(handleContentScroll);
+    };
+
+    if (isOpen) {
+      frameId = requestAnimationFrame(handleContentScroll);
+    }
+
+    return () => {
+      cancelAnimationFrame(frameId);
+    };
+  }, [isOpen]);
+  const content = typeof children === "string" ? _jsx(_DialogContentText, {
+    children: children
+  }) : children;
+  return _jsxs(_Dialog, {
+    open: isOpen,
+    onClose: onClose,
+    children: [_jsxs(_DialogTitle, {
+      children: [title, _jsx(Button, {
+        variant: "floating",
+        onClick: onClose,
+        startIcon: _jsx(CloseIcon, {})
+      })]
+    }), _jsx(_DialogContent, {
+      dividers: isContentScrollable,
+      ref: dialogContentRef,
+      children: content
+    }), (callToActionPrimaryComponent || callToActionSecondaryComponent || callToActionTertiaryComponent) && _jsxs(_DialogActions, {
+      children: [callToActionTertiaryComponent, callToActionSecondaryComponent, callToActionPrimaryComponent]
+    })]
+  });
+};
+
+const MemoizedDialog = memo(Dialog);
+export { MemoizedDialog as Dialog };
+//# sourceMappingURL=Dialog.js.map

package/dist/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","names":["Button","CloseIcon","memo","useState","useEffect","useRef","Dialog","callToActionPrimaryComponent","callToActionSecondaryComponent","callToActionTertiaryComponent","children","isOpen","onClose","title","isContentScrollable","setIsContentScrollable","dialogContentRef","frameId","handleContentScroll","dialogContentElement","current","scrollHeight","clientHeight","requestAnimationFrame","cancelAnimationFrame","content","MemoizedDialog"],"sources":["../src/Dialog.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-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\nimport { Dialog as MuiDialog } from \"@mui/material\";\nimport {\n  DialogTitle,\n  DialogContent,\n  DialogContentText,\n  DialogActions,\n} from \"@mui/material\";\nimport { Button, CloseIcon } from \"./\";\nimport {\n  memo,\n  ReactNode,\n  useState,\n  useEffect,\n  useRef,\n  ReactElement,\n} from \"react\";\n\nexport type DialogProps = {\n  callToActionPrimaryComponent?: ReactElement<typeof Button>;\n  callToActionSecondaryComponent?: ReactElement<typeof Button>;\n  callToActionTertiaryComponent?: ReactElement<typeof Button>;\n  children: ReactNode | Array<ReactNode>;\n  onClose: () => void;\n  isOpen: boolean;\n  title: string;\n};\n\nconst Dialog = ({\n  callToActionPrimaryComponent,\n  callToActionSecondaryComponent,\n  callToActionTertiaryComponent,\n  children,\n  isOpen,\n  onClose,\n  title,\n}: DialogProps) => {\n  const [isContentScrollable, setIsContentScrollable] = useState(false);\n  const dialogContentRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    let frameId: number;\n\n    const handleContentScroll = () => {\n      const dialogContentElement = dialogContentRef.current;\n      if (dialogContentElement) {\n        setIsContentScrollable(\n          dialogContentElement.scrollHeight > dialogContentElement.clientHeight\n        );\n      }\n      frameId = requestAnimationFrame(handleContentScroll);\n    };\n\n    if (isOpen) {\n      frameId = requestAnimationFrame(handleContentScroll);\n    }\n\n    return () => {\n      cancelAnimationFrame(frameId);\n    };\n  }, [isOpen]);\n\n  const content =\n    typeof children === \"string\" ? (\n      <DialogContentText>{children}</DialogContentText>\n    ) : (\n      children\n    );\n\n  return (\n    <MuiDialog open={isOpen} onClose={onClose}>\n      <DialogTitle>\n        {title}\n        <Button\n          variant=\"floating\"\n          onClick={onClose}\n          startIcon={<CloseIcon />}\n        />\n      </DialogTitle>\n      <DialogContent dividers={isContentScrollable} ref={dialogContentRef}>\n        {content}\n      </DialogContent>\n\n      {(callToActionPrimaryComponent ||\n        callToActionSecondaryComponent ||\n        callToActionTertiaryComponent) && (\n        <DialogActions>\n          {callToActionTertiaryComponent}\n          {callToActionSecondaryComponent}\n          {callToActionPrimaryComponent}\n        </DialogActions>\n      )}\n    </MuiDialog>\n  );\n};\n\nconst MemoizedDialog = memo(Dialog);\n\nexport { MemoizedDialog as Dialog };\n"],"mappings":";;;;;SAmBSA,M,EAAQC,S;AACjB,SACEC,IADF,EAGEC,QAHF,EAIEC,SAJF,EAKEC,MALF,QAOO,OAPP;;;;AAmBA,MAAMC,MAAM,GAAG,QAQI;EAAA,IARH;IACdC,4BADc;IAEdC,8BAFc;IAGdC,6BAHc;IAIdC,QAJc;IAKdC,MALc;IAMdC,OANc;IAOdC;EAPc,CAQG;EACjB,MAAM,CAACC,mBAAD,EAAsBC,sBAAtB,IAAgDZ,QAAQ,CAAC,KAAD,CAA9D;EACA,MAAMa,gBAAgB,GAAGX,MAAM,CAAiB,IAAjB,CAA/B;EAEAD,SAAS,CAAC,MAAM;IACd,IAAIa,OAAJ;;IAEA,MAAMC,mBAAmB,GAAG,MAAM;MAChC,MAAMC,oBAAoB,GAAGH,gBAAgB,CAACI,OAA9C;;MACA,IAAID,oBAAJ,EAA0B;QACxBJ,sBAAsB,CACpBI,oBAAoB,CAACE,YAArB,GAAoCF,oBAAoB,CAACG,YADrC,CAAtB;MAGD;;MACDL,OAAO,GAAGM,qBAAqB,CAACL,mBAAD,CAA/B;IACD,CARD;;IAUA,IAAIP,MAAJ,EAAY;MACVM,OAAO,GAAGM,qBAAqB,CAACL,mBAAD,CAA/B;IACD;;IAED,OAAO,MAAM;MACXM,oBAAoB,CAACP,OAAD,CAApB;IACD,CAFD;EAGD,CApBQ,EAoBN,CAACN,MAAD,CApBM,CAAT;EAsBA,MAAMc,OAAO,GACX,OAAOf,QAAP,KAAoB,QAApB,GACE;IAAA,UAAoBA;EAApB,EADF,GAGEA,QAJJ;EAOA,OACE;IAAW,IAAI,EAAEC,MAAjB;IAAyB,OAAO,EAAEC,OAAlC;IAAA,WACE;MAAA,WACGC,KADH,EAEE,KAAC,MAAD;QACE,OAAO,EAAC,UADV;QAEE,OAAO,EAAED,OAFX;QAGE,SAAS,EAAE,KAAC,SAAD;MAHb,EAFF;IAAA,EADF,EASE;MAAe,QAAQ,EAAEE,mBAAzB;MAA8C,GAAG,EAAEE,gBAAnD;MAAA,UACGS;IADH,EATF,EAaG,CAAClB,4BAA4B,IAC5BC,8BADA,IAEAC,6BAFD,KAGC;MAAA,WACGA,6BADH,EAEGD,8BAFH,EAGGD,4BAHH;IAAA,EAhBJ;EAAA,EADF;AAyBD,CAlED;;AAoEA,MAAMmB,cAAc,GAAGxB,IAAI,CAACI,MAAD,CAA3B;AAEA,SAASoB,cAAc,IAAIpB,MAA3B"}

package/dist/Field.js

@@ -0,0 +1,72 @@
+import _FormControl from "@mui/material/FormControl";
+import _FormLabel from "@mui/material/FormLabel";
+
+/*!
+ * 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, useMemo } from "react";
+import { FieldError } from "./FieldError.js";
+import { FieldHint } from "./FieldHint.js";
+import { FieldLabel } from "./FieldLabel.js";
+import { useUniqueId } from "./useUniqueId.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const Field = _ref => {
+  let {
+    errorMessage,
+    fieldType,
+    hasVisibleLabel,
+    hint,
+    id: idOverride,
+    isDisabled = false,
+    isRadioGroup = false,
+    isOptional = false,
+    label,
+    optionalLabel,
+    renderFieldComponent
+  } = _ref;
+  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 _jsxs(_FormControl, {
+    component: fieldType === "group" ? "fieldset" : "div",
+    disabled: isDisabled,
+    error: Boolean(errorMessage),
+    role: isRadioGroup ? "radiogroup" : undefined,
+    children: [fieldType === "group" ? _jsx(_FormLabel, {
+      component: "legend",
+      children: label
+    }) : _jsx(FieldLabel, {
+      hasVisibleLabel: hasVisibleLabel,
+      id: labelId,
+      inputId: id,
+      isOptional: isOptional,
+      optionalText: optionalLabel,
+      text: label
+    }), hint && _jsx(FieldHint, {
+      id: hintId,
+      text: hint
+    }), renderFieldComponent({
+      ariaDescribedBy,
+      id
+    }), errorMessage && _jsx(FieldError, {
+      id: errorId,
+      text: errorMessage
+    })]
+  });
+};
+
+const MemoizedField = memo(Field);
+export { MemoizedField as Field };
+//# sourceMappingURL=Field.js.map

package/dist/Field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.js","names":["memo","useMemo","FieldError","FieldHint","FieldLabel","useUniqueId","Field","errorMessage","fieldType","hasVisibleLabel","hint","id","idOverride","isDisabled","isRadioGroup","isOptional","label","optionalLabel","renderFieldComponent","hintId","undefined","errorId","labelId","ariaDescribedBy","join","trim","Boolean","MemoizedField"],"sources":["../src/Field.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-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\nimport { memo, ReactElement, useMemo } from \"react\";\n\nimport {\n  FormControl as MuiFormControl,\n  FormLabel as MuiFormLabel,\n} from \"@mui/material\";\nimport { FieldError } from \"./FieldError\";\nimport { FieldHint } from \"./FieldHint\";\nimport { FieldLabel } from \"./FieldLabel\";\nimport { useUniqueId } from \"./useUniqueId\";\n\nexport type FieldProps = {\n  /**\n   * If `error` is not undefined, the `input` will indicate an error.\n   */\n  errorMessage?: string;\n  /**\n   * The field type determines how ARIA components are setup. It's important to use this to denote if you expect only one component (like a text field) or multiple (like a radio group).\n   */\n  fieldType: \"single\" | \"group\";\n  hasVisibleLabel: boolean;\n  /**\n   * The helper text content.\n   */\n  hint?: string;\n  /**\n   * The id of the `input` element.\n   */\n  id?: string;\n  /**\n   * Important for narrowing down the `fieldset` role to \"radiogroup\".\n   */\n  isRadioGroup?: boolean;\n  /**\n   * If `true`, the component is disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * If `true`, the `input` element is not required.\n   */\n  isOptional?: boolean;\n  /**\n   * The label for the `input` element.\n   */\n  label: string;\n  /**\n   * The label for the `input` element if the it's not optional\n   */\n  optionalLabel?: string;\n  /**\n   * The short hint displayed in the `input` before the user enters a value.\n   */\n  placeholder?: string;\n  /**\n   * Render-props function that sends back ARIA props to your field component.\n   */\n  renderFieldComponent: ({\n    ariaDescribedBy,\n    id,\n  }: {\n    ariaDescribedBy?: string;\n    id: string;\n  }) => ReactElement;\n};\n\nconst Field = ({\n  errorMessage,\n  fieldType,\n  hasVisibleLabel,\n  hint,\n  id: idOverride,\n  isDisabled = false,\n  isRadioGroup = false,\n  isOptional = false,\n  label,\n  optionalLabel,\n  renderFieldComponent,\n}: FieldProps) => {\n  const id = useUniqueId(idOverride);\n  const hintId = hint ? `${id}-hint` : undefined;\n  const errorId = errorMessage ? `${id}-error` : undefined;\n  const labelId = `${id}-label`;\n\n  const ariaDescribedBy = useMemo(\n    () => [hintId, errorId].join(\" \").trim() || undefined,\n    [errorId, hintId]\n  );\n\n  return (\n    <MuiFormControl\n      component={fieldType === \"group\" ? \"fieldset\" : \"div\"}\n      disabled={isDisabled}\n      error={Boolean(errorMessage)}\n      role={isRadioGroup ? \"radiogroup\" : undefined}\n    >\n      {fieldType === \"group\" ? (\n        <MuiFormLabel component=\"legend\">{label}</MuiFormLabel>\n      ) : (\n        <FieldLabel\n          hasVisibleLabel={hasVisibleLabel}\n          id={labelId}\n          inputId={id}\n          isOptional={isOptional}\n          optionalText={optionalLabel}\n          text={label}\n        />\n      )}\n\n      {hint && <FieldHint id={hintId} text={hint} />}\n\n      {renderFieldComponent({\n        ariaDescribedBy,\n        id,\n      })}\n\n      {errorMessage && <FieldError id={errorId} text={errorMessage} />}\n    </MuiFormControl>\n  );\n};\n\nconst MemoizedField = memo(Field);\n\nexport { MemoizedField as Field };\n"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,SAASA,IAAT,EAA6BC,OAA7B,QAA4C,OAA5C;SAMSC,U;SACAC,S;SACAC,U;SACAC,W;;;;AAwDT,MAAMC,KAAK,GAAG,QAYI;EAAA,IAZH;IACbC,YADa;IAEbC,SAFa;IAGbC,eAHa;IAIbC,IAJa;IAKbC,EAAE,EAAEC,UALS;IAMbC,UAAU,GAAG,KANA;IAObC,YAAY,GAAG,KAPF;IAQbC,UAAU,GAAG,KARA;IASbC,KATa;IAUbC,aAVa;IAWbC;EAXa,CAYG;EAChB,MAAMP,EAAE,GAAGN,WAAW,CAACO,UAAD,CAAtB;EACA,MAAMO,MAAM,GAAGT,IAAI,GAAI,GAAEC,EAAG,OAAT,GAAkBS,SAArC;EACA,MAAMC,OAAO,GAAGd,YAAY,GAAI,GAAEI,EAAG,QAAT,GAAmBS,SAA/C;EACA,MAAME,OAAO,GAAI,GAAEX,EAAG,QAAtB;EAEA,MAAMY,eAAe,GAAGtB,OAAO,CAC7B,MAAM,CAACkB,MAAD,EAASE,OAAT,EAAkBG,IAAlB,CAAuB,GAAvB,EAA4BC,IAA5B,MAAsCL,SADf,EAE7B,CAACC,OAAD,EAAUF,MAAV,CAF6B,CAA/B;EAKA,OACE;IACE,SAAS,EAAEX,SAAS,KAAK,OAAd,GAAwB,UAAxB,GAAqC,KADlD;IAEE,QAAQ,EAAEK,UAFZ;IAGE,KAAK,EAAEa,OAAO,CAACnB,YAAD,CAHhB;IAIE,IAAI,EAAEO,YAAY,GAAG,YAAH,GAAkBM,SAJtC;IAAA,WAMGZ,SAAS,KAAK,OAAd,GACC;MAAc,SAAS,EAAC,QAAxB;MAAA,UAAkCQ;IAAlC,EADD,GAGC,KAAC,UAAD;MACE,eAAe,EAAEP,eADnB;MAEE,EAAE,EAAEa,OAFN;MAGE,OAAO,EAAEX,EAHX;MAIE,UAAU,EAAEI,UAJd;MAKE,YAAY,EAAEE,aALhB;MAME,IAAI,EAAED;IANR,EATJ,EAmBGN,IAAI,IAAI,KAAC,SAAD;MAAW,EAAE,EAAES,MAAf;MAAuB,IAAI,EAAET;IAA7B,EAnBX,EAqBGQ,oBAAoB,CAAC;MACpBK,eADoB;MAEpBZ;IAFoB,CAAD,CArBvB,EA0BGJ,YAAY,IAAI,KAAC,UAAD;MAAY,EAAE,EAAEc,OAAhB;MAAyB,IAAI,EAAEd;IAA/B,EA1BnB;EAAA,EADF;AA8BD,CArDD;;AAuDA,MAAMoB,aAAa,GAAG3B,IAAI,CAACM,KAAD,CAA1B;AAEA,SAASqB,aAAa,IAAIrB,KAA1B"}

package/dist/FieldError.js

@@ -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 "./index.js";
+import { ScreenReaderText } from "./ScreenReaderText.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const FieldError = _ref => {
+  let {
+    id,
+    text
+  } = _ref;
+  return _jsxs(FormHelperText, {
+    error: true,
+    id: id,
+    children: [_jsx(ScreenReaderText, {
+      children: "Error:"
+    }), text]
+  });
+};
+
+const MemoizedFieldError = memo(FieldError);
+export { MemoizedFieldError as FieldError };
+//# sourceMappingURL=FieldError.js.map

package/dist/FieldError.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldError.js","names":["memo","FormHelperText","ScreenReaderText","FieldError","id","text","MemoizedFieldError"],"sources":["../src/FieldError.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-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\nimport { memo } from \"react\";\n\nimport { FormHelperText } from \".\";\nimport { ScreenReaderText } from \"./ScreenReaderText\";\n\nexport type FieldErrorProps = {\n  id?: string;\n  text: string;\n};\n\nconst FieldError = ({ id, text }: FieldErrorProps) => {\n  return (\n    <FormHelperText error id={id}>\n      <ScreenReaderText>Error:</ScreenReaderText>\n      {text}\n    </FormHelperText>\n  );\n};\n\nconst MemoizedFieldError = memo(FieldError);\n\nexport { MemoizedFieldError as FieldError };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,SAASA,IAAT,QAAqB,OAArB;SAESC,c;SACAC,gB;;;;AAOT,MAAMC,UAAU,GAAG,QAAmC;EAAA,IAAlC;IAAEC,EAAF;IAAMC;EAAN,CAAkC;EACpD,OACE,MAAC,cAAD;IAAgB,KAAK,MAArB;IAAsB,EAAE,EAAED,EAA1B;IAAA,WACE,KAAC,gBAAD;MAAA;IAAA,EADF,EAEGC,IAFH;EAAA,EADF;AAMD,CAPD;;AASA,MAAMC,kBAAkB,GAAGN,IAAI,CAACG,UAAD,CAA/B;AAEA,SAASG,kBAAkB,IAAIH,UAA/B"}

package/dist/FieldHint.js

@@ -0,0 +1,29 @@
+/*!
+ * 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 "./index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const FieldHint = _ref => {
+  let {
+    id,
+    text
+  } = _ref;
+  return _jsx(FormHelperText, {
+    id: id,
+    children: text
+  });
+};
+
+const MemoizedFieldHint = memo(FieldHint);
+export { MemoizedFieldHint as FieldHint };
+//# sourceMappingURL=FieldHint.js.map

package/dist/FieldHint.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldHint.js","names":["memo","FormHelperText","FieldHint","id","text","MemoizedFieldHint"],"sources":["../src/FieldHint.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-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\nimport { memo } from \"react\";\n\nimport { FormHelperText } from \"./\";\n\nexport type FieldHintProps = {\n  id?: string;\n  text: string;\n};\n\nconst FieldHint = ({ id, text }: FieldHintProps) => {\n  return <FormHelperText id={id}>{text}</FormHelperText>;\n};\n\nconst MemoizedFieldHint = memo(FieldHint);\n\nexport { MemoizedFieldHint as FieldHint };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,SAASA,IAAT,QAAqB,OAArB;SAESC,c;;;AAOT,MAAMC,SAAS,GAAG,QAAkC;EAAA,IAAjC;IAAEC,EAAF;IAAMC;EAAN,CAAiC;EAClD,OAAO,KAAC,cAAD;IAAgB,EAAE,EAAED,EAApB;IAAA,UAAyBC;EAAzB,EAAP;AACD,CAFD;;AAIA,MAAMC,iBAAiB,GAAGL,IAAI,CAACE,SAAD,CAA9B;AAEA,SAASG,iBAAiB,IAAIH,SAA9B"}

package/dist/FieldLabel.js

@@ -0,0 +1,32 @@
+import _InputLabel from "@mui/material/InputLabel";
+import { memo, useMemo } from "react";
+import { ScreenReaderText } from "./ScreenReaderText.js";
+import { Typography } from "./index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const FieldLabel = _ref => {
+  let {
+    hasVisibleLabel,
+    id,
+    inputId,
+    isOptional,
+    optionalText,
+    text
+  } = _ref;
+  const inputLabel = useMemo(() => _jsxs(_InputLabel, {
+    htmlFor: inputId,
+    id: id,
+    children: [text, isOptional && _jsx(Typography, {
+      variant: "subtitle1",
+      children: optionalText
+    })]
+  }), [id, inputId, isOptional, optionalText, text]);
+  return hasVisibleLabel ? inputLabel : _jsx(ScreenReaderText, {
+    children: inputLabel
+  });
+};
+
+const MemoizedFieldLabel = memo(FieldLabel);
+export { MemoizedFieldLabel as FieldLabel };
+//# sourceMappingURL=FieldLabel.js.map

package/dist/FieldLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldLabel.js","names":["memo","useMemo","ScreenReaderText","Typography","FieldLabel","hasVisibleLabel","id","inputId","isOptional","optionalText","text","inputLabel","MemoizedFieldLabel"],"sources":["../src/FieldLabel.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-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\nimport { InputLabel as MuiInputLabel } from \"@mui/material\";\nimport { memo, useMemo } from \"react\";\n\nimport { ScreenReaderText } from \"./ScreenReaderText\";\nimport { Typography } from \".\";\n\nexport type FieldLabelProps = {\n  hasVisibleLabel: boolean;\n  id: string;\n  inputId: string;\n  isOptional: boolean;\n  optionalText?: string;\n  text: string;\n};\n\nconst FieldLabel = ({\n  hasVisibleLabel,\n  id,\n  inputId,\n  isOptional,\n  optionalText,\n  text,\n}: FieldLabelProps) => {\n  const inputLabel = useMemo(\n    () => (\n      <MuiInputLabel htmlFor={inputId} id={id}>\n        {text}\n        {isOptional && (\n          <Typography variant=\"subtitle1\">{optionalText}</Typography>\n        )}\n      </MuiInputLabel>\n    ),\n    [id, inputId, isOptional, optionalText, text]\n  );\n\n  return hasVisibleLabel ? (\n    inputLabel\n  ) : (\n    <ScreenReaderText>{inputLabel}</ScreenReaderText>\n  );\n};\n\nconst MemoizedFieldLabel = memo(FieldLabel);\n\nexport { MemoizedFieldLabel as FieldLabel };\n"],"mappings":";AAaA,SAASA,IAAT,EAAeC,OAAf,QAA8B,OAA9B;SAESC,gB;SACAC,U;;;;AAWT,MAAMC,UAAU,GAAG,QAOI;EAAA,IAPH;IAClBC,eADkB;IAElBC,EAFkB;IAGlBC,OAHkB;IAIlBC,UAJkB;IAKlBC,YALkB;IAMlBC;EANkB,CAOG;EACrB,MAAMC,UAAU,GAAGV,OAAO,CACxB,MACE;IAAe,OAAO,EAAEM,OAAxB;IAAiC,EAAE,EAAED,EAArC;IAAA,WACGI,IADH,EAEGF,UAAU,IACT,KAAC,UAAD;MAAY,OAAO,EAAC,WAApB;MAAA,UAAiCC;IAAjC,EAHJ;EAAA,EAFsB,EASxB,CAACH,EAAD,EAAKC,OAAL,EAAcC,UAAd,EAA0BC,YAA1B,EAAwCC,IAAxC,CATwB,CAA1B;EAYA,OAAOL,eAAe,GACpBM,UADoB,GAGpB,KAAC,gBAAD;IAAA,UAAmBA;EAAnB,EAHF;AAKD,CAzBD;;AA2BA,MAAMC,kBAAkB,GAAGZ,IAAI,CAACI,UAAD,CAA/B;AAEA,SAASQ,kBAAkB,IAAIR,UAA/B"}

package/dist/Icon.js

@@ -12,18 +12,19 @@
 import { forwardRef } from "react";
 import { iconDictionary } from "./iconDictionary/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const Icon = forwardRef((_ref, ref) => {
+export const Icon = forwardRef(_ref => {
   let {
+    ariaLabelledby,
+    label,
     name,
-    titleAccess,
-    ...rest
+    size
   } = _ref;
   if (!(name in iconDictionary)) return null;
   const NamedIcon = iconDictionary[name];
   return _jsx(NamedIcon, {
-    titleAccess: titleAccess,
-    ref: ref,
-    ...rest
+    "aria-labelledby": ariaLabelledby,
+    fontSize: size,
+    titleAccess: label
   });
 });
 Icon.displayName = "Icon";