@homebound/beam 2.256.1 → 2.257.0

package/dist/components/Avatar.js

@@ -10,7 +10,8 @@ function Avatar({ src, name, size = "md", showName = false, ...others }) {
     const tid = (0, utils_1.useTestIds)(others, "avatar");
     const px = sizeToPixel[size];
     const [showFallback, setShowFallback] = (0, react_1.useState)(src === undefined);
-    const styles = Css_1.Css.br100.wPx(px).hPx(px).overflowHidden.$;
+    // Define min-width as well as width to prevent the image from shrinking when displayed within a flex-child that allows shrinking.
+    const styles = Css_1.Css.br100.wPx(px).hPx(px).mwPx(px).overflowHidden.$;
     const img = showFallback ? ((0, jsx_runtime_1.jsx)("div", { css: { ...styles, ...Css_1.Css[sizeToFallbackTypeScale[size]].bgGray400.gray100.df.aic.jcc.$ }, ...tid, children: name ? nameToInitials(name) : (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: "userCircle", inc: sizeToIconInc[size] }) })) : ((0, jsx_runtime_1.jsx)("img", { src: src, alt: name, css: { ...styles, ...Css_1.Css.objectCover.$ }, onError: () => setShowFallback(true), loading: "lazy", ...tid }));
     return showName && name ? ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.dif.aic.gap1.if(size === "lg" || size === "xl").fdc.$, children: [img, (0, jsx_runtime_1.jsx)("span", { css: Css_1.Css[sizeToTypeScale[size]].$, children: name })] })) : (img);
 }

package/dist/components/Filters/types.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { TestIds } from "../../utils/useTestIds";
 /**
  * Defines the filters for a given filter type `F`.

package/dist/components/Modal/Modal.js

@@ -1,12 +1,9 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Modal = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const form_state_1 = require("@homebound/form-state");
-const resize_observer_1 = __importDefault(require("@react-hook/resize-observer"));
+const utils_1 = require("@react-aria/utils");
 const react_1 = require("react");
 const react_aria_1 = require("react-aria");
 const react_dom_1 = require("react-dom");
@@ -14,7 +11,7 @@ const BeamContext_1 = require("../BeamContext");
 const IconButton_1 = require("../IconButton");
 const useModal_1 = require("./useModal");
 const Css_1 = require("../../Css");
-const utils_1 = require("../../utils");
+const utils_2 = require("../../utils");
 /**
  * Internal component for displaying a Modal; see `useModal` for the public API.
  *
@@ -42,16 +39,20 @@ function Modal(props) {
     const modalBodyRef = (0, react_1.useRef)(null);
     const modalFooterRef = (0, react_1.useRef)(null);
     const modalHeaderRef = (0, react_1.useRef)(null);
-    const testId = (0, utils_1.useTestIds)({}, testIdPrefix);
+    const testId = (0, utils_2.useTestIds)({}, testIdPrefix);
     (0, react_aria_1.usePreventScroll)();
     if (api) {
         api.current = { setSize: (size = "md") => setSize(getSize(size)) };
     }
     const [hasScroll, setHasScroll] = (0, react_1.useState)(forceScrolling !== null && forceScrolling !== void 0 ? forceScrolling : false);
-    (0, resize_observer_1.default)(modalBodyRef, ({ target }) => {
-        if (forceScrolling === undefined && !isFixedHeight) {
-            setHasScroll(target.scrollHeight > target.clientHeight);
-        }
+    (0, utils_1.useResizeObserver)({
+        ref: modalBodyRef,
+        onResize: (0, react_1.useCallback)(() => {
+            const target = modalBodyRef.current;
+            if (forceScrolling === undefined && !isFixedHeight) {
+                setHasScroll(target.scrollHeight > target.clientHeight);
+            }
+        }, []),
     });
     // Even though we use raw-divs for the createPortal calls, we do actually need to
     // use refs + useEffect to stitch those raw divs back into the React component tree.
@@ -76,7 +77,7 @@ exports.ModalHeader = ModalHeader;
 /** Provides consistent styling and the scrolling behavior for a modal's primary content. */
 function ModalBody({ children, virtualized = false, }) {
     const { modalBodyDiv } = (0, BeamContext_1.useBeamContext)();
-    const testId = (0, utils_1.useTestIds)({}, testIdPrefix);
+    const testId = (0, utils_2.useTestIds)({}, testIdPrefix);
     return (0, react_dom_1.createPortal)(
     // If `virtualized`, then we are expecting the `children` will handle their own scrollbar, so have the overflow hidden and adjust padding
     (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.h100.if(virtualized).overflowHidden.pl3.else.px3.$, ...testId.content, children: children }), modalBodyDiv);
