@neovici/cosmoz-dropdown 7.3.0 → 7.4.0
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.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { component, css, useRef } from '@pionjs/pion';
|
|
1
|
+
import { component, css, useEffect, useProperty, useRef } from '@pionjs/pion';
|
|
2
2
|
import { html } from 'lit-html';
|
|
3
3
|
import { ref } from 'lit-html/directives/ref.js';
|
|
4
4
|
import { useAutoOpen } from './use-auto-open.js';
|
|
@@ -87,9 +87,24 @@ const style = css `
|
|
|
87
87
|
const CosmozDropdownNext = (host) => {
|
|
88
88
|
const { placement = 'bottom span-right', openOnHover, openOnFocus } = host;
|
|
89
89
|
const popoverRef = useRef();
|
|
90
|
-
const
|
|
91
|
-
const
|
|
92
|
-
const
|
|
90
|
+
const [opened, setOpened] = useProperty('opened', false);
|
|
91
|
+
const open = () => setOpened(true);
|
|
92
|
+
const close = () => setOpened(false);
|
|
93
|
+
const toggle = () => setOpened((v) => !v);
|
|
94
|
+
// Drive the native popover from the `opened` property
|
|
95
|
+
useEffect(() => {
|
|
96
|
+
const popover = popoverRef.current;
|
|
97
|
+
if (!popover)
|
|
98
|
+
return;
|
|
99
|
+
if (opened && !popover.matches(':popover-open'))
|
|
100
|
+
popover.showPopover();
|
|
101
|
+
if (!opened && popover.matches(':popover-open'))
|
|
102
|
+
popover.hidePopover();
|
|
103
|
+
}, [opened]);
|
|
104
|
+
// Attribute reflection — sync property → attribute for CSS selectors.
|
|
105
|
+
useEffect(() => {
|
|
106
|
+
host.toggleAttribute('opened', !!opened);
|
|
107
|
+
}, [opened]);
|
|
93
108
|
useAutoOpen({ host, popoverRef, openOnHover, openOnFocus, open, close });
|
|
94
109
|
// When open-on-focus is active, clicking the button should only open
|
|
95
110
|
// (not toggle), since focusin already handles opening and toggle would
|
|
@@ -97,6 +112,10 @@ const CosmozDropdownNext = (host) => {
|
|
|
97
112
|
const handleClick = openOnFocus ? open : toggle;
|
|
98
113
|
const onToggle = (e) => {
|
|
99
114
|
autofocus(e);
|
|
115
|
+
// Sync browser-initiated state changes (light-dismiss, Escape)
|
|
116
|
+
// back to the property. The useEffect guards against redundant
|
|
117
|
+
// showPopover/hidePopover calls.
|
|
118
|
+
setOpened(e.newState === 'open');
|
|
100
119
|
// Re-dispatch as a composed event so parent components across
|
|
101
120
|
// shadow boundaries can observe popover state changes.
|
|
102
121
|
// The native ToggleEvent is composed: false, bubbles: false.
|