@mantine/core/cjs/components/Popover/use-popover.cjs.map

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"use-popover.cjs","names":["useMantineEnv","autoUpdate"],"sources":["../../../src/components/Popover/use-popover.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport {\n  arrow,\n  autoUpdate,\n  flip,\n  hide,\n  inline,\n  limitShift,\n  Middleware,\n  offset,\n  shift,\n  size,\n  useFloating,\n  UseFloatingReturn,\n} from '@floating-ui/react';\nimport { useDidUpdate, useIsomorphicEffect, useUncontrolled } from '@mantine/hooks';\nimport { useMantineEnv } from '../../core';\nimport { FloatingAxesOffsets, FloatingPosition, FloatingStrategy } from '../../utils/Floating';\nimport { PopoverMiddlewares, PopoverWidth } from './Popover.types';\n\ninterface UsePopoverOptions {\n  offset: number | FloatingAxesOffsets;\n  position: FloatingPosition;\n  onPositionChange?: (position: FloatingPosition) => void;\n  opened: boolean | undefined;\n  defaultOpened: boolean | undefined;\n  onChange?: (opened: boolean) => void;\n  onClose?: () => void;\n  onDismiss?: () => void;\n  onOpen?: () => void;\n  width: PopoverWidth;\n  middlewares: PopoverMiddlewares | undefined;\n  arrowRef: React.RefObject<HTMLDivElement | null>;\n  arrowOffset: number;\n  strategy?: FloatingStrategy;\n  dropdownVisible: boolean;\n  setDropdownVisible: (visible: boolean) => void;\n  positionRef: React.RefObject<FloatingPosition>;\n  disabled: boolean | undefined;\n  preventPositionChangeWhenVisible: boolean | undefined;\n  keepMounted: boolean | undefined;\n}\n\nfunction getDefaultMiddlewares(middlewares: PopoverMiddlewares | undefined): PopoverMiddlewares {\n  if (middlewares === undefined) {\n    return { shift: true, flip: true };\n  }\n\n  const result = { ...middlewares };\n  if (middlewares.shift === undefined) {\n    result.shift = true;\n  }\n\n  if (middlewares.flip === undefined) {\n    result.flip = true;\n  }\n\n  return result;\n}\n\nfunction getPopoverMiddlewares(\n  options: UsePopoverOptions,\n  getFloating: () => UseFloatingReturn<Element>,\n  env: 'test' | 'default'\n) {\n  const middlewaresOptions = getDefaultMiddlewares(options.middlewares);\n  const middlewares: Middleware[] = [offset(options.offset), hide()];\n\n  if (options.dropdownVisible && env !== 'test' && options.preventPositionChangeWhenVisible) {\n    middlewaresOptions.flip = false;\n  }\n\n  if (middlewaresOptions.flip) {\n    middlewares.push(\n      typeof middlewaresOptions.flip === 'boolean' ? flip() : flip(middlewaresOptions.flip)\n    );\n  }\n\n  if (middlewaresOptions.shift) {\n    middlewares.push(\n      shift(\n        typeof middlewaresOptions.shift === 'boolean'\n          ? { limiter: limitShift(), padding: 5 }\n          : { limiter: limitShift(), padding: 5, ...middlewaresOptions.shift }\n      )\n    );\n  }\n\n  if (middlewaresOptions.inline) {\n    middlewares.push(\n      typeof middlewaresOptions.inline === 'boolean' ? inline() : inline(middlewaresOptions.inline)\n    );\n  }\n\n  middlewares.push(arrow({ element: options.arrowRef, padding: options.arrowOffset }));\n\n  if (middlewaresOptions.size || options.width === 'target') {\n    middlewares.push(\n      size({\n        ...(typeof middlewaresOptions.size === 'boolean' ? {} : middlewaresOptions.size),\n        apply({ rects, availableWidth, availableHeight, ...rest }) {\n          const floating = getFloating();\n          const styles = floating.refs.floating.current?.style ?? {};\n\n          if (middlewaresOptions.size) {\n            // If custom apply function is given use that else set defaults\n            if (typeof middlewaresOptions.size === 'object' && !!middlewaresOptions.size.apply) {\n              middlewaresOptions.size.apply({ rects, availableWidth, availableHeight, ...rest });\n            } else {\n              Object.assign(styles, {\n                maxWidth: `${availableWidth}px`,\n                maxHeight: `${availableHeight}px`,\n              });\n            }\n          }\n\n          if (options.width === 'target') {\n            Object.assign(styles, {\n              width: `${rects.reference.width}px`,\n            });\n          }\n        },\n      })\n    );\n  }\n\n  return middlewares;\n}\n\nexport function usePopover(options: UsePopoverOptions) {\n  const env = useMantineEnv();\n  const [_opened, setOpened] = useUncontrolled({\n    value: options.opened,\n    defaultValue: options.defaultOpened,\n    finalValue: false,\n    onChange: options.onChange,\n  });\n\n  const previouslyOpened = useRef(_opened);\n\n  const onClose = () => {\n    if (_opened && !options.disabled) {\n      setOpened(false);\n    }\n  };\n\n  const onToggle = () => {\n    if (!options.disabled) {\n      setOpened(!_opened);\n    }\n  };\n\n  const floating: UseFloatingReturn<Element> = useFloating({\n    strategy: options.strategy,\n    placement: options.preventPositionChangeWhenVisible\n      ? options.positionRef.current\n      : options.position,\n    middleware: getPopoverMiddlewares(options, () => floating, env),\n    whileElementsMounted: !options.keepMounted ? autoUpdate : undefined,\n  });\n\n  useEffect(() => {\n    if (!floating.refs.reference.current || !floating.refs.floating.current) {\n      return;\n    }\n\n    if (_opened) {\n      return autoUpdate(\n        floating.refs.reference.current,\n        floating.refs.floating.current,\n        floating.update\n      );\n    }\n  }, [_opened, floating.update]);\n\n  useDidUpdate(() => {\n    options.onPositionChange?.(floating.placement);\n    options.positionRef.current = floating.placement;\n  }, [floating.placement, options.preventPositionChangeWhenVisible]);\n\n  useDidUpdate(() => {\n    if (_opened !== previouslyOpened.current) {\n      if (!_opened) {\n        options.onClose?.();\n      } else {\n        options.onOpen?.();\n      }\n    }\n\n    previouslyOpened.current = _opened;\n  }, [_opened, options.onClose, options.onOpen]);\n\n  useIsomorphicEffect(() => {\n    let timeout: number = -1;\n\n    if (_opened) {\n      // Required to be in timeout to give floating ui render time to flip/shift popover\n      timeout = window.setTimeout(() => options.setDropdownVisible(true), 4);\n    }\n\n    return () => {\n      window.clearTimeout(timeout);\n    };\n  }, [_opened, options.position]);\n\n  return {\n    floating,\n    controlled: typeof options.opened === 'boolean',\n    opened: _opened,\n    onClose,\n    onToggle,\n  };\n}\n"],"mappings":"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"}