@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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"}