diff --git a/README.md b/README.md index 36393f9536..435a8a120e 100644 --- a/README.md +++ b/README.md @@ -69,7 +69,7 @@ const Example = () => { VKUI - Items}> + Items}> Hello World diff --git a/benchmark/package.json b/benchmark/package.json index dd4a0cba19..9df4cbd518 100644 --- a/benchmark/package.json +++ b/benchmark/package.json @@ -10,7 +10,7 @@ }, "dependencies": { "@playwright/test": "1.48.2", - "@swc/core": "^1.7.40", + "@swc/core": "^1.8.0", "@vkontakte/vkui": "workspace:packages/vkui", "cli-table3": "^0.6.1", "css-loader": "^6.10.0", @@ -18,7 +18,7 @@ "dotenv": "^16.4.5", "finalhandler": "1.3.1", "html-webpack-plugin": "^5.6.3", - "mini-css-extract-plugin": "^2.9.1", + "mini-css-extract-plugin": "^2.9.2", "playwright": "1.48.2", "postcss": "^8.4.47", "postcss-modules": "^6.0.0", @@ -27,6 +27,6 @@ "serve-static": "1.16.2", "swc-loader": "^0.2.6", "terser-webpack-plugin": "^5.3.10", - "webpack": "^5.95.0" + "webpack": "^5.96.1" } } diff --git a/docs/MAINTAINERS.md b/docs/MAINTAINERS.md index 4fdc52507a..936f741557 100644 --- a/docs/MAINTAINERS.md +++ b/docs/MAINTAINERS.md @@ -101,9 +101,8 @@ > ⚠️ Обратите внимание > > Несмотря на то, что черновой список изменений создаётся и обновляется автоматически при слиянии `Pull Request`, бывают случае, -> когда нужно вручную добавить или отредактировать изменение. Тогда нужно учитывать, что ссылка на черновик меняется после каждого -> его сохранения. Поэтому если вносить изменения одновременно с кем-то, то последний сохранивший документ получит ошибку, что он уже -> неактуален. В этом случае, нужно будет открыть черновик по новой ссылке и снова внести свои изменения. +> когда нужно вручную добавить или отредактировать изменение. Тогда нужно учитывать, что кто-то параллельно тоже может начать +> редактировать черновик и тот, кто последний сохранит, затрёт изменение другого. > > Чтобы избежать таких неудобств, лучше всего сообщить коллегам в чате, что вы собираетесь вносить изменения, а после отписаться, > что вы закончили работы. diff --git a/package.json b/package.json index 4121d39b88..fa6a6c7922 100644 --- a/package.json +++ b/package.json @@ -18,16 +18,16 @@ "@size-limit/file": "^11.1.6", "@size-limit/webpack": "^11.1.6", "@size-limit/webpack-css": "^11.1.6", - "@swc/cli": "^0.4.0", - "@swc/core": "1.7.40", - "@swc/jest": "^0.2.36", + "@swc/cli": "^0.5.0", + "@swc/core": "1.8.0", + "@swc/jest": "^0.2.37", "@testing-library/dom": "^10.4.0", - "@testing-library/jest-dom": "^6.6.2", + "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "^16.0.1", "@testing-library/user-event": "^14.5.2", "@types/jest": "^29.5.14", "@types/jest-axe": "^3.5.9", - "@types/node": "^22.8.1", + "@types/node": "^22.8.7", "@types/react": "^18.3.12", "@types/react-dom": "^18.3.1", "@types/webpack": "^5.28.5", @@ -64,10 +64,10 @@ "jest-environment-node": "^29.7.0", "jest-preset-stylelint": "^7.1.0", "lint-staged": "^15.2.10", - "mini-css-extract-plugin": "^2.9.1", + "mini-css-extract-plugin": "^2.9.2", "postcss": "^8.4.47", "postcss-cli": "^11.0.0", - "postcss-custom-media": "^11.0.4", + "postcss-custom-media": "^11.0.5", "postcss-gap-properties": "^6.0.0", "postcss-import": "^16.1.0", "postcss-loader": "^8.1.1", @@ -94,7 +94,7 @@ "ts-node": "^10.9.2", "typescript": "^5.6.3", "typescript-plugin-css-modules": "^5.1.0", - "webpack": "^5.95.0", + "webpack": "^5.96.1", "webpack-cli": "^5.1.4", "webpack-merge": "^6.0.1", "yargs": "^17.7.2" diff --git a/packages/codemods/package.json b/packages/codemods/package.json index aba54c2ff9..da8a45d1d1 100644 --- a/packages/codemods/package.json +++ b/packages/codemods/package.json @@ -17,17 +17,17 @@ "chalk": "^4.1.2", "commander": "^12.1.0", "cross-spawn": "^7.0.3", - "jscodeshift": "^17.0.0", + "jscodeshift": "^17.1.1", "prompts": "^2.4.2", "typescript": "^5.6.3" }, "devDependencies": { - "@swc/core": "^1.7.40", - "@swc/jest": "^0.2.36", + "@swc/core": "^1.8.0", + "@swc/jest": "^0.2.37", "@types/cross-spawn": "^6.0.6", "@types/jest": "^29.5.14", "@types/jscodeshift": "^0.12.0", - "@types/node": "^22.8.1", + "@types/node": "^22.8.7", "@types/prompts": "^2.4.9", "jest": "^29.7.0", "ts-node": "^10.9.2" diff --git a/packages/codemods/src/transforms/v7/__testfixtures__/calendar/basic.input.tsx b/packages/codemods/src/transforms/v7/__testfixtures__/calendar/basic.input.tsx new file mode 100644 index 0000000000..1780bac8dc --- /dev/null +++ b/packages/codemods/src/transforms/v7/__testfixtures__/calendar/basic.input.tsx @@ -0,0 +1,25 @@ +import { Calendar } from '@vkontakte/vkui'; +import React from 'react'; + +const App = () => { + const callback = () => {} + return ( + + {}} + enableTime={true} + disablePast={true} + disableFuture={true} + onClose={() => {}} + /> + + {}} + enableTime={true} + disablePast={true} + disableFuture={true} + onClose={callback} + /> + + ); +}; diff --git a/packages/codemods/src/transforms/v7/__testfixtures__/cell-button/basic.input.tsx b/packages/codemods/src/transforms/v7/__testfixtures__/cell-button/basic.input.tsx index 8dbee448ab..a0d09b8b85 100644 --- a/packages/codemods/src/transforms/v7/__testfixtures__/cell-button/basic.input.tsx +++ b/packages/codemods/src/transforms/v7/__testfixtures__/cell-button/basic.input.tsx @@ -33,6 +33,11 @@ const App = () => { Создать что-нибудь + + {/* rename subhead -> overtitle */} + + Создать что-нибудь + ); }; diff --git a/packages/codemods/src/transforms/v7/__testfixtures__/cell/basic.input.tsx b/packages/codemods/src/transforms/v7/__testfixtures__/cell/basic.input.tsx index 64276f4223..5f3a2c1b7c 100644 --- a/packages/codemods/src/transforms/v7/__testfixtures__/cell/basic.input.tsx +++ b/packages/codemods/src/transforms/v7/__testfixtures__/cell/basic.input.tsx @@ -19,6 +19,15 @@ const App = () => { > Геолокация + + {/* rename subhead -> overtitle */} + {}} + indicator="При использовании" + > + Геолокация + ); }; diff --git a/packages/codemods/src/transforms/v7/__testfixtures__/header/basic.input.tsx b/packages/codemods/src/transforms/v7/__testfixtures__/header/basic.input.tsx index 89de681f87..948a31090f 100644 --- a/packages/codemods/src/transforms/v7/__testfixtures__/header/basic.input.tsx +++ b/packages/codemods/src/transforms/v7/__testfixtures__/header/basic.input.tsx @@ -12,16 +12,15 @@ const App = () => { return ( {/* Проверка изменения size */} -
+
Кто может писать мне личные сообщения
-
+
Кто может писать мне личные сообщения
{/* Проверка замены aside на after */}
{ } />
+ + {/* Проверка удаления mode */} + {/* замена Large Primary на xl */} +
+ + {/* замена Large tertiary на m */} +
+ {/* замена Regular tertiary на m */} +
+ {/* замена Regular primary на m */} +
+ {/* замена Large secondary на m */} +
+ {/* замена Regular secondary на s */} +
); }; diff --git a/packages/codemods/src/transforms/v7/__testfixtures__/simple-cell/basic.input.tsx b/packages/codemods/src/transforms/v7/__testfixtures__/simple-cell/basic.input.tsx index 7eb68fe467..c98a6cc8ba 100644 --- a/packages/codemods/src/transforms/v7/__testfixtures__/simple-cell/basic.input.tsx +++ b/packages/codemods/src/transforms/v7/__testfixtures__/simple-cell/basic.input.tsx @@ -19,6 +19,16 @@ const App = () => { > Геолокация + + + {/* rename subhead -> overtitle */} + {}} + subhead={"Subhead"} + indicator="При использовании" + > + Геолокация + ); }; diff --git a/packages/codemods/src/transforms/v7/__tests__/__snapshots__/calendar.ts.snap b/packages/codemods/src/transforms/v7/__tests__/__snapshots__/calendar.ts.snap new file mode 100644 index 0000000000..5f8dd9c8be --- /dev/null +++ b/packages/codemods/src/transforms/v7/__tests__/__snapshots__/calendar.ts.snap @@ -0,0 +1,28 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`calendar transforms correctly 1`] = ` +"import { Calendar } from '@vkontakte/vkui'; +import React from 'react'; + +const App = () => { + const callback = () => {} + return ( + ( + {}} + enableTime={true} + disablePast={true} + disableFuture={true} + onDoneButtonClick={() => {}} + /> + {}} + enableTime={true} + disablePast={true} + disableFuture={true} + onDoneButtonClick={callback} + /> + ) + ); +};" +`; diff --git a/packages/codemods/src/transforms/v7/__tests__/__snapshots__/cell-button.ts.snap b/packages/codemods/src/transforms/v7/__tests__/__snapshots__/cell-button.ts.snap index aae725ef24..0ba2f0ef80 100644 --- a/packages/codemods/src/transforms/v7/__tests__/__snapshots__/cell-button.ts.snap +++ b/packages/codemods/src/transforms/v7/__tests__/__snapshots__/cell-button.ts.snap @@ -31,6 +31,10 @@ const App = () => { Создать что-нибудь + {/* rename subhead -> overtitle */} + + Создать что-нибудь + ) ); };" diff --git a/packages/codemods/src/transforms/v7/__tests__/__snapshots__/cell.ts.snap b/packages/codemods/src/transforms/v7/__tests__/__snapshots__/cell.ts.snap index 7753d6e8c6..46c0a1f072 100644 --- a/packages/codemods/src/transforms/v7/__tests__/__snapshots__/cell.ts.snap +++ b/packages/codemods/src/transforms/v7/__tests__/__snapshots__/cell.ts.snap @@ -21,6 +21,14 @@ const App = () => { > Геолокация + {/* rename subhead -> overtitle */} + {}} + indicator="При использовании" + > + Геолокация + ) ); };" diff --git a/packages/codemods/src/transforms/v7/__tests__/__snapshots__/header.ts.snap b/packages/codemods/src/transforms/v7/__tests__/__snapshots__/header.ts.snap index 77b774efcd..1c41cfd5ff 100644 --- a/packages/codemods/src/transforms/v7/__tests__/__snapshots__/header.ts.snap +++ b/packages/codemods/src/transforms/v7/__tests__/__snapshots__/header.ts.snap @@ -15,15 +15,14 @@ const App = () => { return ( ( {/* Проверка изменения size */} -
+
Кто может писать мне личные сообщения
-
+
Кто может писать мне личные сообщения
{/* Проверка замены aside на after */}
{ } />
+ {/* Проверка удаления mode */} + {/* замена Large Primary на xl */} +
+ {/* замена Large tertiary на m */} +
+ {/* замена Regular tertiary на m */} +
+ {/* замена Regular primary на m */} +
+ {/* замена Large secondary на m */} +
+ {/* замена Regular secondary на s */} +
) ); };" diff --git a/packages/codemods/src/transforms/v7/__tests__/__snapshots__/simple-cell.ts.snap b/packages/codemods/src/transforms/v7/__tests__/__snapshots__/simple-cell.ts.snap index 451a6a1d0a..d1253bd820 100644 --- a/packages/codemods/src/transforms/v7/__tests__/__snapshots__/simple-cell.ts.snap +++ b/packages/codemods/src/transforms/v7/__tests__/__snapshots__/simple-cell.ts.snap @@ -21,6 +21,14 @@ const App = () => { > Геолокация + {/* rename subhead -> overtitle */} + {}} + overTitle={"Subhead"} + indicator="При использовании" + > + Геолокация + ) ); };" diff --git a/packages/codemods/src/transforms/v7/__tests__/calendar.ts b/packages/codemods/src/transforms/v7/__tests__/calendar.ts new file mode 100644 index 0000000000..ab4bc43e2b --- /dev/null +++ b/packages/codemods/src/transforms/v7/__tests__/calendar.ts @@ -0,0 +1,12 @@ +jest.autoMockOff(); + +import { defineSnapshotTestFromFixture } from '../../../testHelpers/testHelper'; + +const name = 'calendar'; +const fixtures = ['basic'] as const; + +describe(name, () => { + fixtures.forEach((test) => + defineSnapshotTestFromFixture(__dirname, name, global.TRANSFORM_OPTIONS, `${name}/${test}`), + ); +}); diff --git a/packages/codemods/src/transforms/v7/calendar.ts b/packages/codemods/src/transforms/v7/calendar.ts new file mode 100644 index 0000000000..8f9a0677d7 --- /dev/null +++ b/packages/codemods/src/transforms/v7/calendar.ts @@ -0,0 +1,20 @@ +import { API, FileInfo } from 'jscodeshift'; +import { getImportInfo, renameProp } from '../../codemod-helpers'; +import { JSCodeShiftOptions } from '../../types'; + +export const parser = 'tsx'; + +export default function transformer(file: FileInfo, api: API, options: JSCodeShiftOptions) { + const { alias } = options; + const j = api.jscodeshift; + const source = j(file.source); + const { localName } = getImportInfo(j, file, 'Calendar', alias); + + if (!localName) { + return source.toSource(); + } + + renameProp(j, source, localName, { onClose: 'onDoneButtonClick' }); + + return source.toSource(); +} diff --git a/packages/codemods/src/transforms/v7/cell-button.ts b/packages/codemods/src/transforms/v7/cell-button.ts index e760c36ad2..e0eb60299d 100644 --- a/packages/codemods/src/transforms/v7/cell-button.ts +++ b/packages/codemods/src/transforms/v7/cell-button.ts @@ -1,5 +1,5 @@ import { API, FileInfo, JSXAttribute } from 'jscodeshift'; -import { getImportInfo } from '../../codemod-helpers'; +import { getImportInfo, renameProp } from '../../codemod-helpers'; import { report } from '../../report'; import { JSCodeShiftOptions } from '../../types'; @@ -14,6 +14,8 @@ export default function transformer(file: FileInfo, api: API, options: JSCodeShi return source.toSource(); } + renameProp(j, source, localName, { subhead: 'overTitle' }); + const attributeToReplace = 'mode'; const newAttributeName = 'appearance'; diff --git a/packages/codemods/src/transforms/v7/cell.ts b/packages/codemods/src/transforms/v7/cell.ts index 979d496f14..0816bfa3ef 100644 --- a/packages/codemods/src/transforms/v7/cell.ts +++ b/packages/codemods/src/transforms/v7/cell.ts @@ -12,6 +12,7 @@ export default function transformer(file: FileInfo, api: API, options: JSCodeShi if (localName) { renameProp(j, source, localName, { + subhead: 'overTitle', expandable: 'chevron', }); } diff --git a/packages/codemods/src/transforms/v7/common/warnSelectOnChange.ts b/packages/codemods/src/transforms/v7/common/warnSelectOnChange.ts new file mode 100644 index 0000000000..3840180ddc --- /dev/null +++ b/packages/codemods/src/transforms/v7/common/warnSelectOnChange.ts @@ -0,0 +1,16 @@ +import { API, Collection } from 'jscodeshift'; +import { report } from '../../../report'; + +export const warnSelectOnChange = (api: API, source: Collection, componentName: string) => { + const j = api.jscodeshift; + source + .find(j.JSXOpeningElement, { name: { name: componentName } }) + .find(j.JSXAttribute) + .filter((attr) => attr.node.name.name === 'onChange') + .forEach(() => { + report( + api, + `Manual changes required for ${componentName}'s "onChange" prop: need to change event argument to select value`, + ); + }); +}; diff --git a/packages/codemods/src/transforms/v7/custom-select.ts b/packages/codemods/src/transforms/v7/custom-select.ts index 6a34a10823..da8beb446d 100644 --- a/packages/codemods/src/transforms/v7/custom-select.ts +++ b/packages/codemods/src/transforms/v7/custom-select.ts @@ -1,6 +1,7 @@ import { API, FileInfo } from 'jscodeshift'; import { getImportInfo, removeProps } from '../../codemod-helpers'; import { JSCodeShiftOptions } from '../../types'; +import { warnSelectOnChange } from './common/warnSelectOnChange'; export const parser = 'tsx'; @@ -19,6 +20,7 @@ export default function transformer(file: FileInfo, api: API, options: JSCodeShi removeProps(j, api, source, localName, PROPS_TO_REMOVE, () => { return `need to remove props ${PROPS_TO_REMOVE.join(', ')}`; }); + warnSelectOnChange(api, source, localName); return source.toSource(); } diff --git a/packages/codemods/src/transforms/v7/header.ts b/packages/codemods/src/transforms/v7/header.ts index bb89e39ad0..766c8d4d46 100644 --- a/packages/codemods/src/transforms/v7/header.ts +++ b/packages/codemods/src/transforms/v7/header.ts @@ -1,10 +1,92 @@ -import { API, FileInfo } from 'jscodeshift'; +import { + API, + Collection, + FileInfo, + JSCodeshift, + JSXAttribute, + JSXSpreadAttribute, +} from 'jscodeshift'; +import { report } from '../../report'; import { remapSizePropValue } from './common/remapSizePropValue'; -import { getImportInfo, renameProp } from '../../codemod-helpers'; +import { getImportInfo, removeAttribute, renameProp } from '../../codemod-helpers'; import { JSCodeShiftOptions } from '../../types'; export const parser = 'tsx'; +function removePropMode(j: JSCodeshift, api: API, source: Collection, localName: string) { + const getValueFromAttribute = (attr: JSXAttribute): string | null => { + if (attr.value?.type === 'StringLiteral') { + return attr.value.value; + } + if (attr.value?.type === 'JSXExpressionContainer') { + const expression = attr.value.expression; + if (expression.type === 'StringLiteral') { + return expression.value; + } + } + return null; + }; + + const changeAttributeValue = ( + attributes: Array | undefined, + attribute: JSXAttribute | undefined, + attrName: string, + newValue: string, + ) => { + if (attribute) { + attribute.value = j.stringLiteral(newValue); + } else { + attributes?.push(j.jsxAttribute(j.jsxIdentifier(attrName), j.stringLiteral(newValue))); + } + }; + + source + .find(j.JSXOpeningElement, { + name: { + name: localName, + }, + }) + .forEach((path) => { + const attributes = path.node.attributes; + const modeAttr = + (attributes?.find( + (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'mode', + ) as JSXAttribute) || undefined; + const sizeAttr = + (attributes?.find( + (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'size', + ) as JSXAttribute) || undefined; + const hasSpread = !!attributes?.some((attr) => attr.type === 'JSXSpreadAttribute'); + if (!modeAttr) { + if (hasSpread) { + report( + api, + `: ${localName} has been changed. Manual changes required: remove mode attribute and replace it by size prop`, + ); + } + return; + } + removeAttribute(attributes, modeAttr); + const modeValue = getValueFromAttribute(modeAttr); + if (!modeValue) { + report( + api, + `: ${localName} has been changed. Manual changes required: remove mode attribute and replace it by size prop`, + ); + return; + } + const sizeValue = getValueFromAttribute(sizeAttr); + + if (modeValue === 'primary' && sizeValue === 'l') { + changeAttributeValue(attributes, sizeAttr, 'size', 'xl'); + } else if (modeValue === 'tertiary' || (modeValue === 'primary' && sizeValue === 'm')) { + changeAttributeValue(attributes, sizeAttr, 'size', 'm'); + } else if (modeValue === 'secondary') { + changeAttributeValue(attributes, sizeAttr, 'size', 's'); + } + }); +} + export default function transformer(file: FileInfo, api: API, options: JSCodeShiftOptions) { const { alias } = options; const j = api.jscodeshift; @@ -27,5 +109,7 @@ export default function transformer(file: FileInfo, api: API, options: JSCodeShi renameProp(j, source, localName, { aside: 'after' }); + removePropMode(j, api, source, localName); + return source.toSource(); } diff --git a/packages/codemods/src/transforms/v7/native-select.ts b/packages/codemods/src/transforms/v7/native-select.ts new file mode 100644 index 0000000000..56ff172599 --- /dev/null +++ b/packages/codemods/src/transforms/v7/native-select.ts @@ -0,0 +1,21 @@ +import { API, FileInfo } from 'jscodeshift'; +import { getImportInfo } from '../../codemod-helpers'; +import { JSCodeShiftOptions } from '../../types'; +import { warnSelectOnChange } from './common/warnSelectOnChange'; + +export const parser = 'tsx'; + +export default function transformer(file: FileInfo, api: API, options: JSCodeShiftOptions) { + const { alias } = options; + const j = api.jscodeshift; + const source = j(file.source); + const { localName } = getImportInfo(j, file, 'NativeSelect', alias); + + if (!localName) { + return source.toSource(); + } + + warnSelectOnChange(api, source, localName); + + return source.toSource(); +} diff --git a/packages/codemods/src/transforms/v7/select.ts b/packages/codemods/src/transforms/v7/select.ts index de1d59af25..1fcb3bef5f 100644 --- a/packages/codemods/src/transforms/v7/select.ts +++ b/packages/codemods/src/transforms/v7/select.ts @@ -1,6 +1,7 @@ import { API, FileInfo } from 'jscodeshift'; import { getImportInfo, removeProps } from '../../codemod-helpers'; import { JSCodeShiftOptions } from '../../types'; +import { warnSelectOnChange } from './common/warnSelectOnChange'; export const parser = 'tsx'; @@ -19,6 +20,7 @@ export default function transformer(file: FileInfo, api: API, options: JSCodeShi removeProps(j, api, source, localName, PROPS_TO_REMOVE, () => { return `need to remove props ${PROPS_TO_REMOVE.join(', ')}`; }); + warnSelectOnChange(api, source, localName); return source.toSource(); } diff --git a/packages/codemods/src/transforms/v7/simple-cell.ts b/packages/codemods/src/transforms/v7/simple-cell.ts index 1c356a97ec..809a00679b 100644 --- a/packages/codemods/src/transforms/v7/simple-cell.ts +++ b/packages/codemods/src/transforms/v7/simple-cell.ts @@ -13,6 +13,7 @@ export default function transformer(file: FileInfo, api: API, options: JSCodeShi if (localName) { renameProp(j, source, localName, { expandable: 'chevron', + subhead: 'overTitle', }); } diff --git a/packages/token-translator/package.json b/packages/token-translator/package.json index 53b85b9179..8d91d6d4a3 100644 --- a/packages/token-translator/package.json +++ b/packages/token-translator/package.json @@ -14,7 +14,7 @@ "node": ">12.0.0" }, "dependencies": { - "@types/node": "^22.8.1", + "@types/node": "^22.8.7", "postcss": "^8.4.47", "postcss-less": "^6.0.0", "postcss-scss": "^4.0.9", @@ -22,8 +22,8 @@ "typescript": "^5.6.3" }, "devDependencies": { - "@swc/core": "1.7.40", - "@swc/jest": "^0.2.36", + "@swc/core": "1.8.0", + "@swc/jest": "^0.2.37", "@types/jest": "^29.5.14", "@types/postcss-less": "^4.0.6", "jest": "^29.7.0", diff --git a/packages/vkui-floating-ui/package.json b/packages/vkui-floating-ui/package.json index 0c7e93e803..df30fc69b8 100644 --- a/packages/vkui-floating-ui/package.json +++ b/packages/vkui-floating-ui/package.json @@ -83,8 +83,8 @@ "@swc/helpers": "^0.5.13" }, "devDependencies": { - "@swc/core": "^1.7.40", - "@swc/jest": "^0.2.36", + "@swc/core": "^1.8.0", + "@swc/jest": "^0.2.37", "@types/jest": "^29.5.14", "jest": "^29.7.0", "react": "^18.3.1", diff --git a/packages/vkui/package.json b/packages/vkui/package.json index 739ff70f3b..e5bebc3f64 100644 --- a/packages/vkui/package.json +++ b/packages/vkui/package.json @@ -83,12 +83,12 @@ "date-fns": "^4.1.0" }, "devDependencies": { - "@storybook/react": "8.3.6", - "@storybook/react-webpack5": "8.3.6", + "@storybook/react": "8.4.2", + "@storybook/react-webpack5": "8.4.2", "@types/node": "*", "react": "^18.3.1", "react-dom": "^18.3.1", - "storybook": "8.3.6", + "storybook": "8.4.2", "ts-node": "*" }, "size-limit": [ diff --git a/packages/vkui/package.swcrc b/packages/vkui/package.swcrc index 3a34698ab2..1bbf58ad2d 100644 --- a/packages/vkui/package.swcrc +++ b/packages/vkui/package.swcrc @@ -29,7 +29,7 @@ [ "swc-plugin-css-modules", { - "generate_scoped_name": "vkui[folder]__[local]" + "generate_scoped_name": "[folder]__[local]--[hash:base64:5]" } ], [ diff --git a/packages/vkui/rspack.styles.config.ts b/packages/vkui/rspack.styles.config.ts index d4d01aff6d..f44aba2b71 100644 --- a/packages/vkui/rspack.styles.config.ts +++ b/packages/vkui/rspack.styles.config.ts @@ -55,7 +55,7 @@ const config: Configuration = { [ 'swc-plugin-css-modules', { - generate_scoped_name: 'vkui[folder]_[local]', + generate_scoped_name: '[folder]__[local]--[hash:base64:5]', }, ], ], diff --git a/packages/vkui/src/components/AppRoot/ScrollContext.test.tsx b/packages/vkui/src/components/AppRoot/ScrollContext.test.tsx new file mode 100644 index 0000000000..2d8bef5309 --- /dev/null +++ b/packages/vkui/src/components/AppRoot/ScrollContext.test.tsx @@ -0,0 +1,284 @@ +import { createRef, type RefObject, useContext, useEffect } from 'react'; +import { render, renderHook } from '@testing-library/react'; +import { noop } from '@vkontakte/vkjs'; +import { setRef } from '../../lib/utils'; +import { + ElementScrollController, + GlobalScrollController, + ScrollContext, + type ScrollContextInterface, + useScrollLock, +} from './ScrollContext'; + +type ChildWithContextProps = { + contextRef?: RefObject; + beforeScrollLockFn?: VoidFunction; +}; +const ChildWithContext = ({ contextRef, beforeScrollLockFn }: ChildWithContextProps) => { + const context = useContext(ScrollContext); + useEffect(() => { + if (context.beforeScrollLockFnSetRef?.current && beforeScrollLockFn) { + context.beforeScrollLockFnSetRef?.current.add(beforeScrollLockFn); + } + setRef(context, contextRef); + }, [beforeScrollLockFn, context, contextRef]); + return
; +}; + +describe(useScrollLock, () => { + describe('ScrollContext', () => { + test('default', () => { + const h = renderHook(() => useContext(ScrollContext)); + expect(h.result.current.getScroll()).toEqual({ x: 0, y: 0 }); + }); + }); + + describe(GlobalScrollController, () => { + test.each([true, false])('default behavior (width scroll: %s)', (withScroll) => { + const clearWindowMeasuresMock = withScroll ? noop : mockWindowMeasures(-1, -1); + + const beforeScrollLockFn = jest.fn(); + const h = renderHook(useScrollLock, { + wrapper: ({ children }) => ( + ()}> + {children} + + + ), + }); + expect(beforeScrollLockFn).toHaveBeenCalled(); + + expect(getStyleAttributeObject(document.body)).toEqual({ + position: 'fixed', + top: `-${0}px`, + left: `-${0}px`, + right: '0px', + ...(withScroll + ? { + 'overflow-x': 'scroll', + 'overflow-y': 'scroll', + } + : {}), + }); + expect(jestWorkaroundGetOverscrollBehaviorPropertyValue(document.body)).toBe('none'); + expect(jestWorkaroundGetOverscrollBehaviorPropertyValue(document.documentElement)).toBe('none'); // prettier-ignore + + h.rerender(false); + expect(getStyleAttributeObject(document.body)).toEqual({}); + expect(jestWorkaroundGetOverscrollBehaviorPropertyValue(document.body)).toBe(''); + expect(jestWorkaroundGetOverscrollBehaviorPropertyValue(document.documentElement)).toBe(''); + + clearWindowMeasuresMock(); + }); + + test('context api', () => { + const contextRef = createRef(); + render( + ()}> + + , + ); + + const clearWindowMeasuresMock = mockWindowMeasures(50, 50); + const clearElementScrollMock = mockElementScroll(document.body, 100, 100); + const clearMockWindowScrollToMock = mockWindowScrollTo(); + + expect(contextRef.current?.getScroll()).toEqual({ x: 0, y: 50 }); + expect(contextRef.current?.getScroll({ compensateKeyboardHeight: false })).toEqual({ + x: 0, + y: 0, + }); + contextRef.current?.scrollTo(10, 10); + expect(contextRef.current?.getScroll()).toEqual({ x: 10, y: 60 }); + contextRef.current?.scrollTo(); + expect(contextRef.current?.getScroll()).toEqual({ x: 0, y: 50 }); + + clearWindowMeasuresMock(); + clearElementScrollMock(); + clearMockWindowScrollToMock(); + }); + }); + + describe(ElementScrollController, () => { + test.each([true, false])('default behavior (width scroll: %s)', (withScroll) => { + const elRef = createRef(); + setRef(document.createElement('div'), elRef); + + const clearElementMeasuresMock = withScroll + ? mockElementMeasures(elRef.current!, -1, -1) + : mockElementMeasures(elRef.current!, 1, 1); + + const beforeScrollLockFn = jest.fn(); + const h = renderHook(useScrollLock, { + wrapper: ({ children }) => ( + + {children} + + + ), + }); + expect(beforeScrollLockFn).toHaveBeenCalled(); + + expect(getStyleAttributeObject(elRef.current)).toEqual({ + position: 'absolute', + top: `-${0}px`, + left: `-${0}px`, + right: '0px', + ...(withScroll + ? { + 'overflow-x': 'scroll', + 'overflow-y': 'scroll', + } + : {}), + }); + + h.rerender(false); + expect(getStyleAttributeObject(elRef.current)).toEqual({}); + + clearElementMeasuresMock(); + }); + + test('el is null', () => { + const elRef = createRef(); + const h = renderHook(useScrollLock, { + wrapper: ({ children }) => ( + {children} + ), + }); + expect(getStyleAttributeObject(elRef.current)).toBeNull(); + + h.rerender(false); + expect(getStyleAttributeObject(elRef.current)).toBeNull(); + }); + + test('context api', () => { + const contextRef = createRef(); + const elRef = createRef(); + setRef(document.createElement('div'), elRef); + render( + + + , + ); + + const clearElementMeasuresMock = mockElementMeasures(elRef.current!, 50, 50); + const clearElementScrollMock = mockElementScroll(elRef.current!, 100, 100); + const clearElementScrollToMock = mockElementScrollTo(elRef.current!); + + expect(contextRef.current?.getScroll()).toEqual({ x: 0, y: 0 }); + contextRef.current?.scrollTo(10, 10); + expect(contextRef.current?.getScroll()).toEqual({ x: 10, y: 10 }); + contextRef.current?.scrollTo(); + expect(contextRef.current?.getScroll()).toEqual({ x: 0, y: 0 }); + + clearElementMeasuresMock(); + clearElementScrollMock(); + clearElementScrollToMock(); + }); + + test('context api when el is null', () => { + const contextRef = createRef(); + const elRef = createRef(); + render( + + + , + ); + + expect(contextRef.current?.getScroll()).toEqual({ x: 0, y: 0 }); + contextRef.current?.scrollTo(10, 10); + expect(contextRef.current?.getScroll()).toEqual({ x: 0, y: 0 }); + contextRef.current?.scrollTo(); + expect(contextRef.current?.getScroll()).toEqual({ x: 0, y: 0 }); + }); + }); +}); + +/** + * В Jest через `el.getAttribute('style')` не получается получить свойство. + */ +function jestWorkaroundGetOverscrollBehaviorPropertyValue(el: HTMLElement) { + return el.style.overscrollBehavior; +} + +function getStyleAttributeObject(el: HTMLElement | null) { + const style = el ? el.getAttribute('style') : null; + + if (style === null) { + return null; + } + + return Object.fromEntries( + style + .split(';') + .map((style) => + style + .trim() + .split(':') + .map((part) => part && part.trim()), + ) + .filter(([key, value]) => key && value) + .map(([key, value]) => [key, value]), + ); +} + +function mockWindowMeasures(width: number, height: number) { + const originalW = window.innerWidth; + const originalH = window.innerHeight; + Object.defineProperty(window, 'innerWidth', { configurable: true, value: width }); + Object.defineProperty(window, 'innerHeight', { configurable: true, value: height }); + return function clearMock() { + Object.defineProperty(window, 'innerWidth', { configurable: true, value: originalW }); + Object.defineProperty(window, 'innerHeight', { configurable: true, value: originalH }); + }; +} + +function mockWindowScrollTo() { + const original = window.scrollTo; + Object.defineProperty(window, 'scrollTo', { + configurable: true, + value: (x: number, y: number) => { + Object.defineProperty(window, 'pageXOffset', { configurable: true, value: x }); + Object.defineProperty(window, 'pageYOffset', { configurable: true, value: y }); + }, + }); + return function clearMock() { + Object.defineProperty(window, 'scrollTo', { configurable: true, value: original }); + }; +} + +function mockElementMeasures(el: HTMLElement, width: number, height: number) { + const originalW = el.clientWidth; + const originalH = el.clientHeight; + Object.defineProperty(el, 'clientWidth', { configurable: true, value: width }); + Object.defineProperty(el, 'clientHeight', { configurable: true, value: height }); + return function clearMock() { + Object.defineProperty(el, 'clientWidth', { configurable: true, value: originalW }); + Object.defineProperty(el, 'clientHeight', { configurable: true, value: originalH }); + }; +} + +function mockElementScroll(el: HTMLElement, width: number, height: number) { + const originalW = el.scrollWidth; + const originalH = el.scrollHeight; + Object.defineProperty(el, 'scrollWidth', { configurable: true, value: width }); + Object.defineProperty(el, 'scrollHeight', { configurable: true, value: height }); + return function clearMock() { + Object.defineProperty(el, 'scrollWidth', { configurable: true, value: originalW }); + Object.defineProperty(el, 'scrollHeight', { configurable: true, value: originalH }); + }; +} + +function mockElementScrollTo(el: HTMLElement) { + const original = el.scrollTo.bind(el); + Object.defineProperty(el, 'scrollTo', { + configurable: true, + value: (x: number, y: number) => { + Object.defineProperty(el, 'scrollLeft', { configurable: true, value: x }); + Object.defineProperty(el, 'scrollTop', { configurable: true, value: y }); + }, + }); + return function clearMock() { + Object.defineProperty(el, 'scrollTo', { configurable: true, value: original }); + }; +} diff --git a/packages/vkui/src/components/AppRoot/ScrollContext.tsx b/packages/vkui/src/components/AppRoot/ScrollContext.tsx index 48e9c10345..93c80091de 100644 --- a/packages/vkui/src/components/AppRoot/ScrollContext.tsx +++ b/packages/vkui/src/components/AppRoot/ScrollContext.tsx @@ -13,6 +13,7 @@ const clearDisableScrollStyle = (node: HTMLElement) => { top: '', left: '', right: '', + overscrollBehavior: '', overflowY: '', overflowX: '', }); @@ -117,11 +118,13 @@ export const GlobalScrollController = ({ children }: ScrollControllerProps): Rea const overflowY = window!.innerWidth > document!.documentElement.clientWidth ? 'scroll' : ''; const overflowX = window!.innerHeight > document!.documentElement.clientHeight ? 'scroll' : ''; + Object.assign(document!.documentElement.style, { overscrollBehavior: 'none' }); Object.assign(document!.body.style, { position: 'fixed', top: `-${scrollY}px`, left: `-${scrollX}px`, right: '0', + overscrollBehavior: 'none', overflowY, overflowX, }); @@ -131,6 +134,7 @@ export const GlobalScrollController = ({ children }: ScrollControllerProps): Rea const scrollY = document!.body.style.top; const scrollX = document!.body.style.left; + Object.assign(document!.documentElement.style, { overscrollBehavior: '' }); clearDisableScrollStyle(document!.body); window!.scrollTo(-parseInt(scrollX || '0'), -parseInt(scrollY || '0')); }, [document, window]); diff --git a/packages/vkui/src/components/Avatar/Readme.md b/packages/vkui/src/components/Avatar/Readme.md index f16b90476f..5185a87150 100644 --- a/packages/vkui/src/components/Avatar/Readme.md +++ b/packages/vkui/src/components/Avatar/Readme.md @@ -10,7 +10,7 @@ ```jsx const Default = () => { return ( - По умолчанию
}> + По умолчанию
}> }>Татьяна Плуталова ); @@ -19,7 +19,7 @@ const Default = () => { const Fallbacks = () => { return ( Фолбеки
} + header={
Фолбеки
} description="На случаи если аватарка не загрузилась или она отсутсвует" > { const [overlay, setOverlay] = React.useState(); return ( - Другие возможности
}> + Другие возможности
}> setGradientColor(e.target.value)} + onChange={setGradientColor} /> @@ -196,7 +196,7 @@ const AvatarPropsForm = ({ { label: 'preset="online-mobile"', value: 'online-mobile' }, ]} value={badge} - onChange={(e) => setBadge(e.target.value)} + onChange={setBadge} /> @@ -208,7 +208,7 @@ const AvatarPropsForm = ({ ]} value={badgeBackground} disabled={badge !== 'children'} - onChange={(e) => setBadgeBackground(e.target.value)} + onChange={setBadgeBackground} /> @@ -231,7 +231,7 @@ const AvatarPropsForm = ({ ]} value={overlayTheme} disabled={!overlay} - onChange={(e) => setOverlayTheme(e.target.value)} + onChange={setOverlayTheme} /> @@ -243,7 +243,7 @@ const AvatarPropsForm = ({ ]} value={overlayVisibility} disabled={!overlay} - onChange={(e) => setOverlayVisibility(e.target.value)} + onChange={setOverlayVisibility} /> diff --git a/packages/vkui/src/components/Badge/Readme.md b/packages/vkui/src/components/Badge/Readme.md index 5bea7e877c..fbfaed3eb4 100644 --- a/packages/vkui/src/components/Badge/Readme.md +++ b/packages/vkui/src/components/Badge/Readme.md @@ -13,7 +13,7 @@ const Example = () => { Бейдж - В пунктах меню
}> + В пунктах меню
}> } @@ -24,7 +24,7 @@ const Example = () => { - В переключателях
}> + В переключателях
}> { setSize(e.target.value)} + onChange={setSize} options={[ { label: 's', value: 's' }, { label: 'm', value: 'm' }, @@ -96,7 +96,7 @@ const Example = () => { setSizeY(e.target.value)} + onChange={setSizeY} options={[ { label: 'compact', value: 'compact' }, { diff --git a/packages/vkui/src/components/ButtonGroup/Readme.md b/packages/vkui/src/components/ButtonGroup/Readme.md index 04ef8cd919..619937b0d2 100644 --- a/packages/vkui/src/components/ButtonGroup/Readme.md +++ b/packages/vkui/src/components/ButtonGroup/Readme.md @@ -32,7 +32,7 @@ const ButtonGroupPropsForm = ({ handleChange('gap', e.target.value)} + onChange={(newValue) => handleChange('gap', newValue)} options={[ { label: 'none', value: 'none' }, { label: 'space', value: 'space' }, @@ -55,7 +55,7 @@ const ButtonGroupPropsForm = ({ setSizeY(e.target.value)} + onChange={setSizeY} options={[ { label: 'compact', value: 'compact' }, { label: 'regular', value: 'regular' }, diff --git a/packages/vkui/src/components/Calendar/Calendar.tsx b/packages/vkui/src/components/Calendar/Calendar.tsx index f6c1858f28..b7dc16aac6 100644 --- a/packages/vkui/src/components/Calendar/Calendar.tsx +++ b/packages/vkui/src/components/Calendar/Calendar.tsx @@ -60,7 +60,7 @@ export interface CalendarProps * Позволяет запретить выбор даты. */ shouldDisableDate?: (value: Date) => boolean; - onClose?: () => void; + onDoneButtonClick?: () => void; /** * Дата отображаемого месяца. * При использовании обновление даты должно происходить вне компонента. @@ -93,7 +93,7 @@ export const Calendar = ({ disablePast, disableFuture, shouldDisableDate, - onClose, + onDoneButtonClick, enableTime = false, doneButtonText, doneButtonDisabled, @@ -239,7 +239,7 @@ export const Calendar = ({ { setSize(e.target.value)} + onChange={setSize} options={[ { label: 's', diff --git a/packages/vkui/src/components/CalendarHeader/CalendarHeader.tsx b/packages/vkui/src/components/CalendarHeader/CalendarHeader.tsx index 5d26a0dc45..29d0e67426 100644 --- a/packages/vkui/src/components/CalendarHeader/CalendarHeader.tsx +++ b/packages/vkui/src/components/CalendarHeader/CalendarHeader.tsx @@ -12,7 +12,7 @@ import { DEFAULT_MAX_YEAR, DEFAULT_MIN_YEAR, getMonths, getYears } from '../../l import type { HTMLAttributesWithRootRef } from '../../types'; import { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider'; import { useConfigProvider } from '../ConfigProvider/ConfigProviderContext'; -import { CustomSelect } from '../CustomSelect/CustomSelect'; +import { CustomSelect, type SelectProps } from '../CustomSelect/CustomSelect'; import { RootComponent } from '../RootComponent/RootComponent'; import { Tappable } from '../Tappable/Tappable'; import { Paragraph } from '../Typography/Paragraph/Paragraph'; @@ -80,13 +80,11 @@ export const CalendarHeader = ({ }: CalendarHeaderProps): React.ReactNode => { const { locale } = useConfigProvider(); const onMonthsChange = React.useCallback( - (event: React.ChangeEvent) => - onChange(setMonth(viewDate, Number(event.target.value))), + (newValue: SelectProps['value']) => onChange(setMonth(viewDate, Number(newValue))), [onChange, viewDate], ); const onYearChange = React.useCallback( - (event: React.ChangeEvent) => - onChange(setYear(viewDate, Number(event.target.value))), + (newValue: SelectProps['value']) => onChange(setYear(viewDate, Number(newValue))), [onChange, viewDate], ); diff --git a/packages/vkui/src/components/CalendarRange/Readme.md b/packages/vkui/src/components/CalendarRange/Readme.md index b4c96ce412..4faf95dad3 100644 --- a/packages/vkui/src/components/CalendarRange/Readme.md +++ b/packages/vkui/src/components/CalendarRange/Readme.md @@ -37,7 +37,7 @@ const Example = () => { setLocale(e.target.value)} + onChange={setLocale} options={[ { label: 'ru', diff --git a/packages/vkui/src/components/DateRangeInput/DateRangeInput.test.tsx b/packages/vkui/src/components/DateRangeInput/DateRangeInput.test.tsx index 7be660b022..1764ad7417 100644 --- a/packages/vkui/src/components/DateRangeInput/DateRangeInput.test.tsx +++ b/packages/vkui/src/components/DateRangeInput/DateRangeInput.test.tsx @@ -130,4 +130,27 @@ describe('DateRangeInput', () => { expect(onChange).toBeCalledTimes(0); }); + + it('should call onCalendarClose callback when calendar was closed', async () => { + jest.useFakeTimers(); + const onCalendarOpenChanged = jest.fn(); + const { container } = render( + , + ); + const inputLikes = getInputsLike(container); + const [dates] = inputLikes; + + await userEvent.click(dates); + + expect(onCalendarOpenChanged).toHaveBeenCalledTimes(1); + expect(onCalendarOpenChanged.mock.calls[0][0]).toBeTruthy(); + + expect(container.contains(document.activeElement)).toBeTruthy(); + await userEvent.click(screen.getAllByText('15')[0]); + + expect(onCalendarOpenChanged).toHaveBeenCalledTimes(2); + expect(onCalendarOpenChanged.mock.calls[1][0]).toBeFalsy(); + + expect(container.contains(document.activeElement)).toBeFalsy(); + }); }); diff --git a/packages/vkui/src/components/DateRangeInput/DateRangeInput.tsx b/packages/vkui/src/components/DateRangeInput/DateRangeInput.tsx index 6088a5df30..87d4afff7c 100644 --- a/packages/vkui/src/components/DateRangeInput/DateRangeInput.tsx +++ b/packages/vkui/src/components/DateRangeInput/DateRangeInput.tsx @@ -55,6 +55,7 @@ export interface DateRangeInputProps Omit { calendarPlacement?: PlacementWithAuto; closeOnChange?: boolean; + onCalendarOpenChanged?: (opened: boolean) => void; clearFieldLabel?: string; showCalendarLabel?: string; changeStartDayLabel?: string; @@ -142,6 +143,7 @@ export const DateRangeInput = ({ prevMonthIcon, nextMonthIcon, disableCalendar = false, + onCalendarOpenChanged, renderDayContent, ...props }: DateRangeInputProps): React.ReactNode => { @@ -223,6 +225,7 @@ export const DateRangeInput = ({ onInternalValueChange, getInternalValue, value, + onCalendarOpenChanged, }); const { sizeY = 'none' } = useAdaptivity(); diff --git a/packages/vkui/src/components/DateRangeInput/Readme.md b/packages/vkui/src/components/DateRangeInput/Readme.md index 6d21ab56af..fc7d9438f1 100644 --- a/packages/vkui/src/components/DateRangeInput/Readme.md +++ b/packages/vkui/src/components/DateRangeInput/Readme.md @@ -48,7 +48,7 @@ const Example = () => { setGap(e.target.value)} - options={GapSelectValues} - /> + setRowGap(e.target.value)} - options={GapSelectValues} - /> + setColumnGap(e.target.value)} - options={GapSelectValues} - /> + setAlign(e.target.value)} + onChange={setAlign} placeholder="Не выбрано" options={[ { label: 'start', value: 'start' }, @@ -185,7 +173,7 @@ const Example = () => { onSelectChange('purpose', newValue)} value={purpose} name="purpose" required diff --git a/packages/vkui/src/components/Gallery/Readme.md b/packages/vkui/src/components/Gallery/Readme.md index fed052ba50..1eea3c46d5 100644 --- a/packages/vkui/src/components/Gallery/Readme.md +++ b/packages/vkui/src/components/Gallery/Readme.md @@ -14,14 +14,14 @@ const Example = () => { Gallery - Sticks right
}> + Sticks right
}>
- Sticks left
}> + Sticks left
}>
{
- Centered
}> + Centered
}>
- Custom width
}> + Custom width
}>
{ /> - Arrows
}> + Arrows
}>
- Controlled
}> + Controlled}> { - With looped prop}> + With looped prop}> 1 2 diff --git a/packages/vkui/src/components/Gradient/Readme.md b/packages/vkui/src/components/Gradient/Readme.md index 3660f706ce..ef6627d985 100644 --- a/packages/vkui/src/components/Gradient/Readme.md +++ b/packages/vkui/src/components/Gradient/Readme.md @@ -34,7 +34,7 @@ const Example = () => { - Направление to="bottom"}> + Направление to="bottom"}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a sollicitudin lectus, a diff --git a/packages/vkui/src/components/Group/Readme.md b/packages/vkui/src/components/Group/Readme.md index 9801ff9043..2b6e216f10 100644 --- a/packages/vkui/src/components/Group/Readme.md +++ b/packages/vkui/src/components/Group/Readme.md @@ -45,7 +45,7 @@ const Example = () => { - Модальное окно с Group}> + Модальное окно с Group}> setModalOpened(true)}> Открыть Group в модальном окне @@ -180,8 +180,8 @@ const SharedContent = () => { ```jsx const recentFriends = getRandomUsers(20); -Недавние}> -
HorizontalScroll не учитывает отступы Group по горизонтали
+Недавние}> +
HorizontalScroll не учитывает отступы Group по горизонтали
@@ -195,7 +195,7 @@ const recentFriends = getRandomUsers(20); -
Здесь контент учитывает отступы Group по горизонтали
+
Здесь контент учитывает отступы Group по горизонтали
{recentFriends.map((item) => { return ( diff --git a/packages/vkui/src/components/Group/__image_snapshots__/group-android-chromium-dark-1-snap.png b/packages/vkui/src/components/Group/__image_snapshots__/group-android-chromium-dark-1-snap.png index d096f1d53e..cdf6ad616c 100644 --- a/packages/vkui/src/components/Group/__image_snapshots__/group-android-chromium-dark-1-snap.png +++ b/packages/vkui/src/components/Group/__image_snapshots__/group-android-chromium-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:e2db93987d879f3bbcf7b149d7cdf9507e61664535690e61516d715527baa2e2 -size 28403 +oid sha256:50e9eb28351401b44a1668037bc881232e3da0b1157954d5613234e870c8000f +size 25314 diff --git a/packages/vkui/src/components/Group/__image_snapshots__/group-android-chromium-light-1-snap.png b/packages/vkui/src/components/Group/__image_snapshots__/group-android-chromium-light-1-snap.png index 713655218d..9815abe6e8 100644 --- a/packages/vkui/src/components/Group/__image_snapshots__/group-android-chromium-light-1-snap.png +++ b/packages/vkui/src/components/Group/__image_snapshots__/group-android-chromium-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:6c692d7b01d9ea885183f3115679bae502dd4a7aa45ed2b11337463a9b44e641 -size 27344 +oid sha256:09fa0173d067a920900e7e226c91dc44b8e69f003ab8641f605b799daf673cae +size 24498 diff --git a/packages/vkui/src/components/Group/__image_snapshots__/group-ios-webkit-dark-1-snap.png b/packages/vkui/src/components/Group/__image_snapshots__/group-ios-webkit-dark-1-snap.png index e925abe6cf..ee065be38f 100644 --- a/packages/vkui/src/components/Group/__image_snapshots__/group-ios-webkit-dark-1-snap.png +++ b/packages/vkui/src/components/Group/__image_snapshots__/group-ios-webkit-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:9f921ddad42a5af023a2880963f865f9d528525edf8f62c0b97247d8d7524df1 -size 25659 +oid sha256:3f1df819ce627d618639e04e26ab5faa191211150da987fc20768bda07c6bb97 +size 25532 diff --git a/packages/vkui/src/components/Group/__image_snapshots__/group-ios-webkit-light-1-snap.png b/packages/vkui/src/components/Group/__image_snapshots__/group-ios-webkit-light-1-snap.png index 17d1b025ad..a5ed2c72af 100644 --- a/packages/vkui/src/components/Group/__image_snapshots__/group-ios-webkit-light-1-snap.png +++ b/packages/vkui/src/components/Group/__image_snapshots__/group-ios-webkit-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:16ad3382c97e62c16a9cff31d34c7c6d72235c489699f3b05da965683e65f1fb -size 24898 +oid sha256:7fbced186bbb88f0b7979f8d79bf648c09df6e5a3288b0f79a24fc67a00dd8c4 +size 24669 diff --git a/packages/vkui/src/components/Group/__image_snapshots__/group-vkcom-chromium-dark-1-snap.png b/packages/vkui/src/components/Group/__image_snapshots__/group-vkcom-chromium-dark-1-snap.png index 0eb99a7d27..2f36094a17 100644 --- a/packages/vkui/src/components/Group/__image_snapshots__/group-vkcom-chromium-dark-1-snap.png +++ b/packages/vkui/src/components/Group/__image_snapshots__/group-vkcom-chromium-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:0623e79f9713e2d4d197e95590294a32679c09ebed3412e9c36d8fa19e148e2b -size 26110 +oid sha256:44b9f00953f4e7cc9b147be307037db4169121681aaf76703c8e40ec9d22f291 +size 26044 diff --git a/packages/vkui/src/components/Group/__image_snapshots__/group-vkcom-chromium-light-1-snap.png b/packages/vkui/src/components/Group/__image_snapshots__/group-vkcom-chromium-light-1-snap.png index 1d8bc637bb..8da653b89f 100644 --- a/packages/vkui/src/components/Group/__image_snapshots__/group-vkcom-chromium-light-1-snap.png +++ b/packages/vkui/src/components/Group/__image_snapshots__/group-vkcom-chromium-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:ddc3cb314350f7803fb173c7e769226ad844f91a20bc3164362d36172eb4cfd2 -size 28982 +oid sha256:96c94dc351325253c9b6e23fc1d564e6127a274489fc23fd8712776336f844c1 +size 26104 diff --git a/packages/vkui/src/components/Group/__image_snapshots__/group-vkcom-firefox-dark-1-snap.png b/packages/vkui/src/components/Group/__image_snapshots__/group-vkcom-firefox-dark-1-snap.png index 39d1d2bffd..f995f4da82 100644 --- a/packages/vkui/src/components/Group/__image_snapshots__/group-vkcom-firefox-dark-1-snap.png +++ b/packages/vkui/src/components/Group/__image_snapshots__/group-vkcom-firefox-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:5bf02d447e327fb8eac82e587658b79d2e8f3284f5512b3fe3960e3eb913d6ba -size 38936 +oid sha256:bbb1d0441f526bbb90138d97ac9a4f9aaba1e077736c0de50ed683d15bf9adab +size 38764 diff --git a/packages/vkui/src/components/Group/__image_snapshots__/group-vkcom-firefox-light-1-snap.png b/packages/vkui/src/components/Group/__image_snapshots__/group-vkcom-firefox-light-1-snap.png index 057eca003d..2f362e659b 100644 --- a/packages/vkui/src/components/Group/__image_snapshots__/group-vkcom-firefox-light-1-snap.png +++ b/packages/vkui/src/components/Group/__image_snapshots__/group-vkcom-firefox-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:becd0aaa1166864da38fb9a304bf607b9b8b9d5b794f3d0341b7acc1f4606a41 -size 37998 +oid sha256:8209463c03c0f8017375fe678f41d93553ae74b10ab298da8e8e494221eb95c5 +size 38053 diff --git a/packages/vkui/src/components/Group/__image_snapshots__/group-vkcom-webkit-dark-1-snap.png b/packages/vkui/src/components/Group/__image_snapshots__/group-vkcom-webkit-dark-1-snap.png index 85318f928e..df548990e1 100644 --- a/packages/vkui/src/components/Group/__image_snapshots__/group-vkcom-webkit-dark-1-snap.png +++ b/packages/vkui/src/components/Group/__image_snapshots__/group-vkcom-webkit-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:2251ed7ba8243d1496887277468c2081e4868175a0b22b40fe7a398791d573bd -size 26448 +oid sha256:85f8501bb38b40c2a92dbfa3370c460a5aa0e76f51d313636ad290465e7892b0 +size 26381 diff --git a/packages/vkui/src/components/Group/__image_snapshots__/group-vkcom-webkit-light-1-snap.png b/packages/vkui/src/components/Group/__image_snapshots__/group-vkcom-webkit-light-1-snap.png index 4cef137ceb..6386b559cc 100644 --- a/packages/vkui/src/components/Group/__image_snapshots__/group-vkcom-webkit-light-1-snap.png +++ b/packages/vkui/src/components/Group/__image_snapshots__/group-vkcom-webkit-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:9c1080eab4cc26d728473fb4f9e1f2e56dee9de88487db56a58a4a4cd321901a -size 26367 +oid sha256:34d3bf1fefc5f8dc9a65dc5b5234b998481bc194939ba7a05f329493c983b37f +size 26334 diff --git a/packages/vkui/src/components/Header/Header.e2e-playground.tsx b/packages/vkui/src/components/Header/Header.e2e-playground.tsx index 1c390e8d2d..f84f89289c 100644 --- a/packages/vkui/src/components/Header/Header.e2e-playground.tsx +++ b/packages/vkui/src/components/Header/Header.e2e-playground.tsx @@ -16,20 +16,20 @@ export const HeaderPlayground = (props: ComponentPlaygroundProps) => { {...props} propSets={[ { - mode: ['primary', 'secondary', 'tertiary'], + size: ['s', 'm', 'l', 'xl'], children: ['Кто может оставлять записи на моей странице'], multiline: [undefined, true], }, { - mode: ['primary'], + size: ['m'], after: [Показать все], }, { - mode: ['primary', 'secondary'], + size: ['s', 'm', 'l', 'xl'], subtitle: ['SOHN — Conrad'], }, { - mode: ['primary'], + size: ['m'], indicator: [ 12, @@ -38,13 +38,13 @@ export const HeaderPlayground = (props: ComponentPlaygroundProps) => { ], }, { - mode: ['primary'], + size: ['m'], subtitle: ['SOHN — Conrad'], after: [Показать все], indicator: [12], }, { - mode: ['secondary', 'tertiary'], + size: ['m'], indicator: [ 12, @@ -53,40 +53,36 @@ export const HeaderPlayground = (props: ComponentPlaygroundProps) => { ], }, { - mode: ['primary'], - size: ['m', 'l'], - }, - { - mode: ['primary'], + size: ['m'], children: ['Кто может оставлять записи на моей странице'], before: [], }, { - mode: ['primary'], + size: ['m'], children: ['Кто может оставлять записи на моей странице'], beforeTitle: [], }, { - mode: ['primary'], + size: ['m'], children: ['Кто может оставлять записи на моей странице'], afterTitle: [], multiline: [undefined, true], }, { - mode: ['primary'], + size: ['m'], children: ['Кто может оставлять записи на моей странице'], subtitle: ['SOHN — Conrad'], beforeSubtitle: [], }, { - mode: ['primary'], + size: ['m'], children: ['Кто может оставлять записи на моей странице'], subtitle: ['SOHN — Conrad'], afterSubtitle: [], multiline: [undefined, true], }, { - mode: ['primary', 'secondary', 'tertiary'], + size: ['s', 'm', 'l', 'xl'], children: ['Кто может оставлять записи на моей странице'], before: [], beforeTitle: [], diff --git a/packages/vkui/src/components/Header/Header.module.css b/packages/vkui/src/components/Header/Header.module.css index 8db401f919..e6987c15f5 100644 --- a/packages/vkui/src/components/Header/Header.module.css +++ b/packages/vkui/src/components/Header/Header.module.css @@ -75,8 +75,7 @@ color: var(--vkui--color_text_secondary); } -.modeSecondary:not(.pi):not(.withSubtitle) .main, -.modeTertiary .main { +.sizeS .contentIn { color: var(--vkui--color_text_secondary); } @@ -86,18 +85,10 @@ flex-shrink: 0; } -.modePrimary .indicator { - color: var(--vkui--color_text_subhead); -} - .host:not(.pi) .indicator { align-self: center; } -.modeSecondary .indicator { - margin-inline-start: 8px; -} - .after { display: flex; white-space: nowrap; @@ -109,6 +100,22 @@ margin-inline-start: 12px; } +.sizeS .after.after > * { + margin-block-start: 11px; +} + +.sizeM .after.after > * { + margin-block-start: 13px; +} + +.sizeL .after.after > * { + margin-block-start: 14px; +} + +.sizeXl .after.after > * { + margin-block-start: 16px; +} + /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */ .after > :global(.vkuiIcon) { position: relative; @@ -116,17 +123,37 @@ } /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */ -.after > :global(.vkuiIcon--24) { +.sizeS .after > :global(.vkuiIcon--24) { + margin-block: 9px 5px; +} +/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */ +.sizeM .after > :global(.vkuiIcon--24) { + margin-block: 10px 5px; +} +/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */ +.sizeL .after > :global(.vkuiIcon--24) { margin-block: 11px 5px; } +/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */ +.sizeXl .after > :global(.vkuiIcon--24) { + margin-block: 12px 5px; +} /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */ -.after > :global(.vkuiIcon--16) { +.sizeS .after > :global(.vkuiIcon--16) { + margin-block: 13px 9px; +} +/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */ +.sizeM .after > :global(.vkuiIcon--16) { + margin-block: 14px 9px; +} +/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */ +.sizeL .after > :global(.vkuiIcon--16) { margin-block: 15px 9px; } - -.modePrimary { - padding-block: 3px 1px; +/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */ +.sizeXl .after > :global(.vkuiIcon--16) { + margin-block: 16px 9px; } .content { @@ -137,27 +164,10 @@ margin-block-end: 8px; } -.modeTertiary .content { - margin-block-start: 15px; -} - -.modeTertiary .content:last-child { - margin-block-end: 9px; -} - .subtitleWrapper { margin-block-end: 7px; } -/* Компенсируем 1 пиксель из-за паддинга в .modePrimary */ -.modePrimary .subtitleWrapper { - margin-block-end: 6px; -} - -.large .content { - margin-block: 10px 6px; -} - /** * CMP: * Group @@ -184,20 +194,20 @@ } /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */ -:global(.vkuiInternalGroup--mode-card) > .host:not(.modeTertiary):first-child, +:global(.vkuiInternalGroup--mode-card) > .host:not(.sizeM):first-child, :global(.vkuiInternalGroup--mode-card) > :global(.vkuiInternalTappable):first-child - > .host:not(.modeTertiary) { + > .host:not(.sizeM) { margin-block-start: calc(-1 * var(--vkui--spacing_size_xs)); } @media (--sizeX-regular) { /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */ :global(.vkuiInternalGroup--sizeX-none.vkuiInternalGroup--mode-none) - > .host:not(.modeTertiary):first-child, + > .host:not(.sizeM):first-child, :global(.vkuiInternalGroup--sizeX-none.vkuiInternalGroup--mode-none) > :global(.vkuiInternalTappable):first-child - > .host:not(.modeTertiary) { + > .host:not(.sizeM) { margin-block-start: calc(-1 * var(--vkui--spacing_size_xs)); } } diff --git a/packages/vkui/src/components/Header/Header.stories.tsx b/packages/vkui/src/components/Header/Header.stories.tsx index 9e13e0efbd..a911dc5888 100644 --- a/packages/vkui/src/components/Header/Header.stories.tsx +++ b/packages/vkui/src/components/Header/Header.stories.tsx @@ -33,7 +33,7 @@ const story: Meta = { requiredIcons: ['Icon12Fire'], }), after: createFieldWithPresets({ - iconSizes: [], + iconSizes: ['16', '24'], additionalPresets: { Link: Показать все, }, @@ -114,6 +114,6 @@ export const WithAllFeatures: Story = { beforeSubtitle: 'Icon12Tag', afterSubtitle: 'Icon12Fire', subtitle: 'SOHN — Conrad', - after: Показать все, + after: 'Link', }, }; diff --git a/packages/vkui/src/components/Header/Header.test.tsx b/packages/vkui/src/components/Header/Header.test.tsx index 4cc8a9cfb7..1fd300fbb9 100644 --- a/packages/vkui/src/components/Header/Header.test.tsx +++ b/packages/vkui/src/components/Header/Header.test.tsx @@ -9,100 +9,72 @@ const getTypographyTagNameByText = (text: string) => screen.getByText(text).tagN describe('Header', () => { baselineComponent((props) =>
Title
); - it('[typography] HeaderContent is h2 on ANDROID regardless of mode and size', () => { + it('[typography] HeaderContent is h2 on ANDROID regardless size', () => { render( -
Русский
-
English
-
Espanõl
-
- Français -
-
- Deutsch -
-
- 中國人 -
+
Русский
+
English
+
Espanõl
+
Français
, ); expect(screen.getByText('Русский').parentElement?.tagName.toLowerCase()).toMatch('h2'); expect(screen.getByText('English').parentElement?.tagName.toLowerCase()).toMatch('h2'); expect(screen.getByText('Espanõl').parentElement?.tagName.toLowerCase()).toMatch('h2'); expect(screen.getByText('Français').parentElement?.tagName.toLowerCase()).toMatch('h2'); - expect(screen.getByText('Deutsch').parentElement?.tagName.toLowerCase()).toMatch('h2'); - expect(screen.getByText('中國人').parentElement?.tagName.toLowerCase()).toMatch('h2'); }); - it('[typography] HeaderContent is h2 on IOS regardless of mode and size', () => { + it('[typography] HeaderContent is h2 on IOS regardless of size', () => { render( -
Русский
-
English
-
Espanõl
-
- Français -
-
- Deutsch -
-
- 中國人 -
+
Русский
+
English
+
Espanõl
+
Français
, ); expect(screen.getByText('Русский').parentElement?.tagName.toLowerCase()).toMatch('h2'); expect(screen.getByText('English').parentElement?.tagName.toLowerCase()).toMatch('h2'); expect(screen.getByText('Espanõl').parentElement?.tagName.toLowerCase()).toMatch('h2'); expect(screen.getByText('Français').parentElement?.tagName.toLowerCase()).toMatch('h2'); - expect(screen.getByText('Deutsch').parentElement?.tagName.toLowerCase()).toMatch('h2'); - expect(screen.getByText('中國人').parentElement?.tagName.toLowerCase()).toMatch('h2'); }); - it('[typography] HeaderContent is h2 on VKCOM regardless of mode and size', () => { + it('[typography] HeaderContent is h2 on VKCOM regardless of size', () => { render( -
Русский
-
English
-
Espanõl
-
- Français -
-
- Deutsch -
-
- 中國人 -
+
Русский
+
English
+
Espanõl
+
Français
, ); expect(screen.getByText('Русский').parentElement?.tagName.toLowerCase()).toMatch('h2'); expect(screen.getByText('English').parentElement?.tagName.toLowerCase()).toMatch('h2'); expect(screen.getByText('Espanõl').parentElement?.tagName.toLowerCase()).toMatch('h2'); expect(screen.getByText('Français').parentElement?.tagName.toLowerCase()).toMatch('h2'); - expect(screen.getByText('Deutsch').parentElement?.tagName.toLowerCase()).toMatch('h2'); - expect(screen.getByText('中國人').parentElement?.tagName.toLowerCase()).toMatch('h2'); }); - it('[typography] HeaderSubtitle is span by default regardless of mode', () => { + it('[typography] HeaderSubtitle is span by default regardless of size', () => { render( -
-
-
+
+
+
+
, ); expect(getTypographyTagNameByText('Русский')).toMatch('span'); expect(getTypographyTagNameByText('English')).toMatch('span'); expect(getTypographyTagNameByText('Espanõl')).toMatch('span'); + expect(getTypographyTagNameByText('Français')).toMatch('span'); }); - it('[typography] HeaderSubtitle is h3 with subtitleComponent prop regardless of mode', () => { + it('[typography] HeaderSubtitle is h3 with subtitleComponent prop regardless of size', () => { render( -
-
-
+
+
+
, ); expect(getTypographyTagNameByText('Русский')).toMatch('h3'); diff --git a/packages/vkui/src/components/Header/Header.tsx b/packages/vkui/src/components/Header/Header.tsx index bbf73c2a03..91a55a51c1 100644 --- a/packages/vkui/src/components/Header/Header.tsx +++ b/packages/vkui/src/components/Header/Header.tsx @@ -2,9 +2,9 @@ import * as React from 'react'; import { classNames, hasReactNode, isPrimitiveReactNode } from '@vkontakte/vkjs'; -import { usePlatform } from '../../hooks/usePlatform'; import type { HasComponent, HTMLAttributesWithRootRef } from '../../types'; import { RootComponent } from '../RootComponent/RootComponent'; +import { Caption } from '../Typography/Caption/Caption'; import { Footnote } from '../Typography/Footnote/Footnote'; import { Headline } from '../Typography/Headline/Headline'; import { Paragraph } from '../Typography/Paragraph/Paragraph'; @@ -13,8 +13,7 @@ import { Title } from '../Typography/Title/Title'; import styles from './Header.module.css'; export interface HeaderProps extends HTMLAttributesWithRootRef, HasComponent { - mode?: 'primary' | 'secondary' | 'tertiary'; - size?: 'm' | 'l'; + size?: 's' | 'm' | 'l' | 'xl'; subtitle?: React.ReactNode; /* Позволяет задать тип элемента в который будет обёрнут subtitle */ subtitleComponent?: React.ElementType; @@ -49,54 +48,48 @@ export interface HeaderProps extends HTMLAttributesWithRootRef, Has afterSubtitle?: React.ReactNode; } -type HeaderContentProps = Pick & - HasComponent; - -const HeaderContent = ({ mode, size, ...restProps }: HeaderContentProps) => { - const isLarge = size === 'l'; +const sizeClassNames: Record, string> = { + s: styles.sizeS, + m: styles.sizeM, + l: styles.sizeL, + xl: styles.sizeXl, +}; - const platform = usePlatform(); - if (platform === 'ios') { - switch (mode) { - case 'primary': - return isLarge ? ( - - ) : ( - <Title weight="1" level="3" {...restProps} /> - ); - case 'secondary': - return <Footnote weight="1" caps {...restProps} />; - case 'tertiary': - return <Title weight="1" level="3" {...restProps} />; - } - } +type HeaderContentProps = Pick<HeaderProps, 'children' | 'size' | 'className'> & HasComponent; - switch (mode) { - case 'primary': - return isLarge ? ( - <Title level="2" weight="2" {...restProps} /> - ) : ( - <Headline weight="2" {...restProps} /> - ); - case 'secondary': - return <Footnote weight="1" caps {...restProps} />; - case 'tertiary': - return <Headline weight="2" {...restProps} />; +const HeaderContent = ({ size, ...restProps }: HeaderContentProps) => { + switch (size) { + case 'xl': + return <Title level="2" weight="1" {...restProps} />; + case 'l': + return <Title level="3" weight="1" {...restProps} />; + case 'm': + return <Headline {...restProps} />; + case 's': + return <Footnote caps weight="1" {...restProps} />; } return null; }; -const stylesMode = { - primary: styles.modePrimary, - secondary: styles.modeSecondary, - tertiary: styles.modeTertiary, +const Subtitle: React.FC< + Pick<HeaderProps, 'multiline' | 'subtitleComponent' | 'size'> & { children: React.ReactNode } +> = ({ subtitleComponent, children, multiline, size }) => { + const SubtitleElement = size === 'm' || size === 's' ? Caption : Subhead; + return ( + <SubtitleElement + className={classNames(styles.subtitle, multiline && styles.contentMultiline)} + Component={subtitleComponent} + > + {children} + </SubtitleElement> + ); }; + /** * @see https://vkcom.github.io/VKUI/#/Header */ export const Header = ({ - mode = 'primary', size = 'm', Component = 'h2', children, @@ -117,10 +110,8 @@ export const Header = ({ {...restProps} baseClassName={classNames( styles.host, - stylesMode[mode], - size === 'l' && styles.large, + sizeClassNames[size], isPrimitiveReactNode(indicator) && styles.pi, - hasReactNode(subtitle) && styles.withSubtitle, )} > {before && ( @@ -129,7 +120,7 @@ export const Header = ({ </div> )} <div className={styles.main}> - <HeaderContent className={styles.content} Component={Component} mode={mode} size={size}> + <HeaderContent className={styles.content} Component={Component} size={size}> {beforeTitle && <div className={styles.contentBefore}>{beforeTitle}</div>} <span className={classNames(styles.contentIn, multiline && styles.contentMultiline)}> {children} @@ -144,12 +135,9 @@ export const Header = ({ {hasReactNode(subtitle) && ( <div className={styles.subtitleWrapper}> {beforeSubtitle && <div className={styles.subtitleBefore}>{beforeSubtitle}</div>} - <Subhead - className={classNames(styles.subtitle, multiline && styles.contentMultiline)} - Component={subtitleComponent} - > + <Subtitle multiline={multiline} subtitleComponent={subtitleComponent} size={size}> {subtitle} - </Subhead> + </Subtitle> {afterSubtitle && <div className={styles.subtitleAfter}>{afterSubtitle}</div>} </div> )} diff --git a/packages/vkui/src/components/Header/Readme.md b/packages/vkui/src/components/Header/Readme.md index 6100a43b40..27a978259a 100644 --- a/packages/vkui/src/components/Header/Readme.md +++ b/packages/vkui/src/components/Header/Readme.md @@ -8,7 +8,6 @@ const Example = () => { <PanelHeader>Header</PanelHeader> <Group> <Header - mode="primary" after={ <Link> Показать все @@ -19,7 +18,6 @@ const Example = () => { Плейлисты </Header> <Header - mode="primary" after={ <Link> Показать все @@ -32,7 +30,6 @@ const Example = () => { Плейлисты </Header> <Header - mode="primary" after={ <Link> Показать все @@ -44,7 +41,6 @@ const Example = () => { Плейлисты </Header> <Header - mode="primary" after={ <Link> Показать все @@ -62,7 +58,7 @@ const Example = () => { </Group> <Group> <Header - mode="secondary" + size="s" after={ <Link> Показать все @@ -73,7 +69,7 @@ const Example = () => { Приглашения </Header> <Header - mode="secondary" + size="s" after={ <Link> Показать все @@ -85,7 +81,7 @@ const Example = () => { Фотографии </Header> <Header - mode="secondary" + size="s" after={ <Link> Показать все @@ -102,27 +98,20 @@ const Example = () => { </Header> </Group> <Group> - <Header mode="tertiary">Важные</Header> + <Header>Важные</Header> </Group> <Group> - <Header mode="primary" multiline> - Кто может писать мне личные сообщения - </Header> - <Header mode="tertiary" multiline> - Кто может комментировать мои записи - </Header> - <Header mode="secondary" multiline> + <Header multiline>Кто может писать мне личные сообщения</Header> + <Header multiline>Кто может комментировать мои записи</Header> + <Header size="s" multiline> Кто может оставлять записи на моей странице </Header> </Group> <Group> - <Header mode="primary" size="l"> - Большой заголовок - </Header> + <Header size="xl">Большой заголовок</Header> </Group> <Group> <Header - mode="primary" before={<Icon28UserCircleFillBlue />} beforeTitle={<Icon16LockOutline />} afterTitle={<Icon16UnlockOutline />} @@ -145,7 +134,6 @@ const Example = () => { Плейлисты </Header> <Header - mode="primary" before={<Icon28UserCircleFillBlue />} beforeTitle={<Icon16LockOutline />} afterTitle={<Icon16UnlockOutline />} diff --git a/packages/vkui/src/components/Header/__image_snapshots__/header-android-chromium-dark-1-snap.png b/packages/vkui/src/components/Header/__image_snapshots__/header-android-chromium-dark-1-snap.png index 5c660976b0..4932086574 100644 --- a/packages/vkui/src/components/Header/__image_snapshots__/header-android-chromium-dark-1-snap.png +++ b/packages/vkui/src/components/Header/__image_snapshots__/header-android-chromium-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:7666611c5e1ed49bf707a02f2bf706c9658951b1f4f7ca58049fb011683bd3e6 -size 284775 +oid sha256:13d32950ea5ca621af75e544f4f25e9e943aa672c3eb8870ef5c77e23aa141a6 +size 319983 diff --git a/packages/vkui/src/components/Header/__image_snapshots__/header-android-chromium-light-1-snap.png b/packages/vkui/src/components/Header/__image_snapshots__/header-android-chromium-light-1-snap.png index 01ad7d4cf8..f8d8325e42 100644 --- a/packages/vkui/src/components/Header/__image_snapshots__/header-android-chromium-light-1-snap.png +++ b/packages/vkui/src/components/Header/__image_snapshots__/header-android-chromium-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:eb5335a42e781e3a86417aec2d384533f3918743c814dfbb30ab6b26b8d0f836 -size 284521 +oid sha256:74421cd0eff434954ceec9c507994db071feafc477490140640318179e17f90f +size 314077 diff --git a/packages/vkui/src/components/Header/__image_snapshots__/header-ios-webkit-dark-1-snap.png b/packages/vkui/src/components/Header/__image_snapshots__/header-ios-webkit-dark-1-snap.png index 77af64cfdb..f048a12fd8 100644 --- a/packages/vkui/src/components/Header/__image_snapshots__/header-ios-webkit-dark-1-snap.png +++ b/packages/vkui/src/components/Header/__image_snapshots__/header-ios-webkit-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:e3307493705844b7b913476e68efcc08e6b1f3e61fd1f2414d194d1b445a6bd4 -size 293619 +oid sha256:1be92baaac827f1bf869ba8780c2a9e1e9d55dd813f1ca88a977733ae98c5dfc +size 332742 diff --git a/packages/vkui/src/components/Header/__image_snapshots__/header-ios-webkit-light-1-snap.png b/packages/vkui/src/components/Header/__image_snapshots__/header-ios-webkit-light-1-snap.png index 7948125cc0..0052162e82 100644 --- a/packages/vkui/src/components/Header/__image_snapshots__/header-ios-webkit-light-1-snap.png +++ b/packages/vkui/src/components/Header/__image_snapshots__/header-ios-webkit-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:9bd28b3b341ccef41702330979df36e95fb9beab2a1f59555906db8ebbf12d8f -size 289627 +oid sha256:70da983c6191df86528172efc60b1633424da2b995b215bf40be6346cbbb6637 +size 322640 diff --git a/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-chromium-dark-1-snap.png b/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-chromium-dark-1-snap.png index 7d05155744..376665bfa7 100644 --- a/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-chromium-dark-1-snap.png +++ b/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-chromium-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:67567d1fe5fe4eb126416104d6c75948b6d1e65a42e40f8e9497494e72924905 -size 284171 +oid sha256:307f15f256f784f9e4c9386f22407def49bc5ffe3c7681132c3175da716ecf28 +size 321398 diff --git a/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-chromium-light-1-snap.png b/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-chromium-light-1-snap.png index 2e5418fd88..a1304ad5cf 100644 --- a/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-chromium-light-1-snap.png +++ b/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-chromium-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:25cbae3283fd68a7462557fa2094e9e160a73d48403230dd817e119b33e60757 -size 285365 +oid sha256:e71554a82354cafb628d3c04551d2b6213e658a128e770a977f360f8cc610d5a +size 320580 diff --git a/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-firefox-dark-1-snap.png b/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-firefox-dark-1-snap.png index 6e8f3a7365..8a72cec0ab 100644 --- a/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-firefox-dark-1-snap.png +++ b/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-firefox-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:efa4bd21a6c016bf8a1c3e81047a00d00bef01c07e600416f344a8f2de0d644d -size 430643 +oid sha256:c206ad95ed6cc3cf059c1aea5bb104bdf465eab9c5c94e3b22025eb6ec147762 +size 490679 diff --git a/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-firefox-light-1-snap.png b/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-firefox-light-1-snap.png index 1ed7b35fc0..b705af33ec 100644 --- a/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-firefox-light-1-snap.png +++ b/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-firefox-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:3004589e0249214126cf18400e889b34d4d45ef728435df0ac91b9820f489393 -size 421708 +oid sha256:c8e9ec1f3828020db11adbe3bc4d86a3dbaa8557627ea24248b94bfc8def4429 +size 472909 diff --git a/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-webkit-dark-1-snap.png b/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-webkit-dark-1-snap.png index 6d0358445a..dbaf73e872 100644 --- a/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-webkit-dark-1-snap.png +++ b/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-webkit-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:43c36d15d38833955b9ef890cf045d41c476a20666c8b7c659cb6a3b6821c35a -size 288625 +oid sha256:e50373cabfd5547fdc93367d56cfbc2ab7306f197e06dd367551131ee9cd80b4 +size 326202 diff --git a/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-webkit-light-1-snap.png b/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-webkit-light-1-snap.png index 3afb8541de..bd2067b7c7 100644 --- a/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-webkit-light-1-snap.png +++ b/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-webkit-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:d0661f223011437cf3a7254c5202c23d5fe10a4659ad2f96f2f218d3d2a12bb3 -size 290380 +oid sha256:fd56e6b97e8bef41cbda78ece41c3cbe9f5b20808f40251b566d7fe642e0322d +size 325764 diff --git a/packages/vkui/src/components/HorizontalCell/HorizontalCell.test.tsx b/packages/vkui/src/components/HorizontalCell/HorizontalCell.test.tsx index 71ccdfc525..ae984b08bb 100644 --- a/packages/vkui/src/components/HorizontalCell/HorizontalCell.test.tsx +++ b/packages/vkui/src/components/HorizontalCell/HorizontalCell.test.tsx @@ -1,7 +1,7 @@ import { render, screen } from '@testing-library/react'; import { baselineComponent } from '../../testing/utils'; import { CUSTOM_CSS_TOKEN_FOR_CELL_WIDTH, HorizontalCell } from './HorizontalCell'; -import styles from './HorizontaCell.module.css'; +import styles from './HorizontalCell.module.css'; describe('HorizontalCell', () => { baselineComponent((props) => <HorizontalCell {...props}>HorizontalCell</HorizontalCell>); diff --git a/packages/vkui/src/components/HorizontalScroll/HorizontalScroll.stories.tsx b/packages/vkui/src/components/HorizontalScroll/HorizontalScroll.stories.tsx index c98caf7159..3b67eaaec7 100644 --- a/packages/vkui/src/components/HorizontalScroll/HorizontalScroll.stories.tsx +++ b/packages/vkui/src/components/HorizontalScroll/HorizontalScroll.stories.tsx @@ -69,7 +69,7 @@ export const Playground: Story = { }, decorators: [ (Component, context) => ( - <Group header={<Header mode="secondary">Недавние</Header>}> + <Group header={<Header size="s">Недавние</Header>}> <Component args={context.args} /> </Group> ), diff --git a/packages/vkui/src/components/HorizontalScroll/HorizontalScroll.test.tsx b/packages/vkui/src/components/HorizontalScroll/HorizontalScroll.test.tsx index 314ab9e082..8cb19c26d5 100644 --- a/packages/vkui/src/components/HorizontalScroll/HorizontalScroll.test.tsx +++ b/packages/vkui/src/components/HorizontalScroll/HorizontalScroll.test.tsx @@ -19,6 +19,11 @@ const setup = (element: HTMLElement, startScrollLeft = 0) => { jest.spyOn(element.firstElementChild!, 'scrollWidth', 'get').mockImplementation(() => 500); + // @ts-expect-error: TS2322 есть другой тип, но в компоненте он не используется + element.scrollBy = (options?: ScrollToOptions) => { + scrollLeft = scrollLeft + (options?.left || 0); + }; + return { get scrollLeft() { return scrollLeft; @@ -176,6 +181,34 @@ describe('HorizontalScroll', () => { expect(mockedData.scrollLeft).toBe(200); }); }); + + it('scroll by arrow', () => { + const ref: React.MutableRefObject<HTMLDivElement | null> = { + current: null, + }; + render( + <HorizontalScroll getRef={ref} data-testid="horizontal-scroll"> + <div style={{ width: '1800px', height: '50px' }} /> + </HorizontalScroll>, + ); + + const mockedData = setup(ref.current!, 50); + + fireEvent.mouseEnter(screen.getByTestId('horizontal-scroll')); + + const arrowLeft = screen.getByTestId('ScrollArrowLeft'); + const arrowRight = screen.getByTestId('ScrollArrowRight'); + + fireEvent.wheel(arrowRight, { + deltaX: 20, + }); + expect(mockedData.scrollLeft).toBe(70); + + fireEvent.wheel(arrowLeft, { + deltaX: 20, + }); + expect(mockedData.scrollLeft).toBe(90); + }); }); function mockRef(element: HTMLDivElement) { diff --git a/packages/vkui/src/components/HorizontalScroll/HorizontalScroll.tsx b/packages/vkui/src/components/HorizontalScroll/HorizontalScroll.tsx index 449cc6311b..2dab857fea 100644 --- a/packages/vkui/src/components/HorizontalScroll/HorizontalScroll.tsx +++ b/packages/vkui/src/components/HorizontalScroll/HorizontalScroll.tsx @@ -1,10 +1,9 @@ 'use client'; import * as React from 'react'; -import { classNames, noop } from '@vkontakte/vkjs'; +import { classNames } from '@vkontakte/vkjs'; import { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer'; import { useDirection } from '../../hooks/useDirection'; -import { useEventListener } from '../../hooks/useEventListener'; import { useExternRef } from '../../hooks/useExternRef'; import { easeInOutSine } from '../../lib/fx'; import type { HasRef, HTMLAttributesWithRootRef } from '../../types'; @@ -233,44 +232,33 @@ export const HorizontalScroll = ({ } }, [showArrows, hasPointer, scrollerRef, setCanScrollStart, setCanScrollEnd]); - const scrollEvent = useEventListener('scroll', calculateArrowsVisibility); - React.useEffect( - function addScrollerRefToScrollEvent() { - if (!scrollerRef.current) { - return noop; - } + React.useEffect(calculateArrowsVisibility, [calculateArrowsVisibility, children]); - scrollEvent.add(scrollerRef.current); - return scrollEvent.remove; + const _onWheel = React.useCallback( + (e: React.WheelEvent) => { + scrollerRef.current!.scrollBy({ left: e.deltaX + e.deltaY, behavior: 'auto' }); }, - [scrollEvent, scrollerRef], + [scrollerRef], ); - React.useEffect(calculateArrowsVisibility, [calculateArrowsVisibility, children]); - /** * Прокрутка с помощью любого колеса мыши */ - const onwheel = React.useCallback( - (e: WheelEvent) => { - scrollerRef.current!.scrollBy({ left: e.deltaX + e.deltaY, behavior: 'auto' }); + const onScrollWheel = React.useCallback( + (e: React.WheelEvent) => { + _onWheel(e); e.preventDefault(); }, - [scrollerRef], + [_onWheel], ); - const wheelEvent = useEventListener('wheel', onwheel); - React.useEffect( - function addScrollerRefToWheelEvent() { - if (!scrollerRef.current || !scrollOnAnyWheel) { - return noop; + const onArrowWheel = React.useCallback( + (e: React.WheelEvent) => { + if (e.deltaX || (e.deltaY && scrollOnAnyWheel)) { + _onWheel(e); } - - wheelEvent.add(scrollerRef.current); - - return wheelEvent.remove; }, - [wheelEvent, scrollerRef, scrollOnAnyWheel], + [_onWheel, scrollOnAnyWheel], ); return ( @@ -293,6 +281,7 @@ export const HorizontalScroll = ({ tabIndex={-1} className={classNames(styles.arrow, styles.arrowLeft)} onClick={scrollToLeft} + onWheel={onArrowWheel} /> )} {showArrows && (hasPointer || hasPointer === undefined) && canScrollRight && ( @@ -305,9 +294,15 @@ export const HorizontalScroll = ({ tabIndex={-1} className={classNames(styles.arrow, styles.arrowRight)} onClick={scrollToRight} + onWheel={onArrowWheel} /> )} - <div className={styles.in} ref={scrollerRef}> + <div + className={styles.in} + ref={scrollerRef} + onScroll={calculateArrowsVisibility} + onWheel={scrollOnAnyWheel ? onScrollWheel : undefined} + > <div className={styles.inWrapper}>{children}</div> </div> </RootComponent> diff --git a/packages/vkui/src/components/HorizontalScroll/Readme.md b/packages/vkui/src/components/HorizontalScroll/Readme.md index 5d5f3c3ab6..e9014d102d 100644 --- a/packages/vkui/src/components/HorizontalScroll/Readme.md +++ b/packages/vkui/src/components/HorizontalScroll/Readme.md @@ -17,7 +17,7 @@ const HorizontalScrollExample = () => { <View activePanel={activePanel}> <Panel id="basic-case"> <PanelHeader>HorizontalScroll</PanelHeader> - <Group header={<Header mode="secondary">Недавние</Header>}> + <Group header={<Header size="s">Недавние</Header>}> <HorizontalScroll showArrows getScrollToLeft={(i) => i - 120} @@ -34,7 +34,7 @@ const HorizontalScrollExample = () => { </HorizontalScroll> </Group> - <Group header={<Header mode="secondary">Общие друзья</Header>}> + <Group header={<Header size="s">Общие друзья</Header>}> <HorizontalScroll showArrows arrowSize="m" @@ -57,7 +57,7 @@ const HorizontalScrollExample = () => { </HorizontalScroll> </Group> - <Group header={<Header mode="secondary">С кнопкой "Показать всё"</Header>}> + <Group header={<Header size="s">С кнопкой "Показать всё"</Header>}> <CellButton before={<Icon16MoreHorizontal aria-hidden />} onClick={() => setActivePanel('show-more-case')} diff --git a/packages/vkui/src/components/Image/Readme.md b/packages/vkui/src/components/Image/Readme.md index a532a70c5b..df3765bd25 100644 --- a/packages/vkui/src/components/Image/Readme.md +++ b/packages/vkui/src/components/Image/Readme.md @@ -3,7 +3,7 @@ ```jsx const Default = () => { return ( - <Group header={<Header mode="secondary">По умолчанию</Header>}> + <Group header={<Header size="s">По умолчанию</Header>}> <SimpleCell before={<Image src={getAvatarUrl('app_shorm_online')} alt="Приложение шторм онлайн" />} description="Ролевая" @@ -19,9 +19,7 @@ const Responsive = () => { return ( <Group header={ - <Header mode="secondary"> - Изображения без фиксированных размеров с сохранением пропорций - </Header> + <Header size="s">Изображения без фиксированных размеров с сохранением пропорций</Header> } > <Flex margin="auto" direction="column" gap="m"> @@ -47,7 +45,7 @@ const OthersFeatures = () => { const [overlay, setOverlay] = React.useState(); return ( - <Group header={<Header mode="secondary">Другие возможности</Header>}> + <Group header={<Header size="s">Другие возможности</Header>}> <ImagePropsForm onBorderRadiusChange={setBorderRadius} onBadgeChange={setBadge} @@ -143,7 +141,7 @@ const ImagePropsForm = ({ onBorderRadiusChange, onBadgeChange, onOverlayChange } { label: 'l', value: 'l' }, ]} value={borderRadius} - onChange={(e) => setBorderRadius(e.target.value)} + onChange={setBorderRadius} /> </FormItem> @@ -162,7 +160,7 @@ const ImagePropsForm = ({ onBorderRadiusChange, onBadgeChange, onOverlayChange } ]} value={badgeBackground} disabled={!badge} - onChange={(e) => setBadgeBackground(e.target.value)} + onChange={setBadgeBackground} /> </FormItem> </FormLayoutGroup> @@ -185,7 +183,7 @@ const ImagePropsForm = ({ onBorderRadiusChange, onBadgeChange, onOverlayChange } ]} value={overlayTheme} disabled={!overlay} - onChange={(e) => setOverlayTheme(e.target.value)} + onChange={setOverlayTheme} /> </FormItem> <FormItem top="Image.Overlay[visibility]"> @@ -197,7 +195,7 @@ const ImagePropsForm = ({ onBorderRadiusChange, onBadgeChange, onOverlayChange } ]} value={overlayVisibility} disabled={!overlay} - onChange={(e) => setOverlayVisibility(e.target.value)} + onChange={setOverlayVisibility} /> </FormItem> </FormLayoutGroup> diff --git a/packages/vkui/src/components/InfoRow/InfoRow.stories.tsx b/packages/vkui/src/components/InfoRow/InfoRow.stories.tsx index 7eec4f7092..7052fc57b6 100644 --- a/packages/vkui/src/components/InfoRow/InfoRow.stories.tsx +++ b/packages/vkui/src/components/InfoRow/InfoRow.stories.tsx @@ -27,7 +27,7 @@ export const Example: Story = { ...Playground, decorators: [ (Component) => ( - <Group header={<Header mode="secondary">Информация о пользователе</Header>}> + <Group header={<Header size="s">Информация о пользователе</Header>}> <SimpleCell multiline> <Component args={{ header: 'Дата рождения', children: '30 января 1993' }} /> </SimpleCell> diff --git a/packages/vkui/src/components/InfoRow/Readme.md b/packages/vkui/src/components/InfoRow/Readme.md index 2be48761f4..01c762b1ab 100644 --- a/packages/vkui/src/components/InfoRow/Readme.md +++ b/packages/vkui/src/components/InfoRow/Readme.md @@ -10,7 +10,7 @@ <InfoRow header="Общий бюджет">3000 р.</InfoRow> </SimpleCell> </Group> - <Group header={<Header mode="secondary">Информация о пользователе</Header>}> + <Group header={<Header size="s">Информация о пользователе</Header>}> <SimpleCell multiline> <InfoRow header="Дата рождения">30 января 1993</InfoRow> </SimpleCell> diff --git a/packages/vkui/src/components/Input/Readme.md b/packages/vkui/src/components/Input/Readme.md index ed946911dc..7db9295b5a 100644 --- a/packages/vkui/src/components/Input/Readme.md +++ b/packages/vkui/src/components/Input/Readme.md @@ -12,7 +12,7 @@ const ExampleBase = ({ formItemStatus }) => { <FormItem top="align"> <Select value={align} - onChange={(e) => setAlign(e.target.value)} + onChange={setAlign} options={[ { label: 'left', value: 'left' }, { label: 'center', value: 'center' }, @@ -106,7 +106,7 @@ const Example = () => { <FormItem top="AdaptivityProvider[sizeY]"> <Select value={sizeY} - onChange={(e) => setSizeY(e.target.value)} + onChange={setSizeY} options={[ { label: 'compact', value: 'compact' }, { label: 'regular', value: 'regular' }, @@ -116,7 +116,7 @@ const Example = () => { <FormItem top="FormItem[status]"> <Select value={formItemStatus} - onChange={(e) => setFormItemStatus(e.target.value)} + onChange={setFormItemStatus} options={[ { label: 'default', value: 'default' }, { label: 'error', value: 'error' }, diff --git a/packages/vkui/src/components/ModalPage/ModalPage.stories.tsx b/packages/vkui/src/components/ModalPage/ModalPage.stories.tsx index c0eed6b737..0ba0a98aec 100644 --- a/packages/vkui/src/components/ModalPage/ModalPage.stories.tsx +++ b/packages/vkui/src/components/ModalPage/ModalPage.stories.tsx @@ -133,7 +133,7 @@ export const FullscreenModalPage: Story = { </Gradient> <Group header={ - <Header mode="secondary" indicator="25"> + <Header size="s" indicator="25"> Друзья </Header> } diff --git a/packages/vkui/src/components/ModalRoot/Readme.md b/packages/vkui/src/components/ModalRoot/Readme.md index bf14879ef4..c503f48ab2 100644 --- a/packages/vkui/src/components/ModalRoot/Readme.md +++ b/packages/vkui/src/components/ModalRoot/Readme.md @@ -147,7 +147,7 @@ const App = () => { </Gradient> <Group header={ - <Header mode="secondary" indicator="25"> + <Header size="s" indicator="25"> Друзья </Header> } diff --git a/packages/vkui/src/components/NativeSelect/NativeSelect.test.tsx b/packages/vkui/src/components/NativeSelect/NativeSelect.test.tsx index 11488b711d..c24a7fc2e7 100644 --- a/packages/vkui/src/components/NativeSelect/NativeSelect.test.tsx +++ b/packages/vkui/src/components/NativeSelect/NativeSelect.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { render, screen } from '@testing-library/react'; import { baselineComponent, userEvent } from '../../testing/utils'; -import { NativeSelect } from './NativeSelect'; +import { NativeSelect, type NativeSelectProps } from './NativeSelect'; const getTarget = () => screen.getByTestId<HTMLSelectElement>('target'); @@ -18,9 +18,9 @@ describe('NativeSelect', () => { it('works correctly with value and onChange', async () => { const SelectController = () => { - const [value, setValue] = React.useState('0'); + const [value, setValue] = React.useState<NativeSelectProps['value']>('0'); return ( - <NativeSelect data-testid="target" value={value} onChange={(e) => setValue(e.target.value)}> + <NativeSelect data-testid="target" value={value} onChange={setValue}> <option value="0">Mike</option> <option value="1">Josh</option> </NativeSelect> diff --git a/packages/vkui/src/components/NativeSelect/NativeSelect.tsx b/packages/vkui/src/components/NativeSelect/NativeSelect.tsx index e9386d4c1d..aaac37fc25 100644 --- a/packages/vkui/src/components/NativeSelect/NativeSelect.tsx +++ b/packages/vkui/src/components/NativeSelect/NativeSelect.tsx @@ -1,5 +1,6 @@ 'use client'; +import { type ChangeEventHandler } from 'react'; import * as React from 'react'; import { classNames } from '@vkontakte/vkjs'; import { useAdaptivity } from '../../hooks/useAdaptivity'; @@ -19,12 +20,49 @@ const sizeYClassNames = { compact: styles.sizeYCompact, }; +export type SelectValue = Exclude< + React.SelectHTMLAttributes<HTMLSelectElement>['value'], + undefined +> | null; + +export type NativeSelectValue = Exclude<SelectValue, null>; + +export const NOT_SELECTED = { + NATIVE: '__vkui_internal_Select_not_selected__', + CUSTOM: null, +}; + +export const remapFromSelectValueToNativeValue = (value: SelectValue): NativeSelectValue => + value === NOT_SELECTED.CUSTOM ? NOT_SELECTED.NATIVE : value; + +export const remapFromNativeValueToSelectValue = (value: NativeSelectValue): SelectValue => + value === NOT_SELECTED.NATIVE ? NOT_SELECTED.CUSTOM : value; + export interface NativeSelectProps - extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'multiple'>, + extends Omit< + React.SelectHTMLAttributes<HTMLSelectElement>, + 'multiple' | 'value' | 'defaultValue' | 'onChange' + >, HasRef<HTMLSelectElement>, HasRootRef<HTMLDivElement>, HasAlign, Pick<FormFieldProps, 'before' | 'status'> { + /** + * Выбранное значение. + * + * > ⚠️ Важно: При прокидывании `undefined` компонент будет считаться `Uncontrolled`. + * > + * > Не используйте `undefined`, чтобы показать невыбранное состояние. Вместо этого используйте `null` + */ + value?: SelectValue; + /** + * см. `value` + */ + defaultValue?: SelectValue; + /** + * Коллбэк срабатывающий при изменении выбранного значения. + */ + onChange?: (newValue: SelectValue) => void; placeholder?: string; multiline?: boolean; selectType?: SelectType; @@ -58,6 +96,8 @@ const NativeSelect = ({ icon = <DropdownIcon />, before, onChange, + value, + defaultValue, ...restProps }: NativeSelectProps): React.ReactNode => { const [title, setTitle] = React.useState(''); @@ -69,9 +109,14 @@ const NativeSelect = ({ const selectedOption = selectRef.current?.options[selectRef.current.selectedIndex]; if (selectedOption) { setTitle(selectedOption.text); - setEmpty(selectedOption.value === '' && placeholder != null); + setEmpty(selectedOption.value === NOT_SELECTED.NATIVE && placeholder != null); } }; + + const _onChange: ChangeEventHandler<HTMLSelectElement> = (e) => { + const newValue = remapFromNativeValueToSelectValue(e.target.value); + onChange?.(newValue); + }; useIsomorphicLayoutEffect(checkSelectedOption, [children]); return ( @@ -98,12 +143,18 @@ const NativeSelect = ({ > <select {...restProps} + value={value !== undefined ? remapFromSelectValueToNativeValue(value) : value} + defaultValue={ + defaultValue !== undefined + ? remapFromSelectValueToNativeValue(defaultValue) + : defaultValue + } disabled={disabled} className={styles.el} - onChange={callMultiple(onChange, checkSelectedOption)} + onChange={callMultiple(_onChange, checkSelectedOption)} ref={selectRef} > - {placeholder && <option value="">{placeholder}</option>} + {placeholder && <option value={NOT_SELECTED.NATIVE}>{placeholder}</option>} {children} </select> <div className={styles.container} aria-hidden> diff --git a/packages/vkui/src/components/NativeSelect/Readme.md b/packages/vkui/src/components/NativeSelect/Readme.md index 3a66c1260b..1f0c3424c5 100644 --- a/packages/vkui/src/components/NativeSelect/Readme.md +++ b/packages/vkui/src/components/NativeSelect/Readme.md @@ -1,21 +1,78 @@ Надстройка над `<select />`. Компонент принимает все валидные для этого элемента свойства. +> Важно: для отображения невыбранного состояния нужно использовать `value=null` вместо `undefined`. +> +> `undefined` ипользуется только для неконтролируемого компонента. +> +> Также, чтобы отобразить невыбранное состояние необходимо задать `placeholder` + ```jsx -<View activePanel="native-select"> - <Panel id="native-select"> - <PanelHeader>NativeSelect</PanelHeader> - <Group> +const ControlledSelect = () => { + const [selectedOption, setSelectedOption] = useState(null); + + return ( + <Group header={<Header>Controlled</Header>}> <FormItem top="Выберите пол" - htmlFor="select-id" + htmlFor="gender-select-id" bottom="Пример селекта с возможностью выбрать пол пользователя" > - <NativeSelect id="select-id"> + <NativeSelect + id="gender-select-id" + placeholder="Не выбрано" + value={selectedOption} + onChange={setSelectedOption} + > <option value="m">Мужской</option> <option value="f">Женский</option> </NativeSelect> </FormItem> </Group> - </Panel> -</View> + ); +}; + +const UncontrolledSelect = () => { + const cityValueToName = { + 'Moscow': 'Москва', + 'Saint-Petersburg': 'Caнкт-Петербург', + }; + const cities = ['Moscow', 'Saint-Petersburg']; + + const onChange = (newValue) => + newValue + ? console.log('Выбран город', cityValueToName[newValue]) + : console.log('Выбор сброшен'); + + return ( + <Group header={<Header>Uncontrolled</Header>}> + <FormItem + top="Выберите город" + htmlFor="city-select-id" + bottom="Пример селекта с возможностью выбрать город" + > + <NativeSelect id="city-select-id" placeholder="Не выбрано" onChange={onChange}> + {cities.map((city) => ( + <option key={city} value={city}> + {cityValueToName[city]} + </option> + ))} + </NativeSelect> + </FormItem> + </Group> + ); +}; + +const Example = () => { + return ( + <View activePanel="native-select"> + <Panel id="native-select"> + <PanelHeader>Native Select</PanelHeader> + <ControlledSelect /> + <UncontrolledSelect /> + </Panel> + </View> + ); +}; + +<Example />; ``` diff --git a/packages/vkui/src/components/Pagination/Readme.md b/packages/vkui/src/components/Pagination/Readme.md index e2f955e348..207b8eb9d0 100644 --- a/packages/vkui/src/components/Pagination/Readme.md +++ b/packages/vkui/src/components/Pagination/Readme.md @@ -89,7 +89,7 @@ const Example = () => { <FormItem top="sizeY"> <Select value={sizeY} - onChange={(e) => setSizeY(e.target.value)} + onChange={setSizeY} options={[ { label: 'compact', value: 'compact' }, { label: 'regular', value: 'regular' }, @@ -99,7 +99,7 @@ const Example = () => { <FormItem top="prop[navigationButtonsStyle]"> <Select value={navigationButtonsStyle} - onChange={(e) => setNavigationButtonsStyle(e.target.value)} + onChange={setNavigationButtonsStyle} options={[ { label: 'icon', value: 'icon' }, { label: 'caption', value: 'caption' }, diff --git a/packages/vkui/src/components/PanelSpinner/Readme.md b/packages/vkui/src/components/PanelSpinner/Readme.md index edbcc4117d..532b5e911c 100644 --- a/packages/vkui/src/components/PanelSpinner/Readme.md +++ b/packages/vkui/src/components/PanelSpinner/Readme.md @@ -15,7 +15,7 @@ import { PanelSpinner } from '@vkontakte/vkui'; {loading ? ( <PanelSpinner>Панель загружается, пожалуйста, подождите...</PanelSpinner> ) : ( - <Group header={<Header mode="secondary">Информация</Header>}>...</Group> + <Group header={<Header size="s">Информация</Header>}>...</Group> )} </Panel>; ``` diff --git a/packages/vkui/src/components/Select/Readme.md b/packages/vkui/src/components/Select/Readme.md index 97c49e28c1..0c1ca1f3ad 100644 --- a/packages/vkui/src/components/Select/Readme.md +++ b/packages/vkui/src/components/Select/Readme.md @@ -1,5 +1,9 @@ Отрисовывает [CustomSelect](#!/CustomSelect), если есть мышка, либо [NativeSelect](#!/NativeSelect) +> Важно: для отображения невыбранного состояния нужно использовать `value=null` вместо `undefined`. +> +> `undefined` ипользуется только для неконтролируемого компонента. + ## Цифровая доступность (a11y) Старайтесь сопровождать элемент текстовым описанием, для корректной работы скринридеров. diff --git a/packages/vkui/src/components/Separator/Readme.md b/packages/vkui/src/components/Separator/Readme.md index 575d352d48..ee8eca2d13 100644 --- a/packages/vkui/src/components/Separator/Readme.md +++ b/packages/vkui/src/components/Separator/Readme.md @@ -12,7 +12,7 @@ <Panel id="separator"> <PanelHeader>Separator</PanelHeader> - <Group header={<Header mode="secondary">direction="horizontal"</Header>}> + <Group header={<Header size="s">direction="horizontal"</Header>}> <Cell before={<Icon28Notifications />}>Уведомления</Cell> <Cell before={<Icon28BlockOutline />}>Не беспокоить</Cell> @@ -21,7 +21,7 @@ <Cell before={<Icon28UserOutline />}>Учётная запись</Cell> <Cell before={<Icon28SlidersOutline />}>Основные</Cell> </Group> - <Group header={<Header mode="secondary">direction="vertical"</Header>}> + <Group header={<Header size="s">direction="vertical"</Header>}> <Flex margin="auto"> <Link>Новости</Link> <Separator direction="vertical" size="xl" /> diff --git a/packages/vkui/src/components/SimpleCell/Readme.md b/packages/vkui/src/components/SimpleCell/Readme.md index 66ca6726fe..4b10104258 100644 --- a/packages/vkui/src/components/SimpleCell/Readme.md +++ b/packages/vkui/src/components/SimpleCell/Readme.md @@ -6,7 +6,7 @@ const Example = () => { <View activePanel={activePanel}> <Panel id="list"> <PanelHeader>SimpleCell</PanelHeader> - <Group header={<Header mode="secondary">Меню</Header>}> + <Group header={<Header size="s">Меню</Header>}> <SimpleCell onClick={() => setActivePanel('nothing')} chevron="auto" @@ -29,7 +29,7 @@ const Example = () => { Основные </SimpleCell> </Group> - <Group header={<Header mode="secondary">Настройки</Header>}> + <Group header={<Header size="s">Настройки</Header>}> <SimpleCell Component="label" after={<Switch defaultChecked />}> Сжимать фотографии </SimpleCell> @@ -37,7 +37,7 @@ const Example = () => { Сжимать видео </SimpleCell> </Group> - <Group header={<Header mode="secondary">Настройки системы</Header>}> + <Group header={<Header size="s">Настройки системы</Header>}> <SimpleCell onClick={() => setActivePanel('nothing')} chevron="auto" indicator="Русский"> Язык </SimpleCell> @@ -49,7 +49,7 @@ const Example = () => { Геолокация </SimpleCell> </Group> - <Group header={<Header mode="secondary">Список диалогов</Header>}> + <Group header={<Header size="s">Список диалогов</Header>}> <SimpleCell before={<Avatar size={40} src={getAvatarUrl('user_xyz')} />} after={ @@ -73,7 +73,7 @@ const Example = () => { Artur Stambultsian </SimpleCell> </Group> - <Group header={<Header mode="secondary">Список друзей</Header>}> + <Group header={<Header size="s">Список друзей</Header>}> <SimpleCell before={<Avatar size={48} src={getAvatarUrl('user_xyz')} />} badgeAfterTitle={<Icon12Verified />} diff --git a/packages/vkui/src/components/SimpleCell/SimpleCell.e2e-playground.tsx b/packages/vkui/src/components/SimpleCell/SimpleCell.e2e-playground.tsx index 88bdc0831d..2a4f5d6368 100644 --- a/packages/vkui/src/components/SimpleCell/SimpleCell.e2e-playground.tsx +++ b/packages/vkui/src/components/SimpleCell/SimpleCell.e2e-playground.tsx @@ -67,7 +67,7 @@ export const SimpleCellPlayground = (props: ComponentPlaygroundProps) => { }, { before: [<Avatar key="avatar" size={40} />], - subhead: ['Subhead'], + overTitle: ['Subhead'], children: ['Title'], subtitle: ['Subtitle'], extraSubtitle: ['Extra Subtitle'], diff --git a/packages/vkui/src/components/SimpleCell/SimpleCell.module.css b/packages/vkui/src/components/SimpleCell/SimpleCell.module.css index a3586a5522..3c59121c69 100644 --- a/packages/vkui/src/components/SimpleCell/SimpleCell.module.css +++ b/packages/vkui/src/components/SimpleCell/SimpleCell.module.css @@ -60,7 +60,7 @@ margin-block-start: var(--vkui--spacing_size_2xs); } -.subhead { +.overTitle { color: var(--vkui--color_text_subhead); } diff --git a/packages/vkui/src/components/SimpleCell/SimpleCell.stories.tsx b/packages/vkui/src/components/SimpleCell/SimpleCell.stories.tsx index 84afee9bdc..9bfc8e4c83 100644 --- a/packages/vkui/src/components/SimpleCell/SimpleCell.stories.tsx +++ b/packages/vkui/src/components/SimpleCell/SimpleCell.stories.tsx @@ -16,7 +16,7 @@ const story: Meta<SimpleCellProps> = { component: SimpleCell, parameters: { ...CanvasFullLayout, ...DisableCartesianParam }, argTypes: { - subhead: StringArg, + overTitle: StringArg, extraSubtitle: StringArg, before: createFieldWithPresets({ iconSizes: ['28'], diff --git a/packages/vkui/src/components/SimpleCell/SimpleCell.tsx b/packages/vkui/src/components/SimpleCell/SimpleCell.tsx index 7b40114c29..83c18194ba 100644 --- a/packages/vkui/src/components/SimpleCell/SimpleCell.tsx +++ b/packages/vkui/src/components/SimpleCell/SimpleCell.tsx @@ -45,7 +45,7 @@ export interface SimpleCellOwnProps extends HasComponent { /** * Дополнительная строка текста над `children`. */ - subhead?: React.ReactNode; + overTitle?: React.ReactNode; /** * Дополнительная строка текста под `children`. */ @@ -95,7 +95,7 @@ export const SimpleCell = ({ after, chevron, multiline, - subhead, + overTitle, subtitle, extraSubtitle, className, @@ -124,9 +124,9 @@ export const SimpleCell = ({ {before} </div> <div className={styles.middle}> - {subhead && ( - <Subhead Component="span" className={classNames(styles.text, styles.subhead)}> - {subhead} + {overTitle && ( + <Subhead Component="span" className={classNames(styles.text, styles.overTitle)}> + {overTitle} </Subhead> )} <div className={styles.content}> diff --git a/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-android-chromium-dark-1-snap.png b/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-android-chromium-dark-1-snap.png index cadfe562f0..fd1d1bc1a4 100644 --- a/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-android-chromium-dark-1-snap.png +++ b/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-android-chromium-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:aff1fb5d3986e6628fea13b1e2e9c08485bd63f4bb284177b62acea341b81a84 -size 133088 +oid sha256:f67c7f5f5bc0bacebdf30bd841e02c55474db7612fb5664763a4541c08d0fc5e +size 133391 diff --git a/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-android-chromium-light-1-snap.png b/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-android-chromium-light-1-snap.png index b28db9cb02..a9fcd6622e 100644 --- a/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-android-chromium-light-1-snap.png +++ b/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-android-chromium-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:49b8b6a3826583068c7d3e2c879073443cf7f9c6e9ff4b8c2de4ab7bf19d8ed6 -size 129271 +oid sha256:373ef913ee31cbfa682dc6b6ace8d8e2dc0718b637cd4bf3bf01307e9f788e2e +size 129652 diff --git a/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-ios-webkit-dark-1-snap.png b/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-ios-webkit-dark-1-snap.png index 9ad8dfdc79..126d47269f 100644 --- a/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-ios-webkit-dark-1-snap.png +++ b/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-ios-webkit-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:e1bc127074fbccd75fd0fd1a2e18849f8a6a89f6c19e2d4ac8cb60da4ad6ebc1 -size 138304 +oid sha256:6a52d02b4d3aefddd4548fb9c4449fe9d2a113ff3b27c65f89549de274ee304b +size 138770 diff --git a/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-ios-webkit-light-1-snap.png b/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-ios-webkit-light-1-snap.png index 98c236d89e..a1173a101b 100644 --- a/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-ios-webkit-light-1-snap.png +++ b/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-ios-webkit-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:7af6f83a7ef40c42eb372995c8c134b6e7762c07f59b865dc57d9cae8b2d93ab -size 133792 +oid sha256:c2c921db0396b5e0803dc19150bc65a77368543eb0447ca66e974e8a67da8652 +size 134284 diff --git a/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-vkcom-chromium-dark-1-snap.png b/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-vkcom-chromium-dark-1-snap.png index 4ee6004a85..e11fb6f07b 100644 --- a/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-vkcom-chromium-dark-1-snap.png +++ b/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-vkcom-chromium-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:225698f6f62f429db0a5e899384c864ada8d1870388fa2fa78e32b29a8a7a3c0 -size 118627 +oid sha256:2684cd6f6be7e1fe1e4d6184369b218a2f50b61de789e026758058944aaeffac +size 118897 diff --git a/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-vkcom-chromium-light-1-snap.png b/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-vkcom-chromium-light-1-snap.png index 6eca907a8b..d223ea8db2 100644 --- a/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-vkcom-chromium-light-1-snap.png +++ b/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-vkcom-chromium-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:faa1bce2967558b1948d18f249dde88394a47686b3a94f59778eac2748eea042 -size 120402 +oid sha256:f9dd3b5e6f24f26f25030336c6bee8890ca32fd2397709ca7d61b1b2093abc9a +size 120819 diff --git a/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-vkcom-firefox-dark-1-snap.png b/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-vkcom-firefox-dark-1-snap.png index 1bb2b96e8c..cd5d65f4ba 100644 --- a/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-vkcom-firefox-dark-1-snap.png +++ b/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-vkcom-firefox-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:e883aa88db1b06fbcf339292557c497065d1e065561dda62e22a73d92d34d548 -size 212266 +oid sha256:585f032b0e56699b0b41c79ffb06d3c013b4feb90794eebf80058fa05bfecb91 +size 212068 diff --git a/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-vkcom-firefox-light-1-snap.png b/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-vkcom-firefox-light-1-snap.png index 19413dc7ab..85df884a6d 100644 --- a/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-vkcom-firefox-light-1-snap.png +++ b/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-vkcom-firefox-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:0331465297206fbf63bb319618546dfe5d509d88f17a680a2e9a9649c856d878 -size 210920 +oid sha256:6e3407c2892dc7ef168f8afefe2a6011f5442f4f86ef7a290504dc7f521470ba +size 210735 diff --git a/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-vkcom-webkit-dark-1-snap.png b/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-vkcom-webkit-dark-1-snap.png index 6e9d448fe0..93261fd1f4 100644 --- a/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-vkcom-webkit-dark-1-snap.png +++ b/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-vkcom-webkit-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:d0f9c48bdb2ebec4b77a6a757230be0d784e2d38f3b395f9d5de543f19e262ba -size 122912 +oid sha256:00dbbb7873f6d8ac1547c3261808a8c92b03f647244f28ea23919d268cd88733 +size 123225 diff --git a/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-vkcom-webkit-light-1-snap.png b/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-vkcom-webkit-light-1-snap.png index d1adbd67f3..e3296d69d2 100644 --- a/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-vkcom-webkit-light-1-snap.png +++ b/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-vkcom-webkit-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:c30aa48402a209633ea11547d329b61f6b5174b38f3c707ec643dd5876aaab58 -size 123685 +oid sha256:391d406dfea789cc713623cacd897cf9285a2b8bb73a80efef768526db382913 +size 123993 diff --git a/packages/vkui/src/components/SimpleGrid/Readme.md b/packages/vkui/src/components/SimpleGrid/Readme.md index ae11a8d27e..0b5f890a46 100644 --- a/packages/vkui/src/components/SimpleGrid/Readme.md +++ b/packages/vkui/src/components/SimpleGrid/Readme.md @@ -139,7 +139,7 @@ const Example = () => { <FormItem top="align"> <Select value={align} - onChange={(e) => setAlign(e.target.value || 'stretch')} + onChange={(newValue) => setAlign(newValue || 'stretch')} placeholder="Не выбрано" options={[ { label: 'start', value: 'start' }, @@ -156,29 +156,17 @@ const Example = () => { </Checkbox> {!complexGap && ( <FormItem top="gap"> - <Select - value={gap} - onChange={(e) => setGap(e.target.value)} - options={GapSelectValues} - /> + <Select value={gap} onChange={setGap} options={GapSelectValues} /> </FormItem> )} {complexGap && ( <FormItem top="row gap"> - <Select - value={rowGap} - onChange={(e) => setRowGap(e.target.value)} - options={GapSelectValues} - /> + <Select value={rowGap} onChange={setRowGap} options={GapSelectValues} /> </FormItem> )} {complexGap && ( <FormItem top="column gap"> - <Select - value={columnGap} - onChange={(e) => setColumnGap(e.target.value)} - options={GapSelectValues} - /> + <Select value={columnGap} onChange={setColumnGap} options={GapSelectValues} /> </FormItem> )} </div> diff --git a/packages/vkui/src/components/Slider/Readme.md b/packages/vkui/src/components/Slider/Readme.md index fce3f87348..2e39a2e946 100644 --- a/packages/vkui/src/components/Slider/Readme.md +++ b/packages/vkui/src/components/Slider/Readme.md @@ -63,11 +63,7 @@ const Example = () => { /> </FormItem> <FormItem> - <Select - value={String(valueStep)} - options={options()} - onChange={(e) => setValueStep(e.target.value)} - /> + <Select value={String(valueStep)} options={options()} onChange={setValueStep} /> </FormItem> <FormItem top={<span id="uncontrolled">Uncontrolled</span>}> <Slider defaultValue={20} aria-labelledby="uncontrolled" /> diff --git a/packages/vkui/src/components/Spacing/Readme.md b/packages/vkui/src/components/Spacing/Readme.md index 07389081e8..14ee378f8b 100644 --- a/packages/vkui/src/components/Spacing/Readme.md +++ b/packages/vkui/src/components/Spacing/Readme.md @@ -14,7 +14,7 @@ <Panel id="separator"> <PanelHeader>Spacing</PanelHeader> - <Group header={<Header mode="secondary">Default Spacing (empty, 8px)</Header>}> + <Group header={<Header size="s">Default Spacing (empty, 8px)</Header>}> <SimpleCell before={<Icon28Notifications />}>Уведомления</SimpleCell> <SimpleCell before={<Icon28BlockOutline />}>Не беспокоить</SimpleCell> @@ -24,7 +24,7 @@ <SimpleCell before={<Icon28SlidersOutline />}>Основные</SimpleCell> </Group> - <Group header={<Header mode="secondary">Spacing 16px</Header>}> + <Group header={<Header size="s">Spacing 16px</Header>}> <SimpleCell before={<Icon28Notifications />}>Уведомления</SimpleCell> <SimpleCell before={<Icon28BlockOutline />}>Не беспокоить</SimpleCell> diff --git a/packages/vkui/src/components/SubnavigationButton/Readme.md b/packages/vkui/src/components/SubnavigationButton/Readme.md index 61f3a6bfb8..96af7f93b2 100644 --- a/packages/vkui/src/components/SubnavigationButton/Readme.md +++ b/packages/vkui/src/components/SubnavigationButton/Readme.md @@ -46,7 +46,7 @@ const SubnavigationButtonExample = () => { <FormItem top="appearance"> <Select value={appearance} - onChange={(e) => setAppearance(e.target.value)} + onChange={setAppearance} options={[ { label: 'accent', value: 'accent' }, { label: 'neutral', value: 'neutral' }, @@ -56,7 +56,7 @@ const SubnavigationButtonExample = () => { <FormItem top="text level"> <Select value={textLevel} - onChange={(e) => setTextLevel(e.target.value)} + onChange={setTextLevel} options={[ { label: '1', value: '1' }, { label: '2', value: '2' }, @@ -67,7 +67,7 @@ const SubnavigationButtonExample = () => { <FormItem top="size"> <Select value={size} - onChange={(e) => setSize(e.target.value)} + onChange={setSize} options={[ { label: 's', value: 's' }, { label: 'm', value: 'm' }, @@ -78,7 +78,7 @@ const SubnavigationButtonExample = () => { <FormItem top="sizeY"> <Select value={sizeY} - onChange={(e) => setSizeY(e.target.value)} + onChange={setSizeY} options={[ { label: 'compact', value: 'compact' }, { diff --git a/packages/vkui/src/components/Tabs/Readme.md b/packages/vkui/src/components/Tabs/Readme.md index 0254ab3247..47117f6ce2 100644 --- a/packages/vkui/src/components/Tabs/Readme.md +++ b/packages/vkui/src/components/Tabs/Readme.md @@ -213,7 +213,7 @@ const Scrollable = () => { value: 'secondary', }, ]} - onChange={(event) => setMode(event.target.value)} + onChange={setMode} /> </FormItem> <FormItem top="layoutFillMode"> @@ -233,7 +233,7 @@ const Scrollable = () => { value: 'shrinked', }, ]} - onChange={(event) => setLayoutFillMode(event.target.value)} + onChange={setLayoutFillMode} /> </FormItem> <Checkbox onChange={() => setDisabled((prev) => !prev)}>disabled</Checkbox> diff --git a/packages/vkui/src/components/ToolButton/Readme.md b/packages/vkui/src/components/ToolButton/Readme.md index d6d62cca45..06f7744177 100644 --- a/packages/vkui/src/components/ToolButton/Readme.md +++ b/packages/vkui/src/components/ToolButton/Readme.md @@ -44,7 +44,7 @@ const Example = () => { <FormItem top="direction"> <Select value={direction} - onChange={(e) => setDirection(e.target.value)} + onChange={setDirection} options={[ { label: 'row', value: 'row' }, { label: 'column', value: 'column' }, @@ -54,7 +54,7 @@ const Example = () => { <FormItem top="mode"> <Select value={mode} - onChange={(e) => setMode(e.target.value)} + onChange={setMode} options={[ { label: 'primary', value: 'primary' }, { label: 'secondary', value: 'secondary' }, @@ -66,7 +66,7 @@ const Example = () => { <FormItem top="appearance"> <Select value={appearance} - onChange={(e) => setAppearance(e.target.value)} + onChange={setAppearance} options={[ { label: 'accent', value: 'accent' }, { label: 'neutral', value: 'neutral' }, @@ -76,7 +76,7 @@ const Example = () => { <FormItem top="sizeY"> <Select value={sizeY} - onChange={(e) => setSizeY(e.target.value)} + onChange={setSizeY} options={[ { label: 'compact', value: 'compact' }, { diff --git a/packages/vkui/src/components/Touch/Readme.md b/packages/vkui/src/components/Touch/Readme.md index fa078b445c..8d5607c7d7 100644 --- a/packages/vkui/src/components/Touch/Readme.md +++ b/packages/vkui/src/components/Touch/Readme.md @@ -65,7 +65,7 @@ const Example = () => { <View activePanel="gallery"> <Panel id="gallery"> <PanelHeader>Touch</PanelHeader> - <Group header={<Header mode="secondary">Перетащите кружок</Header>}> + <Group header={<Header size="s">Перетащите кружок</Header>}> <div style={{ ...containerStyle, diff --git a/packages/vkui/src/components/Touch/Touch.tsx b/packages/vkui/src/components/Touch/Touch.tsx index fec7205677..59fc834c1f 100644 --- a/packages/vkui/src/components/Touch/Touch.tsx +++ b/packages/vkui/src/components/Touch/Touch.tsx @@ -25,11 +25,11 @@ export interface TouchProps useCapture?: boolean; slideThreshold?: number; noSlideClick?: boolean; - onEnter?: HoverHandler; // TODO [>=7] Заменить типы события в VKUITouchEvent на события из React + onEnter?: HoverHandler; onLeave?: HoverHandler; - onStart?: CustomTouchEventHandler; // TODO [>=7] Заменить типы события в VKUITouchEvent на события из React - onStartX?: CustomTouchEventHandler; // TODO [>=7] Заменить типы события в VKUITouchEvent на события из React - onStartY?: CustomTouchEventHandler; // TODO [>=7] Заменить типы события в VKUITouchEvent на события из React + onStart?: CustomTouchEventHandler; + onStartX?: CustomTouchEventHandler; + onStartY?: CustomTouchEventHandler; onMove?: CustomTouchEventHandler; onMoveX?: CustomTouchEventHandler; onMoveY?: CustomTouchEventHandler; diff --git a/packages/vkui/src/components/UsersStack/Readme.md b/packages/vkui/src/components/UsersStack/Readme.md index 29abef1b74..5d5f122e40 100644 --- a/packages/vkui/src/components/UsersStack/Readme.md +++ b/packages/vkui/src/components/UsersStack/Readme.md @@ -62,7 +62,7 @@ const App = () => { </Div> </Group> - <Group header={<Header mode="secondary">Вертикальный режим</Header>}> + <Group header={<Header size="s">Вертикальный режим</Header>}> <Div> <UsersStack photos={[ @@ -102,7 +102,7 @@ const App = () => { </Flex> </Group> - <Group header={<Header mode="secondary">Кликабельные с тултипом</Header>}> + <Group header={<Header size="s">Кликабельные с тултипом</Header>}> <Div> <UsersStack photos={[ diff --git a/packages/vkui/src/hooks/useDateInput.ts b/packages/vkui/src/hooks/useDateInput.ts index d6ff9befe9..33565cc36d 100644 --- a/packages/vkui/src/hooks/useDateInput.ts +++ b/packages/vkui/src/hooks/useDateInput.ts @@ -1,3 +1,4 @@ +import { useCallback } from 'react'; import * as React from 'react'; import { useDOM } from '../lib/dom'; import { useBooleanState } from './useBooleanState'; @@ -17,6 +18,7 @@ export interface UseDateInputDependencies<T, D> { onInternalValueChange: (value: string[]) => void; getInternalValue: (value?: D | undefined) => string[]; onChange?: (value?: D | undefined) => void; + onCalendarOpenChanged?: (opened: boolean) => void; } export function useDateInput<T extends HTMLElement, D>({ @@ -29,6 +31,7 @@ export function useDateInput<T extends HTMLElement, D>({ onInternalValueChange, getInternalValue, value, + onCalendarOpenChanged, }: UseDateInputDependencies<T, D>): { rootRef: React.RefObject<HTMLDivElement>; calendarRef: React.RefObject<HTMLDivElement>; @@ -51,14 +54,28 @@ export function useDateInput<T extends HTMLElement, D>({ const [focusedElement, setFocusedElement] = React.useState<number | null>(null); const { window } = useDOM(); + const _onCalendarClose = useCallback(() => { + if (open) { + closeCalendar(); + onCalendarOpenChanged?.(false); + } + }, [closeCalendar, onCalendarOpenChanged, open]); + + const _onCalendarOpen = useCallback(() => { + if (!open) { + openCalendar(); + onCalendarOpenChanged?.(true); + } + }, [onCalendarOpenChanged, open, openCalendar]); + const removeFocusFromField = React.useCallback(() => { if (focusedElement !== null) { setFocusedElement(null); - closeCalendar(); + _onCalendarClose(); window!.getSelection()?.removeAllRanges(); setInternalValue(getInternalValue(value)); } - }, [focusedElement, closeCalendar, getInternalValue, value, window]); + }, [focusedElement, _onCalendarClose, window, getInternalValue, value]); const handleClickOutside = React.useCallback( (e: MouseEvent) => { @@ -101,14 +118,14 @@ export function useDateInput<T extends HTMLElement, D>({ if (element) { element.focus(); - openCalendar(); + _onCalendarOpen(); range.selectNodeContents(element as Node); const selection = window!.getSelection(); selection?.removeAllRanges(); selection?.addRange(range); } - }, [disabled, focusedElement, openCalendar, refs, window]); + }, [disabled, focusedElement, _onCalendarOpen, refs, window]); const clear = React.useCallback(() => { onChange?.(undefined); @@ -190,8 +207,8 @@ export function useDateInput<T extends HTMLElement, D>({ rootRef, calendarRef, open, - openCalendar, - closeCalendar, + openCalendar: _onCalendarOpen, + closeCalendar: _onCalendarClose, internalValue, focusedElement, setFocusedElement, diff --git a/packages/vkui/src/hooks/useFocusTrap.ts b/packages/vkui/src/hooks/useFocusTrap.ts new file mode 100644 index 0000000000..0f3422ba77 --- /dev/null +++ b/packages/vkui/src/hooks/useFocusTrap.ts @@ -0,0 +1,247 @@ +import { type RefObject, useCallback, useRef, useState } from 'react'; +import { arraysEquals } from '../helpers/array'; +import { FOCUSABLE_ELEMENTS_LIST, Keys, pressedKey } from '../lib/accessibility'; +import { + contains, + getActiveElementByAnotherElement, + getWindow, + isHTMLElement, + useDOM, +} from '../lib/dom'; +import { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect'; +import { useMutationObserver } from './useMutationObserver'; + +const FOCUSABLE_ELEMENTS: string = FOCUSABLE_ELEMENTS_LIST.join(); + +export type UseFocusTrapProps = { + /** + * @default true + */ + mount?: boolean; + /** + * Форсированное отключение захвата фокуса + * + * @default false + */ + disabled?: boolean; + /** + * @default true + */ + autoFocus?: boolean | 'root'; + /** + * @default true + */ + restoreFocus?: boolean | (() => boolean); + /** + * @default 0 + */ + timeout?: number; + /** + * Вызывается при нажатии на кнопку `Escape`. + */ + onClose?: VoidFunction; +}; + +/** + * @private + */ +export const useFocusTrap = ( + ref: RefObject<HTMLElement>, + { + mount = true, + disabled = false, + autoFocus = true, + restoreFocus = true, + timeout = 0, + onClose, + }: UseFocusTrapProps, +) => { + const { document } = useDOM(); + + const focusableNodesRef = useRef<HTMLElement[]>([]); + + const [restoreFocusTo, setRestoreFocusTo] = useState<Element | null>(null); + + const focusNodeByIndex = (nodeIndex: number) => { + const element = focusableNodesRef.current[nodeIndex]; + + if (element) { + element.focus({ + preventScroll: true, + }); + } + }; + + const recalculateFocusableNodesRef = (parentNode: HTMLElement) => { + // eslint-disable-next-line no-restricted-properties + const newFocusableElements = parentNode.querySelectorAll<HTMLElement>(FOCUSABLE_ELEMENTS); + + const nodes: HTMLElement[] = []; + newFocusableElements.forEach((focusableEl) => { + const { display, visibility } = getComputedStyle(focusableEl); + if (display !== 'none' && visibility !== 'hidden') { + nodes.push(focusableEl); + } + }); + if (nodes.length === 0) { + // Чтобы фокус был хотя бы на родителе + nodes.push(parentNode); + } + focusableNodesRef.current = nodes; + }; + + const onMutateParentHandler = (parentNode: HTMLElement) => { + const oldFocusableNodes = [...focusableNodesRef.current]; + + recalculateFocusableNodesRef(parentNode); + + if (!autoFocus || arraysEquals(oldFocusableNodes, focusableNodesRef.current)) { + return; + } + + if (document) { + const activeElement = document.activeElement as HTMLElement; + const currentElementIndex = Math.max( + document.activeElement ? focusableNodesRef.current.indexOf(activeElement) : -1, + 0, + ); + focusNodeByIndex(currentElementIndex); + } + }; + + useMutationObserver(ref, () => ref.current && onMutateParentHandler(ref.current)); + + useIsomorphicLayoutEffect(() => { + ref.current && recalculateFocusableNodesRef(ref.current); + }, [ref]); + + useIsomorphicLayoutEffect( + function tryToAutoFocusToFirstNode() { + if (!ref.current || !autoFocus || disabled) { + return; + } + + const autoFocusToNode = () => { + if (!ref.current || !focusableNodesRef.current.length) { + return; + } + const activeElement = getActiveElementByAnotherElement(ref.current); + if (!contains(ref.current, activeElement)) { + if (autoFocus === 'root') { + ref.current?.focus(); + } else { + focusableNodesRef.current[0].focus(); + } + } + }; + const timeoutId = setTimeout(autoFocusToNode, timeout); + return () => { + clearTimeout(timeoutId); + }; + }, + [autoFocus, timeout, disabled], + ); + + const restoreFocusImpl = useCallback(() => { + const shouldRestoreFocus = typeof restoreFocus === 'function' ? restoreFocus() : restoreFocus; + + if (!restoreFocusTo || !isHTMLElement(restoreFocusTo) || !shouldRestoreFocus) { + return; + } + + setTimeout(() => { + if (restoreFocusTo) { + restoreFocusTo.focus(); + setRestoreFocusTo(null); + } + }, timeout); + }, [restoreFocus, restoreFocusTo, timeout]); + + useIsomorphicLayoutEffect( + function calculateRestoreFocusTo() { + if (!ref.current || !restoreFocus || !mount) { + setRestoreFocusTo(null); + return; + } + setRestoreFocusTo(getActiveElementByAnotherElement(ref.current)); + }, + [ref, mount, restoreFocus], + ); + + useIsomorphicLayoutEffect( + function tryToRestoreFocusOnUnmount() { + return () => restoreFocusImpl(); + }, + [restoreFocusImpl], + ); + + useIsomorphicLayoutEffect( + function tryToRestoreFocusWhenFakeUnmount() { + if (!mount) { + restoreFocusImpl(); + } + }, + [mount, restoreFocusImpl], + ); + + useIsomorphicLayoutEffect( + function initializeFocusTrap() { + if (!ref.current) { + return; + } + + const onDocumentKeydown = (event: KeyboardEvent) => { + if (disabled) { + return; + } + + const pressedKeyResult = pressedKey(event); + + switch (pressedKeyResult) { + case Keys.TAB: { + if (!focusableNodesRef.current.length) { + return false; + } + + const lastIdx = focusableNodesRef.current.length - 1; + const targetIdx = focusableNodesRef.current.findIndex((node) => node === event.target); + + const shouldFocusFirstNode = + targetIdx === -1 || (targetIdx === lastIdx && !event.shiftKey); + + if (shouldFocusFirstNode || (targetIdx === 0 && event.shiftKey)) { + event.preventDefault(); + + const node = focusableNodesRef.current[shouldFocusFirstNode ? 0 : lastIdx]; + + if (node !== getActiveElementByAnotherElement(node)) { + node.focus(); + } + + return false; + } + + break; + } + case Keys.ESCAPE: { + if (onClose) { + event.preventDefault(); + onClose(); + } + } + } + + return true; + }; + + const doc = getWindow(ref.current).document; + doc.addEventListener('keydown', onDocumentKeydown, { + capture: true, + }); + return () => { + doc.removeEventListener('keydown', onDocumentKeydown, true); + }; + }, + [onClose, ref, disabled], + ); +}; diff --git a/shared.js b/shared.js index 10ade59b1f..965df7923b 100644 --- a/shared.js +++ b/shared.js @@ -17,5 +17,5 @@ module.exports = { './node_modules/@vkontakte/vkui-tokens/themes/vkComDark/cssVars/declarations/onlyVariablesLocal.css', ], - generateScopedName: 'vkui[folder]__[local]', + generateScopedName: '[folder]__[local]--[hash:base64:5]', }; diff --git a/tools/storybook-addon-cartesian/package.json b/tools/storybook-addon-cartesian/package.json index b96144f197..4275869dfe 100644 --- a/tools/storybook-addon-cartesian/package.json +++ b/tools/storybook-addon-cartesian/package.json @@ -10,27 +10,27 @@ }, "dependencies": { "@babel/core": "^7.26.0", - "@storybook/addon-a11y": "8.3.6", - "@storybook/addon-actions": "8.3.6", - "@storybook/addon-essentials": "8.3.6", - "@storybook/addon-interactions": "8.3.6", - "@storybook/addon-links": "8.3.6", + "@storybook/addon-a11y": "8.4.2", + "@storybook/addon-actions": "8.4.2", + "@storybook/addon-essentials": "8.4.2", + "@storybook/addon-interactions": "8.4.2", + "@storybook/addon-links": "8.4.2", "@storybook/addon-webpack5-compiler-swc": "1.0.5", - "@storybook/blocks": "8.3.6", - "@storybook/components": "8.3.6", - "@storybook/core-events": "^8.3.6", - "@storybook/docs-tools": "^8.3.6", - "@storybook/manager-api": "8.3.6", - "@storybook/preview-api": "8.3.6", - "@storybook/react": "8.3.6", - "@storybook/react-webpack5": "8.3.6", - "@storybook/test": "^8.3.6", - "@storybook/theming": "8.3.6", - "@storybook/types": "8.3.6", + "@storybook/blocks": "8.4.2", + "@storybook/components": "8.4.2", + "@storybook/core-events": "^8.4.2", + "@storybook/docs-tools": "^8.4.2", + "@storybook/manager-api": "8.4.2", + "@storybook/preview-api": "8.4.2", + "@storybook/react": "8.4.2", + "@storybook/react-webpack5": "8.4.2", + "@storybook/test": "^8.4.2", + "@storybook/theming": "8.4.2", + "@storybook/types": "8.4.2", "@swc/core": "*", "react": "*", "react-dom": "*", - "storybook": "8.3.6", + "storybook": "8.4.2", "typescript": "*" } } diff --git a/yarn.lock b/yarn.lock index ce3c0b8dbe..15b84cabf1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -665,13 +665,6 @@ __metadata: languageName: node linkType: hard -"@base2/pretty-print-object@npm:1.0.1": - version: 1.0.1 - resolution: "@base2/pretty-print-object@npm:1.0.1" - checksum: 10/c1b78a521ac712baa076589f3bc81318d07c34a5747e9177b6af37043592252587d98f9b7b59ec174968c6bea31a99fe4d7884121173a449b75fe602b7eb2839 - languageName: node - linkType: hard - "@bcoe/v8-coverage@npm:^0.2.3": version: 0.2.3 resolution: "@bcoe/v8-coverage@npm:0.2.3" @@ -695,17 +688,17 @@ __metadata: languageName: node linkType: hard -"@csstools/cascade-layer-name-parser@npm:^2.0.3": - version: 2.0.3 - resolution: "@csstools/cascade-layer-name-parser@npm:2.0.3" +"@csstools/cascade-layer-name-parser@npm:^2.0.4": + version: 2.0.4 + resolution: "@csstools/cascade-layer-name-parser@npm:2.0.4" peerDependencies: - "@csstools/css-parser-algorithms": ^3.0.3 - "@csstools/css-tokenizer": ^3.0.2 - checksum: 10/c9a3f36094f15d5e8d68c7350d0d41cccb5a620177981c0fa8b42ad0d2bcd3c06bb053a0c736857b087af93d28ce9361ae844c2ea63a4a01c695d3113d6cc759 + "@csstools/css-parser-algorithms": ^3.0.4 + "@csstools/css-tokenizer": ^3.0.3 + checksum: 10/8c1d92f7840ecb402bce9b5770c9eb8ae000f42cb317a069cb10172a4e63d4dcbe1961f8bcf35f5106f8d162066f2bac3923e151d7cb5380b10fc265a62db5ea languageName: node linkType: hard -"@csstools/css-parser-algorithms@npm:^3.0.1, @csstools/css-parser-algorithms@npm:^3.0.3": +"@csstools/css-parser-algorithms@npm:^3.0.1": version: 3.0.3 resolution: "@csstools/css-parser-algorithms@npm:3.0.3" peerDependencies: @@ -714,13 +707,29 @@ __metadata: languageName: node linkType: hard -"@csstools/css-tokenizer@npm:^3.0.1, @csstools/css-tokenizer@npm:^3.0.2": +"@csstools/css-parser-algorithms@npm:^3.0.4": + version: 3.0.4 + resolution: "@csstools/css-parser-algorithms@npm:3.0.4" + peerDependencies: + "@csstools/css-tokenizer": ^3.0.3 + checksum: 10/dfb6926218d9f8ba25d8b43ea46c03863c819481f8c55e4de4925780eaab9e6bcd6bead1d56b4ef82d09fcd9d69a7db2750fa9db08eece9470fd499dc76d0edb + languageName: node + linkType: hard + +"@csstools/css-tokenizer@npm:^3.0.1": version: 3.0.2 resolution: "@csstools/css-tokenizer@npm:3.0.2" checksum: 10/6453982ede998dbd8c222cdc5efa11375c1e7c9ad66c55b077ec23f2ecec1080aa0631818cdea191c36f0b8e1fd607408d13664a898299c2a594d93ef6fa62e9 languageName: node linkType: hard +"@csstools/css-tokenizer@npm:^3.0.3": + version: 3.0.3 + resolution: "@csstools/css-tokenizer@npm:3.0.3" + checksum: 10/6baa3160e426e1f177b8f10d54ec7a4a596090f65a05f16d7e9e4da049962a404eabc5f885f4867093702c259cd4080ac92a438326e22dea015201b3e71f5bbb + languageName: node + linkType: hard + "@csstools/media-query-list-parser@npm:^3.0.1": version: 3.0.1 resolution: "@csstools/media-query-list-parser@npm:3.0.1" @@ -731,13 +740,13 @@ __metadata: languageName: node linkType: hard -"@csstools/media-query-list-parser@npm:^4.0.1": - version: 4.0.1 - resolution: "@csstools/media-query-list-parser@npm:4.0.1" +"@csstools/media-query-list-parser@npm:^4.0.2": + version: 4.0.2 + resolution: "@csstools/media-query-list-parser@npm:4.0.2" peerDependencies: - "@csstools/css-parser-algorithms": ^3.0.3 - "@csstools/css-tokenizer": ^3.0.2 - checksum: 10/95b9e27a5ead3ee91e75859492fe3e68571bc7776e118739192126ef5278c5a59d4c264dfdf221bd694673d07a2b2878b766c70dd6d99c7b714aa6052b8b90f9 + "@csstools/css-parser-algorithms": ^3.0.4 + "@csstools/css-tokenizer": ^3.0.3 + checksum: 10/8aae6337d21255d34e4f6dc6df213566e35bb769fe131006ea4200b643773f3213f8ed0ab011cd85dbe3426766c408d0fe1d04d18e821add9ae7f29cda0a8b26 languageName: node linkType: hard @@ -780,9 +789,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/aix-ppc64@npm:0.23.1": - version: 0.23.1 - resolution: "@esbuild/aix-ppc64@npm:0.23.1" +"@esbuild/aix-ppc64@npm:0.24.0": + version: 0.24.0 + resolution: "@esbuild/aix-ppc64@npm:0.24.0" conditions: os=aix & cpu=ppc64 languageName: node linkType: hard @@ -794,9 +803,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/android-arm64@npm:0.23.1": - version: 0.23.1 - resolution: "@esbuild/android-arm64@npm:0.23.1" +"@esbuild/android-arm64@npm:0.24.0": + version: 0.24.0 + resolution: "@esbuild/android-arm64@npm:0.24.0" conditions: os=android & cpu=arm64 languageName: node linkType: hard @@ -808,9 +817,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/android-arm@npm:0.23.1": - version: 0.23.1 - resolution: "@esbuild/android-arm@npm:0.23.1" +"@esbuild/android-arm@npm:0.24.0": + version: 0.24.0 + resolution: "@esbuild/android-arm@npm:0.24.0" conditions: os=android & cpu=arm languageName: node linkType: hard @@ -822,9 +831,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/android-x64@npm:0.23.1": - version: 0.23.1 - resolution: "@esbuild/android-x64@npm:0.23.1" +"@esbuild/android-x64@npm:0.24.0": + version: 0.24.0 + resolution: "@esbuild/android-x64@npm:0.24.0" conditions: os=android & cpu=x64 languageName: node linkType: hard @@ -836,9 +845,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/darwin-arm64@npm:0.23.1": - version: 0.23.1 - resolution: "@esbuild/darwin-arm64@npm:0.23.1" +"@esbuild/darwin-arm64@npm:0.24.0": + version: 0.24.0 + resolution: "@esbuild/darwin-arm64@npm:0.24.0" conditions: os=darwin & cpu=arm64 languageName: node linkType: hard @@ -850,9 +859,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/darwin-x64@npm:0.23.1": - version: 0.23.1 - resolution: "@esbuild/darwin-x64@npm:0.23.1" +"@esbuild/darwin-x64@npm:0.24.0": + version: 0.24.0 + resolution: "@esbuild/darwin-x64@npm:0.24.0" conditions: os=darwin & cpu=x64 languageName: node linkType: hard @@ -864,9 +873,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/freebsd-arm64@npm:0.23.1": - version: 0.23.1 - resolution: "@esbuild/freebsd-arm64@npm:0.23.1" +"@esbuild/freebsd-arm64@npm:0.24.0": + version: 0.24.0 + resolution: "@esbuild/freebsd-arm64@npm:0.24.0" conditions: os=freebsd & cpu=arm64 languageName: node linkType: hard @@ -878,9 +887,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/freebsd-x64@npm:0.23.1": - version: 0.23.1 - resolution: "@esbuild/freebsd-x64@npm:0.23.1" +"@esbuild/freebsd-x64@npm:0.24.0": + version: 0.24.0 + resolution: "@esbuild/freebsd-x64@npm:0.24.0" conditions: os=freebsd & cpu=x64 languageName: node linkType: hard @@ -892,9 +901,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/linux-arm64@npm:0.23.1": - version: 0.23.1 - resolution: "@esbuild/linux-arm64@npm:0.23.1" +"@esbuild/linux-arm64@npm:0.24.0": + version: 0.24.0 + resolution: "@esbuild/linux-arm64@npm:0.24.0" conditions: os=linux & cpu=arm64 languageName: node linkType: hard @@ -906,9 +915,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/linux-arm@npm:0.23.1": - version: 0.23.1 - resolution: "@esbuild/linux-arm@npm:0.23.1" +"@esbuild/linux-arm@npm:0.24.0": + version: 0.24.0 + resolution: "@esbuild/linux-arm@npm:0.24.0" conditions: os=linux & cpu=arm languageName: node linkType: hard @@ -920,9 +929,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/linux-ia32@npm:0.23.1": - version: 0.23.1 - resolution: "@esbuild/linux-ia32@npm:0.23.1" +"@esbuild/linux-ia32@npm:0.24.0": + version: 0.24.0 + resolution: "@esbuild/linux-ia32@npm:0.24.0" conditions: os=linux & cpu=ia32 languageName: node linkType: hard @@ -934,9 +943,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/linux-loong64@npm:0.23.1": - version: 0.23.1 - resolution: "@esbuild/linux-loong64@npm:0.23.1" +"@esbuild/linux-loong64@npm:0.24.0": + version: 0.24.0 + resolution: "@esbuild/linux-loong64@npm:0.24.0" conditions: os=linux & cpu=loong64 languageName: node linkType: hard @@ -948,9 +957,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/linux-mips64el@npm:0.23.1": - version: 0.23.1 - resolution: "@esbuild/linux-mips64el@npm:0.23.1" +"@esbuild/linux-mips64el@npm:0.24.0": + version: 0.24.0 + resolution: "@esbuild/linux-mips64el@npm:0.24.0" conditions: os=linux & cpu=mips64el languageName: node linkType: hard @@ -962,9 +971,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/linux-ppc64@npm:0.23.1": - version: 0.23.1 - resolution: "@esbuild/linux-ppc64@npm:0.23.1" +"@esbuild/linux-ppc64@npm:0.24.0": + version: 0.24.0 + resolution: "@esbuild/linux-ppc64@npm:0.24.0" conditions: os=linux & cpu=ppc64 languageName: node linkType: hard @@ -976,9 +985,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/linux-riscv64@npm:0.23.1": - version: 0.23.1 - resolution: "@esbuild/linux-riscv64@npm:0.23.1" +"@esbuild/linux-riscv64@npm:0.24.0": + version: 0.24.0 + resolution: "@esbuild/linux-riscv64@npm:0.24.0" conditions: os=linux & cpu=riscv64 languageName: node linkType: hard @@ -990,9 +999,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/linux-s390x@npm:0.23.1": - version: 0.23.1 - resolution: "@esbuild/linux-s390x@npm:0.23.1" +"@esbuild/linux-s390x@npm:0.24.0": + version: 0.24.0 + resolution: "@esbuild/linux-s390x@npm:0.24.0" conditions: os=linux & cpu=s390x languageName: node linkType: hard @@ -1004,9 +1013,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/linux-x64@npm:0.23.1": - version: 0.23.1 - resolution: "@esbuild/linux-x64@npm:0.23.1" +"@esbuild/linux-x64@npm:0.24.0": + version: 0.24.0 + resolution: "@esbuild/linux-x64@npm:0.24.0" conditions: os=linux & cpu=x64 languageName: node linkType: hard @@ -1018,16 +1027,16 @@ __metadata: languageName: node linkType: hard -"@esbuild/netbsd-x64@npm:0.23.1": - version: 0.23.1 - resolution: "@esbuild/netbsd-x64@npm:0.23.1" +"@esbuild/netbsd-x64@npm:0.24.0": + version: 0.24.0 + resolution: "@esbuild/netbsd-x64@npm:0.24.0" conditions: os=netbsd & cpu=x64 languageName: node linkType: hard -"@esbuild/openbsd-arm64@npm:0.23.1": - version: 0.23.1 - resolution: "@esbuild/openbsd-arm64@npm:0.23.1" +"@esbuild/openbsd-arm64@npm:0.24.0": + version: 0.24.0 + resolution: "@esbuild/openbsd-arm64@npm:0.24.0" conditions: os=openbsd & cpu=arm64 languageName: node linkType: hard @@ -1039,9 +1048,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/openbsd-x64@npm:0.23.1": - version: 0.23.1 - resolution: "@esbuild/openbsd-x64@npm:0.23.1" +"@esbuild/openbsd-x64@npm:0.24.0": + version: 0.24.0 + resolution: "@esbuild/openbsd-x64@npm:0.24.0" conditions: os=openbsd & cpu=x64 languageName: node linkType: hard @@ -1053,9 +1062,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/sunos-x64@npm:0.23.1": - version: 0.23.1 - resolution: "@esbuild/sunos-x64@npm:0.23.1" +"@esbuild/sunos-x64@npm:0.24.0": + version: 0.24.0 + resolution: "@esbuild/sunos-x64@npm:0.24.0" conditions: os=sunos & cpu=x64 languageName: node linkType: hard @@ -1067,9 +1076,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/win32-arm64@npm:0.23.1": - version: 0.23.1 - resolution: "@esbuild/win32-arm64@npm:0.23.1" +"@esbuild/win32-arm64@npm:0.24.0": + version: 0.24.0 + resolution: "@esbuild/win32-arm64@npm:0.24.0" conditions: os=win32 & cpu=arm64 languageName: node linkType: hard @@ -1081,9 +1090,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/win32-ia32@npm:0.23.1": - version: 0.23.1 - resolution: "@esbuild/win32-ia32@npm:0.23.1" +"@esbuild/win32-ia32@npm:0.24.0": + version: 0.24.0 + resolution: "@esbuild/win32-ia32@npm:0.24.0" conditions: os=win32 & cpu=ia32 languageName: node linkType: hard @@ -1095,9 +1104,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/win32-x64@npm:0.23.1": - version: 0.23.1 - resolution: "@esbuild/win32-x64@npm:0.23.1" +"@esbuild/win32-x64@npm:0.24.0": + version: 0.24.0 + resolution: "@esbuild/win32-x64@npm:0.24.0" conditions: os=win32 & cpu=x64 languageName: node linkType: hard @@ -1805,27 +1814,27 @@ __metadata: resolution: "@project-tools/storybook-addon-cartesian@workspace:tools/storybook-addon-cartesian" dependencies: "@babel/core": "npm:^7.26.0" - "@storybook/addon-a11y": "npm:8.3.6" - "@storybook/addon-actions": "npm:8.3.6" - "@storybook/addon-essentials": "npm:8.3.6" - "@storybook/addon-interactions": "npm:8.3.6" - "@storybook/addon-links": "npm:8.3.6" + "@storybook/addon-a11y": "npm:8.4.2" + "@storybook/addon-actions": "npm:8.4.2" + "@storybook/addon-essentials": "npm:8.4.2" + "@storybook/addon-interactions": "npm:8.4.2" + "@storybook/addon-links": "npm:8.4.2" "@storybook/addon-webpack5-compiler-swc": "npm:1.0.5" - "@storybook/blocks": "npm:8.3.6" - "@storybook/components": "npm:8.3.6" - "@storybook/core-events": "npm:^8.3.6" - "@storybook/docs-tools": "npm:^8.3.6" - "@storybook/manager-api": "npm:8.3.6" - "@storybook/preview-api": "npm:8.3.6" - "@storybook/react": "npm:8.3.6" - "@storybook/react-webpack5": "npm:8.3.6" - "@storybook/test": "npm:^8.3.6" - "@storybook/theming": "npm:8.3.6" - "@storybook/types": "npm:8.3.6" + "@storybook/blocks": "npm:8.4.2" + "@storybook/components": "npm:8.4.2" + "@storybook/core-events": "npm:^8.4.2" + "@storybook/docs-tools": "npm:^8.4.2" + "@storybook/manager-api": "npm:8.4.2" + "@storybook/preview-api": "npm:8.4.2" + "@storybook/react": "npm:8.4.2" + "@storybook/react-webpack5": "npm:8.4.2" + "@storybook/test": "npm:^8.4.2" + "@storybook/theming": "npm:8.4.2" + "@storybook/types": "npm:8.4.2" "@swc/core": "npm:*" react: "npm:*" react-dom: "npm:*" - storybook: "npm:8.3.6" + storybook: "npm:8.4.2" typescript: "npm:*" languageName: unknown linkType: soft @@ -2191,21 +2200,21 @@ __metadata: languageName: node linkType: hard -"@storybook/addon-a11y@npm:8.3.6": - version: 8.3.6 - resolution: "@storybook/addon-a11y@npm:8.3.6" +"@storybook/addon-a11y@npm:8.4.2": + version: 8.4.2 + resolution: "@storybook/addon-a11y@npm:8.4.2" dependencies: - "@storybook/addon-highlight": "npm:8.3.6" + "@storybook/addon-highlight": "npm:8.4.2" axe-core: "npm:^4.2.0" peerDependencies: - storybook: ^8.3.6 - checksum: 10/ea7dfc57319e69824297291f87b32f1389c27554b69016178a9224db9cb0e055b0873d5a21ca4b944e947309575ad891cc3044e93d91633ce472ccb16678b48e + storybook: ^8.4.2 + checksum: 10/df093c431e579cec6f353f300ccfc9ae33535508b9b4340a0f5a0bbf2449dd1a4483b5214b3904b71e996ebde0c8e9b73e17d5fd692ced49b285b5e749a3f61a languageName: node linkType: hard -"@storybook/addon-actions@npm:8.3.6": - version: 8.3.6 - resolution: "@storybook/addon-actions@npm:8.3.6" +"@storybook/addon-actions@npm:8.4.2": + version: 8.4.2 + resolution: "@storybook/addon-actions@npm:8.4.2" dependencies: "@storybook/global": "npm:^5.0.0" "@types/uuid": "npm:^9.0.1" @@ -2213,164 +2222,158 @@ __metadata: polished: "npm:^4.2.2" uuid: "npm:^9.0.0" peerDependencies: - storybook: ^8.3.6 - checksum: 10/94b5832dfab5494570ee06b39ccf4d0ae119332c8db479b0ef73aa9e06c853808aca642e14aca26c713ddfbaccccfcc56b8d38429d4d54d9d96fb4223474e406 + storybook: ^8.4.2 + checksum: 10/c00b213e42ea085a19162448b5c35d2439be7aa18425fc4c535e50b2cb187c3c93d6603e7c7727258e1b8abdb04d20d60eacf3bd0e2bec86a1a5df2c043bf3d7 languageName: node linkType: hard -"@storybook/addon-backgrounds@npm:8.3.6": - version: 8.3.6 - resolution: "@storybook/addon-backgrounds@npm:8.3.6" +"@storybook/addon-backgrounds@npm:8.4.2": + version: 8.4.2 + resolution: "@storybook/addon-backgrounds@npm:8.4.2" dependencies: "@storybook/global": "npm:^5.0.0" memoizerific: "npm:^1.11.3" ts-dedent: "npm:^2.0.0" peerDependencies: - storybook: ^8.3.6 - checksum: 10/a8eaf489d7a6accbc838e7949b17540a0377526a45ca1babba44128c3a6d5a7e691b39ce41885ac2e191662bb7db9c912b833832a035dffe8a251ded0431a792 + storybook: ^8.4.2 + checksum: 10/56f2c8bcd5c32fd071baf14764b1f78dacfc25d12549686451043c8864c3e8ef56dc064ff91308dc4f37c842feb7a2993f0e29185e19194b6063bbadaafbd044 languageName: node linkType: hard -"@storybook/addon-controls@npm:8.3.6": - version: 8.3.6 - resolution: "@storybook/addon-controls@npm:8.3.6" +"@storybook/addon-controls@npm:8.4.2": + version: 8.4.2 + resolution: "@storybook/addon-controls@npm:8.4.2" dependencies: "@storybook/global": "npm:^5.0.0" dequal: "npm:^2.0.2" - lodash: "npm:^4.17.21" ts-dedent: "npm:^2.0.0" peerDependencies: - storybook: ^8.3.6 - checksum: 10/0ea4df71f2a12252c559d8b9beeefad17358dea5cc675e03a76a9effba9e48b3fa42d2f194c62e9accd8bb86bbf64078bd9d03f134d5bfa903adfdacbcd638ea + storybook: ^8.4.2 + checksum: 10/ee23a051be689ac6d7b4d4a5e2cc5429dadfe556a4daa9d347f55bef0a6110dce4a5d68f7afe18c04817d4960f048b041eeb6cc9555031f620d78a52a19e4229 languageName: node linkType: hard -"@storybook/addon-docs@npm:8.3.6": - version: 8.3.6 - resolution: "@storybook/addon-docs@npm:8.3.6" +"@storybook/addon-docs@npm:8.4.2": + version: 8.4.2 + resolution: "@storybook/addon-docs@npm:8.4.2" dependencies: "@mdx-js/react": "npm:^3.0.0" - "@storybook/blocks": "npm:8.3.6" - "@storybook/csf-plugin": "npm:8.3.6" - "@storybook/global": "npm:^5.0.0" - "@storybook/react-dom-shim": "npm:8.3.6" - "@types/react": "npm:^16.8.0 || ^17.0.0 || ^18.0.0" - fs-extra: "npm:^11.1.0" + "@storybook/blocks": "npm:8.4.2" + "@storybook/csf-plugin": "npm:8.4.2" + "@storybook/react-dom-shim": "npm:8.4.2" react: "npm:^16.8.0 || ^17.0.0 || ^18.0.0" react-dom: "npm:^16.8.0 || ^17.0.0 || ^18.0.0" - rehype-external-links: "npm:^3.0.0" - rehype-slug: "npm:^6.0.0" ts-dedent: "npm:^2.0.0" peerDependencies: - storybook: ^8.3.6 - checksum: 10/8c8ae44903ddd8e100c0da3952d7c83dace3b1fd7a87531263b487dca378122d2273a57afd8b18006ddf3ae1c3473f5a197c44742843e92dd724734b9c5adeb3 + storybook: ^8.4.2 + checksum: 10/06510b9894ac6b4d9324dec037e22b1fd882be8962fce4213a10746a2d23660a231373d70aa56f8763a5b65f2eb1a3e7e64f3228a687e36818768665e5f8e01e languageName: node linkType: hard -"@storybook/addon-essentials@npm:8.3.6": - version: 8.3.6 - resolution: "@storybook/addon-essentials@npm:8.3.6" - dependencies: - "@storybook/addon-actions": "npm:8.3.6" - "@storybook/addon-backgrounds": "npm:8.3.6" - "@storybook/addon-controls": "npm:8.3.6" - "@storybook/addon-docs": "npm:8.3.6" - "@storybook/addon-highlight": "npm:8.3.6" - "@storybook/addon-measure": "npm:8.3.6" - "@storybook/addon-outline": "npm:8.3.6" - "@storybook/addon-toolbars": "npm:8.3.6" - "@storybook/addon-viewport": "npm:8.3.6" +"@storybook/addon-essentials@npm:8.4.2": + version: 8.4.2 + resolution: "@storybook/addon-essentials@npm:8.4.2" + dependencies: + "@storybook/addon-actions": "npm:8.4.2" + "@storybook/addon-backgrounds": "npm:8.4.2" + "@storybook/addon-controls": "npm:8.4.2" + "@storybook/addon-docs": "npm:8.4.2" + "@storybook/addon-highlight": "npm:8.4.2" + "@storybook/addon-measure": "npm:8.4.2" + "@storybook/addon-outline": "npm:8.4.2" + "@storybook/addon-toolbars": "npm:8.4.2" + "@storybook/addon-viewport": "npm:8.4.2" ts-dedent: "npm:^2.0.0" peerDependencies: - storybook: ^8.3.6 - checksum: 10/4b15ece66548adfefe41bcfed67aa60526253a47b36245fa63b523986e106f7399b6a1720f59a260ae89a7629b4ebefafca3a19853c5ccecd0b2f259f8dd0c3a + storybook: ^8.4.2 + checksum: 10/951da2192a63d985e9af2e1e803bbe8bd6d64a87f50644034a55eb8bdc2ad0844e87836437d5c494eff3e94c8eae894d5f28bbef4b9cb99ef7e5fad573e1980d languageName: node linkType: hard -"@storybook/addon-highlight@npm:8.3.6": - version: 8.3.6 - resolution: "@storybook/addon-highlight@npm:8.3.6" +"@storybook/addon-highlight@npm:8.4.2": + version: 8.4.2 + resolution: "@storybook/addon-highlight@npm:8.4.2" dependencies: "@storybook/global": "npm:^5.0.0" peerDependencies: - storybook: ^8.3.6 - checksum: 10/948f295e0196d7a4669095859286dbfce463be220d1d8adcca578ba40c888f1879816ba3343db1a286cfe52bc79ae554314def76d6ec11e12493192c13eea2e5 + storybook: ^8.4.2 + checksum: 10/81bdd9d758aa2b2faaa19ae6e27b6367e8522db3e8f6f2c72a452079ab35abf220472ff7ee6f7ed105dcfa7c23a2300df4753f8b5b5850a706a4c60492567735 languageName: node linkType: hard -"@storybook/addon-interactions@npm:8.3.6": - version: 8.3.6 - resolution: "@storybook/addon-interactions@npm:8.3.6" +"@storybook/addon-interactions@npm:8.4.2": + version: 8.4.2 + resolution: "@storybook/addon-interactions@npm:8.4.2" dependencies: "@storybook/global": "npm:^5.0.0" - "@storybook/instrumenter": "npm:8.3.6" - "@storybook/test": "npm:8.3.6" + "@storybook/instrumenter": "npm:8.4.2" + "@storybook/test": "npm:8.4.2" polished: "npm:^4.2.2" ts-dedent: "npm:^2.2.0" peerDependencies: - storybook: ^8.3.6 - checksum: 10/ddf4b0e534cc2b03001a76410475abf45c46f2900f016e682569d294640ffcda2ac0c8df3252225a48cc9641048936e1e62d26ffd7da2fabe650b774cba44992 + storybook: ^8.4.2 + checksum: 10/a0ac4c473d5ce8a0cc2c56897faf3845ab3fa51c0d6ff217d009de9850033549ffe9653d7821284c7e1947efb9a38beb34bd4cf4788d009f3edc027a6f5b37eb languageName: node linkType: hard -"@storybook/addon-links@npm:8.3.6": - version: 8.3.6 - resolution: "@storybook/addon-links@npm:8.3.6" +"@storybook/addon-links@npm:8.4.2": + version: 8.4.2 + resolution: "@storybook/addon-links@npm:8.4.2" dependencies: "@storybook/csf": "npm:^0.1.11" "@storybook/global": "npm:^5.0.0" ts-dedent: "npm:^2.0.0" peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta - storybook: ^8.3.6 + storybook: ^8.4.2 peerDependenciesMeta: react: optional: true - checksum: 10/1c6a1483098e5f1292824cb038d7a0efae78a8aee86e940092200b646501a6e4713a24e422fd3dd25781f17e08276dc5156cf3f4838b92a029fff2b4f3eb4e84 + checksum: 10/f23a29ffe9c7d8eb16032c4abba6b325dfea010840f9f3aa8cf27ea6699631a64aa065a796bd685bd35c39dcfdee9a3db51a38bc0bed452ce2c5818b523820b5 languageName: node linkType: hard -"@storybook/addon-measure@npm:8.3.6": - version: 8.3.6 - resolution: "@storybook/addon-measure@npm:8.3.6" +"@storybook/addon-measure@npm:8.4.2": + version: 8.4.2 + resolution: "@storybook/addon-measure@npm:8.4.2" dependencies: "@storybook/global": "npm:^5.0.0" tiny-invariant: "npm:^1.3.1" peerDependencies: - storybook: ^8.3.6 - checksum: 10/cec0d3517ccdbe61e09906154929381cdd9ded1ac50391bf5530144e4ef40e8f46f1c0f8cadf41c382a98209df1c9c9c156c0b1acf3038526f24a92cc9082260 + storybook: ^8.4.2 + checksum: 10/48a2f3eccee2504777ac9c0fe267d3f91785674bb9a106c2610fa57912f65b2c2d32de76d3c62fe88a9d95985099283f0e55ac17b7593dece6ab3fb1657085c1 languageName: node linkType: hard -"@storybook/addon-outline@npm:8.3.6": - version: 8.3.6 - resolution: "@storybook/addon-outline@npm:8.3.6" +"@storybook/addon-outline@npm:8.4.2": + version: 8.4.2 + resolution: "@storybook/addon-outline@npm:8.4.2" dependencies: "@storybook/global": "npm:^5.0.0" ts-dedent: "npm:^2.0.0" peerDependencies: - storybook: ^8.3.6 - checksum: 10/8b63ca2a5a6c5cd30fc4359f05f911825ff54946508a458aa8803b46cbde8badf470ffd9521480eb0be52eb00c064ccb1181170dcd0b621db091f52b04177b40 + storybook: ^8.4.2 + checksum: 10/b43804fbbca21ee8790c82cd32559de551e14bd010507d9c6d8eac2afe0849372a44701d91d2c4baba524bef9519193ee9cf87b1e9cfaa4d868bcce82b7d57b3 languageName: node linkType: hard -"@storybook/addon-toolbars@npm:8.3.6": - version: 8.3.6 - resolution: "@storybook/addon-toolbars@npm:8.3.6" +"@storybook/addon-toolbars@npm:8.4.2": + version: 8.4.2 + resolution: "@storybook/addon-toolbars@npm:8.4.2" peerDependencies: - storybook: ^8.3.6 - checksum: 10/09ae00f53e92735735eee645b35fca80e3dce29d39a0821f675e0f0bf6aae1ffe94b6545eb132da4026a86a77b352b2709956f742b5906d8caccabc1f72f948a + storybook: ^8.4.2 + checksum: 10/294019d0081874ff15fc846768f3743e11278f6a1d211f413bfcdbc5ca9415a80ac478523cae51fcfe1c77277a32bad9745362c8a0a1bd053570e07df615af95 languageName: node linkType: hard -"@storybook/addon-viewport@npm:8.3.6": - version: 8.3.6 - resolution: "@storybook/addon-viewport@npm:8.3.6" +"@storybook/addon-viewport@npm:8.4.2": + version: 8.4.2 + resolution: "@storybook/addon-viewport@npm:8.4.2" dependencies: memoizerific: "npm:^1.11.3" peerDependencies: - storybook: ^8.3.6 - checksum: 10/b9e09004b742dabbd115cec74a75656b01aef44c3476508cdfbdee24efbcb50b90470e66bd6bd735e804139e36aa65fea4d96c8c8f92b08153e6dde764f55943 + storybook: ^8.4.2 + checksum: 10/7d2c0fa6ed73030cf718a306dd0c327006f54747801e13a7037416ca746ff92f3d341820744de08e651ed746e0f5bb50104a2c57b17b6f4de3ef0f8987861020 languageName: node linkType: hard @@ -2384,42 +2387,31 @@ __metadata: languageName: node linkType: hard -"@storybook/blocks@npm:8.3.6": - version: 8.3.6 - resolution: "@storybook/blocks@npm:8.3.6" +"@storybook/blocks@npm:8.4.2": + version: 8.4.2 + resolution: "@storybook/blocks@npm:8.4.2" dependencies: "@storybook/csf": "npm:^0.1.11" - "@storybook/global": "npm:^5.0.0" - "@storybook/icons": "npm:^1.2.10" - "@types/lodash": "npm:^4.14.167" - color-convert: "npm:^2.0.1" - dequal: "npm:^2.0.2" - lodash: "npm:^4.17.21" - markdown-to-jsx: "npm:^7.4.5" - memoizerific: "npm:^1.11.3" - polished: "npm:^4.2.2" - react-colorful: "npm:^5.1.2" - telejson: "npm:^7.2.0" + "@storybook/icons": "npm:^1.2.12" ts-dedent: "npm:^2.0.0" - util-deprecate: "npm:^1.0.2" peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta - storybook: ^8.3.6 + storybook: ^8.4.2 peerDependenciesMeta: react: optional: true react-dom: optional: true - checksum: 10/db3b4676602c52af32de06032ed15a7b7723138675be0f27d6ac0f806806dab58b8ba0d97a69ff33e01c169e47bccb6b2f25df3e8b472287c76ae9da40be5a6b + checksum: 10/88880e7c13752fe1323cd8eeb93005ab4493c4f024ef3119462dc160e57a985979756a64e0d6e9f374c0f510adcd0e7141d5b7f52bbe255e1c3fbf4ce0cbb896 languageName: node linkType: hard -"@storybook/builder-webpack5@npm:8.3.6": - version: 8.3.6 - resolution: "@storybook/builder-webpack5@npm:8.3.6" +"@storybook/builder-webpack5@npm:8.4.2": + version: 8.4.2 + resolution: "@storybook/builder-webpack5@npm:8.4.2" dependencies: - "@storybook/core-webpack": "npm:8.3.6" + "@storybook/core-webpack": "npm:8.4.2" "@types/node": "npm:^22.0.0" "@types/semver": "npm:^7.3.4" browser-assert: "npm:^1.2.1" @@ -2428,9 +2420,7 @@ __metadata: constants-browserify: "npm:^1.0.0" css-loader: "npm:^6.7.1" es-module-lexer: "npm:^1.5.0" - express: "npm:^4.19.2" fork-ts-checker-webpack-plugin: "npm:^8.0.0" - fs-extra: "npm:^11.1.0" html-webpack-plugin: "npm:^5.5.0" magic-string: "npm:^0.30.5" path-browserify: "npm:^1.0.1" @@ -2447,73 +2437,76 @@ __metadata: webpack-hot-middleware: "npm:^2.25.1" webpack-virtual-modules: "npm:^0.6.0" peerDependencies: - storybook: ^8.3.6 + storybook: ^8.4.2 peerDependenciesMeta: typescript: optional: true - checksum: 10/f1752dacf2efdf4291039601f9509fd516c1adcb4b06d4545bca202144f81baa6a04d8839ba5e0ff07f4307bc448104aa9965f251a5a409e126acd9e8e19b9db + checksum: 10/d67458e1337c8e403f6b4914d5f00d99d3dbd0ec2d1e3bdd7f2eb7a9f0c5acc4d78db45e30c6be1fea48b502d37bda46be41508ed258152f97e7008249c95aed languageName: node linkType: hard -"@storybook/components@npm:8.3.6, @storybook/components@npm:^8.3.6": - version: 8.3.6 - resolution: "@storybook/components@npm:8.3.6" +"@storybook/components@npm:8.4.2": + version: 8.4.2 + resolution: "@storybook/components@npm:8.4.2" peerDependencies: - storybook: ^8.3.6 - checksum: 10/778a114ddba6bd71ce18a8659c4c8b9b4cbcfa5665a68e3bae9467c492a218c2d95ded0825cc920984a6017f12ce811f48517812eb0de2183623cd06be677d7a + storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 + checksum: 10/52c7885763f3154215b8f9fda57fe4af62e5194722bca90f35769a74aee411bf552d96455d1c2101404e30b2b0a4ed2c57c21a365ecbf18124a252538e15e83e languageName: node linkType: hard -"@storybook/core-events@npm:^8.3.6": - version: 8.3.6 - resolution: "@storybook/core-events@npm:8.3.6" +"@storybook/core-events@npm:^8.4.2": + version: 8.4.2 + resolution: "@storybook/core-events@npm:8.4.2" peerDependencies: - storybook: ^8.3.6 - checksum: 10/bcf7a0f86cfaace4394eae8c7b747f5265e59304f5a4adc7fab266f09166e77896729d556319fcfcb5a6b6608ef1e6451f2c0a1e27832c7d870f0e298c40f6f5 + storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 + checksum: 10/16c13267d0795050c769419f5f69a3e20e8487d8019ddf6b56df154c7ea5d99f5ec4b59a284d3b197c97a9b303b6b6f3026612f75d6cca968a9ac109b5c04e89 languageName: node linkType: hard -"@storybook/core-webpack@npm:8.3.6": - version: 8.3.6 - resolution: "@storybook/core-webpack@npm:8.3.6" +"@storybook/core-webpack@npm:8.4.2": + version: 8.4.2 + resolution: "@storybook/core-webpack@npm:8.4.2" dependencies: "@types/node": "npm:^22.0.0" ts-dedent: "npm:^2.0.0" peerDependencies: - storybook: ^8.3.6 - checksum: 10/d842582b494712bf96e5a6346e7dc5f9af2589425acc7fe6a593137f6a203b4a43d522a1c5ba92b1d6ef67c19cc5ce23c23f97a5b3a2a70e26b37b2a72e4aaaa + storybook: ^8.4.2 + checksum: 10/8e6d75e70720743bd299855277cbd5a7bb00c286e715050fa8c1c7369d2e4fce7b69cee1a2cd56475760ad3ea3931e4a76c4eb61d8d70a447310414057a6bfb9 languageName: node linkType: hard -"@storybook/core@npm:8.3.6": - version: 8.3.6 - resolution: "@storybook/core@npm:8.3.6" +"@storybook/core@npm:8.4.2": + version: 8.4.2 + resolution: "@storybook/core@npm:8.4.2" dependencies: "@storybook/csf": "npm:^0.1.11" - "@types/express": "npm:^4.17.21" better-opn: "npm:^3.0.2" browser-assert: "npm:^1.2.1" - esbuild: "npm:^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0" + esbuild: "npm:^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0" esbuild-register: "npm:^3.5.0" - express: "npm:^4.19.2" jsdoc-type-pratt-parser: "npm:^4.0.0" process: "npm:^0.11.10" recast: "npm:^0.23.5" semver: "npm:^7.6.2" util: "npm:^0.12.5" ws: "npm:^8.2.3" - checksum: 10/7163a919c6a1bb65acdfe28f7e8f3f481c982867f04bbf8bf8e98ef96e06da116d7ac1ca2442b6584e2b3a94521d8084082186f4632c44f50529ed7447956e5b + peerDependencies: + prettier: ^2 || ^3 + peerDependenciesMeta: + prettier: + optional: true + checksum: 10/f7e1b1b50fbe038c5553695086775eca34de4ebee3dabc28b9163f37e348565a50a937231d0eed45291f9d52478c63bdf2065a99ad4826816fcd81e1652c3382 languageName: node linkType: hard -"@storybook/csf-plugin@npm:8.3.6": - version: 8.3.6 - resolution: "@storybook/csf-plugin@npm:8.3.6" +"@storybook/csf-plugin@npm:8.4.2": + version: 8.4.2 + resolution: "@storybook/csf-plugin@npm:8.4.2" dependencies: unplugin: "npm:^1.3.1" peerDependencies: - storybook: ^8.3.6 - checksum: 10/08cd3f8563808889877484f112bca7bca496f3ea195e18660941f11644422282062135a40e0f5f732fee9b5d7a214baddf2a9e58eb10d5ff54bd30b61ee0923d + storybook: ^8.4.2 + checksum: 10/ec787be0a4fe2928a2675fe6bca5799f0bff8c66e50cea7bed198a188b19ee57257266b0255c5226a7da97928758b86c978afecc3ee0e2bb1f21fe0e7fdaf0c5 languageName: node linkType: hard @@ -2526,12 +2519,12 @@ __metadata: languageName: node linkType: hard -"@storybook/docs-tools@npm:^8.3.6": - version: 8.3.6 - resolution: "@storybook/docs-tools@npm:8.3.6" +"@storybook/docs-tools@npm:^8.4.2": + version: 8.4.2 + resolution: "@storybook/docs-tools@npm:8.4.2" peerDependencies: - storybook: ^8.3.6 - checksum: 10/70f4eb2b6a25ceadf3168cffd7964f33b6bde9f99e0d9fbf7da3e21c8d526f30ab42a0e2b50ba06948f84f4adecd88a089ea77a5a28c7e3de72813184308afed + storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 + checksum: 10/fa2de0e0eddf2ec5ed3b8ebb7d742729ee12e1475b0df28d6189839450d12158d7edd8da78c1d6390b8df76305af7cc2bdc340d8083694f607611b9ba8e9fb85 languageName: node linkType: hard @@ -2542,49 +2535,47 @@ __metadata: languageName: node linkType: hard -"@storybook/icons@npm:^1.2.10": - version: 1.2.10 - resolution: "@storybook/icons@npm:1.2.10" +"@storybook/icons@npm:^1.2.12": + version: 1.2.12 + resolution: "@storybook/icons@npm:1.2.12" peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - checksum: 10/fad929a7e3c7a1a0fbf6b924b0be73f557b1bba9519faa15422482f89513ceb4b649444c224ee3d1dfbdce3616e684063cff23da08f6b1dd96f1aff4381388a6 + checksum: 10/5df56f0856764ed7e4bb24ef7a08a8a9c93f8eedcb16dac062f1dfd3bd1fe6cb4a0aa5a0794083d95e31c04960d126a4d2028cfb4c53681bf05513bb38eae9d2 languageName: node linkType: hard -"@storybook/instrumenter@npm:8.3.6": - version: 8.3.6 - resolution: "@storybook/instrumenter@npm:8.3.6" +"@storybook/instrumenter@npm:8.4.2": + version: 8.4.2 + resolution: "@storybook/instrumenter@npm:8.4.2" dependencies: "@storybook/global": "npm:^5.0.0" - "@vitest/utils": "npm:^2.0.5" - util: "npm:^0.12.4" + "@vitest/utils": "npm:^2.1.1" peerDependencies: - storybook: ^8.3.6 - checksum: 10/bc911ea2338e726fe18fc0d1391021840c7a8c00d2a2d69a20c67c6f4a57be23bf08d38a71fee0fc36bd41a6c79ba5fa581a56e7702ff7e01baef11c982cd00e + storybook: ^8.4.2 + checksum: 10/b6d48ffe6a1ad1fca0d296438e2114df6631667ccda803595d54c71732d0bb7dad086d5465254ba914f4666363018bf1df48cdc8304ad6b6c7a24b87164f7d95 languageName: node linkType: hard -"@storybook/manager-api@npm:8.3.6, @storybook/manager-api@npm:^8.3.6": - version: 8.3.6 - resolution: "@storybook/manager-api@npm:8.3.6" +"@storybook/manager-api@npm:8.4.2": + version: 8.4.2 + resolution: "@storybook/manager-api@npm:8.4.2" peerDependencies: - storybook: ^8.3.6 - checksum: 10/94faf62726b948c2f8e52e15ac99f4ca2f5884a874fbecda6a81e58a03ff316d17ed36c8c146bd388bb58dad2a2bd09cd61c6d7fc1ff2cddfc774c2aed34e37c + storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 + checksum: 10/61b8f845f3271c2dd84597a94c2905a785949a2467582663165e476f455f1942b9c3be77a08f5101848d8a75ca23aa9f7db620d81f202d19093af7695d6ca8a0 languageName: node linkType: hard -"@storybook/preset-react-webpack@npm:8.3.6": - version: 8.3.6 - resolution: "@storybook/preset-react-webpack@npm:8.3.6" +"@storybook/preset-react-webpack@npm:8.4.2": + version: 8.4.2 + resolution: "@storybook/preset-react-webpack@npm:8.4.2" dependencies: - "@storybook/core-webpack": "npm:8.3.6" - "@storybook/react": "npm:8.3.6" + "@storybook/core-webpack": "npm:8.4.2" + "@storybook/react": "npm:8.4.2" "@storybook/react-docgen-typescript-plugin": "npm:1.0.6--canary.9.0c3f3b7.0" "@types/node": "npm:^22.0.0" "@types/semver": "npm:^7.3.4" find-up: "npm:^5.0.0" - fs-extra: "npm:^11.1.0" magic-string: "npm:^0.30.5" react-docgen: "npm:^7.0.0" resolve: "npm:^1.22.8" @@ -2594,20 +2585,20 @@ __metadata: peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta - storybook: ^8.3.6 + storybook: ^8.4.2 peerDependenciesMeta: typescript: optional: true - checksum: 10/1d413e3b6b9ff4d613f26943131e53baccdc874b2120bd08375c23cbb7ef6b767798afbd38086f0a4efd4a229932f7bb3e37b339442aa9cda776cbf2e3e153e6 + checksum: 10/5c08b8c8d59262fa390ad35214179f17b3ddddd7b0956efd0d73542b6c82771b8e6814ab45c57b7099bd4026b49594106222cd620b34a2871427d59050a13e0b languageName: node linkType: hard -"@storybook/preview-api@npm:8.3.6, @storybook/preview-api@npm:^8.3.6": - version: 8.3.6 - resolution: "@storybook/preview-api@npm:8.3.6" +"@storybook/preview-api@npm:8.4.2": + version: 8.4.2 + resolution: "@storybook/preview-api@npm:8.4.2" peerDependencies: - storybook: ^8.3.6 - checksum: 10/5a645dc19308b69020da2ee282860666c6f7ebe45525802cb4da3d4e496f410a30915e570ae4a07b23d429a5d7f0c7254d9f76e6bc236ff2a85b0cc0e56b0ad0 + storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 + checksum: 10/5e57c276bc30afd106dbe89b88dd8b4265d538bc4c55d011b6277d24d0210a7b1b9921f7f2403f06ad824fc50b5846d9037803c613a6f437239a667a52841eea languageName: node linkType: hard @@ -2629,116 +2620,101 @@ __metadata: languageName: node linkType: hard -"@storybook/react-dom-shim@npm:8.3.6": - version: 8.3.6 - resolution: "@storybook/react-dom-shim@npm:8.3.6" +"@storybook/react-dom-shim@npm:8.4.2": + version: 8.4.2 + resolution: "@storybook/react-dom-shim@npm:8.4.2" peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta - storybook: ^8.3.6 - checksum: 10/229001fd8138821d71c7c53ececc152858e92a49cdc50ddb401fecbbe5e4ca3b92082a15b15e1d074ebbb22f294aa5310f54356c7a372479439e985af62cd262 + storybook: ^8.4.2 + checksum: 10/76c058e1a2397dfc4fcd5a5fe74bc3e389754b1d7149c0ecc53afb5f706926d1ca2a76e7da04990cd500b378e3e09ffaead827808c12d1da73ea73a1973b630f languageName: node linkType: hard -"@storybook/react-webpack5@npm:8.3.6": - version: 8.3.6 - resolution: "@storybook/react-webpack5@npm:8.3.6" +"@storybook/react-webpack5@npm:8.4.2": + version: 8.4.2 + resolution: "@storybook/react-webpack5@npm:8.4.2" dependencies: - "@storybook/builder-webpack5": "npm:8.3.6" - "@storybook/preset-react-webpack": "npm:8.3.6" - "@storybook/react": "npm:8.3.6" + "@storybook/builder-webpack5": "npm:8.4.2" + "@storybook/preset-react-webpack": "npm:8.4.2" + "@storybook/react": "npm:8.4.2" "@types/node": "npm:^22.0.0" peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta - storybook: ^8.3.6 + storybook: ^8.4.2 typescript: ">= 4.2.x" peerDependenciesMeta: typescript: optional: true - checksum: 10/15d21da721b639eedd965b17d149b37fd2ee0c84673671fea9841a5491923e1e929c34367e0fe02b63f774edf66f34ec65698f77345a812adac5236c5f05fe44 + checksum: 10/a4f98edcc918e1f0e0f03baf3846fe6f8dcb744873218a9f4ed9c0f4fb813e659b1782060f823c12da4ab66ff7b717be5f51d056650d144d243532f849a7742a languageName: node linkType: hard -"@storybook/react@npm:8.3.6": - version: 8.3.6 - resolution: "@storybook/react@npm:8.3.6" +"@storybook/react@npm:8.4.2": + version: 8.4.2 + resolution: "@storybook/react@npm:8.4.2" dependencies: - "@storybook/components": "npm:^8.3.6" + "@storybook/components": "npm:8.4.2" "@storybook/global": "npm:^5.0.0" - "@storybook/manager-api": "npm:^8.3.6" - "@storybook/preview-api": "npm:^8.3.6" - "@storybook/react-dom-shim": "npm:8.3.6" - "@storybook/theming": "npm:^8.3.6" - "@types/escodegen": "npm:^0.0.6" - "@types/estree": "npm:^0.0.51" - "@types/node": "npm:^22.0.0" - acorn: "npm:^7.4.1" - acorn-jsx: "npm:^5.3.1" - acorn-walk: "npm:^7.2.0" - escodegen: "npm:^2.1.0" - html-tags: "npm:^3.1.0" - prop-types: "npm:^15.7.2" - react-element-to-jsx-string: "npm:^15.0.0" - semver: "npm:^7.3.7" - ts-dedent: "npm:^2.0.0" - type-fest: "npm:~2.19" - util-deprecate: "npm:^1.0.2" + "@storybook/manager-api": "npm:8.4.2" + "@storybook/preview-api": "npm:8.4.2" + "@storybook/react-dom-shim": "npm:8.4.2" + "@storybook/theming": "npm:8.4.2" peerDependencies: - "@storybook/test": 8.3.6 + "@storybook/test": 8.4.2 react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta - storybook: ^8.3.6 + storybook: ^8.4.2 typescript: ">= 4.2.x" peerDependenciesMeta: "@storybook/test": optional: true typescript: optional: true - checksum: 10/412e9052d20485350d987776daf0709bae8595bf4f3e10b12ae1aa85a32ae46369ceb0da623b651dd568d2124ed9ca7adc2dc1930353e41be2881bb253240e3c + checksum: 10/df7dd512d2e4604b7af859f594c058be959495dc0c25467f571f1e6b4e5058c2ee0d3caaed47742e3a602eef871143b1d48aa164646d61923885ebc7eec87b56 languageName: node linkType: hard -"@storybook/test@npm:8.3.6, @storybook/test@npm:^8.3.6": - version: 8.3.6 - resolution: "@storybook/test@npm:8.3.6" +"@storybook/test@npm:8.4.2, @storybook/test@npm:^8.4.2": + version: 8.4.2 + resolution: "@storybook/test@npm:8.4.2" dependencies: "@storybook/csf": "npm:^0.1.11" "@storybook/global": "npm:^5.0.0" - "@storybook/instrumenter": "npm:8.3.6" + "@storybook/instrumenter": "npm:8.4.2" "@testing-library/dom": "npm:10.4.0" "@testing-library/jest-dom": "npm:6.5.0" "@testing-library/user-event": "npm:14.5.2" "@vitest/expect": "npm:2.0.5" "@vitest/spy": "npm:2.0.5" - util: "npm:^0.12.4" peerDependencies: - storybook: ^8.3.6 - checksum: 10/2115e96dbe61e68dcb2da9086ea81501b1763f2a5e68e61cb13d2fcc37dc00ab2178737e0cfff3ed515e86a0cfada09538044ab26c03cd4418eb8ef07dbdfcbf + storybook: ^8.4.2 + checksum: 10/934518e629d2798df10bb892184e18dca0f3ea7b426636cef3f29a12302a3c471b59d808024ea90c58b9e183ce1b3477a0c8827824f7e74111ceaf4518f0212e languageName: node linkType: hard -"@storybook/theming@npm:8.3.6, @storybook/theming@npm:^8.3.6": - version: 8.3.6 - resolution: "@storybook/theming@npm:8.3.6" +"@storybook/theming@npm:8.4.2": + version: 8.4.2 + resolution: "@storybook/theming@npm:8.4.2" peerDependencies: - storybook: ^8.3.6 - checksum: 10/7b40b35069225d37f71f43e35174717ba6ec8d273eef671a2d37d9745a300c5b3887fa145aee6fdbe4759b2140ddf25e8cbd569074ae1c7d44b0ccc99c1a3451 + storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 + checksum: 10/8d0a6d20d3589815dea0bcdae9255216b8fc5459225871881a52e0fbc94a136a9972bef02c2ec6167ffd8eea24afab68962e01e83a8d4f60d12b4b787b9b23f3 languageName: node linkType: hard -"@storybook/types@npm:8.3.6": - version: 8.3.6 - resolution: "@storybook/types@npm:8.3.6" +"@storybook/types@npm:8.4.2": + version: 8.4.2 + resolution: "@storybook/types@npm:8.4.2" peerDependencies: - storybook: ^8.3.6 - checksum: 10/7122388d848cf1d8b7d95c81b8a601d82a455d764f7a625372f344dc0402bbd398db22e1c6cedd66ca3987d61b0f8204ff757e0ff5fc2a77745094dc7b882a2a + storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 + checksum: 10/2fb61f73bafb55e19c65f903dd87ac01281d0214c7938a90fc925a9ace327e4e566784b641a3dcf6f2975c904f9cd97d1d70403d421396b1398346e29a0624dd languageName: node linkType: hard -"@swc/cli@npm:^0.4.0": - version: 0.4.0 - resolution: "@swc/cli@npm:0.4.0" +"@swc/cli@npm:^0.5.0": + version: 0.5.0 + resolution: "@swc/cli@npm:0.5.0" dependencies: "@mole-inc/bin-wrapper": "npm:^8.0.1" "@swc/counter": "npm:^0.1.3" @@ -2759,7 +2735,7 @@ __metadata: spack: bin/spack.js swc: bin/swc.js swcx: bin/swcx.js - checksum: 10/d1e319f5579eb3b889e86e5db1db25673bbbaa9091e0e1f93ec4ae33c9ef8b6a6607bbaae693f7c2fefe5d1faf9eec48bdd79a15f170b70e6bc0aa58e6550dee + checksum: 10/033b682f1c25c8fae731414d2a463a0e455452bf9349c025cd88ea63ee1e5a589032eb206063fd925daf12065c9f1e5b4680cef50cc24674681c4d2583b7dca0 languageName: node linkType: hard @@ -2770,6 +2746,13 @@ __metadata: languageName: node linkType: hard +"@swc/core-darwin-arm64@npm:1.8.0": + version: 1.8.0 + resolution: "@swc/core-darwin-arm64@npm:1.8.0" + conditions: os=darwin & cpu=arm64 + languageName: node + linkType: hard + "@swc/core-darwin-x64@npm:1.7.40": version: 1.7.40 resolution: "@swc/core-darwin-x64@npm:1.7.40" @@ -2777,6 +2760,13 @@ __metadata: languageName: node linkType: hard +"@swc/core-darwin-x64@npm:1.8.0": + version: 1.8.0 + resolution: "@swc/core-darwin-x64@npm:1.8.0" + conditions: os=darwin & cpu=x64 + languageName: node + linkType: hard + "@swc/core-linux-arm-gnueabihf@npm:1.7.40": version: 1.7.40 resolution: "@swc/core-linux-arm-gnueabihf@npm:1.7.40" @@ -2784,6 +2774,13 @@ __metadata: languageName: node linkType: hard +"@swc/core-linux-arm-gnueabihf@npm:1.8.0": + version: 1.8.0 + resolution: "@swc/core-linux-arm-gnueabihf@npm:1.8.0" + conditions: os=linux & cpu=arm + languageName: node + linkType: hard + "@swc/core-linux-arm64-gnu@npm:1.7.40": version: 1.7.40 resolution: "@swc/core-linux-arm64-gnu@npm:1.7.40" @@ -2791,6 +2788,13 @@ __metadata: languageName: node linkType: hard +"@swc/core-linux-arm64-gnu@npm:1.8.0": + version: 1.8.0 + resolution: "@swc/core-linux-arm64-gnu@npm:1.8.0" + conditions: os=linux & cpu=arm64 & libc=glibc + languageName: node + linkType: hard + "@swc/core-linux-arm64-musl@npm:1.7.40": version: 1.7.40 resolution: "@swc/core-linux-arm64-musl@npm:1.7.40" @@ -2798,6 +2802,13 @@ __metadata: languageName: node linkType: hard +"@swc/core-linux-arm64-musl@npm:1.8.0": + version: 1.8.0 + resolution: "@swc/core-linux-arm64-musl@npm:1.8.0" + conditions: os=linux & cpu=arm64 & libc=musl + languageName: node + linkType: hard + "@swc/core-linux-x64-gnu@npm:1.7.40": version: 1.7.40 resolution: "@swc/core-linux-x64-gnu@npm:1.7.40" @@ -2805,6 +2816,13 @@ __metadata: languageName: node linkType: hard +"@swc/core-linux-x64-gnu@npm:1.8.0": + version: 1.8.0 + resolution: "@swc/core-linux-x64-gnu@npm:1.8.0" + conditions: os=linux & cpu=x64 & libc=glibc + languageName: node + linkType: hard + "@swc/core-linux-x64-musl@npm:1.7.40": version: 1.7.40 resolution: "@swc/core-linux-x64-musl@npm:1.7.40" @@ -2812,6 +2830,13 @@ __metadata: languageName: node linkType: hard +"@swc/core-linux-x64-musl@npm:1.8.0": + version: 1.8.0 + resolution: "@swc/core-linux-x64-musl@npm:1.8.0" + conditions: os=linux & cpu=x64 & libc=musl + languageName: node + linkType: hard + "@swc/core-win32-arm64-msvc@npm:1.7.40": version: 1.7.40 resolution: "@swc/core-win32-arm64-msvc@npm:1.7.40" @@ -2819,6 +2844,13 @@ __metadata: languageName: node linkType: hard +"@swc/core-win32-arm64-msvc@npm:1.8.0": + version: 1.8.0 + resolution: "@swc/core-win32-arm64-msvc@npm:1.8.0" + conditions: os=win32 & cpu=arm64 + languageName: node + linkType: hard + "@swc/core-win32-ia32-msvc@npm:1.7.40": version: 1.7.40 resolution: "@swc/core-win32-ia32-msvc@npm:1.7.40" @@ -2826,6 +2858,13 @@ __metadata: languageName: node linkType: hard +"@swc/core-win32-ia32-msvc@npm:1.8.0": + version: 1.8.0 + resolution: "@swc/core-win32-ia32-msvc@npm:1.8.0" + conditions: os=win32 & cpu=ia32 + languageName: node + linkType: hard + "@swc/core-win32-x64-msvc@npm:1.7.40": version: 1.7.40 resolution: "@swc/core-win32-x64-msvc@npm:1.7.40" @@ -2833,7 +2872,14 @@ __metadata: languageName: node linkType: hard -"@swc/core@npm:*, @swc/core@npm:1.7.40, @swc/core@npm:^1.7.3, @swc/core@npm:^1.7.40": +"@swc/core-win32-x64-msvc@npm:1.8.0": + version: 1.8.0 + resolution: "@swc/core-win32-x64-msvc@npm:1.8.0" + conditions: os=win32 & cpu=x64 + languageName: node + linkType: hard + +"@swc/core@npm:*, @swc/core@npm:^1.7.3": version: 1.7.40 resolution: "@swc/core@npm:1.7.40" dependencies: @@ -2879,6 +2925,52 @@ __metadata: languageName: node linkType: hard +"@swc/core@npm:1.8.0, @swc/core@npm:^1.8.0": + version: 1.8.0 + resolution: "@swc/core@npm:1.8.0" + dependencies: + "@swc/core-darwin-arm64": "npm:1.8.0" + "@swc/core-darwin-x64": "npm:1.8.0" + "@swc/core-linux-arm-gnueabihf": "npm:1.8.0" + "@swc/core-linux-arm64-gnu": "npm:1.8.0" + "@swc/core-linux-arm64-musl": "npm:1.8.0" + "@swc/core-linux-x64-gnu": "npm:1.8.0" + "@swc/core-linux-x64-musl": "npm:1.8.0" + "@swc/core-win32-arm64-msvc": "npm:1.8.0" + "@swc/core-win32-ia32-msvc": "npm:1.8.0" + "@swc/core-win32-x64-msvc": "npm:1.8.0" + "@swc/counter": "npm:^0.1.3" + "@swc/types": "npm:^0.1.14" + peerDependencies: + "@swc/helpers": "*" + dependenciesMeta: + "@swc/core-darwin-arm64": + optional: true + "@swc/core-darwin-x64": + optional: true + "@swc/core-linux-arm-gnueabihf": + optional: true + "@swc/core-linux-arm64-gnu": + optional: true + "@swc/core-linux-arm64-musl": + optional: true + "@swc/core-linux-x64-gnu": + optional: true + "@swc/core-linux-x64-musl": + optional: true + "@swc/core-win32-arm64-msvc": + optional: true + "@swc/core-win32-ia32-msvc": + optional: true + "@swc/core-win32-x64-msvc": + optional: true + peerDependenciesMeta: + "@swc/helpers": + optional: true + checksum: 10/2e7fb49286545b2b712b8220dbaf0d342636bd4c31763f760dc9822975d8e538e0080f1eb8ae7e74bf9b2eed8200a9525fd210ead573843dabd6f3e388bfb336 + languageName: node + linkType: hard + "@swc/counter@npm:^0.1.3": version: 0.1.3 resolution: "@swc/counter@npm:0.1.3" @@ -2895,16 +2987,16 @@ __metadata: languageName: node linkType: hard -"@swc/jest@npm:^0.2.36": - version: 0.2.36 - resolution: "@swc/jest@npm:0.2.36" +"@swc/jest@npm:^0.2.37": + version: 0.2.37 + resolution: "@swc/jest@npm:0.2.37" dependencies: "@jest/create-cache-key-function": "npm:^29.7.0" "@swc/counter": "npm:^0.1.3" jsonc-parser: "npm:^3.2.0" peerDependencies: "@swc/core": "*" - checksum: 10/39c5699646f0e90400af106156e5604069e8a7d8216f2421e171837b086839176c16f69925ce6a5c4c48182005eed649bdf9664023708e169aa48814feecc0d8 + checksum: 10/bbec37079b4f5c1ff1c95aeec07d08277c646a0c5e16e057ea3a8fe5c6e2bd59bbfc4312e53ddd05d25fa4de20a03607be274f560f28bb5e229dd08124780e16 languageName: node linkType: hard @@ -2917,6 +3009,15 @@ __metadata: languageName: node linkType: hard +"@swc/types@npm:^0.1.14": + version: 0.1.14 + resolution: "@swc/types@npm:0.1.14" + dependencies: + "@swc/counter": "npm:^0.1.3" + checksum: 10/1ee6cd759f7dd52ea64cbcacc912e2111624a8db0dcfae443604bd9d42b671d9b9570f1eca945dfc21b8850a15d2c0db2aa0e0b85f4bb9782f4acd1eb66dccd1 + languageName: node + linkType: hard + "@szmarczak/http-timer@npm:^4.0.5": version: 4.0.6 resolution: "@szmarczak/http-timer@npm:4.0.6" @@ -2957,9 +3058,9 @@ __metadata: languageName: node linkType: hard -"@testing-library/jest-dom@npm:^6.6.2": - version: 6.6.2 - resolution: "@testing-library/jest-dom@npm:6.6.2" +"@testing-library/jest-dom@npm:^6.6.3": + version: 6.6.3 + resolution: "@testing-library/jest-dom@npm:6.6.3" dependencies: "@adobe/css-tools": "npm:^4.4.0" aria-query: "npm:^5.0.0" @@ -2968,7 +3069,7 @@ __metadata: dom-accessibility-api: "npm:^0.6.3" lodash: "npm:^4.17.21" redent: "npm:^3.0.0" - checksum: 10/c5f1ac369e685ea7c17eff190f2e9996e6e54615a3048c3c00cbbbec48f94c557d348ba935a7e8170efbbb109c035785952f6e46d0c03edb18e9a8cc55f8f118 + checksum: 10/1f3427e45870eab9dcc59d6504b780d4a595062fe1687762ae6e67d06a70bf439b40ab64cf58cbace6293a99e3764d4647fdc8300a633b721764f5ce39dade18 languageName: node linkType: hard @@ -3176,10 +3277,30 @@ __metadata: languageName: node linkType: hard -"@types/escodegen@npm:^0.0.6": - version: 0.0.6 - resolution: "@types/escodegen@npm:0.0.6" - checksum: 10/2e91554a47eb98076a3ba6e3548640e50b28a0f5b69134f99dd1e0ce5223c0a1726f23d25aafd40e4c7961d7c3c519782949aa606d58d0e7431c7fb1ec011c4c +"@types/eslint-scope@npm:^3.7.7": + version: 3.7.7 + resolution: "@types/eslint-scope@npm:3.7.7" + dependencies: + "@types/eslint": "npm:*" + "@types/estree": "npm:*" + checksum: 10/e2889a124aaab0b89af1bab5959847c5bec09809209255de0e63b9f54c629a94781daa04adb66bffcdd742f5e25a17614fb933965093c0eea64aacda4309380e + languageName: node + linkType: hard + +"@types/eslint@npm:*": + version: 9.6.1 + resolution: "@types/eslint@npm:9.6.1" + dependencies: + "@types/estree": "npm:*" + "@types/json-schema": "npm:*" + checksum: 10/719fcd255760168a43d0e306ef87548e1e15bffe361d5f4022b0f266575637acc0ecb85604ac97879ee8ae83c6a6d0613b0ed31d0209ddf22a0fe6d608fc56fe + languageName: node + linkType: hard + +"@types/estree@npm:*, @types/estree@npm:^1.0.6": + version: 1.0.6 + resolution: "@types/estree@npm:1.0.6" + checksum: 10/9d35d475095199c23e05b431bcdd1f6fec7380612aed068b14b2a08aa70494de8a9026765a5a91b1073f636fb0368f6d8973f518a31391d519e20c59388ed88d languageName: node linkType: hard @@ -3190,13 +3311,6 @@ __metadata: languageName: node linkType: hard -"@types/estree@npm:^0.0.51": - version: 0.0.51 - resolution: "@types/estree@npm:0.0.51" - checksum: 10/b566c7a3fc8a81ca3d9e00a717e90b8f5d567e2476b4f6d76a20ec6da33ec28165b8f989ed8dd0c9df41405199777ec36a4f85f32a347fbc6c3f696a3128b6e7 - languageName: node - linkType: hard - "@types/express-serve-static-core@npm:*, @types/express-serve-static-core@npm:^4.17.33": version: 4.19.5 resolution: "@types/express-serve-static-core@npm:4.19.5" @@ -3240,15 +3354,6 @@ __metadata: languageName: node linkType: hard -"@types/hast@npm:^3.0.0": - version: 3.0.4 - resolution: "@types/hast@npm:3.0.4" - dependencies: - "@types/unist": "npm:*" - checksum: 10/732920d81bb7605895776841b7658b4d8cc74a43a8fa176017cc0fb0ecc1a4c82a2b75a4fe6b71aa262b649d3fb62858c6789efa3793ea1d40269953af96ecb5 - languageName: node - linkType: hard - "@types/html-minifier-terser@npm:^6.0.0": version: 6.1.0 resolution: "@types/html-minifier-terser@npm:6.1.0" @@ -3355,7 +3460,7 @@ __metadata: languageName: node linkType: hard -"@types/json-schema@npm:^7.0.4, @types/json-schema@npm:^7.0.5, @types/json-schema@npm:^7.0.8, @types/json-schema@npm:^7.0.9": +"@types/json-schema@npm:*, @types/json-schema@npm:^7.0.4, @types/json-schema@npm:^7.0.5, @types/json-schema@npm:^7.0.8, @types/json-schema@npm:^7.0.9": version: 7.0.15 resolution: "@types/json-schema@npm:7.0.15" checksum: 10/1a3c3e06236e4c4aab89499c428d585527ce50c24fe8259e8b3926d3df4cfbbbcf306cfc73ddfb66cbafc973116efd15967020b0f738f63e09e64c7d260519e7 @@ -3378,13 +3483,6 @@ __metadata: languageName: node linkType: hard -"@types/lodash@npm:^4.14.167": - version: 4.17.5 - resolution: "@types/lodash@npm:4.17.5" - checksum: 10/10e2e9cbeb16998026f4071f9f5f2a38b651eba15302f512e0b8ab904c07c197ca0282d2821f64e53c2b692d7046af0a1ce3ead190fb077cbe4036948fce1924 - languageName: node - linkType: hard - "@types/mdast@npm:^3.0.0": version: 3.0.15 resolution: "@types/mdast@npm:3.0.15" @@ -3424,7 +3522,7 @@ __metadata: languageName: node linkType: hard -"@types/node@npm:*, @types/node@npm:^22.0.0, @types/node@npm:^22.8.1": +"@types/node@npm:*, @types/node@npm:^22.0.0": version: 22.8.1 resolution: "@types/node@npm:22.8.1" dependencies: @@ -3433,6 +3531,15 @@ __metadata: languageName: node linkType: hard +"@types/node@npm:^22.8.7": + version: 22.8.7 + resolution: "@types/node@npm:22.8.7" + dependencies: + undici-types: "npm:~6.19.8" + checksum: 10/9c73d4cbcbf9773a5986421025c26d6139d8ab960317b3062fbb449c00dbe8197230334be550ffcdb6059bd25f4cb903546bace905155628537283a80c2075d5 + languageName: node + linkType: hard + "@types/normalize-package-data@npm:^2.4.0": version: 2.4.4 resolution: "@types/normalize-package-data@npm:2.4.4" @@ -3523,7 +3630,7 @@ __metadata: languageName: node linkType: hard -"@types/react@npm:*, @types/react@npm:^16.8.0 || ^17.0.0 || ^18.0.0, @types/react@npm:^18.3.12": +"@types/react@npm:*, @types/react@npm:^18.3.12": version: 18.3.12 resolution: "@types/react@npm:18.3.12" dependencies: @@ -3623,13 +3730,6 @@ __metadata: languageName: node linkType: hard -"@types/unist@npm:*, @types/unist@npm:^3.0.0": - version: 3.0.2 - resolution: "@types/unist@npm:3.0.2" - checksum: 10/3d04d0be69316e5f14599a0d993a208606c12818cf631fd399243d1dc7a9bd8a3917d6066baa6abc290814afbd744621484756803c80cba892c39cd4b4a85616 - languageName: node - linkType: hard - "@types/unist@npm:^2, @types/unist@npm:^2.0.0, @types/unist@npm:^2.0.2": version: 2.0.10 resolution: "@types/unist@npm:2.0.10" @@ -3798,7 +3898,7 @@ __metadata: languageName: node linkType: hard -"@ungap/structured-clone@npm:^1.0.0, @ungap/structured-clone@npm:^1.2.0": +"@ungap/structured-clone@npm:^1.2.0": version: 1.2.0 resolution: "@ungap/structured-clone@npm:1.2.0" checksum: 10/c6fe89a505e513a7592e1438280db1c075764793a2397877ff1351721fe8792a966a5359769e30242b3cd023f2efb9e63ca2ca88019d73b564488cc20e3eab12 @@ -3841,12 +3941,12 @@ __metadata: languageName: node linkType: hard -"@vitest/pretty-format@npm:2.1.1": - version: 2.1.1 - resolution: "@vitest/pretty-format@npm:2.1.1" +"@vitest/pretty-format@npm:2.1.4": + version: 2.1.4 + resolution: "@vitest/pretty-format@npm:2.1.4" dependencies: tinyrainbow: "npm:^1.2.0" - checksum: 10/744278a3a91d080e51a94b03eaf7cf43779978d6391060cbfdda6d03194eef744ce8f12a2fe2fa90a9bf9b9f038d4c4c4d88f6192f042c88c5ee4125f38bf892 + checksum: 10/434e6a7903f72a3796f26516ad728aca92724909e18fd3f2cd4b9b8b0ae2cc7b4cd86e92ab9f2ac7bc005c7a7ef0bcb9d768c0264b4b0625f1f0748cc615f1f6 languageName: node linkType: hard @@ -3871,14 +3971,14 @@ __metadata: languageName: node linkType: hard -"@vitest/utils@npm:^2.0.5": - version: 2.1.1 - resolution: "@vitest/utils@npm:2.1.1" +"@vitest/utils@npm:^2.1.1": + version: 2.1.4 + resolution: "@vitest/utils@npm:2.1.4" dependencies: - "@vitest/pretty-format": "npm:2.1.1" - loupe: "npm:^3.1.1" + "@vitest/pretty-format": "npm:2.1.4" + loupe: "npm:^3.1.2" tinyrainbow: "npm:^1.2.0" - checksum: 10/605f1807c343ac01cde053b062bda8f0cc51b321a3cd9c751424a1e24549a35120896bd58612a14f068460242013f69e08fc0a69355387e981a5a50bce9ae04e + checksum: 10/aaaf5310943abca0f0080d9638e67838f7e519d5670ec32e61184915efdfa5ec61d9b495cad6cb7dc492e8caeed14593e78dda77c8ea59c1671a231661f57142 languageName: node linkType: hard @@ -3963,18 +4063,18 @@ __metadata: version: 0.0.0-use.local resolution: "@vkontakte/vkui-codemods@workspace:packages/codemods" dependencies: - "@swc/core": "npm:^1.7.40" - "@swc/jest": "npm:^0.2.36" + "@swc/core": "npm:^1.8.0" + "@swc/jest": "npm:^0.2.37" "@types/cross-spawn": "npm:^6.0.6" "@types/jest": "npm:^29.5.14" "@types/jscodeshift": "npm:^0.12.0" - "@types/node": "npm:^22.8.1" + "@types/node": "npm:^22.8.7" "@types/prompts": "npm:^2.4.9" chalk: "npm:^4.1.2" commander: "npm:^12.1.0" cross-spawn: "npm:^7.0.3" jest: "npm:^29.7.0" - jscodeshift: "npm:^17.0.0" + jscodeshift: "npm:^17.1.1" prompts: "npm:^2.4.2" ts-node: "npm:^10.9.2" typescript: "npm:^5.6.3" @@ -4001,9 +4101,9 @@ __metadata: resolution: "@vkontakte/vkui-floating-ui@workspace:packages/vkui-floating-ui" dependencies: "@floating-ui/react-dom": "npm:^2.1.2" - "@swc/core": "npm:^1.7.40" + "@swc/core": "npm:^1.8.0" "@swc/helpers": "npm:^0.5.13" - "@swc/jest": "npm:^0.2.36" + "@swc/jest": "npm:^0.2.37" "@types/jest": "npm:^29.5.14" jest: "npm:^29.7.0" react: "npm:^18.3.1" @@ -4031,16 +4131,16 @@ __metadata: "@size-limit/file": "npm:^11.1.6" "@size-limit/webpack": "npm:^11.1.6" "@size-limit/webpack-css": "npm:^11.1.6" - "@swc/cli": "npm:^0.4.0" - "@swc/core": "npm:1.7.40" - "@swc/jest": "npm:^0.2.36" + "@swc/cli": "npm:^0.5.0" + "@swc/core": "npm:1.8.0" + "@swc/jest": "npm:^0.2.37" "@testing-library/dom": "npm:^10.4.0" - "@testing-library/jest-dom": "npm:^6.6.2" + "@testing-library/jest-dom": "npm:^6.6.3" "@testing-library/react": "npm:^16.0.1" "@testing-library/user-event": "npm:^14.5.2" "@types/jest": "npm:^29.5.14" "@types/jest-axe": "npm:^3.5.9" - "@types/node": "npm:^22.8.1" + "@types/node": "npm:^22.8.7" "@types/react": "npm:^18.3.12" "@types/react-dom": "npm:^18.3.1" "@types/webpack": "npm:^5.28.5" @@ -4077,10 +4177,10 @@ __metadata: jest-environment-node: "npm:^29.7.0" jest-preset-stylelint: "npm:^7.1.0" lint-staged: "npm:^15.2.10" - mini-css-extract-plugin: "npm:^2.9.1" + mini-css-extract-plugin: "npm:^2.9.2" postcss: "npm:^8.4.47" postcss-cli: "npm:^11.0.0" - postcss-custom-media: "npm:^11.0.4" + postcss-custom-media: "npm:^11.0.5" postcss-gap-properties: "npm:^6.0.0" postcss-import: "npm:^16.1.0" postcss-loader: "npm:^8.1.1" @@ -4107,7 +4207,7 @@ __metadata: ts-node: "npm:^10.9.2" typescript: "npm:^5.6.3" typescript-plugin-css-modules: "npm:^5.1.0" - webpack: "npm:^5.95.0" + webpack: "npm:^5.96.1" webpack-cli: "npm:^5.1.4" webpack-merge: "npm:^6.0.1" yargs: "npm:^17.7.2" @@ -4118,10 +4218,10 @@ __metadata: version: 0.0.0-use.local resolution: "@vkontakte/vkui-token-translator@workspace:packages/token-translator" dependencies: - "@swc/core": "npm:1.7.40" - "@swc/jest": "npm:^0.2.36" + "@swc/core": "npm:1.8.0" + "@swc/jest": "npm:^0.2.37" "@types/jest": "npm:^29.5.14" - "@types/node": "npm:^22.8.1" + "@types/node": "npm:^22.8.7" "@types/postcss-less": "npm:^4.0.6" jest: "npm:^29.7.0" postcss: "npm:^8.4.47" @@ -4148,8 +4248,8 @@ __metadata: version: 0.0.0-use.local resolution: "@vkontakte/vkui@workspace:packages/vkui" dependencies: - "@storybook/react": "npm:8.3.6" - "@storybook/react-webpack5": "npm:8.3.6" + "@storybook/react": "npm:8.4.2" + "@storybook/react-webpack5": "npm:8.4.2" "@swc/helpers": "npm:^0.5.13" "@types/node": "npm:*" "@vkontakte/icons": "npm:^2.115.0" @@ -4158,7 +4258,7 @@ __metadata: date-fns: "npm:^4.1.0" react: "npm:^18.3.1" react-dom: "npm:^18.3.1" - storybook: "npm:8.3.6" + storybook: "npm:8.4.2" ts-node: "npm:*" peerDependencies: react: ^18.2.0 @@ -4425,7 +4525,7 @@ __metadata: languageName: node linkType: hard -"acorn-jsx@npm:^5.1.0, acorn-jsx@npm:^5.2.0, acorn-jsx@npm:^5.3.1, acorn-jsx@npm:^5.3.2": +"acorn-jsx@npm:^5.1.0, acorn-jsx@npm:^5.2.0, acorn-jsx@npm:^5.3.2": version: 5.3.2 resolution: "acorn-jsx@npm:5.3.2" peerDependencies: @@ -4434,13 +4534,6 @@ __metadata: languageName: node linkType: hard -"acorn-walk@npm:^7.2.0": - version: 7.2.0 - resolution: "acorn-walk@npm:7.2.0" - checksum: 10/4d3e186f729474aed3bc3d0df44692f2010c726582655b20a23347bef650867655521c48ada444cb4fda241ee713dcb792da363ec74c6282fa884fb7144171bb - languageName: node - linkType: hard - "acorn-walk@npm:^8.0.0, acorn-walk@npm:^8.0.2, acorn-walk@npm:^8.1.1": version: 8.3.3 resolution: "acorn-walk@npm:8.3.3" @@ -4459,21 +4552,21 @@ __metadata: languageName: node linkType: hard -"acorn@npm:^7.4.1": - version: 7.4.1 - resolution: "acorn@npm:7.4.1" +"acorn@npm:^8.0.4, acorn@npm:^8.1.0, acorn@npm:^8.11.0, acorn@npm:^8.11.3, acorn@npm:^8.4.1, acorn@npm:^8.7.1, acorn@npm:^8.8.1, acorn@npm:^8.8.2, acorn@npm:^8.9.0": + version: 8.12.1 + resolution: "acorn@npm:8.12.1" bin: acorn: bin/acorn - checksum: 10/8be2a40714756d713dfb62544128adce3b7102c6eb94bc312af196c2cc4af76e5b93079bd66b05e9ca31b35a9b0ce12171d16bc55f366cafdb794fdab9d753ec + checksum: 10/d08c2d122bba32d0861e0aa840b2ee25946c286d5dc5990abca991baf8cdbfbe199b05aacb221b979411a2fea36f83e26b5ac4f6b4e0ce49038c62316c1848f0 languageName: node linkType: hard -"acorn@npm:^8.0.4, acorn@npm:^8.1.0, acorn@npm:^8.11.0, acorn@npm:^8.11.3, acorn@npm:^8.4.1, acorn@npm:^8.7.1, acorn@npm:^8.8.1, acorn@npm:^8.8.2, acorn@npm:^8.9.0": - version: 8.12.1 - resolution: "acorn@npm:8.12.1" +"acorn@npm:^8.14.0": + version: 8.14.0 + resolution: "acorn@npm:8.14.0" bin: acorn: bin/acorn - checksum: 10/d08c2d122bba32d0861e0aa840b2ee25946c286d5dc5990abca991baf8cdbfbe199b05aacb221b979411a2fea36f83e26b5ac4f6b4e0ce49038c62316c1848f0 + checksum: 10/6df29c35556782ca9e632db461a7f97947772c6c1d5438a81f0c873a3da3a792487e83e404d1c6c25f70513e91aa18745f6eafb1fcc3a43ecd1920b21dd173d2 languageName: node linkType: hard @@ -5056,7 +5149,7 @@ __metadata: resolution: "benchmark@workspace:benchmark" dependencies: "@playwright/test": "npm:1.48.2" - "@swc/core": "npm:^1.7.40" + "@swc/core": "npm:^1.8.0" "@vkontakte/vkui": "workspace:packages/vkui" cli-table3: "npm:^0.6.1" css-loader: "npm:^6.10.0" @@ -5064,7 +5157,7 @@ __metadata: dotenv: "npm:^16.4.5" finalhandler: "npm:1.3.1" html-webpack-plugin: "npm:^5.6.3" - mini-css-extract-plugin: "npm:^2.9.1" + mini-css-extract-plugin: "npm:^2.9.2" playwright: "npm:1.48.2" postcss: "npm:^8.4.47" postcss-modules: "npm:^6.0.0" @@ -5073,7 +5166,7 @@ __metadata: serve-static: "npm:1.16.2" swc-loader: "npm:^0.2.6" terser-webpack-plugin: "npm:^5.3.10" - webpack: "npm:^5.95.0" + webpack: "npm:^5.96.1" languageName: unknown linkType: soft @@ -7204,34 +7297,34 @@ __metadata: languageName: node linkType: hard -"esbuild@npm:^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0": - version: 0.23.1 - resolution: "esbuild@npm:0.23.1" - dependencies: - "@esbuild/aix-ppc64": "npm:0.23.1" - "@esbuild/android-arm": "npm:0.23.1" - "@esbuild/android-arm64": "npm:0.23.1" - "@esbuild/android-x64": "npm:0.23.1" - "@esbuild/darwin-arm64": "npm:0.23.1" - "@esbuild/darwin-x64": "npm:0.23.1" - "@esbuild/freebsd-arm64": "npm:0.23.1" - "@esbuild/freebsd-x64": "npm:0.23.1" - "@esbuild/linux-arm": "npm:0.23.1" - "@esbuild/linux-arm64": "npm:0.23.1" - "@esbuild/linux-ia32": "npm:0.23.1" - "@esbuild/linux-loong64": "npm:0.23.1" - "@esbuild/linux-mips64el": "npm:0.23.1" - "@esbuild/linux-ppc64": "npm:0.23.1" - "@esbuild/linux-riscv64": "npm:0.23.1" - "@esbuild/linux-s390x": "npm:0.23.1" - "@esbuild/linux-x64": "npm:0.23.1" - "@esbuild/netbsd-x64": "npm:0.23.1" - "@esbuild/openbsd-arm64": "npm:0.23.1" - "@esbuild/openbsd-x64": "npm:0.23.1" - "@esbuild/sunos-x64": "npm:0.23.1" - "@esbuild/win32-arm64": "npm:0.23.1" - "@esbuild/win32-ia32": "npm:0.23.1" - "@esbuild/win32-x64": "npm:0.23.1" +"esbuild@npm:^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0": + version: 0.24.0 + resolution: "esbuild@npm:0.24.0" + dependencies: + "@esbuild/aix-ppc64": "npm:0.24.0" + "@esbuild/android-arm": "npm:0.24.0" + "@esbuild/android-arm64": "npm:0.24.0" + "@esbuild/android-x64": "npm:0.24.0" + "@esbuild/darwin-arm64": "npm:0.24.0" + "@esbuild/darwin-x64": "npm:0.24.0" + "@esbuild/freebsd-arm64": "npm:0.24.0" + "@esbuild/freebsd-x64": "npm:0.24.0" + "@esbuild/linux-arm": "npm:0.24.0" + "@esbuild/linux-arm64": "npm:0.24.0" + "@esbuild/linux-ia32": "npm:0.24.0" + "@esbuild/linux-loong64": "npm:0.24.0" + "@esbuild/linux-mips64el": "npm:0.24.0" + "@esbuild/linux-ppc64": "npm:0.24.0" + "@esbuild/linux-riscv64": "npm:0.24.0" + "@esbuild/linux-s390x": "npm:0.24.0" + "@esbuild/linux-x64": "npm:0.24.0" + "@esbuild/netbsd-x64": "npm:0.24.0" + "@esbuild/openbsd-arm64": "npm:0.24.0" + "@esbuild/openbsd-x64": "npm:0.24.0" + "@esbuild/sunos-x64": "npm:0.24.0" + "@esbuild/win32-arm64": "npm:0.24.0" + "@esbuild/win32-ia32": "npm:0.24.0" + "@esbuild/win32-x64": "npm:0.24.0" dependenciesMeta: "@esbuild/aix-ppc64": optional: true @@ -7283,7 +7376,7 @@ __metadata: optional: true bin: esbuild: bin/esbuild - checksum: 10/f55fbd0bfb0f86ce67a6d2c6f6780729d536c330999ecb9f5a38d578fb9fda820acbbc67d6d1d377eed8fed50fc38f14ff9cb014f86dafab94269a7fb2177018 + checksum: 10/500f83a1216d6548053007b85c070d8293395db344605b17418c6cf1217e5e8d338fa77fc8af27c23faa121c5528e5b0004d46d3a0cdeb87d48f1b5fa0164bc5 languageName: node linkType: hard @@ -7428,7 +7521,7 @@ __metadata: languageName: node linkType: hard -"escodegen@npm:^2.0.0, escodegen@npm:^2.1.0": +"escodegen@npm:^2.0.0": version: 2.1.0 resolution: "escodegen@npm:2.1.0" dependencies: @@ -8460,7 +8553,7 @@ __metadata: languageName: node linkType: hard -"fs-extra@npm:^11.0.0, fs-extra@npm:^11.1.0": +"fs-extra@npm:^11.0.0": version: 11.2.0 resolution: "fs-extra@npm:11.2.0" dependencies: @@ -8705,13 +8798,6 @@ __metadata: languageName: node linkType: hard -"github-slugger@npm:^2.0.0": - version: 2.0.0 - resolution: "github-slugger@npm:2.0.0" - checksum: 10/2fb15d78262eeba1e68671f048c62d05ed21e51281cccc7b1c9e8e089e8510b3037fb648b8ba27290e60534df2cb251312a1e7e813204495df621220192fd600 - languageName: node - linkType: hard - "glob-parent@npm:^5.1.2, glob-parent@npm:~5.1.2": version: 5.1.2 resolution: "glob-parent@npm:5.1.2" @@ -9017,33 +9103,6 @@ __metadata: languageName: node linkType: hard -"hast-util-heading-rank@npm:^3.0.0": - version: 3.0.0 - resolution: "hast-util-heading-rank@npm:3.0.0" - dependencies: - "@types/hast": "npm:^3.0.0" - checksum: 10/e5ce4ec9e8017b24ab72702fa0dd401ec6eaf32574120d71c2aa4e8e0f43829dba2e291f49d305a47e8d65b82a9c5adad7985385dc5bc8370f8cec7c8f9313d3 - languageName: node - linkType: hard - -"hast-util-is-element@npm:^3.0.0": - version: 3.0.0 - resolution: "hast-util-is-element@npm:3.0.0" - dependencies: - "@types/hast": "npm:^3.0.0" - checksum: 10/b4e6d84c763ffdc44198ba0c4a5a7430794a7b2c1eec699d37776ea9832eef79f129726c175982103eb3b21f531a6bfd2fa43ce26e1ed6d8f6a87c102ba212c8 - languageName: node - linkType: hard - -"hast-util-to-string@npm:^3.0.0": - version: 3.0.0 - resolution: "hast-util-to-string@npm:3.0.0" - dependencies: - "@types/hast": "npm:^3.0.0" - checksum: 10/b0d51e2cf228edcbed0494755a7f095c5c2b7a0e7564f3ad7b83b89abbabf098b62b3c884e1bb4d3394c0c84486ba39800d78f2ccdbdaa38122be62330dd2357 - languageName: node - linkType: hard - "he@npm:^1.2.0": version: 1.2.0 resolution: "he@npm:1.2.0" @@ -9128,7 +9187,7 @@ __metadata: languageName: node linkType: hard -"html-tags@npm:^3.1.0, html-tags@npm:^3.3.1": +"html-tags@npm:^3.3.1": version: 3.3.1 resolution: "html-tags@npm:3.3.1" checksum: 10/d0e808544b92d8b999cbcc86d539577255a2f0f2f4f73110d10749d1d36e6fe6ad706a0355a8477afb6e000ecdc93d8455b3602951f9a2b694ac9e28f1b52878 @@ -9525,13 +9584,6 @@ __metadata: languageName: node linkType: hard -"is-absolute-url@npm:^4.0.0": - version: 4.0.1 - resolution: "is-absolute-url@npm:4.0.1" - checksum: 10/de172a718439982a54477fdae55f21be69ec0e6a4b205db5484975d2f4ee749851fd46c28f3790dfc51a274c2ed1d0f8457b6d1fff02ab829069fd9cc761e48c - languageName: node - linkType: hard - "is-alphabetical@npm:^1.0.0": version: 1.0.4 resolution: "is-alphabetical@npm:1.0.4" @@ -9888,13 +9940,6 @@ __metadata: languageName: node linkType: hard -"is-plain-object@npm:5.0.0, is-plain-object@npm:^5.0.0": - version: 5.0.0 - resolution: "is-plain-object@npm:5.0.0" - checksum: 10/e32d27061eef62c0847d303125440a38660517e586f2f3db7c9d179ae5b6674ab0f469d519b2e25c147a1a3bc87156d0d5f4d8821e0ce4a9ee7fe1fcf11ce45c - languageName: node - linkType: hard - "is-plain-object@npm:^2.0.4": version: 2.0.4 resolution: "is-plain-object@npm:2.0.4" @@ -9904,6 +9949,13 @@ __metadata: languageName: node linkType: hard +"is-plain-object@npm:^5.0.0": + version: 5.0.0 + resolution: "is-plain-object@npm:5.0.0" + checksum: 10/e32d27061eef62c0847d303125440a38660517e586f2f3db7c9d179ae5b6674ab0f469d519b2e25c147a1a3bc87156d0d5f4d8821e0ce4a9ee7fe1fcf11ce45c + languageName: node + linkType: hard + "is-potential-custom-element-name@npm:^1.0.1": version: 1.0.1 resolution: "is-potential-custom-element-name@npm:1.0.1" @@ -10742,9 +10794,9 @@ __metadata: languageName: node linkType: hard -"jscodeshift@npm:^17.0.0": - version: 17.0.0 - resolution: "jscodeshift@npm:17.0.0" +"jscodeshift@npm:^17.1.1": + version: 17.1.1 + resolution: "jscodeshift@npm:17.1.1" dependencies: "@babel/core": "npm:^7.24.7" "@babel/parser": "npm:^7.24.7" @@ -10762,7 +10814,7 @@ __metadata: neo-async: "npm:^2.5.0" picocolors: "npm:^1.0.1" recast: "npm:^0.23.9" - temp: "npm:^0.9.4" + tmp: "npm:^0.2.3" write-file-atomic: "npm:^5.0.1" peerDependencies: "@babel/preset-env": ^7.1.6 @@ -10771,7 +10823,7 @@ __metadata: optional: true bin: jscodeshift: bin/jscodeshift.js - checksum: 10/d47000c33775336332e1ee431354881ce25a42354a82c712e109f598eac90be747d412c85428e1fa0302136823e44e4f42487746d62752120cd6879665bcef0a + checksum: 10/89a92203e2653c68ae2f12332332ca014aeec8c6cd5ab6947ba53334abd97005b94c0c670c47f2878880d01b89775490ca8efe58494d71137c1f6abae630a53d languageName: node linkType: hard @@ -11306,6 +11358,13 @@ __metadata: languageName: node linkType: hard +"loupe@npm:^3.1.2": + version: 3.1.2 + resolution: "loupe@npm:3.1.2" + checksum: 10/8f5734e53fb64cd914aa7d986e01b6d4c2e3c6c56dcbd5428d71c2703f0ab46b5ab9f9eeaaf2b485e8a1c43f865bdd16ec08ae1a661c8f55acdbd9f4d59c607a + languageName: node + linkType: hard + "lower-case@npm:^2.0.2": version: 2.0.2 resolution: "lower-case@npm:2.0.2" @@ -11446,7 +11505,7 @@ __metadata: languageName: node linkType: hard -"markdown-to-jsx@npm:^7.4.5, markdown-to-jsx@npm:^7.5.0": +"markdown-to-jsx@npm:^7.5.0": version: 7.5.0 resolution: "markdown-to-jsx@npm:7.5.0" peerDependencies: @@ -11676,15 +11735,15 @@ __metadata: languageName: node linkType: hard -"mini-css-extract-plugin@npm:^2.9.1": - version: 2.9.1 - resolution: "mini-css-extract-plugin@npm:2.9.1" +"mini-css-extract-plugin@npm:^2.9.2": + version: 2.9.2 + resolution: "mini-css-extract-plugin@npm:2.9.2" dependencies: schema-utils: "npm:^4.0.0" tapable: "npm:^2.2.1" peerDependencies: webpack: ^5.0.0 - checksum: 10/a4a0c73a054254784b9d39a3a4f117691600355125242dfc46ced0912b4937050823478bdbf403b5392c21e2fb2203902b41677d67c7d668f77b985b594e94c6 + checksum: 10/db6ddb8ba56affa1a295b57857d66bad435d36e48e1f95c75d16fadd6c70e3ba33e8c4141c3fb0e22b4d875315b41c4f58550c6ac73b50bdbe429f768297e3ff languageName: node linkType: hard @@ -11815,17 +11874,6 @@ __metadata: languageName: node linkType: hard -"mkdirp@npm:^0.5.1": - version: 0.5.6 - resolution: "mkdirp@npm:0.5.6" - dependencies: - minimist: "npm:^1.2.6" - bin: - mkdirp: bin/cmd.js - checksum: 10/0c91b721bb12c3f9af4b77ebf73604baf350e64d80df91754dc509491ae93bf238581e59c7188360cec7cb62fc4100959245a42cfe01834efedc5e9d068376c2 - languageName: node - linkType: hard - "mkdirp@npm:^1.0.3": version: 1.0.4 resolution: "mkdirp@npm:1.0.4" @@ -12867,17 +12915,17 @@ __metadata: languageName: node linkType: hard -"postcss-custom-media@npm:^11.0.4": - version: 11.0.4 - resolution: "postcss-custom-media@npm:11.0.4" +"postcss-custom-media@npm:^11.0.5": + version: 11.0.5 + resolution: "postcss-custom-media@npm:11.0.5" dependencies: - "@csstools/cascade-layer-name-parser": "npm:^2.0.3" - "@csstools/css-parser-algorithms": "npm:^3.0.3" - "@csstools/css-tokenizer": "npm:^3.0.2" - "@csstools/media-query-list-parser": "npm:^4.0.1" + "@csstools/cascade-layer-name-parser": "npm:^2.0.4" + "@csstools/css-parser-algorithms": "npm:^3.0.4" + "@csstools/css-tokenizer": "npm:^3.0.3" + "@csstools/media-query-list-parser": "npm:^4.0.2" peerDependencies: postcss: ^8.4 - checksum: 10/097f4ef29bea599c95078de10e1d9d3df31760d77228f496a406d0efca0027ba1692b167c40d472e21e8f4d09d933ee4e4442b88056c269c059309b2ed128105 + checksum: 10/4899ee7ba6fa8db8c639ee82074ad1941f73df53ec9afc6146820638ab0dc260f7a9692dead8872ad7497442bffba97f867d7615356e87e9d4b4b1a8168b837c languageName: node linkType: hard @@ -13669,16 +13717,6 @@ __metadata: languageName: node linkType: hard -"react-colorful@npm:^5.1.2": - version: 5.6.1 - resolution: "react-colorful@npm:5.6.1" - peerDependencies: - react: ">=16.8.0" - react-dom: ">=16.8.0" - checksum: 10/3e02ba013454818d0c323949bd961fb2c19ac18130dfc67a4032aa5b03787c5ffe7ff159c4b97dc3475072d576828ca0c4b8e8ce85b55eaf484180596cdf0403 - languageName: node - linkType: hard - "react-dev-utils@npm:^12.0.0": version: 12.0.1 resolution: "react-dev-utils@npm:12.0.1" @@ -13788,20 +13826,6 @@ __metadata: languageName: node linkType: hard -"react-element-to-jsx-string@npm:^15.0.0": - version: 15.0.0 - resolution: "react-element-to-jsx-string@npm:15.0.0" - dependencies: - "@base2/pretty-print-object": "npm:1.0.1" - is-plain-object: "npm:5.0.0" - react-is: "npm:18.1.0" - peerDependencies: - react: ^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1 || ^18.0.0 - react-dom: ^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1 || ^18.0.0 - checksum: 10/9a874b2f16b4624a72c4b766b096d693a382b9dc7f2264f802395852ae3435ccde8e9e47bbe45cf5f30eba70f8126af6aca832190e285b0096af3ecade994df1 - languageName: node - linkType: hard - "react-error-overlay@npm:^6.0.11": version: 6.0.11 resolution: "react-error-overlay@npm:6.0.11" @@ -13842,13 +13866,6 @@ __metadata: languageName: node linkType: hard -"react-is@npm:18.1.0": - version: 18.1.0 - resolution: "react-is@npm:18.1.0" - checksum: 10/fe09c86d5e12a8531bf3e748660f3dffbe900a6da0b488c7efaf0a866e16b74ecc1b0011b0960b13594f8719f39f87a987c0c85edff0b2d3e2f14b87e7230ad2 - languageName: node - linkType: hard - "react-is@npm:^16.13.1": version: 16.13.1 resolution: "react-is@npm:16.13.1" @@ -14232,33 +14249,6 @@ __metadata: languageName: node linkType: hard -"rehype-external-links@npm:^3.0.0": - version: 3.0.0 - resolution: "rehype-external-links@npm:3.0.0" - dependencies: - "@types/hast": "npm:^3.0.0" - "@ungap/structured-clone": "npm:^1.0.0" - hast-util-is-element: "npm:^3.0.0" - is-absolute-url: "npm:^4.0.0" - space-separated-tokens: "npm:^2.0.0" - unist-util-visit: "npm:^5.0.0" - checksum: 10/b9b2e4e5974a7d1e4030dc42bfad980d4700af35b6b20b36fc7ff0521897a8f20d3fe5e170255c428148fdd5a0653a73683da783124038d17b24f26dd59d20e8 - languageName: node - linkType: hard - -"rehype-slug@npm:^6.0.0": - version: 6.0.0 - resolution: "rehype-slug@npm:6.0.0" - dependencies: - "@types/hast": "npm:^3.0.0" - github-slugger: "npm:^2.0.0" - hast-util-heading-rank: "npm:^3.0.0" - hast-util-to-string: "npm:^3.0.0" - unist-util-visit: "npm:^5.0.0" - checksum: 10/292074643f8462c70f498bc8bf18a8c959073b96efc249f61e69fa9e36eb81d9b91d62199a90217c604e1c3904e8ff0a75df70d67e41bead56de93afb725c2d0 - languageName: node - linkType: hard - "relateurl@npm:^0.2.7": version: 0.2.7 resolution: "relateurl@npm:0.2.7" @@ -14522,17 +14512,6 @@ __metadata: languageName: node linkType: hard -"rimraf@npm:~2.6.2": - version: 2.6.3 - resolution: "rimraf@npm:2.6.3" - dependencies: - glob: "npm:^7.1.3" - bin: - rimraf: ./bin.js - checksum: 10/756419f2fa99aa119c46a9fc03e09d84ecf5421a80a72d1944c5088c9e4671e77128527a900a313ed9d3fdbdd37e2ae05486cd7e9116d5812d8c31f2399d7c86 - languageName: node - linkType: hard - "rollup@npm:^4.20.0": version: 4.22.4 resolution: "rollup@npm:4.22.4" @@ -15199,13 +15178,6 @@ __metadata: languageName: node linkType: hard -"space-separated-tokens@npm:^2.0.0": - version: 2.0.2 - resolution: "space-separated-tokens@npm:2.0.2" - checksum: 10/202e97d7ca1ba0758a0aa4fe226ff98142073bcceeff2da3aad037968878552c3bbce3b3231970025375bbba5aee00c5b8206eda408da837ab2dc9c0f26be990 - languageName: node - linkType: hard - "sparkles@npm:^1.0.0": version: 1.0.1 resolution: "sparkles@npm:1.0.1" @@ -15320,16 +15292,21 @@ __metadata: languageName: node linkType: hard -"storybook@npm:8.3.6": - version: 8.3.6 - resolution: "storybook@npm:8.3.6" +"storybook@npm:8.4.2": + version: 8.4.2 + resolution: "storybook@npm:8.4.2" dependencies: - "@storybook/core": "npm:8.3.6" + "@storybook/core": "npm:8.4.2" + peerDependencies: + prettier: ^2 || ^3 + peerDependenciesMeta: + prettier: + optional: true bin: getstorybook: ./bin/index.cjs sb: ./bin/index.cjs storybook: ./bin/index.cjs - checksum: 10/b980e90297c918e68dc31ea126780a30ba29076a99921a2558d61cae26491f24f0bc494d6c3aff68d587397d25d1224496df91e76fc6f2a0616f7d97ab9fd46a + checksum: 10/e3f1e32371a6f70639fa4fbc24e703aeb99bdb417b7c4acca6d331bf777b7c9343195175c6c088e162b8feb50f267ea70db9dd23f3ab07f110e1a76e3c7618ca languageName: node linkType: hard @@ -15892,25 +15869,6 @@ __metadata: languageName: node linkType: hard -"telejson@npm:^7.2.0": - version: 7.2.0 - resolution: "telejson@npm:7.2.0" - dependencies: - memoizerific: "npm:^1.11.3" - checksum: 10/6e89b3d3c45b5a2aced9132f6a968fcdf758c00be4c3acb115d7d81e95c9e04083a7a4a9b43057fcf48b101156c1607a38f5491615956acb28d4d1f78a4bda20 - languageName: node - linkType: hard - -"temp@npm:^0.9.4": - version: 0.9.4 - resolution: "temp@npm:0.9.4" - dependencies: - mkdirp: "npm:^0.5.1" - rimraf: "npm:~2.6.2" - checksum: 10/38d40564656c6e8e3caee41c592b3cc076d257ab4746ae4a6a179c44eb4a6d3e8a19a08c7716c8e88756bb898d6e56dd0a9e0408249bbcb3c990a178c34d0571 - languageName: node - linkType: hard - "terser-webpack-plugin@npm:^5.3.1, terser-webpack-plugin@npm:^5.3.10, terser-webpack-plugin@npm:^5.3.3": version: 5.3.10 resolution: "terser-webpack-plugin@npm:5.3.10" @@ -16035,6 +15993,13 @@ __metadata: languageName: node linkType: hard +"tmp@npm:^0.2.3": + version: 0.2.3 + resolution: "tmp@npm:0.2.3" + checksum: 10/7b13696787f159c9754793a83aa79a24f1522d47b87462ddb57c18ee93ff26c74cbb2b8d9138f571d2e0e765c728fb2739863a672b280528512c6d83d511c6fa + languageName: node + linkType: hard + "tmpl@npm:1.0.5": version: 1.0.5 resolution: "tmpl@npm:1.0.5" @@ -16277,7 +16242,7 @@ __metadata: languageName: node linkType: hard -"type-fest@npm:^2.19.0, type-fest@npm:~2.19": +"type-fest@npm:^2.19.0": version: 2.19.0 resolution: "type-fest@npm:2.19.0" checksum: 10/7bf9e8fdf34f92c8bb364c0af14ca875fac7e0183f2985498b77be129dc1b3b1ad0a6b3281580f19e48c6105c037fb966ad9934520c69c6434d17fd0af4eed78 @@ -16488,15 +16453,6 @@ __metadata: languageName: node linkType: hard -"unist-util-is@npm:^6.0.0": - version: 6.0.0 - resolution: "unist-util-is@npm:6.0.0" - dependencies: - "@types/unist": "npm:^3.0.0" - checksum: 10/edd6a93fb2255addf4b9eeb304c1da63c62179aef793169dd64ab955cf2f6814885fe25f95f8105893e3562dead348af535718d7a84333826e0491c04bf42511 - languageName: node - linkType: hard - "unist-util-stringify-position@npm:^2.0.0": version: 2.0.3 resolution: "unist-util-stringify-position@npm:2.0.3" @@ -16516,16 +16472,6 @@ __metadata: languageName: node linkType: hard -"unist-util-visit-parents@npm:^6.0.0": - version: 6.0.1 - resolution: "unist-util-visit-parents@npm:6.0.1" - dependencies: - "@types/unist": "npm:^3.0.0" - unist-util-is: "npm:^6.0.0" - checksum: 10/645b3cbc5e923bc692b1eb1a9ca17bffc5aabc25e6090ff3f1489bff8effd1890b28f7a09dc853cb6a7fa0da8581bfebc9b670a68b53c4c086cb9610dfd37701 - languageName: node - linkType: hard - "unist-util-visit@npm:^2.0.0": version: 2.0.3 resolution: "unist-util-visit@npm:2.0.3" @@ -16537,17 +16483,6 @@ __metadata: languageName: node linkType: hard -"unist-util-visit@npm:^5.0.0": - version: 5.0.0 - resolution: "unist-util-visit@npm:5.0.0" - dependencies: - "@types/unist": "npm:^3.0.0" - unist-util-is: "npm:^6.0.0" - unist-util-visit-parents: "npm:^6.0.0" - checksum: 10/f2bbde23641e9ade7640358c06ddeec0f38342322eb8e7819d9ee380b0f859d25d084dde22bf63db0280b3b2f36575f15aa1d6c23acf276c91c2493cf799e3b0 - languageName: node - linkType: hard - "universalify@npm:^0.2.0": version: 0.2.0 resolution: "universalify@npm:0.2.0" @@ -17137,6 +17072,42 @@ __metadata: languageName: node linkType: hard +"webpack@npm:^5.96.1": + version: 5.96.1 + resolution: "webpack@npm:5.96.1" + dependencies: + "@types/eslint-scope": "npm:^3.7.7" + "@types/estree": "npm:^1.0.6" + "@webassemblyjs/ast": "npm:^1.12.1" + "@webassemblyjs/wasm-edit": "npm:^1.12.1" + "@webassemblyjs/wasm-parser": "npm:^1.12.1" + acorn: "npm:^8.14.0" + browserslist: "npm:^4.24.0" + chrome-trace-event: "npm:^1.0.2" + enhanced-resolve: "npm:^5.17.1" + es-module-lexer: "npm:^1.2.1" + eslint-scope: "npm:5.1.1" + events: "npm:^3.2.0" + glob-to-regexp: "npm:^0.4.1" + graceful-fs: "npm:^4.2.11" + json-parse-even-better-errors: "npm:^2.3.1" + loader-runner: "npm:^4.2.0" + mime-types: "npm:^2.1.27" + neo-async: "npm:^2.6.2" + schema-utils: "npm:^3.2.0" + tapable: "npm:^2.1.1" + terser-webpack-plugin: "npm:^5.3.10" + watchpack: "npm:^2.4.1" + webpack-sources: "npm:^3.2.3" + peerDependenciesMeta: + webpack-cli: + optional: true + bin: + webpack: bin/webpack.js + checksum: 10/d3419ffd198252e1d0301bd0c072cee93172f3e47937c745aa8202691d2f5d529d4ba4a1965d1450ad89a1bcd3c1f70ae09e57232b0d01dd38d69c1060e964d5 + languageName: node + linkType: hard + "websocket-driver@npm:>=0.5.1, websocket-driver@npm:^0.7.4": version: 0.7.4 resolution: "websocket-driver@npm:0.7.4"