@acusti/dropdown 0.43.0 → 0.44.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.
- package/README.md +1 -1
- package/dist/Dropdown.d.ts +25 -3
- package/dist/Dropdown.js +466 -330
- package/dist/Dropdown.js.flow +59 -59
- package/dist/Dropdown.js.map +1 -1
- package/dist/Dropdown.test.js +81 -48
- package/dist/Dropdown.test.js.map +1 -1
- package/dist/helpers.d.ts +47 -32
- package/dist/helpers.js +37 -39
- package/dist/helpers.js.flow +37 -37
- package/dist/helpers.js.map +1 -1
- package/dist/styles.d.ts +14 -13
- package/dist/styles.js +1 -1
- package/dist/styles.js.flow +12 -12
- package/package.json +15 -15
- package/src/Dropdown.test.tsx +1 -1
- package/src/Dropdown.tsx +20 -17
- package/src/helpers.ts +4 -5
package/dist/helpers.js.flow
CHANGED
|
@@ -5,45 +5,45 @@
|
|
|
5
5
|
* @flow
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
|
-
declare export var ITEM_SELECTOR:
|
|
8
|
+
declare export var ITEM_SELECTOR: '[data-ukt-item], [data-ukt-value]';
|
|
9
9
|
declare export var getItemElements: (
|
|
10
|
-
|
|
11
|
-
) => NodeListOf<Element> |
|
|
10
|
+
dropdownElement: HTMLElement | null,
|
|
11
|
+
) => HTMLCollection | NodeListOf<Element> | null;
|
|
12
12
|
declare export var getActiveItemElement: (
|
|
13
|
-
|
|
13
|
+
dropdownElement: HTMLElement | null,
|
|
14
14
|
) => HTMLElement | null;
|
|
15
15
|
declare export var setActiveItem: (
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
16
|
+
x:
|
|
17
|
+
| {|
|
|
18
|
+
dropdownElement: HTMLElement,
|
|
19
|
+
element: HTMLElement,
|
|
20
|
+
index?: null,
|
|
21
|
+
indexAddend?: null,
|
|
22
|
+
isExactMatch?: null,
|
|
23
|
+
text?: null,
|
|
24
|
+
|}
|
|
25
|
+
| {|
|
|
26
|
+
dropdownElement: HTMLElement,
|
|
27
|
+
element?: null,
|
|
28
|
+
index: number,
|
|
29
|
+
indexAddend?: null,
|
|
30
|
+
isExactMatch?: null,
|
|
31
|
+
text?: null,
|
|
32
|
+
|}
|
|
33
|
+
| {|
|
|
34
|
+
dropdownElement: HTMLElement,
|
|
35
|
+
element?: null,
|
|
36
|
+
index?: null,
|
|
37
|
+
indexAddend: number,
|
|
38
|
+
isExactMatch?: null,
|
|
39
|
+
text?: null,
|
|
40
|
+
|}
|
|
41
|
+
| {|
|
|
42
|
+
dropdownElement: HTMLElement,
|
|
43
|
+
element?: null,
|
|
44
|
+
index?: null,
|
|
45
|
+
indexAddend?: null,
|
|
46
|
+
isExactMatch?: boolean,
|
|
47
|
+
text: string,
|
|
48
|
+
|},
|
|
49
49
|
) => void;
|
package/dist/helpers.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../src/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,MAAM,CAAC,MAAM,aAAa,GAAG,mCAAmC,CAAC;AAEjE,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,eAAmC,EAAE,EAAE;IACnE,IAAI,CAAC,eAAe;QAAE,OAAO,IAAI,CAAC;IAElC,MAAM,WAAW,GAAG,eAAe,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;IACjE,IAAI,CAAC,WAAW;QAAE,OAAO,IAAI,CAAC;IAE9B,IAAI,KAAK,GACL,WAAW,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAEhD,IAAI,KAAK,CAAC,MAAM;QAAE,OAAO,KAAK,CAAC;IAC/B,sEAAsE;IACtE,gDAAgD;IAChD,KAAK,GAAG,WAAW,CAAC,QAAQ,CAAC;IAC7B,OAAO,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACxB,IAAI,
|
|
1
|
+
{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../src/helpers.ts"],"names":[],"mappings":"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"}
|
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/dist/styles.js.flow
CHANGED
|
@@ -5,16 +5,16 @@
|
|
|
5
5
|
* @flow
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
|
-
declare export var ROOT_CLASS_NAME:
|
|
9
|
-
declare export var ROOT_SELECTOR:
|
|
10
|
-
declare export var BODY_CLASS_NAME:
|
|
11
|
-
declare export var LABEL_CLASS_NAME:
|
|
12
|
-
declare export var LABEL_TEXT_CLASS_NAME:
|
|
13
|
-
declare export var TRIGGER_CLASS_NAME:
|
|
14
|
-
declare export var BODY_SELECTOR:
|
|
15
|
-
declare export var LABEL_SELECTOR:
|
|
16
|
-
declare export var LABEL_TEXT_SELECTOR:
|
|
17
|
-
declare export var TRIGGER_SELECTOR:
|
|
18
|
-
declare export var BODY_MAX_HEIGHT_VAR:
|
|
19
|
-
declare export var BODY_MAX_WIDTH_VAR:
|
|
8
|
+
declare export var ROOT_CLASS_NAME: 'uktdropdown';
|
|
9
|
+
declare export var ROOT_SELECTOR: '.uktdropdown';
|
|
10
|
+
declare export var BODY_CLASS_NAME: 'uktdropdown-body';
|
|
11
|
+
declare export var LABEL_CLASS_NAME: 'uktdropdown-label';
|
|
12
|
+
declare export var LABEL_TEXT_CLASS_NAME: 'uktdropdown-label-text';
|
|
13
|
+
declare export var TRIGGER_CLASS_NAME: 'uktdropdown-trigger';
|
|
14
|
+
declare export var BODY_SELECTOR: '.uktdropdown-body';
|
|
15
|
+
declare export var LABEL_SELECTOR: '.uktdropdown-label';
|
|
16
|
+
declare export var LABEL_TEXT_SELECTOR: '.uktdropdown-label-text';
|
|
17
|
+
declare export var TRIGGER_SELECTOR: '.uktdropdown-trigger';
|
|
18
|
+
declare export var BODY_MAX_HEIGHT_VAR: '--uktdd-body-max-height';
|
|
19
|
+
declare export var BODY_MAX_WIDTH_VAR: '--uktdd-body-max-width';
|
|
20
20
|
declare export var STYLES: '\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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@acusti/dropdown",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.44.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"exports": "./dist/Dropdown.js",
|
|
@@ -43,25 +43,25 @@
|
|
|
43
43
|
"homepage": "https://github.com/acusti/uikit/tree/main/packages/dropdown#readme",
|
|
44
44
|
"devDependencies": {
|
|
45
45
|
"@testing-library/dom": "^10.4.0",
|
|
46
|
-
"@testing-library/react": "^16.0
|
|
46
|
+
"@testing-library/react": "^16.1.0",
|
|
47
47
|
"@testing-library/user-event": "^14.5.2",
|
|
48
|
-
"@types/react": "^
|
|
49
|
-
"happy-dom": "^15.7
|
|
50
|
-
"react": "^19
|
|
51
|
-
"react-dom": "^19
|
|
52
|
-
"typescript": "5.
|
|
53
|
-
"vitest": "^
|
|
48
|
+
"@types/react": "^19.0.2",
|
|
49
|
+
"happy-dom": "^15.11.7",
|
|
50
|
+
"react": "^19",
|
|
51
|
+
"react-dom": "^19",
|
|
52
|
+
"typescript": "5.7.3",
|
|
53
|
+
"vitest": "^2.1.8"
|
|
54
54
|
},
|
|
55
55
|
"dependencies": {
|
|
56
|
-
"@acusti/input-text": "^1.
|
|
57
|
-
"@acusti/matchmaking": "^0.
|
|
58
|
-
"@acusti/styling": "^
|
|
59
|
-
"@acusti/use-is-out-of-bounds": "^0.
|
|
60
|
-
"@acusti/use-keyboard-events": "^0.
|
|
56
|
+
"@acusti/input-text": "^1.9.1",
|
|
57
|
+
"@acusti/matchmaking": "^0.8.0",
|
|
58
|
+
"@acusti/styling": "^1.0.1",
|
|
59
|
+
"@acusti/use-is-out-of-bounds": "^0.13.0",
|
|
60
|
+
"@acusti/use-keyboard-events": "^0.9.1",
|
|
61
61
|
"clsx": "^2"
|
|
62
62
|
},
|
|
63
63
|
"peerDependencies": {
|
|
64
|
-
"react": "^
|
|
65
|
-
"react-dom": "^
|
|
64
|
+
"react": "^19",
|
|
65
|
+
"react-dom": "^19"
|
|
66
66
|
}
|
|
67
67
|
}
|
package/src/Dropdown.test.tsx
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
// @vitest-environment happy-dom
|
|
2
2
|
import { cleanup, render, screen } from '@testing-library/react';
|
|
3
3
|
import { userEvent } from '@testing-library/user-event';
|
|
4
|
-
import React from 'react';
|
|
4
|
+
import React from 'react';
|
|
5
5
|
import { afterEach, describe, expect, it } from 'vitest';
|
|
6
6
|
|
|
7
7
|
import Dropdown from './Dropdown.js';
|
package/src/Dropdown.tsx
CHANGED
|
@@ -26,8 +26,6 @@ import {
|
|
|
26
26
|
TRIGGER_CLASS_NAME,
|
|
27
27
|
} from './styles.js';
|
|
28
28
|
|
|
29
|
-
type ChildrenTuple = [React.ReactNode, React.ReactNode];
|
|
30
|
-
|
|
31
29
|
export type Item = {
|
|
32
30
|
element: HTMLElement | null;
|
|
33
31
|
event: Event | React.SyntheticEvent<HTMLElement>;
|
|
@@ -49,7 +47,7 @@ export type Props = {
|
|
|
49
47
|
/**
|
|
50
48
|
* Can take a single React element or exactly two renderable children.
|
|
51
49
|
*/
|
|
52
|
-
children: React.JSX.Element
|
|
50
|
+
children: ChildrenTuple | React.JSX.Element;
|
|
53
51
|
className?: string;
|
|
54
52
|
disabled?: boolean;
|
|
55
53
|
/**
|
|
@@ -91,10 +89,12 @@ export type Props = {
|
|
|
91
89
|
value?: string;
|
|
92
90
|
};
|
|
93
91
|
|
|
94
|
-
type
|
|
92
|
+
type ChildrenTuple = [React.ReactNode, React.ReactNode];
|
|
95
93
|
|
|
96
94
|
type MousePosition = { clientX: number; clientY: number };
|
|
97
95
|
|
|
96
|
+
type TimeoutID = ReturnType<typeof setTimeout>;
|
|
97
|
+
|
|
98
98
|
const { Children, Fragment, useCallback, useEffect, useMemo, useRef, useState } = React;
|
|
99
99
|
|
|
100
100
|
const noop = () => {}; // eslint-disable-line @typescript-eslint/no-empty-function
|
|
@@ -148,10 +148,10 @@ export default function Dropdown({
|
|
|
148
148
|
|
|
149
149
|
const dropdownElementRef = useRef<HTMLDivElement | null>(null);
|
|
150
150
|
const inputElementRef = useRef<HTMLInputElement | null>(null);
|
|
151
|
-
const closingTimerRef = useRef<
|
|
152
|
-
const isOpeningTimerRef = useRef<
|
|
153
|
-
const currentInputMethodRef = useRef<'
|
|
154
|
-
const clearEnteredCharactersTimerRef = useRef<
|
|
151
|
+
const closingTimerRef = useRef<null | TimeoutID>(null);
|
|
152
|
+
const isOpeningTimerRef = useRef<null | TimeoutID>(null);
|
|
153
|
+
const currentInputMethodRef = useRef<'keyboard' | 'mouse'>('mouse');
|
|
154
|
+
const clearEnteredCharactersTimerRef = useRef<null | TimeoutID>(null);
|
|
155
155
|
const enteredCharactersRef = useRef<string>('');
|
|
156
156
|
const mouseDownPositionRef = useRef<MousePosition | null>(null);
|
|
157
157
|
const outOfBounds = useIsOutOfBounds(dropdownBodyElement);
|
|
@@ -225,7 +225,6 @@ export default function Dropdown({
|
|
|
225
225
|
(event: Event | React.SyntheticEvent<HTMLElement>) => {
|
|
226
226
|
const eventTarget = event.target as HTMLElement;
|
|
227
227
|
if (isOpenRef.current && !keepOpenOnSubmitRef.current) {
|
|
228
|
-
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
|
|
229
228
|
const keepOpen = eventTarget.closest(
|
|
230
229
|
'[data-ukt-keep-open]',
|
|
231
230
|
) as HTMLElement | null;
|
|
@@ -250,12 +249,12 @@ export default function Dropdown({
|
|
|
250
249
|
if (inputElementRef.current?.value) return;
|
|
251
250
|
}
|
|
252
251
|
|
|
253
|
-
let
|
|
252
|
+
let itemLabel = element?.innerText ?? '';
|
|
254
253
|
if (inputElementRef.current) {
|
|
255
254
|
if (!element) {
|
|
256
|
-
|
|
255
|
+
itemLabel = inputElementRef.current.value;
|
|
257
256
|
} else {
|
|
258
|
-
inputElementRef.current.value =
|
|
257
|
+
inputElementRef.current.value = itemLabel;
|
|
259
258
|
}
|
|
260
259
|
|
|
261
260
|
if (
|
|
@@ -266,12 +265,17 @@ export default function Dropdown({
|
|
|
266
265
|
}
|
|
267
266
|
}
|
|
268
267
|
|
|
269
|
-
const nextValue = element?.dataset.uktValue ??
|
|
268
|
+
const nextValue = element?.dataset.uktValue ?? itemLabel;
|
|
270
269
|
// If parent is controlling Dropdown via props.value and nextValue is the same, do nothing
|
|
271
270
|
if (valueRef.current && valueRef.current === nextValue) return;
|
|
272
271
|
|
|
273
272
|
if (onSubmitItemRef.current) {
|
|
274
|
-
onSubmitItemRef.current({
|
|
273
|
+
onSubmitItemRef.current({
|
|
274
|
+
element,
|
|
275
|
+
event,
|
|
276
|
+
label: itemLabel,
|
|
277
|
+
value: nextValue,
|
|
278
|
+
});
|
|
275
279
|
}
|
|
276
280
|
},
|
|
277
281
|
[closeDropdown],
|
|
@@ -307,7 +311,6 @@ export default function Dropdown({
|
|
|
307
311
|
if (!itemElements) return;
|
|
308
312
|
|
|
309
313
|
const eventTarget = event.target as HTMLElement;
|
|
310
|
-
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
|
|
311
314
|
const item = eventTarget.closest(ITEM_SELECTOR) as HTMLElement | null;
|
|
312
315
|
const element = item ?? eventTarget;
|
|
313
316
|
for (const itemElement of itemElements) {
|
|
@@ -677,12 +680,12 @@ export default function Dropdown({
|
|
|
677
680
|
const style = useMemo<React.CSSProperties>(
|
|
678
681
|
() => ({
|
|
679
682
|
...styleFromProps,
|
|
680
|
-
...(outOfBounds.maxHeight
|
|
683
|
+
...(outOfBounds.maxHeight != null && outOfBounds.maxHeight > 0
|
|
681
684
|
? {
|
|
682
685
|
[BODY_MAX_HEIGHT_VAR]: `calc(${outOfBounds.maxHeight}px - var(--uktdd-body-buffer))`,
|
|
683
686
|
}
|
|
684
687
|
: null),
|
|
685
|
-
...(outOfBounds.maxWidth
|
|
688
|
+
...(outOfBounds.maxWidth != null && outOfBounds.maxWidth > 0
|
|
686
689
|
? {
|
|
687
690
|
[BODY_MAX_WIDTH_VAR]: `calc(${outOfBounds.maxWidth}px - var(--uktdd-body-buffer))`,
|
|
688
691
|
}
|
package/src/helpers.ts
CHANGED
|
@@ -10,7 +10,7 @@ export const getItemElements = (dropdownElement: HTMLElement | null) => {
|
|
|
10
10
|
const bodyElement = dropdownElement.querySelector(BODY_SELECTOR);
|
|
11
11
|
if (!bodyElement) return null;
|
|
12
12
|
|
|
13
|
-
let items: NodeListOf<Element>
|
|
13
|
+
let items: HTMLCollection | NodeListOf<Element> =
|
|
14
14
|
bodyElement.querySelectorAll(ITEM_SELECTOR);
|
|
15
15
|
|
|
16
16
|
if (items.length) return items;
|
|
@@ -18,7 +18,7 @@ export const getItemElements = (dropdownElement: HTMLElement | null) => {
|
|
|
18
18
|
// use first instance of multiple children found
|
|
19
19
|
items = bodyElement.children;
|
|
20
20
|
while (items.length === 1) {
|
|
21
|
-
if (
|
|
21
|
+
if (items[0].children == null) break;
|
|
22
22
|
items = items[0].children;
|
|
23
23
|
}
|
|
24
24
|
// If unable to find an element with more than one child, treat direct child as items
|
|
@@ -30,7 +30,6 @@ export const getItemElements = (dropdownElement: HTMLElement | null) => {
|
|
|
30
30
|
|
|
31
31
|
export const getActiveItemElement = (dropdownElement: HTMLElement | null) => {
|
|
32
32
|
if (!dropdownElement) return null;
|
|
33
|
-
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
|
|
34
33
|
return dropdownElement.querySelector('[data-ukt-active]') as HTMLElement | null;
|
|
35
34
|
};
|
|
36
35
|
|
|
@@ -135,7 +134,7 @@ export const setActiveItem = ({
|
|
|
135
134
|
}
|
|
136
135
|
} else {
|
|
137
136
|
const bestMatch = getBestMatch({ items: itemTexts, text });
|
|
138
|
-
nextActiveIndex = itemTexts.findIndex((
|
|
137
|
+
nextActiveIndex = itemTexts.findIndex((itemText) => itemText === bestMatch);
|
|
139
138
|
}
|
|
140
139
|
}
|
|
141
140
|
|
|
@@ -145,7 +144,7 @@ export const setActiveItem = ({
|
|
|
145
144
|
clearItemElementsState(itemElements);
|
|
146
145
|
|
|
147
146
|
const nextActiveItem = items[nextActiveIndex];
|
|
148
|
-
if (nextActiveItem) {
|
|
147
|
+
if (nextActiveItem != null) {
|
|
149
148
|
nextActiveItem.setAttribute('data-ukt-active', '');
|
|
150
149
|
// Find closest scrollable parent and ensure that next active item is visible
|
|
151
150
|
let { parentElement } = nextActiveItem;
|