@@ -85,7 +86,7 @@ exports.ModalBody = ModalBody;
 /** Provides consistent styling for modal footers, i.e. where actions are placed. */
 function ModalFooter({ children, xss, }) {
     const { modalFooterDiv } = (0, BeamContext_1.useBeamContext)();
-    const testId = (0, utils_1.useTestIds)({}, testIdPrefix);
+    const testId = (0, utils_2.useTestIds)({}, testIdPrefix);
     return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { css: { ...Css_1.Css.p3.df.aic.jcfe.gap1.$, ...xss }, ...testId.footer, children: children }), modalFooterDiv);
 }
 exports.ModalFooter = ModalFooter;

package/dist/components/Modal/OpenModal.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ModalProps } from "./Modal";
 export interface OpenModalProps {
     /** The custom modal content to show. */

package/dist/components/Tabs.js

@@ -30,11 +30,11 @@ exports.TabsWithContent = TabsWithContent;
 function TabContent(props) {
     const tid = (0, utils_1.useTestIds)(props, "tab");
     const { tabs, contentXss = {} } = props;
-    const location = (0, react_router_1.useLocation)();
+    const location = (0, react_router_dom_1.useLocation)();
     const selectedTab = isRouteTabs(props)
         ? props.tabs.find((t) => {
             const paths = Array.isArray(t.path) ? t.path : [t.path];
-            return paths.some((p) => !!(0, react_router_1.matchPath)(location.pathname, { path: t.path, exact: true }));
+            return paths.some((p) => !!(0, react_router_1.matchPath)(location.pathname, { path: p, exact: true }));
         }) || tabs[0]
         : props.tabs.find((tab) => tab.value === props.selected) || tabs[0];
     const uniqueValue = uniqueTabValue(selectedTab);
@@ -46,7 +46,7 @@ exports.TabContent = TabContent;
 /** The top list of tabs. */
 function Tabs(props) {
     const { ariaLabel, tabs, includeBottomBorder, right, ...others } = props;
-    const location = (0, react_router_1.useLocation)();
+    const location = (0, react_router_dom_1.useLocation)();
     const selected = isRouteTabs(props)
         ? uniqueTabValue(props.tabs.find((t) => !!(0, react_router_1.matchPath)(location.pathname, { path: t.path, exact: true })) || props.tabs[0])
         : props.selected;

package/dist/components/Toast/useToast.js

@@ -5,9 +5,7 @@ const react_1 = require("react");
 const ToastContext_1 = require("./ToastContext");
 function useToast() {
     const { setNotice } = (0, ToastContext_1.useToastContext)();
-    const showToast = (0, react_1.useCallback)((props) => {
-        setNotice(props);
-    }, [setNotice]);
+    const showToast = (0, react_1.useCallback)((props) => setNotice(props), [setNotice]);
     return { showToast };
 }
 exports.useToast = useToast;

package/dist/components/internal/CompoundField.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 /** Internal component to help create compound fields */
 export declare function CompoundField({ children }: {
     children: JSX.Element[];

package/dist/components/internal/ContextualModal.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 export interface ContextualModalProps {
-    content: ReactNode;
+    content: ReactNode | ((close: () => void) => ReactNode);
     title?: string;
     close: () => void;
 }

package/dist/forms/BoundChipSelectField.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { FieldState } from "@homebound/form-state";
 import { Value } from "../inputs";
 import { ChipSelectFieldProps } from "../inputs/ChipSelectField";

package/dist/forms/BoundMultiLineSelectField.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { FieldState } from "@homebound/form-state";
 import { MultiLineSelectFieldProps, Value } from "../inputs";
 import { HasIdAndName, Optional } from "../types";

package/dist/forms/BoundMultiSelectField.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { FieldState } from "@homebound/form-state";
 import { MultiSelectFieldProps, Value } from "../inputs";
 import { HasIdAndName, Optional } from "../types";

package/dist/forms/BoundSelectAndTextField.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Only } from "../Css";
 import { BoundSelectFieldProps, BoundTextFieldProps } from "./index";
 import { Value } from "../inputs/Value";

package/dist/forms/BoundSelectField.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { FieldState } from "@homebound/form-state";
 import { SelectFieldProps, Value } from "../inputs";
 import { HasIdAndName, Optional } from "../types";

package/dist/hooks/useBreakpoint.d.ts

@@ -4,8 +4,8 @@ type BreakpointsType = Record<Breakpoint, boolean>;
  * A React hook to return a record of responsive breakpoints that updates on resize.
  *
  * @example
- * const { breakpoints } = useBreakpoint();
+ * const breakpoints = useBreakpoint();
  * if (breakpoints.mdAndDown) { ...do something cool }
  */
-export declare const useBreakpoint: () => BreakpointsType;
+export declare function useBreakpoint(): BreakpointsType;
 export {};

package/dist/hooks/useBreakpoint.js

@@ -13,10 +13,10 @@ const Css_1 = require("../Css");
  * A React hook to return a record of responsive breakpoints that updates on resize.
  *
  * @example
- * const { breakpoints } = useBreakpoint();
+ * const breakpoints = useBreakpoint();
  * if (breakpoints.mdAndDown) { ...do something cool }
  */
-const useBreakpoint = () => {
+function useBreakpoint() {
     const [breakpoints, setBreakpoints] = (0, react_1.useState)(matchMediaBreakpoints());
     const handleResize = (0, use_debounce_1.useDebouncedCallback)(() => {
         const newBps = matchMediaBreakpoints();
@@ -30,7 +30,7 @@ const useBreakpoint = () => {
         return () => window.removeEventListener("resize", handleResize);
     }, [handleResize]);
     return breakpoints;
-};
+}
 exports.useBreakpoint = useBreakpoint;
 function matchMediaBreakpoints() {
     const bps = {};

package/dist/inputs/MultiLineSelectField.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Value } from "./";
 import { BeamSelectFieldBaseProps } from "./internal/SelectFieldBase";
 import { Optional } from "../types";

package/dist/inputs/RadioGroupField.js

@@ -35,8 +35,6 @@ function RadioGroupField(props) {
     // We use useRadioGroup b/c it does neat keyboard up/down stuff
     // TODO: Pass read only, required, error message to useRadioGroup
     const { labelProps, radioGroupProps } = (0, react_aria_1.useRadioGroup)({ label, isDisabled: disabled }, state);
-    // max-width is dependent on having descriptions
-    const anyDescriptions = options.some((o) => !!o.description);
     return (
     // default styling to position `<Label />` above.
     (0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.fdc.gap1.aifs.if(labelStyle === "left").fdr.gap2.jcsb.$, children: [(0, jsx_runtime_1.jsx)(Label_1.Label, { label: label, ...labelProps, ...tid.label, hidden: labelStyle === "hidden" }), (0, jsx_runtime_1.jsxs)("div", { ...radioGroupProps, children: [options.map((option) => {
@@ -68,7 +66,7 @@ function Radio(props) {
                     ...(isFocusVisible ? exports.radioFocus : {}),
                     // Nudge down so the center of the circle lines up with the label text
                     ...Css_1.Css.mtPx(2).mr1.$,
-                }, disabled: disabled, "aria-labelledby": labelId, ...inputProps, ...focusProps, ...others }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { id: labelId, css: Css_1.Css.smMd.gray800.if(disabled).gray400.$, ...(description ? { "aria-describedby": descriptionId } : {}), children: label }), description && ((0, jsx_runtime_1.jsx)("div", { id: descriptionId, css: Css_1.Css.sm.gray700.if(disabled).gray400.$, children: description }))] })] }));
+                }, disabled: disabled, "aria-labelledby": labelId, ...inputProps, ...focusProps, ...others }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { id: labelId, css: Css_1.Css.smMd.gray800.if(disabled).gray400.$, ...(description ? { "aria-describedby": descriptionId } : {}), children: label }), description && ((0, jsx_runtime_1.jsx)("div", { id: descriptionId, css: Css_1.Css.sm.gray700.if(disabled).gray400.$, children: typeof description === "function" ? description() : description }))] })] }));
 }
 const whiteCircle = "data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='4'/%3e%3c/svg%3e";
 // Didn't put these in radioReset yet, are they needed?

