{"version":3,"file":"SelectionMenu.jsx","sourceRoot":"","sources":["../../../src/dnd/StandardDragDropList/SelectionMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useState } from 'react';\nimport type { ChangeEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  defaultThemeProp,\n  Flex,\n  Menu,\n  menuHelpers,\n  useElement,\n  useI18n\n} from '@pega/cosmos-react-core';\nimport type { MenuItemProps, PopoverProps } from '@pega/cosmos-react-core';\nimport MultiSelectInput from '@pega/cosmos-react-core/lib/components/ComboBox/MultiSelectInput/MultiSelectInput';\nimport type { MultiSelectInputProps } from '@pega/cosmos-react-core/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.types';\nimport type { FieldType } from '@pega/cosmos-react-build';\n\nimport { mockQuery } from './mockData';\nimport type { ContentType } from './mockData';\nimport Popover from './Popover';\n\nexport interface SelectionMenuProps {\n  target: NonNullable<PopoverProps['target']>;\n  constraint?: {\n    types?: ContentType[];\n    subTypes?: FieldType[];\n  };\n  onCancel: () => void;\n  onSubmit: (selected: NonNullable<MultiSelectInputProps['selected']>) => void;\n}\n\nconst StyledSelectionMenu: typeof Menu = styled(Menu)(({ theme }) => {\n  return css`\n    margin-inline: calc(-2 * ${theme.base.spacing});\n  `;\n});\n\nStyledSelectionMenu.defaultProps = defaultThemeProp;\n\nconst rootMenuItems: MenuItemProps[] = [\n  { id: 'fields', primary: 'Fields', items: [] },\n  { id: 'views', primary: 'Views', items: [] }\n];\n\nconst SelectionMenu = ({ target, constraint, onCancel: onClose, onSubmit }: SelectionMenuProps) => {\n  const t = useI18n();\n  const [loading, setLoading] = useState(false);\n  const [filterValue, setFilterValue] = useState('');\n  const [inputEl, setInputEl] = useElement<HTMLElement>(null);\n\n  const [menuItems, setMenuItems] = useState<MenuItemProps[]>(() => {\n    if (constraint?.types) {\n      const constrainedTypes = [];\n      if (constraint.types.includes('Field')) {\n        constrainedTypes.push(rootMenuItems[0]);\n      }\n      if (constraint.types.includes('View')) {\n        constrainedTypes.push(rootMenuItems[1]);\n      }\n\n      return constrainedTypes;\n    }\n\n    return rootMenuItems;\n  });\n\n  const [selected, setSelected] = useState<NonNullable<MultiSelectInputProps['selected']>>(\n    () => []\n  );\n\n  const onItemExpand = useCallback(\n    async (id: MenuItemProps['id']) => {\n      const expandedItem = menuHelpers.getItem(menuItems, id);\n      if (!expandedItem || (expandedItem.items && expandedItem.items.length > 0)) {\n        return;\n      }\n\n      setLoading(true);\n\n      const subItems = await mockQuery({\n        type: id === 'fields' ? 'Field' : 'View',\n        delay: 1000\n      });\n\n      const newMenuItems = menuHelpers.mapItem(menuItems, id, item => {\n        return {\n          ...item,\n          items: subItems.map(subItem => ({\n            id: subItem.id,\n            primary: subItem.label,\n            selected: !!selected.find(s => s.id === subItem.id)\n          }))\n        };\n      });\n\n      setMenuItems(newMenuItems as MenuItemProps[]);\n      setLoading(false);\n    },\n    [menuItems, selected]\n  );\n\n  const onFilter = useCallback(async (e: ChangeEvent<HTMLInputElement>) => {\n    const val = e.currentTarget.value;\n    setFilterValue(val);\n\n    if (val) {\n      setLoading(true);\n      setMenuItems([]);\n\n      const matchedItems = await mockQuery({\n        filter: val,\n        delay: 1000\n      });\n\n      setMenuItems(\n        matchedItems.map(matchedItem => {\n          return {\n            id: matchedItem.id,\n            primary: matchedItem.label,\n            secondary: [matchedItem.subType ?? matchedItem.type],\n            selected: !!selected.find(s => s.id === matchedItem.id)\n          };\n        })\n      );\n\n      setLoading(false);\n      return;\n    }\n\n    setMenuItems(rootMenuItems);\n  }, []);\n\n  const onItemClick = useCallback(\n    (id: MenuItemProps['id']) => {\n      setSelected(cur => {\n        if (cur.find(s => s.id === id)) {\n          return cur.filter(sel => sel.id !== id);\n        }\n\n        return [\n          ...cur,\n          { id, text: (menuHelpers.getItem(menuItems, id) as MenuItemProps).primary }\n        ];\n      });\n\n      setMenuItems(cur => menuHelpers.toggleSelected(cur, id) as MenuItemProps[]);\n    },\n    [menuItems]\n  );\n\n  return (\n    <Popover\n      target={target}\n      heading='Content selection'\n      onCancel={onClose}\n      onSubmit={() => {\n        onSubmit(selected);\n      }}\n    >\n      <Flex container={{ direction: 'column', gap: 2, pad: [1, 0] }}>\n        <MultiSelectInput\n          ref={setInputEl}\n          placeholder={t('search_placeholder_default')}\n          value={filterValue}\n          selected={selected}\n          onChange={onFilter}\n          onRemove={onItemClick}\n        />\n        <StyledSelectionMenu\n          focusControlEl={inputEl ?? undefined}\n          mode='multi-select'\n          items={menuItems}\n          scrollAt={10}\n          loading={loading}\n          onItemClick={onItemClick}\n          onItemExpand={onItemExpand}\n        />\n      </Flex>\n    </Popover>\n  );\n};\n\nexport default SelectionMenu;\n"]}