@okta/odyssey-react-mui 1.21.2 → 1.22.0

package/dist/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","names":["memo","useCallback","useMemo","useRef","useImperativeHandle","Typography","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","Radio","hint","inputRef","isChecked","isDisabled","isInvalid","label","labelProp","name","testId","translate","value","onChange","onChangeProp","onBlur","onBlurProp","localInputRef","focus","current","children","component","_FormHelperText","event","checked","_FormControlLabel","className","control","_Radio","inputProps","disabled","MemoizedRadio","displayName"],"sources":["../src/Radio.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 {\n  FormControlLabel,\n  FormControlLabelProps as MuiFormControlLabelProps,\n  FormHelperText,\n  Radio as MuiRadio,\n  RadioProps as MuiRadioProps,\n} from \"@mui/material\";\n\nimport { memo, useCallback, useMemo, useRef, useImperativeHandle } from \"react\";\n\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport type { HtmlProps } from \"./HtmlProps\";\nimport { FocusHandle } from \"./inputUtils\";\nimport { Typography } from \"./Typography\";\n\nexport type RadioProps = {\n  /**\n   * The ref forwarded to the Radio\n   */\n  inputRef?: React.RefObject<FocusHandle>;\n  /**\n   * If `true`, the Radio is selected\n   */\n  isChecked?: boolean;\n  /**\n   * If `true`, the Radio has an invalid value\n   */\n  isInvalid?: boolean;\n  /**\n   * The label text for the Radio\n   */\n  label: string;\n  /**\n   * The value attribute of the Radio\n   */\n  value: string;\n  /**\n   * Callback fired when the state is changed. Provides event and checked value.\n   */\n  onChange?: MuiRadioProps[\"onChange\"];\n  /**\n   * Callback fired when the blur event happens. Provides event value.\n   */\n  onBlur?: MuiFormControlLabelProps[\"onBlur\"];\n} & Pick<FieldComponentProps, \"hint\" | \"id\" | \"isDisabled\" | \"name\"> &\n  Pick<HtmlProps, \"testId\" | \"translate\">;\n\nconst Radio = ({\n  hint,\n  inputRef,\n  isChecked,\n  isDisabled,\n  isInvalid,\n  label: labelProp,\n  name,\n  testId,\n  translate,\n  value,\n  onChange: onChangeProp,\n  onBlur: onBlurProp,\n}: RadioProps) => {\n  const localInputRef = useRef<HTMLInputElement>(null);\n  useImperativeHandle(\n    inputRef,\n    () => {\n      return {\n        focus: () => {\n          localInputRef.current?.focus();\n        },\n      };\n    },\n    [],\n  );\n\n  const label = useMemo(\n    () => (\n      <>\n        <Typography component=\"span\">{labelProp}</Typography>\n        {hint && <FormHelperText translate={translate}>{hint}</FormHelperText>}\n      </>\n    ),\n    [labelProp, hint, translate],\n  );\n\n  const onChange = useCallback<NonNullable<MuiRadioProps[\"onChange\"]>>(\n    (event, checked) => onChangeProp?.(event, checked),\n    [onChangeProp],\n  );\n\n  const onBlur = useCallback<NonNullable<MuiFormControlLabelProps[\"onBlur\"]>>(\n    (event) => {\n      onBlurProp?.(event);\n    },\n    [onBlurProp],\n  );\n\n  return (\n    <FormControlLabel\n      checked={isChecked}\n      className={isInvalid ? \"Mui-error\" : \"\"}\n      control={\n        <MuiRadio\n          inputProps={{\n            \"data-se\": testId,\n          }}\n          inputRef={localInputRef}\n          onChange={onChange}\n        />\n      }\n      disabled={isDisabled}\n      label={label}\n      name={name}\n      translate={translate}\n      value={value}\n      onBlur={onBlur}\n    />\n  );\n};\n\nconst MemoizedRadio = memo(Radio);\nMemoizedRadio.displayName = \"Radio\";\n\nexport { MemoizedRadio as Radio };\n"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAUA,SAASA,IAAI,EAAEC,WAAW,EAAEC,OAAO,EAAEC,MAAM,EAAEC,mBAAmB,QAAQ,OAAO;AAAC,SAKvEC,UAAU;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,QAAA,IAAAC,SAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAkCnB,MAAMC,KAAK,GAAGA,CAAC;EACbC,IAAI;EACJC,QAAQ;EACRC,SAAS;EACTC,UAAU;EACVC,SAAS;EACTC,KAAK,EAAEC,SAAS;EAChBC,IAAI;EACJC,MAAM;EACNC,SAAS;EACTC,KAAK;EACLC,QAAQ,EAAEC,YAAY;EACtBC,MAAM,EAAEC;AACE,CAAC,KAAK;EAChB,MAAMC,aAAa,GAAGzB,MAAM,CAAmB,IAAI,CAAC;EACpDC,mBAAmB,CACjBU,QAAQ,EACR,MAAM;IACJ,OAAO;MACLe,KAAK,EAAEA,CAAA,KAAM;QACXD,aAAa,CAACE,OAAO,EAAED,KAAK,CAAC,CAAC;MAChC;IACF,CAAC;EACH,CAAC,EACD,EACF,CAAC;EAED,MAAMX,KAAK,GAAGhB,OAAO,CACnB,MACES,KAAA,CAAAF,SAAA;IAAAsB,QAAA,GACExB,IAAA,CAACF,UAAU;MAAC2B,SAAS,EAAC,MAAM;MAAAD,QAAA,EAAEZ;IAAS,CAAa,CAAC,EACpDN,IAAI,IAAIN,IAAA,CAAA0B,eAAA;MAAgBX,SAAS,EAAEA,SAAU;MAAAS,QAAA,EAAElB;IAAI,CAAiB,CAAC;EAAA,CACtE,CACH,EACD,CAACM,SAAS,EAAEN,IAAI,EAAES,SAAS,CAC7B,CAAC;EAED,MAAME,QAAQ,GAAGvB,WAAW,CAC1B,CAACiC,KAAK,EAAEC,OAAO,KAAKV,YAAY,GAAGS,KAAK,EAAEC,OAAO,CAAC,EAClD,CAACV,YAAY,CACf,CAAC;EAED,MAAMC,MAAM,GAAGzB,WAAW,CACvBiC,KAAK,IAAK;IACTP,UAAU,GAAGO,KAAK,CAAC;EACrB,CAAC,EACD,CAACP,UAAU,CACb,CAAC;EAED,OACEpB,IAAA,CAAA6B,iBAAA;IACED,OAAO,EAAEpB,SAAU;IACnBsB,SAAS,EAAEpB,SAAS,GAAG,WAAW,GAAG,EAAG;IACxCqB,OAAO,EACL/B,IAAA,CAAAgC,MAAA;MACEC,UAAU,EAAE;QACV,SAAS,EAAEnB;MACb,CAAE;MACFP,QAAQ,EAAEc,aAAc;MACxBJ,QAAQ,EAAEA;IAAS,CACpB,CACF;IACDiB,QAAQ,EAAEzB,UAAW;IACrBE,KAAK,EAAEA,KAAM;IACbE,IAAI,EAAEA,IAAK;IACXE,SAAS,EAAEA,SAAU;IACrBC,KAAK,EAAEA,KAAM;IACbG,MAAM,EAAEA;EAAO,CAChB,CAAC;AAEN,CAAC;AAED,MAAMgB,aAAa,GAAG1C,IAAI,CAACY,KAAK,CAAC;AACjC8B,aAAa,CAACC,WAAW,GAAG,OAAO;AAEnC,SAASD,aAAa,IAAI9B,KAAK"}
+{"version":3,"file":"Radio.js","names":["memo","useCallback","useMemo","useRef","useImperativeHandle","Typography","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","Radio","hint","inputRef","isChecked","isDisabled","isInvalid","label","labelProp","name","testId","translate","value","isReadOnly","onChange","onChangeProp","onBlur","onBlurProp","onClick","localInputRef","focus","current","children","component","_FormHelperText","event","checked","preventDefault","handleClick","stopPropagation","_FormControlLabel","className","control","_Radio","inputProps","readOnly","tabIndex","undefined","disabled","sx","cursor","MemoizedRadio","displayName"],"sources":["../src/Radio.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 {\n  FormControlLabel,\n  FormControlLabelProps as MuiFormControlLabelProps,\n  FormHelperText,\n  Radio as MuiRadio,\n  RadioProps as MuiRadioProps,\n} from \"@mui/material\";\nimport { memo, useCallback, useMemo, useRef, useImperativeHandle } from \"react\";\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport type { HtmlProps } from \"./HtmlProps\";\nimport { FocusHandle } from \"./inputUtils\";\nimport { Typography } from \"./Typography\";\n\nexport type RadioProps = {\n  /**\n   * The ref forwarded to the Radio\n   */\n  inputRef?: React.RefObject<FocusHandle>;\n  /**\n   * Determines whether the Radio button is checked\n   */\n  isChecked?: boolean;\n  /**\n   * If `true`, the radio button has an invalid value\n   */\n  isInvalid?: boolean;\n  /**\n   * The label text for the Radio\n   */\n  label: string;\n  /**\n   * The value attribute of the Radio\n   */\n  value: string;\n  /**\n   * Callback fired when the blur event happens. Provides event value.\n   */\n  onChange?: MuiRadioProps[\"onChange\"];\n  onBlur?: MuiFormControlLabelProps[\"onBlur\"];\n  onClick?: React.MouseEventHandler<HTMLSpanElement>;\n} & Pick<\n  FieldComponentProps,\n  \"hint\" | \"id\" | \"isDisabled\" | \"isReadOnly\" | \"name\"\n> &\n  Pick<HtmlProps, \"testId\" | \"translate\">;\n\nconst Radio = ({\n  hint,\n  inputRef,\n  isChecked,\n  isDisabled = false,\n  isInvalid,\n  label: labelProp,\n  name,\n  testId,\n  translate,\n  value,\n  isReadOnly = false,\n  onChange: onChangeProp,\n  onBlur: onBlurProp,\n  onClick,\n}: RadioProps) => {\n  const localInputRef = useRef<HTMLInputElement>(null);\n  useImperativeHandle(\n    inputRef,\n    () => {\n      return {\n        focus: () => {\n          localInputRef.current?.focus();\n        },\n      };\n    },\n    [],\n  );\n\n  const label = useMemo(\n    () => (\n      <>\n        <Typography component=\"span\">{labelProp}</Typography>\n        {hint && <FormHelperText translate={translate}>{hint}</FormHelperText>}\n      </>\n    ),\n    [labelProp, hint, translate],\n  );\n\n  const onChange = useCallback<NonNullable<MuiRadioProps[\"onChange\"]>>(\n    (event, checked) => {\n      if (isReadOnly) {\n        event.preventDefault();\n      } else {\n        onChangeProp?.(event, checked);\n      }\n    },\n    [onChangeProp, isReadOnly],\n  );\n\n  const handleClick = useCallback<React.MouseEventHandler<HTMLSpanElement>>(\n    (event) => {\n      if (isReadOnly) {\n        event.stopPropagation();\n        event.preventDefault();\n      }\n    },\n    [isReadOnly],\n  );\n  const onBlur = useCallback<NonNullable<MuiFormControlLabelProps[\"onBlur\"]>>(\n    (event) => {\n      onBlurProp?.(event);\n    },\n    [onBlurProp],\n  );\n\n  return (\n    <FormControlLabel\n      checked={isChecked}\n      className={isInvalid ? \"Mui-error\" : \"\"}\n      control={\n        <MuiRadio\n          inputProps={{\n            \"data-se\": testId,\n            \"aria-disabled\": isDisabled || isReadOnly,\n            readOnly: isReadOnly,\n            tabIndex: isReadOnly ? 0 : undefined,\n          }}\n          inputRef={localInputRef}\n          onChange={onChange}\n          onClick={onClick || handleClick}\n          disabled={isDisabled}\n        />\n      }\n      label={label}\n      name={name}\n      translate={translate}\n      value={value}\n      onBlur={onBlur}\n      disabled={isDisabled}\n      sx={{\n        ...(isReadOnly && {\n          cursor: \"default\",\n          \"& .MuiTypography-root\": {\n            cursor: \"default\",\n          },\n        }),\n      }}\n    />\n  );\n};\n\nconst MemoizedRadio = memo(Radio);\nMemoizedRadio.displayName = \"Radio\";\n\nexport { MemoizedRadio as Radio };\n"],"mappings":"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"}

