@jetbrains/ring-ui 6.0.3 → 6.0.4

package/components/collapse/collapse-content.d.ts

@@ -0,0 +1,11 @@
+import React, { PropsWithChildren } from 'react';
+type Props = {
+    minHeight?: number;
+    className?: string;
+    'data-test'?: string | null | undefined;
+};
+/**
+ * @name CollapseContent
+ */
+export declare const CollapseContent: React.FC<PropsWithChildren<Props>>;
+export default CollapseContent;

package/components/collapse/collapse-content.js

@@ -0,0 +1,72 @@
+import React, { useState, useEffect, useRef, useContext, useMemo } from 'react';
+import classNames from 'classnames';
+import dataTests from '../global/data-tests';
+import { getRect } from '../global/dom';
+import { toPx } from './utils';
+import CollapseContext from './collapse-context';
+import { COLLAPSE_CONTENT_TEST_ID, COLLAPSE_CONTENT_CONTAINER_TEST_ID } from './consts';
+import styles from './collapse.css';
+const DURATION_FACTOR = 0.5;
+const DEFAULT_HEIGHT = 0;
+const VISIBLE = 1;
+const HIDDEN = 0;
+/**
+ * @name CollapseContent
+ */
+export const CollapseContent = ({ children, minHeight = DEFAULT_HEIGHT, 'data-test': dataTest }) => {
+    const { collapsed, duration, id, disableAnimation } = useContext(CollapseContext);
+    const containerRef = useRef(null);
+    const contentRef = useRef(null);
+    const initialContentHeight = useRef(minHeight);
+    const contentHeight = useRef(DEFAULT_HEIGHT);
+    const [dimensions, setDimensions] = useState({
+        width: 0,
+        height: 0
+    });
+    const [height, setHeight] = useState(toPx(minHeight));
+    const [showFade, setShowFade] = useState(true);
+    useEffect(() => {
+        if (!collapsed) {
+            setShowFade(false);
+        }
+        else {
+            setShowFade(true);
+        }
+    }, [collapsed]);
+    useEffect(() => {
+        if (contentRef.current) {
+            contentHeight.current = getRect(contentRef.current).height;
+        }
+    }, [minHeight, dimensions.height]);
+    useEffect(() => {
+        const nextHeight = collapsed ? initialContentHeight.current : contentHeight.current;
+        setHeight(toPx(nextHeight));
+    }, [collapsed, dimensions.height]);
+    useEffect(() => {
+        if (contentRef.current) {
+            const observer = new ResizeObserver(([entry]) => {
+                if (entry && entry.borderBoxSize) {
+                    const { inlineSize, blockSize } = entry.borderBoxSize[0];
+                    setDimensions({ width: inlineSize, height: blockSize });
+                }
+            });
+            observer.observe(contentRef.current);
+        }
+    }, []);
+    const style = useMemo(() => {
+        const calculatedDuration = duration + contentHeight.current * DURATION_FACTOR;
+        return {
+            '--duration': `${calculatedDuration}ms`,
+            height,
+            opacity: collapsed && !minHeight ? HIDDEN : VISIBLE
+        };
+    }, [duration, height, collapsed, minHeight]);
+    const fadeShouldBeVisible = useMemo(() => Boolean(minHeight && showFade), [minHeight, showFade]);
+    return (<div ref={containerRef} id={`collapse-content-${id}`} data-test={dataTests(COLLAPSE_CONTENT_CONTAINER_TEST_ID)} className={classNames(styles.container, { [styles.transition]: !disableAnimation })} style={style}>
+      <div ref={contentRef} data-test={dataTests(COLLAPSE_CONTENT_TEST_ID, dataTest)}>
+        {children}
+      </div>
+      {fadeShouldBeVisible && <div className={styles.fade}/>}
+    </div>);
+};
+export default CollapseContent;

package/components/collapse/collapse-context.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+interface CollapseContextInterface {
+    collapsed: boolean;
+    duration: number;
+    disableAnimation: boolean;
+    setCollapsed: () => void;
+    id: string;
+}
+export declare const CollapseContext: import("react").Context<CollapseContextInterface>;
+export default CollapseContext;

