@neovici/cosmoz-dropdown 7.3.0 → 7.4.1
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, useCallback, 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,25 +87,51 @@ 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
|
-
|
|
92
|
-
|
|
90
|
+
const [opened, setOpened] = useProperty('opened', false);
|
|
91
|
+
// Call showPopover/hidePopover synchronously so the browser associates
|
|
92
|
+
// the popover with the current user-gesture. Deferring to a microtask
|
|
93
|
+
// (useEffect) causes light-dismiss to immediately close the popover.
|
|
94
|
+
const open = useCallback(() => {
|
|
95
|
+
setOpened(true);
|
|
96
|
+
popoverRef.current?.showPopover();
|
|
97
|
+
}, []);
|
|
98
|
+
const close = useCallback(() => {
|
|
99
|
+
setOpened(false);
|
|
100
|
+
popoverRef.current?.hidePopover();
|
|
101
|
+
}, []);
|
|
102
|
+
const toggle = useCallback(() => {
|
|
103
|
+
const popover = popoverRef.current;
|
|
104
|
+
if (popover?.matches(':popover-open'))
|
|
105
|
+
close();
|
|
106
|
+
else
|
|
107
|
+
open();
|
|
108
|
+
}, []);
|
|
109
|
+
// Sync native popover when `opened` is set externally via property binding
|
|
110
|
+
useEffect(() => {
|
|
111
|
+
const popover = popoverRef.current;
|
|
112
|
+
if (!popover)
|
|
113
|
+
return;
|
|
114
|
+
if (opened)
|
|
115
|
+
popover.showPopover();
|
|
116
|
+
else
|
|
117
|
+
popover.hidePopover();
|
|
118
|
+
}, [opened]);
|
|
119
|
+
useEffect(() => {
|
|
120
|
+
host.toggleAttribute('opened', !!opened);
|
|
121
|
+
}, [opened]);
|
|
93
122
|
useAutoOpen({ host, popoverRef, openOnHover, openOnFocus, open, close });
|
|
94
|
-
//
|
|
95
|
-
//
|
|
96
|
-
// race with the focusin handler (focusin opens, then click toggles closed).
|
|
123
|
+
// With open-on-focus, only open (not toggle) on click to avoid racing
|
|
124
|
+
// with the focusin handler
|
|
97
125
|
const handleClick = openOnFocus ? open : toggle;
|
|
98
|
-
const onToggle = (e) => {
|
|
126
|
+
const onToggle = useCallback((e) => {
|
|
99
127
|
autofocus(e);
|
|
100
|
-
|
|
101
|
-
// shadow boundaries can observe popover state changes.
|
|
102
|
-
// The native ToggleEvent is composed: false, bubbles: false.
|
|
128
|
+
setOpened(e.newState === 'open');
|
|
103
129
|
host.dispatchEvent(new ToggleEvent('dropdown-toggle', {
|
|
104
130
|
newState: e.newState,
|
|
105
131
|
oldState: e.oldState,
|
|
106
132
|
composed: true,
|
|
107
133
|
}));
|
|
108
|
-
};
|
|
134
|
+
}, []);
|
|
109
135
|
return html `
|
|
110
136
|
<slot name="button" @click=${handleClick}></slot>
|
|
111
137
|
<div
|