@duro-app/ui 5.0.0 → 5.2.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.
- package/dist/Table-C70zdSkM.js +1419 -0
- package/dist/Table-C70zdSkM.js.map +1 -0
- package/dist/components/Button/Button.d.ts +11 -2
- package/dist/components/Button/Button.d.ts.map +1 -1
- package/dist/components/Button/Button.stories.d.ts +1 -0
- package/dist/components/Button/Button.stories.d.ts.map +1 -1
- package/dist/components/Card/Card.stories.d.ts.map +1 -1
- package/dist/components/Combobox/Combobox.d.ts +1 -1
- package/dist/components/Combobox/Combobox.d.ts.map +1 -1
- package/dist/components/Combobox/styles.css.d.ts +0 -64
- package/dist/components/Combobox/styles.css.d.ts.map +1 -1
- package/dist/components/Dialog/Dialog.d.ts +11 -3
- package/dist/components/Dialog/Dialog.d.ts.map +1 -1
- package/dist/components/Dialog/Dialog.stories.d.ts +4 -0
- package/dist/components/Dialog/Dialog.stories.d.ts.map +1 -1
- package/dist/components/Dialog/styles.css.d.ts +1 -0
- package/dist/components/Dialog/styles.css.d.ts.map +1 -1
- package/dist/components/DragDrop/styles.css.d.ts +10 -2
- package/dist/components/DragDrop/styles.css.d.ts.map +1 -1
- package/dist/components/Grid/Grid.d.ts +11 -2
- package/dist/components/Grid/Grid.d.ts.map +1 -1
- package/dist/components/Grid/Grid.stories.d.ts +2 -0
- package/dist/components/Grid/Grid.stories.d.ts.map +1 -1
- package/dist/components/Grid/styles.css.d.ts +2 -2
- package/dist/components/Grid/styles.css.d.ts.map +1 -1
- package/dist/components/Input/Input.d.ts +6 -1
- package/dist/components/Input/Input.d.ts.map +1 -1
- package/dist/components/Input/Input.meta.d.ts.map +1 -1
- package/dist/components/Input/Input.stories.d.ts +1 -0
- package/dist/components/Input/Input.stories.d.ts.map +1 -1
- package/dist/components/Input/styles.css.d.ts +18 -0
- package/dist/components/Input/styles.css.d.ts.map +1 -1
- package/dist/components/InputGroup/InputGroup.d.ts +6 -1
- package/dist/components/InputGroup/InputGroup.d.ts.map +1 -1
- package/dist/components/InputGroup/InputGroup.stories.d.ts +1 -0
- package/dist/components/InputGroup/InputGroup.stories.d.ts.map +1 -1
- package/dist/components/Listbox/Listbox.d.ts +75 -0
- package/dist/components/Listbox/Listbox.d.ts.map +1 -0
- package/dist/components/Listbox/Listbox.meta.d.ts +3 -0
- package/dist/components/Listbox/Listbox.meta.d.ts.map +1 -0
- package/dist/components/Listbox/Listbox.stories.d.ts +7 -0
- package/dist/components/Listbox/Listbox.stories.d.ts.map +1 -0
- package/dist/components/Listbox/styles.css.d.ts +75 -0
- package/dist/components/Listbox/styles.css.d.ts.map +1 -0
- package/dist/components/Menu/Menu.d.ts +18 -5
- package/dist/components/Menu/Menu.d.ts.map +1 -1
- package/dist/components/Menu/Menu.meta.d.ts.map +1 -1
- package/dist/components/Menu/Menu.stories.d.ts +7 -0
- package/dist/components/Menu/Menu.stories.d.ts.map +1 -1
- package/dist/components/Menu/MenuContext.d.ts +3 -0
- package/dist/components/Menu/MenuContext.d.ts.map +1 -1
- package/dist/components/Menu/styles.css.d.ts +24 -15
- package/dist/components/Menu/styles.css.d.ts.map +1 -1
- package/dist/components/Menu/useMenuRoot.d.ts +14 -1
- package/dist/components/Menu/useMenuRoot.d.ts.map +1 -1
- package/dist/components/StatusIcon/StatusIcon.stories.d.ts.map +1 -1
- package/dist/components/Table/Table.stories.d.ts +1 -0
- package/dist/components/Table/Table.stories.d.ts.map +1 -1
- package/dist/components/TextLink/TextLink.d.ts +24 -0
- package/dist/components/TextLink/TextLink.d.ts.map +1 -0
- package/dist/components/TextLink/TextLink.meta.d.ts +3 -0
- package/dist/components/TextLink/TextLink.meta.d.ts.map +1 -0
- package/dist/components/TextLink/TextLink.stories.d.ts +9 -0
- package/dist/components/TextLink/TextLink.stories.d.ts.map +1 -0
- package/dist/components/TextLink/styles.css.d.ts +28 -0
- package/dist/components/TextLink/styles.css.d.ts.map +1 -0
- package/dist/components/ThemeProvider/ThemeProvider.stories.d.ts +1 -0
- package/dist/components/ThemeProvider/ThemeProvider.stories.d.ts.map +1 -1
- package/dist/components/VisuallyHidden/VisuallyHidden.d.ts +14 -0
- package/dist/components/VisuallyHidden/VisuallyHidden.d.ts.map +1 -0
- package/dist/components/VisuallyHidden/VisuallyHidden.meta.d.ts +3 -0
- package/dist/components/VisuallyHidden/VisuallyHidden.meta.d.ts.map +1 -0
- package/dist/components/VisuallyHidden/VisuallyHidden.stories.d.ts +7 -0
- package/dist/components/VisuallyHidden/VisuallyHidden.stories.d.ts.map +1 -0
- package/dist/docs/FlexGrow.stories.d.ts +7 -0
- package/dist/docs/FlexGrow.stories.d.ts.map +1 -0
- package/dist/index.css +1 -1
- package/dist/index.d.ts +5 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2986 -2821
- package/dist/index.js.map +1 -1
- package/dist/index.native.d.ts +1 -0
- package/dist/index.native.d.ts.map +1 -1
- package/dist/shared/length.d.ts +14 -9
- package/dist/shared/length.d.ts.map +1 -1
- package/dist/shared/length.typecheck.d.ts +3 -0
- package/dist/shared/length.typecheck.d.ts.map +1 -1
- package/dist/styles/visually-hidden.css.d.ts +6 -0
- package/dist/styles/visually-hidden.css.d.ts.map +1 -1
- package/dist/table.js +1 -1
- package/package.json +2 -2
- package/src/components/Button/Button.stories.tsx +41 -0
- package/src/components/Button/Button.tsx +16 -1
- package/src/components/Card/Card.stories.tsx +2 -1
- package/src/components/Combobox/Combobox.tsx +25 -79
- package/src/components/Combobox/styles.css.ts +0 -74
- package/src/components/Dialog/Dialog.meta.ts +1 -1
- package/src/components/Dialog/Dialog.stories.tsx +109 -3
- package/src/components/Dialog/Dialog.tsx +63 -9
- package/src/components/Dialog/styles.css.ts +2 -0
- package/src/components/DragDrop/styles.css.ts +16 -3
- package/src/components/Grid/Grid.meta.ts +1 -1
- package/src/components/Grid/Grid.stories.tsx +53 -1
- package/src/components/Grid/Grid.tsx +23 -11
- package/src/components/Grid/styles.css.ts +3 -2
- package/src/components/Input/Input.meta.ts +10 -3
- package/src/components/Input/Input.stories.tsx +52 -2
- package/src/components/Input/Input.tsx +12 -3
- package/src/components/Input/styles.css.ts +29 -0
- package/src/components/InputGroup/InputGroup.stories.tsx +20 -0
- package/src/components/InputGroup/InputGroup.tsx +20 -2
- package/src/components/Listbox/Listbox.meta.ts +52 -0
- package/src/components/Listbox/Listbox.stories.tsx +170 -0
- package/src/components/Listbox/Listbox.tsx +278 -0
- package/src/components/Listbox/styles.css.ts +89 -0
- package/src/components/Menu/Menu.meta.ts +2 -1
- package/src/components/Menu/Menu.stories.tsx +289 -8
- package/src/components/Menu/Menu.tsx +100 -29
- package/src/components/Menu/MenuContext.ts +3 -0
- package/src/components/Menu/styles.css.ts +31 -15
- package/src/components/Menu/useMenuRoot.ts +105 -48
- package/src/components/StatusIcon/StatusIcon.stories.tsx +2 -2
- package/src/components/Table/Table.stories.tsx +39 -0
- package/src/components/TextLink/TextLink.meta.ts +33 -0
- package/src/components/TextLink/TextLink.stories.tsx +63 -0
- package/src/components/TextLink/TextLink.tsx +46 -0
- package/src/components/TextLink/styles.css.ts +58 -0
- package/src/components/ThemeProvider/ThemeProvider.stories.tsx +50 -0
- package/src/components/VisuallyHidden/VisuallyHidden.meta.ts +19 -0
- package/src/components/VisuallyHidden/VisuallyHidden.stories.tsx +30 -0
- package/src/components/VisuallyHidden/VisuallyHidden.tsx +22 -0
- package/src/docs/FlexGrow.stories.tsx +83 -0
- package/src/index.native.ts +1 -0
- package/src/index.ts +5 -0
- package/src/shared/length.ts +29 -10
- package/src/shared/length.typecheck.tsx +9 -0
- package/src/styles/visually-hidden.css.ts +8 -0
- package/dist/Table-BKN_d-mp.js +0 -1192
- package/dist/Table-BKN_d-mp.js.map +0 -1
|
@@ -42,6 +42,7 @@ export declare const styles: Readonly<{
|
|
|
42
42
|
readonly flexDirection: css.StyleXClassNameFor<"flexDirection", "column">;
|
|
43
43
|
readonly overflow: css.StyleXClassNameFor<"overflow", "hidden">;
|
|
44
44
|
readonly pointerEvents: css.StyleXClassNameFor<"pointerEvents", "auto">;
|
|
45
|
+
readonly outlineStyle: css.StyleXClassNameFor<"outlineStyle", "none">;
|
|
45
46
|
readonly borderWidth: css.StyleXClassNameFor<"borderWidth", string>;
|
|
46
47
|
readonly borderStyle: css.StyleXClassNameFor<"borderStyle", "solid">;
|
|
47
48
|
readonly borderColor: css.StyleXClassNameFor<"borderColor", string>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/styles.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AASpC,eAAO,MAAM,MAAM
|
|
1
|
+
{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/styles.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AASpC,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsMjB,CAAA"}
|
|
@@ -22,11 +22,19 @@ export declare const styles: Readonly<{
|
|
|
22
22
|
readonly transitionTimingFunction: css.StyleXClassNameFor<"transitionTimingFunction", string>;
|
|
23
23
|
}>;
|
|
24
24
|
readonly zoneReady: Readonly<{
|
|
25
|
-
readonly boxShadow: css.StyleXClassNameFor<"boxShadow",
|
|
25
|
+
readonly boxShadow: css.StyleXClassNameFor<"boxShadow", string>;
|
|
26
|
+
readonly outlineStyle: css.StyleXClassNameFor<"outlineStyle", "solid">;
|
|
27
|
+
readonly outlineWidth: css.StyleXClassNameFor<"outlineWidth", string>;
|
|
28
|
+
readonly outlineColor: css.StyleXClassNameFor<"outlineColor", "transparent">;
|
|
29
|
+
readonly outlineOffset: css.StyleXClassNameFor<"outlineOffset", `calc(-1 * ${css.StyleXVar<string>})`>;
|
|
26
30
|
}>;
|
|
27
31
|
readonly zoneOver: Readonly<{
|
|
28
|
-
readonly boxShadow: css.StyleXClassNameFor<"boxShadow",
|
|
32
|
+
readonly boxShadow: css.StyleXClassNameFor<"boxShadow", string>;
|
|
29
33
|
readonly backgroundColor: css.StyleXClassNameFor<"backgroundColor", string>;
|
|
34
|
+
readonly outlineStyle: css.StyleXClassNameFor<"outlineStyle", "solid">;
|
|
35
|
+
readonly outlineWidth: css.StyleXClassNameFor<"outlineWidth", string>;
|
|
36
|
+
readonly outlineColor: css.StyleXClassNameFor<"outlineColor", "transparent">;
|
|
37
|
+
readonly outlineOffset: css.StyleXClassNameFor<"outlineOffset", `calc(-1 * ${css.StyleXVar<string>})`>;
|
|
30
38
|
}>;
|
|
31
39
|
readonly ghost: Readonly<{
|
|
32
40
|
readonly position: css.StyleXClassNameFor<"position", "fixed">;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/DragDrop/styles.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;
|
|
1
|
+
{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/DragDrop/styles.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAOpC,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4DjB,CAAA"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
2
|
import { GridColumns } from './columns';
|
|
3
3
|
import { SpacingToken } from '@duro-app/tokens/keys';
|
|
4
|
-
import { Length } from '../../shared/length';
|
|
4
|
+
import { GridTrack, Length } from '../../shared/length';
|
|
5
5
|
export type GridLayout = 'split' | 'split-wide';
|
|
6
6
|
interface GridProps {
|
|
7
7
|
gap?: SpacingToken;
|
|
@@ -23,8 +23,17 @@ interface GridProps {
|
|
|
23
23
|
* rather than when the window does. Wins over `columns` / `minColumnWidth`.
|
|
24
24
|
*/
|
|
25
25
|
layout?: GridLayout;
|
|
26
|
+
/**
|
|
27
|
+
* An explicit track list, for columns that are not all fractions: a size
|
|
28
|
+
* token for a fixed track (`['1fr', 'asideW']`), or `minmax()` /
|
|
29
|
+
* `fit-content()` of tokens and fractions (`'minmax(gridColXs, 1fr)'`).
|
|
30
|
+
* A px is a type error. Web only — on native it falls back to equal
|
|
31
|
+
* columns, one per track. Wins over `columns` / `minColumnWidth`; `layout`
|
|
32
|
+
* wins over it.
|
|
33
|
+
*/
|
|
34
|
+
tracks?: readonly GridTrack[];
|
|
26
35
|
children: ReactNode;
|
|
27
36
|
}
|
|
28
|
-
export declare function Grid({ gap, columns, minColumnWidth, layout, children }: GridProps): import("react/jsx-runtime").JSX.Element;
|
|
37
|
+
export declare function Grid({ gap, columns, minColumnWidth, layout, tracks, children }: GridProps): import("react/jsx-runtime").JSX.Element;
|
|
29
38
|
export {};
|
|
30
39
|
//# sourceMappingURL=Grid.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../src/components/Grid/Grid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,KAAK,SAAS,EAAC,MAAM,OAAO,CAAA;AAI9C,OAAO,EAAuD,KAAK,WAAW,EAAC,MAAM,WAAW,CAAA;AAChG,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,uBAAuB,CAAA;AACvD,OAAO,
|
|
1
|
+
{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../src/components/Grid/Grid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,KAAK,SAAS,EAAC,MAAM,OAAO,CAAA;AAI9C,OAAO,EAAuD,KAAK,WAAW,EAAC,MAAM,WAAW,CAAA;AAChG,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,uBAAuB,CAAA;AACvD,OAAO,EAA8B,KAAK,SAAS,EAAE,KAAK,MAAM,EAAC,MAAM,qBAAqB,CAAA;AAE5F,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,YAAY,CAAA;AAE/C,UAAU,SAAS;IACjB,GAAG,CAAC,EAAE,YAAY,CAAA;IAClB;;+DAE2D;IAC3D,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB;;;oCAGgC;IAChC,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,SAAS,SAAS,EAAE,CAAA;IAC7B,QAAQ,EAAE,SAAS,CAAA;CACpB;AA0DD,wBAAgB,IAAI,CAAC,EAAC,GAAU,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAC,EAAE,SAAS,2CA8B9F"}
|
|
@@ -23,4 +23,6 @@ export declare const NestedSplits: Story;
|
|
|
23
23
|
*/
|
|
24
24
|
export declare const WeightedColumns: Story;
|
|
25
25
|
export declare const WithContainerQuery: Story;
|
|
26
|
+
export declare const TracksWithAside: Story;
|
|
27
|
+
export declare const TracksWithMinmax: Story;
|
|
26
28
|
//# sourceMappingURL=Grid.stories.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Grid.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Grid/Grid.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,kBAAkB,CAAA;AAGpD,OAAO,EAAC,IAAI,EAAC,MAAM,QAAQ,CAAA;
|
|
1
|
+
{"version":3,"file":"Grid.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Grid/Grid.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,kBAAkB,CAAA;AAGpD,OAAO,EAAC,IAAI,EAAC,MAAM,QAAQ,CAAA;AAU3B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAgB3B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AA2BlC,eAAO,MAAM,YAAY,EAAE,KAe1B,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAOxB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAiBnB,CAAA;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY,EAAE,KAqC1B,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,eAAe,EAAE,KAmB7B,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KAsBhC,CAAA;AAID,eAAO,MAAM,eAAe,EAAE,KAmB7B,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAgB9B,CAAA"}
|
|
@@ -28,10 +28,10 @@ export declare const styles: Readonly<{
|
|
|
28
28
|
readonly containerType: css.StyleXClassNameFor<"containerType", "inline-size">;
|
|
29
29
|
}>;
|
|
30
30
|
readonly split: Readonly<{
|
|
31
|
-
readonly gridTemplateColumns: css.StyleXClassNameFor<"gridTemplateColumns", "1fr" |
|
|
31
|
+
readonly gridTemplateColumns: css.StyleXClassNameFor<"gridTemplateColumns", "1fr" | `minmax(${css.StyleXVar<string>}, 1fr) minmax(0, 2fr)`>;
|
|
32
32
|
}>;
|
|
33
33
|
readonly splitWide: Readonly<{
|
|
34
|
-
readonly gridTemplateColumns: css.StyleXClassNameFor<"gridTemplateColumns", "1fr" |
|
|
34
|
+
readonly gridTemplateColumns: css.StyleXClassNameFor<"gridTemplateColumns", "1fr" | `minmax(${css.StyleXVar<string>}, 1fr) minmax(0, 3fr)`>;
|
|
35
35
|
}>;
|
|
36
36
|
readonly template: (tracks: string) => readonly [Readonly<{
|
|
37
37
|
gridTemplateColumns: css.StyleXClassNameFor<"gridTemplateColumns", string>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/Grid/styles.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;
|
|
1
|
+
{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/Grid/styles.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAepC,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+FjB,CAAA"}
|
|
@@ -1,8 +1,13 @@
|
|
|
1
1
|
import { html } from 'react-strict-dom';
|
|
2
2
|
type StrictInputProps = React.ComponentProps<typeof html.input>;
|
|
3
3
|
export type InputType = NonNullable<StrictInputProps['type']>;
|
|
4
|
-
export type InputVariant = 'default' | 'error';
|
|
4
|
+
export type InputVariant = 'default' | 'error' | 'ghost';
|
|
5
5
|
interface InputProps {
|
|
6
|
+
/**
|
|
7
|
+
* `ghost` reads as text until hovered or focused — only for inline edit
|
|
8
|
+
* where a visible label names the field (Field.Label). It shows the error
|
|
9
|
+
* state when the Field is invalid.
|
|
10
|
+
*/
|
|
6
11
|
variant?: InputVariant;
|
|
7
12
|
/** Orthogonal to variant — `mono` keeps the error border but uses the
|
|
8
13
|
* monospace family (slugs, identifiers, hashes). */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,kBAAkB,CAAA;AAKrC,KAAK,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,CAAA;AAC/D,MAAM,MAAM,SAAS,GAAG,WAAW,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,CAAA;AAE7D,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,kBAAkB,CAAA;AAKrC,KAAK,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,CAAA;AAC/D,MAAM,MAAM,SAAS,GAAG,WAAW,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,CAAA;AAE7D,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAA;AAExD,UAAU,UAAU;IAClB;;;;OAIG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB;yDACqD;IACrD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;sEACkE;IAClE,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,6EAA6E;IAC7E,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACrB,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACrB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAA;IACxF,+CAA+C;IAC/C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EACT,IAAI,GACJ,KAAK,GACL,OAAO,GACP,UAAU,GACV,kBAAkB,GAClB,cAAc,GACd,MAAM,GACN,KAAK,GACL,KAAK,CAAA;IACT,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,gEAAgE;IAChE,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,uEAAuE;IACvE,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IAC3D,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IACzD;qDACiD;IACjD,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IAC9D,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IAC5D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAClC;AAED,wBAAgB,KAAK,CAAC,EACpB,OAAmB,EACnB,IAAI,EACJ,IAAa,EACb,EAAE,EACF,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAS,EACT,GAAG,EACH,GAAG,EACH,IAAI,EACJ,SAAS,EACT,IAAI,EACJ,OAAO,EACP,YAAY,EACZ,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,YAAY,EAAE,SAAS,EACvB,kBAAkB,EAAE,eAAe,EACnC,QAAQ,EACR,MAAM,EACN,OAAO,EACP,SAAS,EACT,OAAO,EACP,GAAG,GACJ,EAAE,UAAU,2CAiEZ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.meta.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.meta.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAA;AAEpD,eAAO,MAAM,IAAI,EAAE,
|
|
1
|
+
{"version":3,"file":"Input.meta.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.meta.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAA;AAEpD,eAAO,MAAM,IAAI,EAAE,aA8BlB,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,kBAAkB,CAAA;AAGpD,OAAO,EAAC,KAAK,EAAC,MAAM,SAAS,CAAA;
|
|
1
|
+
{"version":3,"file":"Input.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,kBAAkB,CAAA;AAGpD,OAAO,EAAC,KAAK,EAAC,MAAM,SAAS,CAAA;AAM7B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAiB5B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,KAAK,CAAC,CAAA;AAEnC,eAAO,MAAM,OAAO,EAAE,KAWrB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAc5B,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAStB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAA;AAMD,eAAO,MAAM,WAAW,EAAE,KAiBzB,CAAA;AAID,eAAO,MAAM,eAAe,EAAE,KAqC7B,CAAA"}
|
|
@@ -28,6 +28,24 @@ export declare const styles: Readonly<{
|
|
|
28
28
|
readonly error: Readonly<{
|
|
29
29
|
readonly borderColor: css.StyleXClassNameFor<"borderColor", string>;
|
|
30
30
|
}>;
|
|
31
|
+
readonly ghost: Readonly<{
|
|
32
|
+
readonly backgroundColor: css.StyleXClassNameFor<"backgroundColor", "transparent">;
|
|
33
|
+
readonly paddingTop: css.StyleXClassNameFor<"paddingTop", string>;
|
|
34
|
+
readonly paddingBottom: css.StyleXClassNameFor<"paddingBottom", string>;
|
|
35
|
+
readonly paddingLeft: css.StyleXClassNameFor<"paddingLeft", string>;
|
|
36
|
+
readonly paddingRight: css.StyleXClassNameFor<"paddingRight", string>;
|
|
37
|
+
readonly marginLeft: css.StyleXClassNameFor<"marginLeft", `calc(-1 * ${css.StyleXVar<string>})`>;
|
|
38
|
+
readonly borderColor: css.StyleXClassNameFor<"borderColor", string>;
|
|
39
|
+
}>;
|
|
40
|
+
readonly ghostError: Readonly<{
|
|
41
|
+
readonly backgroundColor: css.StyleXClassNameFor<"backgroundColor", string>;
|
|
42
|
+
readonly borderColor: css.StyleXClassNameFor<"borderColor", string>;
|
|
43
|
+
}>;
|
|
44
|
+
readonly ghostDisabled: Readonly<{
|
|
45
|
+
readonly color: css.StyleXClassNameFor<"color", string>;
|
|
46
|
+
readonly cursor: css.StyleXClassNameFor<"cursor", "not-allowed">;
|
|
47
|
+
readonly borderColor: css.StyleXClassNameFor<"borderColor", "transparent">;
|
|
48
|
+
}>;
|
|
31
49
|
readonly inGroup: Readonly<{
|
|
32
50
|
readonly borderWidth: css.StyleXClassNameFor<"borderWidth", 0>;
|
|
33
51
|
readonly borderRadius: css.StyleXClassNameFor<"borderRadius", 0>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/Input/styles.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAOpC,eAAO,MAAM,MAAM
|
|
1
|
+
{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/Input/styles.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAOpC,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuFjB,CAAA"}
|
|
@@ -11,9 +11,14 @@ interface AddonProps {
|
|
|
11
11
|
/** Optional minimum width to prevent layout shift (e.g. Copy → Copied!): a
|
|
12
12
|
* size token key or a relative length. */
|
|
13
13
|
minWidth?: Length;
|
|
14
|
+
/**
|
|
15
|
+
* Accessible name of a clickable addon (it renders a button). Required when
|
|
16
|
+
* its content is an icon (copy, reveal): without it the button has no name.
|
|
17
|
+
*/
|
|
18
|
+
'aria-label'?: string;
|
|
14
19
|
children: ReactNode;
|
|
15
20
|
}
|
|
16
|
-
declare function Addon({ position, onClick, disabled, minWidth, children }: AddonProps): import("react/jsx-runtime").JSX.Element;
|
|
21
|
+
declare function Addon({ position, onClick, disabled, minWidth, 'aria-label': ariaLabel, children, }: AddonProps): import("react/jsx-runtime").JSX.Element;
|
|
17
22
|
export declare const InputGroup: {
|
|
18
23
|
Root: typeof Root;
|
|
19
24
|
Addon: typeof Addon;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputGroup.d.ts","sourceRoot":"","sources":["../../../src/components/InputGroup/InputGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAA;AAMpC,OAAO,EAAgB,KAAK,MAAM,EAAC,MAAM,qBAAqB,CAAA;AAG9D,UAAU,SAAS;IACjB,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,iBAAS,IAAI,CAAC,EAAC,QAAQ,EAAC,EAAE,SAAS,2CAQlC;AAOD,UAAU,UAAU;IAClB,QAAQ,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;+CAC2C;IAC3C,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,iBAAS,KAAK,CAAC,
|
|
1
|
+
{"version":3,"file":"InputGroup.d.ts","sourceRoot":"","sources":["../../../src/components/InputGroup/InputGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAA;AAMpC,OAAO,EAAgB,KAAK,MAAM,EAAC,MAAM,qBAAqB,CAAA;AAG9D,UAAU,SAAS;IACjB,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,iBAAS,IAAI,CAAC,EAAC,QAAQ,EAAC,EAAE,SAAS,2CAQlC;AAOD,UAAU,UAAU;IAClB,QAAQ,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;+CAC2C;IAC3C,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,iBAAS,KAAK,CAAC,EACb,QAAgB,EAChB,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,QAAQ,GACT,EAAE,UAAU,2CA0BZ;AAED,eAAO,MAAM,UAAU;;;CAGtB,CAAA"}
|
|
@@ -9,4 +9,5 @@ export declare const SearchField: Story;
|
|
|
9
9
|
export declare const ClickableAddon: Story;
|
|
10
10
|
export declare const StandaloneInput: Story;
|
|
11
11
|
export declare const AllVariants: Story;
|
|
12
|
+
export declare const IconAddonNamed: Story;
|
|
12
13
|
//# sourceMappingURL=InputGroup.stories.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputGroup.stories.d.ts","sourceRoot":"","sources":["../../../src/components/InputGroup/InputGroup.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,kBAAkB,CAAA;AASpD,QAAA,MAAM,IAAI,EAAE,IAEX,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAA;AAIrB,eAAO,MAAM,QAAQ,EAAE,KAgBtB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAaxB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAevB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAkBzB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAc5B,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAW7B,CAAA;AAOD,eAAO,MAAM,WAAW,EAAE,KAmBzB,CAAA"}
|
|
1
|
+
{"version":3,"file":"InputGroup.stories.d.ts","sourceRoot":"","sources":["../../../src/components/InputGroup/InputGroup.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,kBAAkB,CAAA;AASpD,QAAA,MAAM,IAAI,EAAE,IAEX,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAA;AAIrB,eAAO,MAAM,QAAQ,EAAE,KAgBtB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAaxB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAevB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAkBzB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAc5B,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAW7B,CAAA;AAOD,eAAO,MAAM,WAAW,EAAE,KAmBzB,CAAA;AAKD,eAAO,MAAM,cAAc,EAAE,KAe5B,CAAA"}
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
import { ReactNode, Ref } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* A headless-state popup list of options for an input that keeps focus: a
|
|
4
|
+
* Combobox's text field, or a rich-text editor's typeahead (mentions, slash
|
|
5
|
+
* commands). The anchor element owns focus and the keyboard; it moves the
|
|
6
|
+
* highlight by setting `highlightedId`, and wires itself to the list with
|
|
7
|
+
* `getAnchorProps()` (aria-controls / aria-expanded / aria-activedescendant).
|
|
8
|
+
* A press on an option never takes focus from the anchor.
|
|
9
|
+
*/
|
|
10
|
+
export type ListboxMaxHeight = 'listMaxH' | 'listMaxHSm';
|
|
11
|
+
/** Default option id: the listbox id plus the value, made safe for an id. */
|
|
12
|
+
export declare function defaultOptionId(listboxId: string, value: string): string;
|
|
13
|
+
export interface ListboxAnchorProps {
|
|
14
|
+
role?: 'combobox';
|
|
15
|
+
'aria-controls': string | undefined;
|
|
16
|
+
'aria-expanded': boolean;
|
|
17
|
+
'aria-activedescendant': string | undefined;
|
|
18
|
+
'aria-autocomplete': 'list';
|
|
19
|
+
'aria-haspopup': 'listbox';
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* ARIA for the element that keeps focus and drives the list. Spread it on an
|
|
23
|
+
* input, or set each attribute on a contenteditable root.
|
|
24
|
+
*/
|
|
25
|
+
export declare function getAnchorProps({ id, open, highlightedId, }: {
|
|
26
|
+
id: string;
|
|
27
|
+
open: boolean;
|
|
28
|
+
highlightedId: string | null | undefined;
|
|
29
|
+
}): ListboxAnchorProps;
|
|
30
|
+
interface RootProps {
|
|
31
|
+
/** DOM id of the list; pass the same to getAnchorProps. */
|
|
32
|
+
id: string;
|
|
33
|
+
open: boolean;
|
|
34
|
+
/** The rect the list is placed against: the input, or the editor's caret. */
|
|
35
|
+
anchor: () => DOMRect | null | undefined;
|
|
36
|
+
/** Give the list the anchor's width (a Combobox under its input). */
|
|
37
|
+
matchAnchorWidth?: boolean;
|
|
38
|
+
/** Id of the highlighted option, controlled by the anchor's keyboard handling. */
|
|
39
|
+
highlightedId: string | null;
|
|
40
|
+
/** Pointer hover asks to move the highlight. */
|
|
41
|
+
onHighlight?: (id: string | null) => void;
|
|
42
|
+
/** A press on an option. */
|
|
43
|
+
onSelect?: (value: string) => void;
|
|
44
|
+
/** Option value → DOM id. Default: defaultOptionId(id, value). */
|
|
45
|
+
getOptionId?: (value: string) => string;
|
|
46
|
+
/** Accessible name of the list. */
|
|
47
|
+
'aria-label'?: string;
|
|
48
|
+
/** Size-token key capping the list's height; longer lists scroll. Default: listMaxH. */
|
|
49
|
+
maxHeight?: ListboxMaxHeight;
|
|
50
|
+
children: ReactNode;
|
|
51
|
+
}
|
|
52
|
+
declare function Root({ id, open, anchor, matchAnchorWidth, highlightedId, onHighlight, onSelect, getOptionId, 'aria-label': ariaLabel, maxHeight, children, }: RootProps): import("react/jsx-runtime").JSX.Element | null;
|
|
53
|
+
interface OptionProps {
|
|
54
|
+
value: string;
|
|
55
|
+
/** DOM id. Default: Root's getOptionId(value). */
|
|
56
|
+
id?: string;
|
|
57
|
+
/** The committed choice (aria-selected). */
|
|
58
|
+
selected?: boolean;
|
|
59
|
+
disabled?: boolean;
|
|
60
|
+
children: ReactNode;
|
|
61
|
+
ref?: Ref<HTMLDivElement>;
|
|
62
|
+
}
|
|
63
|
+
declare function Option({ value, id: idProp, selected, disabled, children, ref, }: OptionProps): import("react/jsx-runtime").JSX.Element;
|
|
64
|
+
/** Shown in place of options when nothing matches. */
|
|
65
|
+
declare function Empty({ children }: {
|
|
66
|
+
children: ReactNode;
|
|
67
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
68
|
+
export declare const Listbox: {
|
|
69
|
+
Root: typeof Root;
|
|
70
|
+
Option: typeof Option;
|
|
71
|
+
Empty: typeof Empty;
|
|
72
|
+
getAnchorProps: typeof getAnchorProps;
|
|
73
|
+
};
|
|
74
|
+
export {};
|
|
75
|
+
//# sourceMappingURL=Listbox.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Listbox.d.ts","sourceRoot":"","sources":["../../../src/components/Listbox/Listbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,SAAS,EACd,KAAK,GAAG,EAQT,MAAM,OAAO,CAAA;AASd;;;;;;;GAOG;AAEH,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,YAAY,CAAA;AAOxD,6EAA6E;AAC7E,wBAAgB,eAAe,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAExE;AAED,MAAM,WAAW,kBAAkB;IACjC,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,eAAe,EAAE,MAAM,GAAG,SAAS,CAAA;IACnC,eAAe,EAAE,OAAO,CAAA;IACxB,uBAAuB,EAAE,MAAM,GAAG,SAAS,CAAA;IAC3C,mBAAmB,EAAE,MAAM,CAAA;IAC3B,eAAe,EAAE,SAAS,CAAA;CAC3B;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAC7B,EAAE,EACF,IAAI,EACJ,aAAa,GACd,EAAE;IACD,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,OAAO,CAAA;IACb,aAAa,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAA;CACzC,GAAG,kBAAkB,CAQrB;AAoBD,UAAU,SAAS;IACjB,2DAA2D;IAC3D,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,OAAO,CAAA;IACb,6EAA6E;IAC7E,MAAM,EAAE,MAAM,OAAO,GAAG,IAAI,GAAG,SAAS,CAAA;IACxC,qEAAqE;IACrE,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,kFAAkF;IAClF,aAAa,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B,gDAAgD;IAChD,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IACzC,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,kEAAkE;IAClE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IACvC,mCAAmC;IACnC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,wFAAwF;IACxF,SAAS,CAAC,EAAE,gBAAgB,CAAA;IAC5B,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,iBAAS,IAAI,CAAC,EACZ,EAAE,EACF,IAAI,EACJ,MAAM,EACN,gBAAwB,EACxB,aAAa,EACb,WAAW,EACX,QAAQ,EACR,WAAW,EACX,YAAY,EAAE,SAAS,EACvB,SAAsB,EACtB,QAAQ,GACT,EAAE,SAAS,kDA4FX;AAID,UAAU,WAAW;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,kDAAkD;IAClD,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,EAAE,SAAS,CAAA;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;CAC1B;AAED,iBAAS,MAAM,CAAC,EACd,KAAK,EACL,EAAE,EAAE,MAAM,EACV,QAAgB,EAChB,QAAgB,EAChB,QAAQ,EACR,GAAG,GACJ,EAAE,WAAW,2CAwBb;AAID,sDAAsD;AACtD,iBAAS,KAAK,CAAC,EAAC,QAAQ,EAAC,EAAE;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAC,2CAG/C;AAED,eAAO,MAAM,OAAO;;;;;CAKnB,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Listbox.meta.d.ts","sourceRoot":"","sources":["../../../src/components/Listbox/Listbox.meta.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAA;AAEpD,eAAO,MAAM,IAAI,EAAE,aAiDlB,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Listbox.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Listbox/Listbox.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,kBAAkB,CAAA;AAUpD,QAAA,MAAM,IAAI,EAAE,IAEX,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAA;AA8GrB,eAAO,MAAM,eAAe,EAAE,KA2B7B,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAevB,CAAA"}
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
import { css } from 'react-strict-dom';
|
|
2
|
+
export declare const styles: Readonly<{
|
|
3
|
+
readonly popup: Readonly<{
|
|
4
|
+
readonly position: css.StyleXClassNameFor<"position", "fixed">;
|
|
5
|
+
readonly top: css.StyleXClassNameFor<"top", 0>;
|
|
6
|
+
readonly left: css.StyleXClassNameFor<"left", 0>;
|
|
7
|
+
readonly backgroundColor: css.StyleXClassNameFor<"backgroundColor", string>;
|
|
8
|
+
readonly borderWidth: css.StyleXClassNameFor<"borderWidth", string>;
|
|
9
|
+
readonly borderStyle: css.StyleXClassNameFor<"borderStyle", "solid">;
|
|
10
|
+
readonly borderColor: css.StyleXClassNameFor<"borderColor", string>;
|
|
11
|
+
readonly borderRadius: css.StyleXClassNameFor<"borderRadius", string>;
|
|
12
|
+
readonly boxShadow: css.StyleXClassNameFor<"boxShadow", string>;
|
|
13
|
+
readonly paddingTop: css.StyleXClassNameFor<"paddingTop", string>;
|
|
14
|
+
readonly paddingBottom: css.StyleXClassNameFor<"paddingBottom", string>;
|
|
15
|
+
readonly overflowY: css.StyleXClassNameFor<"overflowY", "auto">;
|
|
16
|
+
readonly zIndex: css.StyleXClassNameFor<"zIndex", 1050>;
|
|
17
|
+
readonly pointerEvents: css.StyleXClassNameFor<"pointerEvents", "auto">;
|
|
18
|
+
}>;
|
|
19
|
+
readonly ownWidth: Readonly<{
|
|
20
|
+
readonly minWidth: css.StyleXClassNameFor<"minWidth", string>;
|
|
21
|
+
}>;
|
|
22
|
+
readonly maxHeightListMaxH: Readonly<{
|
|
23
|
+
readonly maxHeight: css.StyleXClassNameFor<"maxHeight", string>;
|
|
24
|
+
}>;
|
|
25
|
+
readonly maxHeightListMaxHSm: Readonly<{
|
|
26
|
+
readonly maxHeight: css.StyleXClassNameFor<"maxHeight", string>;
|
|
27
|
+
}>;
|
|
28
|
+
readonly position: (top: number, left: number) => readonly [Readonly<{
|
|
29
|
+
top: css.StyleXClassNameFor<"top", number>;
|
|
30
|
+
left: css.StyleXClassNameFor<"left", number>;
|
|
31
|
+
}>, css.InlineStyles];
|
|
32
|
+
readonly width: (width: number) => readonly [Readonly<{
|
|
33
|
+
width: css.StyleXClassNameFor<"width", number>;
|
|
34
|
+
}>, css.InlineStyles];
|
|
35
|
+
readonly option: Readonly<{
|
|
36
|
+
readonly display: css.StyleXClassNameFor<"display", "flex">;
|
|
37
|
+
readonly alignItems: css.StyleXClassNameFor<"alignItems", "center">;
|
|
38
|
+
readonly paddingTop: css.StyleXClassNameFor<"paddingTop", string>;
|
|
39
|
+
readonly paddingBottom: css.StyleXClassNameFor<"paddingBottom", string>;
|
|
40
|
+
readonly paddingLeft: css.StyleXClassNameFor<"paddingLeft", string>;
|
|
41
|
+
readonly paddingRight: css.StyleXClassNameFor<"paddingRight", string>;
|
|
42
|
+
readonly fontSize: css.StyleXClassNameFor<"fontSize", string>;
|
|
43
|
+
readonly fontFamily: css.StyleXClassNameFor<"fontFamily", string>;
|
|
44
|
+
readonly color: css.StyleXClassNameFor<"color", string>;
|
|
45
|
+
readonly cursor: css.StyleXClassNameFor<"cursor", "pointer">;
|
|
46
|
+
readonly backgroundColor: css.StyleXClassNameFor<"backgroundColor", "transparent">;
|
|
47
|
+
readonly transitionProperty: css.StyleXClassNameFor<"transitionProperty", "background-color">;
|
|
48
|
+
readonly transitionDuration: css.StyleXClassNameFor<"transitionDuration", string>;
|
|
49
|
+
}>;
|
|
50
|
+
readonly optionSelected: Readonly<{
|
|
51
|
+
readonly color: css.StyleXClassNameFor<"color", string>;
|
|
52
|
+
readonly fontWeight: css.StyleXClassNameFor<"fontWeight", string>;
|
|
53
|
+
}>;
|
|
54
|
+
readonly optionHighlighted: Readonly<{
|
|
55
|
+
readonly backgroundColor: css.StyleXClassNameFor<"backgroundColor", string>;
|
|
56
|
+
readonly outlineStyle: css.StyleXClassNameFor<"outlineStyle", "solid">;
|
|
57
|
+
readonly outlineWidth: css.StyleXClassNameFor<"outlineWidth", string>;
|
|
58
|
+
readonly outlineColor: css.StyleXClassNameFor<"outlineColor", "transparent">;
|
|
59
|
+
readonly outlineOffset: css.StyleXClassNameFor<"outlineOffset", `calc(-1 * ${css.StyleXVar<string>})`>;
|
|
60
|
+
}>;
|
|
61
|
+
readonly optionDisabled: Readonly<{
|
|
62
|
+
readonly color: css.StyleXClassNameFor<"color", string>;
|
|
63
|
+
readonly cursor: css.StyleXClassNameFor<"cursor", "default">;
|
|
64
|
+
}>;
|
|
65
|
+
readonly empty: Readonly<{
|
|
66
|
+
readonly paddingTop: css.StyleXClassNameFor<"paddingTop", string>;
|
|
67
|
+
readonly paddingBottom: css.StyleXClassNameFor<"paddingBottom", string>;
|
|
68
|
+
readonly paddingLeft: css.StyleXClassNameFor<"paddingLeft", string>;
|
|
69
|
+
readonly paddingRight: css.StyleXClassNameFor<"paddingRight", string>;
|
|
70
|
+
readonly fontSize: css.StyleXClassNameFor<"fontSize", string>;
|
|
71
|
+
readonly fontFamily: css.StyleXClassNameFor<"fontFamily", string>;
|
|
72
|
+
readonly color: css.StyleXClassNameFor<"color", string>;
|
|
73
|
+
}>;
|
|
74
|
+
}>;
|
|
75
|
+
//# sourceMappingURL=styles.css.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/Listbox/styles.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AASpC,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+EjB,CAAA"}
|
|
@@ -1,16 +1,29 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
1
|
+
import { ReactNode, Ref } from 'react';
|
|
2
2
|
interface RootProps {
|
|
3
3
|
children: ReactNode;
|
|
4
|
+
/** Controlled open state. */
|
|
5
|
+
open?: boolean;
|
|
6
|
+
/** Initial open state (uncontrolled). */
|
|
7
|
+
defaultOpen?: boolean;
|
|
8
|
+
/** Called when the menu opens or closes. */
|
|
9
|
+
onOpenChange?: (open: boolean) => void;
|
|
4
10
|
}
|
|
5
|
-
declare function Root({ children }: RootProps): import("react/jsx-runtime").JSX.Element;
|
|
6
|
-
|
|
11
|
+
declare function Root({ children, open, defaultOpen, onOpenChange }: RootProps): import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
export type MenuTriggerVariant = 'default' | 'ghost';
|
|
13
|
+
interface TriggerProps {
|
|
7
14
|
children: ReactNode;
|
|
8
|
-
|
|
15
|
+
/** Accessible name — required when the label is an icon only. */
|
|
16
|
+
'aria-label'?: string;
|
|
17
|
+
/** `ghost`: no border or fill until hover, for toolbars. Default: `default`. */
|
|
18
|
+
variant?: MenuTriggerVariant;
|
|
19
|
+
ref?: Ref<HTMLButtonElement>;
|
|
20
|
+
}
|
|
21
|
+
declare function Trigger({ children, 'aria-label': ariaLabel, variant, ref }: TriggerProps): import("react/jsx-runtime").JSX.Element;
|
|
9
22
|
interface PopupProps {
|
|
10
23
|
children: ReactNode;
|
|
11
24
|
align?: 'start' | 'end';
|
|
12
25
|
}
|
|
13
|
-
declare function Popup({ children, align }: PopupProps): import(
|
|
26
|
+
declare function Popup({ children, align }: PopupProps): import('react').ReactPortal | null;
|
|
14
27
|
interface ItemProps {
|
|
15
28
|
onClick?: () => void;
|
|
16
29
|
children: ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,SAAS,EACd,KAAK,GAAG,EAOT,MAAM,OAAO,CAAA;AAad,UAAU,SAAS;IACjB,QAAQ,EAAE,SAAS,CAAA;IACnB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,yCAAyC;IACzC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;CACvC;AAED,iBAAS,IAAI,CAAC,EAAC,QAAQ,EAAE,IAAI,EAAE,WAAW,EAAE,YAAY,EAAC,EAAE,SAAS,2CAUnE;AAQD,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,OAAO,CAAA;AAEpD,UAAU,YAAY;IACpB,QAAQ,EAAE,SAAS,CAAA;IACnB,iEAAiE;IACjE,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,gFAAgF;IAChF,OAAO,CAAC,EAAE,kBAAkB,CAAA;IAC5B,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAA;CAC7B;AAED,iBAAS,OAAO,CAAC,EAAC,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,OAAmB,EAAE,GAAG,EAAC,EAAE,YAAY,2CAsC3F;AAGD,UAAU,UAAU;IAClB,QAAQ,EAAE,SAAS,CAAA;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;CACxB;AAKD,iBAAS,KAAK,CAAC,EAAC,QAAQ,EAAE,KAAe,EAAC,EAAE,UAAU,sCAkDrD;AAGD,UAAU,SAAS;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,iBAAS,IAAI,CAAC,EAAC,OAAO,EAAE,QAAQ,EAAC,EAAE,SAAS,2CA6B3C;AAGD,UAAU,aAAa;IACrB,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,iBAAS,QAAQ,CAAC,EAAC,IAAI,EAAE,QAAQ,EAAC,EAAE,aAAa,2CAyBhD;AAMD,iBAAS,SAAS,4CAEjB;AAED,eAAO,MAAM,IAAI;;;;;;;CAOhB,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.meta.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/Menu.meta.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAA;AAEpD,eAAO,MAAM,IAAI,EAAE,
|
|
1
|
+
{"version":3,"file":"Menu.meta.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/Menu.meta.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAA;AAEpD,eAAO,MAAM,IAAI,EAAE,aAwClB,CAAA"}
|
|
@@ -8,4 +8,11 @@ export declare const KeyboardNavigation: Story;
|
|
|
8
8
|
export declare const WithLinks: Story;
|
|
9
9
|
export declare const WithSeparator: Story;
|
|
10
10
|
export declare const NestedControlWarns: Story;
|
|
11
|
+
export declare const InStickyOverflowToolbar: Story;
|
|
12
|
+
export declare const FocusAndActiveDescendant: Story;
|
|
13
|
+
export declare const EscapeInsideDialog: Story;
|
|
14
|
+
export declare const TypingElsewhereIsNotIntercepted: Story;
|
|
15
|
+
export declare const GhostIconTrigger: Story;
|
|
16
|
+
export declare const EnterActivatesOnce: Story;
|
|
17
|
+
export declare const TabInsideDialog: Story;
|
|
11
18
|
//# sourceMappingURL=Menu.stories.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/Menu.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,kBAAkB,CAAA;
|
|
1
|
+
{"version":3,"file":"Menu.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/Menu.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,kBAAkB,CAAA;AAWpD,QAAA,MAAM,IAAI,EAAE,IAEX,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAA;AAErB,eAAO,MAAM,OAAO,EAAE,KAqCrB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAsBvB,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KAgChC,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAqCvB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAwB3B,CAAA;AAID,eAAO,MAAM,kBAAkB,EAAE,KAqBhC,CAAA;AAsCD,eAAO,MAAM,uBAAuB,EAAE,KAgCrC,CAAA;AAID,eAAO,MAAM,wBAAwB,EAAE,KAwBtC,CAAA;AAMD,eAAO,MAAM,kBAAkB,EAAE,KA0ChC,CAAA;AAID,eAAO,MAAM,+BAA+B,EAAE,KAyB7C,CAAA;AAGD,eAAO,MAAM,gBAAgB,EAAE,KAiB9B,CAAA;AAKD,eAAO,MAAM,kBAAkB,EAAE,KAoBhC,CAAA;AAMD,eAAO,MAAM,eAAe,EAAE,KAmC7B,CAAA"}
|
|
@@ -1,12 +1,15 @@
|
|
|
1
1
|
export interface MenuContextValue {
|
|
2
2
|
open: boolean;
|
|
3
3
|
toggle: () => void;
|
|
4
|
+
/** Close the menu and put focus back on the trigger. */
|
|
4
5
|
close: () => void;
|
|
5
6
|
menuId: string;
|
|
7
|
+
triggerId: string;
|
|
6
8
|
highlightedId: string | null;
|
|
7
9
|
setHighlightedId: (id: string | null) => void;
|
|
8
10
|
registerItem: (id: string, element: HTMLElement) => () => void;
|
|
9
11
|
triggerRef: React.RefObject<HTMLButtonElement | null>;
|
|
12
|
+
popupRef: React.RefObject<HTMLDivElement | null>;
|
|
10
13
|
}
|
|
11
14
|
export declare const MenuContext: import('react').Context<MenuContextValue | null>;
|
|
12
15
|
export declare function useMenu(): MenuContextValue;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuContext.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/MenuContext.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,OAAO,CAAA;IACb,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,MAAM,EAAE,MAAM,CAAA;IACd,aAAa,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B,gBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IAC7C,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,KAAK,MAAM,IAAI,CAAA;IAC9D,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAA;
|
|
1
|
+
{"version":3,"file":"MenuContext.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/MenuContext.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,OAAO,CAAA;IACb,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,wDAAwD;IACxD,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,MAAM,EAAE,MAAM,CAAA;IACd,SAAS,EAAE,MAAM,CAAA;IACjB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B,gBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IAC7C,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,KAAK,MAAM,IAAI,CAAA;IAC9D,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAA;IACrD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;CACjD;AAED,eAAO,MAAM,WAAW,kDAA+C,CAAA;AAEvE,wBAAgB,OAAO,qBAItB"}
|
|
@@ -24,19 +24,20 @@ export declare const styles: Readonly<{
|
|
|
24
24
|
readonly transitionProperty: css.StyleXClassNameFor<"transitionProperty", "background-color, border-color">;
|
|
25
25
|
readonly transitionDuration: css.StyleXClassNameFor<"transitionDuration", string>;
|
|
26
26
|
}>;
|
|
27
|
-
readonly
|
|
28
|
-
readonly
|
|
29
|
-
readonly
|
|
30
|
-
readonly
|
|
31
|
-
readonly
|
|
32
|
-
readonly
|
|
33
|
-
readonly
|
|
27
|
+
readonly triggerGhost: Readonly<{
|
|
28
|
+
readonly justifyContent: css.StyleXClassNameFor<"justifyContent", "center">;
|
|
29
|
+
readonly minWidth: css.StyleXClassNameFor<"minWidth", string>;
|
|
30
|
+
readonly minHeight: css.StyleXClassNameFor<"minHeight", string>;
|
|
31
|
+
readonly paddingTop: css.StyleXClassNameFor<"paddingTop", string>;
|
|
32
|
+
readonly paddingBottom: css.StyleXClassNameFor<"paddingBottom", string>;
|
|
33
|
+
readonly paddingLeft: css.StyleXClassNameFor<"paddingLeft", string>;
|
|
34
|
+
readonly paddingRight: css.StyleXClassNameFor<"paddingRight", string>;
|
|
35
|
+
readonly borderColor: css.StyleXClassNameFor<"borderColor", "transparent">;
|
|
34
36
|
}>;
|
|
35
37
|
readonly popup: Readonly<{
|
|
36
|
-
readonly position: css.StyleXClassNameFor<"position", "
|
|
37
|
-
readonly top: css.StyleXClassNameFor<"top",
|
|
38
|
+
readonly position: css.StyleXClassNameFor<"position", "fixed">;
|
|
39
|
+
readonly top: css.StyleXClassNameFor<"top", 0>;
|
|
38
40
|
readonly left: css.StyleXClassNameFor<"left", 0>;
|
|
39
|
-
readonly marginTop: css.StyleXClassNameFor<"marginTop", string>;
|
|
40
41
|
readonly backgroundColor: css.StyleXClassNameFor<"backgroundColor", string>;
|
|
41
42
|
readonly borderWidth: css.StyleXClassNameFor<"borderWidth", string>;
|
|
42
43
|
readonly borderStyle: css.StyleXClassNameFor<"borderStyle", "solid">;
|
|
@@ -46,12 +47,16 @@ export declare const styles: Readonly<{
|
|
|
46
47
|
readonly paddingTop: css.StyleXClassNameFor<"paddingTop", string>;
|
|
47
48
|
readonly paddingBottom: css.StyleXClassNameFor<"paddingBottom", string>;
|
|
48
49
|
readonly minWidth: css.StyleXClassNameFor<"minWidth", string>;
|
|
49
|
-
readonly
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
readonly
|
|
53
|
-
readonly
|
|
50
|
+
readonly maxHeight: css.StyleXClassNameFor<"maxHeight", string>;
|
|
51
|
+
readonly overflowY: css.StyleXClassNameFor<"overflowY", "auto">;
|
|
52
|
+
readonly zIndex: css.StyleXClassNameFor<"zIndex", 1050>;
|
|
53
|
+
readonly pointerEvents: css.StyleXClassNameFor<"pointerEvents", "auto">;
|
|
54
|
+
readonly outlineStyle: css.StyleXClassNameFor<"outlineStyle", "none">;
|
|
54
55
|
}>;
|
|
56
|
+
readonly popupPosition: (top: number, left: number) => readonly [Readonly<{
|
|
57
|
+
top: css.StyleXClassNameFor<"top", number>;
|
|
58
|
+
left: css.StyleXClassNameFor<"left", number>;
|
|
59
|
+
}>, css.InlineStyles];
|
|
55
60
|
readonly item: Readonly<{
|
|
56
61
|
readonly display: css.StyleXClassNameFor<"display", "flex">;
|
|
57
62
|
readonly alignItems: css.StyleXClassNameFor<"alignItems", "center">;
|
|
@@ -70,6 +75,10 @@ export declare const styles: Readonly<{
|
|
|
70
75
|
}>;
|
|
71
76
|
readonly itemHighlighted: Readonly<{
|
|
72
77
|
readonly backgroundColor: css.StyleXClassNameFor<"backgroundColor", string>;
|
|
78
|
+
readonly outlineStyle: css.StyleXClassNameFor<"outlineStyle", "solid">;
|
|
79
|
+
readonly outlineWidth: css.StyleXClassNameFor<"outlineWidth", string>;
|
|
80
|
+
readonly outlineColor: css.StyleXClassNameFor<"outlineColor", "transparent">;
|
|
81
|
+
readonly outlineOffset: css.StyleXClassNameFor<"outlineOffset", `calc(-1 * ${css.StyleXVar<string>})`>;
|
|
73
82
|
}>;
|
|
74
83
|
readonly separator: Readonly<{
|
|
75
84
|
readonly height: css.StyleXClassNameFor<"height", 0>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/styles.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AASpC,eAAO,MAAM,MAAM
|
|
1
|
+
{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/styles.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AASpC,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0GjB,CAAA"}
|
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
import { MenuContextValue } from './MenuContext';
|
|
2
|
-
export
|
|
2
|
+
export interface MenuRootOptions {
|
|
3
|
+
open?: boolean;
|
|
4
|
+
defaultOpen?: boolean;
|
|
5
|
+
onOpenChange?: (open: boolean) => void;
|
|
6
|
+
}
|
|
7
|
+
/**
|
|
8
|
+
* The menu-button pattern (WAI-ARIA APG): on open, focus moves to the
|
|
9
|
+
* `role="menu"` popup, which carries `aria-activedescendant`; arrows move the
|
|
10
|
+
* highlight; Escape closes and focus returns to the trigger. The keydown
|
|
11
|
+
* handler sits on the popup itself, never on `document`, so keys typed
|
|
12
|
+
* elsewhere (an editor) are never intercepted, and Escape stops there so an
|
|
13
|
+
* enclosing Popover or Dialog stays open.
|
|
14
|
+
*/
|
|
15
|
+
export declare function useMenuRoot({ open: openProp, defaultOpen, onOpenChange }: MenuRootOptions): {
|
|
3
16
|
ctx: MenuContextValue;
|
|
4
17
|
rootRef: import('react').RefObject<HTMLDivElement | null>;
|
|
5
18
|
};
|