@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;CACvB,oBAAoB;CACrB,CAAC;AAEF,SAAgB,eAAe;AAC7B,SAAA,GAAA,MAAA,KAAW,iBAAiB;;AAc9B,SAAgB,kBAAkB,EAChC,UACA,mBAAmB,OACnB,kBAAkB,QACO;CACzB,MAAM,CAAC,KAAK,WAAA,GAAA,MAAA,UAA8B,iBAAiB;CAE3D,MAAM,gBAAA,GAAA,MAAA,cAA4B,cAAyB;AACzD,SAAO,UAAU;AACjB,MAAI,SAAS,gBAAgB,aAAa,MAAM,KAAK,UACnD,UAAS,gBAAgB,aAAa,OAAO,UAAU;IAExD,EAAE,CAAC;CAEN,MAAM,wBAAwB,aAAa,QAAQ,QAAQ,QAAQ,MAAM;AAEzE,EAAA,GAAA,eAAA,2BAA0B;AACxB,MAAI,iBAAiB;GACnB,MAAM,YAAY,SAAS,gBAAgB,aAAa,MAAM;AAC9D,OAAI,cAAc,SAAS,cAAc,MACvC,QAAO,UAAU;;IAGpB,EAAE,CAAC;AAYN,EAAA,GAAA,eAAA,4BAAA,GAAA,MAAA,mBAV6D;AAC3D,MAAI,OAAO,aAAa,YACtB;EAEF,MAAM,YAAY,SAAS,gBAAgB,aAAa,MAAM;AAC9D,MAAI,cAAc,SAAS,cAAc,MACvC,SAAQ,SAAU,SAAS,YAAa,YAA0B,KAAM;IAEzE,EAAE,CAAC,EAIJ,kBAAkB;EAAE,YAAY;EAAM,iBAAiB,CAAC,MAAM;EAAE,GAAG,EAAE,EACrE,OAAO,aAAa,eAAe,kBAAkB,SAAS,kBAAkB,KACjF;AAED,QACE,iBAAA,GAAA,kBAAA,KAAC,kBAAD;EAAkB,OAAO;GAAE;GAAK;GAAiB;GAAc;EAAG;EAA4B,CAAA"}