package/components/collapse/collapse-context.js

@@ -0,0 +1,10 @@
+import { createContext } from 'react';
+import { BASE_ANIMATION_DURATION } from './consts';
+export const CollapseContext = createContext({
+    collapsed: true,
+    duration: BASE_ANIMATION_DURATION,
+    disableAnimation: false,
+    setCollapsed: () => { },
+    id: ''
+});
+export default CollapseContext;

package/components/collapse/collapse-control.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+type ChildrenFunction = (collapsed: boolean) => React.ReactNode;
+type Props = {
+    children: ChildrenFunction | React.ReactNode;
+    'data-test'?: string | null | undefined;
+};
+/**
+ * @name CollapseControl
+ */
+export declare const CollapseControl: React.FC<Props>;
+export default CollapseControl;

package/components/collapse/collapse-control.js

@@ -0,0 +1,22 @@
+import React, { useMemo, useContext, cloneElement } from 'react';
+import dataTests from '../global/data-tests';
+import { CollapseContext } from './collapse-context';
+import { COLLAPSE_CONTROL_TEST_ID } from './consts';
+/**
+ * @name CollapseControl
+ */
+export const CollapseControl = ({ children, 'data-test': dataTest }) => {
+    const { setCollapsed, collapsed, id } = useContext(CollapseContext);
+    const child = useMemo(() => {
+        if (typeof children === 'function') {
+            return <p data-test={dataTests(COLLAPSE_CONTROL_TEST_ID, dataTest)}>{children(collapsed)}</p>;
+        }
+        return <p data-test={dataTests(COLLAPSE_CONTROL_TEST_ID, dataTest)}>{children}</p>;
+    }, [children, collapsed, dataTest]);
+    return cloneElement(child, {
+        onClick: setCollapsed,
+        'aria-controls': `collapse-content-${id}`,
+        'aria-expanded': String(!collapsed)
+    });
+};
+export default CollapseControl;

package/components/collapse/collapse.css

@@ -0,0 +1,40 @@
+.container {
+    position: relative;
+    will-change: height, opacity;
+
+    overflow: hidden;
+
+}
+
+.transition {
+    transition: height var(--duration) ease-in-out 0s, opacity var(--duration) ease-in-out 0s;
+}
+
+.summary {
+    list-style: none;
+
+    cursor: pointer;
+}
+
+.trigger {
+    cursor: pointer;
+
+    border: none;
+    outline: none;
+    background: transparent;
+}
+
+.fade {
+    position: absolute;
+    z-index: 10;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    height: calc(var(--ring-unit) * 3);
+
+    pointer-events: none;
+
+    color: var(--ring-content-background-color);
+    background-image: linear-gradient(to bottom, transparent 0%, currentColor 50%);
+}

package/components/collapse/collapse.d.ts

@@ -0,0 +1,12 @@
+import React, { PropsWithChildren } from 'react';
+type Props = {
+    onChange?: (collapsed: boolean) => void;
+    duration?: number;
+    disableAnimation?: boolean;
+    className?: string;
+};
+/**
+ * @name Collapse
+ */
+export declare const Collapse: React.FC<PropsWithChildren<Props>>;
+export default Collapse;

package/components/collapse/collapse.js

@@ -0,0 +1,26 @@
+import React, { useCallback, useId, useState } from 'react';
+import { CollapseContext } from './collapse-context';
+import { BASE_ANIMATION_DURATION } from './consts';
+/**
+ * @name Collapse
+ */
+export const Collapse = ({ children, duration = BASE_ANIMATION_DURATION, disableAnimation = false, className = '', onChange = () => { } }) => {
+    const [collapsed, toggle] = useState(true);
+    const id = useId();
+    const setCollapsed = useCallback(() => {
+        toggle(!collapsed);
+        onChange(!collapsed);
+    }, [toggle, onChange, collapsed]);
+    return (<div className={className}>
+      <CollapseContext.Provider value={{
+            collapsed,
+            setCollapsed,
+            duration,
+            disableAnimation,
+            id
+        }}>
+        {children}
+      </CollapseContext.Provider>
+    </div>);
+};
+export default Collapse;

package/components/collapse/collapse.stories.css

