@okta/odyssey-contribution-tooling 1.47.0

package/dist/esm/labs/GroupPicker.js

@@ -0,0 +1,181 @@
+import _Autocomplete from "@mui/material/Autocomplete";
+import _InputBase from "@mui/material/InputBase";
+import _Box from "@mui/material/Box";
+import _Avatar from "@mui/material/Avatar";
+/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+import { avatarClasses } from "@mui/material/Avatar";
+import { memo, useCallback, createElement as _createElement } from "react";
+import { Field } from "../Field.js";
+import { GridIcon, GroupIcon, UserIcon } from "../icons.generated/index.js";
+import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext.js";
+import { Tag } from "../Tag.js";
+import { Subordinate } from "../Typography.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const avatarImageSizeSmall = 16;
+const avatarImageSizeMedium = 24;
+const GroupPicker = ({
+  hasMultipleChoices,
+  isCustomValueAllowed,
+  isDisabled,
+  isLoading,
+  isOptional = false,
+  isReadOnly,
+  hint,
+  label,
+  onChange,
+  onInputChange,
+  options,
+  value,
+  testId
+}) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const isOptionEqualToValue = useCallback((sourceValue, targetValue) => {
+    return sourceValue.id === targetValue.id;
+  }, []);
+  const getOptionLabel = useCallback(option => {
+    return option.name;
+  }, []);
+  const renderOption = useCallback((props, option) => {
+    return _createElement("li", {
+      ...props,
+      key: option.id
+    }, _jsxs(_Box, {
+      sx: {
+        alignItems: "top",
+        display: "flex",
+        flexDirection: "row"
+      },
+      children: [_jsx(_Box, {
+        sx: {
+          paddingRight: odysseyDesignTokens.Spacing2
+        },
+        children: _jsx(_Avatar, {
+          alt: option.name,
+          src: option.logo,
+          sx: {
+            [`.${avatarClasses.fallback}`]: {
+              visibility: "hidden"
+            },
+            background: "transparent",
+            height: avatarImageSizeMedium,
+            width: avatarImageSizeMedium
+          }
+        })
+      }), _jsxs(_Box, {
+        children: [option.name, _jsx(Subordinate, {
+          children: option.description
+        }), _jsxs(_Box, {
+          sx: {
+            display: "flex",
+            flexDirection: "row",
+            paddingTop: odysseyDesignTokens.Spacing1
+          },
+          children: [typeof option.usersCount === "number" && _jsxs(_Box, {
+            sx: {
+              display: "flex",
+              flexDirection: "row",
+              paddingRight: odysseyDesignTokens.Spacing4
+            },
+            children: [_jsx(UserIcon, {}), option.usersCount]
+          }), typeof option.appsCount === "number" && _jsxs(_Box, {
+            sx: {
+              display: "flex",
+              flexDirection: "row",
+              paddingRight: odysseyDesignTokens.Spacing4
+            },
+            children: [_jsx(GridIcon, {}), option.appsCount]
+          }), typeof option.groupPushMappingsCount === "number" && _jsxs(_Box, {
+            sx: {
+              display: "flex",
+              flexDirection: "row"
+            },
+            children: [_jsx(GroupIcon, {}), option.groupPushMappingsCount]
+          })]
+        })]
+      })]
+    }));
+  }, [odysseyDesignTokens]);
+  const renderTags = useCallback((values, getTagProps) => values.map((option, index) => {
+    const {
+      key,
+      onDelete
+    } = getTagProps({
+      index
+    });
+    return _jsx(_Box, {
+      sx: {
+        margin: odysseyDesignTokens.Spacing1
+      },
+      children: _jsx(Tag, {
+        icon: _jsx(_Avatar, {
+          alt: option.name,
+          src: option.logo,
+          sx: {
+            [`.${avatarClasses.fallback}`]: {
+              visibility: "hidden"
+            },
+            background: "transparent",
+            height: avatarImageSizeSmall,
+            width: avatarImageSizeSmall
+          }
+        }),
+        label: option.name,
+        onRemove: onDelete
+      })
+    }, key);
+  }), [odysseyDesignTokens]);
+  const renderInput = useCallback(({
+    InputLabelProps,
+    InputProps,
+    ...params
+  }) => _jsx(Field, {
+    fieldType: "single",
+    hasVisibleLabel: true,
+    hint: hint,
+    id: InputLabelProps.htmlFor,
+    isOptional: isOptional,
+    label: label,
+    renderFieldComponent: ({
+      ariaDescribedBy,
+      id
+    }) => _jsx(_InputBase, {
+      ...params,
+      ...InputProps,
+      "aria-describedby": ariaDescribedBy,
+      id: id,
+      required: !isOptional
+    })
+  }), [hint, isOptional, label]);
+  return _jsx(_Autocomplete, {
+    "aria-disabled": isDisabled,
+    "data-se": testId,
+    disabled: isDisabled,
+    filterSelectedOptions: true,
+    freeSolo: isCustomValueAllowed,
+    getOptionLabel: getOptionLabel,
+    isOptionEqualToValue: isOptionEqualToValue,
+    loading: isLoading,
+    multiple: hasMultipleChoices,
+    onChange: onChange,
+    onInputChange: onInputChange,
+    options: options,
+    readOnly: isReadOnly,
+    renderInput: renderInput,
+    renderOption: renderOption,
+    renderTags: renderTags,
+    value: value
+  });
+};
+const MemoizedGroupPicker = memo(GroupPicker);
+export { MemoizedGroupPicker as GroupPicker };
+//# sourceMappingURL=GroupPicker.js.map

