{"version":3,"file":"GroupPicker.cjs","names":["_Avatar2","_interopRequireWildcard","require","_react","_Field","_index","_OdysseyDesignTokensContext","_Tag","_Typography","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_interopRequireDefault","avatarImageSizeSmall","avatarImageSizeMedium","GroupPicker","hasMultipleChoices","isCustomValueAllowed","isDisabled","isLoading","isOptional","isReadOnly","hint","label","onChange","onInputChange","options","value","testId","odysseyDesignTokens","useOdysseyDesignTokens","isOptionEqualToValue","useCallback","sourceValue","targetValue","id","getOptionLabel","option","name","renderOption","props","createElement","key","jsxs","_Box2","sx","alignItems","display","flexDirection","children","jsx","paddingRight","Spacing2","alt","src","logo","avatarClasses","fallback","visibility","background","height","width","Subordinate","description","paddingTop","Spacing1","usersCount","Spacing4","UserIcon","appsCount","GridIcon","groupPushMappingsCount","GroupIcon","renderTags","values","getTagProps","map","index","onDelete","margin","Tag","icon","onRemove","renderInput","InputLabelProps","InputProps","params","Field","fieldType","hasVisibleLabel","htmlFor","renderFieldComponent","ariaDescribedBy","_InputBase2","required","_Autocomplete2","disabled","filterSelectedOptions","freeSolo","loading","multiple","readOnly","MemoizedGroupPicker","exports","memo"],"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":[]}