@okta/odyssey-react-mui 1.22.0 → 1.23.0

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.23.0](https://github.com/okta/odyssey/compare/v1.19.0...v1.23.0) (2024-09-19)
+
+### Features
+
+- add additional action button and menu slot to table ([#2334](https://github.com/okta/odyssey/issues/2334)) ([52b3f38](https://github.com/okta/odyssey/commit/52b3f3832adc442e0219be16fe8a4d96cf100a4e))
+- adds a generic top nav component ([#2296](https://github.com/okta/odyssey/issues/2296)) ([6f3165f](https://github.com/okta/odyssey/commit/6f3165f9fd4a1d1743c975b72132d4ec186d09bb))
+- adds new Shadow DOM export with better naming ([#2338](https://github.com/okta/odyssey/issues/2338)) ([0997e36](https://github.com/okta/odyssey/commit/0997e36afd4d241f5b3960528aff2865fb6d6ac3))
+- automatically scroll to the first isSelected SideNavItem ([#2325](https://github.com/okta/odyssey/issues/2325)) ([52ce441](https://github.com/okta/odyssey/commit/52ce44137ffe5601cfa6044782a21afb5449167e))
+
+### Bug Fixes
+
+- Add missing props to Storybook ([#2313](https://github.com/okta/odyssey/issues/2313)) ([bbf96a2](https://github.com/okta/odyssey/commit/bbf96a257160b922c0ebc31b1c5dec1fe31c35b4))
+- fixes translations not working with TypeScript ([#2354](https://github.com/okta/odyssey/issues/2354)) ([37653ee](https://github.com/okta/odyssey/commit/37653ee47c2fab8b54dec26efd5115f6633c2977))
+- **odyssey-design-tokens:** using correct weights in SB ([#2363](https://github.com/okta/odyssey/issues/2363)) ([2dfa614](https://github.com/okta/odyssey/commit/2dfa614cd4c09d71d8624be690ae788e134a74ba))
+- **odyssey-react-mui:** Add min-heights to keep correct heights ([#2324](https://github.com/okta/odyssey/issues/2324)) ([40d5a50](https://github.com/okta/odyssey/commit/40d5a5070ebfab1b650066e91b451c0ef4b3f2d8))
+- remove invalid pseudo element from theme overrides ([#2310](https://github.com/okta/odyssey/issues/2310)) ([fea0793](https://github.com/okta/odyssey/commit/fea0793acf0800494270a87e4e5d65129942b99e))
+- select multioption not rendering text when you use an options object ([#2323](https://github.com/okta/odyssey/issues/2323)) ([4bafbb9](https://github.com/okta/odyssey/commit/4bafbb99e03e52ad572fba9049013c058c75da38))
+- Update Test Selector types and improve functionality ([#2333](https://github.com/okta/odyssey/issues/2333)) ([7039009](https://github.com/okta/odyssey/commit/703900947861dfb36b8996414130a8db3414ccfa))
+
 ## [1.22.0](https://github.com/okta/odyssey/compare/v1.19.0...v1.22.0) (2024-09-05)
 
 ### Features

package/dist/@types/i18next.d.js.map

@@ -1 +1 @@
-{"version":3,"file":"i18next.d.js","names":[],"sources":["../../src/@types/i18next.d.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\nimport \"i18next\";\nimport { translation as en } from \"../properties/ts/odyssey-react-mui\";\n\ndeclare module \"i18next\" {\n  interface CustomTypeOptions {\n    resources: {\n      translations: typeof en;\n    };\n  }\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAO,SAAS"}
+{"version":3,"file":"i18next.d.js","names":[],"sources":["../../src/@types/i18next.d.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\nimport \"i18next\";\nimport { translation as en } from \"../properties/ts/odyssey-react-mui\";\n\ndeclare module \"i18next\" {\n  interface CustomTypeOptions {\n    resources: {\n      translation: typeof en;\n    };\n  }\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAO,SAAS"}

package/dist/Autocomplete.js

@@ -19,6 +19,36 @@ import { Field } from "./Field.js";
 import { ComponentControlledState, useInputValues, getControlState } from "./inputUtils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
+export const AutocompleteTestSelector = {
+  accessibleText: {
+    errorMessage: "errorMessage",
+    hint: "description",
+    label: "label"
+  },
+  children: {
+    list: {
+      children: {
+        listItem: {
+          elementSelector: {
+            method: "ByRole",
+            options: {
+              label: "name"
+            },
+            role: "option"
+          }
+        }
+      },
+      isControlledElement: true
+    }
+  },
+  elementSelector: {
+    method: "ByRole",
+    options: {
+      label: "name"
+    },
+    role: "combobox"
+  }
+};
 const ListboxContainer = styled.div`
   width: 100%;
   height: 100%;

package/dist/Autocomplete.js.map

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.js","names":["createContext","forwardRef","memo","useCallback","useContext","useEffect","useMemo","useRef","useState","styled","VariableSizeList","useTranslation","Field","ComponentControlledState","useInputValues","getControlState","jsx","_jsx","createElement","_createElement","ListboxContainer","div","Autocomplete","ariaDescribedBy","defaultValue","errorMessage","errorMessageList","hasMultipleChoices","id","idOverride","inputValue","isCustomValueAllowed","isDisabled","isFullWidth","isLoading","isOptional","isReadOnly","isVirtualized","isVirtualizedProp","hint","HintLinkComponent","label","name","nameOverride","noOptionsText","onBlur","onChange","onChangeProp","onInputChange","onInputChangeProp","onFocus","options","value","getIsOptionEqualToValue","testId","translate","t","controlledStateRef","controlledValue","uncontrolledValue","Boolean","defaultValueProp","undefined","valueProps","controlState","current","inputValueProp","CONTROLLED","renderInput","InputLabelProps","InputProps","params","fieldType","hasVisibleLabel","htmlFor","renderFieldComponent","errorMessageElementId","labelElementId","_InputBase","inputProps","required","Row","data","index","setItemSize","style","rowRef","firstChild","firstElementChild","height","clientHeight","baseOption","key","props","styles","ref","children","OuterListboxContext","OuterListboxElementType","outerProps","useResetCache","length","resetCacheRef","resetAfterIndex","ListboxComponent","listHeight","setListHeight","other","itemData","flatMap","item","concat","sizeMap","getListBoxHeight","COMBINED_LISTBOX_PADDING","OVERSCAN_ROW_COUNT","itemsHeightCalculated","map","_","reduce","prevItemHeight","nextItemHeight","gridRef","size","getItemSize","Provider","innerElementType","itemCount","itemSize","width","outerElementType","overscanCount","event","reason","details","_Autocomplete","clearText","closeText","disableCloseOnSelect","disabled","freeSolo","filterSelectedOptions","fullWidth","loading","multiple","openText","readOnly","isOptionEqualToValue","MemoizedAutocomplete","displayName"],"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  UseAutocompleteProps,\n  AutocompleteValue,\n  AutocompleteRenderInputParams,\n} from \"@mui/material\";\nimport {\n  createContext,\n  forwardRef,\n  HTMLAttributes,\n  memo,\n  ReactElement,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport styled from \"@emotion/styled\";\nimport { VariableSizeList, ListChildComponentProps } from \"react-window\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { Field } from \"./Field\";\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport type { HtmlProps } from \"./HtmlProps\";\nimport {\n  ComponentControlledState,\n  useInputValues,\n  getControlState,\n} from \"./inputUtils\";\n\ntype SetItemSize = (size: number) => void;\n\nexport type AutocompleteProps<\n  OptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined,\n> = {\n  /**\n   * The default value. Use when the component is not controlled.\n   */\n  defaultValue?: UseAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"defaultValue\"];\n  /**\n   * Enables multiple choice selection\n   */\n  hasMultipleChoices?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"multiple\"];\n  /**\n   * The value for the input\n   */\n  inputValue?: UseAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"inputValue\"];\n  /**\n   * Allows the input of custom values\n   */\n  isCustomValueAllowed?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"freeSolo\"];\n  /**\n   * Disables the Autocomplete input\n   */\n  isDisabled?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"disabled\"];\n  /**\n   * Displays a loading indicator\n   */\n  isLoading?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"loading\"];\n  /**\n   * Makes the Autocomplete input read-only\n   */\n  isReadOnly?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"readOnly\"];\n  /**\n   * The label text for the autocomplete input\n   */\n  label: string;\n  /**\n   * The text to display when no options are available\n   *\n   * default: \"No Options\"\n   */\n  noOptionsText?: string;\n  /**\n   * Callback fired when the autocomplete loses focus.\n   */\n  onBlur?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"onBlur\"];\n  /**\n   * Callback fired when a selection is made.\n   */\n  onChange?: UseAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"onChange\"];\n  /**\n   * Callback fired when the textbox receives typed characters.\n   */\n  onInputChange?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"onInputChange\"];\n  /**\n   * Callback fired when the autocomplete gains focus.\n   */\n  onFocus?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"onFocus\"];\n  /**\n   * The options for the Autocomplete input\n   */\n  options: ReadonlyArray<OptionType>;\n  /**\n   * The value of the Autocomplete input\n   */\n  value?: UseAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"value\"];\n\n  /**\n   * Used to determine if the option represents the given value. Uses strict equality by default if none provided.\n   * Both arguments need to be handled, an option can only match with one value.\n   * option: the option to test\n   * value: the value to test against\n   *\n   * You will need to implement this function if your `option` items are objects.\n   */\n  getIsOptionEqualToValue?: (option: OptionType, value: OptionType) => boolean;\n\n  /**\n   * If this component is required to display a virtualized list of options,\n   * then this value needs to be set to true.\n   * It is recommended if you're options are on the order of 10's of hundreds or more.\n   */\n  isVirtualized?: boolean;\n} & Pick<\n  FieldComponentProps,\n  | \"errorMessage\"\n  | \"errorMessageList\"\n  | \"hint\"\n  | \"HintLinkComponent\"\n  | \"id\"\n  | \"isFullWidth\"\n  | \"isOptional\"\n  | \"name\"\n> &\n  Pick<HtmlProps, \"ariaDescribedBy\" | \"testId\" | \"translate\">;\n\nconst ListboxContainer = styled.div`\n  width: 100%;\n  height: 100%;\n`;\n\nconst Autocomplete = <\n  OptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined,\n>({\n  ariaDescribedBy,\n  defaultValue,\n  errorMessage,\n  errorMessageList,\n  hasMultipleChoices,\n  id: idOverride,\n  inputValue,\n  isCustomValueAllowed,\n  isDisabled,\n  isFullWidth = false,\n  isLoading,\n  isOptional = false,\n  isReadOnly,\n  isVirtualized: isVirtualizedProp = false,\n  hint,\n  HintLinkComponent,\n  label,\n  name: nameOverride,\n  noOptionsText,\n  onBlur,\n  onChange: onChangeProp,\n  onInputChange: onInputChangeProp,\n  onFocus,\n  options,\n  value,\n  getIsOptionEqualToValue,\n  testId,\n  translate,\n}: AutocompleteProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>) => {\n  const { t } = useTranslation();\n  const controlledStateRef = useRef(\n    getControlState({\n      controlledValue: value,\n      uncontrolledValue: defaultValue,\n    }),\n  );\n\n  const isVirtualized = useRef(Boolean(isVirtualizedProp));\n\n  const defaultValueProp = useMemo<\n    | AutocompleteValue<\n        OptionType,\n        HasMultipleChoices,\n        undefined,\n        IsCustomValueAllowed\n      >\n    | undefined\n  >(() => {\n    if (hasMultipleChoices) {\n      if (value === undefined) {\n        return defaultValue;\n      }\n      return [] as AutocompleteValue<\n        OptionType,\n        HasMultipleChoices,\n        undefined,\n        IsCustomValueAllowed\n      >;\n    }\n    return value === undefined ? defaultValue : undefined;\n  }, [defaultValue, hasMultipleChoices, value]);\n\n  const valueProps = useInputValues({\n    defaultValue: defaultValueProp,\n    value: value,\n    controlState: controlledStateRef.current,\n  });\n\n  const inputValueProp = useMemo(() => {\n    if (controlledStateRef.current === ComponentControlledState.CONTROLLED) {\n      return { inputValue };\n    }\n    return undefined;\n  }, [inputValue]);\n\n  const renderInput = useCallback(\n    ({\n      InputLabelProps,\n      InputProps,\n      ...params\n    }: AutocompleteRenderInputParams) => (\n      <Field\n        ariaDescribedBy={ariaDescribedBy}\n        errorMessage={errorMessage}\n        errorMessageList={errorMessageList}\n        fieldType=\"single\"\n        hasVisibleLabel\n        //@ts-expect-error htmlFor does not exist ont he InputLabelProps for autocomplete\n        id={InputLabelProps.htmlFor}\n        isFullWidth={isFullWidth}\n        hint={hint}\n        HintLinkComponent={HintLinkComponent}\n        label={label}\n        isOptional={isOptional}\n        renderFieldComponent={({\n          ariaDescribedBy,\n          id,\n          errorMessageElementId,\n          labelElementId,\n        }) => (\n          <InputBase\n            {...params}\n            {...InputProps}\n            inputProps={{\n              ...params.inputProps,\n              \"aria-errormessage\": errorMessageElementId,\n              \"aria-labelledby\": labelElementId,\n              \"data-se\": testId,\n            }}\n            aria-describedby={ariaDescribedBy}\n            id={id}\n            name={nameOverride ?? id}\n            required={!isOptional}\n          />\n        )}\n      />\n    ),\n    [\n      ariaDescribedBy,\n      errorMessage,\n      errorMessageList,\n      hint,\n      HintLinkComponent,\n      isFullWidth,\n      isOptional,\n      label,\n      nameOverride,\n      testId,\n    ],\n  );\n\n  const Row = ({\n    data,\n    index,\n    setItemSize,\n    style,\n  }: ListChildComponentProps & { setItemSize: SetItemSize }) => {\n    const rowRef = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n      if (rowRef.current) {\n        /**\n         * Checking for child height to workaround a bug where the clientHeight of the row isn't updated correctly\n         * @see here if you need to know more: https://github.com/bvaughn/react-window/issues/582#issuecomment-1883074908\n         */\n        const firstChild = rowRef.current.firstElementChild;\n        const height = firstChild\n          ? firstChild.clientHeight\n          : rowRef.current.clientHeight;\n\n        setItemSize(height);\n      }\n    }, [index, rowRef, setItemSize]);\n\n    const baseOption = data[index];\n    const { key, props } = baseOption;\n\n    /**\n     * react-window calculates the absolute positions of the list items, via an inline style, so\n     * we need to add it to each list item that is being rendered in the viewable list window.\n     * @see here if you need to know more: https://github.com/bvaughn/react-window?tab=readme-ov-file#why-is-my-list-blank-when-i-scroll\n     */\n    const styles = useMemo(\n      () => ({\n        ...style,\n        height: \"auto\",\n      }),\n      [style],\n    );\n\n    return (\n      <div ref={rowRef}>\n        <li {...props} key={key} style={styles} />\n      </div>\n    );\n  };\n\n  const OuterListboxContext = createContext({});\n\n  const OuterListboxElementType = forwardRef<HTMLDivElement>((props, ref) => {\n    const outerProps = useContext(OuterListboxContext);\n    return <div ref={ref} {...props} {...outerProps} />;\n  });\n\n  const useResetCache = (length: number) => {\n    const resetCacheRef = useRef<VariableSizeList>(null);\n    useEffect(() => {\n      if (resetCacheRef.current) {\n        resetCacheRef.current.resetAfterIndex(0, true);\n      }\n    }, [length]);\n    return resetCacheRef;\n  };\n\n  const ListboxComponent = forwardRef<\n    HTMLDivElement,\n    HTMLAttributes<HTMLElement>\n  >(function (props, ref) {\n    const [listHeight, setListHeight] = useState(0);\n\n    const { children, ...other } = props;\n    const itemData: ReactElement[] = (children as ReactElement[]).flatMap(\n      (item: ReactElement & { children?: ReactElement[] }) =>\n        [item].concat(item.children || []),\n    );\n\n    const sizeMap = useRef<number[]>([]);\n\n    const getListBoxHeight = useCallback(() => {\n      // 8px of padding top/bottom applied by MUI\n      const COMBINED_LISTBOX_PADDING = 16;\n\n      if (itemData.length > OVERSCAN_ROW_COUNT) {\n        // has a max-height of 40vh set in CSS. This is only set because height needs to be a number\n        return 99999;\n      } else {\n        const itemsHeightCalculated = itemData\n          .map((_, index) => sizeMap.current[index] || 0)\n          .reduce(\n            (prevItemHeight, nextItemHeight) => prevItemHeight + nextItemHeight,\n            0,\n          );\n        return COMBINED_LISTBOX_PADDING + itemsHeightCalculated;\n      }\n    }, [itemData, sizeMap]);\n\n    useEffect(() => {\n      if (sizeMap.current.length && itemData.length) {\n        setListHeight(getListBoxHeight());\n      }\n    }, [getListBoxHeight, itemData, sizeMap]);\n\n    // The number of items (rows or columns) to render outside of the visible area for performance and scrolling reasons\n    const OVERSCAN_ROW_COUNT = 8;\n\n    const gridRef = useResetCache(itemData.length);\n\n    const setItemSize = useCallback<SetItemSize>(\n      (size) => {\n        gridRef?.current?.resetAfterIndex(0, true);\n        sizeMap.current = sizeMap.current.concat(size);\n      },\n      [gridRef, sizeMap],\n    );\n    const getItemSize = useCallback(\n      // using 45px as a sane default here to avoid a lot of content shift on repaint\n      (index: number) => sizeMap.current[index] || 45,\n      [sizeMap],\n    );\n\n    return (\n      <ListboxContainer ref={ref}>\n        <OuterListboxContext.Provider value={other}>\n          <VariableSizeList\n            innerElementType=\"ul\"\n            itemData={itemData}\n            itemCount={itemData.length}\n            itemSize={getItemSize}\n            height={listHeight}\n            width=\"100%\"\n            ref={gridRef}\n            outerElementType={OuterListboxElementType}\n            overscanCount={OVERSCAN_ROW_COUNT}\n          >\n            {({ data, index, style }) => (\n              <Row\n                data={data}\n                index={index}\n                style={style}\n                setItemSize={setItemSize}\n              />\n            )}\n          </VariableSizeList>\n        </OuterListboxContext.Provider>\n      </ListboxContainer>\n    );\n  });\n\n  const onChange = useCallback<\n    NonNullable<\n      UseAutocompleteProps<\n        OptionType,\n        HasMultipleChoices,\n        undefined,\n        IsCustomValueAllowed\n      >[\"onChange\"]\n    >\n  >(\n    (event, value, reason, details) => {\n      onChangeProp?.(event, value, reason, details);\n    },\n    [onChangeProp],\n  );\n\n  const onInputChange = useCallback<\n    NonNullable<\n      UseAutocompleteProps<\n        OptionType,\n        HasMultipleChoices,\n        undefined,\n        IsCustomValueAllowed\n      >[\"onInputChange\"]\n    >\n  >(\n    (event, value, reason) => {\n      onInputChangeProp?.(event, value, reason);\n    },\n    [onInputChangeProp],\n  );\n\n  return (\n    <MuiAutocomplete\n      {...valueProps}\n      {...inputValueProp}\n      // conditionally provide the ListboxComponent if this needs to be virtualized\n      {...(isVirtualized.current && {\n        ListboxComponent,\n      })}\n      // AutoComplete is wrapped in a div within MUI which does not get the disabled attr. So this aria-disabled gets set in the div\n      aria-disabled={isDisabled}\n      clearText={t(\"clear.text\")}\n      closeText={t(\"close.text\")}\n      disableCloseOnSelect={hasMultipleChoices}\n      disabled={isDisabled}\n      freeSolo={isCustomValueAllowed}\n      filterSelectedOptions={true}\n      id={idOverride}\n      fullWidth={isFullWidth}\n      loading={isLoading}\n      multiple={hasMultipleChoices}\n      noOptionsText={noOptionsText}\n      onBlur={onBlur}\n      onChange={onChange}\n      onInputChange={onInputChange}\n      onFocus={onFocus}\n      openText={t(\"open.text\")}\n      options={options}\n      readOnly={isReadOnly}\n      renderInput={renderInput}\n      isOptionEqualToValue={getIsOptionEqualToValue}\n      translate={translate}\n    />\n  );\n};\n\n// Need the `typeof Autocomplete` because generics don't get passed through\nconst MemoizedAutocomplete = memo(Autocomplete) as typeof Autocomplete;\n// @ts-expect-error displayName is expected to not be on `typeof Autocomplete`\nMemoizedAutocomplete.displayName = \"Autocomplete\";\n\nexport { MemoizedAutocomplete as Autocomplete };\n"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAUA,SACEA,aAAa,EACbC,UAAU,EAEVC,IAAI,EAEJC,WAAW,EACXC,UAAU,EACVC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACH,OAAO;AACd,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,gBAAgB,QAAiC,cAAc;AACxE,SAASC,cAAc,QAAQ,eAAe;AAAC,SAEtCC,KAAK;AAAA,SAIZC,wBAAwB,EACxBC,cAAc,EACdC,eAAe;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,aAAA,IAAAC,cAAA;AAkKjB,MAAMC,gBAAgB,GAAGX,MAAM,CAACY,GAAI;AACpC;AACA;AACA,CAAC;AAED,MAAMC,YAAY,GAAGA,CAInB;EACAC,eAAe;EACfC,YAAY;EACZC,YAAY;EACZC,gBAAgB;EAChBC,kBAAkB;EAClBC,EAAE,EAAEC,UAAU;EACdC,UAAU;EACVC,oBAAoB;EACpBC,UAAU;EACVC,WAAW,GAAG,KAAK;EACnBC,SAAS;EACTC,UAAU,GAAG,KAAK;EAClBC,UAAU;EACVC,aAAa,EAAEC,iBAAiB,GAAG,KAAK;EACxCC,IAAI;EACJC,iBAAiB;EACjBC,KAAK;EACLC,IAAI,EAAEC,YAAY;EAClBC,aAAa;EACbC,MAAM;EACNC,QAAQ,EAAEC,YAAY;EACtBC,aAAa,EAAEC,iBAAiB;EAChCC,OAAO;EACPC,OAAO;EACPC,KAAK;EACLC,uBAAuB;EACvBC,MAAM;EACNC;AACuE,CAAC,KAAK;EAC7E,MAAM;IAAEC;EAAE,CAAC,GAAG7C,cAAc,CAAC,CAAC;EAC9B,MAAM8C,kBAAkB,GAAGlD,MAAM,CAC/BQ,eAAe,CAAC;IACd2C,eAAe,EAAEN,KAAK;IACtBO,iBAAiB,EAAEnC;EACrB,CAAC,CACH,CAAC;EAED,MAAMa,aAAa,GAAG9B,MAAM,CAACqD,OAAO,CAACtB,iBAAiB,CAAC,CAAC;EAExD,MAAMuB,gBAAgB,GAAGvD,OAAO,CAQ9B,MAAM;IACN,IAAIqB,kBAAkB,EAAE;MACtB,IAAIyB,KAAK,KAAKU,SAAS,EAAE;QACvB,OAAOtC,YAAY;MACrB;MACA,OAAO,EAAE;IAMX;IACA,OAAO4B,KAAK,KAAKU,SAAS,GAAGtC,YAAY,GAAGsC,SAAS;EACvD,CAAC,EAAE,CAACtC,YAAY,EAAEG,kBAAkB,EAAEyB,KAAK,CAAC,CAAC;EAE7C,MAAMW,UAAU,GAAGjD,cAAc,CAAC;IAChCU,YAAY,EAAEqC,gBAAgB;IAC9BT,KAAK,EAAEA,KAAK;IACZY,YAAY,EAAEP,kBAAkB,CAACQ;EACnC,CAAC,CAAC;EAEF,MAAMC,cAAc,GAAG5D,OAAO,CAAC,MAAM;IACnC,IAAImD,kBAAkB,CAACQ,OAAO,KAAKpD,wBAAwB,CAACsD,UAAU,EAAE;MACtE,OAAO;QAAErC;MAAW,CAAC;IACvB;IACA,OAAOgC,SAAS;EAClB,CAAC,EAAE,CAAChC,UAAU,CAAC,CAAC;EAEhB,MAAMsC,WAAW,GAAGjE,WAAW,CAC7B,CAAC;IACCkE,eAAe;IACfC,UAAU;IACV,GAAGC;EAC0B,CAAC,KAC9BtD,IAAA,CAACL,KAAK;IACJW,eAAe,EAAEA,eAAgB;IACjCE,YAAY,EAAEA,YAAa;IAC3BC,gBAAgB,EAAEA,gBAAiB;IACnC8C,SAAS,EAAC,QAAQ;IAClBC,eAAe;IAEf7C,EAAE,EAAEyC,eAAe,CAACK,OAAQ;IAC5BzC,WAAW,EAAEA,WAAY;IACzBM,IAAI,EAAEA,IAAK;IACXC,iBAAiB,EAAEA,iBAAkB;IACrCC,KAAK,EAAEA,KAAM;IACbN,UAAU,EAAEA,UAAW;IACvBwC,oBAAoB,EAAEA,CAAC;MACrBpD,eAAe;MACfK,EAAE;MACFgD,qBAAqB;MACrBC;IACF,CAAC,KACC5D,IAAA,CAAA6D,UAAA;MAAA,GACMP,MAAM;MAAA,GACND,UAAU;MACdS,UAAU,EAAE;QACV,GAAGR,MAAM,CAACQ,UAAU;QACpB,mBAAmB,EAAEH,qBAAqB;QAC1C,iBAAiB,EAAEC,cAAc;QACjC,SAAS,EAAEvB;MACb,CAAE;MACF,oBAAkB/B,eAAgB;MAClCK,EAAE,EAAEA,EAAG;MACPc,IAAI,EAAEC,YAAY,IAAIf,EAAG;MACzBoD,QAAQ,EAAE,CAAC7C;IAAW,CACvB;EACD,CACH,CACF,EACD,CACEZ,eAAe,EACfE,YAAY,EACZC,gBAAgB,EAChBa,IAAI,EACJC,iBAAiB,EACjBP,WAAW,EACXE,UAAU,EACVM,KAAK,EACLE,YAAY,EACZW,MAAM,CAEV,CAAC;EAED,MAAM2B,GAAG,GAAGA,CAAC;IACXC,IAAI;IACJC,KAAK;IACLC,WAAW;IACXC;EACsD,CAAC,KAAK;IAC5D,MAAMC,MAAM,GAAG/E,MAAM,CAAiB,IAAI,CAAC;IAE3CF,SAAS,CAAC,MAAM;MACd,IAAIiF,MAAM,CAACrB,OAAO,EAAE;QAKlB,MAAMsB,UAAU,GAAGD,MAAM,CAACrB,OAAO,CAACuB,iBAAiB;QACnD,MAAMC,MAAM,GAAGF,UAAU,GACrBA,UAAU,CAACG,YAAY,GACvBJ,MAAM,CAACrB,OAAO,CAACyB,YAAY;QAE/BN,WAAW,CAACK,MAAM,CAAC;MACrB;IACF,CAAC,EAAE,CAACN,KAAK,EAAEG,MAAM,EAAEF,WAAW,CAAC,CAAC;IAEhC,MAAMO,UAAU,GAAGT,IAAI,CAACC,KAAK,CAAC;IAC9B,MAAM;MAAES,GAAG;MAAEC;IAAM,CAAC,GAAGF,UAAU;IAOjC,MAAMG,MAAM,GAAGxF,OAAO,CACpB,OAAO;MACL,GAAG+E,KAAK;MACRI,MAAM,EAAE;IACV,CAAC,CAAC,EACF,CAACJ,KAAK,CACR,CAAC;IAED,OACEpE,IAAA;MAAK8E,GAAG,EAAET,MAAO;MAAAU,QAAA,EACf7E,cAAA;QAAA,GAAQ0E,KAAK;QAAED,GAAG,EAAEA,GAAI;QAACP,KAAK,EAAES;MAAO,CAAE;IAAC,CACvC,CAAC;EAEV,CAAC;EAED,MAAMG,mBAAmB,GAAGjG,aAAa,CAAC,CAAC,CAAC,CAAC;EAE7C,MAAMkG,uBAAuB,GAAGjG,UAAU,CAAiB,CAAC4F,KAAK,EAAEE,GAAG,KAAK;IACzE,MAAMI,UAAU,GAAG/F,UAAU,CAAC6F,mBAAmB,CAAC;IAClD,OAAOhF,IAAA;MAAK8E,GAAG,EAAEA,GAAI;MAAA,GAAKF,KAAK;MAAA,GAAMM;IAAU,CAAG,CAAC;EACrD,CAAC,CAAC;EAEF,MAAMC,aAAa,GAAIC,MAAc,IAAK;IACxC,MAAMC,aAAa,GAAG/F,MAAM,CAAmB,IAAI,CAAC;IACpDF,SAAS,CAAC,MAAM;MACd,IAAIiG,aAAa,CAACrC,OAAO,EAAE;QACzBqC,aAAa,CAACrC,OAAO,CAACsC,eAAe,CAAC,CAAC,EAAE,IAAI,CAAC;MAChD;IACF,CAAC,EAAE,CAACF,MAAM,CAAC,CAAC;IACZ,OAAOC,aAAa;EACtB,CAAC;EAED,MAAME,gBAAgB,GAAGvG,UAAU,CAGjC,UAAU4F,KAAK,EAAEE,GAAG,EAAE;IACtB,MAAM,CAACU,UAAU,EAAEC,aAAa,CAAC,GAAGlG,QAAQ,CAAC,CAAC,CAAC;IAE/C,MAAM;MAAEwF,QAAQ;MAAE,GAAGW;IAAM,CAAC,GAAGd,KAAK;IACpC,MAAMe,QAAwB,GAAIZ,QAAQ,CAAoBa,OAAO,CAClEC,IAAkD,IACjD,CAACA,IAAI,CAAC,CAACC,MAAM,CAACD,IAAI,CAACd,QAAQ,IAAI,EAAE,CACrC,CAAC;IAED,MAAMgB,OAAO,GAAGzG,MAAM,CAAW,EAAE,CAAC;IAEpC,MAAM0G,gBAAgB,GAAG9G,WAAW,CAAC,MAAM;MAEzC,MAAM+G,wBAAwB,GAAG,EAAE;MAEnC,IAAIN,QAAQ,CAACP,MAAM,GAAGc,kBAAkB,EAAE;QAExC,OAAO,KAAK;MACd,CAAC,MAAM;QACL,MAAMC,qBAAqB,GAAGR,QAAQ,CACnCS,GAAG,CAAC,CAACC,CAAC,EAAEnC,KAAK,KAAK6B,OAAO,CAAC/C,OAAO,CAACkB,KAAK,CAAC,IAAI,CAAC,CAAC,CAC9CoC,MAAM,CACL,CAACC,cAAc,EAAEC,cAAc,KAAKD,cAAc,GAAGC,cAAc,EACnE,CACF,CAAC;QACH,OAAOP,wBAAwB,GAAGE,qBAAqB;MACzD;IACF,CAAC,EAAE,CAACR,QAAQ,EAAEI,OAAO,CAAC,CAAC;IAEvB3G,SAAS,CAAC,MAAM;MACd,IAAI2G,OAAO,CAAC/C,OAAO,CAACoC,MAAM,IAAIO,QAAQ,CAACP,MAAM,EAAE;QAC7CK,aAAa,CAACO,gBAAgB,CAAC,CAAC,CAAC;MACnC;IACF,CAAC,EAAE,CAACA,gBAAgB,EAAEL,QAAQ,EAAEI,OAAO,CAAC,CAAC;IAGzC,MAAMG,kBAAkB,GAAG,CAAC;IAE5B,MAAMO,OAAO,GAAGtB,aAAa,CAACQ,QAAQ,CAACP,MAAM,CAAC;IAE9C,MAAMjB,WAAW,GAAGjF,WAAW,CAC5BwH,IAAI,IAAK;MACRD,OAAO,EAAEzD,OAAO,EAAEsC,eAAe,CAAC,CAAC,EAAE,IAAI,CAAC;MAC1CS,OAAO,CAAC/C,OAAO,GAAG+C,OAAO,CAAC/C,OAAO,CAAC8C,MAAM,CAACY,IAAI,CAAC;IAChD,CAAC,EACD,CAACD,OAAO,EAAEV,OAAO,CACnB,CAAC;IACD,MAAMY,WAAW,GAAGzH,WAAW,CAE5BgF,KAAa,IAAK6B,OAAO,CAAC/C,OAAO,CAACkB,KAAK,CAAC,IAAI,EAAE,EAC/C,CAAC6B,OAAO,CACV,CAAC;IAED,OACE/F,IAAA,CAACG,gBAAgB;MAAC2E,GAAG,EAAEA,GAAI;MAAAC,QAAA,EACzB/E,IAAA,CAACgF,mBAAmB,CAAC4B,QAAQ;QAACzE,KAAK,EAAEuD,KAAM;QAAAX,QAAA,EACzC/E,IAAA,CAACP,gBAAgB;UACfoH,gBAAgB,EAAC,IAAI;UACrBlB,QAAQ,EAAEA,QAAS;UACnBmB,SAAS,EAAEnB,QAAQ,CAACP,MAAO;UAC3B2B,QAAQ,EAAEJ,WAAY;UACtBnC,MAAM,EAAEgB,UAAW;UACnBwB,KAAK,EAAC,MAAM;UACZlC,GAAG,EAAE2B,OAAQ;UACbQ,gBAAgB,EAAEhC,uBAAwB;UAC1CiC,aAAa,EAAEhB,kBAAmB;UAAAnB,QAAA,EAEjCA,CAAC;YAAEd,IAAI;YAAEC,KAAK;YAAEE;UAAM,CAAC,KACtBpE,IAAA,CAACgE,GAAG;YACFC,IAAI,EAAEA,IAAK;YACXC,KAAK,EAAEA,KAAM;YACbE,KAAK,EAAEA,KAAM;YACbD,WAAW,EAAEA;UAAY,CAC1B;QACF,CACe;MAAC,CACS;IAAC,CACf,CAAC;EAEvB,CAAC,CAAC;EAEF,MAAMtC,QAAQ,GAAG3C,WAAW,CAU1B,CAACiI,KAAK,EAAEhF,KAAK,EAAEiF,MAAM,EAAEC,OAAO,KAAK;IACjCvF,YAAY,GAAGqF,KAAK,EAAEhF,KAAK,EAAEiF,MAAM,EAAEC,OAAO,CAAC;EAC/C,CAAC,EACD,CAACvF,YAAY,CACf,CAAC;EAED,MAAMC,aAAa,GAAG7C,WAAW,CAU/B,CAACiI,KAAK,EAAEhF,KAAK,EAAEiF,MAAM,KAAK;IACxBpF,iBAAiB,GAAGmF,KAAK,EAAEhF,KAAK,EAAEiF,MAAM,CAAC;EAC3C,CAAC,EACD,CAACpF,iBAAiB,CACpB,CAAC;EAED,OACEhC,IAAA,CAAAsH,aAAA;IAAA,GACMxE,UAAU;IAAA,GACVG,cAAc;IAAA,IAEb7B,aAAa,CAAC4B,OAAO,IAAI;MAC5BuC;IACF,CAAC;IAED,iBAAexE,UAAW;IAC1BwG,SAAS,EAAEhF,CAAC,CAAC,YAAY,CAAE;IAC3BiF,SAAS,EAAEjF,CAAC,CAAC,YAAY,CAAE;IAC3BkF,oBAAoB,EAAE/G,kBAAmB;IACzCgH,QAAQ,EAAE3G,UAAW;IACrB4G,QAAQ,EAAE7G,oBAAqB;IAC/B8G,qBAAqB,EAAE,IAAK;IAC5BjH,EAAE,EAAEC,UAAW;IACfiH,SAAS,EAAE7G,WAAY;IACvB8G,OAAO,EAAE7G,SAAU;IACnB8G,QAAQ,EAAErH,kBAAmB;IAC7BiB,aAAa,EAAEA,aAAc;IAC7BC,MAAM,EAAEA,MAAO;IACfC,QAAQ,EAAEA,QAAS;IACnBE,aAAa,EAAEA,aAAc;IAC7BE,OAAO,EAAEA,OAAQ;IACjB+F,QAAQ,EAAEzF,CAAC,CAAC,WAAW,CAAE;IACzBL,OAAO,EAAEA,OAAQ;IACjB+F,QAAQ,EAAE9G,UAAW;IACrBgC,WAAW,EAAEA,WAAY;IACzB+E,oBAAoB,EAAE9F,uBAAwB;IAC9CE,SAAS,EAAEA;EAAU,CACtB,CAAC;AAEN,CAAC;AAGD,MAAM6F,oBAAoB,GAAGlJ,IAAI,CAACoB,YAAY,CAAwB;AAEtE8H,oBAAoB,CAACC,WAAW,GAAG,cAAc;AAEjD,SAASD,oBAAoB,IAAI9H,YAAY"}
+{"version":3,"file":"Autocomplete.js","names":["createContext","forwardRef","memo","useCallback","useContext","useEffect","useMemo","useRef","useState","styled","VariableSizeList","useTranslation","Field","ComponentControlledState","useInputValues","getControlState","jsx","_jsx","createElement","_createElement","AutocompleteTestSelector","accessibleText","errorMessage","hint","label","children","list","listItem","elementSelector","method","options","role","isControlledElement","ListboxContainer","div","Autocomplete","ariaDescribedBy","defaultValue","errorMessageList","hasMultipleChoices","id","idOverride","inputValue","isCustomValueAllowed","isDisabled","isFullWidth","isLoading","isOptional","isReadOnly","isVirtualized","isVirtualizedProp","HintLinkComponent","name","nameOverride","noOptionsText","onBlur","onChange","onChangeProp","onInputChange","onInputChangeProp","onFocus","value","getIsOptionEqualToValue","testId","translate","t","controlledStateRef","controlledValue","uncontrolledValue","Boolean","defaultValueProp","undefined","valueProps","controlState","current","inputValueProp","CONTROLLED","renderInput","InputLabelProps","InputProps","params","fieldType","hasVisibleLabel","htmlFor","renderFieldComponent","errorMessageElementId","labelElementId","_InputBase","inputProps","required","Row","data","index","setItemSize","style","rowRef","firstChild","firstElementChild","height","clientHeight","baseOption","key","props","styles","ref","OuterListboxContext","OuterListboxElementType","outerProps","useResetCache","length","resetCacheRef","resetAfterIndex","ListboxComponent","listHeight","setListHeight","other","itemData","flatMap","item","concat","sizeMap","getListBoxHeight","COMBINED_LISTBOX_PADDING","OVERSCAN_ROW_COUNT","itemsHeightCalculated","map","_","reduce","prevItemHeight","nextItemHeight","gridRef","size","getItemSize","Provider","innerElementType","itemCount","itemSize","width","outerElementType","overscanCount","event","reason","details","_Autocomplete","clearText","closeText","disableCloseOnSelect","disabled","freeSolo","filterSelectedOptions","fullWidth","loading","multiple","openText","readOnly","isOptionEqualToValue","MemoizedAutocomplete","displayName"],"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  UseAutocompleteProps,\n  AutocompleteValue,\n  AutocompleteRenderInputParams,\n} from \"@mui/material\";\nimport {\n  createContext,\n  forwardRef,\n  HTMLAttributes,\n  memo,\n  ReactElement,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport styled from \"@emotion/styled\";\nimport { VariableSizeList, ListChildComponentProps } from \"react-window\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { Field } from \"./Field\";\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport type { HtmlProps } from \"./HtmlProps\";\nimport {\n  ComponentControlledState,\n  useInputValues,\n  getControlState,\n} from \"./inputUtils\";\nimport { TestSelector } from \"./test-selectors\";\n\nexport const AutocompleteTestSelector = {\n  accessibleText: {\n    errorMessage: \"errorMessage\",\n    hint: \"description\",\n    label: \"label\",\n  },\n  children: {\n    list: {\n      children: {\n        listItem: {\n          elementSelector: {\n            method: \"ByRole\",\n            options: {\n              label: \"name\",\n            },\n            role: \"option\",\n          },\n        },\n      },\n      isControlledElement: true,\n    },\n  },\n  elementSelector: {\n    method: \"ByRole\",\n    options: {\n      label: \"name\",\n    },\n    role: \"combobox\",\n  },\n} as const satisfies TestSelector;\n\ntype SetItemSize = (size: number) => void;\n\nexport type AutocompleteProps<\n  OptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined,\n> = {\n  /**\n   * The default value. Use when the component is not controlled.\n   */\n  defaultValue?: UseAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"defaultValue\"];\n  /**\n   * Enables multiple choice selection\n   */\n  hasMultipleChoices?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"multiple\"];\n  /**\n   * The value for the input\n   */\n  inputValue?: UseAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"inputValue\"];\n  /**\n   * Allows the input of custom values\n   */\n  isCustomValueAllowed?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"freeSolo\"];\n  /**\n   * Disables the Autocomplete input\n   */\n  isDisabled?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"disabled\"];\n  /**\n   * Displays a loading indicator\n   */\n  isLoading?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"loading\"];\n  /**\n   * Makes the Autocomplete input read-only\n   */\n  isReadOnly?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"readOnly\"];\n  /**\n   * The label text for the autocomplete input\n   */\n  label: string;\n  /**\n   * The text to display when no options are available\n   *\n   * default: \"No Options\"\n   */\n  noOptionsText?: string;\n  /**\n   * Callback fired when the autocomplete loses focus.\n   */\n  onBlur?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"onBlur\"];\n  /**\n   * Callback fired when a selection is made.\n   */\n  onChange?: UseAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"onChange\"];\n  /**\n   * Callback fired when the textbox receives typed characters.\n   */\n  onInputChange?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"onInputChange\"];\n  /**\n   * Callback fired when the autocomplete gains focus.\n   */\n  onFocus?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"onFocus\"];\n  /**\n   * The options for the Autocomplete input\n   */\n  options: ReadonlyArray<OptionType>;\n  /**\n   * The value of the Autocomplete input\n   */\n  value?: UseAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"value\"];\n\n  /**\n   * Used to determine if the option represents the given value. Uses strict equality by default if none provided.\n   * Both arguments need to be handled, an option can only match with one value.\n   * option: the option to test\n   * value: the value to test against\n   *\n   * You will need to implement this function if your `option` items are objects.\n   */\n  getIsOptionEqualToValue?: (option: OptionType, value: OptionType) => boolean;\n\n  /**\n   * If this component is required to display a virtualized list of options,\n   * then this value needs to be set to true.\n   * It is recommended if you're options are on the order of 10's of hundreds or more.\n   */\n  isVirtualized?: boolean;\n} & Pick<\n  FieldComponentProps,\n  | \"errorMessage\"\n  | \"errorMessageList\"\n  | \"hint\"\n  | \"HintLinkComponent\"\n  | \"id\"\n  | \"isFullWidth\"\n  | \"isOptional\"\n  | \"name\"\n> &\n  Pick<HtmlProps, \"ariaDescribedBy\" | \"testId\" | \"translate\">;\n\nconst ListboxContainer = styled.div`\n  width: 100%;\n  height: 100%;\n`;\n\nconst Autocomplete = <\n  OptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined,\n>({\n  ariaDescribedBy,\n  defaultValue,\n  errorMessage,\n  errorMessageList,\n  hasMultipleChoices,\n  id: idOverride,\n  inputValue,\n  isCustomValueAllowed,\n  isDisabled,\n  isFullWidth = false,\n  isLoading,\n  isOptional = false,\n  isReadOnly,\n  isVirtualized: isVirtualizedProp = false,\n  hint,\n  HintLinkComponent,\n  label,\n  name: nameOverride,\n  noOptionsText,\n  onBlur,\n  onChange: onChangeProp,\n  onInputChange: onInputChangeProp,\n  onFocus,\n  options,\n  value,\n  getIsOptionEqualToValue,\n  testId,\n  translate,\n}: AutocompleteProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>) => {\n  const { t } = useTranslation();\n  const controlledStateRef = useRef(\n    getControlState({\n      controlledValue: value,\n      uncontrolledValue: defaultValue,\n    }),\n  );\n\n  const isVirtualized = useRef(Boolean(isVirtualizedProp));\n\n  const defaultValueProp = useMemo<\n    | AutocompleteValue<\n        OptionType,\n        HasMultipleChoices,\n        undefined,\n        IsCustomValueAllowed\n      >\n    | undefined\n  >(() => {\n    if (hasMultipleChoices) {\n      if (value === undefined) {\n        return defaultValue;\n      }\n      return [] as AutocompleteValue<\n        OptionType,\n        HasMultipleChoices,\n        undefined,\n        IsCustomValueAllowed\n      >;\n    }\n    return value === undefined ? defaultValue : undefined;\n  }, [defaultValue, hasMultipleChoices, value]);\n\n  const valueProps = useInputValues({\n    defaultValue: defaultValueProp,\n    value: value,\n    controlState: controlledStateRef.current,\n  });\n\n  const inputValueProp = useMemo(() => {\n    if (controlledStateRef.current === ComponentControlledState.CONTROLLED) {\n      return { inputValue };\n    }\n    return undefined;\n  }, [inputValue]);\n\n  const renderInput = useCallback(\n    ({\n      InputLabelProps,\n      InputProps,\n      ...params\n    }: AutocompleteRenderInputParams) => (\n      <Field\n        ariaDescribedBy={ariaDescribedBy}\n        errorMessage={errorMessage}\n        errorMessageList={errorMessageList}\n        fieldType=\"single\"\n        hasVisibleLabel\n        //@ts-expect-error htmlFor does not exist ont he InputLabelProps for autocomplete\n        id={InputLabelProps.htmlFor}\n        isFullWidth={isFullWidth}\n        hint={hint}\n        HintLinkComponent={HintLinkComponent}\n        label={label}\n        isOptional={isOptional}\n        renderFieldComponent={({\n          ariaDescribedBy,\n          id,\n          errorMessageElementId,\n          labelElementId,\n        }) => (\n          <InputBase\n            {...params}\n            {...InputProps}\n            inputProps={{\n              ...params.inputProps,\n              \"aria-errormessage\": errorMessageElementId,\n              \"aria-labelledby\": labelElementId,\n              \"data-se\": testId,\n            }}\n            aria-describedby={ariaDescribedBy}\n            id={id}\n            name={nameOverride ?? id}\n            required={!isOptional}\n          />\n        )}\n      />\n    ),\n    [\n      ariaDescribedBy,\n      errorMessage,\n      errorMessageList,\n      hint,\n      HintLinkComponent,\n      isFullWidth,\n      isOptional,\n      label,\n      nameOverride,\n      testId,\n    ],\n  );\n\n  const Row = ({\n    data,\n    index,\n    setItemSize,\n    style,\n  }: ListChildComponentProps & { setItemSize: SetItemSize }) => {\n    const rowRef = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n      if (rowRef.current) {\n        /**\n         * Checking for child height to workaround a bug where the clientHeight of the row isn't updated correctly\n         * @see here if you need to know more: https://github.com/bvaughn/react-window/issues/582#issuecomment-1883074908\n         */\n        const firstChild = rowRef.current.firstElementChild;\n        const height = firstChild\n          ? firstChild.clientHeight\n          : rowRef.current.clientHeight;\n\n        setItemSize(height);\n      }\n    }, [index, rowRef, setItemSize]);\n\n    const baseOption = data[index];\n    const { key, props } = baseOption;\n\n    /**\n     * react-window calculates the absolute positions of the list items, via an inline style, so\n     * we need to add it to each list item that is being rendered in the viewable list window.\n     * @see here if you need to know more: https://github.com/bvaughn/react-window?tab=readme-ov-file#why-is-my-list-blank-when-i-scroll\n     */\n    const styles = useMemo(\n      () => ({\n        ...style,\n        height: \"auto\",\n      }),\n      [style],\n    );\n\n    return (\n      <div ref={rowRef}>\n        <li {...props} key={key} style={styles} />\n      </div>\n    );\n  };\n\n  const OuterListboxContext = createContext({});\n\n  const OuterListboxElementType = forwardRef<HTMLDivElement>((props, ref) => {\n    const outerProps = useContext(OuterListboxContext);\n    return <div ref={ref} {...props} {...outerProps} />;\n  });\n\n  const useResetCache = (length: number) => {\n    const resetCacheRef = useRef<VariableSizeList>(null);\n    useEffect(() => {\n      if (resetCacheRef.current) {\n        resetCacheRef.current.resetAfterIndex(0, true);\n      }\n    }, [length]);\n    return resetCacheRef;\n  };\n\n  const ListboxComponent = forwardRef<\n    HTMLDivElement,\n    HTMLAttributes<HTMLElement>\n  >(function (props, ref) {\n    const [listHeight, setListHeight] = useState(0);\n\n    const { children, ...other } = props;\n    const itemData: ReactElement[] = (children as ReactElement[]).flatMap(\n      (item: ReactElement & { children?: ReactElement[] }) =>\n        [item].concat(item.children || []),\n    );\n\n    const sizeMap = useRef<number[]>([]);\n\n    const getListBoxHeight = useCallback(() => {\n      // 8px of padding top/bottom applied by MUI\n      const COMBINED_LISTBOX_PADDING = 16;\n\n      if (itemData.length > OVERSCAN_ROW_COUNT) {\n        // has a max-height of 40vh set in CSS. This is only set because height needs to be a number\n        return 99999;\n      } else {\n        const itemsHeightCalculated = itemData\n          .map((_, index) => sizeMap.current[index] || 0)\n          .reduce(\n            (prevItemHeight, nextItemHeight) => prevItemHeight + nextItemHeight,\n            0,\n          );\n        return COMBINED_LISTBOX_PADDING + itemsHeightCalculated;\n      }\n    }, [itemData, sizeMap]);\n\n    useEffect(() => {\n      if (sizeMap.current.length && itemData.length) {\n        setListHeight(getListBoxHeight());\n      }\n    }, [getListBoxHeight, itemData, sizeMap]);\n\n    // The number of items (rows or columns) to render outside of the visible area for performance and scrolling reasons\n    const OVERSCAN_ROW_COUNT = 8;\n\n    const gridRef = useResetCache(itemData.length);\n\n    const setItemSize = useCallback<SetItemSize>(\n      (size) => {\n        gridRef?.current?.resetAfterIndex(0, true);\n        sizeMap.current = sizeMap.current.concat(size);\n      },\n      [gridRef, sizeMap],\n    );\n    const getItemSize = useCallback(\n      // using 45px as a sane default here to avoid a lot of content shift on repaint\n      (index: number) => sizeMap.current[index] || 45,\n      [sizeMap],\n    );\n\n    return (\n      <ListboxContainer ref={ref}>\n        <OuterListboxContext.Provider value={other}>\n          <VariableSizeList\n            innerElementType=\"ul\"\n            itemData={itemData}\n            itemCount={itemData.length}\n            itemSize={getItemSize}\n            height={listHeight}\n            width=\"100%\"\n            ref={gridRef}\n            outerElementType={OuterListboxElementType}\n            overscanCount={OVERSCAN_ROW_COUNT}\n          >\n            {({ data, index, style }) => (\n              <Row\n                data={data}\n                index={index}\n                style={style}\n                setItemSize={setItemSize}\n              />\n            )}\n          </VariableSizeList>\n        </OuterListboxContext.Provider>\n      </ListboxContainer>\n    );\n  });\n\n  const onChange = useCallback<\n    NonNullable<\n      UseAutocompleteProps<\n        OptionType,\n        HasMultipleChoices,\n        undefined,\n        IsCustomValueAllowed\n      >[\"onChange\"]\n    >\n  >(\n    (event, value, reason, details) => {\n      onChangeProp?.(event, value, reason, details);\n    },\n    [onChangeProp],\n  );\n\n  const onInputChange = useCallback<\n    NonNullable<\n      UseAutocompleteProps<\n        OptionType,\n        HasMultipleChoices,\n        undefined,\n        IsCustomValueAllowed\n      >[\"onInputChange\"]\n    >\n  >(\n    (event, value, reason) => {\n      onInputChangeProp?.(event, value, reason);\n    },\n    [onInputChangeProp],\n  );\n\n  return (\n    <MuiAutocomplete\n      {...valueProps}\n      {...inputValueProp}\n      // conditionally provide the ListboxComponent if this needs to be virtualized\n      {...(isVirtualized.current && {\n        ListboxComponent,\n      })}\n      // AutoComplete is wrapped in a div within MUI which does not get the disabled attr. So this aria-disabled gets set in the div\n      aria-disabled={isDisabled}\n      clearText={t(\"clear.text\")}\n      closeText={t(\"close.text\")}\n      disableCloseOnSelect={hasMultipleChoices}\n      disabled={isDisabled}\n      freeSolo={isCustomValueAllowed}\n      filterSelectedOptions={true}\n      id={idOverride}\n      fullWidth={isFullWidth}\n      loading={isLoading}\n      multiple={hasMultipleChoices}\n      noOptionsText={noOptionsText}\n      onBlur={onBlur}\n      onChange={onChange}\n      onInputChange={onInputChange}\n      onFocus={onFocus}\n      openText={t(\"open.text\")}\n      options={options}\n      readOnly={isReadOnly}\n      renderInput={renderInput}\n      isOptionEqualToValue={getIsOptionEqualToValue}\n      translate={translate}\n    />\n  );\n};\n\n// Need the `typeof Autocomplete` because generics don't get passed through\nconst MemoizedAutocomplete = memo(Autocomplete) as typeof Autocomplete;\n// @ts-expect-error displayName is expected to not be on `typeof Autocomplete`\nMemoizedAutocomplete.displayName = \"Autocomplete\";\n\nexport { MemoizedAutocomplete as Autocomplete };\n"],"mappings":"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"}

package/dist/Callout.js

@@ -22,40 +22,28 @@ import { Paragraph } from "./Typography.js";
 import { useUniqueId } from "./useUniqueId.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export const CalloutTestSelectors = {
-  feature: {
+export const CalloutTestSelector = {
+  accessibleText: {
+    text: "description",
+    title: "label"
+  },
+  children: {
     link: {
-      selector: {
+      elementSelector: {
         method: "ByRole",
         options: {
-          name: "${linkText}"
+          linkText: "name"
         },
-        role: "link",
-        templateVariableNames: ["linkText"]
-      }
-    },
-    text: {
-      selector: {
-        method: "ByText",
-        templateVariableNames: ["text"],
-        text: "${text}"
-      }
-    },
-    title: {
-      selector: {
-        method: "ByText",
-        templateVariableNames: ["title"],
-        text: "${title}"
+        role: "link"
       }
     }
   },
-  selector: {
+  elementSelector: {
     method: "ByRole",
     options: {
-      name: "${title}"
+      title: "name"
     },
-    role: "${role}",
-    templateVariableNames: ["role", "title"]
+    role: ["alert", "status"]
   }
 };
 export const calloutRoleValues = ["status", "alert"];

package/dist/Callout.js.map

@@ -1 +1 @@
-{"version":3,"file":"Callout.js","names":["styled","memo","useTranslation","useOdysseyDesignTokens","Paragraph","useUniqueId","jsx","_jsx","jsxs","_jsxs","CalloutTestSelectors","feature","link","selector","method","options","name","role","templateVariableNames","text","title","calloutRoleValues","calloutSeverityValues","ContentContainer","shouldForwardProp","prop","odysseyDesignTokens","marginBlockStart","Spacing4","Callout","children","linkText","linkUrl","severity","testId","translate","t","titleId","_Alert","variant","_AlertTitle","id","_Box","component","_Link","href","MemoizedCallout","displayName"],"sources":["../src/Callout.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 styled from \"@emotion/styled\";\nimport { Alert, AlertTitle, Box, Link as MuiLink } from \"@mui/material\";\nimport { memo, ReactNode } from \"react\";\nimport { useTranslation } from \"react-i18next\";\n\nimport type { HtmlProps } from \"./HtmlProps\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"./OdysseyDesignTokensContext\";\nimport { type FeatureTestSelector } from \"./test-selectors\";\nimport { Paragraph } from \"./Typography\";\nimport { useUniqueId } from \"./useUniqueId\";\n\nexport const CalloutTestSelectors = {\n  feature: {\n    link: {\n      selector: {\n        method: \"ByRole\",\n        options: {\n          name: \"${linkText}\",\n        },\n        role: \"link\",\n        templateVariableNames: [\"linkText\"],\n      },\n    },\n    text: {\n      selector: {\n        method: \"ByText\",\n        templateVariableNames: [\"text\"],\n        text: \"${text}\",\n      },\n    },\n    title: {\n      selector: {\n        method: \"ByText\",\n        templateVariableNames: [\"title\"],\n        text: \"${title}\",\n      },\n    },\n  },\n  selector: {\n    method: \"ByRole\",\n    options: {\n      name: \"${title}\",\n    },\n    role: \"${role}\",\n    templateVariableNames: [\"role\", \"title\"],\n  },\n} as const satisfies FeatureTestSelector;\n\nexport const calloutRoleValues = [\"status\", \"alert\"] as const;\nexport const calloutSeverityValues = [\n  \"success\",\n  \"info\",\n  \"warning\",\n  \"error\",\n] as const;\n\nexport type CalloutProps = {\n  /**\n   * Used to optionally pass a text list to the component\n   */\n  children?: ReactNode;\n  /**\n   * Sets the ARIA role of the Callout\n   * (\"status\" for something that dynamically updates, \"alert\" for errors, null for something\n   * unchanging)\n   */\n  role?: (typeof calloutRoleValues)[number];\n  /**\n   * Determine the color and icon of the Callout\n   */\n  severity: (typeof calloutSeverityValues)[number];\n  /**\n   * The text content of the Callout\n   */\n  text?: string;\n  /**\n   * The title of the Callout\n   */\n  title?: string;\n} & (\n  | {\n      children?: never;\n      text: string;\n    }\n  | {\n      children: ReactNode;\n      text?: never;\n    }\n) &\n  (\n    | {\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        linkUrl: string;\n        /**\n         * If defined, the Toast will include a link to the URL\n         */\n        linkText: string;\n      }\n    | {\n        linkUrl?: never;\n        linkText?: never;\n      }\n  ) &\n  Pick<HtmlProps, \"testId\" | \"translate\">;\n\nconst ContentContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({\n  \"& > * + *\": {\n    marginBlockStart: odysseyDesignTokens.Spacing4,\n  },\n}));\n\nconst Callout = ({\n  children,\n  linkText,\n  linkUrl,\n  role,\n  severity,\n  testId,\n  text,\n  title,\n  translate,\n}: CalloutProps) => {\n  const { t } = useTranslation();\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const titleId = useUniqueId();\n\n  return (\n    <Alert\n      aria-label={t(`severity.${severity}`)}\n      aria-labelledby={titleId}\n      data-se={testId}\n      role={role}\n      severity={severity}\n      variant=\"callout\"\n    >\n      {title && (\n        <AlertTitle aria-hidden id={titleId} translate={translate}>\n          {title}\n        </AlertTitle>\n      )}\n\n      <ContentContainer odysseyDesignTokens={odysseyDesignTokens}>\n        {children && <Box component=\"div\">{children}</Box>}\n        {text && <Paragraph>{text}</Paragraph>}\n        {linkUrl && (\n          <Box>\n            <MuiLink href={linkUrl} variant=\"monochrome\">\n              {linkText}\n            </MuiLink>\n          </Box>\n        )}\n      </ContentContainer>\n    </Alert>\n  );\n};\n\nconst MemoizedCallout = memo(Callout);\nMemoizedCallout.displayName = \"Callout\";\n\nexport { MemoizedCallout as Callout };\n"],"mappings":";;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,MAAM,MAAM,iBAAiB;AAEpC,SAASC,IAAI,QAAmB,OAAO;AACvC,SAASC,cAAc,QAAQ,eAAe;AAAC,SAK7CC,sBAAsB;AAAA,SAGfC,SAAS;AAAA,SACTC,WAAW;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAEpB,OAAO,MAAMC,oBAAoB,GAAG;EAClCC,OAAO,EAAE;IACPC,IAAI,EAAE;MACJC,QAAQ,EAAE;QACRC,MAAM,EAAE,QAAQ;QAChBC,OAAO,EAAE;UACPC,IAAI,EAAE;QACR,CAAC;QACDC,IAAI,EAAE,MAAM;QACZC,qBAAqB,EAAE,CAAC,UAAU;MACpC;IACF,CAAC;IACDC,IAAI,EAAE;MACJN,QAAQ,EAAE;QACRC,MAAM,EAAE,QAAQ;QAChBI,qBAAqB,EAAE,CAAC,MAAM,CAAC;QAC/BC,IAAI,EAAE;MACR;IACF,CAAC;IACDC,KAAK,EAAE;MACLP,QAAQ,EAAE;QACRC,MAAM,EAAE,QAAQ;QAChBI,qBAAqB,EAAE,CAAC,OAAO,CAAC;QAChCC,IAAI,EAAE;MACR;IACF;EACF,CAAC;EACDN,QAAQ,EAAE;IACRC,MAAM,EAAE,QAAQ;IAChBC,OAAO,EAAE;MACPC,IAAI,EAAE;IACR,CAAC;IACDC,IAAI,EAAE,SAAS;IACfC,qBAAqB,EAAE,CAAC,MAAM,EAAE,OAAO;EACzC;AACF,CAAwC;AAExC,OAAO,MAAMG,iBAAiB,GAAG,CAAC,QAAQ,EAAE,OAAO,CAAU;AAC7D,OAAO,MAAMC,qBAAqB,GAAG,CACnC,SAAS,EACT,MAAM,EACN,SAAS,EACT,OAAO,CACC;AAuDV,MAAMC,gBAAgB,GAAGvB,MAAM,CAAC,KAAK,EAAE;EACrCwB,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAAC,CAAC;EAAEC;AAA2D,CAAC,MAAM;EACtE,WAAW,EAAE;IACXC,gBAAgB,EAAED,mBAAmB,CAACE;EACxC;AACF,CAAC,CAAC,CAAC;AAEH,MAAMC,OAAO,GAAGA,CAAC;EACfC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPf,IAAI;EACJgB,QAAQ;EACRC,MAAM;EACNf,IAAI;EACJC,KAAK;EACLe;AACY,CAAC,KAAK;EAClB,MAAM;IAAEC;EAAE,CAAC,GAAGlC,cAAc,CAAC,CAAC;EAC9B,MAAMwB,mBAAmB,GAAGvB,sBAAsB,CAAC,CAAC;EACpD,MAAMkC,OAAO,GAAGhC,WAAW,CAAC,CAAC;EAE7B,OACEI,KAAA,CAAA6B,MAAA;IACE,cAAYF,CAAC,CAAE,YAAWH,QAAS,EAAC,CAAE;IACtC,mBAAiBI,OAAQ;IACzB,WAASH,MAAO;IAChBjB,IAAI,EAAEA,IAAK;IACXgB,QAAQ,EAAEA,QAAS;IACnBM,OAAO,EAAC,SAAS;IAAAT,QAAA,GAEhBV,KAAK,IACJb,IAAA,CAAAiC,WAAA;MAAY,mBAAW;MAACC,EAAE,EAAEJ,OAAQ;MAACF,SAAS,EAAEA,SAAU;MAAAL,QAAA,EACvDV;IAAK,CACI,CACb,EAEDX,KAAA,CAACc,gBAAgB;MAACG,mBAAmB,EAAEA,mBAAoB;MAAAI,QAAA,GACxDA,QAAQ,IAAIvB,IAAA,CAAAmC,IAAA;QAAKC,SAAS,EAAC,KAAK;QAAAb,QAAA,EAAEA;MAAQ,CAAM,CAAC,EACjDX,IAAI,IAAIZ,IAAA,CAACH,SAAS;QAAA0B,QAAA,EAAEX;MAAI,CAAY,CAAC,EACrCa,OAAO,IACNzB,IAAA,CAAAmC,IAAA;QAAAZ,QAAA,EACEvB,IAAA,CAAAqC,KAAA;UAASC,IAAI,EAAEb,OAAQ;UAACO,OAAO,EAAC,YAAY;UAAAT,QAAA,EACzCC;QAAQ,CACF;MAAC,CACP,CACN;IAAA,CACe,CAAC;EAAA,CACd,CAAC;AAEZ,CAAC;AAED,MAAMe,eAAe,GAAG7C,IAAI,CAAC4B,OAAO,CAAC;AACrCiB,eAAe,CAACC,WAAW,GAAG,SAAS;AAEvC,SAASD,eAAe,IAAIjB,OAAO"}
+{"version":3,"file":"Callout.js","names":["styled","memo","useTranslation","useOdysseyDesignTokens","Paragraph","useUniqueId","jsx","_jsx","jsxs","_jsxs","CalloutTestSelector","accessibleText","text","title","children","link","elementSelector","method","options","linkText","role","calloutRoleValues","calloutSeverityValues","ContentContainer","shouldForwardProp","prop","odysseyDesignTokens","marginBlockStart","Spacing4","Callout","linkUrl","severity","testId","translate","t","titleId","_Alert","variant","_AlertTitle","id","_Box","component","_Link","href","MemoizedCallout","displayName"],"sources":["../src/Callout.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 styled from \"@emotion/styled\";\nimport { Alert, AlertTitle, Box, Link as MuiLink } from \"@mui/material\";\nimport { memo, ReactNode } from \"react\";\nimport { useTranslation } from \"react-i18next\";\n\nimport type { HtmlProps } from \"./HtmlProps\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"./OdysseyDesignTokensContext\";\nimport { type TestSelector } from \"./test-selectors\";\nimport { Paragraph } from \"./Typography\";\nimport { useUniqueId } from \"./useUniqueId\";\n\nexport const CalloutTestSelector = {\n  accessibleText: {\n    text: \"description\",\n    title: \"label\",\n  },\n  children: {\n    link: {\n      elementSelector: {\n        method: \"ByRole\",\n        options: {\n          linkText: \"name\",\n        },\n        role: \"link\",\n      },\n    },\n  },\n  elementSelector: {\n    method: \"ByRole\",\n    options: {\n      title: \"name\",\n    },\n    role: [\"alert\", \"status\"],\n  },\n} as const satisfies TestSelector;\n\nexport const calloutRoleValues = [\"status\", \"alert\"] as const;\nexport const calloutSeverityValues = [\n  \"success\",\n  \"info\",\n  \"warning\",\n  \"error\",\n] as const;\n\nexport type CalloutProps = {\n  /**\n   * Used to optionally pass a text list to the component\n   */\n  children?: ReactNode;\n  /**\n   * Sets the ARIA role of the Callout\n   * (\"status\" for something that dynamically updates, \"alert\" for errors, null for something\n   * unchanging)\n   */\n  role?: (typeof calloutRoleValues)[number];\n  /**\n   * Determine the color and icon of the Callout\n   */\n  severity: (typeof calloutSeverityValues)[number];\n  /**\n   * The text content of the Callout\n   */\n  text?: string;\n  /**\n   * The title of the Callout\n   */\n  title?: string;\n} & (\n  | {\n      children?: never;\n      text: string;\n    }\n  | {\n      children: ReactNode;\n      text?: never;\n    }\n) &\n  (\n    | {\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        linkUrl: string;\n        /**\n         * If defined, the Toast will include a link to the URL\n         */\n        linkText: string;\n      }\n    | {\n        linkUrl?: never;\n        linkText?: never;\n      }\n  ) &\n  Pick<HtmlProps, \"testId\" | \"translate\">;\n\nconst ContentContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({\n  \"& > * + *\": {\n    marginBlockStart: odysseyDesignTokens.Spacing4,\n  },\n}));\n\nconst Callout = ({\n  children,\n  linkText,\n  linkUrl,\n  role,\n  severity,\n  testId,\n  text,\n  title,\n  translate,\n}: CalloutProps) => {\n  const { t } = useTranslation();\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const titleId = useUniqueId();\n\n  return (\n    <Alert\n      aria-label={t(`severity.${severity}`)}\n      aria-labelledby={titleId}\n      data-se={testId}\n      role={role}\n      severity={severity}\n      variant=\"callout\"\n    >\n      {title && (\n        <AlertTitle aria-hidden id={titleId} translate={translate}>\n          {title}\n        </AlertTitle>\n      )}\n\n      <ContentContainer odysseyDesignTokens={odysseyDesignTokens}>\n        {children && <Box component=\"div\">{children}</Box>}\n        {text && <Paragraph>{text}</Paragraph>}\n        {linkUrl && (\n          <Box>\n            <MuiLink href={linkUrl} variant=\"monochrome\">\n              {linkText}\n            </MuiLink>\n          </Box>\n        )}\n      </ContentContainer>\n    </Alert>\n  );\n};\n\nconst MemoizedCallout = memo(Callout);\nMemoizedCallout.displayName = \"Callout\";\n\nexport { MemoizedCallout as Callout };\n"],"mappings":"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"}

package/dist/DataTable/useScrollIndication.js

@@ -11,6 +11,7 @@
  */
 
 import { useCallback, useEffect, useRef } from "react";
+import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext.js";
 export const useScrollIndication = ({
   tableOuterContainer,
   tableInnerContainer,
@@ -20,6 +21,7 @@ export const useScrollIndication = ({
 }) => {
   const animationFrameIdRef = useRef(null);
   const resizeObserverRef = useRef(null);
+  const odysseyDesignTokens = useOdysseyDesignTokens();
   const checkScrollIndicators = useCallback(() => {
     if (!tableOuterContainer || !tableInnerContainer) return;
     const containerWidth = tableOuterContainer.clientWidth;
@@ -30,7 +32,9 @@ export const useScrollIndication = ({
     setIsTableContainerScrolledToEnd(containerEndScrollPosition >= contentWidth - 16);
   }, [tableInnerContainer, tableOuterContainer, setIsTableContainerScrolledToEnd, setIsTableContainerScrolledToStart]);
   useEffect(() => {
-    if (resizeObserverRef.current) return;
+    if (typeof ResizeObserver === "undefined" || resizeObserverRef.current) {
+      return;
+    }
     let debounceTimer;
     resizeObserverRef.current = new ResizeObserver(() => {
       clearTimeout(debounceTimer);
@@ -41,7 +45,7 @@ export const useScrollIndication = ({
             animationFrameIdRef.current = null;
           });
         }
-        setTableInnerContainerWidth(tableInnerContainer?.clientWidth ? `${tableInnerContainer.clientWidth}px` : "100%");
+        setTableInnerContainerWidth(tableInnerContainer?.clientWidth ? `${tableInnerContainer.clientWidth - Number(odysseyDesignTokens.BorderWidthMain) * 2}px` : "100%");
       }, 100);
     });
     if (tableOuterContainer && tableOuterContainer.parentElement) {
@@ -58,7 +62,7 @@ export const useScrollIndication = ({
         animationFrameIdRef.current = null;
       }
     };
-  }, [checkScrollIndicators, setTableInnerContainerWidth, tableOuterContainer, tableInnerContainer, setIsTableContainerScrolledToStart, setIsTableContainerScrolledToEnd]);
+  }, [checkScrollIndicators, setTableInnerContainerWidth, tableOuterContainer, tableInnerContainer, setIsTableContainerScrolledToStart, setIsTableContainerScrolledToEnd, odysseyDesignTokens.BorderWidthMain]);
   useEffect(() => {
     tableInnerContainer?.addEventListener("scroll", checkScrollIndicators);
     return () => tableInnerContainer?.removeEventListener("scroll", checkScrollIndicators);

package/dist/DataTable/useScrollIndication.js.map

@@ -1 +1 @@
-{"version":3,"file":"useScrollIndication.js","names":["useCallback","useEffect","useRef","useScrollIndication","tableOuterContainer","tableInnerContainer","setIsTableContainerScrolledToStart","setIsTableContainerScrolledToEnd","setTableInnerContainerWidth","animationFrameIdRef","resizeObserverRef","checkScrollIndicators","containerWidth","clientWidth","contentWidth","scrollWidth","containerStartScrollPosition","scrollLeft","containerEndScrollPosition","current","debounceTimer","ResizeObserver","clearTimeout","setTimeout","requestAnimationFrame","parentElement","observe","disconnect","cancelAnimationFrame","addEventListener","removeEventListener"],"sources":["../../src/DataTable/useScrollIndication.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  Dispatch,\n  SetStateAction,\n  useCallback,\n  useEffect,\n  useRef,\n} from \"react\";\n\ntype UseScrollIndicationProps = {\n  tableOuterContainer: HTMLDivElement | null;\n  tableInnerContainer: HTMLDivElement | null;\n  setIsTableContainerScrolledToStart: Dispatch<SetStateAction<boolean>>;\n  setIsTableContainerScrolledToEnd: Dispatch<SetStateAction<boolean>>;\n  setTableInnerContainerWidth: Dispatch<SetStateAction<string>>;\n};\nexport const useScrollIndication = ({\n  tableOuterContainer,\n  tableInnerContainer,\n  setIsTableContainerScrolledToStart,\n  setIsTableContainerScrolledToEnd,\n  setTableInnerContainerWidth,\n}: UseScrollIndicationProps) => {\n  const animationFrameIdRef = useRef<number | null>(null);\n\n  const resizeObserverRef = useRef<ResizeObserver | null>(null);\n\n  const checkScrollIndicators = useCallback(() => {\n    if (!tableOuterContainer || !tableInnerContainer) return;\n\n    const containerWidth = tableOuterContainer.clientWidth;\n    const contentWidth = tableInnerContainer.scrollWidth;\n    const containerStartScrollPosition = tableInnerContainer.scrollLeft;\n    const containerEndScrollPosition =\n      containerStartScrollPosition + containerWidth;\n\n    setIsTableContainerScrolledToStart(containerStartScrollPosition <= 16);\n    setIsTableContainerScrolledToEnd(\n      containerEndScrollPosition >= contentWidth - 16,\n    );\n  }, [\n    tableInnerContainer,\n    tableOuterContainer,\n    setIsTableContainerScrolledToEnd,\n    setIsTableContainerScrolledToStart,\n  ]);\n\n  useEffect(() => {\n    if (resizeObserverRef.current) return; // Avoid creating multiple observers\n\n    let debounceTimer: ReturnType<typeof setTimeout>;\n\n    resizeObserverRef.current = new ResizeObserver(() => {\n      clearTimeout(debounceTimer);\n      debounceTimer = setTimeout(() => {\n        if (!animationFrameIdRef.current) {\n          animationFrameIdRef.current = requestAnimationFrame(() => {\n            checkScrollIndicators();\n            animationFrameIdRef.current = null;\n          });\n        }\n\n        setTableInnerContainerWidth(\n          tableInnerContainer?.clientWidth\n            ? `${tableInnerContainer.clientWidth}px`\n            : \"100%\",\n        );\n      }, 100); // debounce delay\n    });\n\n    if (tableOuterContainer && tableOuterContainer.parentElement) {\n      resizeObserverRef.current.observe(tableOuterContainer.parentElement);\n    }\n\n    return () => {\n      if (resizeObserverRef.current) {\n        resizeObserverRef.current.disconnect();\n        resizeObserverRef.current = null;\n      }\n      clearTimeout(debounceTimer); // Ensure timer is cleared on component unmount\n      if (animationFrameIdRef.current) {\n        cancelAnimationFrame(animationFrameIdRef.current);\n        animationFrameIdRef.current = null;\n      }\n    };\n  }, [\n    checkScrollIndicators,\n    setTableInnerContainerWidth,\n    tableOuterContainer,\n    tableInnerContainer,\n    setIsTableContainerScrolledToStart,\n    setIsTableContainerScrolledToEnd,\n  ]);\n\n  useEffect(() => {\n    tableInnerContainer?.addEventListener(\"scroll\", checkScrollIndicators);\n    return () =>\n      tableInnerContainer?.removeEventListener(\"scroll\", checkScrollIndicators);\n  }, [tableInnerContainer, checkScrollIndicators]); // Re-run when innerContainerRef changes\n\n  // Initial check to set state correctly on mount\n  useEffect(() => {\n    checkScrollIndicators();\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n};\n"],"mappings":"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"}
+{"version":3,"file":"useScrollIndication.js","names":["useCallback","useEffect","useRef","useOdysseyDesignTokens","useScrollIndication","tableOuterContainer","tableInnerContainer","setIsTableContainerScrolledToStart","setIsTableContainerScrolledToEnd","setTableInnerContainerWidth","animationFrameIdRef","resizeObserverRef","odysseyDesignTokens","checkScrollIndicators","containerWidth","clientWidth","contentWidth","scrollWidth","containerStartScrollPosition","scrollLeft","containerEndScrollPosition","ResizeObserver","current","debounceTimer","clearTimeout","setTimeout","requestAnimationFrame","Number","BorderWidthMain","parentElement","observe","disconnect","cancelAnimationFrame","addEventListener","removeEventListener"],"sources":["../../src/DataTable/useScrollIndication.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  Dispatch,\n  SetStateAction,\n  useCallback,\n  useEffect,\n  useRef,\n} from \"react\";\nimport { useOdysseyDesignTokens } from \"../OdysseyDesignTokensContext\";\n\ntype UseScrollIndicationProps = {\n  tableOuterContainer: HTMLDivElement | null;\n  tableInnerContainer: HTMLDivElement | null;\n  setIsTableContainerScrolledToStart: Dispatch<SetStateAction<boolean>>;\n  setIsTableContainerScrolledToEnd: Dispatch<SetStateAction<boolean>>;\n  setTableInnerContainerWidth: Dispatch<SetStateAction<string>>;\n};\nexport const useScrollIndication = ({\n  tableOuterContainer,\n  tableInnerContainer,\n  setIsTableContainerScrolledToStart,\n  setIsTableContainerScrolledToEnd,\n  setTableInnerContainerWidth,\n}: UseScrollIndicationProps) => {\n  const animationFrameIdRef = useRef<number | null>(null);\n\n  const resizeObserverRef = useRef<ResizeObserver | null>(null);\n\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const checkScrollIndicators = useCallback(() => {\n    if (!tableOuterContainer || !tableInnerContainer) return;\n\n    const containerWidth = tableOuterContainer.clientWidth;\n    const contentWidth = tableInnerContainer.scrollWidth;\n    const containerStartScrollPosition = tableInnerContainer.scrollLeft;\n    const containerEndScrollPosition =\n      containerStartScrollPosition + containerWidth;\n\n    setIsTableContainerScrolledToStart(containerStartScrollPosition <= 16);\n    setIsTableContainerScrolledToEnd(\n      containerEndScrollPosition >= contentWidth - 16,\n    );\n  }, [\n    tableInnerContainer,\n    tableOuterContainer,\n    setIsTableContainerScrolledToEnd,\n    setIsTableContainerScrolledToStart,\n  ]);\n\n  useEffect(() => {\n    // Avoid creating multiple observers or if ResizeObserver is unsupported\n    if (typeof ResizeObserver === \"undefined\" || resizeObserverRef.current) {\n      return;\n    }\n\n    let debounceTimer: ReturnType<typeof setTimeout>;\n\n    resizeObserverRef.current = new ResizeObserver(() => {\n      clearTimeout(debounceTimer);\n      debounceTimer = setTimeout(() => {\n        if (!animationFrameIdRef.current) {\n          animationFrameIdRef.current = requestAnimationFrame(() => {\n            checkScrollIndicators();\n            animationFrameIdRef.current = null;\n          });\n        }\n\n        setTableInnerContainerWidth(\n          tableInnerContainer?.clientWidth\n            ? `${tableInnerContainer.clientWidth - Number(odysseyDesignTokens.BorderWidthMain) * 2}px` // Account for the border on the outer container\n            : \"100%\",\n        );\n      }, 100); // debounce delay\n    });\n\n    if (tableOuterContainer && tableOuterContainer.parentElement) {\n      resizeObserverRef.current.observe(tableOuterContainer.parentElement);\n    }\n\n    return () => {\n      if (resizeObserverRef.current) {\n        resizeObserverRef.current.disconnect();\n        resizeObserverRef.current = null;\n      }\n      clearTimeout(debounceTimer); // Ensure timer is cleared on component unmount\n      if (animationFrameIdRef.current) {\n        cancelAnimationFrame(animationFrameIdRef.current);\n        animationFrameIdRef.current = null;\n      }\n    };\n  }, [\n    checkScrollIndicators,\n    setTableInnerContainerWidth,\n    tableOuterContainer,\n    tableInnerContainer,\n    setIsTableContainerScrolledToStart,\n    setIsTableContainerScrolledToEnd,\n    odysseyDesignTokens.BorderWidthMain,\n  ]);\n\n  useEffect(() => {\n    tableInnerContainer?.addEventListener(\"scroll\", checkScrollIndicators);\n    return () =>\n      tableInnerContainer?.removeEventListener(\"scroll\", checkScrollIndicators);\n  }, [tableInnerContainer, checkScrollIndicators]); // Re-run when innerContainerRef changes\n\n  // Initial check to set state correctly on mount\n  useEffect(() => {\n    checkScrollIndicators();\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAGEA,WAAW,EACXC,SAAS,EACTC,MAAM,QACD,OAAO;AAAC,SACNC,sBAAsB;AAS/B,OAAO,MAAMC,mBAAmB,GAAGA,CAAC;EAClCC,mBAAmB;EACnBC,mBAAmB;EACnBC,kCAAkC;EAClCC,gCAAgC;EAChCC;AACwB,CAAC,KAAK;EAC9B,MAAMC,mBAAmB,GAAGR,MAAM,CAAgB,IAAI,CAAC;EAEvD,MAAMS,iBAAiB,GAAGT,MAAM,CAAwB,IAAI,CAAC;EAE7D,MAAMU,mBAAmB,GAAGT,sBAAsB,CAAC,CAAC;EAEpD,MAAMU,qBAAqB,GAAGb,WAAW,CAAC,MAAM;IAC9C,IAAI,CAACK,mBAAmB,IAAI,CAACC,mBAAmB,EAAE;IAElD,MAAMQ,cAAc,GAAGT,mBAAmB,CAACU,WAAW;IACtD,MAAMC,YAAY,GAAGV,mBAAmB,CAACW,WAAW;IACpD,MAAMC,4BAA4B,GAAGZ,mBAAmB,CAACa,UAAU;IACnE,MAAMC,0BAA0B,GAC9BF,4BAA4B,GAAGJ,cAAc;IAE/CP,kCAAkC,CAACW,4BAA4B,IAAI,EAAE,CAAC;IACtEV,gCAAgC,CAC9BY,0BAA0B,IAAIJ,YAAY,GAAG,EAC/C,CAAC;EACH,CAAC,EAAE,CACDV,mBAAmB,EACnBD,mBAAmB,EACnBG,gCAAgC,EAChCD,kCAAkC,CACnC,CAAC;EAEFN,SAAS,CAAC,MAAM;IAEd,IAAI,OAAOoB,cAAc,KAAK,WAAW,IAAIV,iBAAiB,CAACW,OAAO,EAAE;MACtE;IACF;IAEA,IAAIC,aAA4C;IAEhDZ,iBAAiB,CAACW,OAAO,GAAG,IAAID,cAAc,CAAC,MAAM;MACnDG,YAAY,CAACD,aAAa,CAAC;MAC3BA,aAAa,GAAGE,UAAU,CAAC,MAAM;QAC/B,IAAI,CAACf,mBAAmB,CAACY,OAAO,EAAE;UAChCZ,mBAAmB,CAACY,OAAO,GAAGI,qBAAqB,CAAC,MAAM;YACxDb,qBAAqB,CAAC,CAAC;YACvBH,mBAAmB,CAACY,OAAO,GAAG,IAAI;UACpC,CAAC,CAAC;QACJ;QAEAb,2BAA2B,CACzBH,mBAAmB,EAAES,WAAW,GAC3B,GAAET,mBAAmB,CAACS,WAAW,GAAGY,MAAM,CAACf,mBAAmB,CAACgB,eAAe,CAAC,GAAG,CAAE,IAAG,GACxF,MACN,CAAC;MACH,CAAC,EAAE,GAAG,CAAC;IACT,CAAC,CAAC;IAEF,IAAIvB,mBAAmB,IAAIA,mBAAmB,CAACwB,aAAa,EAAE;MAC5DlB,iBAAiB,CAACW,OAAO,CAACQ,OAAO,CAACzB,mBAAmB,CAACwB,aAAa,CAAC;IACtE;IAEA,OAAO,MAAM;MACX,IAAIlB,iBAAiB,CAACW,OAAO,EAAE;QAC7BX,iBAAiB,CAACW,OAAO,CAACS,UAAU,CAAC,CAAC;QACtCpB,iBAAiB,CAACW,OAAO,GAAG,IAAI;MAClC;MACAE,YAAY,CAACD,aAAa,CAAC;MAC3B,IAAIb,mBAAmB,CAACY,OAAO,EAAE;QAC/BU,oBAAoB,CAACtB,mBAAmB,CAACY,OAAO,CAAC;QACjDZ,mBAAmB,CAACY,OAAO,GAAG,IAAI;MACpC;IACF,CAAC;EACH,CAAC,EAAE,CACDT,qBAAqB,EACrBJ,2BAA2B,EAC3BJ,mBAAmB,EACnBC,mBAAmB,EACnBC,kCAAkC,EAClCC,gCAAgC,EAChCI,mBAAmB,CAACgB,eAAe,CACpC,CAAC;EAEF3B,SAAS,CAAC,MAAM;IACdK,mBAAmB,EAAE2B,gBAAgB,CAAC,QAAQ,EAAEpB,qBAAqB,CAAC;IACtE,OAAO,MACLP,mBAAmB,EAAE4B,mBAAmB,CAAC,QAAQ,EAAErB,qBAAqB,CAAC;EAC7E,CAAC,EAAE,CAACP,mBAAmB,EAAEO,qBAAqB,CAAC,CAAC;EAGhDZ,SAAS,CAAC,MAAM;IACdY,qBAAqB,CAAC,CAAC;EAGzB,CAAC,EAAE,EAAE,CAAC;AACR,CAAC"}

package/dist/FileUploader/FileUploadIllustration.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileUploadIllustration.js","names":["memo","styled","useOdysseyDesignTokens","jsx","_jsx","jsxs","_jsxs","UploadIllustrationContainer","div","odysseyDesignTokens","marginBlockEnd","Spacing3","padding","backgroundColor","HueNeutral50","borderRadius","svg","display","width","Spacing8","height","FileUploadIllustration","children","viewBox","fill","xmlns","d","HueNeutral200","MemoizedFileUploadIllustration","displayName"],"sources":["../../src/FileUploader/FileUploadIllustration.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 } from \"react\";\nimport styled from \"@emotion/styled\";\n\nimport {\n  useOdysseyDesignTokens,\n  DesignTokens,\n} from \"../OdysseyDesignTokensContext\";\n\nconst UploadIllustrationContainer = styled.div<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  marginBlockEnd: odysseyDesignTokens.Spacing3,\n  padding: odysseyDesignTokens.Spacing3,\n  backgroundColor: odysseyDesignTokens.HueNeutral50,\n  borderRadius: \"50%\",\n\n  svg: {\n    display: \"flex\",\n    width: odysseyDesignTokens.Spacing8,\n    height: odysseyDesignTokens.Spacing8,\n  },\n}));\n\nconst FileUploadIllustration = () => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  return (\n    <UploadIllustrationContainer\n      aria-hidden=\"true\"\n      odysseyDesignTokens={odysseyDesignTokens}\n    >\n      <svg\n        aria-hidden=\"true\"\n        viewBox=\"0 0 44 45\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M32.0763 11.001C29.3564 3.7855 21.6595 -0.565827 13.7765 0.726748C5.35441 2.10773 -0.676662 9.50714 0.0603005 17.8612C0.441865 22.1865 2.56458 25.9787 5.71703 28.614L8.28246 25.545C5.90122 23.5544 4.32811 20.7209 4.04483 17.5097C3.50262 11.3633 7.94433 5.73648 14.4238 4.67404C20.9164 3.60944 27.0806 7.52016 28.6895 13.5191C28.9239 14.3932 29.7162 15.001 30.6212 15.001H32.9114C36.8985 15.001 39.9997 18.0938 39.9997 21.7505C39.9997 24.3423 38.4576 26.6352 36.1259 27.7678L37.8736 31.3658C41.4737 29.6171 43.9997 25.9917 43.9997 21.7505C43.9997 15.7428 38.963 11.001 32.9114 11.001H32.0763Z\"\n          fill={odysseyDesignTokens.HueNeutral200}\n        />\n        <path\n          d=\"M23.9994 29.3277V44.5H19.9994V29.3289L14.4142 34.9141L11.5858 32.0857L19.7373 23.9342C20.9869 22.6845 23.0131 22.6845 24.2627 23.9342L32.4142 32.0857L29.5858 34.9141L23.9994 29.3277Z\"\n          fill={odysseyDesignTokens.HueNeutral200}\n        />\n      </svg>\n    </UploadIllustrationContainer>\n  );\n};\n\nconst MemoizedFileUploadIllustration = memo(FileUploadIllustration);\nMemoizedFileUploadIllustration.displayName = \"FileUploadIllustration\";\n\nexport { MemoizedFileUploadIllustration as FileUploadIllustration };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAQ,OAAO;AAC5B,OAAOC,MAAM,MAAM,iBAAiB;AAAC,SAGnCC,sBAAsB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAIxB,MAAMC,2BAA2B,GAAGN,MAAM,CAACO,GAAG,CAE3C,CAAC;EAAEC;AAAoB,CAAC,MAAM;EAC/BC,cAAc,EAAED,mBAAmB,CAACE,QAAQ;EAC5CC,OAAO,EAAEH,mBAAmB,CAACE,QAAQ;EACrCE,eAAe,EAAEJ,mBAAmB,CAACK,YAAY;EACjDC,YAAY,EAAE,KAAK;EAEnBC,GAAG,EAAE;IACHC,OAAO,EAAE,MAAM;IACfC,KAAK,EAAET,mBAAmB,CAACU,QAAQ;IACnCC,MAAM,EAAEX,mBAAmB,CAACU;EAC9B;AACF,CAAC,CAAC,CAAC;AAEH,MAAME,sBAAsB,GAAGA,CAAA,KAAM;EACnC,MAAMZ,mBAAmB,GAAGP,sBAAsB,CAAC,CAAC;EAEpD,OACEE,IAAA,CAACG,2BAA2B;IAC1B,eAAY,MAAM;IAClBE,mBAAmB,EAAEA,mBAAoB;IAAAa,QAAA,EAEzChB,KAAA;MACE,eAAY,MAAM;MAClBiB,OAAO,EAAC,WAAW;MACnBC,IAAI,EAAC,MAAM;MACXC,KAAK,EAAC,4BAA4B;MAAAH,QAAA,GAElClB,IAAA;QACEsB,CAAC,EAAC,ilBAAilB;QACnlBF,IAAI,EAAEf,mBAAmB,CAACkB;MAAc,CACzC,CAAC,EACFvB,IAAA;QACEsB,CAAC,EAAC,wLAAwL;QAC1LF,IAAI,EAAEf,mBAAmB,CAACkB;MAAc,CACzC,CAAC;IAAA,CACC;EAAC,CACqB,CAAC;AAElC,CAAC;AAED,MAAMC,8BAA8B,GAAG5B,IAAI,CAACqB,sBAAsB,CAAC;AACnEO,8BAA8B,CAACC,WAAW,GAAG,wBAAwB;AAErE,SAASD,8BAA8B,IAAIP,sBAAsB"}

package/dist/FileUploader/FileUploadPreview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileUploadPreview.js","names":["memo","useCallback","styled","useTranslation","useOdysseyDesignTokens","DeleteIcon","MuiPropsContext","Tooltip","jsx","_jsx","jsxs","_jsxs","PreviewContainer","div","isDisabled","odysseyDesignTokens","color","TypographyColorDisabled","marginBlockStart","Spacing2","pointerEvents","UploadedFileContainer","display","justifyContent","alignItems","button","transform","padding","Spacing1","borderRadius","BorderRadiusMain","transition","TransitionTimingMain","backgroundColor","HueNeutral100","borderColor","FocusOutlineColorPrimary","boxShadow","outline","FocusOutlineWidthMain","FocusOutlineStyle","UploadedFile","name","onFileRemove","t","deleteHandler","renderDeleteButton","muiProps","_IconButton","onClick","size","children","tabIndex","ariaType","placement","text","Consumer","FileUploadPreview","fileNames","map","index","MemoizedFileUploadPreview","displayName"],"sources":["../../src/FileUploader/FileUploadPreview.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, useCallback } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { IconButton } from \"@mui/material\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { FileUploaderProps } from \"./FileUploader\";\nimport {\n  useOdysseyDesignTokens,\n  DesignTokens,\n} from \"../OdysseyDesignTokensContext\";\nimport { DeleteIcon } from \"../icons.generated\";\nimport { MuiPropsContext, MuiPropsContextType } from \"../MuiPropsContext\";\nimport { Tooltip } from \"../Tooltip\";\n\nconst PreviewContainer = styled.div<{\n  isDisabled: FileUploaderProps[\"isDisabled\"];\n  odysseyDesignTokens: DesignTokens;\n}>(({ isDisabled, odysseyDesignTokens }) => ({\n  color: isDisabled ? odysseyDesignTokens.TypographyColorDisabled : \"inherit\",\n  marginBlockStart: odysseyDesignTokens.Spacing2,\n  pointerEvents: isDisabled ? \"none\" : \"auto\",\n}));\n\nconst UploadedFileContainer = styled.div<{ odysseyDesignTokens: DesignTokens }>(\n  {\n    display: \"flex\",\n    justifyContent: \"space-between\",\n    alignItems: \"center\",\n\n    button: {\n      transform: \"scale(0)\",\n    },\n\n    \"&:hover, &:focus-within, &:focus\": {\n      button: {\n        transform: \"scale(1)\",\n      },\n    },\n  },\n  ({ odysseyDesignTokens }) => ({\n    padding: `${odysseyDesignTokens.Spacing1} ${odysseyDesignTokens.Spacing2}`,\n    borderRadius: odysseyDesignTokens.BorderRadiusMain,\n    transition: `background-color ${odysseyDesignTokens.TransitionTimingMain}`,\n\n    \"&:hover, &:focus-within\": {\n      backgroundColor: odysseyDesignTokens.HueNeutral100,\n    },\n\n    \"&:focus\": {\n      borderColor: odysseyDesignTokens.FocusOutlineColorPrimary,\n      boxShadow: `0 0 0 2px ${odysseyDesignTokens.FocusOutlineColorPrimary}`,\n      outline: `${odysseyDesignTokens.FocusOutlineWidthMain} ${odysseyDesignTokens.FocusOutlineStyle} transparent`,\n    },\n  }),\n);\n\ntype UploadedFileProps = {\n  name: string;\n  onFileRemove?: (name: string) => void;\n};\n\nconst UploadedFile = ({ name, onFileRemove }: UploadedFileProps) => {\n  const { t } = useTranslation();\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const deleteHandler = useCallback(() => {\n    onFileRemove?.(name);\n  }, [onFileRemove, name]);\n\n  const renderDeleteButton = useCallback(\n    (muiProps: MuiPropsContextType) => {\n      return (\n        <IconButton\n          {...muiProps}\n          aria-label={t(\"fileupload.removefile.text\")}\n          onClick={deleteHandler}\n          size=\"small\"\n        >\n          <DeleteIcon />\n        </IconButton>\n      );\n    },\n    [deleteHandler, t],\n  );\n\n  return (\n    <UploadedFileContainer\n      // tabindex added to make this element focusable\n      tabIndex={0}\n      odysseyDesignTokens={odysseyDesignTokens}\n    >\n      {name}\n      <Tooltip\n        ariaType=\"description\"\n        placement=\"top\"\n        text={t(\"fileupload.removefile.text\")}\n      >\n        <MuiPropsContext.Consumer>\n          {renderDeleteButton}\n        </MuiPropsContext.Consumer>\n      </Tooltip>\n    </UploadedFileContainer>\n  );\n};\n\ntype FileUploadPreviewProps = {\n  fileNames: string[];\n  isDisabled: FileUploaderProps[\"isDisabled\"];\n  onFileRemove?: (name: string) => void;\n};\n\nconst FileUploadPreview = ({\n  fileNames,\n  isDisabled,\n  onFileRemove,\n}: FileUploadPreviewProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  return (\n    <PreviewContainer\n      data-file-preview-container=\"true\"\n      isDisabled={isDisabled}\n      odysseyDesignTokens={odysseyDesignTokens}\n    >\n      {fileNames?.map((name, index) => (\n        <UploadedFile\n          key={`${index}-${name}`}\n          onFileRemove={onFileRemove}\n          name={name}\n        />\n      ))}\n    </PreviewContainer>\n  );\n};\n\nconst MemoizedFileUploadPreview = memo(FileUploadPreview);\nMemoizedFileUploadPreview.displayName = \"FileUploadPreview\";\n\nexport { MemoizedFileUploadPreview as FileUploadPreview };\n"],"mappings":"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"}

package/dist/{labs/FileUpload.js → FileUploader/FileUploader.js}

@@ -78,7 +78,7 @@ const ButtonAndInfoContainer = styled.div({
 const CenterAlignedSupportText = styled.div({
   textAlign: "center"
 });
-const FileUpload = ({
+const FileUploader = ({
   acceptedFileTypes,
   errorMessage,
   id,
@@ -192,7 +192,8 @@ const FileUpload = ({
     })]
   });
 };
-const MemoizedFileUpload = memo(FileUpload);
-MemoizedFileUpload.displayName = "FileUpload";
-export { MemoizedFileUpload as FileUpload };
-//# sourceMappingURL=FileUpload.js.map
+const MemoizedFileUploader = memo(FileUploader);
+MemoizedFileUploader.displayName = "FileUploader";
+export { MemoizedFileUploader as FileUpload };
+export { MemoizedFileUploader as FileUploader };
+//# sourceMappingURL=FileUploader.js.map

package/dist/FileUploader/FileUploader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileUploader.js","names":["memo","useCallback","useEffect","useRef","useState","styled","useTranslation","Button","UploadIcon","Field","FileUploadPreview","FileUploadIllustration","useOdysseyDesignTokens","Support","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","fileUploadTypes","fileUploadVariants","BaseInputWrapper","div","position","alignSelf","input","width","height","opacity","InputContainer","display","alignItems","justifyContent","borderStyle","hasError","odysseyDesignTokens","padding","Spacing6","Spacing3","border","PaletteDangerMain","HueNeutral300","borderRadius","BorderRadiusMain","transition","TransitionTimingMain","borderColor","HueNeutral700","FocusOutlineColorPrimary","boxShadow","outline","FocusOutlineWidthMain","FocusOutlineStyle","outlineOffset","FocusOutlineOffsetTight","backgroundColor","HueNeutral50","BorderColorDisabled","color","TypographyColorDisabled","ButtonAndInfoContainer","flexDirection","CenterAlignedSupportText","textAlign","FileUploader","acceptedFileTypes","errorMessage","id","isDisabled","isFullWidth","isOptional","hint","HintLinkComponent","label","onChange","type","variant","t","inputRef","filesToUpload","setFilesToUpload","updateFilesToUpload","event","files","target","length","mergedFiles","value","triggerFileInputClick","current","click","removeFileFromFilesToUploadList","name","deletedFileFilteredOut","filter","file","renderFileInput","ariaDescribedBy","errorMessageElementId","labelElementId","acceptedFileTypesAsString","join","Input","accept","disabled","multiple","ref","title","children","onClick","startIcon","Boolean","fieldType","hasVisibleLabel","renderFieldComponent","fileNames","map","onFileRemove","MemoizedFileUploader","displayName","FileUpload"],"sources":["../../src/FileUploader/FileUploader.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  ChangeEvent,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport styled from \"@emotion/styled\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { Button } from \"../Button\";\nimport { UploadIcon } from \"../icons.generated\";\nimport { Field, RenderFieldComponentProps } from \"../Field\";\nimport { FieldComponentProps } from \"../FieldComponentProps\";\nimport { FileUploadPreview } from \"./FileUploadPreview\";\nimport { FileUploadIllustration } from \"./FileUploadIllustration\";\nimport {\n  useOdysseyDesignTokens,\n  DesignTokens,\n} from \"../OdysseyDesignTokensContext\";\nimport { Support } from \"../Typography\";\n\nexport const fileUploadTypes = [\"single\", \"multiple\"] as const;\nexport const fileUploadVariants = [\n  \"button\",\n  \"dragAndDrop\",\n  \"dragAndDropWithIcon\",\n] as const;\n\nconst BaseInputWrapper = styled.div({\n  position: \"relative\",\n  alignSelf: \"flex-start\",\n\n  input: {\n    position: \"absolute\",\n    width: \"100%\",\n    height: \"100%\",\n    opacity: 0,\n  },\n});\n\nconst InputContainer = styled(BaseInputWrapper)<{\n  odysseyDesignTokens: DesignTokens;\n  hasError: boolean;\n}>(\n  {\n    display: \"flex\",\n    alignSelf: \"unset\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n\n    \"&:has(input:focus)\": {\n      borderStyle: \"solid\",\n    },\n  },\n  ({ hasError, odysseyDesignTokens }) => ({\n    padding: `${odysseyDesignTokens.Spacing6} ${odysseyDesignTokens.Spacing3}`,\n    border: hasError\n      ? `1px solid ${odysseyDesignTokens.PaletteDangerMain}`\n      : `1px dashed ${odysseyDesignTokens.HueNeutral300}`,\n    borderRadius: odysseyDesignTokens.BorderRadiusMain,\n    transition: `border-color ${odysseyDesignTokens.TransitionTimingMain}, box-shadow ${odysseyDesignTokens.TransitionTimingMain}`,\n\n    \"&:hover\": {\n      borderColor: odysseyDesignTokens.HueNeutral700,\n    },\n\n    \"&:has(input:focus)\": {\n      borderColor: odysseyDesignTokens.FocusOutlineColorPrimary,\n      boxShadow: `0 0 0 1px ${odysseyDesignTokens.FocusOutlineColorPrimary}`,\n      outline: `${odysseyDesignTokens.FocusOutlineWidthMain} ${odysseyDesignTokens.FocusOutlineStyle} transparent`,\n      outlineOffset: odysseyDesignTokens.FocusOutlineOffsetTight,\n    },\n\n    \"&:has(input:disabled)\": {\n      backgroundColor: odysseyDesignTokens.HueNeutral50,\n      border: `1px solid ${odysseyDesignTokens.BorderColorDisabled}`,\n      color: odysseyDesignTokens.TypographyColorDisabled,\n\n      \"&:hover\": {\n        borderColor: odysseyDesignTokens.BorderColorDisabled,\n      },\n    },\n  }),\n);\n\nconst ButtonAndInfoContainer = styled.div({\n  display: \"flex\",\n  flexDirection: \"column\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n});\n\nconst CenterAlignedSupportText = styled.div({\n  textAlign: \"center\",\n});\n\nexport type FileUploaderProps = {\n  /**\n   * an array of file types the user is able to upload. @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept#unique_file_type_specifiers for examples\n   */\n  acceptedFileTypes?: string[];\n  /**\n   * The label for the `input` element.\n   */\n  label: string;\n  /**\n   * Function that is called when the list of ifles to upload is changed\n   */\n  onChange: (files: File[]) => void;\n  /**\n   * Either `single` or `multiple`. If `multiple`, multiple files can be uploaded\n   */\n  type?: (typeof fileUploadTypes)[number];\n  /**\n   * Either `button`, `dragAndDrop` or `dragAndDropWithIcon`. Will determine how component appears visually\n   */\n  variant: (typeof fileUploadVariants)[number];\n} & Pick<\n  FieldComponentProps,\n  | \"errorMessage\"\n  | \"hint\"\n  | \"HintLinkComponent\"\n  | \"id\"\n  | \"isDisabled\"\n  | \"isFullWidth\"\n  | \"isOptional\"\n>;\n\nconst FileUploader = ({\n  acceptedFileTypes,\n  errorMessage,\n  id,\n  isDisabled = false,\n  isFullWidth,\n  isOptional,\n  hint,\n  HintLinkComponent,\n  label,\n  onChange,\n  type,\n  variant,\n}: FileUploaderProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const { t } = useTranslation();\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [filesToUpload, setFilesToUpload] = useState<File[]>([]);\n\n  useEffect(() => {\n    onChange(filesToUpload);\n  }, [filesToUpload, onChange]);\n\n  const updateFilesToUpload = useCallback(\n    (event: ChangeEvent<HTMLInputElement>) => {\n      const { files } = event.target;\n\n      if (files && files.length > 0) {\n        const mergedFiles =\n          type === \"multiple\"\n            ? [...filesToUpload, ...files]\n            : ([...files] satisfies File[] as File[]);\n\n        setFilesToUpload(mergedFiles);\n      }\n\n      // reset input value to allow re-upload of a file with the same name\n      event.target.value = \"\";\n    },\n    [type, filesToUpload],\n  );\n\n  const triggerFileInputClick = useCallback(() => {\n    inputRef.current?.click();\n  }, [inputRef]);\n\n  const removeFileFromFilesToUploadList = useCallback<(name: string) => void>(\n    (name) => {\n      const deletedFileFilteredOut = filesToUpload.filter(\n        (file) => file.name !== name,\n      );\n      setFilesToUpload(deletedFileFilteredOut);\n    },\n    [filesToUpload],\n  );\n\n  const renderFileInput = useCallback(\n    ({\n      ariaDescribedBy,\n      errorMessageElementId,\n      id,\n      labelElementId,\n    }: RenderFieldComponentProps) => {\n      const acceptedFileTypesAsString = acceptedFileTypes?.join(\",\");\n\n      const Input = () => (\n        <input\n          accept={acceptedFileTypesAsString}\n          aria-describedby={ariaDescribedBy}\n          aria-errormessage={errorMessageElementId}\n          aria-labelledby={labelElementId}\n          disabled={isDisabled}\n          id={id}\n          multiple={type === \"multiple\"}\n          onChange={updateFilesToUpload}\n          ref={inputRef}\n          title=\"\"\n          type=\"file\"\n        />\n      );\n\n      if (variant === \"button\") {\n        return (\n          <>\n            <BaseInputWrapper>\n              <Input />\n              <Button\n                isDisabled={isDisabled}\n                label={t(\"fileupload.button.text\")}\n                onClick={triggerFileInputClick}\n                startIcon={<UploadIcon />}\n                variant=\"secondary\"\n              />\n            </BaseInputWrapper>\n          </>\n        );\n      }\n\n      return (\n        <>\n          <InputContainer\n            hasError={Boolean(errorMessage)}\n            odysseyDesignTokens={odysseyDesignTokens}\n          >\n            <Input />\n            <ButtonAndInfoContainer>\n              {variant === \"dragAndDropWithIcon\" && <FileUploadIllustration />}\n              <CenterAlignedSupportText>\n                <Support color=\"textSecondary\">\n                  {t(\"fileupload.prompt.text\")}\n                </Support>\n              </CenterAlignedSupportText>\n              <Button\n                isDisabled={isDisabled}\n                label={t(\"fileupload.button.text\")}\n                onClick={triggerFileInputClick}\n                startIcon={<UploadIcon />}\n                variant=\"secondary\"\n              />\n            </ButtonAndInfoContainer>\n          </InputContainer>\n        </>\n      );\n    },\n    [\n      acceptedFileTypes,\n      errorMessage,\n      isDisabled,\n      inputRef,\n      odysseyDesignTokens,\n      triggerFileInputClick,\n      t,\n      type,\n      updateFilesToUpload,\n      variant,\n    ],\n  );\n\n  return (\n    <>\n      <Field\n        errorMessage={errorMessage}\n        fieldType=\"single\"\n        hasVisibleLabel\n        hint={hint}\n        HintLinkComponent={HintLinkComponent}\n        id={id}\n        isDisabled={isDisabled}\n        isFullWidth={isFullWidth && variant !== \"button\"}\n        isOptional={isOptional}\n        label={label}\n        renderFieldComponent={renderFileInput}\n      />\n      {filesToUpload.length > 0 && (\n        <FileUploadPreview\n          fileNames={filesToUpload.map((file) => file.name)}\n          onFileRemove={removeFileFromFilesToUploadList}\n          isDisabled={isDisabled}\n        />\n      )}\n    </>\n  );\n};\n\nconst MemoizedFileUploader = memo(FileUploader);\nMemoizedFileUploader.displayName = \"FileUploader\";\n\nexport { MemoizedFileUploader as FileUpload };\nexport { MemoizedFileUploader as FileUploader };\n"],"mappings":"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"}

package/dist/FileUploader/index.js

@@ -0,0 +1,13 @@
+/*!
+ * 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.
+ */
+export * from "./FileUploader.js";
+//# sourceMappingURL=index.js.map

package/dist/FileUploader/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/FileUploader/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 * from \"./FileUploader\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAVA"}

package/dist/OdysseyProvider.js

@@ -16,6 +16,9 @@ import { OdysseyCacheProvider } from "./OdysseyCacheProvider.js";
 import { OdysseyThemeProvider } from "./OdysseyThemeProvider.js";
 import { OdysseyTranslationProvider } from "./OdysseyTranslationProvider.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+const scopedCssBaselineStyles = {
+  height: "inherit"
+};
 const OdysseyProvider = ({
   children,
   designTokensOverride,
@@ -39,6 +42,7 @@ const OdysseyProvider = ({
     shadowRootElement: shadowRootElement || shadowDomElement,
     themeOverride: themeOverride,
     children: _jsx(_ScopedCssBaseline, {
+      sx: scopedCssBaselineStyles,
       children: _jsx(OdysseyTranslationProvider, {
         languageCode: languageCode,
         translationOverrides: translationOverrides,

package/dist/OdysseyProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"OdysseyProvider.js","names":["memo","OdysseyCacheProvider","OdysseyThemeProvider","OdysseyTranslationProvider","jsx","_jsx","OdysseyProvider","children","designTokensOverride","emotionRoot","emotionRootElement","shadowDomElement","shadowRootElement","languageCode","nonce","stylisPlugins","themeOverride","translationOverrides","hasShadowDom","Boolean","_ScopedCssBaseline","MemoizedThemeProvider"],"sources":["../src/OdysseyProvider.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, ReactNode } from \"react\";\nimport { ScopedCssBaseline } from \"@mui/material\";\n\nimport {\n  OdysseyCacheProvider,\n  OdysseyCacheProviderProps,\n} from \"./OdysseyCacheProvider\";\nimport {\n  OdysseyThemeProvider,\n  OdysseyThemeProviderProps,\n} from \"./OdysseyThemeProvider\";\nimport {\n  OdysseyTranslationProvider,\n  OdysseyTranslationProviderProps,\n} from \"./OdysseyTranslationProvider\";\nimport { DefaultSupportedLanguages } from \"./OdysseyTranslationProvider.types\";\n\nexport type OdysseyProviderProps<\n  SupportedLanguages extends string = DefaultSupportedLanguages,\n> = OdysseyCacheProviderProps &\n  OdysseyThemeProviderProps &\n  OdysseyTranslationProviderProps<SupportedLanguages> & {\n    children: ReactNode;\n  };\n\nconst OdysseyProvider = <SupportedLanguages extends string>({\n  children,\n  designTokensOverride,\n  emotionRoot,\n  emotionRootElement,\n  shadowDomElement,\n  shadowRootElement,\n  languageCode,\n  nonce,\n  stylisPlugins,\n  themeOverride,\n  translationOverrides,\n}: OdysseyProviderProps<SupportedLanguages>) => (\n  <OdysseyCacheProvider\n    emotionRoot={emotionRoot}\n    emotionRootElement={emotionRootElement}\n    hasShadowDom={Boolean(shadowRootElement || shadowDomElement)}\n    nonce={nonce}\n    stylisPlugins={stylisPlugins}\n  >\n    <OdysseyThemeProvider\n      designTokensOverride={designTokensOverride}\n      shadowRootElement={shadowRootElement || shadowDomElement}\n      themeOverride={themeOverride}\n    >\n      <ScopedCssBaseline>\n        <OdysseyTranslationProvider<SupportedLanguages>\n          languageCode={languageCode}\n          translationOverrides={translationOverrides}\n        >\n          {children}\n        </OdysseyTranslationProvider>\n      </ScopedCssBaseline>\n    </OdysseyThemeProvider>\n  </OdysseyCacheProvider>\n);\n\nconst MemoizedThemeProvider = memo(OdysseyProvider) as typeof OdysseyProvider;\n\nexport { MemoizedThemeProvider as OdysseyProvider };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAmB,OAAO;AAAC,SAItCC,oBAAoB;AAAA,SAIpBC,oBAAoB;AAAA,SAIpBC,0BAA0B;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAa5B,MAAMC,eAAe,GAAGA,CAAoC;EAC1DC,QAAQ;EACRC,oBAAoB;EACpBC,WAAW;EACXC,kBAAkB;EAClBC,gBAAgB;EAChBC,iBAAiB;EACjBC,YAAY;EACZC,KAAK;EACLC,aAAa;EACbC,aAAa;EACbC;AACwC,CAAC,KACzCZ,IAAA,CAACJ,oBAAoB;EACnBQ,WAAW,EAAEA,WAAY;EACzBC,kBAAkB,EAAEA,kBAAmB;EACvCQ,YAAY,EAAEC,OAAO,CAACP,iBAAiB,IAAID,gBAAgB,CAAE;EAC7DG,KAAK,EAAEA,KAAM;EACbC,aAAa,EAAEA,aAAc;EAAAR,QAAA,EAE7BF,IAAA,CAACH,oBAAoB;IACnBM,oBAAoB,EAAEA,oBAAqB;IAC3CI,iBAAiB,EAAEA,iBAAiB,IAAID,gBAAiB;IACzDK,aAAa,EAAEA,aAAc;IAAAT,QAAA,EAE7BF,IAAA,CAAAe,kBAAA;MAAAb,QAAA,EACEF,IAAA,CAACF,0BAA0B;QACzBU,YAAY,EAAEA,YAAa;QAC3BI,oBAAoB,EAAEA,oBAAqB;QAAAV,QAAA,EAE1CA;MAAQ,CACiB;IAAC,CACZ;EAAC,CACA;AAAC,CACH,CACvB;AAED,MAAMc,qBAAqB,GAAGrB,IAAI,CAACM,eAAe,CAA2B;AAE7E,SAASe,qBAAqB,IAAIf,eAAe"}
+{"version":3,"file":"OdysseyProvider.js","names":["memo","OdysseyCacheProvider","OdysseyThemeProvider","OdysseyTranslationProvider","jsx","_jsx","scopedCssBaselineStyles","height","OdysseyProvider","children","designTokensOverride","emotionRoot","emotionRootElement","shadowDomElement","shadowRootElement","languageCode","nonce","stylisPlugins","themeOverride","translationOverrides","hasShadowDom","Boolean","_ScopedCssBaseline","sx","MemoizedThemeProvider"],"sources":["../src/OdysseyProvider.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, ReactNode } from \"react\";\nimport { ScopedCssBaseline } from \"@mui/material\";\n\nimport {\n  OdysseyCacheProvider,\n  OdysseyCacheProviderProps,\n} from \"./OdysseyCacheProvider\";\nimport {\n  OdysseyThemeProvider,\n  OdysseyThemeProviderProps,\n} from \"./OdysseyThemeProvider\";\nimport {\n  OdysseyTranslationProvider,\n  OdysseyTranslationProviderProps,\n} from \"./OdysseyTranslationProvider\";\nimport { DefaultSupportedLanguages } from \"./OdysseyTranslationProvider.types\";\n\nconst scopedCssBaselineStyles = {\n  height: \"inherit\",\n};\n\nexport type OdysseyProviderProps<\n  SupportedLanguages extends string = DefaultSupportedLanguages,\n> = OdysseyCacheProviderProps &\n  OdysseyThemeProviderProps &\n  OdysseyTranslationProviderProps<SupportedLanguages> & {\n    children: ReactNode;\n  };\n\nconst OdysseyProvider = <SupportedLanguages extends string>({\n  children,\n  designTokensOverride,\n  emotionRoot,\n  emotionRootElement,\n  shadowDomElement,\n  shadowRootElement,\n  languageCode,\n  nonce,\n  stylisPlugins,\n  themeOverride,\n  translationOverrides,\n}: OdysseyProviderProps<SupportedLanguages>) => (\n  <OdysseyCacheProvider\n    emotionRoot={emotionRoot}\n    emotionRootElement={emotionRootElement}\n    hasShadowDom={Boolean(shadowRootElement || shadowDomElement)}\n    nonce={nonce}\n    stylisPlugins={stylisPlugins}\n  >\n    <OdysseyThemeProvider\n      designTokensOverride={designTokensOverride}\n      shadowRootElement={shadowRootElement || shadowDomElement}\n      themeOverride={themeOverride}\n    >\n      {/* This component creates a div; for flexibility of layout of children, make it inherit its parent's height */}\n      <ScopedCssBaseline sx={scopedCssBaselineStyles}>\n        <OdysseyTranslationProvider<SupportedLanguages>\n          languageCode={languageCode}\n          translationOverrides={translationOverrides}\n        >\n          {children}\n        </OdysseyTranslationProvider>\n      </ScopedCssBaseline>\n    </OdysseyThemeProvider>\n  </OdysseyCacheProvider>\n);\n\nconst MemoizedThemeProvider = memo(OdysseyProvider) as typeof OdysseyProvider;\n\nexport { MemoizedThemeProvider as OdysseyProvider };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAmB,OAAO;AAAC,SAItCC,oBAAoB;AAAA,SAIpBC,oBAAoB;AAAA,SAIpBC,0BAA0B;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAK5B,MAAMC,uBAAuB,GAAG;EAC9BC,MAAM,EAAE;AACV,CAAC;AAUD,MAAMC,eAAe,GAAGA,CAAoC;EAC1DC,QAAQ;EACRC,oBAAoB;EACpBC,WAAW;EACXC,kBAAkB;EAClBC,gBAAgB;EAChBC,iBAAiB;EACjBC,YAAY;EACZC,KAAK;EACLC,aAAa;EACbC,aAAa;EACbC;AACwC,CAAC,KACzCd,IAAA,CAACJ,oBAAoB;EACnBU,WAAW,EAAEA,WAAY;EACzBC,kBAAkB,EAAEA,kBAAmB;EACvCQ,YAAY,EAAEC,OAAO,CAACP,iBAAiB,IAAID,gBAAgB,CAAE;EAC7DG,KAAK,EAAEA,KAAM;EACbC,aAAa,EAAEA,aAAc;EAAAR,QAAA,EAE7BJ,IAAA,CAACH,oBAAoB;IACnBQ,oBAAoB,EAAEA,oBAAqB;IAC3CI,iBAAiB,EAAEA,iBAAiB,IAAID,gBAAiB;IACzDK,aAAa,EAAEA,aAAc;IAAAT,QAAA,EAG7BJ,IAAA,CAAAiB,kBAAA;MAAmBC,EAAE,EAAEjB,uBAAwB;MAAAG,QAAA,EAC7CJ,IAAA,CAACF,0BAA0B;QACzBY,YAAY,EAAEA,YAAa;QAC3BI,oBAAoB,EAAEA,oBAAqB;QAAAV,QAAA,EAE1CA;MAAQ,CACiB;IAAC,CACZ;EAAC,CACA;AAAC,CACH,CACvB;AAED,MAAMe,qBAAqB,GAAGxB,IAAI,CAACQ,eAAe,CAA2B;AAE7E,SAASgB,qBAAqB,IAAIhB,eAAe"}

package/dist/Radio.js

@@ -21,14 +21,14 @@ const Radio = ({
   hint,
   inputRef,
   isChecked,
-  isDisabled = false,
+  isDisabled,
   isInvalid,
   label: labelProp,
   name,
   testId,
   translate,
   value,
-  isReadOnly = false,
+  isReadOnly,
   onChange: onChangeProp,
   onBlur: onBlurProp,
   onClick