package/dist/esm/labs/GroupPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupPicker.js","names":["avatarClasses","memo","useCallback","createElement","_createElement","Field","GridIcon","GroupIcon","UserIcon","useOdysseyDesignTokens","Tag","Subordinate","jsx","_jsx","jsxs","_jsxs","avatarImageSizeSmall","avatarImageSizeMedium","GroupPicker","hasMultipleChoices","isCustomValueAllowed","isDisabled","isLoading","isOptional","isReadOnly","hint","label","onChange","onInputChange","options","value","testId","odysseyDesignTokens","isOptionEqualToValue","sourceValue","targetValue","id","getOptionLabel","option","name","renderOption","props","key","_Box","sx","alignItems","display","flexDirection","children","paddingRight","Spacing2","_Avatar","alt","src","logo","fallback","visibility","background","height","width","description","paddingTop","Spacing1","usersCount","Spacing4","appsCount","groupPushMappingsCount","renderTags","values","getTagProps","map","index","onDelete","margin","icon","onRemove","renderInput","InputLabelProps","InputProps","params","fieldType","hasVisibleLabel","htmlFor","renderFieldComponent","ariaDescribedBy","_InputBase","required","_Autocomplete","disabled","filterSelectedOptions","freeSolo","loading","multiple","readOnly","MemoizedGroupPicker"],"sources":["../../../src/labs/GroupPicker.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 type {\n  AutocompleteFreeSoloValueMapping,\n  AutocompleteGetTagProps,\n} from \"@mui/material/useAutocomplete\";\n\nimport {\n  AutocompleteRenderInputParams,\n  Box,\n  InputBase,\n  Autocomplete as MuiAutocomplete,\n  Avatar as MuiAvatar,\n} from \"@mui/material\";\nimport { avatarClasses } from \"@mui/material/Avatar\";\nimport { HTMLAttributes, memo, useCallback } from \"react\";\n\nimport { AutocompleteProps } from \"../Autocomplete.js\";\nimport { Field } from \"../Field.js\";\nimport { GridIcon, GroupIcon, UserIcon } from \"../icons.generated/index.js\";\nimport { useOdysseyDesignTokens } from \"../OdysseyDesignTokensContext.js\";\nimport { Tag } from \"../Tag.js\";\nimport { Subordinate } from \"../Typography.js\";\n\nexport type GroupPickerOptionType = {\n  appsCount?: number;\n  description: string;\n  groupPushMappingsCount?: number;\n  id: string;\n  logo?: string;\n  name: string;\n  usersCount?: number;\n};\n\nexport type GroupPickerProps<\n  GroupPickerOptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined,\n> = AutocompleteProps<\n  GroupPickerOptionType,\n  HasMultipleChoices,\n  IsCustomValueAllowed\n>;\n\nconst avatarImageSizeSmall = 16;\nconst avatarImageSizeMedium = 24;\n\nconst GroupPicker = <\n  OptionType extends GroupPickerOptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined,\n>({\n  hasMultipleChoices,\n  isCustomValueAllowed,\n  isDisabled,\n  isLoading,\n  isOptional = false,\n  isReadOnly,\n  hint,\n  label,\n  onChange,\n  onInputChange,\n  options,\n  value,\n  testId,\n}: GroupPickerProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const isOptionEqualToValue = useCallback(\n    (sourceValue: OptionType, targetValue: OptionType) => {\n      return sourceValue.id === targetValue.id;\n    },\n    [],\n  );\n\n  const getOptionLabel = useCallback(\n    (\n      option:\n        | OptionType\n        | AutocompleteFreeSoloValueMapping<IsCustomValueAllowed>,\n    ) => {\n      return (option as OptionType).name;\n    },\n    [],\n  );\n\n  const renderOption = useCallback(\n    (props: HTMLAttributes<HTMLElement>, option: OptionType) => {\n      return (\n        <li {...props} key={option.id}>\n          <Box\n            sx={{\n              alignItems: \"top\",\n              display: \"flex\",\n              flexDirection: \"row\",\n            }}\n          >\n            <Box sx={{ paddingRight: odysseyDesignTokens.Spacing2 }}>\n              <MuiAvatar\n                alt={option.name}\n                src={option.logo}\n                sx={{\n                  [`.${avatarClasses.fallback}`]: {\n                    visibility: \"hidden\",\n                  },\n                  background: \"transparent\",\n                  height: avatarImageSizeMedium,\n                  width: avatarImageSizeMedium,\n                }}\n              />\n            </Box>\n            <Box>\n              {option.name}\n              <Subordinate>{option.description}</Subordinate>\n              <Box\n                sx={{\n                  display: \"flex\",\n                  flexDirection: \"row\",\n                  paddingTop: odysseyDesignTokens.Spacing1,\n                }}\n              >\n                {typeof option.usersCount === \"number\" && (\n                  <Box\n                    sx={{\n                      display: \"flex\",\n                      flexDirection: \"row\",\n                      paddingRight: odysseyDesignTokens.Spacing4,\n                    }}\n                  >\n                    <UserIcon />\n                    {option.usersCount}\n                  </Box>\n                )}\n                {typeof option.appsCount === \"number\" && (\n                  <Box\n                    sx={{\n                      display: \"flex\",\n                      flexDirection: \"row\",\n                      paddingRight: odysseyDesignTokens.Spacing4,\n                    }}\n                  >\n                    <GridIcon />\n                    {option.appsCount}\n                  </Box>\n                )}\n                {typeof option.groupPushMappingsCount === \"number\" && (\n                  <Box sx={{ display: \"flex\", flexDirection: \"row\" }}>\n                    <GroupIcon />\n                    {option.groupPushMappingsCount}\n                  </Box>\n                )}\n              </Box>\n            </Box>\n          </Box>\n        </li>\n      );\n    },\n    [odysseyDesignTokens],\n  );\n\n  const renderTags = useCallback(\n    (values: OptionType[], getTagProps: AutocompleteGetTagProps) =>\n      values.map((option, index) => {\n        const { key, onDelete } = getTagProps({ index });\n        return (\n          <Box\n            key={key}\n            sx={{\n              margin: odysseyDesignTokens.Spacing1,\n            }}\n          >\n            <Tag\n              icon={\n                <MuiAvatar\n                  alt={option.name}\n                  src={option.logo}\n                  sx={{\n                    [`.${avatarClasses.fallback}`]: {\n                      visibility: \"hidden\",\n                    },\n                    background: \"transparent\",\n                    height: avatarImageSizeSmall,\n                    width: avatarImageSizeSmall,\n                  }}\n                />\n              }\n              label={option.name}\n              onRemove={onDelete}\n            />\n          </Box>\n        );\n      }),\n    [odysseyDesignTokens],\n  );\n\n  const renderInput = useCallback(\n    ({\n      InputLabelProps,\n      InputProps,\n      ...params\n    }: AutocompleteRenderInputParams) => (\n      <Field\n        fieldType=\"single\"\n        hasVisibleLabel\n        hint={hint}\n        // @ts-expect-error The `htmlFor` prop doesn't exist `HTMLAttributes` for a `<label>` element even though it exists in JavaScript.\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n        id={InputLabelProps.htmlFor}\n        isOptional={isOptional}\n        label={label}\n        renderFieldComponent={({ ariaDescribedBy, id }) => (\n          <InputBase\n            {...params}\n            {...InputProps}\n            aria-describedby={ariaDescribedBy}\n            id={id}\n            required={!isOptional}\n          />\n        )}\n      />\n    ),\n    [hint, isOptional, label],\n  );\n\n  return (\n    <MuiAutocomplete\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      data-se={testId}\n      disabled={isDisabled}\n      filterSelectedOptions={true}\n      freeSolo={isCustomValueAllowed}\n      getOptionLabel={getOptionLabel}\n      isOptionEqualToValue={isOptionEqualToValue}\n      loading={isLoading}\n      multiple={hasMultipleChoices}\n      onChange={onChange}\n      onInputChange={onInputChange}\n      options={options}\n      readOnly={isReadOnly}\n      renderInput={renderInput}\n      renderOption={renderOption}\n      renderTags={renderTags}\n      value={value}\n    />\n  );\n};\n\nconst MemoizedGroupPicker = memo(GroupPicker) as typeof GroupPicker;\n\nexport { MemoizedGroupPicker as GroupPicker };\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/labs/OdysseyPickers/ComposablePicker.js

