@sproutsocial/seeds-react-menu 0.1.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/.eslintrc.js +4 -0
- package/.turbo/turbo-build.log +21 -0
- package/CHANGELOG.md +46 -0
- package/dist/esm/index.js +2651 -0
- package/dist/esm/index.js.map +1 -0
- package/dist/index.d.mts +197 -0
- package/dist/index.d.ts +197 -0
- package/dist/index.js +2670 -0
- package/dist/index.js.map +1 -0
- package/jest.config.js +12 -0
- package/package.json +50 -0
- package/src/ActionMenu/ActionMenu.feature +20 -0
- package/src/ActionMenu/ActionMenu.tsx +113 -0
- package/src/ActionMenu/__tests__/ActionMenu.test.tsx +99 -0
- package/src/ActionMenu/__tests__/ActionMenu.typetest.tsx +73 -0
- package/src/ActionMenu/index.ts +1 -0
- package/src/ComboBox/ComboBox.feature +96 -0
- package/src/ComboBox/TokenInput.feature +84 -0
- package/src/MenuContent/MenuContent.tsx +28 -0
- package/src/MenuContent/MenuContentTypes.ts +7 -0
- package/src/MenuContent/__tests__/MenuContent.test.tsx +59 -0
- package/src/MenuContent/__tests__/MenuContent.typetest.tsx +18 -0
- package/src/MenuContent/index.tsx +2 -0
- package/src/MenuContent/styles.tsx +10 -0
- package/src/MenuContext.tsx +116 -0
- package/src/MenuFooter/MenuFooter.feature +30 -0
- package/src/MenuFooter/MenuFooter.tsx +7 -0
- package/src/MenuFooter/MenuFooterTypes.ts +1 -0
- package/src/MenuFooter/__tests__/MenuFooter.test.tsx +76 -0
- package/src/MenuFooter/__tests__/MenuFooter.typetest.tsx +20 -0
- package/src/MenuFooter/index.ts +2 -0
- package/src/MenuFooter/styles.tsx +7 -0
- package/src/MenuGroup/MenuGroup.feature +114 -0
- package/src/MenuGroup/MenuGroup.tsx +33 -0
- package/src/MenuGroup/MenuGroupTypes.ts +29 -0
- package/src/MenuGroup/__tests__/MenuGroup.test.tsx +95 -0
- package/src/MenuGroup/__tests__/MenuGroup.typetest.tsx +45 -0
- package/src/MenuGroup/index.tsx +8 -0
- package/src/MenuGroup/styles.tsx +37 -0
- package/src/MenuHeader/MenuHeader.feature +59 -0
- package/src/MenuHeader/MenuHeader.tsx +30 -0
- package/src/MenuHeader/MenuHeaderTypes.ts +26 -0
- package/src/MenuHeader/__tests__/MenuHeader.test.tsx +67 -0
- package/src/MenuHeader/__tests__/MenuHeader.typetest.tsx +27 -0
- package/src/MenuHeader/index.ts +2 -0
- package/src/MenuHeader/styles.tsx +75 -0
- package/src/MenuItem/MenuItem.feature +88 -0
- package/src/MenuItem/MenuItem.tsx +44 -0
- package/src/MenuItem/MenuItemTypes.ts +37 -0
- package/src/MenuItem/__tests__/MenuItem.test.tsx +228 -0
- package/src/MenuItem/__tests__/MenuItem.typetest.tsx +41 -0
- package/src/MenuItem/index.ts +5 -0
- package/src/MenuItem/styles.tsx +71 -0
- package/src/MenuItemSelectable/MenuItemSelectable.feature +99 -0
- package/src/MenuItemSelectable/MenuItemSelectable.tsx +136 -0
- package/src/MenuItemSelectable/MenuItemSelectableTypes.ts +15 -0
- package/src/MenuItemSelectable/__tests__/MenuItemSelectable.test.tsx +303 -0
- package/src/MenuItemSelectable/__tests__/MenuItemSelectable.typetest.tsx +56 -0
- package/src/MenuItemSelectable/index.ts +5 -0
- package/src/MenuItemSelectable/styles.tsx +21 -0
- package/src/MenuLabel.tsx +12 -0
- package/src/MenuRoot/MenuRoot.feature +93 -0
- package/src/MenuRoot/MenuRoot.tsx +70 -0
- package/src/MenuRoot/__tests__/MenuRoot.test.tsx +197 -0
- package/src/MenuRoot/__tests__/MenuRoot.typetest.tsx +76 -0
- package/src/MenuRoot/index.ts +1 -0
- package/src/MenuToggleButton.tsx +29 -0
- package/src/MultiSelectMenu/MultiSelectMenu.feature +70 -0
- package/src/MultiSelectMenu/MultiSelectMenu.tsx +133 -0
- package/src/MultiSelectMenu/MultiSelectMenuTypes.ts +8 -0
- package/src/MultiSelectMenu/__tests__/MultiSelectMenu.test.tsx +349 -0
- package/src/MultiSelectMenu/__tests__/MultiSelectMenu.typetest.tsx +78 -0
- package/src/MultiSelectMenu/index.ts +1 -0
- package/src/SingleSelectMenu/SingleSelectMenu.feature +23 -0
- package/src/SingleSelectMenu/SingleSelectMenu.tsx +56 -0
- package/src/SingleSelectMenu/SingleSelectMenuTypes.ts +9 -0
- package/src/SingleSelectMenu/__tests__/SingleSelectMenu.test.tsx +167 -0
- package/src/SingleSelectMenu/__tests__/SingleSelectMenu.typetest.tsx +95 -0
- package/src/SingleSelectMenu/index.ts +3 -0
- package/src/__tests__/Menu.test.tsx +423 -0
- package/src/constants.ts +17 -0
- package/src/hooks/useItemsFromChildren.tsx +81 -0
- package/src/index.ts +20 -0
- package/src/menuTestingUtils.tsx +72 -0
- package/src/reducers/__tests__/useSelectStateReducer.test.tsx +37 -0
- package/src/reducers/useSelectStateReducer.tsx +27 -0
- package/src/styled.d.ts +7 -0
- package/src/types.ts +16 -0
- package/src/utils/itemToString.ts +5 -0
- package/tsconfig.json +12 -0
- package/tsup.config.ts +11 -0
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,197 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import * as downshift from 'downshift';
|
|
3
|
+
import { GetItemPropsOptions, UseSelectProps, UseMultipleSelectionProps, UseSelectReturnValue, UseMultipleSelectionReturnValue } from 'downshift';
|
|
4
|
+
import { TypeBorderSystemProps, TypeColorSystemProps, TypeFlexboxSystemProps, TypeGridSystemProps, TypeLayoutSystemProps, TypePositionSystemProps, TypeSpaceSystemProps, TypeTypographySystemProps, TypeStyledComponentsCommonProps } from '@sproutsocial/seeds-react-system-props';
|
|
5
|
+
import * as styled_components from 'styled-components';
|
|
6
|
+
import * as React$1 from 'react';
|
|
7
|
+
import React__default, { ReactNode } from 'react';
|
|
8
|
+
import { TypeBoxProps } from '@sproutsocial/seeds-react-box';
|
|
9
|
+
export { TypeBoxProps as TypeMenuFooterProps } from '@sproutsocial/seeds-react-box';
|
|
10
|
+
import * as _sproutsocial_seeds_react_text from '@sproutsocial/seeds-react-text';
|
|
11
|
+
import { TypeTextProps } from '@sproutsocial/seeds-react-text';
|
|
12
|
+
import { TypePopoutProps } from '@sproutsocial/seeds-react-popout';
|
|
13
|
+
import { TypeButtonProps } from '@sproutsocial/seeds-react-button';
|
|
14
|
+
|
|
15
|
+
declare const MENU_ITEM_ROLES: {
|
|
16
|
+
readonly MENUITEM: "menuitem";
|
|
17
|
+
readonly LISTITEM: "listitem";
|
|
18
|
+
readonly OPTION: "option";
|
|
19
|
+
readonly RADIO: "menuitemradio";
|
|
20
|
+
readonly CHECKBOX: "menuitemcheckbox";
|
|
21
|
+
};
|
|
22
|
+
type TypeMenuItemRoles = (typeof MENU_ITEM_ROLES)[keyof typeof MENU_ITEM_ROLES];
|
|
23
|
+
|
|
24
|
+
interface TypeItemElements {
|
|
25
|
+
element: React.ReactElement<TypeMenuItemProps>;
|
|
26
|
+
parents: readonly React.ReactNode[];
|
|
27
|
+
}
|
|
28
|
+
interface TypeDefaultItemProps extends Partial<TypeItemElements> {
|
|
29
|
+
id: string;
|
|
30
|
+
index: number;
|
|
31
|
+
disabled?: boolean;
|
|
32
|
+
}
|
|
33
|
+
type TypeNotEmptyChildren = React.ReactChild | React.ReactFragment | React.ReactPortal;
|
|
34
|
+
|
|
35
|
+
interface TypeMenuItemStyledProps extends TypeBorderSystemProps, TypeColorSystemProps, TypeFlexboxSystemProps, TypeGridSystemProps, TypeLayoutSystemProps, TypePositionSystemProps, TypeSpaceSystemProps, TypeTypographySystemProps {
|
|
36
|
+
}
|
|
37
|
+
interface TypeMenuItemProps extends TypeMenuItemStyledProps, Omit<GetItemPropsOptions<TypeDefaultItemProps>, "as" | "item" | keyof TypeMenuItemStyledProps | keyof TypeDefaultItemProps>, Omit<TypeDefaultItemProps, "index"> {
|
|
38
|
+
label?: string;
|
|
39
|
+
children: React.ReactNode;
|
|
40
|
+
disabled?: boolean;
|
|
41
|
+
role?: TypeMenuItemRoles;
|
|
42
|
+
$highlighted?: boolean;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
declare const MenuItem: ({ id, children, role, label, onClick, onKeyDown, disabled, ref, color, ...props }: TypeMenuItemProps) => react_jsx_runtime.JSX.Element;
|
|
46
|
+
|
|
47
|
+
declare const MenuItemContainer: styled_components.StyledComponent<"li", styled_components.DefaultTheme, {
|
|
48
|
+
$highlighted: boolean;
|
|
49
|
+
}, never>;
|
|
50
|
+
|
|
51
|
+
declare const INPUT_TYPES: {
|
|
52
|
+
readonly CHECKBOX: "checkbox";
|
|
53
|
+
readonly RADIO: "radio";
|
|
54
|
+
readonly SWITCH: "switch";
|
|
55
|
+
readonly ICON: "icon";
|
|
56
|
+
};
|
|
57
|
+
type InputType = (typeof INPUT_TYPES)[keyof typeof INPUT_TYPES];
|
|
58
|
+
interface TypeMenuItemSelectableProps extends TypeMenuItemProps {
|
|
59
|
+
active?: boolean;
|
|
60
|
+
inputType?: InputType;
|
|
61
|
+
inputLabel?: string;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
/**
|
|
65
|
+
* SelectionIndicator - handles logic for appropriate rendering of inputs
|
|
66
|
+
* @returns Checkbox | Icon | Radio | Switch
|
|
67
|
+
*/
|
|
68
|
+
declare const SelectionIndicator: ({ id, inputType, "aria-labelledby": labeledBy, selected, }: {
|
|
69
|
+
id: string;
|
|
70
|
+
"aria-labelledby": string;
|
|
71
|
+
selected: boolean;
|
|
72
|
+
inputType: InputType;
|
|
73
|
+
}) => react_jsx_runtime.JSX.Element | null;
|
|
74
|
+
/**
|
|
75
|
+
* MenuItemSelectable - primitive with controlled input states
|
|
76
|
+
*/
|
|
77
|
+
declare const MenuItemSelectable: ({ id, children, inputType, inputLabel, ...props }: TypeMenuItemSelectableProps) => react_jsx_runtime.JSX.Element;
|
|
78
|
+
|
|
79
|
+
declare const MenuItemSelectableRow: styled_components.StyledComponent<"div", styled_components.DefaultTheme, {}, never>;
|
|
80
|
+
declare const MenuItemSelectableAction: styled_components.StyledComponent<"div", styled_components.DefaultTheme, {}, never>;
|
|
81
|
+
declare const MenuItemSelectableText: styled_components.StyledComponent<"div", styled_components.DefaultTheme, {}, never>;
|
|
82
|
+
|
|
83
|
+
interface TypeMenuHeaderProps extends Omit<React$1.ComponentPropsWithoutRef<"div">, "color">, TypeStyledComponentsCommonProps, TypeBorderSystemProps, TypeColorSystemProps, TypeFlexboxSystemProps, TypeGridSystemProps, TypeLayoutSystemProps, TypeSpaceSystemProps, TypePositionSystemProps {
|
|
84
|
+
title?: string;
|
|
85
|
+
leftAction?: React$1.ReactNode;
|
|
86
|
+
rightAction?: React$1.ReactNode;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
declare const MenuHeader: ({ children, title, leftAction, rightAction, ...rest }: TypeMenuHeaderProps) => react_jsx_runtime.JSX.Element;
|
|
90
|
+
|
|
91
|
+
interface TypeMenuContentProps extends React__default.ButtonHTMLAttributes<HTMLUListElement> {
|
|
92
|
+
children: ReactNode;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
declare const MenuContent: ({ id, children, ...rest }: TypeMenuContentProps) => react_jsx_runtime.JSX.Element;
|
|
96
|
+
|
|
97
|
+
declare const MenuFooter: ({ children, ...rest }: TypeBoxProps) => react_jsx_runtime.JSX.Element;
|
|
98
|
+
|
|
99
|
+
interface TypeMenuGroupStyledProps extends TypeBorderSystemProps, TypeColorSystemProps, TypeFlexboxSystemProps, TypeGridSystemProps, TypeLayoutSystemProps, TypePositionSystemProps, TypeSpaceSystemProps, TypeTypographySystemProps {
|
|
100
|
+
}
|
|
101
|
+
interface TypeMenuGroupProps extends TypeMenuGroupStyledProps, Omit<React.ComponentPropsWithoutRef<"ul">, "color"> {
|
|
102
|
+
title?: string;
|
|
103
|
+
children: ReactNode;
|
|
104
|
+
titleAs?: string | React.ComponentType<any>;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
declare const MenuGroup: ({ titleAs, children, title, color, ...rest }: TypeMenuGroupProps) => react_jsx_runtime.JSX.Element;
|
|
108
|
+
|
|
109
|
+
declare const StyledMenuGroup: styled_components.StyledComponent<"li", styled_components.DefaultTheme, TypeMenuGroupProps, never>;
|
|
110
|
+
declare const StyledTitle: styled_components.StyledComponent<"span", styled_components.DefaultTheme, _sproutsocial_seeds_react_text.TypeTextProps, never>;
|
|
111
|
+
declare const StyledMenuGroupUl: styled_components.StyledComponent<"ul", styled_components.DefaultTheme, {}, never>;
|
|
112
|
+
|
|
113
|
+
interface TypeDownshiftMultiSelectProps extends Partial<UseSelectProps<TypeDefaultItemProps>>, Partial<Omit<UseMultipleSelectionProps<TypeDefaultItemProps>, "stateReducer" | "onStateChange" | "getA11yStatusMessage">> {
|
|
114
|
+
getA11yMultiStatusMessage?: UseMultipleSelectionProps<TypeDefaultItemProps>["getA11yStatusMessage"];
|
|
115
|
+
onMultiSelectStateChange?: UseMultipleSelectionProps<TypeDefaultItemProps>["onStateChange"];
|
|
116
|
+
multiSelectStateReducer?: UseMultipleSelectionProps<TypeDefaultItemProps>["stateReducer"];
|
|
117
|
+
}
|
|
118
|
+
interface TypeMenuContextProps extends Partial<UseSelectReturnValue<TypeDefaultItemProps>>, Partial<UseMultipleSelectionReturnValue<TypeDefaultItemProps>>, TypeDownshiftMultiSelectProps {
|
|
119
|
+
items: TypeDefaultItemProps[];
|
|
120
|
+
isListbox?: boolean;
|
|
121
|
+
}
|
|
122
|
+
interface TypeMenuContext extends TypeMenuContextProps {
|
|
123
|
+
itemsMap: {
|
|
124
|
+
[key: string]: TypeDefaultItemProps;
|
|
125
|
+
};
|
|
126
|
+
}
|
|
127
|
+
interface TypeMenuProviderProps extends Partial<TypeMenuContextProps> {
|
|
128
|
+
children: TypeNotEmptyChildren;
|
|
129
|
+
}
|
|
130
|
+
/**
|
|
131
|
+
* Hook for initializing Menu context
|
|
132
|
+
*/
|
|
133
|
+
declare const useMenu: ({ items, isListbox, isOpen, ...rest }?: Partial<TypeMenuContextProps>) => TypeMenuContext;
|
|
134
|
+
/**
|
|
135
|
+
* MenuContext factory, sets the type and the initial object
|
|
136
|
+
*/
|
|
137
|
+
declare const MenuContext: React__default.Context<TypeMenuContext>;
|
|
138
|
+
/**
|
|
139
|
+
* Provider Component sets the context values into the provider
|
|
140
|
+
*/
|
|
141
|
+
declare const MenuProvider: ({ children, ...overrides }: TypeMenuProviderProps) => react_jsx_runtime.JSX.Element;
|
|
142
|
+
/**
|
|
143
|
+
* Utility hook for consuming MenuContext
|
|
144
|
+
*/
|
|
145
|
+
declare const useMenuContext: () => TypeMenuContext;
|
|
146
|
+
|
|
147
|
+
interface TypeMenuRootOwnProps {
|
|
148
|
+
triggerElement: React__default.ReactElement<any>;
|
|
149
|
+
popoutProps?: Partial<Omit<TypePopoutProps, "isOpen" | "setIsOpen" | "content" | "children">>;
|
|
150
|
+
width?: TypePopoutProps["width"];
|
|
151
|
+
}
|
|
152
|
+
interface TypeMenuRootProps extends Partial<TypeMenuProviderProps>, TypeMenuRootOwnProps {
|
|
153
|
+
}
|
|
154
|
+
declare const MenuRoot: ({ children, triggerElement, popoutProps, width, ...contextProps }: TypeMenuRootProps) => react_jsx_runtime.JSX.Element;
|
|
155
|
+
|
|
156
|
+
declare const MenuLabel: ({ children, ...rest }: TypeTextProps) => react_jsx_runtime.JSX.Element;
|
|
157
|
+
|
|
158
|
+
interface TypeMenuToggleButtonProps extends Partial<TypeButtonProps> {
|
|
159
|
+
children: ReactNode;
|
|
160
|
+
}
|
|
161
|
+
declare const MenuToggleButton: ({ children, ...rest }: TypeMenuToggleButtonProps) => react_jsx_runtime.JSX.Element;
|
|
162
|
+
|
|
163
|
+
type TypeInvalidMenuProps = "initialSelectedItem" | "defaultSelectedItem" | "selectedItem";
|
|
164
|
+
interface TypeActionMenuProps extends TypeMenuRootOwnProps, Partial<Omit<UseSelectProps<TypeDefaultItemProps>, TypeInvalidMenuProps>> {
|
|
165
|
+
children: TypeMenuRootProps["children"];
|
|
166
|
+
}
|
|
167
|
+
declare const ActionMenu: ({ children, stateReducer: externalStateReducer, ...useSelectProps }: TypeActionMenuProps) => react_jsx_runtime.JSX.Element;
|
|
168
|
+
|
|
169
|
+
interface TypeSingleSelectMenuProps extends TypeMenuRootOwnProps, Partial<UseSelectProps<TypeDefaultItemProps>> {
|
|
170
|
+
children: TypeMenuRootProps["children"];
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
declare const SingleSelectMenu: ({ children, stateReducer: externalStateReducer, ...useSelectProps }: TypeSingleSelectMenuProps) => react_jsx_runtime.JSX.Element;
|
|
174
|
+
|
|
175
|
+
interface TypeMultiSelectMenuProps extends TypeMenuRootOwnProps, TypeDownshiftMultiSelectProps {
|
|
176
|
+
children: TypeMenuRootProps["children"];
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
declare const MultiSelectMenu: ({ children, stateReducer: externalStateReducer, getA11yMultiStatusMessage, onMultiSelectStateChange, multiSelectStateReducer, ...useSelectProps }: TypeMultiSelectMenuProps) => react_jsx_runtime.JSX.Element;
|
|
180
|
+
|
|
181
|
+
interface TypeUseItemsFromChildrenProps {
|
|
182
|
+
children: ReactNode;
|
|
183
|
+
}
|
|
184
|
+
declare const useItemsFromChildren: ({ children, }: TypeUseItemsFromChildrenProps) => {
|
|
185
|
+
allMenuItems: TypeDefaultItemProps[];
|
|
186
|
+
menuItemsMap: {
|
|
187
|
+
[key: string]: TypeDefaultItemProps;
|
|
188
|
+
};
|
|
189
|
+
};
|
|
190
|
+
|
|
191
|
+
declare const useSelectStateReducer: Required<UseSelectProps<TypeDefaultItemProps>>["stateReducer"];
|
|
192
|
+
declare const defaultUseSelectProps: {
|
|
193
|
+
stateReducer: (state: downshift.UseSelectState<TypeDefaultItemProps>, actionAndChanges: downshift.UseSelectStateChangeOptions<TypeDefaultItemProps>) => Partial<downshift.UseSelectState<TypeDefaultItemProps>>;
|
|
194
|
+
isItemDisabled: (item: any) => boolean;
|
|
195
|
+
};
|
|
196
|
+
|
|
197
|
+
export { ActionMenu, INPUT_TYPES, type InputType, MenuContent, MenuContext, MenuFooter, MenuGroup, MenuHeader, MenuItem, MenuItemContainer, MenuItemSelectable, MenuItemSelectableAction, MenuItemSelectableRow, MenuItemSelectableText, MenuLabel, MenuProvider, MenuRoot, MenuToggleButton, MultiSelectMenu, SelectionIndicator, SingleSelectMenu, StyledMenuGroup, StyledMenuGroupUl, StyledTitle, type TypeActionMenuProps, type TypeDownshiftMultiSelectProps, type TypeMenuContentProps, type TypeMenuContext, type TypeMenuContextProps, type TypeMenuGroupProps, type TypeMenuGroupStyledProps, type TypeMenuHeaderProps, type TypeMenuItemProps, type TypeMenuItemSelectableProps, type TypeMenuItemStyledProps, type TypeMenuProviderProps, type TypeMenuRootOwnProps, type TypeMenuRootProps, type TypeMenuToggleButtonProps, type TypeSingleSelectMenuProps, type TypeUseItemsFromChildrenProps, defaultUseSelectProps, useItemsFromChildren, useMenu, useMenuContext, useSelectStateReducer };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,197 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import * as downshift from 'downshift';
|
|
3
|
+
import { GetItemPropsOptions, UseSelectProps, UseMultipleSelectionProps, UseSelectReturnValue, UseMultipleSelectionReturnValue } from 'downshift';
|
|
4
|
+
import { TypeBorderSystemProps, TypeColorSystemProps, TypeFlexboxSystemProps, TypeGridSystemProps, TypeLayoutSystemProps, TypePositionSystemProps, TypeSpaceSystemProps, TypeTypographySystemProps, TypeStyledComponentsCommonProps } from '@sproutsocial/seeds-react-system-props';
|
|
5
|
+
import * as styled_components from 'styled-components';
|
|
6
|
+
import * as React$1 from 'react';
|
|
7
|
+
import React__default, { ReactNode } from 'react';
|
|
8
|
+
import { TypeBoxProps } from '@sproutsocial/seeds-react-box';
|
|
9
|
+
export { TypeBoxProps as TypeMenuFooterProps } from '@sproutsocial/seeds-react-box';
|
|
10
|
+
import * as _sproutsocial_seeds_react_text from '@sproutsocial/seeds-react-text';
|
|
11
|
+
import { TypeTextProps } from '@sproutsocial/seeds-react-text';
|
|
12
|
+
import { TypePopoutProps } from '@sproutsocial/seeds-react-popout';
|
|
13
|
+
import { TypeButtonProps } from '@sproutsocial/seeds-react-button';
|
|
14
|
+
|
|
15
|
+
declare const MENU_ITEM_ROLES: {
|
|
16
|
+
readonly MENUITEM: "menuitem";
|
|
17
|
+
readonly LISTITEM: "listitem";
|
|
18
|
+
readonly OPTION: "option";
|
|
19
|
+
readonly RADIO: "menuitemradio";
|
|
20
|
+
readonly CHECKBOX: "menuitemcheckbox";
|
|
21
|
+
};
|
|
22
|
+
type TypeMenuItemRoles = (typeof MENU_ITEM_ROLES)[keyof typeof MENU_ITEM_ROLES];
|
|
23
|
+
|
|
24
|
+
interface TypeItemElements {
|
|
25
|
+
element: React.ReactElement<TypeMenuItemProps>;
|
|
26
|
+
parents: readonly React.ReactNode[];
|
|
27
|
+
}
|
|
28
|
+
interface TypeDefaultItemProps extends Partial<TypeItemElements> {
|
|
29
|
+
id: string;
|
|
30
|
+
index: number;
|
|
31
|
+
disabled?: boolean;
|
|
32
|
+
}
|
|
33
|
+
type TypeNotEmptyChildren = React.ReactChild | React.ReactFragment | React.ReactPortal;
|
|
34
|
+
|
|
35
|
+
interface TypeMenuItemStyledProps extends TypeBorderSystemProps, TypeColorSystemProps, TypeFlexboxSystemProps, TypeGridSystemProps, TypeLayoutSystemProps, TypePositionSystemProps, TypeSpaceSystemProps, TypeTypographySystemProps {
|
|
36
|
+
}
|
|
37
|
+
interface TypeMenuItemProps extends TypeMenuItemStyledProps, Omit<GetItemPropsOptions<TypeDefaultItemProps>, "as" | "item" | keyof TypeMenuItemStyledProps | keyof TypeDefaultItemProps>, Omit<TypeDefaultItemProps, "index"> {
|
|
38
|
+
label?: string;
|
|
39
|
+
children: React.ReactNode;
|
|
40
|
+
disabled?: boolean;
|
|
41
|
+
role?: TypeMenuItemRoles;
|
|
42
|
+
$highlighted?: boolean;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
declare const MenuItem: ({ id, children, role, label, onClick, onKeyDown, disabled, ref, color, ...props }: TypeMenuItemProps) => react_jsx_runtime.JSX.Element;
|
|
46
|
+
|
|
47
|
+
declare const MenuItemContainer: styled_components.StyledComponent<"li", styled_components.DefaultTheme, {
|
|
48
|
+
$highlighted: boolean;
|
|
49
|
+
}, never>;
|
|
50
|
+
|
|
51
|
+
declare const INPUT_TYPES: {
|
|
52
|
+
readonly CHECKBOX: "checkbox";
|
|
53
|
+
readonly RADIO: "radio";
|
|
54
|
+
readonly SWITCH: "switch";
|
|
55
|
+
readonly ICON: "icon";
|
|
56
|
+
};
|
|
57
|
+
type InputType = (typeof INPUT_TYPES)[keyof typeof INPUT_TYPES];
|
|
58
|
+
interface TypeMenuItemSelectableProps extends TypeMenuItemProps {
|
|
59
|
+
active?: boolean;
|
|
60
|
+
inputType?: InputType;
|
|
61
|
+
inputLabel?: string;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
/**
|
|
65
|
+
* SelectionIndicator - handles logic for appropriate rendering of inputs
|
|
66
|
+
* @returns Checkbox | Icon | Radio | Switch
|
|
67
|
+
*/
|
|
68
|
+
declare const SelectionIndicator: ({ id, inputType, "aria-labelledby": labeledBy, selected, }: {
|
|
69
|
+
id: string;
|
|
70
|
+
"aria-labelledby": string;
|
|
71
|
+
selected: boolean;
|
|
72
|
+
inputType: InputType;
|
|
73
|
+
}) => react_jsx_runtime.JSX.Element | null;
|
|
74
|
+
/**
|
|
75
|
+
* MenuItemSelectable - primitive with controlled input states
|
|
76
|
+
*/
|
|
77
|
+
declare const MenuItemSelectable: ({ id, children, inputType, inputLabel, ...props }: TypeMenuItemSelectableProps) => react_jsx_runtime.JSX.Element;
|
|
78
|
+
|
|
79
|
+
declare const MenuItemSelectableRow: styled_components.StyledComponent<"div", styled_components.DefaultTheme, {}, never>;
|
|
80
|
+
declare const MenuItemSelectableAction: styled_components.StyledComponent<"div", styled_components.DefaultTheme, {}, never>;
|
|
81
|
+
declare const MenuItemSelectableText: styled_components.StyledComponent<"div", styled_components.DefaultTheme, {}, never>;
|
|
82
|
+
|
|
83
|
+
interface TypeMenuHeaderProps extends Omit<React$1.ComponentPropsWithoutRef<"div">, "color">, TypeStyledComponentsCommonProps, TypeBorderSystemProps, TypeColorSystemProps, TypeFlexboxSystemProps, TypeGridSystemProps, TypeLayoutSystemProps, TypeSpaceSystemProps, TypePositionSystemProps {
|
|
84
|
+
title?: string;
|
|
85
|
+
leftAction?: React$1.ReactNode;
|
|
86
|
+
rightAction?: React$1.ReactNode;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
declare const MenuHeader: ({ children, title, leftAction, rightAction, ...rest }: TypeMenuHeaderProps) => react_jsx_runtime.JSX.Element;
|
|
90
|
+
|
|
91
|
+
interface TypeMenuContentProps extends React__default.ButtonHTMLAttributes<HTMLUListElement> {
|
|
92
|
+
children: ReactNode;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
declare const MenuContent: ({ id, children, ...rest }: TypeMenuContentProps) => react_jsx_runtime.JSX.Element;
|
|
96
|
+
|
|
97
|
+
declare const MenuFooter: ({ children, ...rest }: TypeBoxProps) => react_jsx_runtime.JSX.Element;
|
|
98
|
+
|
|
99
|
+
interface TypeMenuGroupStyledProps extends TypeBorderSystemProps, TypeColorSystemProps, TypeFlexboxSystemProps, TypeGridSystemProps, TypeLayoutSystemProps, TypePositionSystemProps, TypeSpaceSystemProps, TypeTypographySystemProps {
|
|
100
|
+
}
|
|
101
|
+
interface TypeMenuGroupProps extends TypeMenuGroupStyledProps, Omit<React.ComponentPropsWithoutRef<"ul">, "color"> {
|
|
102
|
+
title?: string;
|
|
103
|
+
children: ReactNode;
|
|
104
|
+
titleAs?: string | React.ComponentType<any>;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
declare const MenuGroup: ({ titleAs, children, title, color, ...rest }: TypeMenuGroupProps) => react_jsx_runtime.JSX.Element;
|
|
108
|
+
|
|
109
|
+
declare const StyledMenuGroup: styled_components.StyledComponent<"li", styled_components.DefaultTheme, TypeMenuGroupProps, never>;
|
|
110
|
+
declare const StyledTitle: styled_components.StyledComponent<"span", styled_components.DefaultTheme, _sproutsocial_seeds_react_text.TypeTextProps, never>;
|
|
111
|
+
declare const StyledMenuGroupUl: styled_components.StyledComponent<"ul", styled_components.DefaultTheme, {}, never>;
|
|
112
|
+
|
|
113
|
+
interface TypeDownshiftMultiSelectProps extends Partial<UseSelectProps<TypeDefaultItemProps>>, Partial<Omit<UseMultipleSelectionProps<TypeDefaultItemProps>, "stateReducer" | "onStateChange" | "getA11yStatusMessage">> {
|
|
114
|
+
getA11yMultiStatusMessage?: UseMultipleSelectionProps<TypeDefaultItemProps>["getA11yStatusMessage"];
|
|
115
|
+
onMultiSelectStateChange?: UseMultipleSelectionProps<TypeDefaultItemProps>["onStateChange"];
|
|
116
|
+
multiSelectStateReducer?: UseMultipleSelectionProps<TypeDefaultItemProps>["stateReducer"];
|
|
117
|
+
}
|
|
118
|
+
interface TypeMenuContextProps extends Partial<UseSelectReturnValue<TypeDefaultItemProps>>, Partial<UseMultipleSelectionReturnValue<TypeDefaultItemProps>>, TypeDownshiftMultiSelectProps {
|
|
119
|
+
items: TypeDefaultItemProps[];
|
|
120
|
+
isListbox?: boolean;
|
|
121
|
+
}
|
|
122
|
+
interface TypeMenuContext extends TypeMenuContextProps {
|
|
123
|
+
itemsMap: {
|
|
124
|
+
[key: string]: TypeDefaultItemProps;
|
|
125
|
+
};
|
|
126
|
+
}
|
|
127
|
+
interface TypeMenuProviderProps extends Partial<TypeMenuContextProps> {
|
|
128
|
+
children: TypeNotEmptyChildren;
|
|
129
|
+
}
|
|
130
|
+
/**
|
|
131
|
+
* Hook for initializing Menu context
|
|
132
|
+
*/
|
|
133
|
+
declare const useMenu: ({ items, isListbox, isOpen, ...rest }?: Partial<TypeMenuContextProps>) => TypeMenuContext;
|
|
134
|
+
/**
|
|
135
|
+
* MenuContext factory, sets the type and the initial object
|
|
136
|
+
*/
|
|
137
|
+
declare const MenuContext: React__default.Context<TypeMenuContext>;
|
|
138
|
+
/**
|
|
139
|
+
* Provider Component sets the context values into the provider
|
|
140
|
+
*/
|
|
141
|
+
declare const MenuProvider: ({ children, ...overrides }: TypeMenuProviderProps) => react_jsx_runtime.JSX.Element;
|
|
142
|
+
/**
|
|
143
|
+
* Utility hook for consuming MenuContext
|
|
144
|
+
*/
|
|
145
|
+
declare const useMenuContext: () => TypeMenuContext;
|
|
146
|
+
|
|
147
|
+
interface TypeMenuRootOwnProps {
|
|
148
|
+
triggerElement: React__default.ReactElement<any>;
|
|
149
|
+
popoutProps?: Partial<Omit<TypePopoutProps, "isOpen" | "setIsOpen" | "content" | "children">>;
|
|
150
|
+
width?: TypePopoutProps["width"];
|
|
151
|
+
}
|
|
152
|
+
interface TypeMenuRootProps extends Partial<TypeMenuProviderProps>, TypeMenuRootOwnProps {
|
|
153
|
+
}
|
|
154
|
+
declare const MenuRoot: ({ children, triggerElement, popoutProps, width, ...contextProps }: TypeMenuRootProps) => react_jsx_runtime.JSX.Element;
|
|
155
|
+
|
|
156
|
+
declare const MenuLabel: ({ children, ...rest }: TypeTextProps) => react_jsx_runtime.JSX.Element;
|
|
157
|
+
|
|
158
|
+
interface TypeMenuToggleButtonProps extends Partial<TypeButtonProps> {
|
|
159
|
+
children: ReactNode;
|
|
160
|
+
}
|
|
161
|
+
declare const MenuToggleButton: ({ children, ...rest }: TypeMenuToggleButtonProps) => react_jsx_runtime.JSX.Element;
|
|
162
|
+
|
|
163
|
+
type TypeInvalidMenuProps = "initialSelectedItem" | "defaultSelectedItem" | "selectedItem";
|
|
164
|
+
interface TypeActionMenuProps extends TypeMenuRootOwnProps, Partial<Omit<UseSelectProps<TypeDefaultItemProps>, TypeInvalidMenuProps>> {
|
|
165
|
+
children: TypeMenuRootProps["children"];
|
|
166
|
+
}
|
|
167
|
+
declare const ActionMenu: ({ children, stateReducer: externalStateReducer, ...useSelectProps }: TypeActionMenuProps) => react_jsx_runtime.JSX.Element;
|
|
168
|
+
|
|
169
|
+
interface TypeSingleSelectMenuProps extends TypeMenuRootOwnProps, Partial<UseSelectProps<TypeDefaultItemProps>> {
|
|
170
|
+
children: TypeMenuRootProps["children"];
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
declare const SingleSelectMenu: ({ children, stateReducer: externalStateReducer, ...useSelectProps }: TypeSingleSelectMenuProps) => react_jsx_runtime.JSX.Element;
|
|
174
|
+
|
|
175
|
+
interface TypeMultiSelectMenuProps extends TypeMenuRootOwnProps, TypeDownshiftMultiSelectProps {
|
|
176
|
+
children: TypeMenuRootProps["children"];
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
declare const MultiSelectMenu: ({ children, stateReducer: externalStateReducer, getA11yMultiStatusMessage, onMultiSelectStateChange, multiSelectStateReducer, ...useSelectProps }: TypeMultiSelectMenuProps) => react_jsx_runtime.JSX.Element;
|
|
180
|
+
|
|
181
|
+
interface TypeUseItemsFromChildrenProps {
|
|
182
|
+
children: ReactNode;
|
|
183
|
+
}
|
|
184
|
+
declare const useItemsFromChildren: ({ children, }: TypeUseItemsFromChildrenProps) => {
|
|
185
|
+
allMenuItems: TypeDefaultItemProps[];
|
|
186
|
+
menuItemsMap: {
|
|
187
|
+
[key: string]: TypeDefaultItemProps;
|
|
188
|
+
};
|
|
189
|
+
};
|
|
190
|
+
|
|
191
|
+
declare const useSelectStateReducer: Required<UseSelectProps<TypeDefaultItemProps>>["stateReducer"];
|
|
192
|
+
declare const defaultUseSelectProps: {
|
|
193
|
+
stateReducer: (state: downshift.UseSelectState<TypeDefaultItemProps>, actionAndChanges: downshift.UseSelectStateChangeOptions<TypeDefaultItemProps>) => Partial<downshift.UseSelectState<TypeDefaultItemProps>>;
|
|
194
|
+
isItemDisabled: (item: any) => boolean;
|
|
195
|
+
};
|
|
196
|
+
|
|
197
|
+
export { ActionMenu, INPUT_TYPES, type InputType, MenuContent, MenuContext, MenuFooter, MenuGroup, MenuHeader, MenuItem, MenuItemContainer, MenuItemSelectable, MenuItemSelectableAction, MenuItemSelectableRow, MenuItemSelectableText, MenuLabel, MenuProvider, MenuRoot, MenuToggleButton, MultiSelectMenu, SelectionIndicator, SingleSelectMenu, StyledMenuGroup, StyledMenuGroupUl, StyledTitle, type TypeActionMenuProps, type TypeDownshiftMultiSelectProps, type TypeMenuContentProps, type TypeMenuContext, type TypeMenuContextProps, type TypeMenuGroupProps, type TypeMenuGroupStyledProps, type TypeMenuHeaderProps, type TypeMenuItemProps, type TypeMenuItemSelectableProps, type TypeMenuItemStyledProps, type TypeMenuProviderProps, type TypeMenuRootOwnProps, type TypeMenuRootProps, type TypeMenuToggleButtonProps, type TypeSingleSelectMenuProps, type TypeUseItemsFromChildrenProps, defaultUseSelectProps, useItemsFromChildren, useMenu, useMenuContext, useSelectStateReducer };
|