A design system in a box.
hip-ui.tngl.io/docs/introduction
submenu
+428
-50
+22
-9
apps/example/src/components/KitchenSink.tsx
+22
-9
apps/example/src/components/KitchenSink.tsx
···
53
53
import { Select, SelectItem } from "./select";
54
54
import { ToggleButton } from "./toggle-button";
55
55
import { ToggleButtonGroup } from "./toggle-button-group";
56
-
import { Menu, MenuItem } from "./menu";
56
+
import {
57
+
Menu,
58
+
MenuItem,
59
+
MenuSection,
60
+
MenuSectionHeader,
61
+
MenuSeparator,
62
+
SubMenu,
63
+
} from "./menu";
57
64
import {
58
65
ListBoxSection,
59
66
ListBoxSectionHeader,
···
479
486
</IconButton>
480
487
}
481
488
>
482
-
<ListBoxSection>
483
-
<ListBoxSectionHeader>Menu Section Header</ListBoxSectionHeader>
489
+
<MenuSection>
490
+
<MenuSectionHeader>Menu Section Header</MenuSectionHeader>
484
491
<MenuItem>Menu Item 1</MenuItem>
485
492
<MenuItem>Menu Item 2</MenuItem>
486
493
<MenuItem>Menu Item 3</MenuItem>
487
-
</ListBoxSection>
488
-
<ListBoxSeparator />
489
-
<ListBoxSection>
490
-
<ListBoxSectionHeader>Menu Section 2</ListBoxSectionHeader>
494
+
</MenuSection>
495
+
<MenuSeparator />
496
+
<MenuSection>
497
+
<MenuSectionHeader>Menu Section 2</MenuSectionHeader>
491
498
<MenuItem>Menu Item 4</MenuItem>
492
499
<MenuItem>Menu Item 5</MenuItem>
493
-
<MenuItem>Menu Item 6</MenuItem>
494
-
</ListBoxSection>
500
+
<SubMenu trigger={<MenuItem>Menu Item 6</MenuItem>}>
501
+
<MenuItem>Menu Item 7</MenuItem>
502
+
<MenuItem>Menu Item 8</MenuItem>
503
+
<MenuItem>Menu Item 9</MenuItem>
504
+
</SubMenu>
505
+
</MenuSection>
495
506
</Menu>
496
507
</Flex>
497
508
);
498
509
}
499
510
500
511
export function KitchenSink() {
512
+
return <MenuExample />;
513
+
501
514
return (
502
515
<Flex
503
516
direction="column"
+1
-2
apps/example/src/components/listbox/index.tsx
+1
-2
apps/example/src/components/listbox/index.tsx
···
123
123
export function ListBoxItem({ style, children, ...props }: ListBoxItemProps) {
124
124
const size = useContext(SizeContext);
125
125
126
-
console.log("size", { size });
127
126
return (
128
127
<AriaListBoxItem
129
128
{...props}
···
160
159
}
161
160
162
161
export function ListBoxSeparator({ style, ...props }: ListBoxSeparatorProps) {
163
-
return <Separator {...props} style={styles.separator} />;
162
+
return <Separator {...props} style={[styles.separator, style]} />;
164
163
}
165
164
166
165
export interface ListBoxSectionHeaderProps
+38
-4
apps/example/src/components/select/index.tsx
+38
-4
apps/example/src/components/select/index.tsx
···
3
3
Button,
4
4
Popover,
5
5
SelectValue,
6
+
PopoverProps,
6
7
} from "react-aria-components";
7
8
import { Select as AriaSelect } from "react-aria-components";
8
9
import * as stylex from "@stylexjs/stylex";
9
-
import type { ValidationResult } from "react-aria-components";
10
+
import type {
11
+
ListBoxSectionProps,
12
+
ValidationResult,
13
+
} from "react-aria-components";
10
14
import { FieldError } from "react-aria-components";
11
15
import { Description, Label } from "../label";
12
16
import { ChevronDown } from "lucide-react";
···
16
20
import { radius } from "../theme/radius.stylex";
17
21
import { fontSize, lineHeight } from "../theme/typography.stylex";
18
22
import { Size } from "../types";
19
-
import { ListBox, ListBoxItem, ListBoxItemProps } from "../listbox";
23
+
import {
24
+
ListBox,
25
+
ListBoxItem,
26
+
ListBoxItemProps,
27
+
ListBoxSectionHeaderProps,
28
+
ListBoxSectionHeader,
29
+
ListBoxSeparatorProps,
30
+
ListBoxSeparator,
31
+
ListBoxSection,
32
+
} from "../listbox";
20
33
import { SizeContext } from "../context";
21
34
22
35
const styles = stylex.create({
···
74
87
});
75
88
76
89
export interface SelectProps<T extends object, M extends "single" | "multiple">
77
-
extends Omit<AriaSelectProps<T, M>, "children" | "style" | "className"> {
90
+
extends Omit<AriaSelectProps<T, M>, "children" | "style" | "className">,
91
+
Pick<
92
+
PopoverProps,
93
+
| "shouldCloseOnInteractOutside"
94
+
| "shouldFlip"
95
+
| "shouldUpdatePosition"
96
+
| "placement"
97
+
> {
78
98
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
79
99
label?: string;
80
100
description?: string;
···
95
115
items,
96
116
style,
97
117
size = "md",
118
+
shouldCloseOnInteractOutside,
119
+
shouldFlip,
120
+
shouldUpdatePosition,
121
+
placement,
98
122
...props
99
123
}: SelectProps<T, M>) {
100
-
console.log("size", size);
101
124
return (
102
125
<SizeContext.Provider value={size}>
103
126
<AriaSelect {...props} {...stylex.props(styles.wrapper, style)}>
···
111
134
{description && <Description size={size}>{description}</Description>}
112
135
<FieldError>{errorMessage}</FieldError>
113
136
<Popover
137
+
containerPadding={8}
138
+
shouldCloseOnInteractOutside={shouldCloseOnInteractOutside}
139
+
shouldFlip={shouldFlip}
140
+
shouldUpdatePosition={shouldUpdatePosition}
141
+
placement={placement}
114
142
{...stylex.props(
115
143
styles.popover,
116
144
gray.bgSubtle,
···
127
155
128
156
export type SelectItemProps = ListBoxItemProps;
129
157
export const SelectItem = ListBoxItem;
158
+
export type SelectSectionProps<T extends object> = ListBoxSectionProps<T>;
159
+
export const SelectSection = ListBoxSection;
160
+
export type SelectSectionHeaderProps = ListBoxSectionHeaderProps;
161
+
export const SelectSectionHeader = ListBoxSectionHeader;
162
+
export type SelectSeparatorProps = ListBoxSeparatorProps;
163
+
export const SelectSeparator = ListBoxSeparator;
+1
-2
packages/hip-ui/src/components/listbox/index.tsx
+1
-2
packages/hip-ui/src/components/listbox/index.tsx
···
123
123
export function ListBoxItem({ style, children, ...props }: ListBoxItemProps) {
124
124
const size = useContext(SizeContext);
125
125
126
-
console.log("size", { size });
127
126
return (
128
127
<AriaListBoxItem
129
128
{...props}
···
160
159
}
161
160
162
161
export function ListBoxSeparator({ style, ...props }: ListBoxSeparatorProps) {
163
-
return <Separator {...props} style={styles.separator} />;
162
+
return <Separator {...props} style={[styles.separator, style]} />;
164
163
}
165
164
166
165
export interface ListBoxSectionHeaderProps
+18
-1
packages/hip-ui/src/components/select/index.tsx
+18
-1
packages/hip-ui/src/components/select/index.tsx
···
3
3
Button,
4
4
Popover,
5
5
SelectValue,
6
+
PopoverProps,
6
7
} from "react-aria-components";
7
8
import { Select as AriaSelect } from "react-aria-components";
8
9
import * as stylex from "@stylexjs/stylex";
···
86
87
});
87
88
88
89
export interface SelectProps<T extends object, M extends "single" | "multiple">
89
-
extends Omit<AriaSelectProps<T, M>, "children" | "style" | "className"> {
90
+
extends Omit<AriaSelectProps<T, M>, "children" | "style" | "className">,
91
+
Pick<
92
+
PopoverProps,
93
+
| "shouldCloseOnInteractOutside"
94
+
| "shouldFlip"
95
+
| "shouldUpdatePosition"
96
+
| "placement"
97
+
> {
90
98
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
91
99
label?: string;
92
100
description?: string;
···
107
115
items,
108
116
style,
109
117
size = "md",
118
+
shouldCloseOnInteractOutside,
119
+
shouldFlip,
120
+
shouldUpdatePosition,
121
+
placement,
110
122
...props
111
123
}: SelectProps<T, M>) {
112
124
return (
···
122
134
{description && <Description size={size}>{description}</Description>}
123
135
<FieldError>{errorMessage}</FieldError>
124
136
<Popover
137
+
containerPadding={8}
138
+
shouldCloseOnInteractOutside={shouldCloseOnInteractOutside}
139
+
shouldFlip={shouldFlip}
140
+
shouldUpdatePosition={shouldUpdatePosition}
141
+
placement={placement}
125
142
{...stylex.props(
126
143
styles.popover,
127
144
gray.bgSubtle,