@@ -0,0 +1,114 @@
+import _Autocomplete from "@mui/material/Autocomplete";
+/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+import { memo } from "react";
+import { useTranslation } from "../../i18n.generated/i18n.js";
+import { useAutocomplete } from "../../useAutocomplete.js";
+import { PickerVirtualizationListBox } from "./PickerVirtualizationListBox.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const adornmentSizeValues = ["small", "large"];
+const ComposablePicker = ({
+  ariaDescribedBy,
+  defaultValue,
+  emptyOptionsText,
+  errorMessage,
+  errorMessageList,
+  getIsOptionEqualToValue,
+  getOptionLabel,
+  groupOptionsBy,
+  hasMultipleChoices,
+  id: idOverride,
+  inputValue,
+  isCustomValueAllowed,
+  isDisabled,
+  isFullWidth = false,
+  isLoading,
+  isOptional = false,
+  isReadOnly,
+  isVirtualized = false,
+  hint,
+  HintLinkComponent,
+  label,
+  name: nameOverride,
+  onBlur,
+  onChange,
+  onInputChange,
+  onFocus,
+  options,
+  renderOption,
+  renderTags,
+  value,
+  testId,
+  translate
+}) => {
+  const {
+    t
+  } = useTranslation();
+  const {
+    inputValueProp,
+    isVirtualizedRef,
+    renderInput,
+    valueProps
+  } = useAutocomplete({
+    ariaDescribedBy,
+    defaultValue,
+    errorMessage,
+    errorMessageList,
+    hasMultipleChoices,
+    hint,
+    HintLinkComponent,
+    inputValue,
+    isFullWidth,
+    isOptional,
+    isVirtualized,
+    label,
+    name: nameOverride,
+    testId,
+    value
+  });
+  return _jsx(_Autocomplete, {
+    ...valueProps,
+    ...inputValueProp,
+    ...(isVirtualizedRef.current && {
+      ListboxComponent: PickerVirtualizationListBox
+    }),
+    "aria-disabled": isDisabled,
+    clearText: t("clear.text"),
+    closeText: t("close.text"),
+    disableCloseOnSelect: hasMultipleChoices,
+    disabled: isDisabled,
+    filterSelectedOptions: true,
+    freeSolo: isCustomValueAllowed,
+    fullWidth: isFullWidth,
+    getOptionLabel: getOptionLabel,
+    groupBy: groupOptionsBy,
+    id: idOverride,
+    isOptionEqualToValue: getIsOptionEqualToValue,
+    loading: isLoading,
+    multiple: hasMultipleChoices,
+    noOptionsText: emptyOptionsText,
+    onBlur: onBlur,
+    onChange: onChange,
+    onFocus: onFocus,
+    onInputChange: onInputChange,
+    options: options,
+    readOnly: isReadOnly,
+    renderInput: renderInput,
+    renderOption: renderOption,
+    renderTags: renderTags,
+    translate: translate
+  });
+};
+const MemoizedComposablePicker = memo(ComposablePicker);
+MemoizedComposablePicker.displayName = "ComposablePicker";
+export { MemoizedComposablePicker as ComposablePicker };
+//# sourceMappingURL=ComposablePicker.js.map

