braid-design-system 33.10.1 → 33.10.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # braid-design-system
 
+## 33.10.2
+
+### Patch Changes
+
+- Expand the peer dependency range to support React 19. ([#1822](https://github.com/seek-oss/braid-design-system/pull/1822))
+
 ## 33.10.1
 
 ### Patch Changes

package/README.md

@@ -60,7 +60,7 @@ If you're rendering within the context of another application, you may want to o
 If you'd like to customise the technical implementation of all `Link` and `TextLink` components from Braid, you can pass a custom component to the `linkComponent` prop on `BraidProvider`. For example, if you wanted to ensure that all relative links are [React Router](https://reacttraining.com/react-router/) links:
 
 ```tsx
-import { Link as ReactRouterLink } from 'react-router-dom';
+import { Link as ReactRouterLink } from 'react-router';
 import { BraidProvider, makeLinkComponent } from 'braid-design-system';
 import wireframe from 'braid-design-system/themes/wireframe';
 

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ForwardRefRenderFunction, AnchorHTMLAttributes, ComponentType, ReactNode, ReactElement, AllHTMLAttributes, ElementType, RefAttributes, Ref, RefObject, KeyboardEvent, MouseEvent, FormEvent, RefCallback } from 'react';
+import react__default, { ForwardRefRenderFunction, AnchorHTMLAttributes, ComponentType, ReactNode, ReactElement, AllHTMLAttributes, ElementType, RefAttributes, Ref, RefObject, KeyboardEvent, MouseEvent, FormEvent, RefCallback } from 'react';
 import { FontMetrics } from '@capsizecss/core';
 import * as clsx from 'clsx';
 import { ClassValue } from 'clsx';
@@ -324,7 +324,7 @@ declare const BraidPortal: ({ children, container }: BraidPortalProps) => react.
 interface ThemeNameConsumerProps {
     children(name: string): ReactElement;
 }
-declare const ThemeNameConsumer: ({ children }: ThemeNameConsumerProps) => ReactElement<any, string | react.JSXElementConstructor<any>>;
+declare const ThemeNameConsumer: ({ children }: ThemeNameConsumerProps) => ReactElement<unknown, string | react.JSXElementConstructor<any>>;
 
 declare const useThemeName: () => string;
 
@@ -2746,7 +2746,7 @@ type Sprinkles = Parameters<typeof sprinkles>[0];
 type Space = keyof typeof vars$1.space | 'none';
 type ResponsiveSpace = RequiredResponsiveValue<Space>;
 interface Atoms extends Sprinkles {
-    reset?: keyof JSX.IntrinsicElements;
+    reset?: keyof react__default.JSX.IntrinsicElements;
 }
 
 type BoxBackgroundVariant = Background | 'customDark' | 'customLight';
@@ -3371,7 +3371,7 @@ interface IconRendererProps {
         className: string;
     }) => ReactElement | null;
 }
-declare const IconRenderer: ({ children }: IconRendererProps) => ReactElement<any, string | react.JSXElementConstructor<any>> | null;
+declare const IconRenderer: ({ children }: IconRendererProps) => ReactElement<unknown, string | react.JSXElementConstructor<any>> | null;
 
 type LinkProps = Omit<LinkComponentProps, 'className'> & {
     className?: ClassValue;
@@ -3433,8 +3433,8 @@ interface PopoverProps {
     modal?: boolean;
     open: boolean;
     onClose?: () => void;
-    triggerRef: RefObject<HTMLElement>;
-    enterFocusRef?: RefObject<HTMLElement>;
+    triggerRef: RefObject<HTMLElement | null>;
+    enterFocusRef?: RefObject<HTMLElement | null>;
     children: ReactNode;
 }
 

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ForwardRefRenderFunction, AnchorHTMLAttributes, ComponentType, ReactNode, ReactElement, AllHTMLAttributes, ElementType, RefAttributes, Ref, RefObject, KeyboardEvent, MouseEvent, FormEvent, RefCallback } from 'react';
+import react__default, { ForwardRefRenderFunction, AnchorHTMLAttributes, ComponentType, ReactNode, ReactElement, AllHTMLAttributes, ElementType, RefAttributes, Ref, RefObject, KeyboardEvent, MouseEvent, FormEvent, RefCallback } from 'react';
 import { FontMetrics } from '@capsizecss/core';
 import * as clsx from 'clsx';
 import { ClassValue } from 'clsx';
@@ -324,7 +324,7 @@ declare const BraidPortal: ({ children, container }: BraidPortalProps) => react.
 interface ThemeNameConsumerProps {
     children(name: string): ReactElement;
 }
-declare const ThemeNameConsumer: ({ children }: ThemeNameConsumerProps) => ReactElement<any, string | react.JSXElementConstructor<any>>;
+declare const ThemeNameConsumer: ({ children }: ThemeNameConsumerProps) => ReactElement<unknown, string | react.JSXElementConstructor<any>>;
 
 declare const useThemeName: () => string;
 
@@ -2746,7 +2746,7 @@ type Sprinkles = Parameters<typeof sprinkles>[0];
 type Space = keyof typeof vars$1.space | 'none';
 type ResponsiveSpace = RequiredResponsiveValue<Space>;
 interface Atoms extends Sprinkles {
-    reset?: keyof JSX.IntrinsicElements;
+    reset?: keyof react__default.JSX.IntrinsicElements;
 }
 
 type BoxBackgroundVariant = Background | 'customDark' | 'customLight';
@@ -3371,7 +3371,7 @@ interface IconRendererProps {
         className: string;
     }) => ReactElement | null;
 }
-declare const IconRenderer: ({ children }: IconRendererProps) => ReactElement<any, string | react.JSXElementConstructor<any>> | null;
+declare const IconRenderer: ({ children }: IconRendererProps) => ReactElement<unknown, string | react.JSXElementConstructor<any>> | null;
 
 type LinkProps = Omit<LinkComponentProps, 'className'> & {
     className?: ClassValue;
@@ -3433,8 +3433,8 @@ interface PopoverProps {
     modal?: boolean;
     open: boolean;
     onClose?: () => void;
-    triggerRef: RefObject<HTMLElement>;
-    enterFocusRef?: RefObject<HTMLElement>;
+    triggerRef: RefObject<HTMLElement | null>;
+    enterFocusRef?: RefObject<HTMLElement | null>;
     children: ReactNode;
 }
 

package/dist/lib/components/useToast/useTimeout.cjs

@@ -2,7 +2,7 @@
 const react = require("react");
 const useTimeout = ({ onTimeout, duration }) => {
   const [activated, setActivated] = react.useState(true);
-  const timeoutRef = react.useRef();
+  const timeoutRef = react.useRef(void 0);
   const stopTimeout = react.useCallback(() => {
     window.clearTimeout(timeoutRef.current);
     setActivated(false);

package/dist/lib/components/useToast/useTimeout.mjs

@@ -1,7 +1,7 @@
 import { useState, useRef, useCallback, useEffect } from "react";
 const useTimeout = ({ onTimeout, duration }) => {
   const [activated, setActivated] = useState(true);
-  const timeoutRef = useRef();
+  const timeoutRef = useRef(void 0);
   const stopTimeout = useCallback(() => {
     window.clearTimeout(timeoutRef.current);
     setActivated(false);

package/dist/lib/utils/flattenChildren.cjs

@@ -1,10 +1,10 @@
 "use strict";
 const react = require("react");
-const reactIs = require("react-is");
+const lib_utils_isFragment_cjs = require("./isFragment.cjs");
 function flattenChildren(children, depth = 0, keys = []) {
   return react.Children.toArray(children).reduce(
     (acc, node, nodeIndex) => {
-      if (reactIs.isFragment(node)) {
+      if (lib_utils_isFragment_cjs.isFragment(node)) {
         acc.push(
           ...flattenChildren(
             node.props.children,

package/dist/lib/utils/flattenChildren.mjs

@@ -1,5 +1,5 @@
 import { Children, isValidElement, cloneElement } from "react";
-import { isFragment } from "react-is";
+import { isFragment } from "./isFragment.mjs";
 function flattenChildren(children, depth = 0, keys = []) {
   return Children.toArray(children).reduce(
     (acc, node, nodeIndex) => {

package/dist/lib/utils/isFragment.cjs

@@ -0,0 +1,13 @@
+"use strict";
+const REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element");
+const LEGACY_REACT_ELEMENT_TYPE = Symbol.for("react.element");
+const REACT_FRAGMENT_TYPE = Symbol.for("react.fragment");
+const isReactElementType = (value) => {
+  if (typeof value !== "object" || value === null) {
+    return false;
+  }
+  const $$typeof = value.$$typeof;
+  return $$typeof === REACT_ELEMENT_TYPE || $$typeof === LEGACY_REACT_ELEMENT_TYPE;
+};
+const isFragment = (value) => isReactElementType(value) && value.type === REACT_FRAGMENT_TYPE;
+exports.isFragment = isFragment;

package/dist/lib/utils/isFragment.mjs

@@ -0,0 +1,14 @@
+const REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element");
+const LEGACY_REACT_ELEMENT_TYPE = Symbol.for("react.element");
+const REACT_FRAGMENT_TYPE = Symbol.for("react.fragment");
+const isReactElementType = (value) => {
+  if (typeof value !== "object" || value === null) {
+    return false;
+  }
+  const $$typeof = value.$$typeof;
+  return $$typeof === REACT_ELEMENT_TYPE || $$typeof === LEGACY_REACT_ELEMENT_TYPE;
+};
+const isFragment = (value) => isReactElementType(value) && value.type === REACT_FRAGMENT_TYPE;
+export {
+  isFragment
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "braid-design-system",
-  "version": "33.10.1",
+  "version": "33.10.2",
   "description": "Themeable design system for the SEEK Group",
   "homepage": "https://seek-oss.github.io/braid-design-system/",
   "bugs": {
@@ -178,7 +178,6 @@
     "lodash.curry": "^4.1.1",
     "polished": "^4.1.0",
     "react-focus-lock": "^2.9.7",
-    "react-is": "^18.2.0",
     "react-remove-scroll": "^2.7.0",
     "throttle-debounce": "^5.0.2",
     "utility-types": "^3.10.0"
@@ -199,10 +198,8 @@
     "@types/gradient-parser": "^0.1.5",
     "@types/lodash.curry": "^4.1.9",
     "@types/node": "^22.16.0",
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.0",
-    "@types/react-is": "^18.3.0",
-    "@types/react-router-dom": "^5.3.3",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
     "@types/sanitize-html": "^2.13.0",
     "@types/testing-library__jest-dom": "^5.9.1",
     "@types/throttle-debounce": "^5.0.2",
@@ -216,9 +213,9 @@
     "html-validate": "^9.7.1",
     "playroom": "0.44.0",
     "prettier": "^3.4.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-router-dom": "^6.3.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-router": "^7.6.3",
     "sanitize-html": "^2.12.1",
     "sku": "14.8.0",
     "storybook": "9.0.15",
@@ -227,8 +224,8 @@
     "@braid-design-system/source.macro": "1.0.0"
   },
   "peerDependencies": {
-    "react": "^18",
-    "react-dom": "^18"
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
   },
   "scripts": {
     "build": "crackle package",