react-bootstrap · Kalprajsinh · Nov 29, 2024
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,16 @@
+## [2.10.6](https://github.com/react-bootstrap/react-bootstrap/compare/v2.10.5...v2.10.6) (2024-11-25)
+
+
+### Bug Fixes
+
+* **AccordionHeader:** apply aria-controls to button ([#6868](https://github.com/react-bootstrap/react-bootstrap/issues/6868)) ([8475119](https://github.com/react-bootstrap/react-bootstrap/commit/8475119a6c8e9606d5e5cc87e19cf91f1670e224))
+* fix ref access in React 19 ([#6869](https://github.com/react-bootstrap/react-bootstrap/issues/6869)) ([2c65f5d](https://github.com/react-bootstrap/react-bootstrap/commit/2c65f5de1a50d28e4c4e6c4c7d0dc332a68e6bd7))
+* **Nav:** remove prop-types-extra import from build ([#6854](https://github.com/react-bootstrap/react-bootstrap/issues/6854)) ([ab81d6b](https://github.com/react-bootstrap/react-bootstrap/commit/ab81d6b1fda1175bc635978a493da49c60db9b25))
+
+
+
+
+
 ## [2.10.5](https://github.com/react-bootstrap/react-bootstrap/compare/v2.10.4...v2.10.5) (2024-09-26)
 
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap",
-  "version": "2.10.5",
+  "version": "2.10.6",
   "description": "Bootstrap 5 components built with React",
   "keywords": [
     "bootstrap",
@@ -60,7 +60,7 @@
   "dependencies": {
     "@babel/runtime": "^7.24.7",
     "@restart/hooks": "^0.4.9",
-    "@restart/ui": "^1.6.9",
+    "@restart/ui": "^1.9.0",
     "@types/react-transition-group": "^4.4.6",
     "classnames": "^2.3.2",
     "dom-helpers": "^5.2.1",

diff --git a/src/Collapse.tsx b/src/Collapse.tsx
@@
8000
 -10,6 +10,7 @@ import Transition, {
   EXITING,
 } from 'react-transition-group/Transition';
 import { TransitionCallbacks } from '@restart/ui/types';
+import { getChildRef } from '@restart/ui/utils';
 import transitionEndListener from './transitionEndListener';
 import createChainedFunction from './createChainedFunction';
 import triggerBrowserReflow from './triggerBrowserReflow';
@@ -229,7 +230,7 @@ const Collapse = React.forwardRef<Transition<any>, CollapseProps>(
         onEntered={handleEntered}
         onExit={handleExit}
         onExiting={handleExiting}
-        childRef={(children as any).ref}
+        childRef={getChildRef(children)}
         in={inProp}
         timeout={timeout}
         mountOnEnter={mountOnEnter}

diff --git a/src/Fade.tsx b/src/Fade.tsx
@@ -8,7 +8,7 @@ import Transition, {
   ENTERING,
 } from 'react-transition-group/Transition';
 import { TransitionCallbacks } from '@restart/ui/types';
-import { getReactVersion } from '@restart/ui/utils';
+import { getChildRef } from '@restart/ui/utils';
 import transitionEndListener from './transitionEndListener';
 import triggerBrowserReflow from './triggerBrowserReflow';
 import TransitionWrapper from './TransitionWrapper';
@@ -114,16 +114,13 @@ const Fade = React.forwardRef<Transition<any>, FadeProps>(
       [onEnter],
     );
 
-    const { major } = getReactVersion();
-    const childRef = major >= 19 ? (children as any).props.ref : (children as any).ref;
-
     return (
       <TransitionWrapper
         ref={ref}
         addEndListener={transitionEndListener}
         {...props}
         onEnter={handleEnter}
-        childRef={childRef}
+        childRef={getChildRef(children)}
       >
         {(status: TransitionStatus, innerProps: Record<string, unknown>) =>
           React.cloneElement(children, {

diff --git a/src/OffcanvasToggling.tsx b/src/OffcanvasToggling.tsx
@@ -8,6 +8,7 @@ import Transition, {
   EXITING,
 } from 'react-transition-group/Transition';
 import { TransitionCallbacks } from '@restart/ui/types';
+import { getChildRef } from '@restart/ui/utils';
 import transitionEndListener from './transitionEndListener';
 import { BsPrefixOnlyProps } from './helpers';
 import TransitionWrapper from './TransitionWrapper';
@@ -113,7 +114,7 @@ const OffcanvasToggling = React.forwardRef<
         unmountOnExit={unmountOnExit}
         appear={appear}
         {...props}
-        childRef={(children as any).ref}
+        childRef={getChildRef(children)}
       >
         {(status: TransitionStatus, innerProps: Record<string, unknown>) =>
           React.cloneElement(children, {

diff --git a/src/OverlayTrigger.tsx b/src/OverlayTrigger.tsx
@@ -6,6 +6,7 @@ import useTimeout from '@restart/hooks/useTimeout';
 import warning from 'warning';
 import { useUncontrolledProp } from 'uncontrollable';
 import useMergedRefs from '@restart/hooks/useMergedRefs';
+import { getChildRef } from '@restart/ui/utils';
 import Overlay, { OverlayChildren, OverlayProps } from './Overlay';
 import safeFindDOMNode from './safeFindDOMNode';
 import { Placement } from './types';
@@ -192,7 +193,7 @@ const OverlayTrigger: React.FC<OverlayTriggerProps> = ({
   const triggerNodeRef = useRef(null);
   const mergedRef = useMergedRefs<unknown>(
     triggerNodeRef,
-    (children as any).ref,
+    getChildRef(children),
   );
   const timeout = useTimeout();
   const hoverStateRef = useRef<string>('');

diff --git a/www/src/theme/Playground/index.tsx b/www/src/theme/Playground/index.tsx
@@ -1,6 +1,5 @@
 import React, { useCallback, useContext, useRef, useState } from 'react';
 import clsx from 'clsx';
-import useIsBrowser from '@docusaurus/useIsBrowser';
 import { LiveContext, LiveProvider, LiveEditor, LiveError } from 'react-live';
 import Translate from '@docusaurus/Translate';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
@@ -9,6 +8,7 @@ import { usePrismTheme } from '@docusaurus/theme-common';
 import type { Props } from '@theme/Playground';
 import type { ThemeConfig } from '@docusaurus/theme-live-codeblock';
 import CopyButton from '@theme-original/CodeBlock/CopyButton';
+import Button from 'react-bootstrap/Button';
 import Preview from './Preview';
 import EditorInfoMessage from './EditorInfoMessage';
 
@@ -52,8 +52,8 @@ function ResultWithHeader({ className }: any) {
 let uid = 0;
 
 function ThemedLiveEditor() {
-  const { code } = useContext(LiveContext);
-  const isBrowser = useIsBrowser();
+  const { code, onChange }:any = useContext(LiveContext);
+  const [editorKey, seteditorKey] = useState(0);
   const [focused, setFocused] = useState(false);
   const [ignoreTab, setIgnoreTab] = useState(false);
   const [keyboardFocused, setKeyboardFocused] = useState(false);
@@ -99,14 +99,27 @@ function ThemedLiveEditor() {
     ignoreTabKey: ignoreTab,
   };
 
+  const handleCodeChange = useCallback(
+    (newCode) => {
+      onChange(newCode); 
+    },
+    [onChange]
+  );
+
+  const handleReset = useCallback(() => {
+    onChange(code); 
+    seteditorKey((prevKey) => prevKey + 1); 
+  }, [code, onChange]);
+
   const showMessage = keyboardFocused || (focused && !ignoreTab);
 
   return (
     <div className="position-relative">
       <LiveEditor
         // We force remount the editor on hydration,
         // otherwise dark prism theme is not applied
-        key={String(isBrowser)}
+        key={editorKey}
+        onChange={handleCodeChange}
         className={styles.playgroundEditor}
         onFocus={handleFocus}
         onBlur={handleBlur}
@@ -132,6 +145,9 @@ function ThemedLiveEditor() {
         <div className={styles.buttonGroup}>
           <CopyButton code={code} />
         </div>
+        <Button className="h-75" onClick={handleReset}>
+          Reset
+        </Button>
       </div>
     </div>
   );

diff --git a/yarn.lock b/yarn.lock
@@ -1897,10 +1897,10 @@
   dependencies:
     dequal "^2.0.3"
 
-"@restart/ui@^1.6.9":
-  version "1.6.9"
-  resolved "https://registry.yarnpkg.com/@restart/ui/-/ui-1.6.9.tgz#05ec905a56486fa39b62f29c09b3917e57acd62f"
-  integrity sha512-mUbygUsJcRurjZCt1f77gg4DpheD1D+Sc7J3JjAkysUj7t8m4EBJVOqWC9788Qtbc69cJ+HlJc6jBguKwS8Mcw==
+"@restart/ui@^1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@restart/ui/-/ui-1.9.0.tgz#11a64bae8b9babac08aafb459da635edff171985"
+  integrity sha512-M/k/ILBXbEIFn0wSGuJYqscih7gwMcnVwv44kgHZ344sjLoO2vFK8AtkMGXx2sEANDwxEPoDhjhfIDDvrvCBCA==
   dependencies:
     "@babel/runtime" "^7.21.0"
     "@popperjs/core" "^2.11.6"