package/dist/esm/labs/OdysseyPickers/ComposablePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComposablePicker.js","names":["memo","useTranslation","useAutocomplete","PickerVirtualizationListBox","jsx","_jsx","adornmentSizeValues","ComposablePicker","ariaDescribedBy","defaultValue","emptyOptionsText","errorMessage","errorMessageList","getIsOptionEqualToValue","getOptionLabel","groupOptionsBy","hasMultipleChoices","id","idOverride","inputValue","isCustomValueAllowed","isDisabled","isFullWidth","isLoading","isOptional","isReadOnly","isVirtualized","hint","HintLinkComponent","label","name","nameOverride","onBlur","onChange","onInputChange","onFocus","options","renderOption","renderTags","value","testId","translate","t","inputValueProp","isVirtualizedRef","renderInput","valueProps","_Autocomplete","current","ListboxComponent","clearText","closeText","disableCloseOnSelect","disabled","filterSelectedOptions","freeSolo","fullWidth","groupBy","isOptionEqualToValue","loading","multiple","noOptionsText","readOnly","MemoizedComposablePicker","displayName"],"sources":["../../../../src/labs/OdysseyPickers/ComposablePicker.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} from \"@mui/material\";\nimport { HTMLAttributes, Key, memo, ReactNode } from \"react\";\n\nimport { AutocompleteProps } from \"../../Autocomplete.js\";\nimport { useTranslation } from \"../../i18n.generated/i18n.js\";\nimport { useAutocomplete } from \"../../useAutocomplete.js\";\nimport { PickerVirtualizationListBox } from \"./PickerVirtualizationListBox.js\";\n\nexport const adornmentSizeValues = [\"small\", \"large\"] as const;\nexport type AdornmentSize = (typeof adornmentSizeValues)[number];\n\nexport type BaseRenderOptionProps = HTMLAttributes<HTMLLIElement> & {\n  key: Key;\n};\n\nexport type BasePickerProps<\n  OptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined,\n> = AutocompleteProps<OptionType, HasMultipleChoices, IsCustomValueAllowed> & {\n  adornmentSize?: AdornmentSize;\n  emptyOptionsText?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"noOptionsText\"];\n  groupOptionsBy?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"groupBy\"];\n};\n\nexport type BasePickerType = {\n  displayName: string;\n  <\n    OptionType,\n    HasMultipleChoices extends boolean | undefined,\n    IsCustomValueAllowed extends boolean | undefined,\n  >(\n    props: BasePickerProps<\n      OptionType,\n      HasMultipleChoices,\n      IsCustomValueAllowed\n    >,\n  ): ReactNode;\n};\n\nexport type ComposablePickerProps<\n  OptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined,\n> = BasePickerProps<OptionType, HasMultipleChoices, IsCustomValueAllowed> & {\n  getOptionLabel?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"getOptionLabel\"];\n\n  renderOption: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"renderOption\"];\n\n  renderTags?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"renderTags\"];\n};\n\nconst ComposablePicker = <\n  OptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined,\n>({\n  ariaDescribedBy,\n  defaultValue,\n  emptyOptionsText,\n  errorMessage,\n  errorMessageList,\n  getIsOptionEqualToValue,\n  getOptionLabel,\n  groupOptionsBy,\n  hasMultipleChoices,\n  id: idOverride,\n  inputValue,\n  isCustomValueAllowed,\n  isDisabled,\n  isFullWidth = false,\n  isLoading,\n  isOptional = false,\n  isReadOnly,\n  isVirtualized = false,\n  hint,\n  HintLinkComponent,\n  label,\n  name: nameOverride,\n  onBlur,\n  onChange,\n  onInputChange,\n  onFocus,\n  options,\n  renderOption,\n  renderTags,\n  value,\n  testId,\n  translate,\n}: ComposablePickerProps<\n  OptionType,\n  HasMultipleChoices,\n  IsCustomValueAllowed\n>) => {\n  const { t } = useTranslation();\n  const { inputValueProp, isVirtualizedRef, renderInput, valueProps } =\n    useAutocomplete<OptionType, HasMultipleChoices, IsCustomValueAllowed>({\n      ariaDescribedBy,\n      defaultValue,\n      errorMessage,\n      errorMessageList,\n      hasMultipleChoices,\n      hint,\n      HintLinkComponent,\n      inputValue,\n      isFullWidth,\n      isOptional,\n      isVirtualized,\n      label,\n      name: nameOverride,\n      testId,\n      value,\n    });\n\n  return (\n    <MuiAutocomplete\n      {...valueProps}\n      {...inputValueProp}\n      // conditionally provide the ListboxComponent if this needs to be virtualized\n      {...(isVirtualizedRef.current && {\n        ListboxComponent: PickerVirtualizationListBox,\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      filterSelectedOptions={true}\n      freeSolo={isCustomValueAllowed}\n      fullWidth={isFullWidth}\n      getOptionLabel={getOptionLabel}\n      groupBy={groupOptionsBy}\n      id={idOverride}\n      isOptionEqualToValue={getIsOptionEqualToValue}\n      loading={isLoading}\n      multiple={hasMultipleChoices}\n      noOptionsText={emptyOptionsText}\n      onBlur={onBlur}\n      onChange={onChange}\n      onFocus={onFocus}\n      onInputChange={onInputChange}\n      options={options}\n      readOnly={isReadOnly}\n      renderInput={renderInput}\n      renderOption={renderOption}\n      renderTags={renderTags}\n      translate={translate}\n    />\n  );\n};\n\n// Need the `typeof ComposablePicker` because generics don't get passed through\nconst MemoizedComposablePicker = memo(\n  ComposablePicker,\n) as typeof ComposablePicker;\n// @ts-expect-error displayName is expected to not be on `typeof ComposablePicker`\nMemoizedComposablePicker.displayName = \"ComposablePicker\";\n\nexport { MemoizedComposablePicker as ComposablePicker };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAMA,SAA8BA,IAAI,QAAmB,OAAO;AAG5D,SAASC,cAAc,QAAQ,8BAA8B;AAC7D,SAASC,eAAe,QAAQ,0BAA0B;AAC1D,SAASC,2BAA2B,QAAQ,kCAAkC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE/E,OAAO,MAAMC,mBAAmB,GAAG,CAAC,OAAO,EAAE,OAAO,CAAU;AAqE9D,MAAMC,gBAAgB,GAAGA,CAIvB;EACAC,eAAe;EACfC,YAAY;EACZC,gBAAgB;EAChBC,YAAY;EACZC,gBAAgB;EAChBC,uBAAuB;EACvBC,cAAc;EACdC,cAAc;EACdC,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,GAAG,KAAK;EACrBC,IAAI;EACJC,iBAAiB;EACjBC,KAAK;EACLC,IAAI,EAAEC,YAAY;EAClBC,MAAM;EACNC,QAAQ;EACRC,aAAa;EACbC,OAAO;EACPC,OAAO;EACPC,YAAY;EACZC,UAAU;EACVC,KAAK;EACLC,MAAM;EACNC;AAKF,CAAC,KAAK;EACJ,MAAM;IAAEC;EAAE,CAAC,GAAGzC,cAAc,CAAC,CAAC;EAC9B,MAAM;IAAE0C,cAAc;IAAEC,gBAAgB;IAAEC,WAAW;IAAEC;EAAW,CAAC,GACjE5C,eAAe,CAAuD;IACpEM,eAAe;IACfC,YAAY;IACZE,YAAY;IACZC,gBAAgB;IAChBI,kBAAkB;IAClBW,IAAI;IACJC,iBAAiB;IACjBT,UAAU;IACVG,WAAW;IACXE,UAAU;IACVE,aAAa;IACbG,KAAK;IACLC,IAAI,EAAEC,YAAY;IAClBS,MAAM;IACND;EACF,CAAC,CAAC;EAEJ,OACElC,IAAA,CAAA0C,aAAA;IAAA,GACMD,UAAU;IAAA,GACVH,cAAc;IAAA,IAEbC,gBAAgB,CAACI,OAAO,IAAI;MAC/BC,gBAAgB,EAAE9C;IACpB,CAAC;IAED,iBAAekB,UAAW;IAC1B6B,SAAS,EAAER,CAAC,CAAC,YAAY,CAAE;IAC3BS,SAAS,EAAET,CAAC,CAAC,YAAY,CAAE;IAC3BU,oBAAoB,EAAEpC,kBAAmB;IACzCqC,QAAQ,EAAEhC,UAAW;IACrBiC,qBAAqB,EAAE,IAAK;IAC5BC,QAAQ,EAAEnC,oBAAqB;IAC/BoC,SAAS,EAAElC,WAAY;IACvBR,cAAc,EAAEA,cAAe;IAC/B2C,OAAO,EAAE1C,cAAe;IACxBE,EAAE,EAAEC,UAAW;IACfwC,oBAAoB,EAAE7C,uBAAwB;IAC9C8C,OAAO,EAAEpC,SAAU;IACnBqC,QAAQ,EAAE5C,kBAAmB;IAC7B6C,aAAa,EAAEnD,gBAAiB;IAChCsB,MAAM,EAAEA,MAAO;IACfC,QAAQ,EAAEA,QAAS;IACnBE,OAAO,EAAEA,OAAQ;IACjBD,aAAa,EAAEA,aAAc;IAC7BE,OAAO,EAAEA,OAAQ;IACjB0B,QAAQ,EAAErC,UAAW;IACrBoB,WAAW,EAAEA,WAAY;IACzBR,YAAY,EAAEA,YAAa;IAC3BC,UAAU,EAAEA,UAAW;IACvBG,SAAS,EAAEA;EAAU,CACtB,CAAC;AAEN,CAAC;AAGD,MAAMsB,wBAAwB,GAAG/D,IAAI,CACnCO,gBACF,CAA4B;AAE5BwD,wBAAwB,CAACC,WAAW,GAAG,kBAAkB;AAEzD,SAASD,wBAAwB,IAAIxD,gBAAgB","ignoreList":[]}