@@ -0,0 +1,25 @@
+.container {
+  width: 400px;
+  padding: 10px;
+}
+
+.border {
+  border: 1px solid var(--ring-line-color);
+  border-radius: 5px;
+}
+
+.loaderWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  min-height: 200px;
+}
+
+.content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  height: 500px;
+}

package/components/collapse/consts.d.ts

@@ -0,0 +1,4 @@
+export declare const COLLAPSE_CONTROL_TEST_ID = "ring-collapse-control";
+export declare const COLLAPSE_CONTENT_CONTAINER_TEST_ID = "ring-collapse-content-container";
+export declare const COLLAPSE_CONTENT_TEST_ID = "ring-collapse-content";
+export declare const BASE_ANIMATION_DURATION = 200;

package/components/collapse/consts.js

@@ -0,0 +1,4 @@
+export const COLLAPSE_CONTROL_TEST_ID = 'ring-collapse-control';
+export const COLLAPSE_CONTENT_CONTAINER_TEST_ID = 'ring-collapse-content-container';
+export const COLLAPSE_CONTENT_TEST_ID = 'ring-collapse-content';
+export const BASE_ANIMATION_DURATION = 200;

package/components/collapse/utils.d.ts

@@ -0,0 +1 @@
+export declare const toPx: (value: number) => string;

package/components/collapse/utils.js

@@ -0,0 +1 @@
+export const toPx = (value) => `${value}px`;

