@sproutsocial/seeds-react-menu 1.2.1 → 1.2.2
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 +6 -0
- package/dist/esm/index.js +63 -62
- package/dist/esm/index.js.map +1 -1
- package/dist/index.d.mts +119 -59
- package/dist/index.d.ts +119 -59
- package/dist/index.js +91 -91
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/ActionMenu/ActionMenu.tsx +2 -2
- package/src/Autocomplete/Autocomplete.stories.tsx +6 -18
- package/src/Autocomplete/Autocomplete.tsx +2 -3
- package/src/Autocomplete/AutocompleteTypes.ts +16 -12
- package/src/Autocomplete/SingleAutocomplete.tsx +2 -3
- package/src/MenuContent/MenuContent.tsx +4 -4
- package/src/MenuContext.tsx +3 -0
- package/src/MenuFooter/MenuFooter.tsx +2 -2
- package/src/MenuGroup/MenuGroup.tsx +4 -4
- package/src/MenuHeader/MenuHeader.tsx +4 -2
- package/src/MenuLabel.tsx +32 -2
- package/src/MenuRoot/MenuRoot.tsx +7 -17
- package/src/MenuSearchInput/MenuSearchInput.tsx +5 -11
- package/src/MenuSearchTokenInput/MenuSearchTokenInput.tsx +6 -3
- package/src/MenuToggleButton/MenuToggleButton.tsx +11 -12
- package/src/MenuTokenInput.tsx +10 -4
- package/src/MultiSelectMenu/MultiSelectMenu.tsx +4 -3
- package/src/NestedMenu/NestedMenu.feature +2 -2
- package/src/NestedMenu/NestedMenuTypes.ts +3 -0
- package/src/SingleSelectMenu/SingleSelectMenu.tsx +5 -4
- package/src/hooks/useItemFiltering.tsx +2 -1
- package/src/hooks/useMenuChildren.tsx +1 -1
- package/src/types.ts +28 -15
package/dist/index.js
CHANGED
|
@@ -127,7 +127,6 @@ __export(index_exports, {
|
|
|
127
127
|
MenuLabel: () => MenuLabel,
|
|
128
128
|
MenuPopout: () => MenuPopout,
|
|
129
129
|
MenuRoot: () => MenuRoot,
|
|
130
|
-
MenuRootNoPopout: () => MenuRootNoPopout,
|
|
131
130
|
MenuSearchInput: () => MenuSearchInput,
|
|
132
131
|
MenuSearchTokenInput: () => MenuSearchTokenInput,
|
|
133
132
|
MenuToggleButton: () => MenuToggleButton,
|
|
@@ -2743,32 +2742,36 @@ var MenuRoot = ({
|
|
|
2743
2742
|
}
|
|
2744
2743
|
);
|
|
2745
2744
|
};
|
|
2746
|
-
var MenuRootNoPopout = ({
|
|
2747
|
-
children,
|
|
2748
|
-
menuToggleElement,
|
|
2749
|
-
...contextProps
|
|
2750
|
-
}) => {
|
|
2751
|
-
const menuContext = useMenu(contextProps);
|
|
2752
|
-
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MenuContentProvider, { menuContext, children });
|
|
2753
|
-
};
|
|
2754
2745
|
|
|
2755
2746
|
// src/MenuLabel.tsx
|
|
2756
2747
|
var import_react11 = require("react");
|
|
2757
2748
|
var import_seeds_react_label = require("@sproutsocial/seeds-react-label");
|
|
2758
|
-
var import_jsx_runtime11 =
|
|
2759
|
-
|
|
2749
|
+
var import_jsx_runtime11 = (
|
|
2750
|
+
// This fallback id should never be used, but it is here to satisfy TypeScript since getLabelProps could be undefined.
|
|
2751
|
+
require("react/jsx-runtime")
|
|
2752
|
+
);
|
|
2753
|
+
var MenuLabel = ({
|
|
2754
|
+
children,
|
|
2755
|
+
required = false,
|
|
2756
|
+
...rest
|
|
2757
|
+
}) => {
|
|
2760
2758
|
const { getLabelProps } = useMenuToggleContext();
|
|
2761
|
-
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
2759
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
2760
|
+
import_seeds_react_label.Label,
|
|
2761
|
+
{
|
|
2762
|
+
htmlFor: "fallback_menu_label",
|
|
2763
|
+
required,
|
|
2764
|
+
...getLabelProps?.(),
|
|
2765
|
+
...rest,
|
|
2766
|
+
children
|
|
2767
|
+
}
|
|
2768
|
+
);
|
|
2762
2769
|
};
|
|
2763
2770
|
|
|
2764
2771
|
// src/MenuToggleButton/MenuToggleButton.tsx
|
|
2765
|
-
var import_react12 = require("react");
|
|
2766
2772
|
var import_seeds_react_button = require("@sproutsocial/seeds-react-button");
|
|
2767
2773
|
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
2768
|
-
var MenuToggleButton = ({
|
|
2769
|
-
children,
|
|
2770
|
-
...rest
|
|
2771
|
-
}) => {
|
|
2774
|
+
var MenuToggleButton = (props) => {
|
|
2772
2775
|
const { getToggleButtonProps, isListbox, getDropdownProps, ref, ariaProps } = useMenuToggleContext();
|
|
2773
2776
|
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
2774
2777
|
import_seeds_react_button.Button,
|
|
@@ -2781,18 +2784,17 @@ var MenuToggleButton = ({
|
|
|
2781
2784
|
...ariaProps,
|
|
2782
2785
|
...isListbox ? {} : { role: "button", "aria-haspopup": "menu" }
|
|
2783
2786
|
}),
|
|
2784
|
-
...
|
|
2785
|
-
children
|
|
2787
|
+
...props
|
|
2786
2788
|
}
|
|
2787
2789
|
);
|
|
2788
2790
|
};
|
|
2789
2791
|
|
|
2790
2792
|
// src/MenuSearchInput/MenuSearchInput.tsx
|
|
2791
|
-
var
|
|
2793
|
+
var import_react13 = __toESM(require("react"));
|
|
2792
2794
|
var import_seeds_react_input = require("@sproutsocial/seeds-react-input");
|
|
2793
2795
|
|
|
2794
2796
|
// src/hooks/useItemFiltering.tsx
|
|
2795
|
-
var
|
|
2797
|
+
var import_react12 = __toESM(require("react"));
|
|
2796
2798
|
|
|
2797
2799
|
// src/utils/downshiftDefaults.ts
|
|
2798
2800
|
var itemToString = (item) => {
|
|
@@ -2812,8 +2814,8 @@ var useItemFiltering = ({
|
|
|
2812
2814
|
getShouldFilter = defaultGetShouldFilter,
|
|
2813
2815
|
setHiddenItemsMap: setHiddenItemsMapProp
|
|
2814
2816
|
}) => {
|
|
2815
|
-
const [hiddenItemsMap, setHiddenItemsMap] =
|
|
2816
|
-
const updateFilteredItems =
|
|
2817
|
+
const [hiddenItemsMap, setHiddenItemsMap] = import_react12.default.useState({});
|
|
2818
|
+
const updateFilteredItems = import_react12.default.useCallback(
|
|
2817
2819
|
({ inputValue }) => {
|
|
2818
2820
|
const newHiddenItems = getShouldFilter({ inputValue }) ? allMenuItems.reduce((map, item) => {
|
|
2819
2821
|
const isItemVisible = getIsItemVisible(item, inputValue);
|
|
@@ -2850,11 +2852,11 @@ var MenuSearchInput = ({
|
|
|
2850
2852
|
getIsItemVisible,
|
|
2851
2853
|
setHiddenItemsMap
|
|
2852
2854
|
});
|
|
2853
|
-
|
|
2855
|
+
import_react13.default.useEffect(() => {
|
|
2854
2856
|
updateFilteredItems({ inputValue: restInputProps.value || "" });
|
|
2855
2857
|
}, [isOpen, restInputProps.value]);
|
|
2856
2858
|
const toggleButtonProps = getToggleButtonProps?.() || {};
|
|
2857
|
-
const handleKeyDown =
|
|
2859
|
+
const handleKeyDown = import_react13.default.useCallback(
|
|
2858
2860
|
(e) => {
|
|
2859
2861
|
if (e.key === " ") return;
|
|
2860
2862
|
toggleButtonProps.onKeyDown?.(e);
|
|
@@ -2881,7 +2883,7 @@ var MenuSearchInput = ({
|
|
|
2881
2883
|
};
|
|
2882
2884
|
|
|
2883
2885
|
// src/MenuTokenInput.tsx
|
|
2884
|
-
var
|
|
2886
|
+
var import_react14 = __toESM(require("react"));
|
|
2885
2887
|
var import_styled_components11 = __toESM(require("styled-components"));
|
|
2886
2888
|
var import_seeds_react_token_input = require("@sproutsocial/seeds-react-token-input");
|
|
2887
2889
|
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
@@ -2914,7 +2916,7 @@ var MenuTokenInput = ({
|
|
|
2914
2916
|
removeSelectedItem,
|
|
2915
2917
|
setActiveIndex,
|
|
2916
2918
|
selectedItems = []
|
|
2917
|
-
} =
|
|
2919
|
+
} = import_react14.default.useContext(MenuContext);
|
|
2918
2920
|
const removeToken = (tokenId) => {
|
|
2919
2921
|
const tokenToRemove = selectedItems?.find((item) => item.id === tokenId);
|
|
2920
2922
|
tokenToRemove && removeSelectedItem?.(tokenToRemove);
|
|
@@ -2968,7 +2970,7 @@ var MenuTokenInput = ({
|
|
|
2968
2970
|
};
|
|
2969
2971
|
|
|
2970
2972
|
// src/MenuSearchTokenInput/MenuSearchTokenInput.tsx
|
|
2971
|
-
var
|
|
2973
|
+
var import_react15 = __toESM(require("react"));
|
|
2972
2974
|
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
2973
2975
|
var MenuSearchTokenInput = ({
|
|
2974
2976
|
getIsItemVisible,
|
|
@@ -2992,10 +2994,10 @@ var MenuSearchTokenInput = ({
|
|
|
2992
2994
|
setHiddenItemsMap
|
|
2993
2995
|
});
|
|
2994
2996
|
const controlledValue = value || inputPropsValue !== void 0 ? `${inputPropsValue}` : void 0;
|
|
2995
|
-
const [internalValue, setInternalValue] =
|
|
2997
|
+
const [internalValue, setInternalValue] = import_react15.default.useState(
|
|
2996
2998
|
controlledValue || ""
|
|
2997
2999
|
);
|
|
2998
|
-
const updateFilteredState =
|
|
3000
|
+
const updateFilteredState = import_react15.default.useCallback(
|
|
2999
3001
|
// defaults to an empty string if no value is passed
|
|
3000
3002
|
(value2 = "") => {
|
|
3001
3003
|
setInternalValue(value2);
|
|
@@ -3003,14 +3005,14 @@ var MenuSearchTokenInput = ({
|
|
|
3003
3005
|
},
|
|
3004
3006
|
[updateFilteredItems]
|
|
3005
3007
|
);
|
|
3006
|
-
|
|
3008
|
+
import_react15.default.useEffect(() => {
|
|
3007
3009
|
updateFilteredState(controlledValue);
|
|
3008
3010
|
}, [controlledValue]);
|
|
3009
|
-
|
|
3011
|
+
import_react15.default.useEffect(() => {
|
|
3010
3012
|
updateFilteredState(controlledValue);
|
|
3011
3013
|
}, [isOpen]);
|
|
3012
3014
|
const toggleButtonProps = getToggleButtonProps?.() || {};
|
|
3013
|
-
const handleKeyDown =
|
|
3015
|
+
const handleKeyDown = import_react15.default.useCallback(
|
|
3014
3016
|
(e) => {
|
|
3015
3017
|
if (e.key === " ") return;
|
|
3016
3018
|
toggleButtonProps.onKeyDown?.(e);
|
|
@@ -3038,7 +3040,7 @@ var MenuSearchTokenInput = ({
|
|
|
3038
3040
|
};
|
|
3039
3041
|
|
|
3040
3042
|
// src/SubmenuItem/SubmenuItem.tsx
|
|
3041
|
-
var
|
|
3043
|
+
var import_react16 = __toESM(require("react"));
|
|
3042
3044
|
var import_seeds_react_icon2 = require("@sproutsocial/seeds-react-icon");
|
|
3043
3045
|
var import_seeds_react_box3 = require("@sproutsocial/seeds-react-box");
|
|
3044
3046
|
var import_seeds_react_utilities2 = require("@sproutsocial/seeds-react-utilities");
|
|
@@ -3100,17 +3102,17 @@ var SubmenuItem = ({
|
|
|
3100
3102
|
itemsMap,
|
|
3101
3103
|
isOpen: parentIsOpen
|
|
3102
3104
|
} = useMenuContentContext();
|
|
3103
|
-
const [submenuIsFocused, setSubmenuIsFocused] =
|
|
3104
|
-
const [submenuIsOpen, setSubmenuIsOpen] =
|
|
3105
|
-
const [submenuIsActive, setSubmenuIsActive] =
|
|
3106
|
-
const submenuItemRef =
|
|
3107
|
-
const submenuRef =
|
|
3105
|
+
const [submenuIsFocused, setSubmenuIsFocused] = import_react16.default.useState(false);
|
|
3106
|
+
const [submenuIsOpen, setSubmenuIsOpen] = import_react16.default.useState(false);
|
|
3107
|
+
const [submenuIsActive, setSubmenuIsActive] = import_react16.default.useState(false);
|
|
3108
|
+
const submenuItemRef = import_react16.default.useRef(null);
|
|
3109
|
+
const submenuRef = import_react16.default.useRef(null);
|
|
3108
3110
|
const menuContent = menuItems ? getChildrenFromMenuItems({ menuItems, MenuItemComponent }) : menuChildren;
|
|
3109
3111
|
const item = itemsMap[id] || {
|
|
3110
3112
|
index: 0,
|
|
3111
3113
|
id
|
|
3112
3114
|
};
|
|
3113
|
-
|
|
3115
|
+
import_react16.default.useEffect(() => {
|
|
3114
3116
|
if (highlightedIndex === item.index) {
|
|
3115
3117
|
!submenuIsOpen && setSubmenuIsOpen(true);
|
|
3116
3118
|
} else if (submenuIsOpen && highlightedIndex !== -1) {
|
|
@@ -3118,7 +3120,7 @@ var SubmenuItem = ({
|
|
|
3118
3120
|
setSubmenuIsActive(false);
|
|
3119
3121
|
}
|
|
3120
3122
|
}, [highlightedIndex, item.index, submenuIsOpen, setSubmenuIsOpen]);
|
|
3121
|
-
const onSubmenuStateChange =
|
|
3123
|
+
const onSubmenuStateChange = import_react16.default.useCallback(
|
|
3122
3124
|
(state) => {
|
|
3123
3125
|
if (state.isOpen !== void 0) {
|
|
3124
3126
|
setSubmenuIsOpen(state.isOpen);
|
|
@@ -3162,7 +3164,7 @@ var SubmenuItem = ({
|
|
|
3162
3164
|
onMenuItemClick();
|
|
3163
3165
|
}
|
|
3164
3166
|
};
|
|
3165
|
-
|
|
3167
|
+
import_react16.default.useEffect(() => {
|
|
3166
3168
|
if (document && document.body) {
|
|
3167
3169
|
document.body.addEventListener("click", onBodyClick, {
|
|
3168
3170
|
capture: true
|
|
@@ -3266,11 +3268,11 @@ var ListboxToggleButton = ({
|
|
|
3266
3268
|
};
|
|
3267
3269
|
|
|
3268
3270
|
// src/ActionMenu/ActionMenu.tsx
|
|
3269
|
-
var
|
|
3271
|
+
var import_react18 = __toESM(require("react"));
|
|
3270
3272
|
var import_downshift3 = require("downshift");
|
|
3271
3273
|
|
|
3272
3274
|
// src/hooks/useDownshiftDefaults.tsx
|
|
3273
|
-
var
|
|
3275
|
+
var import_react17 = __toESM(require("react"));
|
|
3274
3276
|
|
|
3275
3277
|
// src/reducers/useComboboxStateReducer.tsx
|
|
3276
3278
|
var import_downshift = require("downshift");
|
|
@@ -3394,12 +3396,12 @@ var useDownshiftDefaults = ({
|
|
|
3394
3396
|
isMulti = false,
|
|
3395
3397
|
multiSelectProps = {}
|
|
3396
3398
|
} = {}) => {
|
|
3397
|
-
const [hiddenItemsMap, setHiddenItemsMap] =
|
|
3398
|
-
const hiddenItemsCount =
|
|
3399
|
+
const [hiddenItemsMap, setHiddenItemsMap] = import_react17.default.useState({});
|
|
3400
|
+
const hiddenItemsCount = import_react17.default.useMemo(
|
|
3399
3401
|
() => Object.keys(hiddenItemsMap).filter(Boolean).length,
|
|
3400
3402
|
[hiddenItemsMap]
|
|
3401
3403
|
);
|
|
3402
|
-
const isItemDisabled =
|
|
3404
|
+
const isItemDisabled = import_react17.default.useCallback(
|
|
3403
3405
|
(item) => Boolean(item.disabled || hiddenItemsMap[item.id]),
|
|
3404
3406
|
[hiddenItemsMap]
|
|
3405
3407
|
);
|
|
@@ -3478,7 +3480,7 @@ var ActionMenu = ({
|
|
|
3478
3480
|
const { defaultDownshiftProps, ...restDefaults } = useDownshiftDefaults({
|
|
3479
3481
|
isCombobox: false
|
|
3480
3482
|
});
|
|
3481
|
-
const [currentSelectedItem, setCurrentSelectedItem] =
|
|
3483
|
+
const [currentSelectedItem, setCurrentSelectedItem] = import_react18.default.useState(null);
|
|
3482
3484
|
const { isOpen, ...useSelectReturnProps } = (0, import_downshift3.useSelect)({
|
|
3483
3485
|
...defaultDownshiftProps.select,
|
|
3484
3486
|
items: allMenuItems,
|
|
@@ -3490,7 +3492,7 @@ var ActionMenu = ({
|
|
|
3490
3492
|
),
|
|
3491
3493
|
...useSelectProps
|
|
3492
3494
|
});
|
|
3493
|
-
(0,
|
|
3495
|
+
(0, import_react18.useEffect)(() => {
|
|
3494
3496
|
setCurrentSelectedItem(useSelectReturnProps.selectedItem);
|
|
3495
3497
|
}, [useSelectReturnProps.selectedItem]);
|
|
3496
3498
|
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
@@ -3512,7 +3514,7 @@ var ActionMenu = ({
|
|
|
3512
3514
|
};
|
|
3513
3515
|
|
|
3514
3516
|
// src/SingleSelectMenu/SingleSelectMenu.tsx
|
|
3515
|
-
var
|
|
3517
|
+
var import_react19 = require("react");
|
|
3516
3518
|
var import_downshift4 = require("downshift");
|
|
3517
3519
|
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
3518
3520
|
var SingleSelectMenu = ({
|
|
@@ -3560,7 +3562,7 @@ var SingleSelectMenu = ({
|
|
|
3560
3562
|
};
|
|
3561
3563
|
|
|
3562
3564
|
// src/MultiSelectMenu/MultiSelectMenu.tsx
|
|
3563
|
-
var
|
|
3565
|
+
var import_react20 = require("react");
|
|
3564
3566
|
var import_downshift5 = require("downshift");
|
|
3565
3567
|
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
3566
3568
|
var MultiSelectMenu = ({
|
|
@@ -3663,10 +3665,9 @@ var MultiSelectMenu = ({
|
|
|
3663
3665
|
};
|
|
3664
3666
|
|
|
3665
3667
|
// src/Autocomplete/Autocomplete.tsx
|
|
3666
|
-
var
|
|
3668
|
+
var import_react22 = require("react");
|
|
3667
3669
|
|
|
3668
3670
|
// src/Autocomplete/SingleAutocomplete.tsx
|
|
3669
|
-
var import_react22 = require("react");
|
|
3670
3671
|
var import_downshift6 = require("downshift");
|
|
3671
3672
|
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
3672
3673
|
var SingleAutocomplete = ({
|
|
@@ -3724,7 +3725,7 @@ var SingleAutocomplete = ({
|
|
|
3724
3725
|
};
|
|
3725
3726
|
|
|
3726
3727
|
// src/Autocomplete/MultiAutocomplete.tsx
|
|
3727
|
-
var
|
|
3728
|
+
var import_react21 = __toESM(require("react"));
|
|
3728
3729
|
var import_downshift7 = require("downshift");
|
|
3729
3730
|
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
3730
3731
|
var MultiAutocomplete = ({
|
|
@@ -3750,15 +3751,15 @@ var MultiAutocomplete = ({
|
|
|
3750
3751
|
menuItems,
|
|
3751
3752
|
MenuItemComponent
|
|
3752
3753
|
});
|
|
3753
|
-
const [selectedItems, setSelectedItems] =
|
|
3754
|
-
const [selectedItemIds, setSelectedItemIds] =
|
|
3755
|
-
const getIsItemVisibleMulti =
|
|
3754
|
+
const [selectedItems, setSelectedItems] = import_react21.default.useState(initialSelectedItems);
|
|
3755
|
+
const [selectedItemIds, setSelectedItemIds] = import_react21.default.useState(getSelectedItemIds(initialSelectedItems));
|
|
3756
|
+
const getIsItemVisibleMulti = import_react21.default.useCallback(
|
|
3756
3757
|
(item, inputValue) => {
|
|
3757
3758
|
return (showSelectedItemsInDropdown || !selectedItemIds[item.id]) && getIsItemVisible(item, inputValue);
|
|
3758
3759
|
},
|
|
3759
3760
|
[selectedItemIds, showSelectedItemsInDropdown, getIsItemVisible]
|
|
3760
3761
|
);
|
|
3761
|
-
const getShouldFilterMulti =
|
|
3762
|
+
const getShouldFilterMulti = import_react21.default.useCallback(
|
|
3762
3763
|
(args) => {
|
|
3763
3764
|
return !showSelectedItemsInDropdown && Object.keys(selectedItemIds).length > 0 || defaultGetShouldFilter(args);
|
|
3764
3765
|
},
|
|
@@ -3782,7 +3783,7 @@ var MultiAutocomplete = ({
|
|
|
3782
3783
|
getShouldFilter: getShouldFilterMulti,
|
|
3783
3784
|
setHiddenItemsMap
|
|
3784
3785
|
});
|
|
3785
|
-
|
|
3786
|
+
import_react21.default.useEffect(() => {
|
|
3786
3787
|
updateFilteredItems({ inputValue: "" });
|
|
3787
3788
|
}, [selectedItemIds]);
|
|
3788
3789
|
const useMultipleSelectionReturnProps = (0, import_downshift7.useMultipleSelection)({
|
|
@@ -3862,7 +3863,7 @@ var MultiAutocomplete = ({
|
|
|
3862
3863
|
// src/Autocomplete/Autocomplete.tsx
|
|
3863
3864
|
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
3864
3865
|
var Autocomplete = ({
|
|
3865
|
-
multiSelect,
|
|
3866
|
+
multiSelect = false,
|
|
3866
3867
|
...rest
|
|
3867
3868
|
}) => {
|
|
3868
3869
|
if (multiSelect) {
|
|
@@ -3872,7 +3873,7 @@ var Autocomplete = ({
|
|
|
3872
3873
|
};
|
|
3873
3874
|
|
|
3874
3875
|
// src/Autocomplete/AutocompleteInput.tsx
|
|
3875
|
-
var
|
|
3876
|
+
var import_react23 = require("react");
|
|
3876
3877
|
var import_seeds_react_input2 = require("@sproutsocial/seeds-react-input");
|
|
3877
3878
|
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
3878
3879
|
var AutocompleteInput = ({
|
|
@@ -3910,7 +3911,7 @@ var AutocompleteInput = ({
|
|
|
3910
3911
|
};
|
|
3911
3912
|
|
|
3912
3913
|
// src/Autocomplete/AutocompleteTokenInput.tsx
|
|
3913
|
-
var
|
|
3914
|
+
var import_react24 = require("react");
|
|
3914
3915
|
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
3915
3916
|
var AutocompleteTokenInput = ({
|
|
3916
3917
|
onKeyDown,
|
|
@@ -3954,7 +3955,7 @@ var AutocompleteTokenInput = ({
|
|
|
3954
3955
|
|
|
3955
3956
|
// src/Autocomplete/AutocompleteSelect.tsx
|
|
3956
3957
|
var import_seeds_react_icon4 = __toESM(require("@sproutsocial/seeds-react-icon"));
|
|
3957
|
-
var
|
|
3958
|
+
var import_react25 = require("react");
|
|
3958
3959
|
var import_styled_components13 = __toESM(require("styled-components"));
|
|
3959
3960
|
var import_seeds_react_input3 = require("@sproutsocial/seeds-react-input");
|
|
3960
3961
|
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
@@ -3974,8 +3975,8 @@ var AutocompleteSelect = (props) => {
|
|
|
3974
3975
|
};
|
|
3975
3976
|
|
|
3976
3977
|
// src/NestedMenu/NestedMenu.tsx
|
|
3977
|
-
var
|
|
3978
|
-
var
|
|
3978
|
+
var import_react31 = require("react");
|
|
3979
|
+
var import_react32 = require("motion/react");
|
|
3979
3980
|
var import_downshift9 = require("downshift");
|
|
3980
3981
|
|
|
3981
3982
|
// src/reducers/nestedMenuStateReducer.tsx
|
|
@@ -4003,7 +4004,7 @@ var nestedMenuStateReducer = (_state, actionAndChanges) => {
|
|
|
4003
4004
|
};
|
|
4004
4005
|
|
|
4005
4006
|
// src/NestedMenu/NestedMenuContext.tsx
|
|
4006
|
-
var
|
|
4007
|
+
var import_react26 = require("react");
|
|
4007
4008
|
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
4008
4009
|
var defaultNestedMenuContext = {
|
|
4009
4010
|
selectedMenuPath: [],
|
|
@@ -4021,7 +4022,7 @@ var defaultNestedMenuContext = {
|
|
|
4021
4022
|
},
|
|
4022
4023
|
animationSpeed: MOTION_DURATION_FAST
|
|
4023
4024
|
};
|
|
4024
|
-
var NestedMenuContext = (0,
|
|
4025
|
+
var NestedMenuContext = (0, import_react26.createContext)(
|
|
4025
4026
|
defaultNestedMenuContext
|
|
4026
4027
|
);
|
|
4027
4028
|
var NestedMenuProvider = ({
|
|
@@ -4031,7 +4032,7 @@ var NestedMenuProvider = ({
|
|
|
4031
4032
|
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(NestedMenuContext.Provider, { value: nestedMenuProps, children });
|
|
4032
4033
|
};
|
|
4033
4034
|
var useNestedMenuContext = () => {
|
|
4034
|
-
const nestedMenuContextValue = (0,
|
|
4035
|
+
const nestedMenuContextValue = (0, import_react26.useContext)(NestedMenuContext);
|
|
4035
4036
|
if (nestedMenuContextValue === null) {
|
|
4036
4037
|
throw new Error(
|
|
4037
4038
|
"useNestedMenuContext must be used within a <NestedMenuContext.Provider />"
|
|
@@ -4041,7 +4042,7 @@ var useNestedMenuContext = () => {
|
|
|
4041
4042
|
};
|
|
4042
4043
|
|
|
4043
4044
|
// src/NestedMenu/NestedMenuContent.tsx
|
|
4044
|
-
var
|
|
4045
|
+
var import_react27 = require("react");
|
|
4045
4046
|
var import_seeds_react_utilities3 = require("@sproutsocial/seeds-react-utilities");
|
|
4046
4047
|
|
|
4047
4048
|
// src/NestedMenu/NestedMenuItem.tsx
|
|
@@ -4082,10 +4083,10 @@ var NestedMenuContent = ({
|
|
|
4082
4083
|
}) => {
|
|
4083
4084
|
const { highlightedIndex, items } = useMenuContentContext();
|
|
4084
4085
|
const { setSelectedMenuId, selectedMenuPath, goBack } = useNestedMenuContext();
|
|
4085
|
-
const internalRef = (0,
|
|
4086
|
+
const internalRef = (0, import_react27.useRef)(null);
|
|
4086
4087
|
const innerRef = (0, import_seeds_react_utilities3.mergeRefs)(internalRef, innerRefProp);
|
|
4087
4088
|
const contentProps = children ? { children } : { menuItems, MenuItemComponent };
|
|
4088
|
-
(0,
|
|
4089
|
+
(0, import_react27.useEffect)(() => {
|
|
4089
4090
|
internalRef?.current?.focus();
|
|
4090
4091
|
}, []);
|
|
4091
4092
|
const onKeyDown = (e) => {
|
|
@@ -4123,7 +4124,7 @@ NestedMenuContent.__MENU_PRIMITIVE_TYPE = "MenuContent";
|
|
|
4123
4124
|
// src/NestedMenu/NestedMenuHeader.tsx
|
|
4124
4125
|
var import_seeds_react_button2 = require("@sproutsocial/seeds-react-button");
|
|
4125
4126
|
var import_seeds_react_icon6 = require("@sproutsocial/seeds-react-icon");
|
|
4126
|
-
var
|
|
4127
|
+
var import_react28 = require("motion/react");
|
|
4127
4128
|
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
4128
4129
|
var NestedMenuHeader = ({
|
|
4129
4130
|
backArrowLabel,
|
|
@@ -4134,8 +4135,8 @@ var NestedMenuHeader = ({
|
|
|
4134
4135
|
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
4135
4136
|
MenuHeader,
|
|
4136
4137
|
{
|
|
4137
|
-
leftAction: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
4138
|
-
|
|
4138
|
+
leftAction: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react28.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
4139
|
+
import_react28.motion.div,
|
|
4139
4140
|
{
|
|
4140
4141
|
initial: { opacity: 0 },
|
|
4141
4142
|
animate: { opacity: 1 },
|
|
@@ -4153,7 +4154,7 @@ var NestedMenuHeader = ({
|
|
|
4153
4154
|
};
|
|
4154
4155
|
|
|
4155
4156
|
// src/NestedMenu/NestedMenuRoot.tsx
|
|
4156
|
-
var
|
|
4157
|
+
var import_react29 = __toESM(require("react"));
|
|
4157
4158
|
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
4158
4159
|
var NestedMenuRoot = ({
|
|
4159
4160
|
children,
|
|
@@ -4162,7 +4163,7 @@ var NestedMenuRoot = ({
|
|
|
4162
4163
|
}) => {
|
|
4163
4164
|
const menuContext = useMenu(contextProps);
|
|
4164
4165
|
const { setActiveMenuContext, selectedMenuPath } = useNestedMenuContext();
|
|
4165
|
-
|
|
4166
|
+
import_react29.default.useEffect(() => {
|
|
4166
4167
|
setActiveMenuContext(menuContext);
|
|
4167
4168
|
}, [
|
|
4168
4169
|
selectedMenuPath[selectedMenuPath.length - 1],
|
|
@@ -4173,10 +4174,10 @@ var NestedMenuRoot = ({
|
|
|
4173
4174
|
};
|
|
4174
4175
|
|
|
4175
4176
|
// src/NestedMenu/NestedMenuPopout.tsx
|
|
4176
|
-
var
|
|
4177
|
+
var import_react30 = require("motion/react");
|
|
4177
4178
|
var import_styled_components14 = __toESM(require("styled-components"));
|
|
4178
4179
|
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
4179
|
-
var StyledDiv = (0, import_styled_components14.default)(
|
|
4180
|
+
var StyledDiv = (0, import_styled_components14.default)(import_react30.motion.div)`
|
|
4180
4181
|
overflow: hidden;
|
|
4181
4182
|
`;
|
|
4182
4183
|
var NestedMenuPopout = ({
|
|
@@ -4228,9 +4229,9 @@ var NestedMenu = ({
|
|
|
4228
4229
|
const { defaultDownshiftProps, ...restDefaults } = useDownshiftDefaults({
|
|
4229
4230
|
isCombobox: false
|
|
4230
4231
|
});
|
|
4231
|
-
const uniqueId = (0,
|
|
4232
|
+
const uniqueId = (0, import_react31.useId)();
|
|
4232
4233
|
const nestedMenuId = externalNestedMenuId ?? `nested-menu-${uniqueId}`;
|
|
4233
|
-
const [hasLoadedOnce, setHasLoadedOnce] = (0,
|
|
4234
|
+
const [hasLoadedOnce, setHasLoadedOnce] = (0, import_react31.useState)(false);
|
|
4234
4235
|
const useSelectReturnProps = (0, import_downshift9.useSelect)({
|
|
4235
4236
|
...defaultDownshiftProps.select,
|
|
4236
4237
|
id: nestedMenuId,
|
|
@@ -4246,7 +4247,7 @@ var NestedMenu = ({
|
|
|
4246
4247
|
...useSelectReturnProps,
|
|
4247
4248
|
...restDefaults
|
|
4248
4249
|
};
|
|
4249
|
-
(0,
|
|
4250
|
+
(0, import_react31.useEffect)(() => {
|
|
4250
4251
|
if (!useSelectReturnProps.isOpen) {
|
|
4251
4252
|
setHasLoadedOnce(false);
|
|
4252
4253
|
} else {
|
|
@@ -4264,15 +4265,15 @@ var NestedMenu = ({
|
|
|
4264
4265
|
onIsOpenChange: onNestedIsOpenChange
|
|
4265
4266
|
};
|
|
4266
4267
|
rootMenuContextProps.getMenuProps?.({}, { suppressRefError: true });
|
|
4267
|
-
const [selectedMenuPath, setSelectedMenuPath] = (0,
|
|
4268
|
-
const [activeMenuContext, setActiveMenuContext] = (0,
|
|
4269
|
-
const [currentMenuId, setCurrentMenuId] = (0,
|
|
4270
|
-
const [isAdding, setIsAdding] = (0,
|
|
4268
|
+
const [selectedMenuPath, setSelectedMenuPath] = (0, import_react31.useState)([initialMenuId]);
|
|
4269
|
+
const [activeMenuContext, setActiveMenuContext] = (0, import_react31.useState)(defaultMenuContext);
|
|
4270
|
+
const [currentMenuId, setCurrentMenuId] = (0, import_react31.useState)(initialMenuId);
|
|
4271
|
+
const [isAdding, setIsAdding] = (0, import_react31.useState)(false);
|
|
4271
4272
|
const setSelectedMenuId = (id) => {
|
|
4272
4273
|
setIsAdding(true);
|
|
4273
4274
|
setSelectedMenuPath((currentPath) => [...currentPath, id]);
|
|
4274
4275
|
};
|
|
4275
|
-
(0,
|
|
4276
|
+
(0, import_react31.useEffect)(() => {
|
|
4276
4277
|
if (selectedMenuPath.length > 0) {
|
|
4277
4278
|
const newMenuId = selectedMenuPath[selectedMenuPath.length - 1];
|
|
4278
4279
|
setCurrentMenuId(newMenuId);
|
|
@@ -4366,8 +4367,8 @@ var NestedMenu = ({
|
|
|
4366
4367
|
initialIsOpen: true,
|
|
4367
4368
|
children: (
|
|
4368
4369
|
// Handles the smooth animating of the content
|
|
4369
|
-
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
4370
|
-
|
|
4370
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react32.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
|
|
4371
|
+
import_react32.motion.div,
|
|
4371
4372
|
{
|
|
4372
4373
|
variants: contentVariants,
|
|
4373
4374
|
initial: "arrive",
|
|
@@ -4415,8 +4416,8 @@ var NestedMenu = ({
|
|
|
4415
4416
|
NestedMenuPopout,
|
|
4416
4417
|
{
|
|
4417
4418
|
content: MenuComponent && // Handles the rerender of the component
|
|
4418
|
-
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
4419
|
-
|
|
4419
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react32.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
4420
|
+
import_react32.motion.div,
|
|
4420
4421
|
{
|
|
4421
4422
|
variants: menuVariants,
|
|
4422
4423
|
initial: "arrive",
|
|
@@ -4461,7 +4462,6 @@ var NestedMenu = ({
|
|
|
4461
4462
|
MenuLabel,
|
|
4462
4463
|
MenuPopout,
|
|
4463
4464
|
MenuRoot,
|
|
4464
|
-
MenuRootNoPopout,
|
|
4465
4465
|
MenuSearchInput,
|
|
4466
4466
|
MenuSearchTokenInput,
|
|
4467
4467
|
MenuToggleButton,
|