package/dist/esm/labs/OdysseyPickers/Picker.js

@@ -0,0 +1,259 @@
+/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import styled from "@emotion/styled";
+import { Fragment, memo, useCallback, createElement as _createElement } from "react";
+import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
+import { Heading6, Paragraph } from "../../Typography.js";
+import { ComposablePicker } from "./ComposablePicker.js";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+export const StyledOption = styled.li(({
+  hasAdornment
+}) => ({
+  ...(!hasAdornment && {
+    display: "block !important"
+  })
+}));
+export const OptionLabelContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(() => ({
+  p: {
+    margin: 0
+  }
+}));
+export const OptionDescription = styled("p", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  margin: `${odysseyDesignTokens.Spacing1} 0 0 !important`,
+  color: odysseyDesignTokens.TypographyColorSubordinate
+}));
+export const OptionDetails = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  display: "flex",
+  gap: odysseyDesignTokens.Spacing3,
+  marginBlockStart: odysseyDesignTokens.Spacing2
+}));
+export const OptionDetail = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: odysseyDesignTokens.Spacing1,
+  svg: {
+    width: odysseyDesignTokens.Spacing4,
+    color: odysseyDesignTokens.HueNeutral400
+  }
+}));
+export const Option = ({
+  children,
+  hasAdornment = false,
+  muiProps
+}) => {
+  const {
+    key,
+    ...props
+  } = muiProps;
+  return _createElement(StyledOption, {
+    ...props,
+    hasAdornment: hasAdornment,
+    key: key
+  }, children);
+};
+export const OptionMetadataComponent = ({
+  metaData,
+  odysseyDesignTokens
+}) => {
+  return _jsx(OptionDetails, {
+    odysseyDesignTokens: odysseyDesignTokens,
+    children: metaData.map((meta, index) => {
+      const {
+        detailText,
+        icon
+      } = meta;
+      return _jsxs(OptionDetail, {
+        odysseyDesignTokens: odysseyDesignTokens,
+        children: [icon, detailText]
+      }, `${detailText}-${index}`);
+    })
+  });
+};
+export const OptionDescriptionComponent = ({
+  description,
+  odysseyDesignTokens
+}) => {
+  return description && _jsx(OptionDescription, {
+    odysseyDesignTokens: odysseyDesignTokens,
+    children: description
+  });
+};
+export const OptionLabelOnlyComponent = ({
+  muiProps,
+  odysseyDesignTokens,
+  option
+}) => {
+  const {
+    label
+  } = option;
+  return _jsx(Option, {
+    muiProps: muiProps,
+    children: _jsx(OptionLabelContainer, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      children: _jsx(Paragraph, {
+        children: label
+      })
+    })
+  });
+};
+const OptionLabelDescription = ({
+  muiProps,
+  odysseyDesignTokens,
+  option
+}) => {
+  const {
+    description,
+    label
+  } = option;
+  return _jsx(Option, {
+    muiProps: muiProps,
+    children: _jsxs(OptionLabelContainer, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      children: [_jsx(Heading6, {
+        component: "p",
+        children: label
+      }), _jsx(OptionDescriptionComponent, {
+        description: description,
+        odysseyDesignTokens: odysseyDesignTokens
+      })]
+    })
+  });
+};
+const OptionLabelDescriptionMetadata = ({
+  muiProps,
+  odysseyDesignTokens,
+  option
+}) => {
+  const {
+    description,
+    label,
+    metaData
+  } = option;
+  return _jsxs(Option, {
+    muiProps: muiProps,
+    children: [_jsxs(OptionLabelContainer, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      children: [_jsx(Heading6, {
+        component: "p",
+        children: label
+      }), _jsx(OptionDescriptionComponent, {
+        description: description,
+        odysseyDesignTokens: odysseyDesignTokens
+      })]
+    }), _jsx(OptionMetadataComponent, {
+      metaData: metaData,
+      odysseyDesignTokens: odysseyDesignTokens
+    })]
+  });
+};
+const Picker = ({
+  ariaDescribedBy,
+  defaultValue,
+  emptyOptionsText,
+  errorMessage,
+  errorMessageList,
+  getIsOptionEqualToValue,
+  hasMultipleChoices,
+  id: idOverride,
+  inputValue,
+  isCustomValueAllowed,
+  isDisabled,
+  isFullWidth = false,
+  isLoading,
+  isOptional = false,
+  isReadOnly,
+  isVirtualized: isVirtualizedProp = false,
+  hint,
+  HintLinkComponent,
+  label,
+  name: nameOverride,
+  onBlur,
+  onChange: onChangeProp,
+  onInputChange: onInputChangeProp,
+  onFocus,
+  options,
+  value,
+  testId,
+  translate
+}) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const customOptionRender = useCallback((muiProps, option) => {
+    const hasDescription = "description" in option && option.description;
+    const hasMetadata = "metaData" in option && option.metaData;
+    const isLabelOnly = !hasMetadata && !hasDescription;
+    return _jsx(Fragment, {
+      children: isLabelOnly ? _jsx(OptionLabelOnlyComponent, {
+        muiProps: muiProps,
+        odysseyDesignTokens: odysseyDesignTokens,
+        option: option
+      }) : hasMetadata ? _jsx(OptionLabelDescriptionMetadata, {
+        muiProps: muiProps,
+        odysseyDesignTokens: odysseyDesignTokens,
+        option: option
+      }) : _jsx(OptionLabelDescription, {
+        muiProps: muiProps,
+        odysseyDesignTokens: odysseyDesignTokens,
+        option: option
+      })
+    }, option.value);
+  }, [odysseyDesignTokens]);
+  return _jsx(ComposablePicker, {
+    ariaDescribedBy: ariaDescribedBy,
+    defaultValue: defaultValue,
+    emptyOptionsText: emptyOptionsText,
+    errorMessage: errorMessage,
+    errorMessageList: errorMessageList,
+    getIsOptionEqualToValue: getIsOptionEqualToValue,
+    hasMultipleChoices: hasMultipleChoices,
+    hint: hint,
+    HintLinkComponent: HintLinkComponent,
+    id: idOverride,
+    inputValue: inputValue,
+    isCustomValueAllowed: isCustomValueAllowed,
+    isDisabled: isDisabled,
+    isFullWidth: isFullWidth,
+    isLoading: isLoading,
+    isOptional: isOptional,
+    isReadOnly: isReadOnly,
+    isVirtualized: isVirtualizedProp,
+    label: label,
+    name: nameOverride,
+    onBlur: onBlur,
+    onChange: onChangeProp,
+    onFocus: onFocus,
+    onInputChange: onInputChangeProp,
+    options: options,
+    renderOption: customOptionRender,
+    testId: testId,
+    translate: translate,
+    value: value
+  });
+};
+const MemoizedPicker = memo(Picker);
+MemoizedPicker.displayName = "Picker";
+export { MemoizedPicker as Picker };
+//# sourceMappingURL=Picker.js.map

