diff --git a/.changeset/fancy-mangos-eat.md b/.changeset/fancy-mangos-eat.md new file mode 100644 index 00000000..ca11c8af --- /dev/null +++ b/.changeset/fancy-mangos-eat.md @@ -0,0 +1,5 @@ +--- +"@easypost/easy-ui": minor +--- + +feat: support React 19 diff --git a/easy-ui-react/package.json b/easy-ui-react/package.json index a86b12b1..f823b3b5 100644 --- a/easy-ui-react/package.json +++ b/easy-ui-react/package.json @@ -35,36 +35,37 @@ "@react-aria/utils": "^3.32.0", "@react-stately/toast": "^3.1.2", "@react-types/shared": "^3.32.1", - "@types/react": "^18.3.1", - "@types/react-dom": "^18.3.1", "lodash": "^4.17.21", "overlayscrollbars": "^2.3.0", "overlayscrollbars-react": "^0.5.6", "react-aria": "^3.45.0", "react-aria-components": "^1.14.0", - "react-is": "^18.3.1", "react-stately": "^3.43.0", "react-syntax-highlighter": "^15.6.1", "react-transition-group": "^4.4.5", "use-clipboard-copy": "^0.2.0" }, "peerDependencies": { - "react": "^16.14.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0" + "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", + "react-is": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" }, "devDependencies": { "@testing-library/dom": "^10.4.0", "@testing-library/jest-dom": "^6.6.3", - "@testing-library/react": "^16.3.0", + "@testing-library/react": "^16.3.2", "@testing-library/user-event": "^14.6.1", "@types/lodash": "^4.17.18", - "@types/react-is": "^18.3.0", + "@types/react": "^19.2.14", + "@types/react-dom": "^19.2.3", + "@types/react-is": "^19.0.0", "@types/react-syntax-highlighter": "^15.5.13", "@types/react-transition-group": "^4.4.12", "@vitejs/plugin-react": "^4.6.0", "glob": "^10.2.5", - "react": "^18.3.1", - "react-dom": "^18.3.1", + "react": "^19.0.0", + "react-dom": "^19.0.0", + "react-is": "^19.0.0", "sass": "^1.89.2", "vite-plugin-react-remove-attributes": "^1.0.3", "vite-plugin-static-copy": "^3.1.2" diff --git a/easy-ui-react/src/CodeBlock/CodeBlock.tsx b/easy-ui-react/src/CodeBlock/CodeBlock.tsx index 011b547e..057d894b 100644 --- a/easy-ui-react/src/CodeBlock/CodeBlock.tsx +++ b/easy-ui-react/src/CodeBlock/CodeBlock.tsx @@ -1,4 +1,4 @@ -import React, { ReactNode, useMemo } from "react"; +import React, { ReactElement, ReactNode, useMemo } from "react"; import { CodeSnippet, CodeSnippetProps } from "../CodeSnippet"; import { SnippetLanguage } from "../CodeSnippet/SyntaxHighlighter"; import { HorizontalStack } from "../HorizontalStack"; @@ -120,7 +120,10 @@ export function CodeBlock(props: CodeBlockProps) { const { children, language, onLanguageChange } = props; const snippets = useMemo(() => { - return filterChildrenByDisplayName(children, "CodeBlock.Snippet"); + return filterChildrenByDisplayName( + children, + "CodeBlock.Snippet", + ) as ReactElement[]; }, [children]); const headers = useMemo(() => { diff --git a/easy-ui-react/src/CodeBlock/context.tsx b/easy-ui-react/src/CodeBlock/context.tsx index 7b335954..f7598ac8 100644 --- a/easy-ui-react/src/CodeBlock/context.tsx +++ b/easy-ui-react/src/CodeBlock/context.tsx @@ -1,9 +1,10 @@ import { ReactElement, createContext, useContext } from "react"; +import { CodeSnippetProps } from "../CodeSnippet"; import { SnippetLanguage } from "../CodeSnippet/SyntaxHighlighter"; export type CodeBlockContextType = { languages: SnippetLanguage[]; - snippet: ReactElement; + snippet: ReactElement; language: SnippetLanguage; onLanguageChange: (language: SnippetLanguage) => void; }; diff --git a/easy-ui-react/src/ColorPicker/ColorPicker.test.tsx b/easy-ui-react/src/ColorPicker/ColorPicker.test.tsx index 10683531..54547764 100644 --- a/easy-ui-react/src/ColorPicker/ColorPicker.test.tsx +++ b/easy-ui-react/src/ColorPicker/ColorPicker.test.tsx @@ -74,6 +74,6 @@ describe("", () => { expect(screen.getAllByLabelText("Color picker").length).toBeGreaterThan(0); await userTab(user); await userKeyboard(user, "{ArrowRight}{ArrowUp}{ArrowLeft}{ArrowDown}"); - expect(screen.getByText("hsla(0, 100%, 49.5%, 1)")).toBeInTheDocument(); + expect(screen.getByText("hsla(0, 98.02%, 50%, 1)")).toBeInTheDocument(); }); }); diff --git a/easy-ui-react/src/ColorPicker/ColorPickerInputField.test.tsx b/easy-ui-react/src/ColorPicker/ColorPickerInputField.test.tsx index 55f3e865..1a48c6a1 100644 --- a/easy-ui-react/src/ColorPicker/ColorPickerInputField.test.tsx +++ b/easy-ui-react/src/ColorPicker/ColorPickerInputField.test.tsx @@ -61,6 +61,6 @@ describe("", () => { await userTab(user); await userKeyboard(user, "{ArrowRight}{ArrowUp}{ArrowLeft}{ArrowDown}"); expect(handleChange).toHaveBeenCalled(); - expect(screen.getByLabelText("Primary color")).toHaveValue("#FC0000"); + expect(screen.getByLabelText("Primary color")).toHaveValue("#FC0303"); }); }); diff --git a/easy-ui-react/src/DataGrid/Table.tsx b/easy-ui-react/src/DataGrid/Table.tsx index 3a256328..323cb96d 100644 --- a/easy-ui-react/src/DataGrid/Table.tsx +++ b/easy-ui-react/src/DataGrid/Table.tsx @@ -46,7 +46,7 @@ export function Table( const innerContainerRef = useRef(null); const tableRef = useRef(null); const state = useTableState({ - ...props, + ...(props as Parameters[0]), selectionMode, selectionBehavior: "toggle", showSelectionCheckboxes: selectionMode !== "none", diff --git a/easy-ui-react/src/Drawer/context.ts b/easy-ui-react/src/Drawer/context.ts index 124be9c0..395881e2 100644 --- a/easy-ui-react/src/Drawer/context.ts +++ b/easy-ui-react/src/Drawer/context.ts @@ -6,8 +6,8 @@ export type DrawerContextType = { dialogProps: DOMAttributes; titleProps: DOMAttributes; isHeaderStuck: boolean; - bodyRef: RefObject; - headerInterceptorRef: RefObject; + bodyRef: RefObject; + headerInterceptorRef: RefObject; }; type DrawerTriggerContextType = { diff --git a/easy-ui-react/src/Drawer/useIntersectionDetection.ts b/easy-ui-react/src/Drawer/useIntersectionDetection.ts index b79eac26..012a9a4e 100644 --- a/easy-ui-react/src/Drawer/useIntersectionDetection.ts +++ b/easy-ui-react/src/Drawer/useIntersectionDetection.ts @@ -8,8 +8,8 @@ import { RefObject, useEffect, useState } from "react"; * @returns when element is intersecting */ export function useIntersectionDetection( - targetRef: RefObject, - scrollRef: RefObject, + targetRef: RefObject, + scrollRef: RefObject, ) { const [isStuck, setIsStuck] = useState(false); diff --git a/easy-ui-react/src/FormLayout/Section.tsx b/easy-ui-react/src/FormLayout/Section.tsx index 5160bc38..ace0b61d 100644 --- a/easy-ui-react/src/FormLayout/Section.tsx +++ b/easy-ui-react/src/FormLayout/Section.tsx @@ -67,6 +67,6 @@ function findSectionTitleInChildren(children: ReactNode) { const firstTitleOrSectionType = firstTitleOrSection.type as NamedExoticComponent; return firstTitleOrSectionType.displayName === "FormLayout.Title" - ? firstTitleOrSection.props.children + ? (firstTitleOrSection.props as { children?: ReactNode }).children : null; } diff --git a/easy-ui-react/src/Menu/MenuTrigger.tsx b/easy-ui-react/src/Menu/MenuTrigger.tsx index 7e473ea1..2838fe31 100644 --- a/easy-ui-react/src/Menu/MenuTrigger.tsx +++ b/easy-ui-react/src/Menu/MenuTrigger.tsx @@ -10,6 +10,12 @@ export type MenuTriggerProps = { export function MenuTrigger(props: MenuTriggerProps) { const { children } = props; const { triggerRef, menuTriggerProps } = useInternalMenuContext(); - const clonedProps = mergeProps(menuTriggerProps, children.props); - return React.cloneElement(children, { ...clonedProps, ref: triggerRef }); + const clonedProps = mergeProps( + menuTriggerProps, + children.props as Record, + ); + return React.cloneElement(children as ReactElement>, { + ...clonedProps, + ref: triggerRef, + }); } diff --git a/easy-ui-react/src/Modal/context.tsx b/easy-ui-react/src/Modal/context.tsx index e9889b3b..9b97ab9b 100644 --- a/easy-ui-react/src/Modal/context.tsx +++ b/easy-ui-react/src/Modal/context.tsx @@ -15,9 +15,9 @@ export type ModalContextType = { titleProps: DOMAttributes; isHeaderStuck: boolean; isFooterStuck: boolean; - bodyRef: RefObject; - headerInterceptorRef: RefObject; - footerInterceptorRef: RefObject; + bodyRef: RefObject; + headerInterceptorRef: RefObject; + footerInterceptorRef: RefObject; }; type ModalTriggerContextType = { diff --git a/easy-ui-react/src/Modal/useIntersectionDetection.ts b/easy-ui-react/src/Modal/useIntersectionDetection.ts index b79eac26..012a9a4e 100644 --- a/easy-ui-react/src/Modal/useIntersectionDetection.ts +++ b/easy-ui-react/src/Modal/useIntersectionDetection.ts @@ -8,8 +8,8 @@ import { RefObject, useEffect, useState } from "react"; * @returns when element is intersecting */ export function useIntersectionDetection( - targetRef: RefObject, - scrollRef: RefObject, + targetRef: RefObject, + scrollRef: RefObject, ) { const [isStuck, setIsStuck] = useState(false); diff --git a/easy-ui-react/src/MultiSelect/MultiSelectDropdown.tsx b/easy-ui-react/src/MultiSelect/MultiSelectDropdown.tsx index dfa904d0..3e135d25 100644 --- a/easy-ui-react/src/MultiSelect/MultiSelectDropdown.tsx +++ b/easy-ui-react/src/MultiSelect/MultiSelectDropdown.tsx @@ -25,8 +25,8 @@ type MultiSelectDropdownProps = { children: React.ReactNode | ((item: T) => React.ReactNode); isLoading?: AsyncListData["isLoading"]; maxItemsUntilScroll?: MenuOverlayProps["maxItemsUntilScroll"]; - menuRef: RefObject; - triggerRef: RefObject; + menuRef: RefObject; + triggerRef: RefObject; width: number; }; @@ -106,7 +106,7 @@ function ScrollContainer({ scrollRef, children, }: { - scrollRef: RefObject; + scrollRef: RefObject; children: ReactNode; }) { useScrollbar(scrollRef, "ezui-os-theme-overlay"); diff --git a/easy-ui-react/src/MultiSelect/utilities.ts b/easy-ui-react/src/MultiSelect/utilities.ts index 752d3868..879e1d18 100644 --- a/easy-ui-react/src/MultiSelect/utilities.ts +++ b/easy-ui-react/src/MultiSelect/utilities.ts @@ -1,7 +1,7 @@ import { useResizeObserver } from "@react-aria/utils"; import { RefObject, useState } from "react"; -export function useElementWidth(elementRef: RefObject) { +export function useElementWidth(elementRef: RefObject) { const [width, setWidth] = useState(0); useResizeObserver({ diff --git a/easy-ui-react/src/Notification/NotificationTransition.tsx b/easy-ui-react/src/Notification/NotificationTransition.tsx index 345d33e0..e16a69c3 100644 --- a/easy-ui-react/src/Notification/NotificationTransition.tsx +++ b/easy-ui-react/src/Notification/NotificationTransition.tsx @@ -8,7 +8,7 @@ export type NotificationTransitionProps = { /** * Children function that receives a ref to the node being transitioned. */ - children: ChildrenFunction<{ nodeRef: RefObject }>; + children: ChildrenFunction<{ nodeRef: RefObject }>; /** * Unique key for the transition. diff --git a/easy-ui-react/src/SearchNav/CTAGroup.tsx b/easy-ui-react/src/SearchNav/CTAGroup.tsx index 4869d2f9..66daa143 100644 --- a/easy-ui-react/src/SearchNav/CTAGroup.tsx +++ b/easy-ui-react/src/SearchNav/CTAGroup.tsx @@ -64,14 +64,14 @@ export function CTAGroup(_props: CTAGroupProps) { {secondaryCTAItems?.map((item) => { - const itemEle = item as ReactElement; + const itemEle = item as ReactElement>; return ( - {itemEle.props.label} + {itemEle.props.label as ReactNode} ); })} diff --git a/easy-ui-react/src/SearchNav/CondensedSearchNav.tsx b/easy-ui-react/src/SearchNav/CondensedSearchNav.tsx index eee3b14c..c4d65675 100644 --- a/easy-ui-react/src/SearchNav/CondensedSearchNav.tsx +++ b/easy-ui-react/src/SearchNav/CondensedSearchNav.tsx @@ -1,4 +1,4 @@ -import React, { useState, ReactElement } from "react"; +import React, { useState, ReactElement, ReactNode } from "react"; import Close from "@easypost/easy-ui-icons/Close"; import MenuSymbol from "@easypost/easy-ui-icons/Menu"; import Search from "@easypost/easy-ui-icons/Search"; @@ -67,7 +67,9 @@ export function CondensedSearchNav() { {selectorChildren?.map((item) => { - const itemEle = item as ReactElement; + const itemEle = item as ReactElement< + Record + >; return ( {itemEle.props.children} @@ -77,14 +79,16 @@ export function CondensedSearchNav() { {secondaryCTAItems?.map((item) => { - const itemEle = item as ReactElement; + const itemEle = item as ReactElement< + Record + >; return ( - {itemEle.props.label} + {itemEle.props.label as ReactNode} ); })} diff --git a/easy-ui-react/src/SearchNav/utilities.ts b/easy-ui-react/src/SearchNav/utilities.ts index 3e57ada6..fe9e3d34 100644 --- a/easy-ui-react/src/SearchNav/utilities.ts +++ b/easy-ui-react/src/SearchNav/utilities.ts @@ -11,7 +11,7 @@ export function getLogoGroupChildren(logoGroup: ReactNode) { if (logoGroupDisplayName !== "SearchNav.LogoGroup") { throw new Error("SearchNav must contain SearchNav.LogoGroup."); } - const logoGroupElement = logoGroup as ReactElement; + const logoGroupElement = logoGroup as ReactElement>; const logoGroupChildren = flattenChildren(logoGroupElement.props.children); const logoDisplayName = getDisplayNameFromReactNode(logoGroupChildren[0]); if (logoDisplayName !== "SearchNav.Logo") { @@ -36,7 +36,7 @@ export function getLogoGroupChildren(logoGroup: ReactNode) { ) === "SearchNav.Selector" ) { selector = logoGroupChildren[logoGroupChildren.length - 1]; - const selectorElem = selector as ReactElement; + const selectorElem = selector as ReactElement>; selectorChildren = flattenChildren(selectorElem.props.children); } @@ -63,7 +63,7 @@ export function getCTAGroupChildren(ctaGroup: ReactNode) { let secondaryCTAItems; let primaryCTAItem; if (getDisplayNameFromReactNode(ctaGroup) === "SearchNav.CTAGroup") { - const ctaGroupElement = ctaGroup as ReactElement; + const ctaGroupElement = ctaGroup as ReactElement>; secondaryCTAItems = filterChildrenByDisplayName( ctaGroupElement.props.children, "SearchNav.SecondaryCTAItem", @@ -92,9 +92,9 @@ export function getCTAGroupChildren(ctaGroup: ReactNode) { export function getSelectorLabel(selector: ReactNode) { let selectorLabel; if (selector) { - const selectorElem = selector as ReactElement; + const selectorElem = selector as ReactElement>; const { "aria-label": label } = selectorElem.props; - selectorLabel = label; + selectorLabel = label as string | undefined; } return selectorLabel; } diff --git a/easy-ui-react/src/TabPanels/TabPanelsPanels.tsx b/easy-ui-react/src/TabPanels/TabPanelsPanels.tsx index 97897f26..73e91a89 100644 --- a/easy-ui-react/src/TabPanels/TabPanelsPanels.tsx +++ b/easy-ui-react/src/TabPanels/TabPanelsPanels.tsx @@ -77,7 +77,7 @@ function TabPanelsPanel({ state, ...props }: TabPanelProps) { React.cloneElement(children, { ref, ...tabPanelProps, - ...(children as ReactElement).props, + ...((children as ReactElement).props as Record), }) ) : (
diff --git a/easy-ui-react/src/Tooltip/Tooltip.tsx b/easy-ui-react/src/Tooltip/Tooltip.tsx index 74e54aa7..17684b2e 100644 --- a/easy-ui-react/src/Tooltip/Tooltip.tsx +++ b/easy-ui-react/src/Tooltip/Tooltip.tsx @@ -124,8 +124,8 @@ export function Tooltip(props: TooltipProps) { return ( <> - {React.cloneElement(children, { - ...mergeProps(triggerProps, children.props), + {React.cloneElement(children as ReactElement>, { + ...mergeProps(triggerProps, children.props as Record), ref: triggerRef, })} {tooltipTriggerState.isOpen && ( diff --git a/easy-ui-react/src/types.ts b/easy-ui-react/src/types.ts index dd19428b..6bd0eb2b 100644 --- a/easy-ui-react/src/types.ts +++ b/easy-ui-react/src/types.ts @@ -5,7 +5,7 @@ import { ResponsiveProp } from "./utilities/css"; export type DesignTokens = typeof tokens; export type DesignTokenAliases = keyof DesignTokens; -export type Falsy = boolean | undefined | null | 0; +export type Falsy = boolean | undefined | null | 0 | 0n; export type Heading = "h1" | "h2" | "h3" | "h4" | "h5" | "h6"; diff --git a/easy-ui-react/src/utilities/react.ts b/easy-ui-react/src/utilities/react.ts index b579f3b7..a44f2f02 100644 --- a/easy-ui-react/src/utilities/react.ts +++ b/easy-ui-react/src/utilities/react.ts @@ -32,7 +32,7 @@ export function flattenChildren( acc.push.apply( acc, flattenChildren( - node.props.children, + (node.props as { children?: ReactNode }).children, depth + 1, keys.concat(node.key || nodeIndex), ), diff --git a/easy-ui-react/src/utilities/test.ts b/easy-ui-react/src/utilities/test.ts index e32b2274..2ecd164f 100644 --- a/easy-ui-react/src/utilities/test.ts +++ b/easy-ui-react/src/utilities/test.ts @@ -7,6 +7,8 @@ import { vi } from "vitest"; declare global { // eslint-disable-next-line no-var var jest: object; + // eslint-disable-next-line no-var + var IS_REACT_ACT_ENVIRONMENT: boolean; } /** diff --git a/easy-ui-react/vite.config.mts b/easy-ui-react/vite.config.mts index fec89105..881a8d6c 100644 --- a/easy-ui-react/vite.config.mts +++ b/easy-ui-react/vite.config.mts @@ -17,7 +17,7 @@ export default defineConfig({ removeReactAttributes({ attributes: ["data-testid"], }), - react({ jsxRuntime: "classic" }), + react({ jsxRuntime: "automatic" }), viteStaticCopy({ targets: [ { src: "package.json", dest: ".", transform: cleanPkgJsonForDist }, diff --git a/easy-ui-react/vitest.setup.ts b/easy-ui-react/vitest.setup.ts index ab51fb98..810e3ec1 100644 --- a/easy-ui-react/vitest.setup.ts +++ b/easy-ui-react/vitest.setup.ts @@ -4,5 +4,7 @@ import { installScrollToMock, } from "./src/utilities/test"; +globalThis.IS_REACT_ACT_ENVIRONMENT = true; + installJestCompatibleFakeTimers(); installScrollToMock(); diff --git a/package-lock.json b/package-lock.json index 408322f1..0c7a89bd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,14 +24,16 @@ "@storybook/addon-docs": "^9.1.13", "@storybook/react-vite": "^9.1.13", "@types/node": "^24.0.4", + "@types/react": "^19.2.14", + "@types/react-dom": "^19.2.3", "babel-loader": "^10.0.0", "eslint": "^9.22.0", "eslint-plugin-storybook": "9.1.13", "jsdom": "^26.1.0", "npm-run-all": "^4.1.5", "prettier": "^3.6.0", - "react": "^18.3.1", - "react-dom": "^18.3.1", + "react": "^19.0.0", + "react-dom": "^19.0.0", "storybook": "^9.1.13", "stylelint": "^16.21.0", "turbo": "^2.4.4", @@ -45,7 +47,7 @@ }, "easy-ui-icons": { "name": "@easypost/easy-ui-icons", - "version": "1.0.0-alpha.51", + "version": "1.0.0-alpha.53", "devDependencies": { "@material-symbols/svg-300": "^0.40.2", "@material-symbols/svg-400": "^0.40.2", @@ -125,22 +127,19 @@ }, "easy-ui-react": { "name": "@easypost/easy-ui", - "version": "1.0.0-alpha.108", + "version": "1.0.0-alpha.112", "dependencies": { - "@easypost/easy-ui-icons": "1.0.0-alpha.51", + "@easypost/easy-ui-icons": "1.0.0-alpha.53", "@easypost/easy-ui-tokens": "1.0.0-alpha.17", "@react-aria/toast": "^3.0.9", "@react-aria/utils": "^3.32.0", "@react-stately/toast": "^3.1.2", "@react-types/shared": "^3.32.1", - "@types/react": "^18.3.1", - "@types/react-dom": "^18.3.1", "lodash": "^4.17.21", "overlayscrollbars": "^2.3.0", "overlayscrollbars-react": "^0.5.6", "react-aria": "^3.45.0", "react-aria-components": "^1.14.0", - "react-is": "^18.3.1", "react-stately": "^3.43.0", "react-syntax-highlighter": "^15.6.1", "react-transition-group": "^4.4.5", @@ -149,23 +148,65 @@ "devDependencies": { "@testing-library/dom": "^10.4.0", "@testing-library/jest-dom": "^6.6.3", - "@testing-library/react": "^16.3.0", + "@testing-library/react": "^16.3.2", "@testing-library/user-event": "^14.6.1", "@types/lodash": "^4.17.18", - "@types/react-is": "^18.3.0", + "@types/react": "^19.2.14", + "@types/react-dom": "^19.2.3", + "@types/react-is": "^19.0.0", "@types/react-syntax-highlighter": "^15.5.13", "@types/react-transition-group": "^4.4.12", "@vitejs/plugin-react": "^4.6.0", "glob": "^10.2.5", - "react": "^18.3.1", - "react-dom": "^18.3.1", + "react": "^19.0.0", + "react-dom": "^19.0.0", + "react-is": "^19.0.0", "sass": "^1.89.2", "vite-plugin-react-remove-attributes": "^1.0.3", "vite-plugin-static-copy": "^3.1.2" }, "peerDependencies": { - "react": "^16.14.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0" + "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", + "react-is": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, + "easy-ui-react/node_modules/@testing-library/react": { + "version": "16.3.2", + "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-16.3.2.tgz", + "integrity": "sha512-XU5/SytQM+ykqMnAnvB2umaJNIOsLF3PVv//1Ew4CTcpz0/BRyy/af40qqrt7SjKpDdT1saBMc42CUok5gaw+g==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.12.5" + }, + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "@testing-library/dom": "^10.0.0", + "@types/react": "^18.0.0 || ^19.0.0", + "@types/react-dom": "^18.0.0 || ^19.0.0", + "react": "^18.0.0 || ^19.0.0", + "react-dom": "^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "easy-ui-react/node_modules/@types/react-is": { + "version": "19.2.0", + "resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-19.2.0.tgz", + "integrity": "sha512-NP2xtcjZfORsOa4g2JwdseyEnF+wUCx25fTdG/J/HIY6yKga6+NozRBg2xR2gyh7kKYyd6DXndbq0YbQuTJ7Ew==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/react": "*" } }, "easy-ui-react/node_modules/brace-expansion": { @@ -215,6 +256,13 @@ "url": "https://github.com/sponsors/isaacs" } }, + "easy-ui-react/node_modules/react-is": { + "version": "19.2.4", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.4.tgz", + "integrity": "sha512-W+EWGn2v0ApPKgKKCy/7s7WHXkboGcsrXE+2joLyVxkbyVQfO3MUEaUQDHoSmb8TFFrSKYa9mw64WZHNHSDzYA==", + "dev": true, + "license": "MIT" + }, "easy-ui-tokens": { "name": "@easypost/easy-ui-tokens", "version": "1.0.0-alpha.17", @@ -704,15 +752,16 @@ } }, "node_modules/@bundled-es-modules/memfs": { - "version": "4.9.4", - "resolved": "https://registry.npmjs.org/@bundled-es-modules/memfs/-/memfs-4.9.4.tgz", - "integrity": "sha512-1XyYPUaIHwEOdF19wYVLBtHJRr42Do+3ctht17cZOHwHf67vkmRNPlYDGY2kJps4RgE5+c7nEZmEzxxvb1NZWA==", + "version": "4.17.0", + "resolved": "https://registry.npmjs.org/@bundled-es-modules/memfs/-/memfs-4.17.0.tgz", + "integrity": "sha512-ykdrkEmQr9BV804yd37ikXfNnvxrwYfY9Z2/EtMHFEFadEjsQXJ1zL9bVZrKNLDtm91UdUOEHso6Aweg93K6xQ==", "dev": true, + "license": "Apache-2.0", "dependencies": { - "assert": "^2.0.0", + "assert": "^2.1.0", "buffer": "^6.0.3", "events": "^3.3.0", - "memfs": "^4.9.3", + "memfs": "^4.17.0", "path": "^0.12.7", "stream": "^0.0.3", "util": "^0.12.5" @@ -5790,34 +5839,6 @@ "integrity": "sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==", "dev": true }, - "node_modules/@testing-library/react": { - "version": "16.3.0", - "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-16.3.0.tgz", - "integrity": "sha512-kFSyxiEDwv1WLl2fgsq6pPBbw5aWKrsY2/noi1Id0TK0UParSF62oFQFGHXIyaG4pp2tEub/Zlel+fjjZILDsw==", - "dev": true, - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.12.5" - }, - "engines": { - "node": ">=18" - }, - "peerDependencies": { - "@testing-library/dom": "^10.0.0", - "@types/react": "^18.0.0 || ^19.0.0", - "@types/react-dom": "^18.0.0 || ^19.0.0", - "react": "^18.0.0 || ^19.0.0", - "react-dom": "^18.0.0 || ^19.0.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - }, - "@types/react-dom": { - "optional": true - } - } - }, "node_modules/@testing-library/user-event": { "version": "14.6.1", "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.6.1.tgz", @@ -5955,34 +5976,24 @@ "undici-types": "~7.16.0" } }, - "node_modules/@types/prop-types": { - "version": "15.7.5", - "license": "MIT" - }, "node_modules/@types/react": { - "version": "18.3.1", - "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.1.tgz", - "integrity": "sha512-V0kuGBX3+prX+DQ/7r2qsv1NsdfnCLnTgnRJ1pYnxykBhGMz+qj+box5lq7XsO5mtZsBqpjwwTu/7wszPfMBcw==", + "version": "19.2.14", + "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz", + "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==", + "dev": true, + "license": "MIT", "dependencies": { - "@types/prop-types": "*", - "csstype": "^3.0.2" + "csstype": "^3.2.2" } }, "node_modules/@types/react-dom": { - "version": "18.3.1", - "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.1.tgz", - "integrity": "sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==", - "dependencies": { - "@types/react": "*" - } - }, - "node_modules/@types/react-is": { - "version": "18.3.0", - "resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-18.3.0.tgz", - "integrity": "sha512-KZJpHUkAdzyKj/kUHJDc6N7KyidftICufJfOFpiG6haL/BDQNQt5i4n1XDUL/nDZAtGLHDSWRYpLzKTAKSvX6w==", + "version": "19.2.3", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz", + "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==", "dev": true, - "dependencies": { - "@types/react": "*" + "license": "MIT", + "peerDependencies": { + "@types/react": "^19.2.0" } }, "node_modules/@types/react-syntax-highlighter": { @@ -7368,7 +7379,9 @@ } }, "node_modules/csstype": { - "version": "3.1.1", + "version": "3.2.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz", + "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==", "license": "MIT" }, "node_modules/dashify": { @@ -10182,11 +10195,11 @@ } }, "node_modules/minipass": { - "version": "7.1.2", - "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz", - "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==", + "version": "7.1.3", + "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.3.tgz", + "integrity": "sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A==", "dev": true, - "license": "ISC", + "license": "BlueOak-1.0.0", "engines": { "node": ">=16 || 14 >=14.17" } @@ -11487,13 +11500,11 @@ "license": "MIT" }, "node_modules/react": { - "version": "18.3.1", - "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", - "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", + "version": "19.2.4", + "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz", + "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==", "dev": true, - "dependencies": { - "loose-envify": "^1.1.0" - }, + "license": "MIT", "engines": { "node": ">=0.10.0" } @@ -11660,23 +11671,18 @@ } }, "node_modules/react-dom": { - "version": "18.3.1", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", - "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", + "version": "19.2.4", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz", + "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==", "dev": true, + "license": "MIT", "dependencies": { - "loose-envify": "^1.1.0", - "scheduler": "^0.23.2" + "scheduler": "^0.27.0" }, "peerDependencies": { - "react": "^18.3.1" + "react": "^19.2.4" } }, - "node_modules/react-is": { - "version": "18.3.1", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz", - "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==" - }, "node_modules/react-refresh": { "version": "0.17.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz", @@ -12147,13 +12153,11 @@ } }, "node_modules/scheduler": { - "version": "0.23.2", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz", - "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==", + "version": "0.27.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz", + "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==", "dev": true, - "dependencies": { - "loose-envify": "^1.1.0" - } + "license": "MIT" }, "node_modules/semver": { "version": "6.3.1", @@ -14717,15 +14721,15 @@ } }, "@bundled-es-modules/memfs": { - "version": "4.9.4", - "resolved": "https://registry.npmjs.org/@bundled-es-modules/memfs/-/memfs-4.9.4.tgz", - "integrity": "sha512-1XyYPUaIHwEOdF19wYVLBtHJRr42Do+3ctht17cZOHwHf67vkmRNPlYDGY2kJps4RgE5+c7nEZmEzxxvb1NZWA==", + "version": "4.17.0", + "resolved": "https://registry.npmjs.org/@bundled-es-modules/memfs/-/memfs-4.17.0.tgz", + "integrity": "sha512-ykdrkEmQr9BV804yd37ikXfNnvxrwYfY9Z2/EtMHFEFadEjsQXJ1zL9bVZrKNLDtm91UdUOEHso6Aweg93K6xQ==", "dev": true, "requires": { - "assert": "^2.0.0", + "assert": "^2.1.0", "buffer": "^6.0.3", "events": "^3.3.0", - "memfs": "^4.9.3", + "memfs": "^4.17.0", "path": "^0.12.7", "stream": "^0.0.3", "util": "^0.12.5" @@ -15302,7 +15306,7 @@ "@easypost/easy-ui": { "version": "file:easy-ui-react", "requires": { - "@easypost/easy-ui-icons": "1.0.0-alpha.51", + "@easypost/easy-ui-icons": "1.0.0-alpha.53", "@easypost/easy-ui-tokens": "1.0.0-alpha.17", "@react-aria/toast": "^3.0.9", "@react-aria/utils": "^3.32.0", @@ -15310,12 +15314,12 @@ "@react-types/shared": "^3.32.1", "@testing-library/dom": "^10.4.0", "@testing-library/jest-dom": "^6.6.3", - "@testing-library/react": "^16.3.0", + "@testing-library/react": "^16.3.2", "@testing-library/user-event": "^14.6.1", "@types/lodash": "^4.17.18", - "@types/react": "^18.3.1", - "@types/react-dom": "^18.3.1", - "@types/react-is": "^18.3.0", + "@types/react": "^19.2.14", + "@types/react-dom": "^19.2.3", + "@types/react-is": "^19.0.0", "@types/react-syntax-highlighter": "^15.5.13", "@types/react-transition-group": "^4.4.12", "@vitejs/plugin-react": "^4.6.0", @@ -15323,11 +15327,11 @@ "lodash": "^4.17.21", "overlayscrollbars": "^2.3.0", "overlayscrollbars-react": "^0.5.6", - "react": "^18.3.1", + "react": "^19.0.0", "react-aria": "^3.45.0", "react-aria-components": "^1.14.0", - "react-dom": "^18.3.1", - "react-is": "^18.3.1", + "react-dom": "^19.0.0", + "react-is": "^19.0.0", "react-stately": "^3.43.0", "react-syntax-highlighter": "^15.6.1", "react-transition-group": "^4.4.5", @@ -15337,6 +15341,24 @@ "vite-plugin-static-copy": "^3.1.2" }, "dependencies": { + "@testing-library/react": { + "version": "16.3.2", + "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-16.3.2.tgz", + "integrity": "sha512-XU5/SytQM+ykqMnAnvB2umaJNIOsLF3PVv//1Ew4CTcpz0/BRyy/af40qqrt7SjKpDdT1saBMc42CUok5gaw+g==", + "dev": true, + "requires": { + "@babel/runtime": "^7.12.5" + } + }, + "@types/react-is": { + "version": "19.2.0", + "resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-19.2.0.tgz", + "integrity": "sha512-NP2xtcjZfORsOa4g2JwdseyEnF+wUCx25fTdG/J/HIY6yKga6+NozRBg2xR2gyh7kKYyd6DXndbq0YbQuTJ7Ew==", + "dev": true, + "requires": { + "@types/react": "*" + } + }, "brace-expansion": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz", @@ -15368,6 +15390,12 @@ "requires": { "brace-expansion": "^2.0.1" } + }, + "react-is": { + "version": "19.2.4", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.4.tgz", + "integrity": "sha512-W+EWGn2v0ApPKgKKCy/7s7WHXkboGcsrXE+2joLyVxkbyVQfO3MUEaUQDHoSmb8TFFrSKYa9mw64WZHNHSDzYA==", + "dev": true } } }, @@ -18168,15 +18196,6 @@ } } }, - "@testing-library/react": { - "version": "16.3.0", - "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-16.3.0.tgz", - "integrity": "sha512-kFSyxiEDwv1WLl2fgsq6pPBbw5aWKrsY2/noi1Id0TK0UParSF62oFQFGHXIyaG4pp2tEub/Zlel+fjjZILDsw==", - "dev": true, - "requires": { - "@babel/runtime": "^7.12.5" - } - }, "@testing-library/user-event": { "version": "14.6.1", "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.6.1.tgz", @@ -18293,34 +18312,20 @@ "undici-types": "~7.16.0" } }, - "@types/prop-types": { - "version": "15.7.5" - }, "@types/react": { - "version": "18.3.1", - "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.1.tgz", - "integrity": "sha512-V0kuGBX3+prX+DQ/7r2qsv1NsdfnCLnTgnRJ1pYnxykBhGMz+qj+box5lq7XsO5mtZsBqpjwwTu/7wszPfMBcw==", + "version": "19.2.14", + "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz", + "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==", + "dev": true, "requires": { - "@types/prop-types": "*", - "csstype": "^3.0.2" + "csstype": "^3.2.2" } }, "@types/react-dom": { - "version": "18.3.1", - "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.1.tgz", - "integrity": "sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==", - "requires": { - "@types/react": "*" - } - }, - "@types/react-is": { - "version": "18.3.0", - "resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-18.3.0.tgz", - "integrity": "sha512-KZJpHUkAdzyKj/kUHJDc6N7KyidftICufJfOFpiG6haL/BDQNQt5i4n1XDUL/nDZAtGLHDSWRYpLzKTAKSvX6w==", - "dev": true, - "requires": { - "@types/react": "*" - } + "version": "19.2.3", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz", + "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==", + "dev": true }, "@types/react-syntax-highlighter": { "version": "15.5.13", @@ -19206,7 +19211,9 @@ } }, "csstype": { - "version": "3.1.1" + "version": "3.2.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz", + "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==" }, "dashify": { "version": "2.0.0", @@ -21094,9 +21101,9 @@ "dev": true }, "minipass": { - "version": "7.1.2", - "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz", - "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==", + "version": "7.1.3", + "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.3.tgz", + "integrity": "sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A==", "dev": true }, "mri": { @@ -21934,13 +21941,10 @@ "dev": true }, "react": { - "version": "18.3.1", - "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", - "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", - "dev": true, - "requires": { - "loose-envify": "^1.1.0" - } + "version": "19.2.4", + "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz", + "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==", + "dev": true }, "react-aria": { "version": "3.45.0", @@ -22071,20 +22075,14 @@ "dev": true }, "react-dom": { - "version": "18.3.1", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", - "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", + "version": "19.2.4", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz", + "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==", "dev": true, "requires": { - "loose-envify": "^1.1.0", - "scheduler": "^0.23.2" + "scheduler": "^0.27.0" } }, - "react-is": { - "version": "18.3.1", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz", - "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==" - }, "react-refresh": { "version": "0.17.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz", @@ -22403,13 +22401,10 @@ } }, "scheduler": { - "version": "0.23.2", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz", - "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==", - "dev": true, - "requires": { - "loose-envify": "^1.1.0" - } + "version": "0.27.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz", + "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==", + "dev": true }, "semver": { "version": "6.3.1", diff --git a/package.json b/package.json index 9cefa805..f9e30233 100644 --- a/package.json +++ b/package.json @@ -55,14 +55,16 @@ "@storybook/addon-docs": "^9.1.13", "@storybook/react-vite": "^9.1.13", "@types/node": "^24.0.4", + "@types/react": "^19.2.14", + "@types/react-dom": "^19.2.3", "babel-loader": "^10.0.0", "eslint": "^9.22.0", "eslint-plugin-storybook": "9.1.13", "jsdom": "^26.1.0", "npm-run-all": "^4.1.5", "prettier": "^3.6.0", - "react": "^18.3.1", - "react-dom": "^18.3.1", + "react": "^19.0.0", + "react-dom": "^19.0.0", "storybook": "^9.1.13", "stylelint": "^16.21.0", "turbo": "^2.4.4",