html-combobox-element 0.0.2-beta.9 → 0.0.3
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 +122 -0
- package/dist/cjs/combobox/Combobox.markup.js +34 -62
- package/dist/cjs/combobox/HTML.combobox.element.js +131 -25
- package/dist/cjs/combobox/HTML.combobox.option.element.js +3 -4
- package/dist/cjs/combobox/HTML.combobox.tag.element.js +1 -1
- package/dist/cjs/index.js +0 -4
- package/dist/esm/combobox/Combobox.markup.js +34 -62
- package/dist/esm/combobox/HTML.combobox.element.js +131 -25
- package/dist/esm/combobox/HTML.combobox.option.element.js +3 -4
- package/dist/esm/combobox/HTML.combobox.tag.element.js +1 -1
- package/dist/esm/index.js +0 -4
- package/dist/types/combobox/Combobox.markup.d.ts +2 -0
- package/dist/types/combobox/Combobox.markup.d.ts.map +1 -1
- package/dist/types/combobox/HTML.combobox.element.d.ts +8 -4
- package/dist/types/combobox/HTML.combobox.element.d.ts.map +1 -1
- package/dist/types/combobox/HTML.combobox.option.element.d.ts.map +1 -1
- package/dist/types/index.d.ts +102 -61
- package/dist/types/index.d.ts.map +1 -1
- package/package.json +9 -2
- package/combobox-skill/SKILL.md +0 -46
- package/combobox-skill/custom-box-tag.md +0 -12
- package/combobox-skill/customization.md +0 -23
- package/combobox-skill/legacy-react-restrictions.md +0 -13
- package/combobox-skill/share-styles.md +0 -17
- package/dist/types/types.d.ts +0 -198
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Combobox.markup.d.ts","sourceRoot":"","sources":["../../../src/combobox/Combobox.markup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAE9E,qBAAa,cAAc;;IAGzB,aAAa,EAAE,cAAc,GAAG,IAAI,CAAQ;IAC5C,gBAAgB,EAAE,cAAc,GAAG,IAAI,CAAQ;IAC/C,cAAc,EAAE,iBAAiB,GAAG,IAAI,CAAQ;IAChD,QAAQ,EAAE,cAAc,GAAG,IAAI,CAAQ;IACvC,WAAW,EAAE,cAAc,GAAG,IAAI,CAAQ;IAC1C,WAAW,EAAE,gBAAgB,GAAG,IAAI,CAAQ;IAC5C,WAAW,EAAE,sBAAsB,GAAG,IAAI,CAAQ;gBAOtC,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,gBAAgB;
|
|
1
|
+
{"version":3,"file":"Combobox.markup.d.ts","sourceRoot":"","sources":["../../../src/combobox/Combobox.markup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAE9E,qBAAa,cAAc;;IAGzB,aAAa,EAAE,cAAc,GAAG,IAAI,CAAQ;IAC5C,gBAAgB,EAAE,cAAc,GAAG,IAAI,CAAQ;IAC/C,cAAc,EAAE,iBAAiB,GAAG,IAAI,CAAQ;IAChD,QAAQ,EAAE,cAAc,GAAG,IAAI,CAAQ;IACvC,WAAW,EAAE,cAAc,GAAG,IAAI,CAAQ;IAC1C,WAAW,EAAE,gBAAgB,GAAG,IAAI,CAAQ;IAC5C,WAAW,EAAE,sBAAsB,GAAG,IAAI,CAAQ;gBAOtC,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,gBAAgB;IAU/D,OAAO;IAuBP,eAAe;IAMf,UAAU;IAQV,cAAc,CAAC,KAAK,EAAE,MAAM;IAM5B,aAAa,CAAC,KAAK,EAAE,MAAM;IAM3B,kBAAkB,GAAI,OAAO,UAAU,UAStC;IAED,cAAc,GAAI,IAAI,UAAU,UAI/B;IAID,IAAI,CAAC,KAAK,EAAE,MAAM;IAgBlB,IAAI,OAAO,0CAEV;IAED,aAAa,CAAC,GAAG,EAAE,sBAAsB;IAczC,mBAAmB;IAqBnB,YAAY;IAIZ,SAAS,aASR;IAED,aAAa;IASb,UAAU,aAGT;IAGD,kBAAkB,CAAC,MAAM,EAAE,yBAAyB;IAsCpD,aAAa,CAAC,KAAK,EAAE,MAAM;IAI3B,gBAAgB,CAAC,KAAK,EAAE,MAAM;IAI9B,IAAI,eAAe,0CAElB;IAED,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE;IAQ/B,MAAM,CAAC,QAAQ,SAqOhB;IACC,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC;CAMpC"}
|
|
@@ -4,15 +4,19 @@ export declare class HTMLComboboxElement extends HTMLElement {
|
|
|
4
4
|
static OWN_IDL: Set<string>;
|
|
5
5
|
static observerOptions: {
|
|
6
6
|
childList: boolean;
|
|
7
|
-
attributes: boolean;
|
|
8
|
-
subtree: boolean;
|
|
9
7
|
};
|
|
10
8
|
static styleSheet: CSSStyleSheet[];
|
|
11
9
|
static formAssociated: boolean;
|
|
12
10
|
shadowRoot: ShadowRoot;
|
|
13
11
|
constructor();
|
|
14
12
|
connectedCallback(): void;
|
|
15
|
-
insertBefore: (node:
|
|
13
|
+
insertBefore: <T extends Node>(node: T, referenceNode: Node | null) => T;
|
|
14
|
+
appendChild: <T extends Node>(node: T) => T;
|
|
15
|
+
append: (...nodes: (Node | string)[]) => void;
|
|
16
|
+
prepend: (...nodes: (Node | string)[]) => void;
|
|
17
|
+
replaceChildren: (...nodes: (Node | string)[]) => void;
|
|
18
|
+
removeChild: <T extends Node>(child: T) => T;
|
|
19
|
+
replaceChild: <T extends Node>(newChild: Node, oldChild: T) => T;
|
|
16
20
|
get changed(): boolean;
|
|
17
21
|
disconnectedCallback(): void;
|
|
18
22
|
formResetCallback(): void;
|
|
@@ -38,7 +42,7 @@ export declare class HTMLComboboxElement extends HTMLElement {
|
|
|
38
42
|
get required(): boolean;
|
|
39
43
|
set required(value: boolean);
|
|
40
44
|
get selectedOptions(): NodeListOf<HTMLComboboxOptionElement>;
|
|
41
|
-
get type(): "select-
|
|
45
|
+
get type(): "select-multiple" | "select-one";
|
|
42
46
|
get validationMessage(): string;
|
|
43
47
|
get validity(): ValidityState;
|
|
44
48
|
get willValidate(): boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HTML.combobox.element.d.ts","sourceRoot":"","sources":["../../../src/combobox/HTML.combobox.element.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;
|
|
1
|
+
{"version":3,"file":"HTML.combobox.element.d.ts","sourceRoot":"","sources":["../../../src/combobox/HTML.combobox.element.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAK9E,qBAAa,mBAAoB,SAAQ,WAAW;;IAClD,MAAM,CAAC,OAAO,cAA0H;IACxI,MAAM,CAAC,eAAe;;MAAuB;IAC7C,MAAM,CAAC,UAAU,kBAAuB;IACxC,MAAM,CAAC,cAAc,UAAQ;IAE7B,UAAU,EAAE,UAAU,CAAC;;IA2BvB,iBAAiB;IAyCjB,YAAY,GAAI,CAAC,SAAS,IAAI,EAAE,MAAM,CAAC,EAAE,eAAe,IAAI,GAAG,IAAI,KAAG,CAAC,CAOtE;IAED,WAAW,GAAI,CAAC,SAAS,IAAI,EAAE,MAAM,CAAC,KAAG,CAAC,CAOzC;IAED,MAAM,GAAI,GAAG,OAAO,CAAC,IAAI,GAAG,MAAM,CAAC,EAAE,UAEpC;IAED,OAAO,GAAI,GAAG,OAAO,CAAC,IAAI,GAAG,MAAM,CAAC,EAAE,UASrC;IAED,eAAe,GAAI,GAAG,OAAO,CAAC,IAAI,GAAG,MAAM,CAAC,EAAE,UAI7C;IAED,WAAW,GAAI,CAAC,SAAS,IAAI,EAAE,OAAO,CAAC,KAAG,CAAC,CAO1C;IAED,YAAY,GAAI,CAAC,SAAS,IAAI,EAAE,UAAU,IAAI,EAAE,UAAU,CAAC,KAAG,CAAC,CAO9D;IAED,IAAI,OAAO,YAEV;IAED,oBAAoB;IAWpB,iBAAiB;IAOjB,oBAAoB;IASpB,IAAI,YAAY,aAEf;IAED,IAAI,KAAK,IAGQ,MAAM,CADtB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAMtB;IAED,IAAI,WAAW,WAEd;IACD,IAAI,WAAW,CAAC,KAAK,QAAA,EAKpB;IAED,IAAI,SAAS,YAEZ;IACD,IAAI,SAAS,CAAC,KAAK,SAAA,EAElB;IAED,IAAI,UAAU,YAEb;IACD,IAAI,UAAU,CAAC,KAAK,SAAA,EAEnB;IAED,IAAI,UAAU,YAEb;IACD,IAAI,UAAU,CAAC,KAAK,SAAA,EAEnB;IAGD,IAAI,QAAQ,YAEX;IACD,IAAI,QAAQ,CAAC,KAAK,SAAA,EAKjB;IAED,IAAI,IAAI,oBAEP;IAED,IAAI,MAAM,aAET;IAED,IAAI,MAAM,WAET;IAED,IAAI,QAAQ,YAEX;IACD,IAAI,QAAQ,CAAC,KAAK,SAAA,EAEjB;IAKD,IAAI,QAAQ,YAEX;IACD,IAAI,QAAQ,CAAC,KAAK,SAAA,EAGjB;IAID,IAAI,eAAe,0CAElB;IAMD,IAAI,IAAI,qCAEP;IAED,IAAI,iBAAiB,WAEpB;IAED,IAAI,QAAQ,kBAEX;IAED,IAAI,YAAY,YAEf;IAED,IAAI,KAAK,IAGQ,MAAM,CADtB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAWtB;IAQD,aAAa;IAIb,IAAI,CAAC,KAAK,EAAE,MAAM;IASlB,cAAc;IAId,iBAAiB,CAAC,OAAO,EAAE,MAAM;IAQjC,UAAU;IAKV,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG;IAQrC,eAAe,CAAC,IAAI,EAAE,MAAM;IAuM5B,MAAM,CAAC,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE;IAIrC,MAAM,CAAC,8BAA8B;CAoBtC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HTML.combobox.option.element.d.ts","sourceRoot":"","sources":["../../../src/combobox/HTML.combobox.option.element.ts"],"names":[],"mappings":"AAEA,qBAAa,yBAA0B,SAAQ,WAAW;;IACxD,MAAM,CAAC,OAAO,cAAuD;IACrE,MAAM,CAAC,SAAS;;;;MAAuD;IAGvE,MAAM,CAAC,YAAY,CAAC,KAAK,EAAE,UAAU;IAOrC,MAAM,CAAC,UAAU,CAAC,KAAK,EAAE,aAAa;IAwBtC,iBAAiB;
|
|
1
|
+
{"version":3,"file":"HTML.combobox.option.element.d.ts","sourceRoot":"","sources":["../../../src/combobox/HTML.combobox.option.element.ts"],"names":[],"mappings":"AAEA,qBAAa,yBAA0B,SAAQ,WAAW;;IACxD,MAAM,CAAC,OAAO,cAAuD;IACrE,MAAM,CAAC,SAAS;;;;MAAuD;IAGvE,MAAM,CAAC,YAAY,CAAC,KAAK,EAAE,UAAU;IAOrC,MAAM,CAAC,UAAU,CAAC,KAAK,EAAE,aAAa;IAwBtC,iBAAiB;IAgBjB,oBAAoB;IAWpB,IAAI,KAAK,WAER;IACD,IAAI,KAAK,CAAC,KAAK,QAAA,EAGd;IAED,IAAI,KAAK,WAER;IACD,IAAI,KAAK,CAAC,KAAK,QAAA,EAGd;IAED,IAAI,QAAQ,YAEX;IACD,IAAI,QAAQ,CAAC,KAAK,SAAA,EAajB;IAGD,IAAI,QAAQ,YAEX;IACD,IAAI,QAAQ,CAAC,KAAK,SAAA,EAKjB;IAQD,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM;IAQxC,eAAe,CAAC,IAAI,EAAE,MAAM;IAQ5B,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,OAAO,GAAG,OAAO;CAIxD"}
|
package/dist/types/index.d.ts
CHANGED
|
@@ -52,17 +52,6 @@ interface HTMLComboboxElement extends HTMLSelectElement {
|
|
|
52
52
|
removeEventListener<K extends keyof ComboboxEventMap>(type: K, listener: (this: HTMLComboboxElement, ev: ComboboxEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
|
53
53
|
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
|
|
54
54
|
}
|
|
55
|
-
interface ComboboxEvent extends Event {
|
|
56
|
-
readonly target: HTMLComboboxElement;
|
|
57
|
-
readonly currentTarget: HTMLComboboxElement;
|
|
58
|
-
}
|
|
59
|
-
interface ComboboxInputEvent extends InputEvent {
|
|
60
|
-
readonly target: HTMLComboboxElement;
|
|
61
|
-
readonly currentTarget: HTMLComboboxElement;
|
|
62
|
-
}
|
|
63
|
-
interface ComboboxFocusEvent extends FocusEvent {
|
|
64
|
-
readonly target: HTMLComboboxElement;
|
|
65
|
-
}
|
|
66
55
|
interface ComboboxEventMap extends HTMLElementEventMap {
|
|
67
56
|
"change": ComboboxEvent;
|
|
68
57
|
"blur": ComboboxFocusEvent;
|
|
@@ -74,7 +63,8 @@ interface ComboboxEventMap extends HTMLElementEventMap {
|
|
|
74
63
|
"selectionchange": ComboboxEvent;
|
|
75
64
|
"selectstart": ComboboxEvent;
|
|
76
65
|
}
|
|
77
|
-
|
|
66
|
+
/** Own attributes/properties of `<combo-box>`, shared by every JSX integration below. */
|
|
67
|
+
export interface ComboboxJsxAttributes {
|
|
78
68
|
/** The value of the internal input.
|
|
79
69
|
*
|
|
80
70
|
* The internal input is visible when either the `searchable` or `filterable` attribute is present.
|
|
@@ -120,94 +110,145 @@ interface ComboboxJsxAttributes {
|
|
|
120
110
|
required?: boolean;
|
|
121
111
|
disabled?: boolean;
|
|
122
112
|
}
|
|
123
|
-
interface ComboboxOptionJsxAttributes {
|
|
113
|
+
export interface ComboboxOptionJsxAttributes {
|
|
124
114
|
value: string;
|
|
125
115
|
label?: string;
|
|
126
116
|
selected?: boolean;
|
|
127
117
|
}
|
|
118
|
+
/**
|
|
119
|
+
* Generic HTML/JSX passthrough attributes (class, style, event handlers, `data-*`, `aria-*`, ...).
|
|
120
|
+
*
|
|
121
|
+
* These are intentionally framework-agnostic: they don't reference React's, Preact's, Vue's
|
|
122
|
+
* or Solid's own type packages, so this file never requires any of them to be installed just
|
|
123
|
+
* to be imported. Every framework below layers `ComboboxJsxAttributes`/`ComboboxOptionJsxAttributes`
|
|
124
|
+
* on top of this instead of that framework's own `HTMLAttributes` type.
|
|
125
|
+
*/
|
|
126
|
+
export interface ComboboxCommonAttributes {
|
|
127
|
+
id?: string;
|
|
128
|
+
class?: string;
|
|
129
|
+
className?: string;
|
|
130
|
+
style?: unknown;
|
|
131
|
+
slot?: string;
|
|
132
|
+
title?: string;
|
|
133
|
+
tabIndex?: number;
|
|
134
|
+
hidden?: boolean;
|
|
135
|
+
children?: unknown;
|
|
136
|
+
ref?: unknown;
|
|
137
|
+
key?: string | number;
|
|
138
|
+
onChange?: (event: ComboboxEvent) => void;
|
|
139
|
+
onInput?: (event: ComboboxInputEvent) => void;
|
|
140
|
+
onFocus?: (event: ComboboxFocusEvent) => void;
|
|
141
|
+
onBlur?: (event: ComboboxFocusEvent) => void;
|
|
142
|
+
onInvalid?: (event: ComboboxEvent) => void;
|
|
143
|
+
[key: `data-${string}`]: unknown;
|
|
144
|
+
[key: `aria-${string}`]: unknown;
|
|
145
|
+
[key: `on${string}`]: ((event: any) => void) | undefined;
|
|
146
|
+
}
|
|
128
147
|
declare global {
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
'box-tag': React.DetailedHTMLProps<React.HTMLAttributes<HTMLComboboxTagElement>, HTMLComboboxTagElement>;
|
|
134
|
-
}
|
|
148
|
+
interface HTMLElementTagNameMap {
|
|
149
|
+
'combo-box': HTMLComboboxElement;
|
|
150
|
+
'box-option': HTMLComboboxOptionElement;
|
|
151
|
+
'box-tag': HTMLComboboxTagElement;
|
|
135
152
|
}
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
'combo-box': React.DetailedHTMLProps<React.HTMLAttributes<HTMLComboboxElement> & ComboboxJsxAttributes, HTMLComboboxElement>;
|
|
140
|
-
'box-option': React.DetailedHTMLProps<React.HTMLAttributes<HTMLComboboxOptionElement> & ComboboxOptionJsxAttributes, HTMLComboboxOptionElement>;
|
|
141
|
-
'box-tag': React.DetailedHTMLProps<React.HTMLAttributes<HTMLComboboxTagElement>, HTMLComboboxTagElement>;
|
|
142
|
-
}
|
|
143
|
-
}
|
|
153
|
+
interface ComboboxEvent extends Event {
|
|
154
|
+
readonly target: HTMLComboboxElement;
|
|
155
|
+
readonly currentTarget: HTMLComboboxElement;
|
|
144
156
|
}
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
157
|
+
interface ComboboxInputEvent extends InputEvent {
|
|
158
|
+
readonly target: HTMLComboboxElement;
|
|
159
|
+
readonly currentTarget: HTMLComboboxElement;
|
|
160
|
+
}
|
|
161
|
+
interface ComboboxFocusEvent extends FocusEvent {
|
|
162
|
+
readonly target: HTMLComboboxElement;
|
|
163
|
+
}
|
|
164
|
+
type ComboboxElementAttributes = ComboboxCommonAttributes & ComboboxJsxAttributes;
|
|
165
|
+
type ComboboxOptionElementAttributes = ComboboxCommonAttributes & ComboboxOptionJsxAttributes;
|
|
166
|
+
type ComboboxTagElementAttributes = ComboboxCommonAttributes;
|
|
167
|
+
namespace JSX {
|
|
168
|
+
interface IntrinsicElements {
|
|
169
|
+
'combo-box': ComboboxElementAttributes;
|
|
170
|
+
'box-option': ComboboxOptionElementAttributes;
|
|
171
|
+
'box-tag': ComboboxTagElementAttributes;
|
|
152
172
|
}
|
|
153
173
|
}
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
174
|
+
}
|
|
175
|
+
export type { ComboboxEvent, ComboboxInputEvent, ComboboxFocusEvent, ComboboxElementAttributes, ComboboxOptionElementAttributes, ComboboxTagElementAttributes, };
|
|
176
|
+
declare module 'react' {
|
|
177
|
+
namespace JSX {
|
|
178
|
+
interface IntrinsicElements {
|
|
179
|
+
'combo-box': ComboboxElementAttributes;
|
|
180
|
+
'box-option': ComboboxOptionElementAttributes;
|
|
181
|
+
'box-tag': ComboboxTagElementAttributes;
|
|
161
182
|
}
|
|
162
183
|
}
|
|
163
|
-
|
|
184
|
+
}
|
|
185
|
+
declare module 'react/jsx-runtime' {
|
|
186
|
+
namespace JSX {
|
|
164
187
|
interface IntrinsicElements {
|
|
165
|
-
'combo-box':
|
|
166
|
-
'box-option':
|
|
167
|
-
'box-tag':
|
|
188
|
+
'combo-box': ComboboxElementAttributes;
|
|
189
|
+
'box-option': ComboboxOptionElementAttributes;
|
|
190
|
+
'box-tag': ComboboxTagElementAttributes;
|
|
168
191
|
}
|
|
169
192
|
}
|
|
170
193
|
}
|
|
171
|
-
declare module 'react' {
|
|
194
|
+
declare module 'react/jsx-dev-runtime' {
|
|
172
195
|
namespace JSX {
|
|
173
196
|
interface IntrinsicElements {
|
|
174
|
-
'combo-box':
|
|
175
|
-
'box-option':
|
|
176
|
-
'box-tag':
|
|
197
|
+
'combo-box': ComboboxElementAttributes;
|
|
198
|
+
'box-option': ComboboxOptionElementAttributes;
|
|
199
|
+
'box-tag': ComboboxTagElementAttributes;
|
|
177
200
|
}
|
|
178
201
|
}
|
|
179
202
|
}
|
|
180
203
|
declare module 'preact' {
|
|
181
204
|
namespace JSX {
|
|
182
205
|
interface IntrinsicElements {
|
|
183
|
-
'combo-box':
|
|
184
|
-
'box-option':
|
|
185
|
-
'box-tag':
|
|
206
|
+
'combo-box': ComboboxElementAttributes;
|
|
207
|
+
'box-option': ComboboxOptionElementAttributes;
|
|
208
|
+
'box-tag': ComboboxTagElementAttributes;
|
|
186
209
|
}
|
|
187
210
|
}
|
|
188
211
|
namespace JSXInternal {
|
|
189
212
|
interface IntrinsicElements {
|
|
190
|
-
'combo-box':
|
|
191
|
-
'box-option':
|
|
192
|
-
'box-tag':
|
|
213
|
+
'combo-box': ComboboxElementAttributes;
|
|
214
|
+
'box-option': ComboboxOptionElementAttributes;
|
|
215
|
+
'box-tag': ComboboxTagElementAttributes;
|
|
216
|
+
}
|
|
217
|
+
}
|
|
218
|
+
}
|
|
219
|
+
declare module 'preact/jsx-runtime' {
|
|
220
|
+
namespace JSX {
|
|
221
|
+
interface IntrinsicElements {
|
|
222
|
+
'combo-box': ComboboxElementAttributes;
|
|
223
|
+
'box-option': ComboboxOptionElementAttributes;
|
|
224
|
+
'box-tag': ComboboxTagElementAttributes;
|
|
193
225
|
}
|
|
194
226
|
}
|
|
195
227
|
}
|
|
196
228
|
declare module 'solid-js' {
|
|
197
229
|
namespace JSX {
|
|
198
230
|
interface IntrinsicElements {
|
|
199
|
-
'combo-box':
|
|
200
|
-
'box-option':
|
|
201
|
-
'box-tag':
|
|
231
|
+
'combo-box': ComboboxElementAttributes;
|
|
232
|
+
'box-option': ComboboxOptionElementAttributes;
|
|
233
|
+
'box-tag': ComboboxTagElementAttributes;
|
|
234
|
+
}
|
|
235
|
+
}
|
|
236
|
+
}
|
|
237
|
+
declare module 'solid-js/jsx-runtime' {
|
|
238
|
+
namespace JSX {
|
|
239
|
+
interface IntrinsicElements {
|
|
240
|
+
'combo-box': ComboboxElementAttributes;
|
|
241
|
+
'box-option': ComboboxOptionElementAttributes;
|
|
242
|
+
'box-tag': ComboboxTagElementAttributes;
|
|
202
243
|
}
|
|
203
244
|
}
|
|
204
245
|
}
|
|
205
246
|
declare module 'vue' {
|
|
206
247
|
namespace JSX {
|
|
207
248
|
interface IntrinsicElements {
|
|
208
|
-
'combo-box':
|
|
209
|
-
'box-option':
|
|
210
|
-
'box-tag':
|
|
249
|
+
'combo-box': ComboboxElementAttributes;
|
|
250
|
+
'box-option': ComboboxOptionElementAttributes;
|
|
251
|
+
'box-tag': ComboboxTagElementAttributes;
|
|
211
252
|
}
|
|
212
253
|
}
|
|
213
254
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "html-combobox-element",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.3",
|
|
4
4
|
"description": "The combo-box web-component & customizable select polyfill",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"scripts": {
|
|
@@ -42,5 +42,12 @@
|
|
|
42
42
|
],
|
|
43
43
|
"main": "dist/cjs/index.js",
|
|
44
44
|
"module": "dist/esm/index.js",
|
|
45
|
-
"types": "dist/types/index.d.ts"
|
|
45
|
+
"types": "dist/types/index.d.ts",
|
|
46
|
+
"exports": {
|
|
47
|
+
".": {
|
|
48
|
+
"types": "./dist/types/index.d.ts",
|
|
49
|
+
"require": "./dist/cjs/index.js",
|
|
50
|
+
"import": "./dist/esm/index.js"
|
|
51
|
+
}
|
|
52
|
+
}
|
|
46
53
|
}
|
package/combobox-skill/SKILL.md
DELETED
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
name: HTMLComboboxElement
|
|
3
|
-
description: This element provides both "dropdown" or "combobox" functionality wia HTMLSelectElement compatible API, and it may be fully customized.
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
## References
|
|
7
|
-
- Consider that <combo-box> is the same as <select> (HTMLSelectElement), but uses <box-option> instead of <option>.
|
|
8
|
-
- Consider that <box-option> is the same as <option> (HTMLOptionElement), just fully customizable.
|
|
9
|
-
- Note that browsers interpret <combo-box> as a REAL form element.
|
|
10
|
-
- Additions that extends the <combo-box> "dropdown" functionality with "combobox" functionality are:
|
|
11
|
-
- attributes:
|
|
12
|
-
- filterable: If present, the search input in picker is shown, and during typing, <box-option>'s which textContent didn't match the input value are hidden.
|
|
13
|
-
- searchable: If present, the search input in picker is shown, to implement custom logic filtering, like server search, fuzzy matching, etc.
|
|
14
|
-
- clearable: If present, shows a remove button on each selected tag. If multiple is present, an additional clear-all button is shown.
|
|
15
|
-
- query: Controls the picker's search input value.
|
|
16
|
-
- events:
|
|
17
|
-
- input: Fires when user typing something in the picker search input.
|
|
18
|
-
- close: Fires when the picker closes.
|
|
19
|
-
- search: Fires when user presses Enter when the picker's search input is in focus.
|
|
20
|
-
- properties:
|
|
21
|
-
- changed: Readonly, boolean. Indicates whether the value has been changed after the picker has been opened.
|
|
22
|
-
- valueAsArray: Readonly, Array<string>. An array of value attributes from all selected <box-option> elements.
|
|
23
|
-
- Typescript:
|
|
24
|
-
- The HTMLComboboxElement, ComboboxEvent and ComboboxInputEvent interfaces are globally available and don't require import.
|
|
25
|
-
- The <combo-box>, <box-option> and <box-tag> are declared globally as valid JSX tags including props.
|
|
26
|
-
- Only if React < 19 is used, read the ./legacy-react-restrictions.md
|
|
27
|
-
- Only if you need fully custom <box-tag>, read the ./custom-box-tag.md
|
|
28
|
-
- Only if you need to customize the <combo-box>, read the ./customization.md
|
|
29
|
-
- Only if you need to share the project styles to the <combo-box>, invoke the ./share-styles.md skill.
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
## Constraints
|
|
33
|
-
- Multiple <box-tag> descendants are prohibited.
|
|
34
|
-
- Descendant <box-tag> without own descendant with attribute `part="clear-tag"` is prohibited.
|
|
35
|
-
- Changing the <combo-box> source code is strictly prohibited!
|
|
36
|
-
|
|
37
|
-
## Requirements
|
|
38
|
-
- Direct descendants of <combo-box> may be ONLY:
|
|
39
|
-
- <box-tag>: optional, max 1, must be first if present.
|
|
40
|
-
- <box-option>: zero or more, any position.
|
|
41
|
-
- <optgroup>: zero or more, any position with only <box-option> as direct descendants.
|
|
42
|
-
- The <box-tag> must be used only if a fully custom tag is needed.
|
|
43
|
-
|
|
44
|
-
## Usage success criteria
|
|
45
|
-
- The constraints listed above are not violated.
|
|
46
|
-
- The requirements listed above are met.
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
name: customization
|
|
3
|
-
description: Use this when you need fully custom tags for <combo-box> element.
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
## References
|
|
7
|
-
- Note that <box-tag> is a container with named slots.
|
|
8
|
-
- Note that <box-option> provides content for <box-tag> slots.
|
|
9
|
-
|
|
10
|
-
## Requirements
|
|
11
|
-
- The <box-option> must still use part attribute for customization.
|
|
12
|
-
- The <box-tag> slots must also define their part attribute for customization.
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
name: customization
|
|
3
|
-
description: Use this when you need to write CSS to customize the <combo-box> element.
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
## References
|
|
7
|
-
- The <combo-box> is a web-component with shadow root.
|
|
8
|
-
- The <combo-box> exposed parts are:
|
|
9
|
-
- internal: The container that arrange shadow root descendants.
|
|
10
|
-
- placeholder: Tag: <div>. Shown when there are no selected tags.
|
|
11
|
-
- tags: Tag: <div>. Selected tag's container.
|
|
12
|
-
- clear-all: Tag: <button>.
|
|
13
|
-
- dropdown: Tag: <div>. The <combo-box> picker implemented with Popover API.
|
|
14
|
-
- search-input: Tag: <input>. The picker's search input.
|
|
15
|
-
- options: Tag: <div>. A scrollable container for <box-option>'s.
|
|
16
|
-
- tag: Represent <box-tag>.
|
|
17
|
-
- tag-label: Tag: <span>. Alias to <box-tag> > tag-label. Displays the selected <box-option> label value.
|
|
18
|
-
- clear-tag: Tag: <div> with tabindex="0". Alias to <box-tag> > clear-tag.
|
|
19
|
-
- option: Represent <box-option>.
|
|
20
|
-
- option selected: Represent selected <box-option>.
|
|
21
|
-
|
|
22
|
-
## Constraints
|
|
23
|
-
- Interfere the <combo-box> styles without an explicit request from the user is strictly prohibited.
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
name: legacy-react-restrictions
|
|
2
|
-
description: Use this when you need to use the <combo-box> in a legacy (i.e. less that 19v) React environment.
|
|
3
|
-
---
|
|
4
|
-
|
|
5
|
-
## References
|
|
6
|
-
- Note React <19 web-components events listeners limitations.
|
|
7
|
-
- Note that there are no special requirements for working with attributes.
|
|
8
|
-
|
|
9
|
-
## Requirements
|
|
10
|
-
- The legacy React event listener attachment must be used.
|
|
11
|
-
|
|
12
|
-
## Constraints
|
|
13
|
-
- Creating a wrapper around <combo-box> without an explicit request from the user is strictly prohibited.
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
name: share-styles
|
|
3
|
-
description: Use this, when you need to share document/page styles to the <combo-box> shadow root.
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
## References
|
|
7
|
-
- The <combo-box> uses a constructed style sheet and shares it across all instances.
|
|
8
|
-
- Style sharing is achieved using one or both of two HTMLComboboxElement static methods:
|
|
9
|
-
- loadCssFromUrls(urls: string[]): adds urls as CSS @import directives to the constructed StyleSheet.
|
|
10
|
-
- loadCssFromDocumentStyleSheets(): the method internally WAITS until document fully load, and ONLY then inserts all document.styleSheets CSS rules into constructed StyleSheet.
|
|
11
|
-
|
|
12
|
-
## Requirements
|
|
13
|
-
- Styles must be shared once in the App root.
|
|
14
|
-
- The CSSStyleSheet.insertRule() parsing limitations must be taken into account.
|
|
15
|
-
|
|
16
|
-
## Constraints
|
|
17
|
-
- Sharing styles without an explicit request from the user is strictly prohibited.
|