@okta/odyssey-react-mui 1.33.0 → 1.35.0

package/dist/cjs/labs/OdysseyPickers/PickerWithOptionAdornment.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PickerWithOptionAdornment.cjs","names":["_react","require","_styled","_interopRequireDefault","_Box","_ComposablePicker","_OdysseyDesignTokensContext","_Picker","_Typography","_Tag","_jsxRuntime","e","__esModule","default","OptionAdornmentContainer","styled","shouldForwardProp","prop","adornmentSize","isTagContainer","odysseyDesignTokens","position","bottom","alignSelf","width","Spacing5","height","overflow","marginInlineEnd","Spacing3","svg","img","top","left","transform","Spacing8","Spacing4","maxHeight","Spacing2","display","OptionAdornment","adornment","isImageAdornment","jsx","children","src","alt","role","OptionWithLabelDescriptionOnly","muiProps","option","description","label","value","jsxs","Option","hasAdornment","OptionLabelContainer","Heading6","component","OptionDescriptionComponent","OptionWithLabelDescriptionMetadata","metaData","OptionMetadataComponent","TagAdornment","useOdysseyDesignTokens","PickerWithOptionAdornment","ariaDescribedBy","defaultValue","errorMessage","errorMessageList","getIsOptionEqualToValue","groupOptionsBy","hasMultipleChoices","id","idOverride","inputValue","isCustomValueAllowed","isDisabled","isFullWidth","isLoading","isOptional","isReadOnly","isVirtualized","isVirtualizedProp","hint","HintLinkComponent","name","nameOverride","onBlur","onChange","onChangeProp","onInputChange","onInputChangeProp","onFocus","options","testId","translate","customTagRender","useCallback","values","getTagProps","map","index","key","onDelete","Box","sx","margin","Spacing1","Tag","icon","onRemove","customOptionRender","hasMetadata","ComposablePicker","renderOption","renderTags","MemoizedPickerWithOptionAdornment","exports","memo","displayName"],"sources":["../../../../src/labs/OdysseyPickers/PickerWithOptionAdornment.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  HTMLAttributes,\n  memo,\n  ReactElement,\n  ReactNode,\n  useCallback,\n} from \"react\";\nimport styled from \"@emotion/styled\";\n\nimport { Box } from \"../../Box.js\";\nimport {\n  ComposablePicker,\n  ComposablePickerProps,\n  type AdornmentSize,\n  type BasePickerProps,\n  type BasePickerType,\n} from \"./ComposablePicker.js\";\nimport {\n  useOdysseyDesignTokens,\n  DesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport {\n  type BaseOptionProps,\n  type LabelDescription,\n  type Metadata,\n  Option,\n  OptionDescriptionComponent,\n  OptionLabelContainer,\n  OptionMetadataComponent,\n  OptionProps,\n} from \"./Picker.js\";\nimport { Heading6 } from \"../../Typography.js\";\nimport { Tag } from \"../../Tag.js\";\n\ntype Adornment = ReactNode | string;\n\ntype AdornmentLabelDescription = LabelDescription & {\n  adornment: Adornment;\n};\n\ntype AdornmentLabelDescriptionMetadata = AdornmentLabelDescription & Metadata;\n\nexport type AdornmentOptionType =\n  | AdornmentLabelDescription\n  | AdornmentLabelDescriptionMetadata;\n\nconst OptionAdornmentContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"adornmentSize\" &&\n    prop !== \"isTagContainer\",\n})<{\n  adornmentSize?: AdornmentSize;\n  isTagContainer?: boolean;\n  odysseyDesignTokens: DesignTokens;\n}>(\n  ({\n    adornmentSize = \"small\",\n    isTagContainer = false,\n    odysseyDesignTokens,\n  }) => ({\n    position: \"relative\",\n    // push icon up by one px for better visual alignment\n    bottom: \"1px\",\n    alignSelf: \"flex-start\",\n    width: odysseyDesignTokens.Spacing5,\n    height: odysseyDesignTokens.Spacing5,\n    overflow: \"hidden\",\n    marginInlineEnd: odysseyDesignTokens.Spacing3,\n\n    svg: {\n      width: \"100%\",\n      height: \"auto\",\n    },\n\n    img: {\n      position: \"absolute\",\n      top: \"50%\",\n      left: \"50%\",\n      width: \"100%\",\n      transform: \"translate(-50%, -50%)\",\n    },\n\n    ...(adornmentSize === \"large\" &&\n      !isTagContainer && {\n        bottom: 0,\n        width: odysseyDesignTokens.Spacing8,\n        height: odysseyDesignTokens.Spacing8,\n      }),\n\n    ...(isTagContainer && {\n      bottom: 0,\n      alignSelf: \"center\",\n      width: odysseyDesignTokens.Spacing4,\n      height: \"auto\",\n      maxHeight: odysseyDesignTokens.Spacing4,\n      marginInlineEnd: odysseyDesignTokens.Spacing2,\n\n      svg: {\n        display: \"flex\",\n        width: \"100%\",\n        height: \"auto\",\n      },\n    }),\n  }),\n);\n\ntype OptionAdornmentProps = {\n  adornment: Adornment;\n  adornmentSize: AdornmentSize;\n  odysseyDesignTokens: DesignTokens;\n};\n\nconst OptionAdornment = ({\n  adornment,\n  adornmentSize,\n  odysseyDesignTokens,\n}: OptionAdornmentProps) => {\n  const isImageAdornment = typeof adornment === \"string\";\n\n  if (isImageAdornment) {\n    return (\n      <OptionAdornmentContainer\n        adornmentSize={adornmentSize}\n        odysseyDesignTokens={odysseyDesignTokens}\n      >\n        {/* NOTE: Intentionally leaving alt as an empty string here so screen readers will ignore this image */}\n        {/* Image should be suffciently described by the adjacent title and/or description of the option */}\n        <img src={adornment} alt=\"\" role=\"presentation\" />\n      </OptionAdornmentContainer>\n    );\n  } else {\n    return (\n      <OptionAdornmentContainer\n        adornmentSize={adornmentSize}\n        odysseyDesignTokens={odysseyDesignTokens}\n      >\n        {adornment}\n      </OptionAdornmentContainer>\n    );\n  }\n};\n\nconst OptionWithLabelDescriptionOnly = <\n  OptionType extends AdornmentLabelDescription,\n>({\n  adornmentSize,\n  muiProps,\n  odysseyDesignTokens,\n  option,\n}: BaseOptionProps &\n  OptionProps<OptionType> & { adornmentSize: AdornmentSize }) => {\n  const { adornment, description, label, value } = option;\n  return (\n    <Option hasAdornment key={value} muiProps={muiProps}>\n      <OptionAdornment\n        adornment={adornment}\n        adornmentSize={adornmentSize}\n        odysseyDesignTokens={odysseyDesignTokens}\n      />\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 OptionWithLabelDescriptionMetadata = <\n  OptionType extends AdornmentLabelDescriptionMetadata,\n>({\n  adornmentSize,\n  muiProps,\n  odysseyDesignTokens,\n  option,\n}: BaseOptionProps &\n  OptionProps<OptionType> & {\n    adornmentSize: AdornmentSize;\n  }) => {\n  const { adornment, description, label, metaData, value } = option;\n\n  return (\n    <Option hasAdornment key={value} muiProps={muiProps}>\n      <OptionAdornment\n        adornment={adornment}\n        adornmentSize={adornmentSize}\n        odysseyDesignTokens={odysseyDesignTokens}\n      />\n      <div>\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      </div>\n    </Option>\n  );\n};\n\ntype TagAdornmentProps = {\n  adornment: Adornment;\n};\n\nconst TagAdornment = ({ adornment }: TagAdornmentProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const isImageAdornment = typeof adornment === \"string\";\n\n  if (isImageAdornment) {\n    return (\n      <OptionAdornmentContainer\n        isTagContainer\n        odysseyDesignTokens={odysseyDesignTokens}\n      >\n        <img src={adornment} alt=\"\" role=\"presentation\" />\n      </OptionAdornmentContainer>\n    );\n  }\n\n  return (\n    <OptionAdornmentContainer\n      isTagContainer\n      odysseyDesignTokens={odysseyDesignTokens}\n    >\n      {adornment}\n    </OptionAdornmentContainer>\n  );\n};\n\nexport type PickerWithOptionAdornmentProps<\n  OptionType extends AdornmentOptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined,\n> = BasePickerProps<OptionType, HasMultipleChoices, IsCustomValueAllowed> & {\n  adornmentSize?: AdornmentSize;\n};\n\ntype PickerWithOptionAdornmentComponentType = {\n  <\n    OptionType extends AdornmentLabelDescription,\n    HasMultipleChoices extends boolean | undefined,\n    IsCustomValueAllowed extends boolean | undefined,\n  >(\n    props: PickerWithOptionAdornmentProps<\n      OptionType,\n      HasMultipleChoices,\n      IsCustomValueAllowed\n    >,\n  ): ReactElement;\n  <\n    OptionType extends AdornmentLabelDescriptionMetadata,\n    HasMultipleChoices extends boolean | undefined,\n    IsCustomValueAllowed extends boolean | undefined,\n  >(\n    props: PickerWithOptionAdornmentProps<\n      OptionType,\n      HasMultipleChoices,\n      IsCustomValueAllowed\n    >,\n  ): ReactElement;\n};\n\nconst PickerWithOptionAdornment: PickerWithOptionAdornmentComponentType = <\n  OptionType extends AdornmentOptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined,\n>({\n  adornmentSize = \"small\",\n  ariaDescribedBy,\n  defaultValue,\n  errorMessage,\n  errorMessageList,\n  getIsOptionEqualToValue,\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: 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}: PickerWithOptionAdornmentProps<\n  OptionType,\n  HasMultipleChoices,\n  IsCustomValueAllowed\n>) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const customTagRender = useCallback<\n    NonNullable<\n      ComposablePickerProps<\n        OptionType,\n        HasMultipleChoices,\n        IsCustomValueAllowed\n      >[\"renderTags\"]\n    >\n  >(\n    (values, getTagProps) =>\n      values.map((value, index) => {\n        const { key, onDelete } = getTagProps({ index });\n        const { adornment, label } = value;\n\n        return (\n          <Box\n            key={key}\n            sx={{\n              margin: odysseyDesignTokens.Spacing1,\n              marginInlineEnd: 0,\n            }}\n          >\n            <Tag\n              icon={<TagAdornment adornment={adornment} />}\n              label={label}\n              onRemove={onDelete}\n            />\n          </Box>\n        );\n      }),\n    [odysseyDesignTokens],\n  );\n\n  const customOptionRender = useCallback<\n    (props: HTMLAttributes<HTMLLIElement>, option: OptionType) => ReactNode\n  >(\n    (muiProps, option) => {\n      const hasMetadata = \"metaData\" in option && option.metaData;\n\n      if (hasMetadata) {\n        return (\n          <OptionWithLabelDescriptionMetadata\n            adornmentSize={adornmentSize}\n            muiProps={muiProps}\n            odysseyDesignTokens={odysseyDesignTokens}\n            option={option}\n          />\n        );\n      }\n\n      return (\n        <OptionWithLabelDescriptionOnly\n          adornmentSize={adornmentSize}\n          muiProps={muiProps}\n          odysseyDesignTokens={odysseyDesignTokens}\n          option={option}\n        />\n      );\n    },\n    [adornmentSize, odysseyDesignTokens],\n  );\n\n  return (\n    <ComposablePicker<OptionType, HasMultipleChoices, IsCustomValueAllowed>\n      ariaDescribedBy={ariaDescribedBy}\n      defaultValue={defaultValue}\n      errorMessage={errorMessage}\n      errorMessageList={errorMessageList}\n      getIsOptionEqualToValue={getIsOptionEqualToValue}\n      groupOptionsBy={groupOptionsBy}\n      hasMultipleChoices={hasMultipleChoices}\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      hint={hint}\n      HintLinkComponent={HintLinkComponent}\n      label={label}\n      name={nameOverride}\n      onBlur={onBlur}\n      onChange={onChangeProp}\n      onInputChange={onInputChangeProp}\n      onFocus={onFocus}\n      options={options}\n      renderOption={customOptionRender}\n      renderTags={customTagRender}\n      value={value}\n      testId={testId}\n      translate={translate}\n    />\n  );\n};\n\n// Need the `as BasePickerType` because generics don't get passed through\nconst MemoizedPickerWithOptionAdornment = memo(\n  PickerWithOptionAdornment,\n) as BasePickerType;\n\nMemoizedPickerWithOptionAdornment.displayName = \"PickerWithOptionAdornment\";\n\nexport { MemoizedPickerWithOptionAdornment as PickerWithOptionAdornment };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"PickerWithOptionAdornment.cjs","names":["_react","require","_styled","_interopRequireDefault","_Box","_ComposablePicker","_OdysseyDesignTokensContext","_Picker","_Typography","_Tag","_jsxRuntime","e","__esModule","default","OptionAdornmentContainer","styled","shouldForwardProp","prop","adornmentSize","isTagContainer","odysseyDesignTokens","position","bottom","alignSelf","width","Spacing5","height","overflow","marginInlineEnd","Spacing3","svg","img","top","left","transform","Spacing8","Spacing4","maxHeight","Spacing2","display","OptionAdornment","adornment","isImageAdornment","jsx","children","src","alt","role","OptionWithLabelDescriptionOnly","muiProps","option","description","label","value","jsxs","Option","hasAdornment","OptionLabelContainer","Heading6","component","OptionDescriptionComponent","OptionWithLabelDescriptionMetadata","metaData","OptionMetadataComponent","TagAdornment","useOdysseyDesignTokens","PickerWithOptionAdornment","ariaDescribedBy","defaultValue","errorMessage","errorMessageList","getIsOptionEqualToValue","groupOptionsBy","hasMultipleChoices","id","idOverride","inputValue","isCustomValueAllowed","isDisabled","isFullWidth","isLoading","isOptional","isReadOnly","isVirtualized","isVirtualizedProp","hint","HintLinkComponent","name","nameOverride","onBlur","onChange","onChangeProp","onInputChange","onInputChangeProp","onFocus","options","testId","translate","customTagRender","useCallback","values","getTagProps","map","index","key","onDelete","Box","sx","margin","Spacing1","Tag","icon","onRemove","customOptionRender","hasMetadata","ComposablePicker","renderOption","renderTags","MemoizedPickerWithOptionAdornment","exports","memo","displayName"],"sources":["../../../../src/labs/OdysseyPickers/PickerWithOptionAdornment.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  HTMLAttributes,\n  memo,\n  ReactElement,\n  ReactNode,\n  useCallback,\n} from \"react\";\nimport styled from \"@emotion/styled\";\n\nimport { Box } from \"../../Box.js\";\nimport {\n  ComposablePicker,\n  ComposablePickerProps,\n  type AdornmentSize,\n  type BasePickerProps,\n  type BasePickerType,\n} from \"./ComposablePicker.js\";\nimport {\n  useOdysseyDesignTokens,\n  DesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport {\n  type BaseOptionProps,\n  type LabelDescription,\n  type Metadata,\n  Option,\n  OptionDescriptionComponent,\n  OptionLabelContainer,\n  OptionMetadataComponent,\n  OptionProps,\n} from \"./Picker.js\";\nimport { Heading6 } from \"../../Typography.js\";\nimport { Tag } from \"../../Tag.js\";\n\ntype Adornment = ReactNode | string;\n\ntype AdornmentLabelDescription = LabelDescription & {\n  adornment: Adornment;\n};\n\ntype AdornmentLabelDescriptionMetadata = AdornmentLabelDescription & Metadata;\n\nexport type AdornmentOptionType =\n  | AdornmentLabelDescription\n  | AdornmentLabelDescriptionMetadata;\n\nconst OptionAdornmentContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"adornmentSize\" &&\n    prop !== \"isTagContainer\",\n})<{\n  adornmentSize?: AdornmentSize;\n  isTagContainer?: boolean;\n  odysseyDesignTokens: DesignTokens;\n}>(\n  ({\n    adornmentSize = \"small\",\n    isTagContainer = false,\n    odysseyDesignTokens,\n  }) => ({\n    position: \"relative\",\n    // push icon up by one px for better visual alignment\n    bottom: \"1px\",\n    alignSelf: \"flex-start\",\n    width: odysseyDesignTokens.Spacing5,\n    height: odysseyDesignTokens.Spacing5,\n    overflow: \"hidden\",\n    marginInlineEnd: odysseyDesignTokens.Spacing3,\n\n    svg: {\n      width: \"100%\",\n      height: \"auto\",\n    },\n\n    img: {\n      position: \"absolute\",\n      top: \"50%\",\n      left: \"50%\",\n      width: \"100%\",\n      transform: \"translate(-50%, -50%)\",\n    },\n\n    ...(adornmentSize === \"large\" &&\n      !isTagContainer && {\n        bottom: 0,\n        width: odysseyDesignTokens.Spacing8,\n        height: odysseyDesignTokens.Spacing8,\n      }),\n\n    ...(isTagContainer && {\n      bottom: 0,\n      alignSelf: \"center\",\n      width: odysseyDesignTokens.Spacing4,\n      height: \"auto\",\n      maxHeight: odysseyDesignTokens.Spacing4,\n      marginInlineEnd: odysseyDesignTokens.Spacing2,\n\n      svg: {\n        display: \"flex\",\n        width: \"100%\",\n        height: \"auto\",\n      },\n    }),\n  }),\n);\n\ntype OptionAdornmentProps = {\n  adornment: Adornment;\n  adornmentSize: AdornmentSize;\n  odysseyDesignTokens: DesignTokens;\n};\n\nconst OptionAdornment = ({\n  adornment,\n  adornmentSize,\n  odysseyDesignTokens,\n}: OptionAdornmentProps) => {\n  const isImageAdornment = typeof adornment === \"string\";\n\n  if (isImageAdornment) {\n    return (\n      <OptionAdornmentContainer\n        adornmentSize={adornmentSize}\n        odysseyDesignTokens={odysseyDesignTokens}\n      >\n        {/* NOTE: Intentionally leaving alt as an empty string here so screen readers will ignore this image */}\n        {/* Image should be sufficiently described by the adjacent title and/or description of the option */}\n        <img src={adornment} alt=\"\" role=\"presentation\" />\n      </OptionAdornmentContainer>\n    );\n  } else {\n    return (\n      <OptionAdornmentContainer\n        adornmentSize={adornmentSize}\n        odysseyDesignTokens={odysseyDesignTokens}\n      >\n        {adornment}\n      </OptionAdornmentContainer>\n    );\n  }\n};\n\nconst OptionWithLabelDescriptionOnly = <\n  OptionType extends AdornmentLabelDescription,\n>({\n  adornmentSize,\n  muiProps,\n  odysseyDesignTokens,\n  option,\n}: BaseOptionProps &\n  OptionProps<OptionType> & { adornmentSize: AdornmentSize }) => {\n  const { adornment, description, label, value } = option;\n  return (\n    <Option hasAdornment key={value} muiProps={muiProps}>\n      <OptionAdornment\n        adornment={adornment}\n        adornmentSize={adornmentSize}\n        odysseyDesignTokens={odysseyDesignTokens}\n      />\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 OptionWithLabelDescriptionMetadata = <\n  OptionType extends AdornmentLabelDescriptionMetadata,\n>({\n  adornmentSize,\n  muiProps,\n  odysseyDesignTokens,\n  option,\n}: BaseOptionProps &\n  OptionProps<OptionType> & {\n    adornmentSize: AdornmentSize;\n  }) => {\n  const { adornment, description, label, metaData, value } = option;\n\n  return (\n    <Option hasAdornment key={value} muiProps={muiProps}>\n      <OptionAdornment\n        adornment={adornment}\n        adornmentSize={adornmentSize}\n        odysseyDesignTokens={odysseyDesignTokens}\n      />\n      <div>\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      </div>\n    </Option>\n  );\n};\n\ntype TagAdornmentProps = {\n  adornment: Adornment;\n};\n\nconst TagAdornment = ({ adornment }: TagAdornmentProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const isImageAdornment = typeof adornment === \"string\";\n\n  if (isImageAdornment) {\n    return (\n      <OptionAdornmentContainer\n        isTagContainer\n        odysseyDesignTokens={odysseyDesignTokens}\n      >\n        <img src={adornment} alt=\"\" role=\"presentation\" />\n      </OptionAdornmentContainer>\n    );\n  }\n\n  return (\n    <OptionAdornmentContainer\n      isTagContainer\n      odysseyDesignTokens={odysseyDesignTokens}\n    >\n      {adornment}\n    </OptionAdornmentContainer>\n  );\n};\n\nexport type PickerWithOptionAdornmentProps<\n  OptionType extends AdornmentOptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined,\n> = BasePickerProps<OptionType, HasMultipleChoices, IsCustomValueAllowed> & {\n  adornmentSize?: AdornmentSize;\n};\n\ntype PickerWithOptionAdornmentComponentType = {\n  <\n    OptionType extends AdornmentLabelDescription,\n    HasMultipleChoices extends boolean | undefined,\n    IsCustomValueAllowed extends boolean | undefined,\n  >(\n    props: PickerWithOptionAdornmentProps<\n      OptionType,\n      HasMultipleChoices,\n      IsCustomValueAllowed\n    >,\n  ): ReactElement;\n  <\n    OptionType extends AdornmentLabelDescriptionMetadata,\n    HasMultipleChoices extends boolean | undefined,\n    IsCustomValueAllowed extends boolean | undefined,\n  >(\n    props: PickerWithOptionAdornmentProps<\n      OptionType,\n      HasMultipleChoices,\n      IsCustomValueAllowed\n    >,\n  ): ReactElement;\n};\n\nconst PickerWithOptionAdornment: PickerWithOptionAdornmentComponentType = <\n  OptionType extends AdornmentOptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined,\n>({\n  adornmentSize = \"small\",\n  ariaDescribedBy,\n  defaultValue,\n  errorMessage,\n  errorMessageList,\n  getIsOptionEqualToValue,\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: 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}: PickerWithOptionAdornmentProps<\n  OptionType,\n  HasMultipleChoices,\n  IsCustomValueAllowed\n>) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const customTagRender = useCallback<\n    NonNullable<\n      ComposablePickerProps<\n        OptionType,\n        HasMultipleChoices,\n        IsCustomValueAllowed\n      >[\"renderTags\"]\n    >\n  >(\n    (values, getTagProps) =>\n      values.map((value, index) => {\n        const { key, onDelete } = getTagProps({ index });\n        const { adornment, label } = value;\n\n        return (\n          <Box\n            key={key}\n            sx={{\n              margin: odysseyDesignTokens.Spacing1,\n              marginInlineEnd: 0,\n            }}\n          >\n            <Tag\n              icon={<TagAdornment adornment={adornment} />}\n              label={label}\n              onRemove={onDelete}\n            />\n          </Box>\n        );\n      }),\n    [odysseyDesignTokens],\n  );\n\n  const customOptionRender = useCallback<\n    (props: HTMLAttributes<HTMLLIElement>, option: OptionType) => ReactNode\n  >(\n    (muiProps, option) => {\n      const hasMetadata = \"metaData\" in option && option.metaData;\n\n      if (hasMetadata) {\n        return (\n          <OptionWithLabelDescriptionMetadata\n            adornmentSize={adornmentSize}\n            muiProps={muiProps}\n            odysseyDesignTokens={odysseyDesignTokens}\n            option={option}\n          />\n        );\n      }\n\n      return (\n        <OptionWithLabelDescriptionOnly\n          adornmentSize={adornmentSize}\n          muiProps={muiProps}\n          odysseyDesignTokens={odysseyDesignTokens}\n          option={option}\n        />\n      );\n    },\n    [adornmentSize, odysseyDesignTokens],\n  );\n\n  return (\n    <ComposablePicker<OptionType, HasMultipleChoices, IsCustomValueAllowed>\n      ariaDescribedBy={ariaDescribedBy}\n      defaultValue={defaultValue}\n      errorMessage={errorMessage}\n      errorMessageList={errorMessageList}\n      getIsOptionEqualToValue={getIsOptionEqualToValue}\n      groupOptionsBy={groupOptionsBy}\n      hasMultipleChoices={hasMultipleChoices}\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      hint={hint}\n      HintLinkComponent={HintLinkComponent}\n      label={label}\n      name={nameOverride}\n      onBlur={onBlur}\n      onChange={onChangeProp}\n      onInputChange={onInputChangeProp}\n      onFocus={onFocus}\n      options={options}\n      renderOption={customOptionRender}\n      renderTags={customTagRender}\n      value={value}\n      testId={testId}\n      translate={translate}\n    />\n  );\n};\n\n// Need the `as BasePickerType` because generics don't get passed through\nconst MemoizedPickerWithOptionAdornment = memo(\n  PickerWithOptionAdornment,\n) as BasePickerType;\n\nMemoizedPickerWithOptionAdornment.displayName = \"PickerWithOptionAdornment\";\n\nexport { MemoizedPickerWithOptionAdornment as PickerWithOptionAdornment };\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/labs/OdysseyPickers/SearchDropdown.cjs

