@sproutsocial/seeds-react-menu 1.18.2 → 1.18.4

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.
Files changed (10) hide show
  1. package/.turbo/turbo-build.log +8 -8
  2. package/CHANGELOG.md +38 -0
  3. package/dist/esm/index.js +41 -11
  4. package/dist/esm/index.js.map +1 -1
  5. package/dist/index.js +33 -3
  6. package/dist/index.js.map +1 -1
  7. package/package.json +13 -13
  8. package/src/NestedMenu/NestedMenuPopout.tsx +57 -4
  9. package/src/v3/ModalStories.stories.tsx +5 -125
  10. package/src/v3/MultiCombobox.stories.tsx +5 -9
package/.turbo/turbo-build.log CHANGED
@@ -8,20 +8,20 @@ $ tsup --dts && cp src/v3/menu.css dist/v3/menu.css
8
8
  CLI Cleaning output folder
9
9
  CJS Build start
10
10
  ESM Build start
11
- CJS dist/index.js 92.65 KB
11
+ CJS dist/index.js 93.53 KB
12
12
  CJS dist/v3/index.js 115.54 KB
13
- CJS dist/index.js.map 180.28 KB
13
+ CJS dist/index.js.map 182.70 KB
14
14
  CJS dist/v3/index.js.map 211.06 KB
15
- CJS ⚡️ Build success in 121ms
15
+ CJS ⚡️ Build success in 92ms
16
+ ESM dist/esm/index.js 82.95 KB
16
17
  ESM dist/esm/v3/index.js 102.99 KB
17
- ESM dist/esm/index.js 82.07 KB
18
+ ESM dist/esm/index.js.map 181.93 KB
18
19
  ESM dist/esm/v3/index.js.map 212.08 KB
19
- ESM dist/esm/index.js.map 179.44 KB
20
- ESM ⚡️ Build success in 121ms
20
+ ESM ⚡️ Build success in 92ms
21
21
  DTS Build start
22
- DTS ⚡️ Build success in 4833ms
22
+ DTS ⚡️ Build success in 4363ms
23
23
  DTS dist/index.d.ts 39.12 KB
24
24
  DTS dist/v3/index.d.ts 26.10 KB
25
25
  DTS dist/index.d.mts 39.12 KB
26
26
  DTS dist/v3/index.d.mts 26.10 KB
27
- Done in 5.70s.
27
+ Done in 5.08s.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,43 @@
1
1
  # @sproutsocial/seeds-react-menu
2
2
 
3
+ ## 1.18.4
4
+
5
+ ### Patch Changes
6
+
7
+ - db4415c: Fix `NestedMenu` losing focus to `<body>` when the menu closes. Focus was
8
+ returned to the toggle on a fixed delay that could land while the popout's
9
+ focus lock was still trapping focus, which undid the restore and left focus
10
+ nowhere. The restore now retries until it takes effect.
11
+ - Updated dependencies [db4415c]
12
+ - @sproutsocial/seeds-react-theme@4.7.0
13
+ - @sproutsocial/seeds-react-popout@2.5.26
14
+ - @sproutsocial/seeds-react-box@1.1.34
15
+ - @sproutsocial/seeds-react-icon@2.5.4
16
+ - @sproutsocial/seeds-react-label@1.0.36
17
+ - @sproutsocial/seeds-react-token-input@1.4.67
18
+ - @sproutsocial/seeds-react-checkbox@1.3.57
19
+ - @sproutsocial/seeds-react-input@1.5.45
20
+ - @sproutsocial/seeds-react-button@2.3.11
21
+ - @sproutsocial/seeds-react-switch@1.2.54
22
+ - @sproutsocial/seeds-react-radio@1.3.37
23
+
24
+ ## 1.18.3
25
+
26
+ ### Patch Changes
27
+
28
+ - Updated dependencies [57372fe]
29
+ - @sproutsocial/seeds-react-theme@4.6.0
30
+ - @sproutsocial/seeds-react-box@1.1.33
31
+ - @sproutsocial/seeds-react-icon@2.5.3
32
+ - @sproutsocial/seeds-react-label@1.0.35
33
+ - @sproutsocial/seeds-react-token-input@1.4.66
34
+ - @sproutsocial/seeds-react-checkbox@1.3.56
35
+ - @sproutsocial/seeds-react-input@1.5.44
36
+ - @sproutsocial/seeds-react-popout@2.5.25
37
+ - @sproutsocial/seeds-react-button@2.3.10
38
+ - @sproutsocial/seeds-react-switch@1.2.53
39
+ - @sproutsocial/seeds-react-radio@1.3.36
40
+
3
41
  ## 1.18.2
4
42
 
5
43
  ### Patch Changes
package/dist/esm/index.js CHANGED
@@ -2385,7 +2385,7 @@ var AutocompleteSelect = (props) => {
2385
2385
  };
2386
2386
 
2387
2387
  // src/NestedMenu/NestedMenu.tsx
2388
- import { useEffect as useEffect4, useState, useRef as useRef2 } from "react";
2388
+ import { useEffect as useEffect5, useState, useRef as useRef3 } from "react";
2389
2389
  import { AnimatePresence as AnimatePresence2, motion as motion3 } from "motion/react";
2390
2390
  import { useSelect as useSelect6 } from "downshift";
2391
2391
  import uniqueId from "lodash.uniqueid";
