Merge branch 'main' into text-area-heigh

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [6.23.1](https://github.com/gravity-ui/uikit/compare/v6.23.0...v6.23.1) (2024-08-14)
+
+
+### Bug Fixes
+
+* **useList:** fixed expanded controlled state behaviour ([#1749](https://github.com/gravity-ui/uikit/issues/1749)) ([82db00e](https://github.com/gravity-ui/uikit/commit/82db00ef28785237285c1002b38236668530f879))
+
 ## [6.23.0](https://github.com/gravity-ui/uikit/compare/v6.22.0...v6.23.0) (2024-08-06)
 
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gravity-ui/uikit",
-    "version": "6.23.0",
+    "version": "6.23.1",
     "description": "Gravity UI base styling and components",
     "keywords": [
         "component",

src/components/Button/__tests__/Button.visual.test.tsx

@@ -2,9 +2,21 @@ import React from 'react';
 
 import {test} from '~playwright/core';
 
+import {createSmokeScenarios} from '../../../stories/tests-factory/create-smoke-scenarios';
+import {Button} from '../Button';
+
+import {
+    defaultProps,
+    disabledCases,
+    loadingCases,
+    pinsCases,
+    selectedCases,
+    sizeCases,
+    viewsCases,
+} from './cases';
 import {ButtonStories, CustomIconSizeButton} from './helpersPlaywright';
 
-test.describe('Button', () => {
+test.describe('Button', {tag: '@Button'}, () => {
     test('render story: <Default>', async ({mount, expectScreenshot}) => {
         await mount(<ButtonStories.Default />);
 
@@ -76,4 +88,21 @@ test.describe('Button', () => {
 
         await expectScreenshot();
     });
+
+    const smokeScenarios = createSmokeScenarios(defaultProps, {
+        size: sizeCases,
+        selected: selectedCases,
+        disabled: disabledCases,
+        loading: loadingCases,
+        view: viewsCases,
+        pin: pinsCases,
+    });
+
+    smokeScenarios.forEach(([title, details, props]) => {
+        test(title, details, async ({mount, expectScreenshot}) => {
+            await mount(<Button {...props} />);
+
+            await expectScreenshot();
+        });
+    });
 });

src/components/Button/__tests__/cases.ts

@@ -0,0 +1,61 @@
+import type {CasesWithName} from '../../../stories/tests-factory/models';
+import type {ButtonProps} from '../Button';
+
+export const defaultProps: ButtonProps = {
+    children: 'Text',
+};
+
+export const sizeCases: CasesWithName<ButtonProps['size']> = [
+    ['xs', 'xs'],
+    ['s', 's'],
+    ['m', 'm'],
+    ['l', 'l'],
+    ['xl', 'xl'],
+];
+
+export const selectedCases: CasesWithName<ButtonProps['selected']> = [['selected', true]];
+
+export const disabledCases: CasesWithName<ButtonProps['disabled']> = [['disabled', true]];
+
+export const loadingCases: CasesWithName<ButtonProps['loading']> = [['loading', true]];
+
+export const viewsCases: CasesWithName<ButtonProps['view']> = [
+    ['normal', 'normal'],
+    ['action', 'action'],
+    ['outlined', 'outlined'],
+    ['outlined-info', 'outlined-info'],
+    ['outlined-success', 'outlined-success'],
+    ['outlined-warning', 'outlined-warning'],
+    ['outlined-danger', 'outlined-danger'],
+    ['outlined-utility', 'outlined-utility'],
+    ['outlined-action', 'outlined-action'],
+    ['raised', 'raised'],
+    ['flat', 'flat'],
+    ['flat-secondary', 'flat-secondary'],
+    ['flat-info', 'flat-info'],
+    ['flat-success', 'flat-success'],
+    ['flat-warning', 'flat-warning'],
+    ['flat-danger', 'flat-danger'],
+    ['flat-utility', 'flat-utility'],
+    ['flat-action', 'flat-action'],
+    ['normal-contrast', 'normal-contrast'],
+    ['outlined-contrast', 'outlined-contrast'],
+    ['flat-contrast', 'flat-contrast'],
+];
+
+export const pinsCases: CasesWithName<ButtonProps['pin']> = [
+    ['round-round', 'round-round'],
+    ['brick-brick', 'brick-brick'],
+    ['clear-clear', 'clear-clear'],
+    ['circle-circle', 'circle-circle'],
+    ['round-brick', 'round-brick'],
+    ['brick-round', 'brick-round'],
+    ['round-clear', 'round-clear'],
+    ['clear-round', 'clear-round'],
+    ['brick-clear', 'brick-clear'],
+    ['clear-brick', 'clear-brick'],
+    ['circle-brick', 'circle-brick'],
+    ['brick-circle', 'brick-circle'],
+    ['circle-clear', 'circle-clear'],
+    ['clear-circle', 'clear-circle'],
+];

src/components/Label/__tests__/Label.visual.test.tsx

@@ -41,7 +41,7 @@ test.describe('Label', () => {
         await expectScreenshot();
     });
 
-    test('render story: <ShowcaseStory>', async ({mount, expectScreenshot}) => {
+    test.skip('render story: <ShowcaseStory>', async ({mount, expectScreenshot}) => {
         await mount(<LabelStories.ShowcaseStory />);
 
         await expectScreenshot();

src/components/TreeSelect/__stories__/TreeSelectDocs.md

@@ -4,13 +4,15 @@ Rewritten component [Select](https://preview.gravity-ui.com/uikit/?path=/docs/co
 
 `Storybook` provides complex examples how to use this components from this documentation.
 
-### Import:
+## Import:
 
 ```tsx
 import {unstable_TreeSelect as TreeSelect} from '@gravity-ui/uikit/unstable';
 ```
 
-### Basic example:
+## Example
+
+### Basic:
 
 ```tsx
 import {
@@ -59,3 +61,42 @@ const Component = () => {
   );
 };
 ```
+
+## Props:
+
+### getItemById:
+
+Take a look at this example:
+
+```tsx
+<TreeSelect
+  value={['two']}
+  items={['one', 'two', 'free']}
+  mapItemDataToContentProps={(title) => ({title})}
+/>
+```
+
+In this case we will see select with `empty` value.
+
+Why this happens?
+
+Internal list representation make own `id` for every item. By default it bases on index of base and nested arrays.
+Result `id` will be computed by formula: `{root-array-item-index}-{child-array-index-if-exists}-{...}`.
+In example to select second item you need to set as a value item index:
+
+```sh
+value={['1']}
+```
+
+To fix our example we need to use `getItemById` prop and explicitly tell `TreeSelect` to use items values as uniq ids:
+
+```diff
+<TreeSelect
+  value={['two']}
++ getItemById={(value: id) => id}
+  items={['one', 'two', 'free']}
+  mapItemDataToContentProps={(title) => ({title})}
+/>
+```
+
+Now we will se selected element with value `two`

src/components/useList/hooks/useList.ts

@@ -50,15 +50,6 @@ export const useList = <T>({
         withExpandedState,
     });
 
-    const {visibleFlattenIds, idToFlattenIndex, rootIds} = useFlattenListItems({
-        items,
-        /**
-         * By default controlled from list items declaration state
-         */
-        expandedById: innerState.expandedById,
-        getItemId,
-    });
-
     const realState = React.useMemo(() => {
         if (controlledState) {
             return {
@@ -70,6 +61,15 @@ export const useList = <T>({
         return innerState;
     }, [controlledState, innerState]);
 
+    const {visibleFlattenIds, idToFlattenIndex, rootIds} = useFlattenListItems({
+        items,
+        /**
+         * By default controlled from list items declaration state
+         */
+        expandedById: realState.expandedById,
+        getItemId,
+    });
+
     return {
         state: realState,
         structure: {

src/components/useList/hooks/useListFilter.ts

@@ -47,7 +47,7 @@ export function useListFilter<T>({
     const filterRef = React.useRef<HTMLInputElement>(null);
     const [filter, setFilter] = React.useState(initialFilterValue);
     const [prevItems, setPrevItems] = React.useState(externalItems);
-    const [items, setItems] = React.useState(externalItems);
+    const [filteredItems, setFilteredItems] = React.useState(externalItems);
 
     const filterItemsFn = React.useCallback(
         (nextFilterValue: string, items: ListItemType<T>[]) => {
@@ -68,13 +68,13 @@ export function useListFilter<T>({
     );
 
     if (externalItems !== prevItems) {
-        setItems(filterItemsFn(filter, externalItems));
+        setFilteredItems(filterItemsFn(filter, externalItems));
         setPrevItems(externalItems);
     }
 
     const debouncedFn = React.useCallback(
-        debounce((value) => setItems(filterItemsFn(value, externalItems)), debounceTimeout),
-        [setItems, filterItemsFn, debounceTimeout],
+        debounce((value) => setFilteredItems(filterItemsFn(value, externalItems)), debounceTimeout),
+        [setFilteredItems, filterItemsFn, externalItems, debounceTimeout],
     );
 
     const {onFilterUpdate, reset} = React.useMemo(() => {
@@ -96,7 +96,7 @@ export function useListFilter<T>({
         filterRef,
         filter,
         reset,
-        items,
+        items: filteredItems,
         onFilterUpdate,
     };
 }