@acusti/dropdown 0.38.2 → 0.38.4
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/Dropdown.d.ts +23 -1
- package/dist/Dropdown.js +461 -328
- package/dist/Dropdown.test.js +80 -47
- package/dist/helpers.d.ts +47 -32
- package/dist/helpers.js +35 -36
- package/dist/styles.d.ts +14 -13
- package/dist/styles.js +1 -1
- package/package.json +2 -2
package/dist/Dropdown.test.js
CHANGED
|
@@ -8,18 +8,26 @@ afterEach(cleanup);
|
|
|
8
8
|
describe('Dropdown.js', () => {
|
|
9
9
|
it('renders its contents as a dropdown menu with an empty button to trigger it when it’s rendered with a single child', async () => {
|
|
10
10
|
const user = userEvent.setup();
|
|
11
|
-
render(
|
|
12
|
-
React.createElement(
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
React.createElement(
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
11
|
+
render(
|
|
12
|
+
React.createElement(
|
|
13
|
+
Dropdown,
|
|
14
|
+
null,
|
|
15
|
+
React.createElement(
|
|
16
|
+
'ul',
|
|
17
|
+
{ 'data-testid': 'dropdown-list' },
|
|
18
|
+
React.createElement('li', null, '0px'),
|
|
19
|
+
React.createElement('li', null, '4px'),
|
|
20
|
+
React.createElement('li', null, '9px'),
|
|
21
|
+
React.createElement('li', null, '18px'),
|
|
22
|
+
React.createElement('li', null, '36px'),
|
|
23
|
+
React.createElement('li', null, '54px'),
|
|
24
|
+
React.createElement('li', null, '72px'),
|
|
25
|
+
React.createElement('li', null, '144px'),
|
|
26
|
+
React.createElement('li', null, '167px'),
|
|
27
|
+
React.createElement('li', null, '198px'),
|
|
28
|
+
),
|
|
29
|
+
),
|
|
30
|
+
);
|
|
23
31
|
const trigger = screen.getByRole('button');
|
|
24
32
|
expect(trigger.innerHTML).toBe('');
|
|
25
33
|
await user.click(trigger);
|
|
@@ -27,22 +35,30 @@ describe('Dropdown.js', () => {
|
|
|
27
35
|
});
|
|
28
36
|
it('renders the first child as a trigger and the second child as a dropdown when given two children', async () => {
|
|
29
37
|
const user = userEvent.setup();
|
|
30
|
-
render(
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
React.createElement(
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
38
|
+
render(
|
|
39
|
+
React.createElement(
|
|
40
|
+
Dropdown,
|
|
41
|
+
null,
|
|
42
|
+
'File',
|
|
43
|
+
React.createElement(
|
|
44
|
+
'ul',
|
|
45
|
+
{ 'data-testid': 'file-menu' },
|
|
46
|
+
React.createElement('li', null, 'New Window'),
|
|
47
|
+
React.createElement('li', null, 'New Private Window'),
|
|
48
|
+
React.createElement('li', null, 'New Tab'),
|
|
49
|
+
React.createElement('li', null, 'New Empty Tab Group'),
|
|
50
|
+
React.createElement('li', null, 'Open File\u2026'),
|
|
51
|
+
React.createElement('li', null, 'Open Location\u2026'),
|
|
52
|
+
React.createElement('li', { className: 'separator' }),
|
|
53
|
+
React.createElement('li', null, 'Close Window'),
|
|
54
|
+
React.createElement('li', null, 'Close All Window'),
|
|
55
|
+
React.createElement('li', null, 'Close Tab'),
|
|
56
|
+
React.createElement('li', null, 'Save As\u2026'),
|
|
57
|
+
React.createElement('li', { className: 'separator' }),
|
|
58
|
+
React.createElement('li', null, 'Print\u2026'),
|
|
59
|
+
),
|
|
60
|
+
),
|
|
61
|
+
);
|
|
46
62
|
const trigger = screen.getByRole('button');
|
|
47
63
|
expect(trigger.innerHTML).toBe('File');
|
|
48
64
|
await user.click(trigger);
|
|
@@ -54,22 +70,30 @@ describe('Dropdown.js', () => {
|
|
|
54
70
|
let openedCount = 0;
|
|
55
71
|
const handleOpen = () => openedCount++;
|
|
56
72
|
const user = userEvent.setup();
|
|
57
|
-
render(
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
React.createElement(
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
+
render(
|
|
74
|
+
React.createElement(
|
|
75
|
+
Dropdown,
|
|
76
|
+
{ onClose: handleClose, onOpen: handleOpen },
|
|
77
|
+
'File',
|
|
78
|
+
React.createElement(
|
|
79
|
+
'ul',
|
|
80
|
+
{ 'data-testid': 'file-menu' },
|
|
81
|
+
React.createElement('li', null, 'New Window'),
|
|
82
|
+
React.createElement('li', null, 'New Private Window'),
|
|
83
|
+
React.createElement('li', null, 'New Tab'),
|
|
84
|
+
React.createElement('li', null, 'New Empty Tab Group'),
|
|
85
|
+
React.createElement('li', null, 'Open File\u2026'),
|
|
86
|
+
React.createElement('li', null, 'Open Location\u2026'),
|
|
87
|
+
React.createElement('li', { className: 'separator' }),
|
|
88
|
+
React.createElement('li', null, 'Close Window'),
|
|
89
|
+
React.createElement('li', null, 'Close All Window'),
|
|
90
|
+
React.createElement('li', null, 'Close Tab'),
|
|
91
|
+
React.createElement('li', null, 'Save As\u2026'),
|
|
92
|
+
React.createElement('li', { className: 'separator' }),
|
|
93
|
+
React.createElement('li', null, 'Print\u2026'),
|
|
94
|
+
),
|
|
95
|
+
),
|
|
96
|
+
);
|
|
73
97
|
const trigger = screen.getByRole('button');
|
|
74
98
|
expect(closedCount).toBe(0);
|
|
75
99
|
expect(openedCount).toBe(0);
|
|
@@ -88,8 +112,17 @@ describe('Dropdown.js', () => {
|
|
|
88
112
|
let openedCount = 0;
|
|
89
113
|
const handleOpen = () => openedCount++;
|
|
90
114
|
const user = userEvent.setup();
|
|
91
|
-
render(
|
|
92
|
-
React.createElement(
|
|
115
|
+
render(
|
|
116
|
+
React.createElement(
|
|
117
|
+
Dropdown,
|
|
118
|
+
{ isOpenOnMount: true, onClose: handleClose, onOpen: handleOpen },
|
|
119
|
+
React.createElement(
|
|
120
|
+
'p',
|
|
121
|
+
{ 'data-testid': 'dropdown-body' },
|
|
122
|
+
'this is the dropdown contents',
|
|
123
|
+
),
|
|
124
|
+
),
|
|
125
|
+
);
|
|
93
126
|
const trigger = screen.getByRole('button');
|
|
94
127
|
expect(screen.getByTestId('dropdown-body')).toBeTruthy();
|
|
95
128
|
expect(openedCount).toBe(1);
|
|
@@ -99,4 +132,4 @@ describe('Dropdown.js', () => {
|
|
|
99
132
|
expect(screen.queryByTestId('dropdown-body')).toBe(null);
|
|
100
133
|
});
|
|
101
134
|
});
|
|
102
|
-
//# sourceMappingURL=Dropdown.test.js.map
|
|
135
|
+
//# sourceMappingURL=Dropdown.test.js.map
|
package/dist/helpers.d.ts
CHANGED
|
@@ -1,32 +1,47 @@
|
|
|
1
|
-
export declare const ITEM_SELECTOR =
|
|
2
|
-
export declare const getItemElements: (
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
1
|
+
export declare const ITEM_SELECTOR = '[data-ukt-item], [data-ukt-value]';
|
|
2
|
+
export declare const getItemElements: (
|
|
3
|
+
dropdownElement: HTMLElement | null,
|
|
4
|
+
) => NodeListOf<Element> | HTMLCollection | null;
|
|
5
|
+
export declare const getActiveItemElement: (
|
|
6
|
+
dropdownElement: HTMLElement | null,
|
|
7
|
+
) => HTMLElement | null;
|
|
8
|
+
export declare const setActiveItem: ({
|
|
9
|
+
dropdownElement,
|
|
10
|
+
element,
|
|
11
|
+
index,
|
|
12
|
+
indexAddend,
|
|
13
|
+
isExactMatch,
|
|
14
|
+
text,
|
|
15
|
+
}:
|
|
16
|
+
| {
|
|
17
|
+
dropdownElement: HTMLElement;
|
|
18
|
+
element: HTMLElement;
|
|
19
|
+
index?: null | undefined;
|
|
20
|
+
indexAddend?: null | undefined;
|
|
21
|
+
isExactMatch?: null | undefined;
|
|
22
|
+
text?: null | undefined;
|
|
23
|
+
}
|
|
24
|
+
| {
|
|
25
|
+
dropdownElement: HTMLElement;
|
|
26
|
+
element?: null | undefined;
|
|
27
|
+
index: number;
|
|
28
|
+
indexAddend?: null | undefined;
|
|
29
|
+
isExactMatch?: null | undefined;
|
|
30
|
+
text?: null | undefined;
|
|
31
|
+
}
|
|
32
|
+
| {
|
|
33
|
+
dropdownElement: HTMLElement;
|
|
34
|
+
element?: null | undefined;
|
|
35
|
+
index?: null | undefined;
|
|
36
|
+
indexAddend: number;
|
|
37
|
+
isExactMatch?: null | undefined;
|
|
38
|
+
text?: null | undefined;
|
|
39
|
+
}
|
|
40
|
+
| {
|
|
41
|
+
dropdownElement: HTMLElement;
|
|
42
|
+
element?: null | undefined;
|
|
43
|
+
index?: null | undefined;
|
|
44
|
+
indexAddend?: null | undefined;
|
|
45
|
+
isExactMatch?: boolean | undefined;
|
|
46
|
+
text: string;
|
|
47
|
+
}) => void;
|
package/dist/helpers.js
CHANGED
|
@@ -2,20 +2,16 @@ import { getBestMatch } from '@acusti/matchmaking';
|
|
|
2
2
|
import { BODY_SELECTOR } from './styles.js';
|
|
3
3
|
export const ITEM_SELECTOR = `[data-ukt-item], [data-ukt-value]`;
|
|
4
4
|
export const getItemElements = (dropdownElement) => {
|
|
5
|
-
if (!dropdownElement)
|
|
6
|
-
return null;
|
|
5
|
+
if (!dropdownElement) return null;
|
|
7
6
|
const bodyElement = dropdownElement.querySelector(BODY_SELECTOR);
|
|
8
|
-
if (!bodyElement)
|
|
9
|
-
return null;
|
|
7
|
+
if (!bodyElement) return null;
|
|
10
8
|
let items = bodyElement.querySelectorAll(ITEM_SELECTOR);
|
|
11
|
-
if (items.length)
|
|
12
|
-
return items;
|
|
9
|
+
if (items.length) return items;
|
|
13
10
|
// If no items found via [data-ukt-item] or [data-ukt-value] selector,
|
|
14
11
|
// use first instance of multiple children found
|
|
15
12
|
items = bodyElement.children;
|
|
16
13
|
while (items.length === 1) {
|
|
17
|
-
if (!items[0].children)
|
|
18
|
-
break;
|
|
14
|
+
if (!items[0].children) break;
|
|
19
15
|
items = items[0].children;
|
|
20
16
|
}
|
|
21
17
|
// If unable to find an element with more than one child, treat direct child as items
|
|
@@ -25,8 +21,7 @@ export const getItemElements = (dropdownElement) => {
|
|
|
25
21
|
return items;
|
|
26
22
|
};
|
|
27
23
|
export const getActiveItemElement = (dropdownElement) => {
|
|
28
|
-
if (!dropdownElement)
|
|
29
|
-
return null;
|
|
24
|
+
if (!dropdownElement) return null;
|
|
30
25
|
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
|
|
31
26
|
return dropdownElement.querySelector('[data-ukt-active]');
|
|
32
27
|
};
|
|
@@ -37,40 +32,45 @@ const clearItemElementsState = (itemElements) => {
|
|
|
37
32
|
}
|
|
38
33
|
});
|
|
39
34
|
};
|
|
40
|
-
export const setActiveItem = ({
|
|
35
|
+
export const setActiveItem = ({
|
|
36
|
+
dropdownElement,
|
|
37
|
+
element,
|
|
38
|
+
index,
|
|
39
|
+
indexAddend,
|
|
40
|
+
isExactMatch,
|
|
41
|
+
text,
|
|
42
|
+
}) => {
|
|
41
43
|
const items = getItemElements(dropdownElement);
|
|
42
|
-
if (!items)
|
|
43
|
-
return;
|
|
44
|
+
if (!items) return;
|
|
44
45
|
const itemElements = Array.from(items);
|
|
45
|
-
if (!itemElements.length)
|
|
46
|
-
return;
|
|
46
|
+
if (!itemElements.length) return;
|
|
47
47
|
const lastIndex = itemElements.length - 1;
|
|
48
|
-
const currentActiveIndex = itemElements.findIndex((itemElement) =>
|
|
48
|
+
const currentActiveIndex = itemElements.findIndex((itemElement) =>
|
|
49
|
+
itemElement.hasAttribute('data-ukt-active'),
|
|
50
|
+
);
|
|
49
51
|
let nextActiveIndex = currentActiveIndex;
|
|
50
52
|
if (typeof index === 'number') {
|
|
51
53
|
// Negative index means count back from the end
|
|
52
54
|
nextActiveIndex = index < 0 ? itemElements.length + index : index;
|
|
53
55
|
}
|
|
54
56
|
if (element) {
|
|
55
|
-
nextActiveIndex = itemElements.findIndex(
|
|
56
|
-
|
|
57
|
-
|
|
57
|
+
nextActiveIndex = itemElements.findIndex(
|
|
58
|
+
(itemElement) => itemElement === element,
|
|
59
|
+
);
|
|
60
|
+
} else if (typeof indexAddend === 'number') {
|
|
58
61
|
// If there’s no currentActiveIndex and we are handling -1, start at lastIndex
|
|
59
62
|
if (currentActiveIndex === -1 && indexAddend === -1) {
|
|
60
63
|
nextActiveIndex = lastIndex;
|
|
61
|
-
}
|
|
62
|
-
else {
|
|
64
|
+
} else {
|
|
63
65
|
nextActiveIndex += indexAddend;
|
|
64
66
|
}
|
|
65
67
|
// Keep it within the bounds of the items list
|
|
66
68
|
if (nextActiveIndex < 0) {
|
|
67
69
|
nextActiveIndex = 0;
|
|
68
|
-
}
|
|
69
|
-
else if (nextActiveIndex > lastIndex) {
|
|
70
|
+
} else if (nextActiveIndex > lastIndex) {
|
|
70
71
|
nextActiveIndex = lastIndex;
|
|
71
72
|
}
|
|
72
|
-
}
|
|
73
|
-
else if (typeof text === 'string') {
|
|
73
|
+
} else if (typeof text === 'string') {
|
|
74
74
|
// If text is empty, clear existing active items and early return
|
|
75
75
|
if (!text) {
|
|
76
76
|
clearItemElementsState(itemElements);
|
|
@@ -79,19 +79,19 @@ export const setActiveItem = ({ dropdownElement, element, index, indexAddend, is
|
|
|
79
79
|
const itemTexts = itemElements.map((itemElement) => itemElement.innerText);
|
|
80
80
|
if (isExactMatch) {
|
|
81
81
|
const textToCompare = text.toLowerCase();
|
|
82
|
-
nextActiveIndex = itemTexts.findIndex((itemText) =>
|
|
82
|
+
nextActiveIndex = itemTexts.findIndex((itemText) =>
|
|
83
|
+
itemText.toLowerCase().startsWith(textToCompare),
|
|
84
|
+
);
|
|
83
85
|
// If isExactMatch is required and no exact match was found, clear active items
|
|
84
86
|
if (nextActiveIndex === -1) {
|
|
85
87
|
clearItemElementsState(itemElements);
|
|
86
88
|
}
|
|
87
|
-
}
|
|
88
|
-
else {
|
|
89
|
+
} else {
|
|
89
90
|
const bestMatch = getBestMatch({ items: itemTexts, text });
|
|
90
91
|
nextActiveIndex = itemTexts.findIndex((text) => text === bestMatch);
|
|
91
92
|
}
|
|
92
93
|
}
|
|
93
|
-
if (nextActiveIndex === -1 || nextActiveIndex === currentActiveIndex)
|
|
94
|
-
return;
|
|
94
|
+
if (nextActiveIndex === -1 || nextActiveIndex === currentActiveIndex) return;
|
|
95
95
|
// Clear any existing active dropdown body item state
|
|
96
96
|
clearItemElementsState(itemElements);
|
|
97
97
|
const nextActiveItem = items[nextActiveIndex];
|
|
@@ -101,11 +101,11 @@ export const setActiveItem = ({ dropdownElement, element, index, indexAddend, is
|
|
|
101
101
|
let { parentElement } = nextActiveItem;
|
|
102
102
|
let scrollableParent = null;
|
|
103
103
|
while (!scrollableParent && parentElement && parentElement !== dropdownElement) {
|
|
104
|
-
const isScrollable =
|
|
104
|
+
const isScrollable =
|
|
105
|
+
parentElement.scrollHeight > parentElement.clientHeight + 15;
|
|
105
106
|
if (isScrollable) {
|
|
106
107
|
scrollableParent = parentElement;
|
|
107
|
-
}
|
|
108
|
-
else {
|
|
108
|
+
} else {
|
|
109
109
|
parentElement = parentElement.parentElement;
|
|
110
110
|
}
|
|
111
111
|
}
|
|
@@ -119,8 +119,7 @@ export const setActiveItem = ({ dropdownElement, element, index, indexAddend, is
|
|
|
119
119
|
// Item isn’t fully visible; adjust scrollTop to put item within closest edge
|
|
120
120
|
if (isAboveTop) {
|
|
121
121
|
scrollTop -= parentRect.top - itemRect.top;
|
|
122
|
-
}
|
|
123
|
-
else {
|
|
122
|
+
} else {
|
|
124
123
|
scrollTop += itemRect.bottom - parentRect.bottom;
|
|
125
124
|
}
|
|
126
125
|
scrollableParent.scrollTop = scrollTop;
|
|
@@ -128,4 +127,4 @@ export const setActiveItem = ({ dropdownElement, element, index, indexAddend, is
|
|
|
128
127
|
}
|
|
129
128
|
}
|
|
130
129
|
};
|
|
131
|
-
//# sourceMappingURL=helpers.js.map
|
|
130
|
+
//# sourceMappingURL=helpers.js.map
|
package/dist/styles.d.ts
CHANGED
|
@@ -1,13 +1,14 @@
|
|
|
1
|
-
export declare const ROOT_CLASS_NAME =
|
|
2
|
-
export declare const ROOT_SELECTOR =
|
|
3
|
-
export declare const BODY_CLASS_NAME =
|
|
4
|
-
export declare const LABEL_CLASS_NAME =
|
|
5
|
-
export declare const LABEL_TEXT_CLASS_NAME =
|
|
6
|
-
export declare const TRIGGER_CLASS_NAME =
|
|
7
|
-
export declare const BODY_SELECTOR =
|
|
8
|
-
export declare const LABEL_SELECTOR =
|
|
9
|
-
export declare const LABEL_TEXT_SELECTOR =
|
|
10
|
-
export declare const TRIGGER_SELECTOR =
|
|
11
|
-
export declare const BODY_MAX_HEIGHT_VAR =
|
|
12
|
-
export declare const BODY_MAX_WIDTH_VAR =
|
|
13
|
-
export declare const STYLES =
|
|
1
|
+
export declare const ROOT_CLASS_NAME = 'uktdropdown';
|
|
2
|
+
export declare const ROOT_SELECTOR = '.uktdropdown';
|
|
3
|
+
export declare const BODY_CLASS_NAME = 'uktdropdown-body';
|
|
4
|
+
export declare const LABEL_CLASS_NAME = 'uktdropdown-label';
|
|
5
|
+
export declare const LABEL_TEXT_CLASS_NAME = 'uktdropdown-label-text';
|
|
6
|
+
export declare const TRIGGER_CLASS_NAME = 'uktdropdown-trigger';
|
|
7
|
+
export declare const BODY_SELECTOR = '.uktdropdown-body';
|
|
8
|
+
export declare const LABEL_SELECTOR = '.uktdropdown-label';
|
|
9
|
+
export declare const LABEL_TEXT_SELECTOR = '.uktdropdown-label-text';
|
|
10
|
+
export declare const TRIGGER_SELECTOR = '.uktdropdown-trigger';
|
|
11
|
+
export declare const BODY_MAX_HEIGHT_VAR = '--uktdd-body-max-height';
|
|
12
|
+
export declare const BODY_MAX_WIDTH_VAR = '--uktdd-body-max-width';
|
|
13
|
+
export declare const STYLES =
|
|
14
|
+
'\n:root {\n --uktdd-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;\n --uktdd-body-bg-color: #fff;\n --uktdd-body-bg-color-hover: rgb(105,162,249);\n --uktdd-body-color-hover: #fff;\n --uktdd-body-buffer: 10px;\n --uktdd-body-max-height: calc(100vh - var(--uktdd-body-buffer));\n --uktdd-body-max-width: calc(100vw - var(--uktdd-body-buffer));\n --uktdd-body-pad-bottom: 9px;\n --uktdd-body-pad-left: 12px;\n --uktdd-body-pad-right: 12px;\n --uktdd-body-pad-top: 9px;\n --uktdd-label-pad-right: 10px;\n}\n.uktdropdown,\n.uktdropdown-trigger {\n font-family: var(--uktdd-font-family);\n}\n.uktdropdown {\n position: relative;\n display: inline-block;\n}\n.uktdropdown.disabled {\n pointer-events: none;\n}\n.uktdropdown > * {\n cursor: default;\n}\n.uktdropdown-label {\n display: flex;\n}\n.uktdropdown-label-text {\n padding-right: var(--uktdd-label-pad-right);\n}\n.uktdropdown-body {\n box-sizing: border-box;\n position: absolute;\n top: 100%;\n max-height: var(--uktdd-body-max-height);\n min-height: 50px;\n max-width: var(--uktdd-body-max-width);\n min-width: 100%;\n overflow: auto;\n z-index: 2;\n padding: var(--uktdd-body-pad-top) var(--uktdd-body-pad-right) var(--uktdd-body-pad-bottom) var(--uktdd-body-pad-left);\n background-color: var(--uktdd-body-bg-color);\n box-shadow: 0 8px 18px rgba(0,0,0,0.25);\n}\n.uktdropdown-body.calculating-position {\n visibility: hidden;\n}\n.uktdropdown-body.out-of-bounds-bottom:not(.out-of-bounds-top) {\n top: auto;\n bottom: 100%;\n}\n.uktdropdown-body.out-of-bounds-right:not(.out-of-bounds-left) {\n left: auto;\n right: 0px;\n}\n.uktdropdown-label + .uktdropdown-body {\n left: auto;\n right: 0;\n}\n.uktdropdown-body.has-items {\n user-select: none;\n}\n.uktdropdown-body [data-ukt-active] {\n background-color: var(--uktdd-body-bg-color-hover);\n color: var(--uktdd-body-color-hover);\n}\n';
|
package/dist/styles.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@acusti/dropdown",
|
|
3
|
-
"version": "0.38.
|
|
3
|
+
"version": "0.38.4",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"exports": "./dist/Dropdown.js",
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
"vitest": "^1.1.0"
|
|
54
54
|
},
|
|
55
55
|
"dependencies": {
|
|
56
|
-
"@acusti/input-text": "^1.5.
|
|
56
|
+
"@acusti/input-text": "^1.5.3",
|
|
57
57
|
"@acusti/matchmaking": "^0.6.1",
|
|
58
58
|
"@acusti/styling": "^0.7.2",
|
|
59
59
|
"@acusti/use-is-out-of-bounds": "^0.9.0",
|