@helpwave/hightide/dist/components/modals/Modal.mjs.map

helpwave's component and theming library

{"version":3,"sources":["../../../src/components/modals/Modal.tsx","../../../src/hooks/useLanguage.tsx","../../../src/hooks/useLocalStorage.tsx","../../../src/hooks/useTranslation.ts","../../../src/hooks/useHoverState.ts","../../../src/components/Tooltip.tsx","../../../src/components/modals/ModalRegister.tsx","../../../src/util/noop.ts"],"sourcesContent":["import { useContext, useEffect, type MouseEventHandler, type PropsWithChildren, type ReactNode } from 'react'\nimport ReactDOM from 'react-dom'\nimport { X } from 'lucide-react'\nimport clsx from 'clsx'\nimport type { Languages } from '../../hooks/useLanguage'\nimport type { PropsForTranslation } from '../../hooks/useTranslation'\nimport { useTranslation } from '../../hooks/useTranslation'\nimport { Tooltip } from '../Tooltip'\nimport { ModalContext } from './ModalRegister'\n\ntype ModalHeaderTranslation = {\n    close: string,\n}\n\nconst defaultModalHeaderTranslation: Record<Languages, ModalHeaderTranslation> = {\n    en: {\n        close: 'Close'\n    },\n    de: {\n        close: 'Schließen'\n    }\n}\n\nexport type ModalHeaderProps = {\n    onCloseClick?: () => void,\n    /** The title of the Modal. If you want to only set the text use `titleText` instead */\n    title?: ReactNode,\n    /** The title text of the Modal. If you want to set a custom title use `title` instead */\n    titleText?: string,\n    /** The description of the Modal. If you want to only set the text use `descriptionText` instead */\n    description?: ReactNode,\n    /** The description text of the Modal. If you want to set a custom description use `description` instead */\n    descriptionText?: string,\n}\n\n/**\n * A default Header to be used by modals to have a uniform design\n */\nexport const ModalHeader = ({\n                                overwriteTranslation,\n                                onCloseClick,\n                                title,\n                                titleText = '',\n                                description,\n                                descriptionText = ''\n                            }: PropsForTranslation<ModalHeaderTranslation, ModalHeaderProps>) => {\n    const translation = useTranslation(defaultModalHeaderTranslation, overwriteTranslation)\n    const hasTitleRow = !!title || !!titleText || !!onCloseClick\n    const titleRow = (\n        <div className=\"row justify-between items-start gap-x-8\">\n            {title ?? (\n                <span className={clsx('textstyle-title-lg', {\n                    'mb-1': description || descriptionText,\n                })}>\n                        {titleText}\n                    </span>\n            )}\n            {!!onCloseClick && (\n                <Tooltip tooltip={translation.close}>\n                    <button className=\"row bg-gray-200 hover:bg-gray-300 rounded-md p-1\" onClick={onCloseClick}>\n                        <X/>\n                    </button>\n                </Tooltip>\n            )}\n        </div>\n    )\n\n    return (\n        <div className=\"col\">\n            {hasTitleRow && (titleRow)}\n            {description ?? (descriptionText && (<span className=\"textstyle-description\">{descriptionText}</span>))}\n        </div>\n    )\n}\n\nexport const modalRootName = 'modal-root'\n\nexport type ModalProps = {\n    id: string,\n    isOpen: boolean,\n    onBackgroundClick?: MouseEventHandler<HTMLDivElement>,\n    backgroundClassName?: string,\n    modalClassName?: string,\n    containerClassName?: string,\n} & ModalHeaderProps\n\n/**\n * A Generic Modal Window\n *\n * The state needs to be managed by the parent of this component\n *\n * DO NOT Conditionally render this always use the isOpen to ensure that the ModalRegister is working properly\n */\nexport const Modal = ({\n                          children,\n                          id,\n                          isOpen,\n                          onBackgroundClick,\n                          backgroundClassName = '',\n                          modalClassName = '',\n                          containerClassName = '',\n                          ...modalHeaderProps\n                      }: PropsWithChildren<ModalProps>) => {\n    const modalRoot = typeof window !== 'undefined' ? document.getElementById(modalRootName) : null\n    const {\n        register,\n        addToRegister,\n        removeFromRegister\n    } = useContext(ModalContext)\n\n    if (!id) {\n        console.error('the id cannot be empty')\n    }\n\n    useEffect(() => {\n        if (isOpen) {\n            addToRegister(id)\n        } else {\n            removeFromRegister(id)\n        }\n    }, [addToRegister, id, removeFromRegister, isOpen])\n\n    if (modalRoot === null || !isOpen) return null\n\n    const isLast = register.length < 1 || register[register.length - 1] === id\n    const isSecondLast = register.length < 2 || register[register.length - 2] === id\n\n    return ReactDOM.createPortal(\n        <div className={clsx('fixed inset-0 overflow-y-auto z-[99]', containerClassName)} id={id}>\n            {isLast && (\n                <div\n                    className={clsx('fixed inset-0 h-screen w-screen', backgroundClassName, {\n                        'bg-black/70': isLast && register.length === 1,\n                    })}\n                    onClick={onBackgroundClick}\n                />\n            )}\n            <div\n                className={clsx('fixed left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 col p-4 bg-white text-black rounded-xl shadow-xl', modalClassName)}>\n                <ModalHeader {...modalHeaderProps} />\n                {children}\n            </div>\n            {!isLast && (\n                <div\n                    className={clsx('fixed inset-0 h-screen w-screen', backgroundClassName, {\n                        'bg-black/70': isSecondLast && register.length > 1,\n                    })}\n                />\n            )}\n        </div>,\n        modalRoot,\n        id\n    )\n}\n","import type { Dispatch, PropsWithChildren, SetStateAction } from 'react'\nimport { createContext, useContext, useEffect, useState } from 'react'\nimport { useLocalStorage } from './useLocalStorage'\n\nexport const languages = ['en', 'de'] as const\nexport type Languages = typeof languages[number]\nexport const languagesLocalNames: Record<Languages, string> = {\n  en: 'English',\n  de: 'Deutsch',\n}\n\nexport const DEFAULT_LANGUAGE = 'en'\n\nexport type LanguageContextValue = {\n  language: Languages,\n  setLanguage: Dispatch<SetStateAction<Languages>>,\n}\n\nexport const LanguageContext = createContext<LanguageContextValue>({ language: DEFAULT_LANGUAGE, setLanguage: (v) => v })\n\nexport const useLanguage = () => useContext(LanguageContext)\n\nexport const useLocale = (overWriteLanguage?: Languages) => {\n  const { language } = useLanguage()\n  const mapping: Record<Languages, string> = {\n    en: 'en-US',\n    de: 'de-DE'\n  }\n  return mapping[overWriteLanguage ?? language]\n}\n\ntype ProvideLanguageProps = {\n  initialLanguage?: Languages,\n}\n\nexport const ProvideLanguage = ({ initialLanguage, children }: PropsWithChildren<ProvideLanguageProps>) => {\n  const [language, setLanguage] = useState<Languages>(initialLanguage ?? DEFAULT_LANGUAGE)\n  const [storedLanguage, setStoredLanguage] = useLocalStorage<Languages>('language', initialLanguage ?? DEFAULT_LANGUAGE)\n\n  useEffect(() => {\n    if(language !== initialLanguage && initialLanguage){\n      console.warn('LanguageProvider initial state changed: Prefer using useLanguages\\'s setLanguage instead')\n      setLanguage(initialLanguage)\n    }\n  }, [initialLanguage]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  useEffect(() => {\n    // TODO set locale of html tag here as well\n    setStoredLanguage(language)\n  }, [language, setStoredLanguage])\n\n  useEffect(() => {\n    if (storedLanguage !== null) {\n      setLanguage(storedLanguage)\n      return\n    }\n\n    const languagesToTestAgainst = Object.values(languages)\n\n    const matchingBrowserLanguages = window.navigator.languages\n      .map(language => languagesToTestAgainst.find((test) => language === test || language.split('-')[0] === test))\n      .filter(entry => entry !== undefined)\n\n    if (matchingBrowserLanguages.length === 0) return\n\n    const firstMatch = matchingBrowserLanguages[0] as Languages\n    setLanguage(firstMatch)\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return (\n    <LanguageContext.Provider value={{\n      language,\n      setLanguage\n    }}>\n      {children}\n    </LanguageContext.Provider>\n  )\n}\n","import type { Dispatch, SetStateAction } from 'react'\nimport { useCallback, useEffect, useState } from 'react'\nimport { LocalStorageService } from '../util/storage'\n\ntype SetValue<T> = Dispatch<SetStateAction<T>>\nexport const useLocalStorage = <T, >(key: string, initValue: T): [T, SetValue<T>] => {\n  const get = useCallback((): T => {\n    if (typeof window === 'undefined') {\n      return initValue\n    }\n    const storageService = new LocalStorageService()\n    const value = storageService.get<T>(key)\n    return value || initValue\n  }, [initValue, key])\n\n  const [storedValue, setStoredValue] = useState<T>(get)\n\n  const setValue: SetValue<T> = useCallback(value => {\n    const newValue = value instanceof Function ? value(storedValue) : value\n    const storageService = new LocalStorageService()\n    storageService.set(key, value)\n\n    setStoredValue(newValue)\n  }, [storedValue, setStoredValue, key])\n\n  useEffect(() => {\n    setStoredValue(get())\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return [storedValue, setValue]\n}","import type { Languages } from './useLanguage'\nimport { useLanguage } from './useLanguage'\n\nexport type Translation<T> = Record<Languages, T>\n\ntype OverwriteTranslationType<Translation extends Record<string, unknown>> = {\n  language?: Languages,\n  translation?: Partial<Record<Languages, Partial<Translation>>>,\n}\n\n/**\n * Adds the `language` prop to the component props.\n *\n * @param Translation the type of the translation object\n *\n * @param Props the type of the component props, defaults to `Record<string, never>`,\n *              if you don't expect any other props other than `language` and get an\n *              error when using your component (because it uses `forwardRef` etc.)\n *              you can try out `Record<string, unknown>`, this might resolve your\n *              problem as `SomeType & never` is still `never` but `SomeType & unknown`\n *              is `SomeType` which means that adding back props (like `ref` etc.)\n *              works properly\n */\nexport type PropsForTranslation<\n  Translation extends Record<string, unknown>,\n  Props = Record<string, never>\n> = Props & {\n  overwriteTranslation?: OverwriteTranslationType<Translation>,\n};\n\nexport const useTranslation = <Translation extends Record<string, unknown>>(\n  defaults: Record<Languages, Translation>,\n  translationOverwrite: OverwriteTranslationType<Translation> = {}\n) : Translation => {\n  const { language: languageProp, translation: overwrite } = translationOverwrite\n  const { language: inferredLanguage } = useLanguage()\n  const usedLanguage = languageProp ?? inferredLanguage\n  let defaultValues: Translation = defaults[usedLanguage]\n  if (overwrite && overwrite[usedLanguage]) {\n    defaultValues = { ...defaultValues, ...overwrite[usedLanguage] }\n  }\n  return defaultValues\n}\n","import type { Dispatch, SetStateAction } from 'react'\nimport { useEffect, useState } from 'react'\n\ntype UseHoverStateProps = {\n  /**\n   * The delay after which the menu is closed in milliseconds\n   *\n   * default: 200ms\n   */\n  closingDelay: number,\n  /**\n   * Whether the hover state management should be disabled\n   *\n   * default: false\n   */\n  isDisabled: boolean,\n}\n\ntype UseHoverStateReturnType = {\n  /**\n   * Whether the element is hovered\n   */\n  isHovered: boolean,\n  /**\n   * Function to change the current hover status\n   */\n  setIsHovered: Dispatch<SetStateAction<boolean>>,\n  /**\n   * Handlers to pass on to the component that should be hovered\n   */\n  handlers: {\n    onMouseEnter: () => void,\n    onMouseLeave: () => void,\n  },\n}\n\nconst defaultUseHoverStateProps: UseHoverStateProps = {\n  closingDelay: 200,\n  isDisabled: false,\n}\n\n/**\n * @param props See UseHoverStateProps\n *\n * A react hook for managing the hover state of a component. The handlers provided should be\n * forwarded to the component which should be hovered over\n */\nexport const useHoverState = (props: Partial<UseHoverStateProps> | undefined = undefined): UseHoverStateReturnType => {\n  const { closingDelay, isDisabled } = { ...defaultUseHoverStateProps, ...props }\n\n  const [isHovered, setIsHovered] = useState(false)\n  const [timer, setTimer] = useState<NodeJS.Timeout>()\n\n  const onMouseEnter = () => {\n    if (isDisabled) {\n      return\n    }\n    clearTimeout(timer)\n    setIsHovered(true)\n  }\n\n  const onMouseLeave = () => {\n    if (isDisabled) {\n      return\n    }\n    setTimer(setTimeout(() => {\n      setIsHovered(false)\n    }, closingDelay))\n  }\n\n  useEffect(() => {\n    if (timer) {\n      return () => {\n        clearTimeout(timer)\n      }\n    }\n  })\n\n  useEffect(() => {\n    if (timer) {\n      clearTimeout(timer)\n    }\n  }, [isDisabled]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return {\n    isHovered, setIsHovered, handlers: { onMouseEnter, onMouseLeave }\n  }\n}\n","import type { CSSProperties, PropsWithChildren, ReactNode } from 'react'\nimport { useHoverState } from '../hooks/useHoverState'\nimport { clsx } from 'clsx'\n\ntype Position = 'top' | 'bottom' | 'left' | 'right'\n\nexport type TooltipProps = PropsWithChildren<{\n  tooltip: string | ReactNode,\n  /**\n   * Number of milliseconds until the tooltip appears\n   *\n   * defaults to 1000ms\n   */\n  animationDelay?: number,\n  /**\n   * Class names of additional styling properties for the tooltip\n   */\n  tooltipClassName?: string,\n  /**\n   * Class names of additional styling properties for the container from which the tooltip will be created\n   */\n  containerClassName?: string,\n  position?: Position,\n  zIndex?: number,\n}>\n\n/**\n * A Component for showing a tooltip when hovering over Content\n * @param tooltip The tooltip to show can be a text or any ReactNode\n * @param children The Content for which the tooltip should be created\n * @param animationDelay The delay before the tooltip appears\n * @param tooltipClassName Additional ClassNames for the Container of the tooltip\n * @param containerClassName Additional ClassNames for the Container holding the content\n * @param position The direction of the tooltip relative to the Container\n * @param zIndex The z Index of the tooltip (you may require this when stacking modals)\n * @constructor\n */\nexport const Tooltip = ({\n                          tooltip,\n                          children,\n                          animationDelay = 650,\n                          tooltipClassName = '',\n                          containerClassName = '',\n                          position = 'bottom',\n                          zIndex = 10,\n                        }: TooltipProps) => {\n  const { isHovered, handlers } = useHoverState()\n\n  const positionClasses = {\n    top: `bottom-full left-1/2 -translate-x-1/2 mb-[6px]`,\n    bottom: `top-full left-1/2 -translate-x-1/2 mt-[6px]`,\n    left: `right-full top-1/2 -translate-y-1/2 mr-[6px]`,\n    right: `left-full top-1/2 -translate-y-1/2 ml-[6px]`\n  }\n\n  const triangleSize = 6\n  const triangleClasses = {\n    top: `top-full left-1/2 -translate-x-1/2 border-t-gray-600 border-l-transparent border-r-transparent`,\n    bottom: `bottom-full left-1/2 -translate-x-1/2 border-b-gray-600 border-l-transparent border-r-transparent`,\n    left: `left-full top-1/2 -translate-y-1/2 border-l-gray-600 border-t-transparent border-b-transparent`,\n    right: `right-full top-1/2 -translate-y-1/2 border-r-gray-600 border-t-transparent border-b-transparent`\n  }\n\n  const triangleStyle: Record<Position, CSSProperties> = {\n    top: { borderWidth: `${triangleSize}px ${triangleSize}px 0 ${triangleSize}px` },\n    bottom: { borderWidth: `0 ${triangleSize}px ${triangleSize}px ${triangleSize}px` },\n    left: { borderWidth: `${triangleSize}px 0 ${triangleSize}px ${triangleSize}px` },\n    right: { borderWidth: `${triangleSize}px ${triangleSize}px ${triangleSize}px 0` }\n  }\n\n  return (\n    <div\n      className={clsx('relative inline-block', containerClassName)}\n      {...handlers}\n    >\n      {children}\n      {isHovered && (\n        <div\n          className={clsx(`opacity-0 absolute text-black text-xs font-semibold text-gray-600 px-2 py-1 rounded whitespace-nowrap border-2 border-gray-600\n           animate-tooltip-fade-in shadow-lg bg-gray-100`, positionClasses[position], tooltipClassName)}\n          style={{ zIndex, animationDelay: animationDelay + 'ms' }}\n        >\n          {tooltip}\n          <div\n            className={clsx(`absolute w-0 h-0`, triangleClasses[position])}\n            style={{ ...triangleStyle[position], zIndex }}\n           />\n        </div>\n      )}\n    </div>\n  )\n}\n","import type { PropsWithChildren } from 'react'\nimport { createContext, useState } from 'react'\nimport { noop } from '../../util/noop'\n\nexport type ModalContextType = {\n  register: string[],\n  addToRegister: (id: string) => void,\n  removeFromRegister: (id: string) => void,\n}\nexport const ModalContext = createContext<ModalContextType>({\n  register: [],\n  addToRegister: noop,\n  removeFromRegister: noop,\n})\n\n/**\n * A Simple Wrapper for the context\n */\nexport const ModalRegister = ({\n  children\n}: PropsWithChildren) => {\n  const [register, setRegister] = useState<string[]>([])\n\n  const inRegister = (id: string) => {\n    return !!register.find(value => value === id)\n  }\n\n  const addToRegister = (id: string) => {\n    if (!inRegister(id)) {\n      setRegister([...register, id])\n    }\n  }\n\n  const removeFromRegister = (id: string) => {\n    if (inRegister(id)) {\n      setRegister(register.filter(value => value !== id))\n    }\n  }\n\n  return (\n    <ModalContext.Provider value={{ register, addToRegister, removeFromRegister }}>\n      {children}\n    </ModalContext.Provider>\n  )\n}\n","export const noop = () => undefined\n"],"mappings":"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","names":["useContext","useEffect","clsx","useEffect","useState","useEffect","useState","jsx","createContext","useState","jsx","createContext","jsx","jsxs","clsx","useContext","useEffect"]}