@@ -0,0 +1,269 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SearchDropdown = void 0;
+var _react = require("react");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _ComposablePicker = require("./ComposablePicker.cjs");
+var _OdysseyDesignTokensContext = require("../../OdysseyDesignTokensContext.cjs");
+var _Picker = require("./Picker.cjs");
+var _Typography = require("../../Typography.cjs");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/*!
+ * 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.
+ */
+
+const OptionAdornmentContainer = (0, _styled.default)("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "adornmentSize" && prop !== "isTagContainer"
+})(({
+  adornmentSize = "small",
+  isTagContainer = false,
+  odysseyDesignTokens,
+  position = "left"
+}) => ({
+  position: "relative",
+  bottom: "1px",
+  alignSelf: "flex-start",
+  width: odysseyDesignTokens.Spacing5,
+  height: odysseyDesignTokens.Spacing5,
+  overflow: "hidden",
+  ...(position === "left" && {
+    marginInlineEnd: odysseyDesignTokens.Spacing3
+  }),
+  ...(position === "right" && {
+    marginInlineStart: odysseyDesignTokens.Spacing3
+  }),
+  svg: {
+    width: "100%",
+    height: "auto"
+  },
+  img: {
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    width: "100%",
+    transform: "translate(-50%, -50%)"
+  },
+  ...(adornmentSize === "large" && !isTagContainer && {
+    bottom: 0,
+    width: odysseyDesignTokens.Spacing8,
+    height: odysseyDesignTokens.Spacing8
+  }),
+  ...(isTagContainer && {
+    bottom: 0,
+    alignSelf: "center",
+    width: odysseyDesignTokens.Spacing4,
+    height: "auto",
+    maxHeight: odysseyDesignTokens.Spacing4,
+    marginInlineEnd: odysseyDesignTokens.Spacing2,
+    svg: {
+      display: "flex",
+      width: "100%",
+      height: "auto"
+    }
+  })
+}));
+const CustomOptionContainer = (0, _styled.default)("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(() => ({
+  display: "flex",
+  justifyContent: "space-between",
+  width: "100%"
+}));
+const CustomOptionLeftContainer = (0, _styled.default)("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(() => ({
+  display: "flex"
+}));
+const OptionAdornment = ({
+  adornment,
+  adornmentSize,
+  odysseyDesignTokens
+}) => {
+  const isImageAdornment = typeof adornment === "string";
+  if (isImageAdornment) {
+    return (0, _jsxRuntime.jsx)(OptionAdornmentContainer, {
+      adornmentSize: adornmentSize,
+      odysseyDesignTokens: odysseyDesignTokens,
+      children: (0, _jsxRuntime.jsx)("img", {
+        src: adornment,
+        alt: "",
+        role: "presentation"
+      })
+    });
+  } else {
+    return (0, _jsxRuntime.jsx)(OptionAdornmentContainer, {
+      adornmentSize: adornmentSize,
+      odysseyDesignTokens: odysseyDesignTokens,
+      children: adornment
+    });
+  }
+};
+const Extra = ({
+  content,
+  size,
+  odysseyDesignTokens,
+  onClick
+}) => {
+  const handleClick = (0, _react.useCallback)(event => {
+    event.stopPropagation();
+    onClick();
+  }, [onClick]);
+  return (0, _jsxRuntime.jsx)(OptionAdornmentContainer, {
+    adornmentSize: size,
+    odysseyDesignTokens: odysseyDesignTokens,
+    onClick: handleClick,
+    children: content
+  });
+};
+const CustomOption = ({
+  adornmentSize,
+  muiProps,
+  odysseyDesignTokens,
+  option
+}) => {
+  const {
+    adornment,
+    description,
+    label,
+    metaData,
+    extra,
+    value,
+    onClick,
+    isInteractive = true
+  } = option;
+  const handleOptionClick = (0, _react.useCallback)(event => {
+    if (!isInteractive) {
+      event.preventDefault();
+      return;
+    }
+    event.stopPropagation();
+    onClick?.();
+  }, [onClick, isInteractive]);
+  const extendedMuiProps = (0, _react.useMemo)(() => {
+    return {
+      ...muiProps,
+      onClick: isInteractive ? handleOptionClick : undefined,
+      "aria-disabled": !isInteractive ? "true" : undefined,
+      role: "option"
+    };
+  }, [muiProps, isInteractive, handleOptionClick]);
+  return (0, _jsxRuntime.jsx)(_Picker.Option, {
+    hasAdornment: true,
+    muiProps: extendedMuiProps,
+    children: (0, _jsxRuntime.jsxs)(CustomOptionContainer, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      children: [(0, _jsxRuntime.jsxs)(CustomOptionLeftContainer, {
+        odysseyDesignTokens: odysseyDesignTokens,
+        children: [(0, _jsxRuntime.jsx)(OptionAdornment, {
+          adornment: adornment,
+          adornmentSize: adornmentSize,
+          odysseyDesignTokens: odysseyDesignTokens
+        }), (0, _jsxRuntime.jsxs)("div", {
+          children: [(0, _jsxRuntime.jsxs)(_Picker.OptionLabelContainer, {
+            odysseyDesignTokens: odysseyDesignTokens,
+            children: [(0, _jsxRuntime.jsx)(_Typography.Heading6, {
+              component: "p",
+              children: label
+            }), (0, _jsxRuntime.jsx)(_Picker.OptionDescriptionComponent, {
+              description: description,
+              odysseyDesignTokens: odysseyDesignTokens
+            })]
+          }), metaData && (0, _jsxRuntime.jsx)(_Picker.OptionMetadataComponent, {
+            metaData: metaData,
+            odysseyDesignTokens: odysseyDesignTokens
+          })]
+        })]
+      }), extra && (0, _jsxRuntime.jsx)(Extra, {
+        content: extra.content,
+        size: extra.size || adornmentSize,
+        onClick: extra.onClick,
+        odysseyDesignTokens: odysseyDesignTokens
+      })]
+    })
+  }, value);
+};
+const SearchDropdown = ({
+  adornmentSize = "small",
+  ariaDescribedBy,
+  defaultValue,
+  errorMessage,
+  errorMessageList,
+  getIsOptionEqualToValue,
+  groupOptionsBy,
+  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 = (0, _OdysseyDesignTokensContext.useOdysseyDesignTokens)();
+  const customOptionRender = (0, _react.useCallback)((muiProps, option) => {
+    return (0, _jsxRuntime.jsx)(CustomOption, {
+      adornmentSize: adornmentSize,
+      muiProps: muiProps,
+      odysseyDesignTokens: odysseyDesignTokens,
+      option: option
+    });
+  }, [adornmentSize, odysseyDesignTokens]);
+  return (0, _jsxRuntime.jsx)(_ComposablePicker.ComposablePicker, {
+    ariaDescribedBy: ariaDescribedBy,
+    defaultValue: defaultValue,
+    errorMessage: errorMessage,
+    errorMessageList: errorMessageList,
+    getIsOptionEqualToValue: getIsOptionEqualToValue,
+    groupOptionsBy: groupOptionsBy,
+    id: idOverride,
+    inputValue: inputValue,
+    isCustomValueAllowed: isCustomValueAllowed,
+    isDisabled: isDisabled,
+    isFullWidth: isFullWidth,
+    isLoading: isLoading,
+    isOptional: isOptional,
+    isReadOnly: isReadOnly,
+    isVirtualized: isVirtualizedProp,
+    hint: hint,
+    HintLinkComponent: HintLinkComponent,
+    label: label,
+    name: nameOverride,
+    onBlur: onBlur,
+    onChange: onChangeProp,
+    onInputChange: onInputChangeProp,
+    onFocus: onFocus,
+    options: options,
+    renderOption: customOptionRender,
+    value: value,
+    testId: testId,
+    translate: translate
+  });
+};
+const MemoizedSearchDropdown = exports.SearchDropdown = (0, _react.memo)(SearchDropdown);
+MemoizedSearchDropdown.displayName = "MemoizedSearchDropdown";
+//# sourceMappingURL=SearchDropdown.cjs.map

package/dist/cjs/labs/OdysseyPickers/SearchDropdown.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchDropdown.cjs","names":["_react","require","_styled","_interopRequireDefault","_ComposablePicker","_OdysseyDesignTokensContext","_Picker","_Typography","_jsxRuntime","e","__esModule","default","OptionAdornmentContainer","styled","shouldForwardProp","prop","adornmentSize","isTagContainer","odysseyDesignTokens","position","bottom","alignSelf","width","Spacing5","height","overflow","marginInlineEnd","Spacing3","marginInlineStart","svg","img","top","left","transform","Spacing8","Spacing4","maxHeight","Spacing2","display","CustomOptionContainer","justifyContent","CustomOptionLeftContainer","OptionAdornment","adornment","isImageAdornment","jsx","children","src","alt","role","Extra","content","size","onClick","handleClick","useCallback","event","stopPropagation","CustomOption","muiProps","option","description","label","metaData","extra","value","isInteractive","handleOptionClick","preventDefault","extendedMuiProps","useMemo","undefined","Option","hasAdornment","jsxs","OptionLabelContainer","Heading6","component","OptionDescriptionComponent","OptionMetadataComponent","SearchDropdown","ariaDescribedBy","defaultValue","errorMessage","errorMessageList","getIsOptionEqualToValue","groupOptionsBy","id","idOverride","inputValue","isCustomValueAllowed","isDisabled","isFullWidth","isLoading","isOptional","isReadOnly","isVirtualized","isVirtualizedProp","hint","HintLinkComponent","name","nameOverride","onBlur","onChange","onChangeProp","onInputChange","onInputChangeProp","onFocus","options","testId","translate","useOdysseyDesignTokens","customOptionRender","ComposablePicker","renderOption","MemoizedSearchDropdown","exports","memo","displayName"],"sources":["../../../../src/labs/OdysseyPickers/SearchDropdown.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  HTMLAttributes,\n  memo,\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useMemo,\n} from \"react\";\nimport styled from \"@emotion/styled\";\n\nimport {\n  ComposablePicker,\n  type AdornmentSize,\n  type BasePickerProps,\n  type BasePickerType,\n} from \"./ComposablePicker.js\";\nimport {\n  useOdysseyDesignTokens,\n  DesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport {\n  type BaseOptionProps,\n  type LabelDescription,\n  type Metadata,\n  Option,\n  OptionDescriptionComponent,\n  OptionLabelContainer,\n  OptionMetadataComponent,\n  OptionProps,\n} from \"./Picker.js\";\nimport { Heading6 } from \"../../Typography.js\";\n\ntype Adornment = ReactNode | string;\ntype ExtraType = {\n  content: ReactNode | string;\n  size?: AdornmentSize;\n  onClick: () => void;\n};\n\ntype AdornmentLabelDescription = LabelDescription & {\n  adornment: Adornment;\n  extra?: ExtraType;\n  onClick?: () => void;\n  isInteractive?: boolean;\n};\n\nexport type CustomOptionType = AdornmentLabelDescription & Partial<Metadata>;\n\nconst OptionAdornmentContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"adornmentSize\" &&\n    prop !== \"isTagContainer\",\n})<{\n  adornmentSize?: AdornmentSize;\n  isTagContainer?: boolean;\n  odysseyDesignTokens: DesignTokens;\n  position?: \"left\" | \"right\";\n}>(\n  ({\n    adornmentSize = \"small\",\n    isTagContainer = false,\n\n    odysseyDesignTokens,\n    position = \"left\",\n  }) => ({\n    position: \"relative\",\n    // push icon up by one px for better visual alignment\n    bottom: \"1px\",\n    alignSelf: \"flex-start\",\n    width: odysseyDesignTokens.Spacing5,\n    height: odysseyDesignTokens.Spacing5,\n    overflow: \"hidden\",\n\n    ...(position === \"left\" && {\n      marginInlineEnd: odysseyDesignTokens.Spacing3,\n    }),\n    ...(position === \"right\" && {\n      marginInlineStart: odysseyDesignTokens.Spacing3,\n    }),\n\n    svg: {\n      width: \"100%\",\n      height: \"auto\",\n    },\n\n    img: {\n      position: \"absolute\",\n      top: \"50%\",\n      left: \"50%\",\n      width: \"100%\",\n      transform: \"translate(-50%, -50%)\",\n    },\n\n    ...(adornmentSize === \"large\" &&\n      !isTagContainer && {\n        bottom: 0,\n        width: odysseyDesignTokens.Spacing8,\n        height: odysseyDesignTokens.Spacing8,\n      }),\n\n    ...(isTagContainer && {\n      bottom: 0,\n      alignSelf: \"center\",\n      width: odysseyDesignTokens.Spacing4,\n      height: \"auto\",\n      maxHeight: odysseyDesignTokens.Spacing4,\n      marginInlineEnd: odysseyDesignTokens.Spacing2,\n\n      svg: {\n        display: \"flex\",\n        width: \"100%\",\n        height: \"auto\",\n      },\n    }),\n  }),\n);\n\ntype OptionAdornmentProps = {\n  adornment: Adornment;\n  adornmentSize: AdornmentSize;\n  odysseyDesignTokens: DesignTokens;\n};\n\ntype ExtraProps = {\n  content: Adornment;\n  size?: AdornmentSize;\n  odysseyDesignTokens: DesignTokens;\n  onClick: () => void;\n};\n\nconst CustomOptionContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(() => ({\n  display: \"flex\",\n  justifyContent: \"space-between\",\n  width: \"100%\",\n}));\n\nconst CustomOptionLeftContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(() => ({\n  display: \"flex\",\n}));\n\nconst OptionAdornment = ({\n  adornment,\n  adornmentSize,\n  odysseyDesignTokens,\n}: OptionAdornmentProps) => {\n  const isImageAdornment = typeof adornment === \"string\";\n\n  if (isImageAdornment) {\n    return (\n      <OptionAdornmentContainer\n        adornmentSize={adornmentSize}\n        odysseyDesignTokens={odysseyDesignTokens}\n      >\n        <img src={adornment} alt=\"\" role=\"presentation\" />\n      </OptionAdornmentContainer>\n    );\n  } else {\n    return (\n      <OptionAdornmentContainer\n        adornmentSize={adornmentSize}\n        odysseyDesignTokens={odysseyDesignTokens}\n      >\n        {adornment}\n      </OptionAdornmentContainer>\n    );\n  }\n};\n\nconst Extra = ({ content, size, odysseyDesignTokens, onClick }: ExtraProps) => {\n  const handleClick = useCallback(\n    (event: React.MouseEvent) => {\n      event.stopPropagation();\n      onClick();\n    },\n    [onClick],\n  );\n\n  return (\n    <OptionAdornmentContainer\n      adornmentSize={size}\n      odysseyDesignTokens={odysseyDesignTokens}\n      onClick={handleClick}\n    >\n      {content}\n    </OptionAdornmentContainer>\n  );\n};\n\nconst CustomOption = <OptionType extends CustomOptionType>({\n  adornmentSize,\n  muiProps,\n  odysseyDesignTokens,\n  option,\n}: BaseOptionProps &\n  OptionProps<OptionType> & {\n    adornmentSize: AdornmentSize;\n  }) => {\n  const {\n    adornment,\n    description,\n    label,\n    metaData,\n    extra,\n    value,\n    onClick,\n    isInteractive = true,\n  } = option;\n\n  const handleOptionClick = useCallback(\n    (event: React.MouseEvent) => {\n      if (!isInteractive) {\n        event.preventDefault();\n        return;\n      }\n      event.stopPropagation();\n      onClick?.();\n    },\n    [onClick, isInteractive],\n  );\n\n  const extendedMuiProps = useMemo(() => {\n    return {\n      ...muiProps,\n      onClick: isInteractive ? handleOptionClick : undefined,\n      \"aria-disabled\": !isInteractive ? \"true\" : undefined,\n      role: \"option\",\n    } as HTMLAttributes<HTMLLIElement>;\n  }, [muiProps, isInteractive, handleOptionClick]);\n\n  return (\n    <Option hasAdornment key={value} muiProps={extendedMuiProps}>\n      <CustomOptionContainer odysseyDesignTokens={odysseyDesignTokens}>\n        <CustomOptionLeftContainer odysseyDesignTokens={odysseyDesignTokens}>\n          <OptionAdornment\n            adornment={adornment}\n            adornmentSize={adornmentSize}\n            odysseyDesignTokens={odysseyDesignTokens}\n          />\n          <div>\n            <OptionLabelContainer odysseyDesignTokens={odysseyDesignTokens}>\n              <Heading6 component=\"p\">{label}</Heading6>\n              <OptionDescriptionComponent\n                description={description}\n                odysseyDesignTokens={odysseyDesignTokens}\n              />\n            </OptionLabelContainer>\n            {metaData && (\n              <OptionMetadataComponent\n                metaData={metaData}\n                odysseyDesignTokens={odysseyDesignTokens}\n              />\n            )}\n          </div>\n        </CustomOptionLeftContainer>\n        {extra && (\n          <Extra\n            content={extra.content}\n            size={extra.size || adornmentSize}\n            onClick={extra.onClick}\n            odysseyDesignTokens={odysseyDesignTokens}\n          />\n        )}\n      </CustomOptionContainer>\n    </Option>\n  );\n};\n\nexport type SearchDropdownProps<\n  OptionType extends CustomOptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined,\n> = BasePickerProps<OptionType, HasMultipleChoices, IsCustomValueAllowed> & {\n  adornmentSize?: AdornmentSize;\n};\n\ntype PickerWithOptionAdornmentComponentType = {\n  <\n    OptionType extends CustomOptionType,\n    HasMultipleChoices extends boolean | undefined,\n    IsCustomValueAllowed extends boolean | undefined,\n  >(\n    props: SearchDropdownProps<\n      OptionType,\n      HasMultipleChoices,\n      IsCustomValueAllowed\n    >,\n  ): ReactElement;\n  <\n    OptionType extends CustomOptionType,\n    HasMultipleChoices extends boolean | undefined,\n    IsCustomValueAllowed extends boolean | undefined,\n  >(\n    props: SearchDropdownProps<\n      OptionType,\n      HasMultipleChoices,\n      IsCustomValueAllowed\n    >,\n  ): ReactElement;\n};\n\nconst SearchDropdown: PickerWithOptionAdornmentComponentType = <\n  OptionType extends CustomOptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined,\n>({\n  adornmentSize = \"small\",\n  ariaDescribedBy,\n  defaultValue,\n  errorMessage,\n  errorMessageList,\n  getIsOptionEqualToValue,\n  groupOptionsBy,\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}: SearchDropdownProps<\n  OptionType,\n  HasMultipleChoices,\n  IsCustomValueAllowed\n>) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const customOptionRender = useCallback<\n    (props: HTMLAttributes<HTMLLIElement>, option: OptionType) => ReactNode\n  >(\n    (muiProps, option) => {\n      return (\n        <CustomOption\n          adornmentSize={adornmentSize}\n          muiProps={muiProps}\n          odysseyDesignTokens={odysseyDesignTokens}\n          option={option}\n        />\n      );\n    },\n    [adornmentSize, odysseyDesignTokens],\n  );\n\n  return (\n    <ComposablePicker<OptionType, HasMultipleChoices, IsCustomValueAllowed>\n      ariaDescribedBy={ariaDescribedBy}\n      defaultValue={defaultValue}\n      errorMessage={errorMessage}\n      errorMessageList={errorMessageList}\n      getIsOptionEqualToValue={getIsOptionEqualToValue}\n      groupOptionsBy={groupOptionsBy}\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      hint={hint}\n      HintLinkComponent={HintLinkComponent}\n      label={label}\n      name={nameOverride}\n      onBlur={onBlur}\n      onChange={onChangeProp}\n      onInputChange={onInputChangeProp}\n      onFocus={onFocus}\n      options={options}\n      renderOption={customOptionRender}\n      value={value}\n      testId={testId}\n      translate={translate}\n    />\n  );\n};\n\n// Need the `as BasePickerType` because generics don't get passed through\nconst MemoizedSearchDropdown = memo(SearchDropdown) as BasePickerType;\n\nMemoizedSearchDropdown.displayName = \"MemoizedSearchDropdown\";\n\nexport { MemoizedSearchDropdown as SearchDropdown };\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/labs/OdysseyPickers/index.cjs

