@mantine/core/cjs/core/DirectionProvider/DirectionProvider.cjs.map

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"DirectionProvider.cjs","names":[],"sources":["../../../src/core/DirectionProvider/DirectionProvider.tsx"],"sourcesContent":["import { createContext, use, useCallback, useState } from 'react';\nimport { useIsomorphicEffect, useMutationObserverTarget } from '@mantine/hooks';\n\nexport type Direction = 'ltr' | 'rtl';\n\nexport interface DirectionContextValue {\n  dir: Direction;\n  toggleDirection: () => void;\n  setDirection: (dir: Direction) => void;\n}\n\nexport const DirectionContext = createContext<DirectionContextValue>({\n  dir: 'ltr',\n  toggleDirection: () => {},\n  setDirection: () => {},\n});\n\nexport function useDirection() {\n  return use(DirectionContext);\n}\n\nexport interface DirectionProviderProps {\n  /** Your application */\n  children: React.ReactNode;\n\n  /** Direction set as a default value, `ltr` by default */\n  initialDirection?: Direction;\n\n  /** Determines whether direction should be updated on mount based on `dir` attribute set on root element (usually html element) @default true  */\n  detectDirection?: boolean;\n}\n\nexport function DirectionProvider({\n  children,\n  initialDirection = 'ltr',\n  detectDirection = true,\n}: DirectionProviderProps) {\n  const [dir, setDir] = useState<Direction>(initialDirection);\n\n  const setDirection = useCallback((direction: Direction) => {\n    setDir(direction);\n    if (document.documentElement.getAttribute('dir') !== direction) {\n      document.documentElement.setAttribute('dir', direction);\n    }\n  }, []);\n\n  const toggleDirection = () => setDirection(dir === 'ltr' ? 'rtl' : 'ltr');\n\n  useIsomorphicEffect(() => {\n    if (detectDirection) {\n      const direction = document.documentElement.getAttribute('dir');\n      if (direction === 'rtl' || direction === 'ltr') {\n        setDir(direction);\n      }\n    }\n  }, []);\n\n  const mutationCallback = useCallback<MutationCallback>(() => {\n    if (typeof document === 'undefined') {\n      return;\n    }\n    const direction = document.documentElement.getAttribute('dir');\n    if (direction === 'rtl' || direction === 'ltr') {\n      setDir((prev) => (prev !== direction ? (direction as Direction) : prev));\n    }\n  }, []);\n\n  useMutationObserverTarget(\n    mutationCallback,\n    detectDirection ? { attributes: true, attributeFilter: ['dir'] } : {},\n    typeof document !== 'undefined' && detectDirection ? document.documentElement : null\n  );\n\n  return (\n    <DirectionContext value={{ dir, toggleDirection, setDirection }}>{children}</DirectionContext>\n  );\n}\n"],"mappings":";;;;;;AAWA,MAAa,oBAAA,GAAA,MAAA,eAAwD;CACnE,KAAK;CACL,uBAAuB,CAAC;CACxB,oBAAoB,CAAC;AACvB,CAAC;AAED,SAAgB,eAAe;CAC7B,QAAA,GAAA,MAAA,KAAW,gBAAgB;AAC7B;AAaA,SAAgB,kBAAkB,EAChC,UACA,mBAAmB,OACnB,kBAAkB,QACO;CACzB,MAAM,CAAC,KAAK,WAAA,GAAA,MAAA,UAA8B,gBAAgB;CAE1D,MAAM,gBAAA,GAAA,MAAA,cAA4B,cAAyB;EACzD,OAAO,SAAS;EAChB,IAAI,SAAS,gBAAgB,aAAa,KAAK,MAAM,WACnD,SAAS,gBAAgB,aAAa,OAAO,SAAS;CAE1D,GAAG,CAAC,CAAC;CAEL,MAAM,wBAAwB,aAAa,QAAQ,QAAQ,QAAQ,KAAK;CAExE,CAAA,GAAA,eAAA,2BAA0B;EACxB,IAAI,iBAAiB;GACnB,MAAM,YAAY,SAAS,gBAAgB,aAAa,KAAK;GAC7D,IAAI,cAAc,SAAS,cAAc,OACvC,OAAO,SAAS;EAEpB;CACF,GAAG,CAAC,CAAC;CAYL,CAAA,GAAA,eAAA,4BAAA,GAAA,MAAA,mBAV6D;EAC3D,IAAI,OAAO,aAAa,aACtB;EAEF,MAAM,YAAY,SAAS,gBAAgB,aAAa,KAAK;EAC7D,IAAI,cAAc,SAAS,cAAc,OACvC,QAAQ,SAAU,SAAS,YAAa,YAA0B,IAAK;CAE3E,GAAG,CAAC,CAGa,GACf,kBAAkB;EAAE,YAAY;EAAM,iBAAiB,CAAC,KAAK;CAAE,IAAI,CAAC,GACpE,OAAO,aAAa,eAAe,kBAAkB,SAAS,kBAAkB,IAClF;CAEA,OACE,iBAAA,GAAA,kBAAA,KAAC,kBAAD;EAAkB,OAAO;GAAE;GAAK;GAAiB;EAAa;EAAI;CAA2B,CAAA;AAEjG"}