@sproutsocial/seeds-react-menu 1.1.1 → 1.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/.turbo/turbo-build.log +10 -10
- package/CHANGELOG.md +12 -0
- package/dist/esm/index.js +67 -39
- package/dist/esm/index.js.map +1 -1
- package/dist/index.d.mts +3 -1
- package/dist/index.d.ts +3 -1
- package/dist/index.js +84 -55
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/Autocomplete/Autocomplete.stories.tsx +29 -0
- package/src/Autocomplete/AutocompleteSelect.tsx +24 -0
- package/src/Autocomplete/SingleAutocomplete.tsx +1 -1
- package/src/Autocomplete/index.ts +1 -0
- package/src/MenuContent/styles.tsx +5 -1
- package/src/NestedMenu/NestedMenu.stories.tsx +16 -8
- package/src/NestedMenu/NestedMenuItem.tsx +11 -8
package/dist/index.d.mts
CHANGED
|
@@ -450,6 +450,8 @@ interface TypeAutocompleteTokenInputProps extends TypeDownshiftMergedInputProps<
|
|
|
450
450
|
}
|
|
451
451
|
declare const AutocompleteTokenInput: ({ onKeyDown, onChange, onInput, onBlur, onClick, inputProps, getTokenProps, ...rest }: TypeAutocompleteTokenInputProps) => react_jsx_runtime.JSX.Element;
|
|
452
452
|
|
|
453
|
+
declare const AutocompleteSelect: (props: TypeAutocompleteInputProps) => react_jsx_runtime.JSX.Element;
|
|
454
|
+
|
|
453
455
|
interface TypeNestedMenuMapProps<P, I extends TypeMenuItemProps = TypeNestedMenuItemProps> {
|
|
454
456
|
MenuComponent: React.ComponentType<P>;
|
|
455
457
|
menuProps: Omit<P, "menuToggleElement"> & TypeChildrenOrItems<I>;
|
|
@@ -551,4 +553,4 @@ declare const useMenuChildren: <I extends TypeMenuItemProps = TypeMenuItemProps>
|
|
|
551
553
|
declare const useSelectStateReducer: Required<UseSelectProps<TypeInternalItemProps>>["stateReducer"];
|
|
552
554
|
declare const useSelectStateReducerForMulti: Required<UseSelectProps<TypeInternalItemProps>>["stateReducer"];
|
|
553
555
|
|
|
554
|
-
export { ActionMenu, Autocomplete, AutocompleteInput, AutocompleteTokenInput, CustomPopoutContent, INPUT_TYPES, type InputType, ListboxToggleButton, MenuContent, MenuContentContext, MenuContentProvider, MenuFooter, MenuGroup, MenuHeader, MenuItem, MenuItemAction, MenuItemActionLeft, MenuItemActionRight, MenuItemContainer, MenuItemRow, MenuItemText, MenuLabel, MenuPopout, MenuRoot, MenuRootNoPopout, MenuSearchInput, MenuSearchTokenInput, MenuToggleButton, MenuToggleContext, MenuToggleProvider, MenuTokenInput, MultiSelectMenu, NestedMenu, NestedMenuContent, NestedMenuContext, NestedMenuHeader, NestedMenuItem, NestedMenuProvider, SingleSelectMenu, StyledListboxToggleButton, StyledMenuGroup, StyledMenuGroupUl, StyledMenuItem, StyledTitle, SubmenuItem, type TypeActionMenuBaseProps, type TypeActionMenuProps, type TypeAutocompleteInputProps, type TypeAutocompleteProps, type TypeAutocompleteTokenInputProps, type TypeChildrenOrItems, type TypeDownshiftComboboxProps, type TypeDownshiftComboboxReturnValue, type TypeDownshiftMergedInputProps, type TypeDownshiftMultiSelectProps, type TypeDownshiftMultiSelectReturnValue, type TypeDownshiftSelectProps, type TypeDownshiftSelectReturnValue, type TypeHigherOrderComponentProps, type TypeInternalItemProps, type TypeItemElement, type TypeListboxToggleButtonProps, type TypeMapMenuItemsProps, type TypeMenuChildren, type TypeMenuContentElement, type TypeMenuContentProps, type TypeMenuContext, type TypeMenuContextBaseProps, type TypeMenuContextProps, type TypeMenuGroupBaseProps, type TypeMenuGroupElement, type TypeMenuGroupProps, type TypeMenuGroupStyledProps, type TypeMenuHeaderProps, type TypeMenuItemProps, type TypeMenuItemStyledProps, type TypeMenuPopoutProps, type TypeMenuProviderProps, type TypeMenuRootOwnProps, type TypeMenuRootProps, type TypeMenuSearchInputProps, type TypeMenuSearchTokenInputProps, type TypeMenuToggleButtonProps, type TypeMenuToggleContext, type TypeMenuToggleProviderProps, type TypeMenuTokenInputProps, type TypeMultiAutocompleteProps, type TypeMultiSelectMenuBaseProps, type TypeMultiSelectMenuProps, type TypeNestedMenuContext, type TypeNestedMenuHeaderProps, type TypeNestedMenuItemProps, type TypeNestedMenuMapProps, type TypeNestedMenuProps, type TypeNestedMenuProviderProps, type TypeNotEmptyChildren, type TypeSingleAutocompleteProps, type TypeSingleSelectMenuBaseProps, type TypeSingleSelectMenuProps, type TypeStyledChevronProps, type TypeSubmenuItemProps, type TypeSubmenuValidMenuComponentProps, checkIfItemSelected, defaultMenuContext, getChildrenFromMenuItems, getSelectedItemIds, mapMenuItems, useMenu, useMenuChildren, useMenuContentContext, useMenuToggleContext, useNestedMenuContext, useSelectStateReducer, useSelectStateReducerForMulti };
|
|
556
|
+
export { ActionMenu, Autocomplete, AutocompleteInput, AutocompleteSelect, AutocompleteTokenInput, CustomPopoutContent, INPUT_TYPES, type InputType, ListboxToggleButton, MenuContent, MenuContentContext, MenuContentProvider, MenuFooter, MenuGroup, MenuHeader, MenuItem, MenuItemAction, MenuItemActionLeft, MenuItemActionRight, MenuItemContainer, MenuItemRow, MenuItemText, MenuLabel, MenuPopout, MenuRoot, MenuRootNoPopout, MenuSearchInput, MenuSearchTokenInput, MenuToggleButton, MenuToggleContext, MenuToggleProvider, MenuTokenInput, MultiSelectMenu, NestedMenu, NestedMenuContent, NestedMenuContext, NestedMenuHeader, NestedMenuItem, NestedMenuProvider, SingleSelectMenu, StyledListboxToggleButton, StyledMenuGroup, StyledMenuGroupUl, StyledMenuItem, StyledTitle, SubmenuItem, type TypeActionMenuBaseProps, type TypeActionMenuProps, type TypeAutocompleteInputProps, type TypeAutocompleteProps, type TypeAutocompleteTokenInputProps, type TypeChildrenOrItems, type TypeDownshiftComboboxProps, type TypeDownshiftComboboxReturnValue, type TypeDownshiftMergedInputProps, type TypeDownshiftMultiSelectProps, type TypeDownshiftMultiSelectReturnValue, type TypeDownshiftSelectProps, type TypeDownshiftSelectReturnValue, type TypeHigherOrderComponentProps, type TypeInternalItemProps, type TypeItemElement, type TypeListboxToggleButtonProps, type TypeMapMenuItemsProps, type TypeMenuChildren, type TypeMenuContentElement, type TypeMenuContentProps, type TypeMenuContext, type TypeMenuContextBaseProps, type TypeMenuContextProps, type TypeMenuGroupBaseProps, type TypeMenuGroupElement, type TypeMenuGroupProps, type TypeMenuGroupStyledProps, type TypeMenuHeaderProps, type TypeMenuItemProps, type TypeMenuItemStyledProps, type TypeMenuPopoutProps, type TypeMenuProviderProps, type TypeMenuRootOwnProps, type TypeMenuRootProps, type TypeMenuSearchInputProps, type TypeMenuSearchTokenInputProps, type TypeMenuToggleButtonProps, type TypeMenuToggleContext, type TypeMenuToggleProviderProps, type TypeMenuTokenInputProps, type TypeMultiAutocompleteProps, type TypeMultiSelectMenuBaseProps, type TypeMultiSelectMenuProps, type TypeNestedMenuContext, type TypeNestedMenuHeaderProps, type TypeNestedMenuItemProps, type TypeNestedMenuMapProps, type TypeNestedMenuProps, type TypeNestedMenuProviderProps, type TypeNotEmptyChildren, type TypeSingleAutocompleteProps, type TypeSingleSelectMenuBaseProps, type TypeSingleSelectMenuProps, type TypeStyledChevronProps, type TypeSubmenuItemProps, type TypeSubmenuValidMenuComponentProps, checkIfItemSelected, defaultMenuContext, getChildrenFromMenuItems, getSelectedItemIds, mapMenuItems, useMenu, useMenuChildren, useMenuContentContext, useMenuToggleContext, useNestedMenuContext, useSelectStateReducer, useSelectStateReducerForMulti };
|
package/dist/index.d.ts
CHANGED
|
@@ -450,6 +450,8 @@ interface TypeAutocompleteTokenInputProps extends TypeDownshiftMergedInputProps<
|
|
|
450
450
|
}
|
|
451
451
|
declare const AutocompleteTokenInput: ({ onKeyDown, onChange, onInput, onBlur, onClick, inputProps, getTokenProps, ...rest }: TypeAutocompleteTokenInputProps) => react_jsx_runtime.JSX.Element;
|
|
452
452
|
|
|
453
|
+
declare const AutocompleteSelect: (props: TypeAutocompleteInputProps) => react_jsx_runtime.JSX.Element;
|
|
454
|
+
|
|
453
455
|
interface TypeNestedMenuMapProps<P, I extends TypeMenuItemProps = TypeNestedMenuItemProps> {
|
|
454
456
|
MenuComponent: React.ComponentType<P>;
|
|
455
457
|
menuProps: Omit<P, "menuToggleElement"> & TypeChildrenOrItems<I>;
|
|
@@ -551,4 +553,4 @@ declare const useMenuChildren: <I extends TypeMenuItemProps = TypeMenuItemProps>
|
|
|
551
553
|
declare const useSelectStateReducer: Required<UseSelectProps<TypeInternalItemProps>>["stateReducer"];
|
|
552
554
|
declare const useSelectStateReducerForMulti: Required<UseSelectProps<TypeInternalItemProps>>["stateReducer"];
|
|
553
555
|
|
|
554
|
-
export { ActionMenu, Autocomplete, AutocompleteInput, AutocompleteTokenInput, CustomPopoutContent, INPUT_TYPES, type InputType, ListboxToggleButton, MenuContent, MenuContentContext, MenuContentProvider, MenuFooter, MenuGroup, MenuHeader, MenuItem, MenuItemAction, MenuItemActionLeft, MenuItemActionRight, MenuItemContainer, MenuItemRow, MenuItemText, MenuLabel, MenuPopout, MenuRoot, MenuRootNoPopout, MenuSearchInput, MenuSearchTokenInput, MenuToggleButton, MenuToggleContext, MenuToggleProvider, MenuTokenInput, MultiSelectMenu, NestedMenu, NestedMenuContent, NestedMenuContext, NestedMenuHeader, NestedMenuItem, NestedMenuProvider, SingleSelectMenu, StyledListboxToggleButton, StyledMenuGroup, StyledMenuGroupUl, StyledMenuItem, StyledTitle, SubmenuItem, type TypeActionMenuBaseProps, type TypeActionMenuProps, type TypeAutocompleteInputProps, type TypeAutocompleteProps, type TypeAutocompleteTokenInputProps, type TypeChildrenOrItems, type TypeDownshiftComboboxProps, type TypeDownshiftComboboxReturnValue, type TypeDownshiftMergedInputProps, type TypeDownshiftMultiSelectProps, type TypeDownshiftMultiSelectReturnValue, type TypeDownshiftSelectProps, type TypeDownshiftSelectReturnValue, type TypeHigherOrderComponentProps, type TypeInternalItemProps, type TypeItemElement, type TypeListboxToggleButtonProps, type TypeMapMenuItemsProps, type TypeMenuChildren, type TypeMenuContentElement, type TypeMenuContentProps, type TypeMenuContext, type TypeMenuContextBaseProps, type TypeMenuContextProps, type TypeMenuGroupBaseProps, type TypeMenuGroupElement, type TypeMenuGroupProps, type TypeMenuGroupStyledProps, type TypeMenuHeaderProps, type TypeMenuItemProps, type TypeMenuItemStyledProps, type TypeMenuPopoutProps, type TypeMenuProviderProps, type TypeMenuRootOwnProps, type TypeMenuRootProps, type TypeMenuSearchInputProps, type TypeMenuSearchTokenInputProps, type TypeMenuToggleButtonProps, type TypeMenuToggleContext, type TypeMenuToggleProviderProps, type TypeMenuTokenInputProps, type TypeMultiAutocompleteProps, type TypeMultiSelectMenuBaseProps, type TypeMultiSelectMenuProps, type TypeNestedMenuContext, type TypeNestedMenuHeaderProps, type TypeNestedMenuItemProps, type TypeNestedMenuMapProps, type TypeNestedMenuProps, type TypeNestedMenuProviderProps, type TypeNotEmptyChildren, type TypeSingleAutocompleteProps, type TypeSingleSelectMenuBaseProps, type TypeSingleSelectMenuProps, type TypeStyledChevronProps, type TypeSubmenuItemProps, type TypeSubmenuValidMenuComponentProps, checkIfItemSelected, defaultMenuContext, getChildrenFromMenuItems, getSelectedItemIds, mapMenuItems, useMenu, useMenuChildren, useMenuContentContext, useMenuToggleContext, useNestedMenuContext, useSelectStateReducer, useSelectStateReducerForMulti };
|
|
556
|
+
export { ActionMenu, Autocomplete, AutocompleteInput, AutocompleteSelect, AutocompleteTokenInput, CustomPopoutContent, INPUT_TYPES, type InputType, ListboxToggleButton, MenuContent, MenuContentContext, MenuContentProvider, MenuFooter, MenuGroup, MenuHeader, MenuItem, MenuItemAction, MenuItemActionLeft, MenuItemActionRight, MenuItemContainer, MenuItemRow, MenuItemText, MenuLabel, MenuPopout, MenuRoot, MenuRootNoPopout, MenuSearchInput, MenuSearchTokenInput, MenuToggleButton, MenuToggleContext, MenuToggleProvider, MenuTokenInput, MultiSelectMenu, NestedMenu, NestedMenuContent, NestedMenuContext, NestedMenuHeader, NestedMenuItem, NestedMenuProvider, SingleSelectMenu, StyledListboxToggleButton, StyledMenuGroup, StyledMenuGroupUl, StyledMenuItem, StyledTitle, SubmenuItem, type TypeActionMenuBaseProps, type TypeActionMenuProps, type TypeAutocompleteInputProps, type TypeAutocompleteProps, type TypeAutocompleteTokenInputProps, type TypeChildrenOrItems, type TypeDownshiftComboboxProps, type TypeDownshiftComboboxReturnValue, type TypeDownshiftMergedInputProps, type TypeDownshiftMultiSelectProps, type TypeDownshiftMultiSelectReturnValue, type TypeDownshiftSelectProps, type TypeDownshiftSelectReturnValue, type TypeHigherOrderComponentProps, type TypeInternalItemProps, type TypeItemElement, type TypeListboxToggleButtonProps, type TypeMapMenuItemsProps, type TypeMenuChildren, type TypeMenuContentElement, type TypeMenuContentProps, type TypeMenuContext, type TypeMenuContextBaseProps, type TypeMenuContextProps, type TypeMenuGroupBaseProps, type TypeMenuGroupElement, type TypeMenuGroupProps, type TypeMenuGroupStyledProps, type TypeMenuHeaderProps, type TypeMenuItemProps, type TypeMenuItemStyledProps, type TypeMenuPopoutProps, type TypeMenuProviderProps, type TypeMenuRootOwnProps, type TypeMenuRootProps, type TypeMenuSearchInputProps, type TypeMenuSearchTokenInputProps, type TypeMenuToggleButtonProps, type TypeMenuToggleContext, type TypeMenuToggleProviderProps, type TypeMenuTokenInputProps, type TypeMultiAutocompleteProps, type TypeMultiSelectMenuBaseProps, type TypeMultiSelectMenuProps, type TypeNestedMenuContext, type TypeNestedMenuHeaderProps, type TypeNestedMenuItemProps, type TypeNestedMenuMapProps, type TypeNestedMenuProps, type TypeNestedMenuProviderProps, type TypeNotEmptyChildren, type TypeSingleAutocompleteProps, type TypeSingleSelectMenuBaseProps, type TypeSingleSelectMenuProps, type TypeStyledChevronProps, type TypeSubmenuItemProps, type TypeSubmenuValidMenuComponentProps, checkIfItemSelected, defaultMenuContext, getChildrenFromMenuItems, getSelectedItemIds, mapMenuItems, useMenu, useMenuChildren, useMenuContentContext, useMenuToggleContext, useNestedMenuContext, useSelectStateReducer, useSelectStateReducerForMulti };
|
package/dist/index.js
CHANGED
|
@@ -106,6 +106,7 @@ __export(index_exports, {
|
|
|
106
106
|
ActionMenu: () => ActionMenu,
|
|
107
107
|
Autocomplete: () => Autocomplete,
|
|
108
108
|
AutocompleteInput: () => AutocompleteInput,
|
|
109
|
+
AutocompleteSelect: () => AutocompleteSelect,
|
|
109
110
|
AutocompleteTokenInput: () => AutocompleteTokenInput,
|
|
110
111
|
CustomPopoutContent: () => CustomPopoutContent,
|
|
111
112
|
INPUT_TYPES: () => INPUT_TYPES,
|
|
@@ -2182,7 +2183,11 @@ var import_styled_components5 = __toESM(require("styled-components"));
|
|
|
2182
2183
|
var StyledMenuContent = import_styled_components5.default.ul`
|
|
2183
2184
|
margin: 0;
|
|
2184
2185
|
padding: 0;
|
|
2185
|
-
|
|
2186
|
+
|
|
2187
|
+
&:focus {
|
|
2188
|
+
outline: none;
|
|
2189
|
+
box-shadow: none;
|
|
2190
|
+
}
|
|
2186
2191
|
`;
|
|
2187
2192
|
|
|
2188
2193
|
// src/hooks/useMenuChildren.tsx
|
|
@@ -3923,9 +3928,30 @@ var AutocompleteTokenInput = ({
|
|
|
3923
3928
|
);
|
|
3924
3929
|
};
|
|
3925
3930
|
|
|
3931
|
+
// src/Autocomplete/AutocompleteSelect.tsx
|
|
3932
|
+
var import_seeds_react_icon4 = __toESM(require("@sproutsocial/seeds-react-icon"));
|
|
3933
|
+
var import_react27 = require("react");
|
|
3934
|
+
var import_styled_components13 = __toESM(require("styled-components"));
|
|
3935
|
+
var import_seeds_react_input3 = require("@sproutsocial/seeds-react-input");
|
|
3936
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
3937
|
+
var StyledAutocompleteInput = (0, import_styled_components13.default)(AutocompleteInput)`
|
|
3938
|
+
${import_seeds_react_input3.Accessory} {
|
|
3939
|
+
pointer-events: none;
|
|
3940
|
+
}
|
|
3941
|
+
`;
|
|
3942
|
+
var AutocompleteSelect = (props) => {
|
|
3943
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
3944
|
+
StyledAutocompleteInput,
|
|
3945
|
+
{
|
|
3946
|
+
elemAfter: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_seeds_react_icon4.default, { name: "chevron-down" }),
|
|
3947
|
+
...props
|
|
3948
|
+
}
|
|
3949
|
+
);
|
|
3950
|
+
};
|
|
3951
|
+
|
|
3926
3952
|
// src/NestedMenu/NestedMenu.tsx
|
|
3927
|
-
var
|
|
3928
|
-
var
|
|
3953
|
+
var import_react33 = require("react");
|
|
3954
|
+
var import_react34 = require("motion/react");
|
|
3929
3955
|
var import_downshift9 = require("downshift");
|
|
3930
3956
|
|
|
3931
3957
|
// src/reducers/nestedMenuStateReducer.tsx
|
|
@@ -3953,8 +3979,8 @@ var nestedMenuStateReducer = (_state, actionAndChanges) => {
|
|
|
3953
3979
|
};
|
|
3954
3980
|
|
|
3955
3981
|
// src/NestedMenu/NestedMenuContext.tsx
|
|
3956
|
-
var
|
|
3957
|
-
var
|
|
3982
|
+
var import_react28 = require("react");
|
|
3983
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
3958
3984
|
var defaultNestedMenuContext = {
|
|
3959
3985
|
selectedMenuPath: [],
|
|
3960
3986
|
setSelectedMenuId: () => {
|
|
@@ -3971,17 +3997,17 @@ var defaultNestedMenuContext = {
|
|
|
3971
3997
|
},
|
|
3972
3998
|
animationSpeed: MOTION_DURATION_FAST
|
|
3973
3999
|
};
|
|
3974
|
-
var NestedMenuContext = (0,
|
|
4000
|
+
var NestedMenuContext = (0, import_react28.createContext)(
|
|
3975
4001
|
defaultNestedMenuContext
|
|
3976
4002
|
);
|
|
3977
4003
|
var NestedMenuProvider = ({
|
|
3978
4004
|
children,
|
|
3979
4005
|
...nestedMenuProps
|
|
3980
4006
|
}) => {
|
|
3981
|
-
return /* @__PURE__ */ (0,
|
|
4007
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(NestedMenuContext.Provider, { value: nestedMenuProps, children });
|
|
3982
4008
|
};
|
|
3983
4009
|
var useNestedMenuContext = () => {
|
|
3984
|
-
const nestedMenuContextValue = (0,
|
|
4010
|
+
const nestedMenuContextValue = (0, import_react28.useContext)(NestedMenuContext);
|
|
3985
4011
|
if (nestedMenuContextValue === null) {
|
|
3986
4012
|
throw new Error(
|
|
3987
4013
|
"useNestedMenuContext must be used within a <NestedMenuContext.Provider />"
|
|
@@ -3991,13 +4017,13 @@ var useNestedMenuContext = () => {
|
|
|
3991
4017
|
};
|
|
3992
4018
|
|
|
3993
4019
|
// src/NestedMenu/NestedMenuContent.tsx
|
|
3994
|
-
var
|
|
4020
|
+
var import_react29 = require("react");
|
|
3995
4021
|
var import_seeds_react_utilities2 = require("@sproutsocial/seeds-react-utilities");
|
|
3996
4022
|
|
|
3997
4023
|
// src/NestedMenu/NestedMenuItem.tsx
|
|
3998
|
-
var
|
|
4024
|
+
var import_seeds_react_icon5 = require("@sproutsocial/seeds-react-icon");
|
|
3999
4025
|
var import_seeds_react_box4 = require("@sproutsocial/seeds-react-box");
|
|
4000
|
-
var
|
|
4026
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
4001
4027
|
var NestedMenuItem = ({
|
|
4002
4028
|
children,
|
|
4003
4029
|
childMenuId,
|
|
@@ -4005,21 +4031,23 @@ var NestedMenuItem = ({
|
|
|
4005
4031
|
...rest
|
|
4006
4032
|
}) => {
|
|
4007
4033
|
const { setSelectedMenuId } = useNestedMenuContext();
|
|
4008
|
-
const onClickProps = childMenuId ? {
|
|
4034
|
+
const onClickProps = childMenuId || onClickProp ? {
|
|
4009
4035
|
onClick: (e) => {
|
|
4010
4036
|
onClickProp?.(e);
|
|
4011
|
-
|
|
4037
|
+
if (childMenuId) {
|
|
4038
|
+
setSelectedMenuId?.(childMenuId);
|
|
4039
|
+
}
|
|
4012
4040
|
}
|
|
4013
4041
|
} : {};
|
|
4014
|
-
return /* @__PURE__ */ (0,
|
|
4042
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(MenuItem, { ...onClickProps, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_seeds_react_box4.Box, { display: "flex", justifyContent: "space-between", children: [
|
|
4015
4043
|
children,
|
|
4016
|
-
childMenuId && /* @__PURE__ */ (0,
|
|
4044
|
+
childMenuId && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(MenuItemActionRight, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_seeds_react_icon5.Icon, { name: "arrow-right-outline" }) })
|
|
4017
4045
|
] }) });
|
|
4018
4046
|
};
|
|
4019
4047
|
NestedMenuItem.__MENU_PRIMITIVE_TYPE = "MenuItem";
|
|
4020
4048
|
|
|
4021
4049
|
// src/NestedMenu/NestedMenuContent.tsx
|
|
4022
|
-
var
|
|
4050
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
4023
4051
|
var NestedMenuContent = ({
|
|
4024
4052
|
innerRef: innerRefProp = null,
|
|
4025
4053
|
onKeyDown: onKeyDownProp,
|
|
@@ -4030,10 +4058,10 @@ var NestedMenuContent = ({
|
|
|
4030
4058
|
}) => {
|
|
4031
4059
|
const { highlightedIndex, items } = useMenuContentContext();
|
|
4032
4060
|
const { setSelectedMenuId, selectedMenuPath, goBack } = useNestedMenuContext();
|
|
4033
|
-
const internalRef = (0,
|
|
4061
|
+
const internalRef = (0, import_react29.useRef)(null);
|
|
4034
4062
|
const innerRef = (0, import_seeds_react_utilities2.mergeRefs)(internalRef, innerRefProp);
|
|
4035
4063
|
const contentProps = children ? { children } : { menuItems, MenuItemComponent };
|
|
4036
|
-
(0,
|
|
4064
|
+
(0, import_react29.useEffect)(() => {
|
|
4037
4065
|
internalRef?.current?.focus();
|
|
4038
4066
|
}, []);
|
|
4039
4067
|
const onKeyDown = (e) => {
|
|
@@ -4056,7 +4084,7 @@ var NestedMenuContent = ({
|
|
|
4056
4084
|
break;
|
|
4057
4085
|
}
|
|
4058
4086
|
};
|
|
4059
|
-
return /* @__PURE__ */ (0,
|
|
4087
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
4060
4088
|
MenuContent,
|
|
4061
4089
|
{
|
|
4062
4090
|
onKeyDown,
|
|
@@ -4070,20 +4098,20 @@ NestedMenuContent.__MENU_PRIMITIVE_TYPE = "MenuContent";
|
|
|
4070
4098
|
|
|
4071
4099
|
// src/NestedMenu/NestedMenuHeader.tsx
|
|
4072
4100
|
var import_seeds_react_button2 = require("@sproutsocial/seeds-react-button");
|
|
4073
|
-
var
|
|
4074
|
-
var
|
|
4075
|
-
var
|
|
4101
|
+
var import_seeds_react_icon6 = require("@sproutsocial/seeds-react-icon");
|
|
4102
|
+
var import_react30 = require("motion/react");
|
|
4103
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
4076
4104
|
var NestedMenuHeader = ({
|
|
4077
4105
|
backArrowLabel,
|
|
4078
4106
|
...props
|
|
4079
4107
|
}) => {
|
|
4080
4108
|
const { goBack, selectedMenuPath, animationSpeed } = useNestedMenuContext();
|
|
4081
4109
|
const showBackArrow = selectedMenuPath.length > 1;
|
|
4082
|
-
return /* @__PURE__ */ (0,
|
|
4110
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
4083
4111
|
MenuHeader,
|
|
4084
4112
|
{
|
|
4085
|
-
leftAction: /* @__PURE__ */ (0,
|
|
4086
|
-
|
|
4113
|
+
leftAction: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react30.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
4114
|
+
import_react30.motion.div,
|
|
4087
4115
|
{
|
|
4088
4116
|
initial: { opacity: 0 },
|
|
4089
4117
|
animate: { opacity: 1 },
|
|
@@ -4091,7 +4119,7 @@ var NestedMenuHeader = ({
|
|
|
4091
4119
|
opacity: 0,
|
|
4092
4120
|
transition: { duration: animationSpeed }
|
|
4093
4121
|
},
|
|
4094
|
-
children: showBackArrow ? /* @__PURE__ */ (0,
|
|
4122
|
+
children: showBackArrow ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_seeds_react_button2.Button, { onClick: goBack, ariaLabel: backArrowLabel, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_seeds_react_icon6.Icon, { name: "arrow-left" }) }) : void 0
|
|
4095
4123
|
},
|
|
4096
4124
|
`${selectedMenuPath}-header--button`
|
|
4097
4125
|
) }),
|
|
@@ -4101,8 +4129,8 @@ var NestedMenuHeader = ({
|
|
|
4101
4129
|
};
|
|
4102
4130
|
|
|
4103
4131
|
// src/NestedMenu/NestedMenuRoot.tsx
|
|
4104
|
-
var
|
|
4105
|
-
var
|
|
4132
|
+
var import_react31 = __toESM(require("react"));
|
|
4133
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
4106
4134
|
var NestedMenuRoot = ({
|
|
4107
4135
|
children,
|
|
4108
4136
|
menuToggleElement,
|
|
@@ -4110,21 +4138,21 @@ var NestedMenuRoot = ({
|
|
|
4110
4138
|
}) => {
|
|
4111
4139
|
const menuContext = useMenu(contextProps);
|
|
4112
4140
|
const { setActiveMenuContext, selectedMenuPath } = useNestedMenuContext();
|
|
4113
|
-
|
|
4141
|
+
import_react31.default.useEffect(() => {
|
|
4114
4142
|
setActiveMenuContext(menuContext);
|
|
4115
4143
|
}, [
|
|
4116
4144
|
selectedMenuPath[selectedMenuPath.length - 1],
|
|
4117
4145
|
menuContext.selectedItem,
|
|
4118
4146
|
menuContext.selectedItems?.length
|
|
4119
4147
|
]);
|
|
4120
|
-
return /* @__PURE__ */ (0,
|
|
4148
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MenuContentProvider, { menuContext, children });
|
|
4121
4149
|
};
|
|
4122
4150
|
|
|
4123
4151
|
// src/NestedMenu/NestedMenuPopout.tsx
|
|
4124
|
-
var
|
|
4125
|
-
var
|
|
4126
|
-
var
|
|
4127
|
-
var StyledDiv = (0,
|
|
4152
|
+
var import_react32 = require("motion/react");
|
|
4153
|
+
var import_styled_components14 = __toESM(require("styled-components"));
|
|
4154
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
4155
|
+
var StyledDiv = (0, import_styled_components14.default)(import_react32.motion.div)`
|
|
4128
4156
|
overflow: hidden;
|
|
4129
4157
|
`;
|
|
4130
4158
|
var NestedMenuPopout = ({
|
|
@@ -4134,7 +4162,7 @@ var NestedMenuPopout = ({
|
|
|
4134
4162
|
...popoutProps
|
|
4135
4163
|
}) => {
|
|
4136
4164
|
const { activeMenuContext, rootMenuContextProps, resetSelectedMenuPath } = useNestedMenuContext();
|
|
4137
|
-
return /* @__PURE__ */ (0,
|
|
4165
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
4138
4166
|
MenuPopout,
|
|
4139
4167
|
{
|
|
4140
4168
|
...popoutProps,
|
|
@@ -4143,8 +4171,8 @@ var NestedMenuPopout = ({
|
|
|
4143
4171
|
openMenu: rootMenuContextProps.openMenu,
|
|
4144
4172
|
closeMenu: rootMenuContextProps.closeMenu,
|
|
4145
4173
|
width: width2,
|
|
4146
|
-
content: (props) => /* @__PURE__ */ (0,
|
|
4147
|
-
children: (toggleProps) => /* @__PURE__ */ (0,
|
|
4174
|
+
content: (props) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(StyledDiv, { layout: "position", children: typeof content === "function" ? content(props) : content }),
|
|
4175
|
+
children: (toggleProps) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
4148
4176
|
MenuToggleProvider,
|
|
4149
4177
|
{
|
|
4150
4178
|
menuContext: {
|
|
@@ -4160,7 +4188,7 @@ var NestedMenuPopout = ({
|
|
|
4160
4188
|
};
|
|
4161
4189
|
|
|
4162
4190
|
// src/NestedMenu/NestedMenu.tsx
|
|
4163
|
-
var
|
|
4191
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
4164
4192
|
var NestedMenu = ({
|
|
4165
4193
|
initialMenuId,
|
|
4166
4194
|
menus,
|
|
@@ -4176,9 +4204,9 @@ var NestedMenu = ({
|
|
|
4176
4204
|
const { defaultDownshiftProps, ...restDefaults } = useDownshiftDefaults({
|
|
4177
4205
|
isCombobox: false
|
|
4178
4206
|
});
|
|
4179
|
-
const uniqueId = (0,
|
|
4207
|
+
const uniqueId = (0, import_react33.useId)();
|
|
4180
4208
|
const nestedMenuId = externalNestedMenuId ?? `nested-menu-${uniqueId}`;
|
|
4181
|
-
const [hasLoadedOnce, setHasLoadedOnce] = (0,
|
|
4209
|
+
const [hasLoadedOnce, setHasLoadedOnce] = (0, import_react33.useState)(false);
|
|
4182
4210
|
const useSelectReturnProps = (0, import_downshift9.useSelect)({
|
|
4183
4211
|
...defaultDownshiftProps.select,
|
|
4184
4212
|
id: nestedMenuId,
|
|
@@ -4194,7 +4222,7 @@ var NestedMenu = ({
|
|
|
4194
4222
|
...useSelectReturnProps,
|
|
4195
4223
|
...restDefaults
|
|
4196
4224
|
};
|
|
4197
|
-
(0,
|
|
4225
|
+
(0, import_react33.useEffect)(() => {
|
|
4198
4226
|
if (!useSelectReturnProps.isOpen) {
|
|
4199
4227
|
setHasLoadedOnce(false);
|
|
4200
4228
|
} else {
|
|
@@ -4211,15 +4239,15 @@ var NestedMenu = ({
|
|
|
4211
4239
|
id: nestedMenuId,
|
|
4212
4240
|
onIsOpenChange: onNestedIsOpenChange
|
|
4213
4241
|
};
|
|
4214
|
-
const [selectedMenuPath, setSelectedMenuPath] = (0,
|
|
4215
|
-
const [activeMenuContext, setActiveMenuContext] = (0,
|
|
4216
|
-
const [currentMenuId, setCurrentMenuId] = (0,
|
|
4217
|
-
const [isAdding, setIsAdding] = (0,
|
|
4242
|
+
const [selectedMenuPath, setSelectedMenuPath] = (0, import_react33.useState)([initialMenuId]);
|
|
4243
|
+
const [activeMenuContext, setActiveMenuContext] = (0, import_react33.useState)(defaultMenuContext);
|
|
4244
|
+
const [currentMenuId, setCurrentMenuId] = (0, import_react33.useState)(initialMenuId);
|
|
4245
|
+
const [isAdding, setIsAdding] = (0, import_react33.useState)(false);
|
|
4218
4246
|
const setSelectedMenuId = (id) => {
|
|
4219
4247
|
setIsAdding(true);
|
|
4220
4248
|
setSelectedMenuPath((currentPath) => [...currentPath, id]);
|
|
4221
4249
|
};
|
|
4222
|
-
(0,
|
|
4250
|
+
(0, import_react33.useEffect)(() => {
|
|
4223
4251
|
if (selectedMenuPath.length > 0) {
|
|
4224
4252
|
const newMenuId = selectedMenuPath[selectedMenuPath.length - 1];
|
|
4225
4253
|
setCurrentMenuId(newMenuId);
|
|
@@ -4313,8 +4341,8 @@ var NestedMenu = ({
|
|
|
4313
4341
|
initialIsOpen: true,
|
|
4314
4342
|
children: (
|
|
4315
4343
|
// Handles the smooth animating of the content
|
|
4316
|
-
/* @__PURE__ */ (0,
|
|
4317
|
-
|
|
4344
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react34.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
|
|
4345
|
+
import_react34.motion.div,
|
|
4318
4346
|
{
|
|
4319
4347
|
variants: contentVariants,
|
|
4320
4348
|
initial: "arrive",
|
|
@@ -4322,7 +4350,7 @@ var NestedMenu = ({
|
|
|
4322
4350
|
exit: "leave",
|
|
4323
4351
|
custom: { isAdding, hasLoadedOnce },
|
|
4324
4352
|
children: [
|
|
4325
|
-
MenuHeaderComponent && /* @__PURE__ */ (0,
|
|
4353
|
+
MenuHeaderComponent && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
4326
4354
|
MenuHeaderComponent,
|
|
4327
4355
|
{
|
|
4328
4356
|
backArrowLabel,
|
|
@@ -4330,7 +4358,7 @@ var NestedMenu = ({
|
|
|
4330
4358
|
}
|
|
4331
4359
|
),
|
|
4332
4360
|
children && children,
|
|
4333
|
-
menuItems && !children && /* @__PURE__ */ (0,
|
|
4361
|
+
menuItems && !children && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
4334
4362
|
NestedMenuContent,
|
|
4335
4363
|
{
|
|
4336
4364
|
menuItems,
|
|
@@ -4344,7 +4372,7 @@ var NestedMenu = ({
|
|
|
4344
4372
|
),
|
|
4345
4373
|
...restMenuProps
|
|
4346
4374
|
};
|
|
4347
|
-
return /* @__PURE__ */ (0,
|
|
4375
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
4348
4376
|
NestedMenuProvider,
|
|
4349
4377
|
{
|
|
4350
4378
|
...{
|
|
@@ -4358,19 +4386,19 @@ var NestedMenu = ({
|
|
|
4358
4386
|
setActiveMenuContext,
|
|
4359
4387
|
animationSpeed
|
|
4360
4388
|
},
|
|
4361
|
-
children: /* @__PURE__ */ (0,
|
|
4389
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
4362
4390
|
NestedMenuPopout,
|
|
4363
4391
|
{
|
|
4364
4392
|
content: MenuComponent && // Handles the rerender of the component
|
|
4365
|
-
/* @__PURE__ */ (0,
|
|
4366
|
-
|
|
4393
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react34.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
4394
|
+
import_react34.motion.div,
|
|
4367
4395
|
{
|
|
4368
4396
|
variants: menuVariants,
|
|
4369
4397
|
initial: "arrive",
|
|
4370
4398
|
animate: "enter",
|
|
4371
4399
|
exit: "leave",
|
|
4372
4400
|
custom: { isAdding, hasLoadedOnce },
|
|
4373
|
-
children: /* @__PURE__ */ (0,
|
|
4401
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MenuComponent, { ...nestedMenuProps })
|
|
4374
4402
|
},
|
|
4375
4403
|
`${currentMenuId}-content`
|
|
4376
4404
|
) }),
|
|
@@ -4387,6 +4415,7 @@ var NestedMenu = ({
|
|
|
4387
4415
|
ActionMenu,
|
|
4388
4416
|
Autocomplete,
|
|
4389
4417
|
AutocompleteInput,
|
|
4418
|
+
AutocompleteSelect,
|
|
4390
4419
|
AutocompleteTokenInput,
|
|
4391
4420
|
CustomPopoutContent,
|
|
4392
4421
|
INPUT_TYPES,
|