@@ -4,8 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
-  adornmentSizeValues: true
+  adornmentSizeValues: true,
+  SearchDropdown: true
 };
+Object.defineProperty(exports, "SearchDropdown", {
+  enumerable: true,
+  get: function () {
+    return _SearchDropdown.SearchDropdown;
+  }
+});
 Object.defineProperty(exports, "adornmentSizeValues", {
   enumerable: true,
   get: function () {
@@ -37,4 +44,5 @@ Object.keys(_PickerWithOptionAdornment).forEach(function (key) {
     }
   });
 });
+var _SearchDropdown = require("./SearchDropdown.cjs");
 //# sourceMappingURL=index.cjs.map

package/dist/cjs/labs/OdysseyPickers/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["_ComposablePicker","require","_Picker","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","_PickerWithOptionAdornment"],"sources":["../../../../src/labs/OdysseyPickers/index.ts"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nexport { adornmentSizeValues } from \"./ComposablePicker.js\";\nexport * from \"./Picker.js\";\nexport * from \"./PickerWithOptionAdornment.js\";\n"],"mappings":";;;;;;;;;;;;;;AAYA,IAAAA,iBAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AAAAE,MAAA,CAAAC,IAAA,CAAAF,OAAA,EAAAG,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAJ,OAAA,CAAAI,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAZ,OAAA,CAAAI,GAAA;IAAA;EAAA;AAAA;AACA,IAAAS,0BAAA,GAAAd,OAAA;AAAAE,MAAA,CAAAC,IAAA,CAAAW,0BAAA,EAAAV,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAS,0BAAA,CAAAT,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAC,0BAAA,CAAAT,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}
+{"version":3,"file":"index.cjs","names":["_ComposablePicker","require","_Picker","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","_PickerWithOptionAdornment","_SearchDropdown"],"sources":["../../../../src/labs/OdysseyPickers/index.ts"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nexport { adornmentSizeValues } from \"./ComposablePicker.js\";\nexport * from \"./Picker.js\";\nexport * from \"./PickerWithOptionAdornment.js\";\nexport { SearchDropdown } from \"./SearchDropdown.js\";\nexport type {\n  SearchDropdownProps,\n  CustomOptionType,\n} from \"./SearchDropdown.js\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAYA,IAAAA,iBAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AAAAE,MAAA,CAAAC,IAAA,CAAAF,OAAA,EAAAG,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAJ,OAAA,CAAAI,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAZ,OAAA,CAAAI,GAAA;IAAA;EAAA;AAAA;AACA,IAAAS,0BAAA,GAAAd,OAAA;AAAAE,MAAA,CAAAC,IAAA,CAAAW,0BAAA,EAAAV,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAS,0BAAA,CAAAT,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAC,0BAAA,CAAAT,GAAA;IAAA;EAAA;AAAA;AACA,IAAAU,eAAA,GAAAf,OAAA","ignoreList":[]}

package/dist/cjs/ui-shell/NarrowUiShellContent.cjs

@@ -224,11 +224,15 @@ const NarrowUiShellContent = ({
     setIsRightSideMenuOpen(false);
   }, []);
   (0, _react.useEffect)(() => {
-    const unsubscribe = uiShellContext?.subscribeSideNavItemClicked(() => {
+    const unsubscribeFromCloseRightSideMenu = uiShellContext?.subscribeToCloseRightSideMenu(() => {
+      closeSideMenus();
+    });
+    const unsubscribeFromSideNavItemClicked = uiShellContext?.subscribeToCloseSideNavMenu(() => {
       closeSideMenus();
     });
     return () => {
-      unsubscribe?.();
+      unsubscribeFromCloseRightSideMenu?.();
+      unsubscribeFromSideNavItemClicked?.();
     };
   }, [closeSideMenus, uiShellContext]);
   const toggleLeftSideMenu = (0, _react.useCallback)(() => {
@@ -269,9 +273,10 @@ const NarrowUiShellContent = ({
             topNavBackgroundColor: uiShellContext?.sideNavBackgroundColor,
             children: [(0, _jsxRuntime.jsxs)(StyledMenuLogo, {
               odysseyDesignTokens: odysseyDesignTokens,
-              children: [(0, _jsxRuntime.jsx)(_Button.Button, {
+              children: [(sideNavProps?.isCollapsible || !sideNavProps?.isCollapsed) && (0, _jsxRuntime.jsx)(_Button.Button, {
                 onClick: toggleLeftSideMenu,
                 startIcon: (0, _jsxRuntime.jsx)(_HamburgerMenuIcon.HamburgerMenuIcon, {}),
+                testId: "sidenav-menu--icon",
                 variant: "floating"
               }), (0, _jsxRuntime.jsx)(StyledLogoContainer, {
                 odysseyDesignTokens: odysseyDesignTokens,
@@ -286,6 +291,7 @@ const NarrowUiShellContent = ({
             }), optionalComponents?.rightSideMenu && (0, _jsxRuntime.jsx)(_Button.Button, {
               onClick: toggleRightSideMenu,
               startIcon: isRightSideMenuOpen ? (0, _jsxRuntime.jsx)(_Close.CloseIcon, {}) : (0, _jsxRuntime.jsx)(_More.MoreIcon, {}),
+              testId: "userprofile-menu--icon",
               variant: "floating"
             })]
           }), optionalComponents?.topNavLeftSide && (0, _jsxRuntime.jsx)(StyledTopNavSearch, {
@@ -294,9 +300,16 @@ const NarrowUiShellContent = ({
           })]
         })
       }), (0, _jsxRuntime.jsxs)(StyledAppContentArea, {
-        children: [(0, _jsxRuntime.jsx)(StyledLeftSideContainer, {
+        children: [(0, _jsxRuntime.jsxs)(StyledLeftSideContainer, {
           isOpen: isLeftSideMenuOpen,
-          children: sideNavProps && (0, _jsxRuntime.jsx)(_reactErrorBoundary.ErrorBoundary, {
+          children: [initialVisibleSections?.includes("SideNav") && sideNavProps === undefined && (0, _jsxRuntime.jsx)(_reactErrorBoundary.ErrorBoundary, {
+            fallback: null,
+            onError: onError,
+            children: (0, _jsxRuntime.jsx)(_SideNav.SideNav, {
+              isLoading: true,
+              sideNavItems: _uiShellSharedConstants.emptySideNavItems
+            })
+          }), sideNavProps && (0, _jsxRuntime.jsx)(_reactErrorBoundary.ErrorBoundary, {
             fallback: null,
             onError: onError,
             children: (0, _jsxRuntime.jsx)(StyledSideNavContainer, {
@@ -319,7 +332,7 @@ const NarrowUiShellContent = ({
                 isObtrusive: true
               })
             })
-          })
+          })]
         }), (0, _jsxRuntime.jsx)(StyledRightSideContainer, {
           isOpen: isRightSideMenuOpen,
           odysseyDesignTokens: odysseyDesignTokens,