package/components/date-picker/consts.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import add from 'date-fns/add';
+import { add } from 'date-fns/add';
 const unit = 8; // px;
 const units = {
     unit,

package/components/date-picker/date-picker.js

@@ -1,13 +1,13 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import formatDate from 'date-fns/format';
-import isSameDay from 'date-fns/isSameDay';
-import isSameMonth from 'date-fns/isSameMonth';
-import isSameYear from 'date-fns/isSameYear';
-import isValid from 'date-fns/isValid';
-import parse from 'date-fns/parse';
-import set from 'date-fns/set';
+import { format as formatDate } from 'date-fns/format';
+import { isSameDay } from 'date-fns/isSameDay';
+import { isSameMonth } from 'date-fns/isSameMonth';
+import { isSameYear } from 'date-fns/isSameYear';
+import { isValid } from 'date-fns/isValid';
+import { parse } from 'date-fns/parse';
+import { set } from 'date-fns/set';
 import calendarIcon from '@jetbrains/icons/calendar';
 import chevronDownIcon from '@jetbrains/icons/chevron-down';
 import memoize from '../global/memoize';

package/components/date-picker/date-popup.js

@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import isAfter from 'date-fns/isAfter';
-import isBefore from 'date-fns/isBefore';
-import isSameDay from 'date-fns/isSameDay';
-import startOfDay from 'date-fns/startOfDay';
+import { isAfter } from 'date-fns/isAfter';
+import { isBefore } from 'date-fns/isBefore';
+import { isSameDay } from 'date-fns/isSameDay';
+import { startOfDay } from 'date-fns/startOfDay';
 import { set } from 'date-fns';
 import memoize from '../global/memoize';
 import DateInput from './date-input';

package/components/date-picker/day.js

@@ -1,15 +1,15 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import addDays from 'date-fns/addDays';
-import format from 'date-fns/format';
-import getDay from 'date-fns/getDay';
-import getDate from 'date-fns/getDate';
-import isAfter from 'date-fns/isAfter';
-import isBefore from 'date-fns/isBefore';
-import isSameDay from 'date-fns/isSameDay';
-import isToday from 'date-fns/isToday';
-import startOfDay from 'date-fns/startOfDay';
+import { addDays } from 'date-fns/addDays';
+import { format } from 'date-fns/format';
+import { getDay } from 'date-fns/getDay';
+import { getDate } from 'date-fns/getDate';
+import { isAfter } from 'date-fns/isAfter';
+import { isBefore } from 'date-fns/isBefore';
+import { isSameDay } from 'date-fns/isSameDay';
+import { isToday } from 'date-fns/isToday';
+import { startOfDay } from 'date-fns/startOfDay';
 import { dateType, weekdays } from './consts';
 import styles from './date-picker.css';
 let hoverTO;

package/components/date-picker/month-names.js

@@ -1,12 +1,12 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import endOfMonth from 'date-fns/endOfMonth';
-import format from 'date-fns/format';
-import isThisMonth from 'date-fns/isThisMonth';
-import set from 'date-fns/set';
-import startOfDay from 'date-fns/startOfDay';
-import startOfYear from 'date-fns/startOfYear';
+import { endOfMonth } from 'date-fns/endOfMonth';
+import { format } from 'date-fns/format';
+import { isThisMonth } from 'date-fns/isThisMonth';
+import { set } from 'date-fns/set';
+import { startOfDay } from 'date-fns/startOfDay';
+import { startOfYear } from 'date-fns/startOfYear';
 import linearFunction from '../global/linear-function';
 import MonthSlider from './month-slider';
 import { YEAR, MIDDLE_DAY, yearScrollSpeed, dateType } from './consts';

package/components/date-picker/month-slider.js

@@ -1,9 +1,9 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import addYears from 'date-fns/addYears';
-import startOfDay from 'date-fns/startOfDay';
-import subYears from 'date-fns/subYears';
+import { addYears } from 'date-fns/addYears';
+import { startOfDay } from 'date-fns/startOfDay';
+import { subYears } from 'date-fns/subYears';
 import linearFunction from '../global/linear-function';
 import units, { dateType, yearScrollSpeed } from './consts';
 import styles from './date-picker.css';

package/components/date-picker/month.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import addDays from 'date-fns/addDays';
-import endOfMonth from 'date-fns/endOfMonth';
-import format from 'date-fns/format';
-import getDay from 'date-fns/getDay';
-import setDay from 'date-fns/setDay';
+import { addDays } from 'date-fns/addDays';
+import { endOfMonth } from 'date-fns/endOfMonth';
+import { format } from 'date-fns/format';
+import { getDay } from 'date-fns/getDay';
+import { setDay } from 'date-fns/setDay';
 import PropTypes from 'prop-types';
 import Day from './day';
 import { dateType, WEEK, weekdays } from './consts';

package/components/date-picker/months.js

@@ -1,11 +1,11 @@
 import React, { useEffect, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
-import addMonths from 'date-fns/addMonths';
-import getDay from 'date-fns/getDay';
-import getDaysInMonth from 'date-fns/getDaysInMonth';
-import startOfMonth from 'date-fns/startOfMonth';
-import subMonths from 'date-fns/subMonths';
-import endOfMonth from 'date-fns/endOfMonth';
+import { addMonths } from 'date-fns/addMonths';
+import { getDay } from 'date-fns/getDay';
+import { getDaysInMonth } from 'date-fns/getDaysInMonth';
+import { startOfMonth } from 'date-fns/startOfMonth';
+import { subMonths } from 'date-fns/subMonths';
+import { endOfMonth } from 'date-fns/endOfMonth';
 import scheduleRAF from '../global/schedule-raf';
 import linearFunction from '../global/linear-function';
 import useEventCallback from '../global/use-event-callback';

package/components/date-picker/weekdays.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import classNames from 'classnames';
-import getDay from 'date-fns/getDay';
-import format from 'date-fns/format';
-import setDay from 'date-fns/setDay';
-import startOfDay from 'date-fns/startOfDay';
+import { getDay } from 'date-fns/getDay';
+import { format } from 'date-fns/format';
+import { setDay } from 'date-fns/setDay';
+import { startOfDay } from 'date-fns/startOfDay';
 import PropTypes from 'prop-types';
 import { weekdays } from './consts';
 import styles from './date-picker.css';

package/components/date-picker/years.js

@@ -1,14 +1,14 @@
 import React, { createRef, PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import addYears from 'date-fns/addYears';
-import getYear from 'date-fns/getYear';
-import format from 'date-fns/format';
-import isSameYear from 'date-fns/isSameYear';
-import isThisYear from 'date-fns/isThisYear';
-import setYear from 'date-fns/setYear';
-import startOfYear from 'date-fns/startOfYear';
-import subYears from 'date-fns/subYears';
+import { addYears } from 'date-fns/addYears';
+import { getYear } from 'date-fns/getYear';
+import { format } from 'date-fns/format';
+import { isSameYear } from 'date-fns/isSameYear';
+import { isThisYear } from 'date-fns/isThisYear';
+import { setYear } from 'date-fns/setYear';
+import { startOfYear } from 'date-fns/startOfYear';
+import { subYears } from 'date-fns/subYears';
 import linearFunction from '../global/linear-function';
 import styles from './date-picker.css';
 import units, { dateType, DOUBLE, HALF, yearDuration } from './consts';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "6.0.3",
+  "version": "6.0.4",
   "description": "JetBrains UI library",
   "author": "JetBrains",
   "license": "Apache-2.0",
@@ -76,8 +76,8 @@
   },
   "readmeFilename": "README.md",
   "devDependencies": {
-    "@babel/cli": "^7.23.4",
-    "@babel/eslint-parser": "^7.23.3",
+    "@babel/cli": "^7.23.9",
+    "@babel/eslint-parser": "^7.23.10",
     "@csstools/stylelint-no-at-nest-rule": "^2.0.0",
     "@csstools/css-parser-algorithms": "^2.5.0",
     "@jetbrains/eslint-config": "^5.4.1",
@@ -87,19 +87,19 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-replace": "^5.0.5",
-    "@storybook/addon-a11y": "7.6.8",
-    "@storybook/addon-docs": "7.6.7",
-    "@storybook/addon-essentials": "7.6.7",
-    "@storybook/addon-storyshots": "7.6.3",
-    "@storybook/addon-storyshots-puppeteer": "7.6.8",
-    "@storybook/addon-storysource": "7.6.8",
-    "@storybook/addons": "7.6.7",
-    "@storybook/preview-api": "7.6.3",
-    "@storybook/react": "7.6.3",
-    "@storybook/react-webpack5": "7.6.7",
-    "@storybook/source-loader": "7.6.8",
-    "@storybook/theming": "7.6.8",
-    "@testing-library/react": "^14.1.2",
+    "@storybook/addon-a11y": "7.6.12",
+    "@storybook/addon-docs": "7.6.12",
+    "@storybook/addon-essentials": "7.6.12",
+    "@storybook/addon-storyshots": "7.6.10",
+    "@storybook/addon-storyshots-puppeteer": "7.6.12",
+    "@storybook/addon-storysource": "7.6.12",
+    "@storybook/addons": "7.6.12",
+    "@storybook/preview-api": "7.6.10",
+    "@storybook/react": "7.6.10",
+    "@storybook/react-webpack5": "7.6.12",
+    "@storybook/source-loader": "7.6.12",
+    "@storybook/theming": "7.6.12",
+    "@testing-library/react": "^14.2.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/chai": "^4.3.11",
     "@types/chai-as-promised": "^7.1.8",
@@ -107,22 +107,22 @@
     "@types/chai-enzyme": "^0.6.13",
     "@types/enzyme": "^3.10.18",
     "@types/markdown-it": "^13.0.7",
-    "@types/react": "^18.2.48",
+    "@types/react": "^18.2.53",
     "@types/react-dom": "^18.2.18",
     "@types/sinon": "^17.0.3",
     "@types/sinon-chai": "^3.2.12",
-    "@typescript-eslint/eslint-plugin": "^6.18.1",
-    "@typescript-eslint/parser": "^6.18.1",
+    "@typescript-eslint/eslint-plugin": "^6.20.0",
+    "@typescript-eslint/parser": "^6.20.0",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
     "acorn": "^8.11.3",
     "babel-plugin-require-context-hook": "^1.0.0",
-    "caniuse-lite": "^1.0.30001576",
-    "chai": "^5.0.0",
+    "caniuse-lite": "^1.0.30001584",
+    "chai": "^5.0.3",
     "chai-as-promised": "^7.1.1",
     "chai-dom": "^1.10.0",
     "chai-enzyme": "1.0.0-beta.1",
     "cheerio": "^1.0.0-rc.12",
-    "core-js": "^3.35.0",
+    "core-js": "^3.35.1",
     "cpy-cli": "^3.1.1",
     "enzyme": "^3.11.0",
     "eslint": "^8.56.0",
@@ -135,9 +135,9 @@
     "events": "^3.3.0",
     "glob": "^10.3.10",
     "html-webpack-plugin": "^5.6.0",
-    "husky": "^8.0.3",
+    "husky": "^9.0.10",
     "identity-obj-proxy": "^3.0.0",
-    "imports-loader": "^4.0.1",
+    "imports-loader": "^5.0.0",
     "jest": "~29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-teamcity": "^1.10.0",
@@ -146,35 +146,35 @@
     "karma-mocha": "^2.0.1",
     "karma-sourcemap-loader": "^0.4.0",
     "karma-teamcity-reporter": "^2.0.0",
-    "karma-webpack": "^5.0.0",
-    "lint-staged": "^15.2.0",
+    "karma-webpack": "^5.0.1",
+    "lint-staged": "^15.2.1",
     "markdown-it": "^14.0.0",
     "merge-options": "^3.0.4",
     "mocha": "^10.2.0",
     "pinst": "^3.0.0",
-    "prettier": "^3.2.2",
-    "puppeteer": "^21.2.1",
+    "prettier": "^3.2.5",
+    "puppeteer": "^22.0.0",
     "raw-loader": "^4.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-test-renderer": "^18.2.0",
     "regenerator-runtime": "^0.14.1",
     "rimraf": "^5.0.5",
-    "rollup": "^4.9.5",
+    "rollup": "^4.9.6",
     "rollup-plugin-clear": "^2.0.7",
     "rollup-plugin-styles": "^4.0.0",
     "sinon": "^17.0.1",
     "sinon-chai": "^3.7.0",
     "storage-mock": "^2.1.0",
-    "storybook": "^7.6.8",
+    "storybook": "7.6.12",
     "storybook-addon-themes": "^6.1.0",
-    "stylelint": "^16.1.0",
+    "stylelint": "^16.2.1",
     "svg-inline-loader": "^0.8.2",
     "teamcity-service-messages": "^0.1.14",
     "terser-webpack-plugin": "^5.3.10",
     "typescript": "~5.3.3",
     "wallaby-webpack": "^3.9.16",
-    "webpack": "^5.89.0",
+    "webpack": "^5.90.1",
     "webpack-cli": "^5.1.4",
     "xmlappend": "^1.0.4"
   },
@@ -198,11 +198,11 @@
     }
   },
   "dependencies": {
-    "@babel/core": "^7.23.7",
+    "@babel/core": "^7.23.9",
     "@babel/preset-typescript": "^7.23.3",
     "@jetbrains/babel-preset-jetbrains": "^2.3.2",
-    "@jetbrains/icons": "^3.22.0",
-    "@jetbrains/logos": "^2.2.24",
+    "@jetbrains/icons": "^3.24.0",
+    "@jetbrains/logos": "^2.2.25",
     "@jetbrains/postcss-require-hover": "^0.1.2",
     "@types/combokeys": "^2.4.9",
     "@types/deep-equal": "^1.0.4",
@@ -213,13 +213,13 @@
     "@ungap/url-search-params": "^0.2.2",
     "babel-loader": "9.1.3",
     "babel-plugin-transform-define": "^2.1.4",
-    "browserslist": "^4.22.2",
+    "browserslist": "^4.22.3",
     "change-case": "^4.1.1",
     "classnames": "^2.5.1",
     "combokeys": "^3.0.1",
-    "css-loader": "^6.9.0",
+    "css-loader": "^6.10.0",
     "csstype": "^3.1.3",
-    "date-fns": "^2.30.0",
+    "date-fns": "^3.3.1",
     "deep-equal": "^2.2.3",
     "element-resize-detector": "^1.2.4",
     "es6-error": "^4.1.1",
@@ -234,7 +234,7 @@
     "postcss-calc": "^9.0.1",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-font-family-system-ui": "^5.0.0",
-    "postcss-loader": "^7.3.4",
+    "postcss-loader": "^8.1.0",
     "postcss-modules-values-replace": "^4.1.0",
     "postcss-preset-env": "^9.3.0",
     "prop-types": "^15.8.1",