package/dist/inputs/SelectField.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Value } from "./";
 import { BeamSelectFieldBaseProps } from "./internal/SelectFieldBase";
 import { HasIdAndName, Optional } from "../types";

package/dist/inputs/internal/VirtualizedOptions.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Node } from "@react-types/shared";
 import { SelectState } from "react-stately";
 interface VirtualizedOptionsProps<O> {

package/dist/utils/getInteractiveElement.d.ts

@@ -1,3 +1,6 @@
+import { Interpolation, Theme } from "@emotion/react";
 import { PressEvent } from "@react-types/shared";
 import { HTMLAttributes, ReactNode } from "react";
-export declare function getButtonOrLink(content: ReactNode, onClick: ((e: PressEvent) => void) | VoidFunction | string | undefined, attrs: HTMLAttributes<HTMLButtonElement | HTMLAnchorElement>, openInNew?: boolean, downloadLink?: boolean): JSX.Element;
+export declare function getButtonOrLink(content: ReactNode, onClick: ((e: PressEvent) => void) | VoidFunction | string | undefined, attrs: HTMLAttributes<HTMLButtonElement | HTMLAnchorElement> & {
+    css?: Interpolation<Theme>;
+}, openInNew?: boolean, downloadLink?: boolean): JSX.Element;

package/dist/utils/rtl.d.ts

@@ -1,7 +1,7 @@
 import { newLocation as _newLocation, withRouter as _withRouter } from "@homebound/rtl-react-router-utils";
-import { change as _change, click as _click, getOptions as _getOptions, input as _input, RenderResult, select as _select, type as _type, typeAndWait as _typeAndWait, wait as _wait, Wrapper } from "@homebound/rtl-utils";
+import { blur as _blur, change as _change, click as _click, focus as _focus, getOptions as _getOptions, input as _input, RenderResult, select as _select, type as _type, typeAndWait as _typeAndWait, wait as _wait, Wrapper } from "@homebound/rtl-utils";
 import { ReactElement } from "react";
-export { _change as change, _click as click, _getOptions as getOptions, _input as input, _select as select, _type as type, _typeAndWait as typeAndWait, _wait as wait, };
+export { _blur as blur, _change as change, _click as click, _focus as focus, _getOptions as getOptions, _input as input, _select as select, _type as type, _typeAndWait as typeAndWait, _wait as wait, };
 export { _newLocation as newLocation, _withRouter as withRouter };
 interface RenderOpts {
     at?: {

package/dist/utils/rtl.js

@@ -1,13 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.withBeamRTL = exports.tableSnapshot = exports.rowAnd = exports.row = exports.cellAnd = exports.cellOf = exports.cell = exports.render = exports.withRouter = exports.newLocation = exports.wait = exports.typeAndWait = exports.type = exports.select = exports.input = exports.getOptions = exports.click = exports.change = void 0;
+exports.withBeamRTL = exports.tableSnapshot = exports.rowAnd = exports.row = exports.cellAnd = exports.cellOf = exports.cell = exports.render = exports.withRouter = exports.newLocation = exports.wait = exports.typeAndWait = exports.type = exports.select = exports.input = exports.getOptions = exports.focus = exports.click = exports.change = exports.blur = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const rtl_react_router_utils_1 = require("@homebound/rtl-react-router-utils");
 Object.defineProperty(exports, "newLocation", { enumerable: true, get: function () { return rtl_react_router_utils_1.newLocation; } });
 Object.defineProperty(exports, "withRouter", { enumerable: true, get: function () { return rtl_react_router_utils_1.withRouter; } });
 const rtl_utils_1 = require("@homebound/rtl-utils");
+Object.defineProperty(exports, "blur", { enumerable: true, get: function () { return rtl_utils_1.blur; } });
 Object.defineProperty(exports, "change", { enumerable: true, get: function () { return rtl_utils_1.change; } });
 Object.defineProperty(exports, "click", { enumerable: true, get: function () { return rtl_utils_1.click; } });
+Object.defineProperty(exports, "focus", { enumerable: true, get: function () { return rtl_utils_1.focus; } });
 Object.defineProperty(exports, "getOptions", { enumerable: true, get: function () { return rtl_utils_1.getOptions; } });
 Object.defineProperty(exports, "input", { enumerable: true, get: function () { return rtl_utils_1.input; } });
 Object.defineProperty(exports, "select", { enumerable: true, get: function () { return rtl_utils_1.select; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.256.1",
+  "version": "2.257.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",
@@ -15,18 +15,18 @@
     "!dist/setupTests.*"
   ],
   "engines": {
-    "node": ">=16.4.0"
+    "node": ">=18.13.0"
   },
   "scripts": {
     "start": "yarn storybook",
     "build": "yarn copy && ttsc",
     "build:truss": "truss",
-    "build:storybook": "build-storybook -s storybookAssets",
+    "build-storybook": "NODE_OPTIONS=--openssl-legacy-provider build-storybook",
     "test": "jest --maxWorkers 4",
     "test:watch": "jest --watch",
     "lint": "eslint --ext js,ts,tsx src",
     "lint:fix": "eslint --ext js,ts,tsx --fix src",
-    "storybook": "start-storybook -p 9000 -s storybookAssets",
+    "storybook": "NODE_OPTIONS=--openssl-legacy-provider start-storybook -p 9000",
     "chromatic": "chromatic --project-token=074248da7284 --exit-once-uploaded --only-changed",
     "copy": "npx copyfiles -u 1 \"./src/**/*.css\" \"./dist/\"",
     "copy-to-internal-frontend": "cp -r dist/* ~/homebound/internal-frontend/node_modules/@homebound/beam/dist/",
@@ -35,19 +35,19 @@
   "dependencies": {
     "@homebound/form-state": "^2.17.0",
     "@internationalized/number": "^3.0.3",
+    "@popperjs/core": "^2.11.6",
     "@react-aria/utils": "^3.13.2",
-    "@react-hook/resize-observer": "^1.2.2",
     "change-case": "^4.1.2",
     "date-fns": "^2.28.0",
     "dompurify": "^2.3.0",
     "fast-deep-equal": "^3.1.3",
-    "framer-motion": "^4.1.11",
+    "framer-motion": "^9.0.4",
     "memoize-one": "^5.2.1",
     "react-aria": "^3.18.0",
     "react-day-picker": "8.0.7",
-    "react-popper": "^2.2.5",
-    "react-router": "^5.2.0",
-    "react-router-dom": "^5.2.0",
+    "react-popper": "^2.3.0",
+    "react-router": "^5.3.4",
+    "react-router-dom": "^5.3.4",
     "react-stately": "^3.16.0",
     "react-virtuoso": "2.10.2",
     "tributejs": "^5.1.3",
@@ -70,68 +70,71 @@
     }
   },
   "devDependencies": {
-    "@babel/core": "^7.15.5",
-    "@emotion/babel-preset-css-prop": "^11.2.0",
-    "@emotion/jest": "^11.3.0",
-    "@emotion/react": "^11.1.5",
-    "@homebound/eslint-config": "1.5.1",
-    "@homebound/rtl-react-router-utils": "^1.0.3",
-    "@homebound/rtl-utils": "^2.59.3",
+    "@babel/core": "^7.21.0",
+    "@emotion/babel-preset-css-prop": "^11.10.0",
+    "@emotion/jest": "^11.10.5",
+    "@emotion/react": "^11.10.6",
+    "@homebound/eslint-config": "1.6.1",
+    "@homebound/rtl-react-router-utils": "1.0.3",
+    "@homebound/rtl-utils": "^2.61.1",
     "@homebound/truss": "^1.123.0",
     "@homebound/tsconfig": "^1.0.3",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
     "@semantic-release/exec": "^6.0.3",
-    "@semantic-release/git": "^9.0.0",
+    "@semantic-release/git": "^10.0.1",
     "@storybook/addon-docs": "^6.5.10",
     "@storybook/addon-essentials": "^6.5.10",
     "@storybook/addon-interactions": "^6.5.10",
     "@storybook/addon-links": "^6.5.10",
     "@storybook/addons": "^6.5.10",
-    "@storybook/builder-vite": "^0.2.2",
-    "@storybook/mdx2-csf": "^0.0.3",
-    "@storybook/react": "^6.5.10",
+    "@storybook/builder-vite": "^0.4.2",
+    "@storybook/mdx2-csf": "1.0.0-next.0",
+    "@storybook/react": "^6.5.16",
     "@storybook/testing-library": "^0.0.13",
-    "@testing-library/jest-dom": "^5.11.9",
-    "@testing-library/react-hooks": "^7.0.1",
-    "@tsconfig/recommended": "^1.0.1",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@tsconfig/recommended": "^1.0.2",
     "@types/dompurify": "^2.2.3",
-    "@types/jest": "^26.0.20",
-    "@types/react": "^17.0.5",
-    "@types/react-beautiful-dnd": "^13.1.2",
-    "@types/react-dom": "^16.9.11",
-    "@types/react-router-dom": "^5.1.7",
-    "@vitejs/plugin-react": "^2.0.1",
+    "@types/jest": "^29.4.0",
+    "@types/react": "^18.0.28",
+    "@types/react-beautiful-dnd": "^13.1.3",
+    "@types/react-dom": "^18.0.11",
+    "@types/react-router-dom": "^5.3.3",
+    "@vitejs/plugin-react": "^3.1.0",
     "array-move": "^4.0.0",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.2",
-    "chromatic": "^6.11.4",
-    "conventional-changelog-conventionalcommits": "^4.5.0",
+    "chromatic": "^6.17.0",
+    "conventional-changelog-conventionalcommits": "^5.0.0",
     "eslint": "^8.12.0",
     "eslint-plugin-storybook": "^0.6.4",
     "husky": "^5.1.1",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^26.6.3",
-    "jest-chain": "^1.1.5",
-    "jest-watch-typeahead": "^0.6.5",
-    "mobx": "^6.3.2",
-    "mobx-react": "^7.2.0",
-    "prettier": "^2.8.1",
-    "prettier-plugin-organize-imports": "^3.2.1",
-    "react": "^16.14.0",
-    "react-beautiful-dnd": "^13.1.0",
-    "react-dom": "^16.14.0",
-    "semantic-release": "^17.4.0",
+    "jest": "^29.4.3",
+    "jest-chain": "^1.1.6",
+    "jest-environment-jsdom": "^29.4.3",
+    "jest-watch-typeahead": "^2.2.2",
+    "mobx": "^6.8.0",
+    "mobx-react": "^7.6.0",
+    "prettier": "^2.8.4",
+    "prettier-plugin-organize-imports": "^3.2.2",
+    "react": "^18.2.0",
+    "react-beautiful-dnd": "^13.1.1",
+    "react-dom": "^18.2.0",
+    "semantic-release": "^20.1.0",
     "storybook-addon-designs": "^6.3.1",
     "storybook-addon-performance": "^0.16.1",
-    "ts-jest": "^26.5.3",
-    "ts-node": "^9.1.1",
+    "ts-jest": "^29.0.5",
+    "ts-node": "^10.9.1",
     "tslib": "^2.1.0",
     "ttypescript": "^1.5.15",
-    "typescript": "^4.9.4",
-    "typescript-transform-paths": "^3.4.4",
-    "vite": "^3.0.9",
+    "typescript": "^4.9.5",
+    "typescript-transform-paths": "^3.4.6",
+    "vite": "^4.1.4",
     "vite-plugin-turbosnap": "^1.0.1",
     "watch": "^1.0.2"
   },
+  "resolutions": {
+    "@types/react": "18.0.28",
+    "react-router": "5.3.4"
+  },
   "packageManager": "yarn@3.3.0"
 }