DisableInteraction.tsx38 lines · main

1	import React, { forwardRef } from 'react'
2	import { cn } from 'ui'
3
4	interface DisableInteractionProps extends React.HTMLAttributes<HTMLDivElement> {
5	disabled?: boolean
6	}
7
8	/**
9	* DisableInteraction component
10	*
11	* A utility component that wraps content and prevents all user interactions when disabled
12	* including clicking, hovering, and text selection.
13	*
14	* @example
15	* <DisableInteraction disabled={isDisabled}>
16	* <YourContent />
17	* </DisableInteraction>
18	*/
19	export const DisableInteraction = forwardRef<HTMLDivElement, DisableInteractionProps>(
20	({ disabled, style, className, ...props }, ref) => (
21	<div
22	ref={ref}
23	{...props}
24	className={cn(disabled && 'opacity-50 pointer-events-none', className)}
25	style={{
26	...(disabled && {
27	userSelect: 'none',
28	WebkitUserSelect: 'none',
29	MozUserSelect: 'none',
30	msUserSelect: 'none',
31	}),
32	...style,
33	}}
34	/>
35	)
36	)
37
38	DisableInteraction.displayName = 'DisableInteraction'