@@ -2589,7 +2589,7 @@ var NestedMenuRoot = ({
2589
2589
  };
2590
2590
 
2591
2591
  // src/NestedMenu/NestedMenuPopout.tsx
2592
- import "react";
2592
+ import { useEffect as useEffect4, useRef as useRef2 } from "react";
2593
2593
  import { motion as motion2 } from "motion/react";
2594
2594
  import styled11 from "styled-components";
2595
2595
  import { mergeRefs as mergeRefs4 } from "@sproutsocial/seeds-react-utilities";
@@ -2597,6 +2597,9 @@ import { jsx as jsx32 } from "react/jsx-runtime";
2597
2597
  var StyledDiv = styled11(motion2.div)`
2598
2598
  overflow: hidden;
2599
2599
  `;
2600
+ var RETURN_FOCUS_DELAY = 200;
2601
+ var RETURN_FOCUS_RETRY_DELAY = 50;
2602
+ var RETURN_FOCUS_BUDGET = 1e3;
2600
2603
  var NestedMenuPopout = ({
2601
2604
  content,
2602
2605
  menuToggleElement,
@@ -2607,16 +2610,43 @@ var NestedMenuPopout = ({
2607
2610
  ...popoutProps
2608
2611
  }) => {
2609
2612
  const { activeMenuContext, rootMenuContextProps, resetSelectedMenuPath } = useNestedMenuContext();
2613
+ const closeTimerRef = useRef2();
2614
+ const retryTimerRef = useRef2();
2615
+ useEffect4(
2616
+ () => () => {
2617
+ clearTimeout(closeTimerRef.current);
2618
+ clearTimeout(retryTimerRef.current);
2619
+ },
2620
+ []
2621
+ );
2622
+ const attemptReturnFocus = (deadline) => {
2623
+ const toggleElement = toggleElementRef.current;
2624
+ if (toggleElement) {
2625
+ if (document.activeElement === toggleElement) {
2626
+ return;
2627
+ }
2628
+ toggleElement.focus();
2629
+ if (document.activeElement === toggleElement) {
2630
+ return;
2631
+ }
2632
+ }
2633
+ if (Date.now() < deadline) {
2634
+ retryTimerRef.current = setTimeout(
2635
+ () => attemptReturnFocus(deadline),
2636
+ RETURN_FOCUS_RETRY_DELAY
2637
+ );
2638
+ }
2639
+ };
2610
2640
  return /* @__PURE__ */ jsx32(
2611
2641
  MenuPopout,
2612
2642
  {
2613
2643
  lockPlacement: true,
2614
2644
  onClose: () => {
2615
2645
  onClose?.();
2616
- setTimeout(() => {
2617
- toggleElementRef.current?.focus();
2646
+ closeTimerRef.current = setTimeout(() => {
2647
+ attemptReturnFocus(Date.now() + RETURN_FOCUS_BUDGET);
2618
2648
  resetSelectedMenuPath?.();
2619
- }, 200);
2649
+ }, RETURN_FOCUS_DELAY);
2620
2650
  },
2621
2651
  isOpen: !!rootMenuContextProps.isOpen,
2622
2652
  openMenu: rootMenuContextProps.openMenu,
@@ -2651,7 +2681,7 @@ var NestedMenuPopout = ({
2651
2681
  import { jsx as jsx33, jsxs as jsxs7 } from "react/jsx-runtime";
2652
2682
  var useId = () => {
2653
2683
  const [id, setId] = useState();
2654
- useEffect4(() => {
2684
+ useEffect5(() => {
2655
2685
  const uId = uniqueId();
2656
2686
  setId(uId);
2657
2687
  }, []);
@@ -2693,7 +2723,7 @@ var NestedMenu = ({
2693
2723
  ...useSelectReturnProps,
2694
2724
  ...restDefaults
2695
2725
  };
2696
- useEffect4(() => {
2726
+ useEffect5(() => {
2697
2727
  if (!useSelectReturnProps.isOpen) {
2698
2728
  setHasLoadedOnce(false);
2699
2729
  } else {
@@ -2715,13 +2745,13 @@ var NestedMenu = ({
2715
2745
  const [activeMenuContext, setActiveMenuContext] = useState(defaultMenuContext);
2716
2746
  const [currentMenuId, setCurrentMenuId] = useState(initialMenuId);
2717
2747
  const [isAdding, setIsAdding] = useState(false);
2718
- const popoutUpdateRef = useRef2();
2719
- const toggleElementRef = useRef2(null);
2748
+ const popoutUpdateRef = useRef3();
2749
+ const toggleElementRef = useRef3(null);
2720
2750
  const setSelectedMenuId = (id) => {
2721
2751
  setIsAdding(true);
2722
2752
  setSelectedMenuPath((currentPath) => [...currentPath, id]);
2723
2753
  };
2724
- useEffect4(() => {
2754
+ useEffect5(() => {
2725
2755
  if (selectedMenuPath.length > 0) {
2726
2756
  const newMenuId = selectedMenuPath[selectedMenuPath.length - 1];
2727
2757
  setCurrentMenuId(newMenuId);
@@ -2846,7 +2876,7 @@ var NestedMenu = ({
2846
2876
  ),
2847
2877
  ...restMenuProps
2848
2878
  };
2849
- useEffect4(() => {
2879
+ useEffect5(() => {
2850
2880
  popoutUpdateRef.current?.();
2851
2881
  }, [nestedMenuProps.children]);
2852
2882
  return /* @__PURE__ */ jsx33(