@acusti/dropdown 0.44.1 → 0.45.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.
Files changed (15) hide show
  1. package/README.md +1 -1
  2. package/dist/Dropdown.d.ts +1 -23
  3. package/dist/Dropdown.js +333 -467
  4. package/dist/Dropdown.js.flow +58 -58
  5. package/dist/Dropdown.js.map +1 -1
  6. package/dist/Dropdown.test.js +48 -81
  7. package/dist/Dropdown.test.js.map +1 -1
  8. package/dist/helpers.d.ts +32 -47
  9. package/dist/helpers.js +37 -36
  10. package/dist/helpers.js.flow +36 -36
  11. package/dist/styles.d.ts +13 -14
  12. package/dist/styles.js +1 -1
  13. package/dist/styles.js.flow +12 -12
  14. package/package.json +6 -7
  15. package/src/Dropdown.tsx +2 -4
package/dist/helpers.js.flow CHANGED
@@ -5,45 +5,45 @@
5
5
  * @flow
6
6
  */
7
7
 
8
- declare export var ITEM_SELECTOR: '[data-ukt-item], [data-ukt-value]';
8
+ declare export var ITEM_SELECTOR: "[data-ukt-item], [data-ukt-value]";
9
9
  declare export var getItemElements: (
10
- dropdownElement: HTMLElement | null,
10
+ dropdownElement: HTMLElement | null
11
11
  ) => HTMLCollection | NodeListOf<Element> | null;
12
12
  declare export var getActiveItemElement: (
13
- dropdownElement: HTMLElement | null,
13
+ dropdownElement: HTMLElement | null
14
14
  ) => HTMLElement | null;
15
15
  declare export var setActiveItem: (
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
- |},
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/styles.d.ts CHANGED
@@ -1,14 +1,13 @@
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';
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 = "\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
@@ -83,4 +83,4 @@ ${BODY_SELECTOR} [data-ukt-active] {
83
83
  color: var(--uktdd-body-color-hover);
84
84
  }
85
85
  `;
86
- //# sourceMappingURL=styles.js.map
86
+ //# sourceMappingURL=styles.js.map
package/dist/styles.js.flow CHANGED
@@ -5,16 +5,16 @@
5
5
  * @flow
6
6
  */
7
7
 
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';
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.44.1",
3
+ "version": "0.45.0",
4
4
  "type": "module",
5
5
  "sideEffects": false,
6
6
  "exports": "./dist/Dropdown.js",
@@ -45,18 +45,17 @@
45
45
  "@testing-library/dom": "^10.4.0",
46
46
  "@testing-library/react": "^16.1.0",
47
47
  "@testing-library/user-event": "^14.5.2",
48
- "@types/react": "^19.0.2",
49
- "happy-dom": "^15.11.7",
48
+ "@types/react": "^19.0.7",
49
+ "happy-dom": "^17.4.4",
50
50
  "react": "^19",
51
51
  "react-dom": "^19",
52
52
  "typescript": "5.7.3",
53
- "vitest": "^2.1.8"
53
+ "vitest": "^3"
54
54
  },
55
55
  "dependencies": {
56
- "@acusti/input-text": "^1.9.1",
57
56
  "@acusti/matchmaking": "^0.8.0",
58
- "@acusti/styling": "^1.0.1",
59
- "@acusti/use-is-out-of-bounds": "^0.13.0",
57
+ "@acusti/styling": "^0.7.2 || ^1.0.1",
58
+ "@acusti/use-is-out-of-bounds": "^0.13.1",
60
59
  "@acusti/use-keyboard-events": "^0.9.1",
61
60
  "clsx": "^2"
62
61
  },
package/src/Dropdown.tsx CHANGED
@@ -1,5 +1,4 @@
1
1
  /* eslint-disable jsx-a11y/click-events-have-key-events, jsx-a11y/mouse-events-have-key-events, jsx-a11y/no-static-element-interactions */
2
- import InputText from '@acusti/input-text';
3
2
  import { Style } from '@acusti/styling';
4
3
  import useIsOutOfBounds from '@acusti/use-is-out-of-bounds';
5
4
  import useKeyboardEvents, {
@@ -645,16 +644,15 @@ export default function Dropdown({
645
644
  if (!isTriggerFromProps) {
646
645
  if (isSearchable) {
647
646
  trigger = (
648
- <InputText
647
+ <input
649
648
  autoComplete="off"
650
649
  className={TRIGGER_CLASS_NAME}
650
+ defaultValue={value ?? ''}
651
651
  disabled={disabled}
652
- initialValue={value ?? ''}
653
652
  name={name}
654
653
  onFocus={setDropdownOpenRef.current}
655
654
  placeholder={placeholder}
656
655
  ref={inputElementRef}
657
- selectTextOnFocus
658
656
  tabIndex={tabIndex}
659
657
  type="text"
660
658
  />