flowbite-react
Version:
Official React components built for Flowbite and Tailwind CSS
1 lines • 5.28 kB
Source Map (JSON)
{"version":3,"file":"Drawer.cjs","sources":["../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentProps } from \"react\";\nimport { forwardRef, useEffect, useId } from \"react\";\nimport { get } from \"../../helpers/get\";\nimport { resolveProps } from \"../../helpers/resolve-props\";\nimport { useResolveTheme } from \"../../helpers/resolve-theme\";\nimport { twMerge } from \"../../helpers/tailwind-merge\";\nimport { useThemeProvider } from \"../../theme/provider\";\nimport type { FlowbiteBoolean, ThemingProps } from \"../../types\";\nimport { DrawerContext } from \"./DrawerContext\";\nimport type { DrawerHeaderTheme } from \"./DrawerHeader\";\nimport type { DrawerItemsTheme } from \"./DrawerItems\";\nimport { drawerTheme } from \"./theme\";\n\nexport interface DrawerTheme {\n root: DrawerRootTheme;\n header: DrawerHeaderTheme;\n items: DrawerItemsTheme;\n}\n\nexport interface DrawerRootTheme {\n base: string;\n backdrop: string;\n edge: string;\n position: {\n top: FlowbiteBoolean;\n right: FlowbiteBoolean;\n bottom: FlowbiteBoolean;\n left: FlowbiteBoolean;\n };\n}\n\nexport interface DrawerProps extends ComponentProps<\"div\">, ThemingProps<DrawerTheme> {\n backdrop?: boolean;\n edge?: boolean;\n onClose: () => void;\n open?: boolean;\n position?: \"top\" | \"right\" | \"bottom\" | \"left\";\n}\n\nexport const Drawer = forwardRef<HTMLDivElement, DrawerProps>((props, ref) => {\n const id = useId();\n\n const provider = useThemeProvider();\n const theme = useResolveTheme(\n [drawerTheme, provider.theme?.drawer, props.theme],\n [get(provider.clearTheme, \"drawer\"), props.clearTheme],\n [get(provider.applyTheme, \"drawer\"), props.applyTheme],\n );\n\n const {\n backdrop = true,\n children,\n className,\n edge = false,\n position = \"left\",\n onClose,\n open: isOpen = false,\n ...restProps\n } = resolveProps(props, provider.props?.drawer);\n\n useEffect(() => {\n const handleEscapeKey = (event: KeyboardEvent) => {\n if (event.key === \"Escape\" && isOpen && onClose) {\n onClose();\n }\n };\n\n document.addEventListener(\"keydown\", handleEscapeKey);\n\n return () => document.removeEventListener(\"keydown\", handleEscapeKey);\n }, [onClose, isOpen]);\n\n return (\n <DrawerContext.Provider\n value={{ theme: props.theme, clearTheme: props.clearTheme, applyTheme: props.applyTheme, onClose, isOpen, id }}\n >\n <div\n ref={ref}\n aria-modal\n aria-describedby={`drawer-dialog-${id}`}\n role=\"dialog\"\n tabIndex={-1}\n data-testid=\"flowbite-drawer\"\n className={twMerge(\n theme.root.base,\n theme.root.position[position][isOpen ? \"on\" : \"off\"],\n edge && !isOpen && theme.root.edge,\n className,\n )}\n {...restProps}\n >\n {children}\n </div>\n {isOpen && backdrop && <div onClick={() => onClose()} className={theme.root.backdrop} />}\n </DrawerContext.Provider>\n );\n});\n\nDrawer.displayName = \"Drawer\";\n"],"names":["forwardRef","useId","provider","useThemeProvider","theme","useResolveTheme","drawerTheme","get","resolveProps","useEffect","jsxs","DrawerContext","jsx","twMerge"],"mappings":";;;;;;;;;;;;AAWY,MAAC,MAAM,GAAGA,gBAAU,CAAC,CAAC,KAAK,EAAE,GAAG,KAAK;AACjD,EAAE,MAAM,EAAE,GAAGC,WAAK,EAAE;AACpB,EAAE,MAAMC,UAAQ,GAAGC,yBAAgB,EAAE;AACrC,EAAE,MAAMC,OAAK,GAAGC,4BAAe;AAC/B,IAAI,CAACC,iBAAW,EAAEJ,UAAQ,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC;AACtD,IAAI,CAACK,OAAG,CAACL,UAAQ,CAAC,UAAU,EAAE,QAAQ,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC;AAC1D,IAAI,CAACK,OAAG,CAACL,UAAQ,CAAC,UAAU,EAAE,QAAQ,CAAC,EAAE,KAAK,CAAC,UAAU;AACzD,GAAG;AACH,EAAE,MAAM;AACR,IAAI,QAAQ,GAAG,IAAI;AACnB,IAAI,QAAQ;AACZ,IAAI,SAAS;AACb,IAAI,IAAI,GAAG,KAAK;AAChB,IAAI,QAAQ,GAAG,MAAM;AACrB,IAAI,OAAO;AACX,IAAI,IAAI,EAAE,MAAM,GAAG,KAAK;AACxB,IAAI,GAAG;AACP,GAAG,GAAGM,yBAAY,CAAC,KAAK,EAAEN,UAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;AACjD,EAAEO,eAAS,CAAC,MAAM;AAClB,IAAI,MAAM,eAAe,GAAG,CAAC,KAAK,KAAK;AACvC,MAAM,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,MAAM,IAAI,OAAO,EAAE;AACvD,QAAQ,OAAO,EAAE;AACjB;AACA,KAAK;AACL,IAAI,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,eAAe,CAAC;AACzD,IAAI,OAAO,MAAM,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,eAAe,CAAC;AACzE,GAAG,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;AACvB,EAAE,uBAAuBC,eAAI;AAC7B,IAAIC,2BAAa,CAAC,QAAQ;AAC1B,IAAI;AACJ,MAAM,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,CAAC,UAAU,EAAE,UAAU,EAAE,KAAK,CAAC,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE;AACpH,MAAM,QAAQ,EAAE;AAChB,wBAAwBC,cAAG;AAC3B,UAAU,KAAK;AACf,UAAU;AACV,YAAY,GAAG;AACf,YAAY,YAAY,EAAE,IAAI;AAC9B,YAAY,kBAAkB,EAAE,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC;AACrD,YAAY,IAAI,EAAE,QAAQ;AAC1B,YAAY,QAAQ,EAAE,EAAE;AACxB,YAAY,aAAa,EAAE,iBAAiB;AAC5C,YAAY,SAAS,EAAEC,qBAAO;AAC9B,cAAcT,OAAK,CAAC,IAAI,CAAC,IAAI;AAC7B,cAAcA,OAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,MAAM,GAAG,IAAI,GAAG,KAAK,CAAC;AAClE,cAAc,IAAI,IAAI,CAAC,MAAM,IAAIA,OAAK,CAAC,IAAI,CAAC,IAAI;AAChD,cAAc;AACd,aAAa;AACb,YAAY,GAAG,SAAS;AACxB,YAAY;AACZ;AACA,SAAS;AACT,QAAQ,MAAM,IAAI,QAAQ,oBAAoBQ,cAAG,CAAC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,EAAE,EAAE,SAAS,EAAER,OAAK,CAAC,IAAI,CAAC,QAAQ,EAAE;AACrH;AACA;AACA,GAAG;AACH,CAAC;AACD,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;"}