package/dist/esm/labs/OdysseyPickers/Picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Picker.js","names":["styled","Fragment","memo","useCallback","createElement","_createElement","useOdysseyDesignTokens","Heading6","Paragraph","ComposablePicker","jsxs","_jsxs","jsx","_jsx","StyledOption","li","hasAdornment","display","OptionLabelContainer","shouldForwardProp","prop","p","margin","OptionDescription","odysseyDesignTokens","Spacing1","color","TypographyColorSubordinate","OptionDetails","gap","Spacing3","marginBlockStart","Spacing2","OptionDetail","alignItems","svg","width","Spacing4","HueNeutral400","Option","children","muiProps","key","props","OptionMetadataComponent","metaData","map","meta","index","detailText","icon","OptionDescriptionComponent","description","OptionLabelOnlyComponent","option","label","OptionLabelDescription","component","OptionLabelDescriptionMetadata","Picker","ariaDescribedBy","defaultValue","emptyOptionsText","errorMessage","errorMessageList","getIsOptionEqualToValue","hasMultipleChoices","id","idOverride","inputValue","isCustomValueAllowed","isDisabled","isFullWidth","isLoading","isOptional","isReadOnly","isVirtualized","isVirtualizedProp","hint","HintLinkComponent","name","nameOverride","onBlur","onChange","onChangeProp","onInputChange","onInputChangeProp","onFocus","options","value","testId","translate","customOptionRender","hasDescription","hasMetadata","isLabelOnly","renderOption","MemoizedPicker","displayName"],"sources":["../../../../src/labs/OdysseyPickers/Picker.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 styled from \"@emotion/styled\";\nimport { AutocompleteProps as MuiAutocompleteProps } from \"@mui/material\";\nimport {\n  Fragment,\n  memo,\n  PropsWithChildren,\n  ReactElement,\n  ReactNode,\n  useCallback,\n} from \"react\";\n\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport { Heading6, Paragraph } from \"../../Typography.js\";\nimport {\n  type BasePickerProps,\n  type BasePickerType,\n  type BaseRenderOptionProps,\n  ComposablePicker,\n} from \"./ComposablePicker.js\";\n\nexport const StyledOption = styled.li<{ hasAdornment?: boolean }>(\n  ({ hasAdornment }) => ({\n    ...(!hasAdornment && {\n      display: \"block !important\",\n    }),\n  }),\n);\n\nexport const OptionLabelContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(() => ({\n  p: {\n    margin: 0,\n  },\n}));\n\nexport const OptionDescription = styled(\"p\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n  margin: `${odysseyDesignTokens.Spacing1} 0 0 !important`,\n  color: odysseyDesignTokens.TypographyColorSubordinate,\n}));\n\nexport const OptionDetails = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n  display: \"flex\",\n  gap: odysseyDesignTokens.Spacing3,\n  marginBlockStart: odysseyDesignTokens.Spacing2,\n}));\n\nexport const OptionDetail = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: odysseyDesignTokens.Spacing1,\n\n  svg: {\n    width: odysseyDesignTokens.Spacing4,\n    color: odysseyDesignTokens.HueNeutral400,\n  },\n}));\n\nexport type BaseOptionProps = {\n  muiProps: BaseRenderOptionProps;\n  odysseyDesignTokens: DesignTokens;\n};\n\ntype OptionComponentProps = {\n  hasAdornment?: boolean;\n  muiProps: BaseOptionProps[\"muiProps\"];\n};\n\nexport const Option = ({\n  children,\n  hasAdornment = false,\n  muiProps,\n}: PropsWithChildren<OptionComponentProps>) => {\n  const { key, ...props } = muiProps;\n  return (\n    <StyledOption {...props} hasAdornment={hasAdornment} key={key}>\n      {children}\n    </StyledOption>\n  );\n};\n\nexport const OptionMetadataComponent = ({\n  metaData,\n  odysseyDesignTokens,\n}: {\n  metaData: OptionMetadata[];\n  odysseyDesignTokens: DesignTokens;\n}) => {\n  return (\n    <OptionDetails odysseyDesignTokens={odysseyDesignTokens}>\n      {metaData.map((meta: OptionMetadata, index: number) => {\n        const { detailText, icon } = meta;\n        return (\n          <OptionDetail\n            key={`${detailText}-${index}`}\n            odysseyDesignTokens={odysseyDesignTokens}\n          >\n            {icon}\n            {detailText}\n          </OptionDetail>\n        );\n      })}\n    </OptionDetails>\n  );\n};\n\nexport const OptionDescriptionComponent = ({\n  description,\n  odysseyDesignTokens,\n}: {\n  description?: LabelDescription[\"description\"];\n  odysseyDesignTokens: DesignTokens;\n}) => {\n  return (\n    description && (\n      <OptionDescription odysseyDesignTokens={odysseyDesignTokens}>\n        {description}\n      </OptionDescription>\n    )\n  );\n};\n\nexport type OptionProps<OptionType> = {\n  option: OptionType;\n};\n\nexport const OptionLabelOnlyComponent = <OptionType extends OptionLabelOnly>({\n  muiProps,\n  odysseyDesignTokens,\n  option,\n}: BaseOptionProps & OptionProps<OptionType>) => {\n  const { label } = option;\n\n  return (\n    <Option muiProps={muiProps}>\n      <OptionLabelContainer odysseyDesignTokens={odysseyDesignTokens}>\n        <Paragraph>{label}</Paragraph>\n      </OptionLabelContainer>\n    </Option>\n  );\n};\n\nconst OptionLabelDescription = <OptionType extends LabelDescription>({\n  muiProps,\n  odysseyDesignTokens,\n  option,\n}: BaseOptionProps & OptionProps<OptionType>) => {\n  const { description, label } = option;\n\n  return (\n    <Option muiProps={muiProps}>\n      <OptionLabelContainer odysseyDesignTokens={odysseyDesignTokens}>\n        <Heading6 component=\"p\">{label}</Heading6>\n        <OptionDescriptionComponent\n          description={description}\n          odysseyDesignTokens={odysseyDesignTokens}\n        />\n      </OptionLabelContainer>\n    </Option>\n  );\n};\n\nconst OptionLabelDescriptionMetadata = <\n  OptionType extends LabelDescriptionMetadata,\n>({\n  muiProps,\n  odysseyDesignTokens,\n  option,\n}: BaseOptionProps & OptionProps<OptionType>) => {\n  const { description, label, metaData } = option;\n\n  return (\n    <Option muiProps={muiProps}>\n      <OptionLabelContainer odysseyDesignTokens={odysseyDesignTokens}>\n        <Heading6 component=\"p\">{label}</Heading6>\n        <OptionDescriptionComponent\n          description={description}\n          odysseyDesignTokens={odysseyDesignTokens}\n        />\n      </OptionLabelContainer>\n      <OptionMetadataComponent\n        metaData={metaData}\n        odysseyDesignTokens={odysseyDesignTokens}\n      />\n    </Option>\n  );\n};\n\nexport type OptionMetadata = {\n  detailText: string | number;\n  icon: ReactElement;\n};\n\nexport type OptionGroupType = { group?: string };\nexport type OptionValueType = { value: string | number };\nexport type OptionLabelType = { label: string };\nexport type BaseOptionType = OptionValueType &\n  OptionGroupType &\n  OptionLabelType;\nexport type Metadata = {\n  metaData: OptionMetadata[];\n};\n\nexport type OptionLabelOnly = BaseOptionType;\nexport type LabelDescription = BaseOptionType & { description?: string };\nexport type LabelDescriptionMetadata = LabelDescription & Metadata;\n\nexport type PickerProps<\n  OptionType extends LabelDescription | LabelDescriptionMetadata,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined,\n> = BasePickerProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>;\n\nexport type PickerComponentType = {\n  <\n    OptionType extends OptionLabelOnly,\n    HasMultipleChoices extends boolean | undefined,\n    IsCustomValueAllowed extends boolean | undefined,\n  >(\n    props: PickerProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>,\n  ): ReactNode;\n  <\n    OptionType extends LabelDescriptionMetadata,\n    HasMultipleChoices extends boolean | undefined,\n    IsCustomValueAllowed extends boolean | undefined,\n  >(\n    props: PickerProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>,\n  ): ReactNode;\n  <\n    OptionType extends LabelDescription,\n    HasMultipleChoices extends boolean | undefined,\n    IsCustomValueAllowed extends boolean | undefined,\n  >(\n    props: PickerProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>,\n  ): ReactNode;\n  <\n    OptionType extends LabelDescriptionMetadata,\n    HasMultipleChoices extends boolean | undefined,\n    IsCustomValueAllowed extends boolean | undefined,\n  >(\n    props: PickerProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>,\n  ): ReactNode;\n};\n\nconst Picker: PickerComponentType = <\n  OptionType extends\n    | OptionLabelOnly\n    | LabelDescription\n    | LabelDescriptionMetadata,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined,\n>({\n  ariaDescribedBy,\n  defaultValue,\n  emptyOptionsText,\n  errorMessage,\n  errorMessageList,\n  getIsOptionEqualToValue,\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  onBlur,\n  onChange: onChangeProp,\n  onInputChange: onInputChangeProp,\n  onFocus,\n  options,\n  value,\n  testId,\n  translate,\n}: PickerProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const customOptionRender = useCallback<\n    NonNullable<\n      MuiAutocompleteProps<\n        OptionType,\n        HasMultipleChoices,\n        undefined,\n        IsCustomValueAllowed\n      >[\"renderOption\"]\n    >\n  >(\n    (muiProps, option) => {\n      const hasDescription = \"description\" in option && option.description;\n      const hasMetadata = \"metaData\" in option && option.metaData;\n      const isLabelOnly = !hasMetadata && !hasDescription;\n\n      return (\n        <Fragment key={option.value}>\n          {isLabelOnly ? (\n            <OptionLabelOnlyComponent\n              muiProps={muiProps}\n              odysseyDesignTokens={odysseyDesignTokens}\n              option={option}\n            />\n          ) : hasMetadata ? (\n            <OptionLabelDescriptionMetadata\n              muiProps={muiProps}\n              odysseyDesignTokens={odysseyDesignTokens}\n              option={option}\n            />\n          ) : (\n            <OptionLabelDescription\n              muiProps={muiProps}\n              odysseyDesignTokens={odysseyDesignTokens}\n              option={option}\n            />\n          )}\n        </Fragment>\n      );\n    },\n    [odysseyDesignTokens],\n  );\n\n  return (\n    <ComposablePicker<OptionType, HasMultipleChoices, IsCustomValueAllowed>\n      ariaDescribedBy={ariaDescribedBy}\n      defaultValue={defaultValue}\n      emptyOptionsText={emptyOptionsText}\n      errorMessage={errorMessage}\n      errorMessageList={errorMessageList}\n      getIsOptionEqualToValue={getIsOptionEqualToValue}\n      hasMultipleChoices={hasMultipleChoices}\n      hint={hint}\n      HintLinkComponent={HintLinkComponent}\n      id={idOverride}\n      inputValue={inputValue}\n      isCustomValueAllowed={isCustomValueAllowed}\n      isDisabled={isDisabled}\n      isFullWidth={isFullWidth}\n      isLoading={isLoading}\n      isOptional={isOptional}\n      isReadOnly={isReadOnly}\n      isVirtualized={isVirtualizedProp}\n      label={label}\n      name={nameOverride}\n      onBlur={onBlur}\n      onChange={onChangeProp}\n      onFocus={onFocus}\n      onInputChange={onInputChangeProp}\n      options={options}\n      renderOption={customOptionRender}\n      testId={testId}\n      translate={translate}\n      value={value}\n    />\n  );\n};\n\n// Need the `as BasePickerType` because generics don't get passed through\nconst MemoizedPicker = memo(Picker) as BasePickerType;\n\nMemoizedPicker.displayName = \"Picker\";\n\nexport { MemoizedPicker as Picker };\n"],"mappings":"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","ignoreList":[]}