@agility/plenum-ui 2.1.4 → 2.1.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -1
- package/dist/index.js.map +3 -3
- package/dist/types/stories/organisms/DropdownComponent/DropdownComponent.d.ts +1 -0
- package/package.json +1 -1
- package/stories/organisms/DropdownComponent/Dropdown.stories.tsx +8 -0
- package/stories/organisms/DropdownComponent/DropdownComponent.tsx +10 -3
package/package.json
CHANGED
|
@@ -76,6 +76,13 @@ export const WithIcons: Story = {
|
|
|
76
76
|
}
|
|
77
77
|
}
|
|
78
78
|
|
|
79
|
+
export const ShowOnHover: Story = {
|
|
80
|
+
args: {
|
|
81
|
+
...defaultArgs,
|
|
82
|
+
showOnHover: true
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
|
|
79
86
|
export const WithFloatingArrow: Story = {
|
|
80
87
|
args: {
|
|
81
88
|
...defaultArgs,
|
|
@@ -83,4 +90,5 @@ export const WithFloatingArrow: Story = {
|
|
|
83
90
|
}
|
|
84
91
|
}
|
|
85
92
|
|
|
93
|
+
|
|
86
94
|
export default meta
|
|
@@ -21,8 +21,7 @@ import {
|
|
|
21
21
|
} from "@floating-ui/react"
|
|
22
22
|
|
|
23
23
|
import { ClassNameWithAutocomplete } from "utils/types"
|
|
24
|
-
import { DynamicIcon, IDynamicIconProps
|
|
25
|
-
import { list } from "postcss"
|
|
24
|
+
import { DynamicIcon, IDynamicIconProps } from "@/stories/atoms/icons"
|
|
26
25
|
|
|
27
26
|
export interface IItemProp {
|
|
28
27
|
//Don't think this needs to extend HtmlButton... extends HTMLAttributes<HTMLButtonElement> {
|
|
@@ -56,6 +55,7 @@ export interface IDropdownProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
56
55
|
disabled?: boolean
|
|
57
56
|
onFocus?: () => void
|
|
58
57
|
onBlur?: () => void
|
|
58
|
+
showOnHover?: boolean
|
|
59
59
|
showFloatingArrow?: boolean
|
|
60
60
|
}
|
|
61
61
|
export const defaultClassNames = {
|
|
@@ -89,6 +89,7 @@ const Dropdown: React.FC<IDropdownProps> = ({
|
|
|
89
89
|
onFocus,
|
|
90
90
|
onBlur,
|
|
91
91
|
showFloatingArrow = false,
|
|
92
|
+
showOnHover = false,
|
|
92
93
|
...props
|
|
93
94
|
}: IDropdownProps): JSX.Element | null => {
|
|
94
95
|
const [isOpen, setIsOpen] = useState(false)
|
|
@@ -318,6 +319,9 @@ const Dropdown: React.FC<IDropdownProps> = ({
|
|
|
318
319
|
onClick: () => {
|
|
319
320
|
setIsOpen(!isOpen)
|
|
320
321
|
},
|
|
322
|
+
onMouseOver: () => {
|
|
323
|
+
showOnHover && setIsOpen(true)
|
|
324
|
+
},
|
|
321
325
|
type: "button",
|
|
322
326
|
disabled: disabled,
|
|
323
327
|
...getReferenceProps()
|
|
@@ -349,6 +353,9 @@ const Dropdown: React.FC<IDropdownProps> = ({
|
|
|
349
353
|
className={cn(defaultClassNames.itemsClassname, itemsClassname)}
|
|
350
354
|
ref={refs.setFloating}
|
|
351
355
|
aria-labelledby={label}
|
|
356
|
+
onMouseLeave={() => {
|
|
357
|
+
showOnHover && setIsOpen(false)
|
|
358
|
+
}}
|
|
352
359
|
style={{
|
|
353
360
|
position: context.strategy,
|
|
354
361
|
top: Math.round(context.y ?? 0),
|
|
@@ -362,7 +369,7 @@ const Dropdown: React.FC<IDropdownProps> = ({
|
|
|
362
369
|
{ItemComponents}
|
|
363
370
|
{showFloatingArrow &&
|
|
364
371
|
<FloatingArrow ref={arrowRef} context={context} strokeWidth={1}
|
|
365
|
-
className={cn(
|
|
372
|
+
className={cn("fill-white [&>path:first-of-type]:stroke-gray-300 [&>path:last-of-type]:stroke-white")}/>}
|
|
366
373
|
</div>
|
|
367
374
|
</FloatingFocusManager>
|
|
368
375
|
</FloatingPortal>
|