package/dist/RadioGroup.js

@@ -10,9 +10,10 @@ import _RadioGroup from "@mui/material/RadioGroup";
  *
  * See the License for the specific language governing permissions and limitations under the License.
  */
-import { memo, useCallback, useRef } from "react";
+import React, { memo, useCallback, useRef, useMemo } from "react";
 import { Field } from "./Field.js";
 import { getControlState, useInputValues } from "./inputUtils.js";
+import { Radio } from "./Radio.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const RadioGroup = ({
   ariaDescribedBy,
@@ -24,6 +25,7 @@ const RadioGroup = ({
   HintLinkComponent,
   id: idOverride,
   isDisabled,
+  isReadOnly = false,
   label,
   name: nameOverride,
   onChange: onChangeProp,
@@ -40,9 +42,18 @@ const RadioGroup = ({
     value,
     controlState: controlledStateRef.current
   });
-  const onChange = useCallback((event, value) => {
-    onChangeProp?.(event, value);
+  const onChange = useCallback((event, newValue) => {
+    onChangeProp?.(event, newValue);
   }, [onChangeProp]);
+  const memoizedChildren = useMemo(() => React.Children.map(children, child => {
+    if (React.isValidElement(child) && child.type === Radio) {
+      return React.cloneElement(child, {
+        isDisabled: isDisabled,
+        isReadOnly: isReadOnly
+      });
+    }
+    return child;
+  }), [children, isDisabled, isReadOnly]);
   const renderFieldComponent = useCallback(({
     ariaDescribedBy,
     errorMessageElementId,
@@ -58,8 +69,8 @@ const RadioGroup = ({
     name: nameOverride ?? id,
     onChange: onChange,
     translate: translate,
-    children: children
-  }), [children, inputValues, nameOverride, onChange, testId, translate]);
+    children: memoizedChildren
+  }), [inputValues, nameOverride, onChange, memoizedChildren, testId, translate]);
   return _jsx(Field, {
     ariaDescribedBy: ariaDescribedBy,
     errorMessage: errorMessage,
@@ -70,6 +81,7 @@ const RadioGroup = ({
     HintLinkComponent: HintLinkComponent,
     id: idOverride,
     isDisabled: isDisabled,
+    isReadOnly: isReadOnly,
     label: label,
     renderFieldComponent: renderFieldComponent
   });

package/dist/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","names":["memo","useCallback","useRef","Field","getControlState","useInputValues","jsx","_jsx","RadioGroup","ariaDescribedBy","children","defaultValue","errorMessage","errorMessageList","hint","HintLinkComponent","id","idOverride","isDisabled","label","name","nameOverride","onChange","onChangeProp","testId","translate","value","controlledStateRef","controlledValue","uncontrolledValue","inputValues","controlState","current","event","renderFieldComponent","errorMessageElementId","labelElementId","_RadioGroup","fieldType","hasVisibleLabel","MemoizedRadioGroup","displayName"],"sources":["../src/RadioGroup.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 {\n  RadioGroup as MuiRadioGroup,\n  type RadioGroupProps as MuiRadioGroupProps,\n} from \"@mui/material\";\nimport { memo, ReactNode, useCallback, useRef } from \"react\";\n\nimport { RadioProps } from \"./Radio\";\nimport { Field } from \"./Field\";\nimport {\n  FieldComponentProps,\n  FieldComponentRenderProps,\n} from \"./FieldComponentProps\";\nimport type { HtmlProps } from \"./HtmlProps\";\nimport { getControlState, useInputValues } from \"./inputUtils\";\n\nexport type RadioGroupProps = {\n  /**\n   * The Radio components within the group. Must include two or more.\n   */\n  children: ReactNode;\n  /**\n   * The text value of the Radio that should be selected by default\n   */\n  defaultValue?: string;\n  /**\n   * The text label for the RadioGroup\n   */\n  label: string;\n  /**\n   * Listen for changes in the browser that change `value`\n   */\n  onChange?: MuiRadioGroupProps[\"onChange\"];\n  /**\n   * The `value` on the selected Radio\n   */\n  value?: RadioProps[\"value\"];\n} & Pick<\n  FieldComponentProps,\n  | \"errorMessage\"\n  | \"errorMessageList\"\n  | \"hint\"\n  | \"HintLinkComponent\"\n  | \"id\"\n  | \"isDisabled\"\n  | \"name\"\n> &\n  Pick<HtmlProps, \"ariaDescribedBy\" | \"testId\" | \"translate\">;\n\ntype FieldRenderProps = Partial<\n  Pick<FieldComponentRenderProps, \"ariaDescribedBy\" | \"errorMessageElementId\">\n> &\n  Pick<FieldComponentRenderProps, \"id\" | \"labelElementId\">;\n\nconst RadioGroup = ({\n  ariaDescribedBy,\n  children,\n  defaultValue,\n  errorMessage,\n  errorMessageList,\n  hint,\n  HintLinkComponent,\n  id: idOverride,\n  isDisabled,\n  label,\n  name: nameOverride,\n  onChange: onChangeProp,\n  testId,\n  translate,\n  value,\n}: RadioGroupProps) => {\n  const controlledStateRef = useRef(\n    getControlState({\n      controlledValue: value,\n      uncontrolledValue: defaultValue,\n    }),\n  );\n  const inputValues = useInputValues({\n    defaultValue,\n    value,\n    controlState: controlledStateRef.current,\n  });\n\n  const onChange = useCallback<NonNullable<MuiRadioGroupProps[\"onChange\"]>>(\n    (event, value) => {\n      onChangeProp?.(event, value);\n    },\n    [onChangeProp],\n  );\n  const renderFieldComponent = useCallback(\n    ({\n      ariaDescribedBy,\n      errorMessageElementId,\n      id,\n      labelElementId,\n    }: FieldRenderProps) => (\n      <MuiRadioGroup\n        {...inputValues}\n        aria-describedby={ariaDescribedBy}\n        aria-errormessage={errorMessageElementId}\n        aria-labelledby={labelElementId}\n        data-se={testId}\n        id={id}\n        name={nameOverride ?? id}\n        onChange={onChange}\n        translate={translate}\n      >\n        {children}\n      </MuiRadioGroup>\n    ),\n    [children, inputValues, nameOverride, onChange, testId, translate],\n  );\n\n  return (\n    <Field\n      ariaDescribedBy={ariaDescribedBy}\n      errorMessage={errorMessage}\n      errorMessageList={errorMessageList}\n      fieldType=\"group\"\n      hasVisibleLabel={false}\n      hint={hint}\n      HintLinkComponent={HintLinkComponent}\n      id={idOverride}\n      isDisabled={isDisabled}\n      label={label}\n      renderFieldComponent={renderFieldComponent}\n    />\n  );\n};\n\nconst MemoizedRadioGroup = memo(RadioGroup);\nMemoizedRadioGroup.displayName = \"RadioGroup\";\n\nexport { MemoizedRadioGroup as RadioGroup };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAMA,SAASA,IAAI,EAAaC,WAAW,EAAEC,MAAM,QAAQ,OAAO;AAAC,SAGpDC,KAAK;AAAA,SAMLC,eAAe,EAAEC,cAAc;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAwCxC,MAAMC,UAAU,GAAGA,CAAC;EAClBC,eAAe;EACfC,QAAQ;EACRC,YAAY;EACZC,YAAY;EACZC,gBAAgB;EAChBC,IAAI;EACJC,iBAAiB;EACjBC,EAAE,EAAEC,UAAU;EACdC,UAAU;EACVC,KAAK;EACLC,IAAI,EAAEC,YAAY;EAClBC,QAAQ,EAAEC,YAAY;EACtBC,MAAM;EACNC,SAAS;EACTC;AACe,CAAC,KAAK;EACrB,MAAMC,kBAAkB,GAAGzB,MAAM,CAC/BE,eAAe,CAAC;IACdwB,eAAe,EAAEF,KAAK;IACtBG,iBAAiB,EAAElB;EACrB,CAAC,CACH,CAAC;EACD,MAAMmB,WAAW,GAAGzB,cAAc,CAAC;IACjCM,YAAY;IACZe,KAAK;IACLK,YAAY,EAAEJ,kBAAkB,CAACK;EACnC,CAAC,CAAC;EAEF,MAAMV,QAAQ,GAAGrB,WAAW,CAC1B,CAACgC,KAAK,EAAEP,KAAK,KAAK;IAChBH,YAAY,GAAGU,KAAK,EAAEP,KAAK,CAAC;EAC9B,CAAC,EACD,CAACH,YAAY,CACf,CAAC;EACD,MAAMW,oBAAoB,GAAGjC,WAAW,CACtC,CAAC;IACCQ,eAAe;IACf0B,qBAAqB;IACrBnB,EAAE;IACFoB;EACgB,CAAC,KACjB7B,IAAA,CAAA8B,WAAA;IAAA,GACMP,WAAW;IACf,oBAAkBrB,eAAgB;IAClC,qBAAmB0B,qBAAsB;IACzC,mBAAiBC,cAAe;IAChC,WAASZ,MAAO;IAChBR,EAAE,EAAEA,EAAG;IACPI,IAAI,EAAEC,YAAY,IAAIL,EAAG;IACzBM,QAAQ,EAAEA,QAAS;IACnBG,SAAS,EAAEA,SAAU;IAAAf,QAAA,EAEpBA;EAAQ,CACI,CAChB,EACD,CAACA,QAAQ,EAAEoB,WAAW,EAAET,YAAY,EAAEC,QAAQ,EAAEE,MAAM,EAAEC,SAAS,CACnE,CAAC;EAED,OACElB,IAAA,CAACJ,KAAK;IACJM,eAAe,EAAEA,eAAgB;IACjCG,YAAY,EAAEA,YAAa;IAC3BC,gBAAgB,EAAEA,gBAAiB;IACnCyB,SAAS,EAAC,OAAO;IACjBC,eAAe,EAAE,KAAM;IACvBzB,IAAI,EAAEA,IAAK;IACXC,iBAAiB,EAAEA,iBAAkB;IACrCC,EAAE,EAAEC,UAAW;IACfC,UAAU,EAAEA,UAAW;IACvBC,KAAK,EAAEA,KAAM;IACbe,oBAAoB,EAAEA;EAAqB,CAC5C,CAAC;AAEN,CAAC;AAED,MAAMM,kBAAkB,GAAGxC,IAAI,CAACQ,UAAU,CAAC;AAC3CgC,kBAAkB,CAACC,WAAW,GAAG,YAAY;AAE7C,SAASD,kBAAkB,IAAIhC,UAAU"}
+{"version":3,"file":"RadioGroup.js","names":["React","memo","useCallback","useRef","useMemo","Field","getControlState","useInputValues","Radio","jsx","_jsx","RadioGroup","ariaDescribedBy","children","defaultValue","errorMessage","errorMessageList","hint","HintLinkComponent","id","idOverride","isDisabled","isReadOnly","label","name","nameOverride","onChange","onChangeProp","testId","translate","value","controlledStateRef","controlledValue","uncontrolledValue","inputValues","controlState","current","event","newValue","memoizedChildren","Children","map","child","isValidElement","type","cloneElement","renderFieldComponent","errorMessageElementId","labelElementId","_RadioGroup","fieldType","hasVisibleLabel","MemoizedRadioGroup","displayName"],"sources":["../src/RadioGroup.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 {\n  RadioGroup as MuiRadioGroup,\n  type RadioGroupProps as MuiRadioGroupProps,\n} from \"@mui/material\";\nimport React, { memo, ReactNode, useCallback, useRef, useMemo } from \"react\";\n\nimport { Field } from \"./Field\";\nimport {\n  FieldComponentProps,\n  FieldComponentRenderProps,\n} from \"./FieldComponentProps\";\nimport type { HtmlProps } from \"./HtmlProps\";\nimport { getControlState, useInputValues } from \"./inputUtils\";\nimport { Radio, RadioProps } from \"./Radio\";\n\nexport type RadioGroupProps = {\n  /**\n   * The Radio components within the group. Must include two or more.\n   */\n  children: ReactNode;\n  /**\n   * The text value of the Radio that should be selected by default\n   */\n  defaultValue?: string;\n  /**\n   * The text label for the RadioGroup\n   */\n  label: string;\n  /**\n   * Listen for changes in the browser that change `value`\n   */\n  onChange?: MuiRadioGroupProps[\"onChange\"];\n  /**\n   * The `value` on the selected Radio\n   */\n  value?: string;\n} & Pick<\n  FieldComponentProps,\n  | \"errorMessage\"\n  | \"errorMessageList\"\n  | \"hint\"\n  | \"HintLinkComponent\"\n  | \"id\"\n  | \"isDisabled\"\n  | \"isReadOnly\"\n  | \"name\"\n> &\n  Pick<HtmlProps, \"ariaDescribedBy\" | \"testId\" | \"translate\">;\n\ntype FieldRenderProps = Partial<\n  Pick<FieldComponentRenderProps, \"ariaDescribedBy\" | \"errorMessageElementId\">\n> &\n  Pick<FieldComponentRenderProps, \"id\" | \"labelElementId\">;\n\nconst RadioGroup = ({\n  ariaDescribedBy,\n  children,\n  defaultValue,\n  errorMessage,\n  errorMessageList,\n  hint,\n  HintLinkComponent,\n  id: idOverride,\n  isDisabled,\n  isReadOnly = false,\n  label,\n  name: nameOverride,\n  onChange: onChangeProp,\n  testId,\n  translate,\n  value,\n}: RadioGroupProps) => {\n  const controlledStateRef = useRef(\n    getControlState({\n      controlledValue: value,\n      uncontrolledValue: defaultValue,\n    }),\n  );\n\n  const inputValues = useInputValues({\n    defaultValue,\n    value,\n    controlState: controlledStateRef.current,\n  });\n\n  const onChange = useCallback<NonNullable<MuiRadioGroupProps[\"onChange\"]>>(\n    (event, newValue) => {\n      onChangeProp?.(event, newValue);\n    },\n    [onChangeProp],\n  );\n\n  const memoizedChildren = useMemo(\n    () =>\n      React.Children.map(children, (child) => {\n        if (React.isValidElement<RadioProps>(child) && child.type === Radio) {\n          return React.cloneElement(child, {\n            isDisabled: isDisabled,\n            isReadOnly: isReadOnly,\n          });\n        }\n        return child;\n      }),\n    [children, isDisabled, isReadOnly],\n  );\n\n  const renderFieldComponent = useCallback(\n    ({\n      ariaDescribedBy,\n      errorMessageElementId,\n      id,\n      labelElementId,\n    }: FieldRenderProps) => (\n      <MuiRadioGroup\n        {...inputValues}\n        aria-describedby={ariaDescribedBy}\n        aria-errormessage={errorMessageElementId}\n        aria-labelledby={labelElementId}\n        data-se={testId}\n        id={id}\n        name={nameOverride ?? id}\n        onChange={onChange}\n        translate={translate}\n      >\n        {memoizedChildren}\n      </MuiRadioGroup>\n    ),\n    [inputValues, nameOverride, onChange, memoizedChildren, testId, translate],\n  );\n\n  return (\n    <Field\n      ariaDescribedBy={ariaDescribedBy}\n      errorMessage={errorMessage}\n      errorMessageList={errorMessageList}\n      fieldType=\"group\"\n      hasVisibleLabel={false}\n      hint={hint}\n      HintLinkComponent={HintLinkComponent}\n      id={idOverride}\n      isDisabled={isDisabled}\n      isReadOnly={isReadOnly}\n      label={label}\n      renderFieldComponent={renderFieldComponent}\n    />\n  );\n};\n\nconst MemoizedRadioGroup = memo(RadioGroup);\nMemoizedRadioGroup.displayName = \"RadioGroup\";\n\nexport { MemoizedRadioGroup as RadioGroup };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAMA,OAAOA,KAAK,IAAIC,IAAI,EAAaC,WAAW,EAAEC,MAAM,EAAEC,OAAO,QAAQ,OAAO;AAAC,SAEpEC,KAAK;AAAA,SAMLC,eAAe,EAAEC,cAAc;AAAA,SAC/BC,KAAK;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAyCd,MAAMC,UAAU,GAAGA,CAAC;EAClBC,eAAe;EACfC,QAAQ;EACRC,YAAY;EACZC,YAAY;EACZC,gBAAgB;EAChBC,IAAI;EACJC,iBAAiB;EACjBC,EAAE,EAAEC,UAAU;EACdC,UAAU;EACVC,UAAU,GAAG,KAAK;EAClBC,KAAK;EACLC,IAAI,EAAEC,YAAY;EAClBC,QAAQ,EAAEC,YAAY;EACtBC,MAAM;EACNC,SAAS;EACTC;AACe,CAAC,KAAK;EACrB,MAAMC,kBAAkB,GAAG5B,MAAM,CAC/BG,eAAe,CAAC;IACd0B,eAAe,EAAEF,KAAK;IACtBG,iBAAiB,EAAEnB;EACrB,CAAC,CACH,CAAC;EAED,MAAMoB,WAAW,GAAG3B,cAAc,CAAC;IACjCO,YAAY;IACZgB,KAAK;IACLK,YAAY,EAAEJ,kBAAkB,CAACK;EACnC,CAAC,CAAC;EAEF,MAAMV,QAAQ,GAAGxB,WAAW,CAC1B,CAACmC,KAAK,EAAEC,QAAQ,KAAK;IACnBX,YAAY,GAAGU,KAAK,EAAEC,QAAQ,CAAC;EACjC,CAAC,EACD,CAACX,YAAY,CACf,CAAC;EAED,MAAMY,gBAAgB,GAAGnC,OAAO,CAC9B,MACEJ,KAAK,CAACwC,QAAQ,CAACC,GAAG,CAAC5B,QAAQ,EAAG6B,KAAK,IAAK;IACtC,IAAI1C,KAAK,CAAC2C,cAAc,CAAaD,KAAK,CAAC,IAAIA,KAAK,CAACE,IAAI,KAAKpC,KAAK,EAAE;MACnE,OAAOR,KAAK,CAAC6C,YAAY,CAACH,KAAK,EAAE;QAC/BrB,UAAU,EAAEA,UAAU;QACtBC,UAAU,EAAEA;MACd,CAAC,CAAC;IACJ;IACA,OAAOoB,KAAK;EACd,CAAC,CAAC,EACJ,CAAC7B,QAAQ,EAAEQ,UAAU,EAAEC,UAAU,CACnC,CAAC;EAED,MAAMwB,oBAAoB,GAAG5C,WAAW,CACtC,CAAC;IACCU,eAAe;IACfmC,qBAAqB;IACrB5B,EAAE;IACF6B;EACgB,CAAC,KACjBtC,IAAA,CAAAuC,WAAA;IAAA,GACMf,WAAW;IACf,oBAAkBtB,eAAgB;IAClC,qBAAmBmC,qBAAsB;IACzC,mBAAiBC,cAAe;IAChC,WAASpB,MAAO;IAChBT,EAAE,EAAEA,EAAG;IACPK,IAAI,EAAEC,YAAY,IAAIN,EAAG;IACzBO,QAAQ,EAAEA,QAAS;IACnBG,SAAS,EAAEA,SAAU;IAAAhB,QAAA,EAEpB0B;EAAgB,CACJ,CAChB,EACD,CAACL,WAAW,EAAET,YAAY,EAAEC,QAAQ,EAAEa,gBAAgB,EAAEX,MAAM,EAAEC,SAAS,CAC3E,CAAC;EAED,OACEnB,IAAA,CAACL,KAAK;IACJO,eAAe,EAAEA,eAAgB;IACjCG,YAAY,EAAEA,YAAa;IAC3BC,gBAAgB,EAAEA,gBAAiB;IACnCkC,SAAS,EAAC,OAAO;IACjBC,eAAe,EAAE,KAAM;IACvBlC,IAAI,EAAEA,IAAK;IACXC,iBAAiB,EAAEA,iBAAkB;IACrCC,EAAE,EAAEC,UAAW;IACfC,UAAU,EAAEA,UAAW;IACvBC,UAAU,EAAEA,UAAW;IACvBC,KAAK,EAAEA,KAAM;IACbuB,oBAAoB,EAAEA;EAAqB,CAC5C,CAAC;AAEN,CAAC;AAED,MAAMM,kBAAkB,GAAGnD,IAAI,CAACU,UAAU,CAAC;AAC3CyC,kBAAkB,CAACC,WAAW,GAAG,YAAY;AAE7C,SAASD,kBAAkB,IAAIzC,UAAU"}

package/dist/Select.js

@@ -69,7 +69,7 @@ const NonInteractiveIcon = styled(CloseCircleFilledIcon, {
   margin-block-end: -1px;
 `;
 const ChipsInnerContainer = styled(_Box, {
-  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isInteractive"
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isInteractive" && prop !== "isReadOnly"
 })`
   display: flex;
   flex-wrap: wrap;
@@ -78,8 +78,9 @@ const ChipsInnerContainer = styled(_Box, {
 }) => odysseyDesignTokens.Spacing1};
   pointer-events: none;
   opacity: ${({
-  isInteractive
-}) => isInteractive ? 1 : 0};
+  isInteractive,
+  isReadOnly
+}) => isInteractive || isReadOnly ? 1 : 0};
   min-height: ${({
   odysseyDesignTokens
 }) => odysseyDesignTokens.Spacing6};
@@ -101,6 +102,7 @@ const Select = ({
   isFullWidth = false,
   isMultiSelect,
   isOptional = false,
+  isReadOnly = false,
   label,
   name: nameOverride,
   onBlur,
@@ -111,6 +113,7 @@ const Select = ({
   translate,
   value
 }) => {
+  const selectRef = useRef(null);
   const hasMultipleChoices = useMemo(() => hasMultipleChoicesProp === undefined ? isMultiSelect : hasMultipleChoicesProp, [hasMultipleChoicesProp, isMultiSelect]);
   const controlledStateRef = useRef(getControlState({
     controlledValue: value,
@@ -137,31 +140,39 @@ const Select = ({
     controlState: controlledStateRef.current
   });
   const onChange = useCallback((event, child) => {
-    const {
-      target: {
-        value
+    if (isReadOnly) {
+      event.preventDefault();
+    } else {
+      const {
+        target: {
+          value
+        }
+      } = event;
+      if (controlledStateRef.current !== CONTROLLED) {
+        setInternalSelectedValues(typeof value === "string" && hasMultipleChoices ? value.split(",") : value);
       }
-    } = event;
-    if (controlledStateRef.current !== CONTROLLED) {
-      setInternalSelectedValues(typeof value === "string" && hasMultipleChoices ? value.split(",") : value);
+      onChangeProp?.(event, child);
     }
-    onChangeProp?.(event, child);
-  }, [hasMultipleChoices, onChangeProp]);
-  const normalizedOptions = useMemo(() => options.map(option => {
-    if (typeof option === "object") {
-      const value = option?.value === "" ? option.value : option.value || option.text;
+  }, [hasMultipleChoices, onChangeProp, isReadOnly]);
+  const [normalizedOptions, normalizedOptionsMap] = useMemo(() => {
+    const normalizedOptions = options.map(option => {
+      if (typeof option === "object") {
+        const value = option?.value === "" ? option.value : option.value || option.text;
+        return {
+          text: option.text,
+          value,
+          type: option.type === "heading" ? "heading" : "option"
+        };
+      }
       return {
-        text: option.text,
-        value,
-        type: option.type === "heading" ? "heading" : "option"
+        text: option,
+        value: option,
+        type: "option"
       };
-    }
-    return {
-      text: option,
-      value: option,
-      type: "option"
-    };
-  }), [options]);
+    });
+    const normalizedOptionsMap = new Map(normalizedOptions.map(option => [option.value, option]));
+    return [normalizedOptions, normalizedOptionsMap];
+  }, [options]);
   const removeSelectedValue = useCallback(selectedValue => {
     if (Array.isArray(internalSelectedValues)) {
       const newValue = internalSelectedValues.filter(internalSelectedValue => internalSelectedValue !== selectedValue);
@@ -174,16 +185,18 @@ const Select = ({
     }
   }, [internalSelectedValues, onChange]);
   const Chips = useCallback(({
-    isInteractive
+    isInteractive,
+    isReadOnly
   }) => {
     const stopPropagation = event => event.stopPropagation();
     const hasNonInteractiveIcon = !isInteractive && controlledStateRef.current === CONTROLLED && hasMultipleChoices;
     return Array.isArray(internalSelectedValues) && _jsx(ChipsInnerContainer, {
       isInteractive: isInteractive,
+      isReadOnly: isReadOnly,
       odysseyDesignTokens: odysseyDesignTokens,
       children: internalSelectedValues.map(item => item?.length > 0 && _jsx(_Chip, {
         label: _jsxs(_Fragment, {
-          children: [item, hasNonInteractiveIcon && _jsx(NonInteractiveIcon, {
+          children: [normalizedOptionsMap.get(item)?.text, hasNonInteractiveIcon && _jsx(NonInteractiveIcon, {
             odysseyDesignTokens: odysseyDesignTokens
           })]
         }),
@@ -197,7 +210,7 @@ const Select = ({
         })
       }, item))
     });
-  }, [controlledStateRef, hasMultipleChoices, internalSelectedValues, odysseyDesignTokens, removeSelectedValue]);
+  }, [controlledStateRef, hasMultipleChoices, internalSelectedValues, odysseyDesignTokens, removeSelectedValue, normalizedOptionsMap]);
   const renderedOptions = useMemo(() => normalizedOptions.map((option, index) => {
     if (option.type === "heading") {
       return _jsxs(_ListSubheader, {
@@ -206,6 +219,7 @@ const Select = ({
     }
     const isSelected = hasMultipleChoices ? internalSelectedValues?.includes(option.value) : internalSelectedValues === option.value;
     return _jsxs(_MenuItem, {
+      "data-empty": !option.text,
       value: option.value,
       selected: isSelected,
       children: [hasMultipleChoices && _jsx(_Checkbox, {
@@ -231,9 +245,16 @@ const Select = ({
       displayEmpty: true,
       id: id,
       inputProps: {
-        "data-se": testId
+        "data-se": testId,
+        "aria-disabled": isDisabled || isReadOnly,
+        readOnly: isReadOnly
+      },
+      inputRef: el => {
+        if (localInputRef.current !== el) {
+          localInputRef.current = el;
+        }
+        selectRef.current = el;
       },
-      inputRef: localInputRef,
       labelId: labelElementId,
       multiple: hasMultipleChoices,
       name: nameOverride ?? id,
@@ -247,11 +268,12 @@ const Select = ({
       children: _jsx(ChipsPositioningContainer, {
         odysseyDesignTokens: odysseyDesignTokens,
         children: _jsx(Chips, {
-          isInteractive: true
+          isInteractive: !isReadOnly,
+          isReadOnly: isReadOnly
         })
       })
     })]
-  }), [Chips, inputValues, hasMultipleChoices, nameOverride, odysseyDesignTokens, onBlur, onChange, onFocus, renderedOptions, renderValue, testId, translate]);
+  }), [Chips, inputValues, hasMultipleChoices, isDisabled, isReadOnly, nameOverride, odysseyDesignTokens, onBlur, onChange, onFocus, renderedOptions, renderValue, testId, translate]);
   return _jsx(Field, {
     ariaDescribedBy: ariaDescribedBy,
     errorMessage: errorMessage,

package/dist/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":["memo","useCallback","useEffect","useMemo","useRef","useState","useImperativeHandle","Field","CheckIcon","CloseCircleFilledIcon","ComponentControlledState","useInputValues","getControlState","normalizedKey","styled","useOdysseyDesignTokens","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","SelectContainer","div","ChipsPositioningContainer","shouldForwardProp","prop","odysseyDesignTokens","Spacing0","Spacing5","Spacing1","BorderWidthMain","NonInteractiveIcon","Spacing2","ChipsInnerContainer","_Box","isInteractive","Spacing6","CONTROLLED","Select","ariaDescribedBy","defaultValue","errorMessage","errorMessageList","hasMultipleChoices","hasMultipleChoicesProp","hint","HintLinkComponent","id","idOverride","inputRef","isDisabled","isFullWidth","isMultiSelect","isOptional","label","name","nameOverride","onBlur","onChange","onChangeProp","onFocus","options","testId","translate","value","undefined","controlledStateRef","controlledValue","uncontrolledValue","internalSelectedValues","setInternalSelectedValues","current","localInputRef","focus","inputValues","controlState","event","child","target","split","normalizedOptions","map","option","text","type","removeSelectedValue","selectedValue","Array","isArray","newValue","filter","internalSelectedValue","syntheticEvent","Chips","stopPropagation","hasNonInteractiveIcon","children","item","length","_Chip","tabIndex","onDelete","deleteIcon","sx","pointerEvents","onMouseDown","renderedOptions","index","_ListSubheader","isSelected","includes","_MenuItem","selected","_Checkbox","checked","_ListItemSecondaryAction","toString","renderValue","renderFieldComponent","errorMessageElementId","labelElementId","_Select","displayEmpty","inputProps","labelId","multiple","fieldType","hasVisibleLabel","MemoizedSelect","displayName"],"sources":["../src/Select.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 {\n  memo,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  useImperativeHandle,\n  MouseEvent,\n} from \"react\";\nimport {\n  Box as MuiBox,\n  Checkbox as MuiCheckbox,\n  Chip as MuiChip,\n  ListItemSecondaryAction,\n  ListSubheader,\n  MenuItem as MuiMenuItem,\n  Select as MuiSelect,\n  SelectChangeEvent,\n} from \"@mui/material\";\nimport { SelectProps as MuiSelectProps } from \"@mui/material\";\n\nimport { Field } from \"./Field\";\nimport {\n  FieldComponentProps,\n  FieldComponentRenderProps,\n} from \"./FieldComponentProps\";\nimport { CheckIcon, CloseCircleFilledIcon } from \"./icons.generated\";\nimport type { HtmlProps } from \"./HtmlProps\";\nimport {\n  ComponentControlledState,\n  FocusHandle,\n  useInputValues,\n  getControlState,\n} from \"./inputUtils\";\nimport { normalizedKey } from \"./useNormalizedKey\";\nimport styled from \"@emotion/styled\";\n\nimport {\n  useOdysseyDesignTokens,\n  DesignTokens,\n} from \"./OdysseyDesignTokensContext\";\n\nexport type SelectOption = {\n  text: string;\n  type?: \"heading\" | \"option\";\n  value?: string;\n};\n\nconst SelectContainer = styled.div`\n  position: relative;\n  width: 100%;\n  display: flex;\n`;\n\nconst ChipsPositioningContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>`\n  display: flex;\n  align-items: center;\n  position: absolute;\n  top: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing0};\n  right: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing5};\n  bottom: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing0};\n  left: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing1};\n  margin-inline-start: ${({ odysseyDesignTokens }) =>\n    odysseyDesignTokens.BorderWidthMain};\n  opacity: 1;\n  pointer-events: none;\n`;\n\nconst NonInteractiveIcon = styled(CloseCircleFilledIcon, {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>`\n  font-size: 1em;\n  margin-inline-start: ${({ odysseyDesignTokens }) =>\n    odysseyDesignTokens.Spacing2};\n  margin-inline-end: -${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing1};\n  margin-block-end: -1px;\n`;\n\nconst ChipsInnerContainer = styled(MuiBox, {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"isInteractive\",\n})<{\n  isInteractive?: boolean;\n  odysseyDesignTokens: DesignTokens;\n}>`\n  display: flex;\n  flex-wrap: wrap;\n  gap: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing1};\n  pointer-events: none;\n  opacity: ${({ isInteractive }) => (isInteractive ? 1 : 0)};\n  min-height: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing6};\n`;\n\nexport type SelectValueType<HasMultipleChoices> =\n  HasMultipleChoices extends true ? string[] : string;\n\nexport type SelectProps<\n  Value extends SelectValueType<HasMultipleChoices>,\n  HasMultipleChoices extends boolean,\n> = {\n  /**\n   * The default value. Use when the component is not controlled.\n   */\n  defaultValue?: MuiSelectProps<Value>[\"defaultValue\"];\n  /**\n   * If `true`, the Select allows multiple selections\n   */\n  hasMultipleChoices?: HasMultipleChoices;\n  /**\n   * The ref forwarded to the Select\n   */\n  inputRef?: React.RefObject<FocusHandle>;\n  /**\n   * @deprecated Use `hasMultipleChoices` instead.\n   */\n  /** **Deprecated:** use `hasMultipleChoices` */\n  isMultiSelect?: HasMultipleChoices;\n  /**\n   * The label text for the Select\n   */\n  label: string;\n  /**\n   * Callback fired when the Select loses focus\n   */\n  onBlur?: MuiSelectProps<Value>[\"onBlur\"];\n  /**\n   * Callback fired when the value of the Select changes\n   */\n  onChange?: MuiSelectProps<Value>[\"onChange\"];\n  /**\n   * Callback fired when the Select gains focus\n   */\n  onFocus?: MuiSelectProps<Value>[\"onFocus\"];\n  /**\n   * The options for the Select\n   */\n  options: (string | SelectOption)[];\n  /**\n   * The value or values selected in the Select\n   */\n  value?: Value;\n} & Pick<\n  FieldComponentProps,\n  | \"errorMessage\"\n  | \"errorMessageList\"\n  | \"hint\"\n  | \"HintLinkComponent\"\n  | \"id\"\n  | \"isDisabled\"\n  | \"isFullWidth\"\n  | \"isOptional\"\n  | \"name\"\n> &\n  Pick<HtmlProps, \"ariaDescribedBy\" | \"testId\" | \"translate\">;\n\ntype SelectRenderProps = Partial<\n  Pick<FieldComponentRenderProps, \"ariaDescribedBy\" | \"errorMessageElementId\">\n> &\n  Pick<FieldComponentRenderProps, \"id\" | \"labelElementId\">;\n\n/**\n * Options in Odyssey <Select> are passed as an array, which can contain any combination\n * of the following:\n *   - string —                            A simple string. The string will be both the text and the value of the resulting option.\n *                                         <option value=\"string\">string</option>\n *\n *   - { text: string } —                  Same as above, but the string is contained within an object.\n *                                         <option value=\"text\">text</option>\n *\n *   - { text: string, value: string } —   The option text will be text, and the option value will be value.\n *                                         <option value=\"value\">text</option>\n *\n *   - { text: string, type: \"heading\" } — Used to display a group heading with the text\n */\n\nconst { CONTROLLED } = ComponentControlledState;\nconst Select = <\n  Value extends SelectValueType<HasMultipleChoices>,\n  HasMultipleChoices extends boolean,\n>({\n  ariaDescribedBy,\n  defaultValue,\n  errorMessage,\n  errorMessageList,\n  hasMultipleChoices: hasMultipleChoicesProp,\n  hint,\n  HintLinkComponent,\n  id: idOverride,\n  inputRef,\n  isDisabled = false,\n  isFullWidth = false,\n  isMultiSelect,\n  isOptional = false,\n  label,\n  name: nameOverride,\n  onBlur,\n  onChange: onChangeProp,\n  onFocus,\n  options,\n  testId,\n  translate,\n  value,\n}: SelectProps<Value, HasMultipleChoices>) => {\n  const hasMultipleChoices = useMemo(\n    () =>\n      hasMultipleChoicesProp === undefined\n        ? isMultiSelect\n        : hasMultipleChoicesProp,\n    [hasMultipleChoicesProp, isMultiSelect],\n  );\n  const controlledStateRef = useRef(\n    getControlState({\n      controlledValue: value,\n      uncontrolledValue: defaultValue,\n    }),\n  );\n  const [internalSelectedValues, setInternalSelectedValues] = useState(\n    controlledStateRef.current === CONTROLLED ? value : defaultValue,\n  );\n\n  const localInputRef = useRef<HTMLSelectElement>(null);\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  useImperativeHandle(\n    inputRef,\n    () => {\n      return {\n        focus: () => {\n          localInputRef.current?.focus();\n        },\n      };\n    },\n    [],\n  );\n\n  useEffect(() => {\n    if (controlledStateRef.current === CONTROLLED) {\n      setInternalSelectedValues(value);\n    }\n  }, [value]);\n\n  const inputValues = useInputValues({\n    defaultValue,\n    value,\n    controlState: controlledStateRef.current,\n  });\n\n  const onChange = useCallback<NonNullable<MuiSelectProps<Value>[\"onChange\"]>>(\n    (event, child) => {\n      const {\n        target: { value },\n      } = event;\n      if (controlledStateRef.current !== CONTROLLED) {\n        setInternalSelectedValues(\n          (typeof value === \"string\" && hasMultipleChoices\n            ? value.split(\",\")\n            : value) as Value,\n        );\n      }\n      onChangeProp?.(event, child);\n    },\n    [hasMultipleChoices, onChangeProp],\n  );\n\n  // Normalize the options array to accommodate the various\n  // data types that might be passed\n  const normalizedOptions = useMemo(\n    () =>\n      options.map((option) => {\n        if (typeof option === \"object\") {\n          /**\n           * If the value of `option?.value is an empty string, we need to make sure that we\n           * set an empty string to `value` in the normalized option so that the select component\n           * can potentially set it as the selected one in the text input\n           */\n          const value =\n            option?.value === \"\" ? option.value : option.value || option.text;\n          return {\n            text: option.text,\n            value,\n            type: option.type === \"heading\" ? \"heading\" : \"option\",\n          };\n        }\n        return { text: option, value: option, type: \"option\" };\n      }),\n    [options],\n  );\n\n  const removeSelectedValue = useCallback(\n    (selectedValue: string) => {\n      if (Array.isArray(internalSelectedValues)) {\n        const newValue = internalSelectedValues.filter(\n          (internalSelectedValue) => internalSelectedValue !== selectedValue,\n        );\n\n        const syntheticEvent = {\n          target: { value: newValue },\n        } as SelectChangeEvent<Value>;\n\n        onChange(syntheticEvent, null);\n      }\n    },\n    [internalSelectedValues, onChange],\n  );\n\n  const Chips = useCallback(\n    ({ isInteractive }: { isInteractive: boolean }) => {\n      const stopPropagation = (event: MouseEvent<SVGSVGElement>) =>\n        event.stopPropagation();\n\n      const hasNonInteractiveIcon =\n        !isInteractive &&\n        controlledStateRef.current === CONTROLLED &&\n        hasMultipleChoices;\n\n      return (\n        Array.isArray(internalSelectedValues) && (\n          <ChipsInnerContainer\n            isInteractive={isInteractive}\n            odysseyDesignTokens={odysseyDesignTokens}\n          >\n            {internalSelectedValues.map(\n              (item) =>\n                item?.length > 0 && (\n                  <MuiChip\n                    key={item}\n                    label={\n                      <>\n                        {item}\n                        {hasNonInteractiveIcon && (\n                          <NonInteractiveIcon\n                            odysseyDesignTokens={odysseyDesignTokens}\n                          />\n                        )}\n                      </>\n                    }\n                    tabIndex={-1}\n                    onDelete={\n                      isInteractive && controlledStateRef.current === CONTROLLED\n                        ? () => removeSelectedValue(item)\n                        : undefined\n                    }\n                    deleteIcon={\n                      <CloseCircleFilledIcon\n                        sx={{ pointerEvents: \"auto\" }}\n                        // We need to stop event propagation on mouse down to prevent the deletion\n                        // from being blocked by the Select list opening, and also ensure that\n                        // the pointerEvent is registered even when the parent's are not\n                        onMouseDown={stopPropagation}\n                      />\n                    }\n                  />\n                ),\n            )}\n          </ChipsInnerContainer>\n        )\n      );\n    },\n    [\n      controlledStateRef,\n      hasMultipleChoices,\n      internalSelectedValues,\n      odysseyDesignTokens,\n      removeSelectedValue,\n    ],\n  );\n\n  // Convert the options into the ReactNode children\n  // that will populate the <Select>\n  const renderedOptions = useMemo(\n    () =>\n      normalizedOptions.map((option, index) => {\n        if (option.type === \"heading\") {\n          return (\n            <ListSubheader key={option.text}> {option.text} </ListSubheader>\n          );\n        }\n\n        const isSelected = hasMultipleChoices\n          ? internalSelectedValues?.includes(option.value)\n          : internalSelectedValues === option.value;\n\n        return (\n          <MuiMenuItem\n            key={normalizedKey(option.text, index.toString())}\n            value={option.value}\n            selected={isSelected}\n          >\n            {hasMultipleChoices && <MuiCheckbox checked={isSelected} />}\n            {option.text}\n            {!hasMultipleChoices && internalSelectedValues === option.value && (\n              <ListItemSecondaryAction>\n                <CheckIcon />\n              </ListItemSecondaryAction>\n            )}\n          </MuiMenuItem>\n        );\n      }),\n    [hasMultipleChoices, normalizedOptions, internalSelectedValues],\n  );\n  const renderValue = useCallback(\n    (value: Value) => Array.isArray(value) && <Chips isInteractive={false} />,\n    [Chips],\n  );\n\n  const renderFieldComponent = useCallback(\n    ({\n      ariaDescribedBy,\n      errorMessageElementId,\n      id,\n      labelElementId,\n    }: SelectRenderProps) => (\n      <SelectContainer>\n        <MuiSelect\n          {...inputValues}\n          aria-describedby={ariaDescribedBy}\n          aria-errormessage={errorMessageElementId}\n          displayEmpty\n          id={id}\n          inputProps={{ \"data-se\": testId }}\n          inputRef={localInputRef}\n          labelId={labelElementId}\n          multiple={hasMultipleChoices}\n          name={nameOverride ?? id}\n          onBlur={onBlur}\n          onChange={onChange}\n          onFocus={onFocus}\n          renderValue={hasMultipleChoices ? renderValue : undefined}\n          translate={translate}\n        >\n          {renderedOptions}\n        </MuiSelect>\n        {hasMultipleChoices && (\n          <>\n            <ChipsPositioningContainer\n              odysseyDesignTokens={odysseyDesignTokens}\n            >\n              <Chips isInteractive={true} />\n            </ChipsPositioningContainer>\n          </>\n        )}\n      </SelectContainer>\n    ),\n    [\n      Chips,\n      inputValues,\n      hasMultipleChoices,\n      nameOverride,\n      odysseyDesignTokens,\n      onBlur,\n      onChange,\n      onFocus,\n      renderedOptions,\n      renderValue,\n      testId,\n      translate,\n    ],\n  );\n\n  return (\n    <Field\n      ariaDescribedBy={ariaDescribedBy}\n      errorMessage={errorMessage}\n      errorMessageList={errorMessageList}\n      fieldType=\"single\"\n      hasVisibleLabel\n      hint={hint}\n      HintLinkComponent={HintLinkComponent}\n      id={idOverride}\n      isDisabled={isDisabled}\n      isFullWidth={isFullWidth}\n      isOptional={isOptional}\n      label={label}\n      renderFieldComponent={renderFieldComponent}\n    />\n  );\n};\n\nconst MemoizedSelect = memo(Select);\nMemoizedSelect.displayName = \"Select\";\n\nexport { MemoizedSelect as Select };\n"],"mappings":"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"}
+{"version":3,"file":"Select.js","names":["memo","useCallback","useEffect","useMemo","useRef","useState","useImperativeHandle","Field","CheckIcon","CloseCircleFilledIcon","ComponentControlledState","useInputValues","getControlState","normalizedKey","styled","useOdysseyDesignTokens","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","SelectContainer","div","ChipsPositioningContainer","shouldForwardProp","prop","odysseyDesignTokens","Spacing0","Spacing5","Spacing1","BorderWidthMain","NonInteractiveIcon","Spacing2","ChipsInnerContainer","_Box","isInteractive","isReadOnly","Spacing6","CONTROLLED","Select","ariaDescribedBy","defaultValue","errorMessage","errorMessageList","hasMultipleChoices","hasMultipleChoicesProp","hint","HintLinkComponent","id","idOverride","inputRef","isDisabled","isFullWidth","isMultiSelect","isOptional","label","name","nameOverride","onBlur","onChange","onChangeProp","onFocus","options","testId","translate","value","selectRef","undefined","controlledStateRef","controlledValue","uncontrolledValue","internalSelectedValues","setInternalSelectedValues","current","localInputRef","focus","inputValues","controlState","event","child","preventDefault","target","split","normalizedOptions","normalizedOptionsMap","map","option","text","type","Map","removeSelectedValue","selectedValue","Array","isArray","newValue","filter","internalSelectedValue","syntheticEvent","Chips","stopPropagation","hasNonInteractiveIcon","children","item","length","_Chip","get","tabIndex","onDelete","deleteIcon","sx","pointerEvents","onMouseDown","renderedOptions","index","_ListSubheader","isSelected","includes","_MenuItem","selected","_Checkbox","checked","_ListItemSecondaryAction","toString","renderValue","renderFieldComponent","errorMessageElementId","labelElementId","_Select","displayEmpty","inputProps","readOnly","el","labelId","multiple","fieldType","hasVisibleLabel","MemoizedSelect","displayName"],"sources":["../src/Select.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 {\n  memo,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  useImperativeHandle,\n} from \"react\";\nimport {\n  Box as MuiBox,\n  Checkbox as MuiCheckbox,\n  Chip as MuiChip,\n  ListItemSecondaryAction,\n  ListSubheader,\n  MenuItem as MuiMenuItem,\n  Select as MuiSelect,\n  SelectChangeEvent,\n} from \"@mui/material\";\nimport { SelectProps as MuiSelectProps } from \"@mui/material\";\nimport { Field } from \"./Field\";\nimport {\n  FieldComponentProps,\n  FieldComponentRenderProps,\n} from \"./FieldComponentProps\";\nimport { CheckIcon, CloseCircleFilledIcon } from \"./icons.generated\";\nimport type { HtmlProps } from \"./HtmlProps\";\nimport {\n  ComponentControlledState,\n  FocusHandle,\n  useInputValues,\n  getControlState,\n} from \"./inputUtils\";\nimport { normalizedKey } from \"./useNormalizedKey\";\nimport styled from \"@emotion/styled\";\nimport {\n  useOdysseyDesignTokens,\n  DesignTokens,\n} from \"./OdysseyDesignTokensContext\";\n\nexport type SelectOption = {\n  text: string;\n  type?: \"heading\" | \"option\";\n  value?: string;\n};\n\nconst SelectContainer = styled.div`\n  position: relative;\n  width: 100%;\n  display: flex;\n`;\n\nconst ChipsPositioningContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>`\n  display: flex;\n  align-items: center;\n  position: absolute;\n  top: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing0};\n  right: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing5};\n  bottom: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing0};\n  left: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing1};\n  margin-inline-start: ${({ odysseyDesignTokens }) =>\n    odysseyDesignTokens.BorderWidthMain};\n  opacity: 1;\n  pointer-events: none;\n`;\n\nconst NonInteractiveIcon = styled(CloseCircleFilledIcon, {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>`\n  font-size: 1em;\n  margin-inline-start: ${({ odysseyDesignTokens }) =>\n    odysseyDesignTokens.Spacing2};\n  margin-inline-end: -${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing1};\n  margin-block-end: -1px;\n`;\n\nconst ChipsInnerContainer = styled(MuiBox, {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"isInteractive\" &&\n    prop !== \"isReadOnly\",\n})<{\n  isInteractive?: boolean;\n  isReadOnly?: boolean;\n  odysseyDesignTokens: DesignTokens;\n}>`\n  display: flex;\n  flex-wrap: wrap;\n  gap: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing1};\n  pointer-events: none;\n  opacity: ${({ isInteractive, isReadOnly }) =>\n    isInteractive || isReadOnly ? 1 : 0};\n  min-height: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing6};\n`;\n\nexport type SelectValueType<HasMultipleChoices> =\n  HasMultipleChoices extends true ? string[] : string;\n\nexport type SelectProps<\n  Value extends SelectValueType<HasMultipleChoices>,\n  HasMultipleChoices extends boolean,\n> = {\n  /**\n   * The default value. Use when the component is not controlled.\n   */\n  defaultValue?: MuiSelectProps<Value>[\"defaultValue\"];\n  /**\n   * If `true`, the Select allows multiple selections\n   */\n  hasMultipleChoices?: HasMultipleChoices;\n  /**\n   * The ref forwarded to the Select\n   */\n  inputRef?: React.RefObject<FocusHandle>;\n  /**\n   * @deprecated Use `hasMultipleChoices` instead.\n   */\n  /** **Deprecated:** use `hasMultipleChoices` */\n  isMultiSelect?: HasMultipleChoices;\n  /**\n   * The label text for the Select\n   */\n  label: string;\n  /**\n   * Callback fired when the Select loses focus\n   */\n  onBlur?: MuiSelectProps<Value>[\"onBlur\"];\n  /**\n   * Callback fired when the value of the Select changes\n   */\n  onChange?: MuiSelectProps<Value>[\"onChange\"];\n  /**\n   * Callback fired when the Select gains focus\n   */\n  onFocus?: MuiSelectProps<Value>[\"onFocus\"];\n  /**\n   * The options for the Select\n   */\n  options: (string | SelectOption)[];\n  /**\n   * The value or values selected in the Select\n   */\n  value?: Value;\n} & Pick<\n  FieldComponentProps,\n  | \"errorMessage\"\n  | \"errorMessageList\"\n  | \"hint\"\n  | \"HintLinkComponent\"\n  | \"id\"\n  | \"isDisabled\"\n  | \"isFullWidth\"\n  | \"isOptional\"\n  | \"isReadOnly\"\n  | \"name\"\n> &\n  Pick<HtmlProps, \"ariaDescribedBy\" | \"testId\" | \"translate\">;\n\ntype SelectRenderProps = Partial<\n  Pick<FieldComponentRenderProps, \"ariaDescribedBy\" | \"errorMessageElementId\">\n> &\n  Pick<FieldComponentRenderProps, \"id\" | \"labelElementId\">;\n\n/**\n * Options in Odyssey <Select> are passed as an array, which can contain any combination\n * of the following:\n *   - string —                            A simple string. The string will be both the text and the value of the resulting option.\n *                                         <option value=\"string\">string</option>\n *\n *   - { text: string } —                  Same as above, but the string is contained within an object.\n *                                         <option value=\"text\">text</option>\n *\n *   - { text: string, value: string } —   The option text will be text, and the option value will be value.\n *                                         <option value=\"value\">text</option>\n *\n *   - { text: string, type: \"heading\" } — Used to display a group heading with the text\n */\n\nconst { CONTROLLED } = ComponentControlledState;\nconst Select = <\n  Value extends SelectValueType<HasMultipleChoices>,\n  HasMultipleChoices extends boolean,\n>({\n  ariaDescribedBy,\n  defaultValue,\n  errorMessage,\n  errorMessageList,\n  hasMultipleChoices: hasMultipleChoicesProp,\n  hint,\n  HintLinkComponent,\n  id: idOverride,\n  inputRef,\n  isDisabled = false,\n  isFullWidth = false,\n  isMultiSelect,\n  isOptional = false,\n  isReadOnly = false,\n  label,\n  name: nameOverride,\n  onBlur,\n  onChange: onChangeProp,\n  onFocus,\n  options,\n  testId,\n  translate,\n  value,\n}: SelectProps<Value, HasMultipleChoices>) => {\n  const selectRef = useRef<HTMLInputElement | HTMLTextAreaElement | null>(null);\n\n  const hasMultipleChoices = useMemo(\n    () =>\n      hasMultipleChoicesProp === undefined\n        ? isMultiSelect\n        : hasMultipleChoicesProp,\n    [hasMultipleChoicesProp, isMultiSelect],\n  );\n\n  const controlledStateRef = useRef(\n    getControlState({\n      controlledValue: value,\n      uncontrolledValue: defaultValue,\n    }),\n  );\n  const [internalSelectedValues, setInternalSelectedValues] = useState(\n    controlledStateRef.current === CONTROLLED ? value : defaultValue,\n  );\n\n  const localInputRef = useRef<HTMLSelectElement>(null);\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  useImperativeHandle(\n    inputRef,\n    () => {\n      return {\n        focus: () => {\n          localInputRef.current?.focus();\n        },\n      };\n    },\n    [],\n  );\n\n  useEffect(() => {\n    if (controlledStateRef.current === CONTROLLED) {\n      setInternalSelectedValues(value);\n    }\n  }, [value]);\n\n  const inputValues = useInputValues({\n    defaultValue,\n    value,\n    controlState: controlledStateRef.current,\n  });\n\n  const onChange = useCallback<NonNullable<MuiSelectProps<Value>[\"onChange\"]>>(\n    (event, child) => {\n      if (isReadOnly) {\n        event.preventDefault();\n      } else {\n        const {\n          target: { value },\n        } = event;\n        if (controlledStateRef.current !== CONTROLLED) {\n          setInternalSelectedValues(\n            (typeof value === \"string\" && hasMultipleChoices\n              ? value.split(\",\")\n              : value) as Value,\n          );\n        }\n        onChangeProp?.(event, child);\n      }\n    },\n    [hasMultipleChoices, onChangeProp, isReadOnly],\n  );\n  // Normalize the options array to accommodate the various\n  // data types that might be passed\n  const [normalizedOptions, normalizedOptionsMap] = useMemo(() => {\n    const normalizedOptions = options.map((option) => {\n      if (typeof option === \"object\") {\n        /**\n         * If the value of `option?.value is an empty string, we need to make sure that we\n         * set an empty string to `value` in the normalized option so that the select component\n         * can potentially set it as the selected one in the text input\n         */\n        const value =\n          option?.value === \"\" ? option.value : option.value || option.text;\n        return {\n          text: option.text,\n          value,\n          type: option.type === \"heading\" ? \"heading\" : \"option\",\n        };\n      }\n\n      return { text: option, value: option, type: \"option\" };\n    });\n\n    const normalizedOptionsMap = new Map(\n      normalizedOptions.map((option) => [option.value, option]),\n    );\n    return [normalizedOptions, normalizedOptionsMap];\n  }, [options]);\n\n  const removeSelectedValue = useCallback(\n    (selectedValue: string) => {\n      if (Array.isArray(internalSelectedValues)) {\n        const newValue = internalSelectedValues.filter(\n          (internalSelectedValue) => internalSelectedValue !== selectedValue,\n        );\n\n        const syntheticEvent = {\n          target: { value: newValue },\n        } as SelectChangeEvent<Value>;\n\n        onChange(syntheticEvent, null);\n      }\n    },\n    [internalSelectedValues, onChange],\n  );\n\n  const Chips = useCallback(\n    ({\n      isInteractive,\n      isReadOnly,\n    }: {\n      isInteractive: boolean;\n      isReadOnly?: boolean;\n    }) => {\n      const stopPropagation = (event: React.MouseEvent<SVGSVGElement>) =>\n        event.stopPropagation();\n\n      const hasNonInteractiveIcon =\n        !isInteractive &&\n        controlledStateRef.current === CONTROLLED &&\n        hasMultipleChoices;\n      return (\n        Array.isArray(internalSelectedValues) && (\n          <ChipsInnerContainer\n            isInteractive={isInteractive}\n            isReadOnly={isReadOnly}\n            odysseyDesignTokens={odysseyDesignTokens}\n          >\n            {internalSelectedValues.map(\n              (item) =>\n                item?.length > 0 && (\n                  <MuiChip\n                    key={item}\n                    label={\n                      <>\n                        {normalizedOptionsMap.get(item)?.text}\n                        {hasNonInteractiveIcon && (\n                          <NonInteractiveIcon\n                            odysseyDesignTokens={odysseyDesignTokens}\n                          />\n                        )}\n                      </>\n                    }\n                    tabIndex={-1}\n                    onDelete={\n                      isInteractive && controlledStateRef.current === CONTROLLED\n                        ? () => removeSelectedValue(item)\n                        : undefined\n                    }\n                    deleteIcon={\n                      <CloseCircleFilledIcon\n                        sx={{ pointerEvents: \"auto\" }}\n                        // We need to stop event propagation on mouse down to prevent the deletion\n                        // from being blocked by the Select list opening, and also ensure that\n                        // the pointerEvent is registered even when the parent's are not\n                        onMouseDown={stopPropagation}\n                      />\n                    }\n                  />\n                ),\n            )}\n          </ChipsInnerContainer>\n        )\n      );\n    },\n    [\n      controlledStateRef,\n      hasMultipleChoices,\n      internalSelectedValues,\n      odysseyDesignTokens,\n      removeSelectedValue,\n      normalizedOptionsMap,\n    ],\n  );\n\n  // Convert the options into the ReactNode children\n  // that will populate the <Select>\n  const renderedOptions = useMemo(\n    () =>\n      normalizedOptions.map((option, index) => {\n        if (option.type === \"heading\") {\n          return (\n            <ListSubheader key={option.text}> {option.text} </ListSubheader>\n          );\n        }\n\n        const isSelected = hasMultipleChoices\n          ? internalSelectedValues?.includes(option.value)\n          : internalSelectedValues === option.value;\n\n        return (\n          <MuiMenuItem\n            data-empty={!option.text}\n            key={normalizedKey(option.text, index.toString())}\n            value={option.value}\n            selected={isSelected}\n          >\n            {hasMultipleChoices && <MuiCheckbox checked={isSelected} />}\n            {option.text}\n            {!hasMultipleChoices && internalSelectedValues === option.value && (\n              <ListItemSecondaryAction>\n                <CheckIcon />\n              </ListItemSecondaryAction>\n            )}\n          </MuiMenuItem>\n        );\n      }),\n    [hasMultipleChoices, normalizedOptions, internalSelectedValues],\n  );\n\n  const renderValue = useCallback(\n    (value: Value) => Array.isArray(value) && <Chips isInteractive={false} />,\n    [Chips],\n  );\n\n  const renderFieldComponent = useCallback(\n    ({\n      ariaDescribedBy,\n      errorMessageElementId,\n      id,\n      labelElementId,\n    }: SelectRenderProps) => (\n      <SelectContainer>\n        <MuiSelect\n          {...inputValues}\n          aria-describedby={ariaDescribedBy}\n          aria-errormessage={errorMessageElementId}\n          displayEmpty\n          id={id}\n          inputProps={{\n            \"data-se\": testId,\n            \"aria-disabled\": isDisabled || isReadOnly,\n            readOnly: isReadOnly,\n          }}\n          inputRef={(el: HTMLInputElement | HTMLTextAreaElement | null) => {\n            if (localInputRef.current !== el) {\n              (localInputRef as React.MutableRefObject<typeof el>).current = el;\n            }\n            selectRef.current = el;\n          }}\n          labelId={labelElementId}\n          multiple={hasMultipleChoices}\n          name={nameOverride ?? id}\n          onBlur={onBlur}\n          onChange={onChange}\n          onFocus={onFocus}\n          renderValue={hasMultipleChoices ? renderValue : undefined}\n          translate={translate}\n        >\n          {renderedOptions}\n        </MuiSelect>\n        {hasMultipleChoices && (\n          <>\n            <ChipsPositioningContainer\n              odysseyDesignTokens={odysseyDesignTokens}\n            >\n              <Chips isInteractive={!isReadOnly} isReadOnly={isReadOnly} />\n            </ChipsPositioningContainer>\n          </>\n        )}\n      </SelectContainer>\n    ),\n    [\n      Chips,\n      inputValues,\n      hasMultipleChoices,\n      isDisabled,\n      isReadOnly,\n      nameOverride,\n      odysseyDesignTokens,\n      onBlur,\n      onChange,\n      onFocus,\n      renderedOptions,\n      renderValue,\n      testId,\n      translate,\n    ],\n  );\n\n  return (\n    <Field\n      ariaDescribedBy={ariaDescribedBy}\n      errorMessage={errorMessage}\n      errorMessageList={errorMessageList}\n      fieldType=\"single\"\n      hasVisibleLabel\n      hint={hint}\n      HintLinkComponent={HintLinkComponent}\n      id={idOverride}\n      isDisabled={isDisabled}\n      isFullWidth={isFullWidth}\n      isOptional={isOptional}\n      label={label}\n      renderFieldComponent={renderFieldComponent}\n    />\n  );\n};\n\nconst MemoizedSelect = memo(Select);\nMemoizedSelect.displayName = \"Select\";\n\nexport { MemoizedSelect as Select };\n"],"mappings":"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"}

package/dist/ToastStack.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastStack.js","names":["memo","jsx","_jsx","ToastStack","children","_Snackbar","open","_Box","sx","display","flexDirection","gap","MemoizedToastStack","displayName"],"sources":["../src/ToastStack.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 } from \"react\";\nimport { Box, Snackbar } from \"@mui/material\";\nimport { Toast } from \"./Toast\";\n\nexport type ToastStackProps = {\n  /**\n   * The Toast or array of Toasts within the ToastStack\n   */\n  children: ReactElement<typeof Toast> | Array<ReactElement<typeof Toast>>;\n};\n\nconst ToastStack = ({ children }: ToastStackProps) => {\n  return (\n    <Snackbar open={true}>\n      <Box\n        sx={{\n          display: \"flex\",\n          flexDirection: \"column-reverse\",\n          gap: 2,\n        }}\n      >\n        {children}\n      </Box>\n    </Snackbar>\n  );\n};\n\nconst MemoizedToastStack = memo(ToastStack);\nMemoizedToastStack.displayName = \"ToastStack\";\n\nexport { MemoizedToastStack as ToastStack };\n"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAsB,OAAO;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAW3C,MAAMC,UAAU,GAAGA,CAAC;EAAEC;AAA0B,CAAC,KAAK;EACpD,OACEF,IAAA,CAAAG,SAAA;IAAUC,IAAI,EAAE,IAAK;IAAAF,QAAA,EACnBF,IAAA,CAAAK,IAAA;MACEC,EAAE,EAAE;QACFC,OAAO,EAAE,MAAM;QACfC,aAAa,EAAE,gBAAgB;QAC/BC,GAAG,EAAE;MACP,CAAE;MAAAP,QAAA,EAEDA;IAAQ,CACN;EAAC,CACE,CAAC;AAEf,CAAC;AAED,MAAMQ,kBAAkB,GAAGZ,IAAI,CAACG,UAAU,CAAC;AAC3CS,kBAAkB,CAACC,WAAW,GAAG,YAAY;AAE7C,SAASD,kBAAkB,IAAIT,UAAU"}
+{"version":3,"file":"ToastStack.js","names":["memo","jsx","_jsx","ToastStack","children","_Snackbar","open","_Box","sx","display","flexDirection","gap","MemoizedToastStack","displayName"],"sources":["../src/ToastStack.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 } from \"react\";\nimport { Box, Snackbar } from \"@mui/material\";\nimport { Toast } from \"./Toast\";\n\nexport type ToastListProps = {\n  /**\n   * The Toast or array of Toasts within the ToastStack\n   */\n  children: ReactElement<typeof Toast> | Array<ReactElement<typeof Toast>>;\n};\n\nconst ToastStack = ({ children }: ToastListProps) => {\n  return (\n    <Snackbar open={true}>\n      <Box\n        sx={{\n          display: \"flex\",\n          flexDirection: \"column-reverse\",\n          gap: 2,\n        }}\n      >\n        {children}\n      </Box>\n    </Snackbar>\n  );\n};\n\nconst MemoizedToastStack = memo(ToastStack);\nMemoizedToastStack.displayName = \"ToastStack\";\n\nexport { MemoizedToastStack as ToastStack };\n"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAsB,OAAO;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAW3C,MAAMC,UAAU,GAAGA,CAAC;EAAEC;AAAyB,CAAC,KAAK;EACnD,OACEF,IAAA,CAAAG,SAAA;IAAUC,IAAI,EAAE,IAAK;IAAAF,QAAA,EACnBF,IAAA,CAAAK,IAAA;MACEC,EAAE,EAAE;QACFC,OAAO,EAAE,MAAM;QACfC,aAAa,EAAE,gBAAgB;QAC/BC,GAAG,EAAE;MACP,CAAE;MAAAP,QAAA,EAEDA;IAAQ,CACN;EAAC,CACE,CAAC;AAEf,CAAC;AAED,MAAMQ,kBAAkB,GAAGZ,IAAI,CAACG,UAAU,CAAC;AAC3CS,kBAAkB,CAACC,WAAW,GAAG,YAAY;AAE7C,SAASD,kBAAkB,IAAIT,UAAU"}

package/dist/{createShadowRootElement.js → createShadowDomElements.js}

@@ -10,17 +10,33 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
+export const createShadowDomElements = containerElement => {
+  const shadowRoot = containerElement.attachShadow({
+    mode: "open"
+  });
+  const emotionRootElement = document.createElement("div");
+  emotionRootElement.setAttribute("id", "style-root");
+  emotionRootElement.setAttribute("nonce", window.cspNonce);
+  const shadowRootElement = document.createElement("div");
+  shadowRootElement.setAttribute("id", "shadow-root");
+  shadowRoot.appendChild(emotionRootElement);
+  shadowRoot.appendChild(shadowRootElement);
+  return {
+    emotionRootElement,
+    shadowRootElement
+  };
+};
 export const createShadowRootElement = containerElement => {
   const shadowRoot = containerElement.attachShadow({
     mode: "open"
   });
-  const emotionRoot = document.createElement("style");
-  emotionRoot.setAttribute("id", "style-root");
-  emotionRoot.setAttribute("nonce", window.cspNonce);
+  const emotionRootElement = document.createElement("style");
+  emotionRootElement.setAttribute("id", "style-root");
+  emotionRootElement.setAttribute("nonce", window.cspNonce);
   const shadowRootElement = document.createElement("div");
   shadowRootElement.setAttribute("id", "shadow-root");
-  shadowRoot.appendChild(emotionRoot);
+  shadowRoot.appendChild(emotionRootElement);
   shadowRoot.appendChild(shadowRootElement);
-  return [emotionRoot, shadowRootElement];
+  return [emotionRootElement, shadowRootElement];
 };
-//# sourceMappingURL=createShadowRootElement.js.map
+//# sourceMappingURL=createShadowDomElements.js.map

package/dist/createShadowDomElements.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createShadowDomElements.js","names":["createShadowDomElements","containerElement","shadowRoot","attachShadow","mode","emotionRootElement","document","createElement","setAttribute","window","cspNonce","shadowRootElement","appendChild","createShadowRootElement"],"sources":["../src/createShadowDomElements.ts"],"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\nexport const createShadowDomElements = (containerElement: HTMLElement) => {\n  const shadowRoot = containerElement.attachShadow({ mode: \"open\" });\n\n  // Container for Emotion `<style>` elements.\n  const emotionRootElement = document.createElement(\"div\");\n  emotionRootElement.setAttribute(\"id\", \"style-root\");\n  emotionRootElement.setAttribute(\"nonce\", window.cspNonce);\n\n  // React app root component.\n  const shadowRootElement = document.createElement(\"div\");\n  shadowRootElement.setAttribute(\"id\", \"shadow-root\");\n\n  shadowRoot.appendChild(emotionRootElement);\n  shadowRoot.appendChild(shadowRootElement);\n\n  return { emotionRootElement, shadowRootElement };\n};\n\n/** @deprecated Use `createShadowDomElements` instead. */\nexport const createShadowRootElement = (\n  containerElement: HTMLElement,\n): [HTMLStyleElement, HTMLDivElement] => {\n  const shadowRoot = containerElement.attachShadow({ mode: \"open\" });\n\n  // the element that styles will be cached into\n  const emotionRootElement = document.createElement(\"style\");\n  emotionRootElement.setAttribute(\"id\", \"style-root\");\n  emotionRootElement.setAttribute(\"nonce\", window.cspNonce);\n\n  // the element that emotion renders html into\n  const shadowRootElement = document.createElement(\"div\");\n  shadowRootElement.setAttribute(\"id\", \"shadow-root\");\n\n  shadowRoot.appendChild(emotionRootElement);\n  shadowRoot.appendChild(shadowRootElement);\n\n  return [emotionRootElement, shadowRootElement];\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAO,MAAMA,uBAAuB,GAAIC,gBAA6B,IAAK;EACxE,MAAMC,UAAU,GAAGD,gBAAgB,CAACE,YAAY,CAAC;IAAEC,IAAI,EAAE;EAAO,CAAC,CAAC;EAGlE,MAAMC,kBAAkB,GAAGC,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;EACxDF,kBAAkB,CAACG,YAAY,CAAC,IAAI,EAAE,YAAY,CAAC;EACnDH,kBAAkB,CAACG,YAAY,CAAC,OAAO,EAAEC,MAAM,CAACC,QAAQ,CAAC;EAGzD,MAAMC,iBAAiB,GAAGL,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;EACvDI,iBAAiB,CAACH,YAAY,CAAC,IAAI,EAAE,aAAa,CAAC;EAEnDN,UAAU,CAACU,WAAW,CAACP,kBAAkB,CAAC;EAC1CH,UAAU,CAACU,WAAW,CAACD,iBAAiB,CAAC;EAEzC,OAAO;IAAEN,kBAAkB;IAAEM;EAAkB,CAAC;AAClD,CAAC;AAGD,OAAO,MAAME,uBAAuB,GAClCZ,gBAA6B,IACU;EACvC,MAAMC,UAAU,GAAGD,gBAAgB,CAACE,YAAY,CAAC;IAAEC,IAAI,EAAE;EAAO,CAAC,CAAC;EAGlE,MAAMC,kBAAkB,GAAGC,QAAQ,CAACC,aAAa,CAAC,OAAO,CAAC;EAC1DF,kBAAkB,CAACG,YAAY,CAAC,IAAI,EAAE,YAAY,CAAC;EACnDH,kBAAkB,CAACG,YAAY,CAAC,OAAO,EAAEC,MAAM,CAACC,QAAQ,CAAC;EAGzD,MAAMC,iBAAiB,GAAGL,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;EACvDI,iBAAiB,CAACH,YAAY,CAAC,IAAI,EAAE,aAAa,CAAC;EAEnDN,UAAU,CAACU,WAAW,CAACP,kBAAkB,CAAC;EAC1CH,UAAU,CAACU,WAAW,CAACD,iBAAiB,CAAC;EAEzC,OAAO,CAACN,kBAAkB,EAAEM,iBAAiB,CAAC;AAChD,CAAC"}

package/dist/index.js

@@ -27,7 +27,7 @@ export * from "./Checkbox.js";
 export * from "./CheckboxGroup.js";
 export * from "./CircularProgress.js";
 export * from "./CssBaseline.js";
-export * from "./createShadowRootElement.js";
+export * from "./createShadowDomElements.js";
 export * from "./createUniqueId.js";
 export * from "./DataTable/index.js";
 export * from "./Dialog.js";

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["deepmerge","visuallyHidden","createTheme","DialogContentText","Divider","InputAdornment","InputBase","ListItemIcon","ListItemText","ListSubheader","MenuList","Paper","ScopedCssBaseline","ThemeProvider","odysseyTranslate","useOdysseyDesignTokens","badgeContentMaxValues"],"sources":["../src/index.ts"],"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\nexport { deepmerge, visuallyHidden } from \"@mui/utils\";\n\nexport {\n  createTheme,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  DialogContentText,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  Divider,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  InputAdornment,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  InputBase,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  ListItemIcon,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  ListItemText,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  ListSubheader,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  MenuList,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  Paper,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  ScopedCssBaseline,\n  ThemeProvider,\n} from \"@mui/material\";\n\nexport type {\n  CssBaselineProps,\n  DialogContentTextProps,\n  DividerProps,\n  InputAdornmentProps,\n  InputBaseProps,\n  ListItemIconProps,\n  ListItemTextProps,\n  ListSubheaderProps,\n  MenuListProps,\n  PaperProps,\n  ScopedCssBaselineProps,\n  ThemeOptions,\n} from \"@mui/material\";\n\nexport { odysseyTranslate } from \"./i18n\";\nexport type { FocusHandle } from \"./inputUtils\";\nexport { useOdysseyDesignTokens } from \"./OdysseyDesignTokensContext\";\n\nexport * from \"./Accordion\";\nexport * from \"./Autocomplete\";\nexport { badgeContentMaxValues } from \"./Badge\";\nexport * from \"./Banner\";\nexport * from \"./Box\";\nexport * from \"./Breadcrumbs\";\nexport * from \"./Button\";\nexport * from \"./Card\";\nexport * from \"./Callout\";\nexport * from \"./Checkbox\";\nexport * from \"./CheckboxGroup\";\nexport * from \"./CircularProgress\";\nexport * from \"./CssBaseline\";\nexport * from \"./createShadowRootElement\";\nexport * from \"./createUniqueId\";\nexport * from \"./DataTable\";\nexport * from \"./Dialog\";\nexport * from \"./Drawer\";\nexport * from \"./EmptyState\";\nexport * from \"./Fieldset\";\nexport * from \"./FieldComponentProps\";\nexport * from \"./Form\";\nexport * from \"./HintLink\";\nexport * from \"./IconWithTooltip\";\nexport * from \"./Link\";\nexport * from \"./MenuButton\";\nexport * from \"./MenuItem\";\nexport * from \"./NativeSelect\";\nexport * from \"./NullElement\";\nexport * from \"./OdysseyCacheProvider\";\nexport * from \"./OdysseyProvider\";\nexport * from \"./OdysseyThemeProvider\";\nexport * from \"./OdysseyTranslationProvider\";\nexport * from \"./PasswordField\";\nexport * from \"./Radio\";\nexport * from \"./RadioGroup\";\nexport * from \"./ScreenReaderText\";\nexport * from \"./SearchField\";\nexport * from \"./Select\";\nexport * from \"./Status\";\nexport * from \"./Surface\";\nexport * from \"./Tabs\";\nexport * from \"./Tag\";\nexport * from \"./TagList\";\nexport * from \"./TextField\";\nexport * from \"./theme\";\nexport * from \"./Toast\";\nexport * from \"./ToastStack\";\nexport * from \"./labs/Switch\";\nexport * from \"./Tooltip\";\nexport * from \"./Typography\";\nexport * from \"./useUniqueId\";\nexport * from \"./Pagination\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,SAAS,EAAEC,cAAc,QAAQ,YAAY;AAEtD,SACEC,WAAW,EAEXC,iBAAiB,EAEjBC,OAAO,EAEPC,cAAc,EAEdC,SAAS,EAETC,YAAY,EAEZC,YAAY,EAEZC,aAAa,EAEbC,QAAQ,EAERC,KAAK,EAELC,iBAAiB,EACjBC,aAAa,QACR,eAAe;AAAC,SAiBdC,gBAAgB;AAAA,SAEhBC,sBAAsB;AAAA;AAAA;AAAA,SAItBC,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}
+{"version":3,"file":"index.js","names":["deepmerge","visuallyHidden","createTheme","DialogContentText","Divider","InputAdornment","InputBase","ListItemIcon","ListItemText","ListSubheader","MenuList","Paper","ScopedCssBaseline","ThemeProvider","odysseyTranslate","useOdysseyDesignTokens","badgeContentMaxValues"],"sources":["../src/index.ts"],"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\nexport { deepmerge, visuallyHidden } from \"@mui/utils\";\n\nexport {\n  createTheme,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  DialogContentText,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  Divider,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  InputAdornment,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  InputBase,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  ListItemIcon,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  ListItemText,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  ListSubheader,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  MenuList,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  Paper,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  ScopedCssBaseline,\n  ThemeProvider,\n} from \"@mui/material\";\n\nexport type {\n  CssBaselineProps,\n  DialogContentTextProps,\n  DividerProps,\n  InputAdornmentProps,\n  InputBaseProps,\n  ListItemIconProps,\n  ListItemTextProps,\n  ListSubheaderProps,\n  MenuListProps,\n  PaperProps,\n  ScopedCssBaselineProps,\n  ThemeOptions,\n} from \"@mui/material\";\n\nexport { odysseyTranslate } from \"./i18n\";\nexport type { FocusHandle } from \"./inputUtils\";\nexport { useOdysseyDesignTokens } from \"./OdysseyDesignTokensContext\";\n\nexport * from \"./Accordion\";\nexport * from \"./Autocomplete\";\nexport { badgeContentMaxValues } from \"./Badge\";\nexport * from \"./Banner\";\nexport * from \"./Box\";\nexport * from \"./Breadcrumbs\";\nexport * from \"./Button\";\nexport * from \"./Card\";\nexport * from \"./Callout\";\nexport * from \"./Checkbox\";\nexport * from \"./CheckboxGroup\";\nexport * from \"./CircularProgress\";\nexport * from \"./CssBaseline\";\nexport * from \"./createShadowDomElements\";\nexport * from \"./createUniqueId\";\nexport * from \"./DataTable\";\nexport * from \"./Dialog\";\nexport * from \"./Drawer\";\nexport * from \"./EmptyState\";\nexport * from \"./Fieldset\";\nexport * from \"./FieldComponentProps\";\nexport * from \"./Form\";\nexport * from \"./HintLink\";\nexport * from \"./IconWithTooltip\";\nexport * from \"./Link\";\nexport * from \"./MenuButton\";\nexport * from \"./MenuItem\";\nexport * from \"./NativeSelect\";\nexport * from \"./NullElement\";\nexport * from \"./OdysseyCacheProvider\";\nexport * from \"./OdysseyProvider\";\nexport * from \"./OdysseyThemeProvider\";\nexport * from \"./OdysseyTranslationProvider\";\nexport * from \"./PasswordField\";\nexport * from \"./Radio\";\nexport * from \"./RadioGroup\";\nexport * from \"./ScreenReaderText\";\nexport * from \"./SearchField\";\nexport * from \"./Select\";\nexport * from \"./Status\";\nexport * from \"./Surface\";\nexport * from \"./Tabs\";\nexport * from \"./Tag\";\nexport * from \"./TagList\";\nexport * from \"./TextField\";\nexport * from \"./theme\";\nexport * from \"./Toast\";\nexport * from \"./ToastStack\";\nexport * from \"./labs/Switch\";\nexport * from \"./Tooltip\";\nexport * from \"./Typography\";\nexport * from \"./useUniqueId\";\nexport * from \"./Pagination\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,SAAS,EAAEC,cAAc,QAAQ,YAAY;AAEtD,SACEC,WAAW,EAEXC,iBAAiB,EAEjBC,OAAO,EAEPC,cAAc,EAEdC,SAAS,EAETC,YAAY,EAEZC,YAAY,EAEZC,aAAa,EAEbC,QAAQ,EAERC,KAAK,EAELC,iBAAiB,EACjBC,aAAa,QACR,eAAe;AAAC,SAiBdC,gBAAgB;AAAA,SAEhBC,sBAAsB;AAAA;AAAA;AAAA,SAItBC,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}

package/dist/index.scss

@@ -1,7 +1,7 @@
 
 /**
  * Do not edit directly
- * Generated on Fri, 09 Aug 2024 19:25:30 GMT
+ * Generated on Thu, 05 Sep 2024 19:54:26 GMT
  */
 
 $border-color-control: #8d8d8d !default;
@@ -70,8 +70,8 @@ $hue-red-600: #d92300 !default;
 $hue-red-700: #951800 !default;
 $hue-red-800: #711200 !default;
 $hue-red-900: #500d00 !default;
-$hue-yellow-50: #fcf6ac !default;
-$hue-yellow-100: #fce101 !default;
+$hue-yellow-50: #fdfad9 !default;
+$hue-yellow-100: #ffe01a !default;
 $hue-yellow-200: #f9c503 !default;
 $hue-yellow-300: #eb9e05 !default;
 $hue-yellow-400: #bf8004 !default;
@@ -96,14 +96,14 @@ $palette-danger-darker: #711200 !default;
 $palette-danger-text: #d92300 !default;
 $palette-danger-heading: #500d00 !default;
 $palette-danger-highlight: #ffd8d1 !default;
-$palette-warning-lighter: #fcf6ac !default;
+$palette-warning-lighter: #fdfad9 !default;
 $palette-warning-light: #eb9e05 !default;
 $palette-warning-main: #a16c03 !default;
 $palette-warning-dark: #664402 !default;
 $palette-warning-darker: #4c3302 !default;
 $palette-warning-text: #966603 !default;
 $palette-warning-heading: #352401 !default;
-$palette-warning-highlight: #fce101 !default;
+$palette-warning-highlight: #ffe01a !default;
 $palette-success-lighter: #defae7 !default;
 $palette-success-light: #59c282 !default;
 $palette-success-main: #16884a !default;