Merge branch 'main' into withTableSettings/reset-action

gravity-ui · Apr 19, 2024 · 7b6b5ed · 7b6b5ed
2 parents d31ad8d + d89610a
commit 7b6b5ed
Show file tree

Hide file tree

Showing 14 changed files with 222 additions and 134 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,17 @@
 # Changelog
 
+## [6.12.0](https://github.com/gravity-ui/uikit/compare/v6.11.0...v6.12.0) (2024-04-18)
+
+
+### Features
+
+* **useList:** added ability to define initial value to useListState ([#1483](https://github.com/gravity-ui/uikit/issues/1483)) ([7f66d28](https://github.com/gravity-ui/uikit/commit/7f66d28d9e3b43ebe388b90b6bc8e2799962d0c0))
+
+
+### Bug Fixes
+
+* do not call warnOnce function in production ([#1520](https://github.com/gravity-ui/uikit/issues/1520)) ([9ab7d7c](https://github.com/gravity-ui/uikit/commit/9ab7d7c86a06a6f94126a87acfb23033709ec8a1))
+
 ## [6.11.0](https://github.com/gravity-ui/uikit/compare/v6.10.2...v6.11.0) (2024-04-17)
 
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@gravity-ui/uikit",
-    "version": "6.11.0",
+    "version": "6.12.0",
     "description": "Gravity UI base styling and components",
     "license": "MIT",
     "repository": {

diff --git a/src/components/Sheet/README.md b/src/components/Sheet/README.md
@@ -1,20 +1,50 @@
+<!--GITHUB_BLOCK-->
+
 # Sheet
 
-Sheet component for mobile devices
-
-## PropTypes
-
-| Name                     | Type       | Required | Default     | Description                                                                                                                                                                 |
-| :----------------------- | :--------- | :------: | :---------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| visible                  | `boolean`  |    ✓     |             | Show/hide sheet                                                                                                                                                             |
-| allowHideOnContentScroll | `boolean`  |          | `true`      | Enable the behavior in which you can close the sheet window with a swipe down if the content is scrolled to its top (`contentNode.scrollTop === 0`) or has no scroll at all |
-| hideTopBar               | `boolean`  |          |             | Hide top bar with resize handle                                                                                                                                             |
-| id                       | `string`   |          | `modal`     | ID of the sheet, used as hash in URL. It's important to specify different `id` values if there can be more than one sheet on the page                                       |
-| title                    | `string`   |          | `undefined` | Title of the sheet window                                                                                                                                                   |
-| className                | `string`   |          | `undefined` | Class name for the sheet window                                                                                                                                             |
-| contentClassName         | `string`   |          | `undefined` | Class name for the sheet content                                                                                                                                            |
-| swipeAreaClassName       | `string`   |          | `undefined` | Class name for the swipe area                                                                                                                                               |
-| onClose                  | `function` |          | `undefined` | Function called when the sheet is closed (when `visible` sets to `false`)                                                                                                   |
+<!--/GITHUB_BLOCK-->
+
+```tsx
+import {Sheet} from '@gravity-ui/uikit';
+```
+
+`Sheet` is a component designed to be used in a mobile context as an information or interactive element. You can place content of any size in it - internal scrolling and dynamic resizing are supported.
+
+On mobile devices, you can move `Sheet` by pulling on its main part or the swipe area. To close it, swipe down or touch the area outside the `Sheet`.
+
+## Usage
+
+```tsx
+import React from 'react';
+import {Button, Sheet} from '@gravity-ui/uikit';
+
+const SheetExample = () => {
+  const [visible, setVisible] = React.useState(false);
+
+  return (
+    <React.Fragment>
+      <Button onClick={() => setVisible(true)}>Open Sheet</Button>
+      <Sheet visible={visible} onClose={() => setVisible(false)} title="Content Sheet">
+        Content
+      </Sheet>
+    </React.Fragment>
+  );
+};
+```
+
+## Properties
+
+| Name                     | Description                                                                                                                                                    |    Type    |   Default   |
+| :----------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------: | :---------: |
+| visible                  | Manages `Sheet` visibility                                                                                                                                     | `boolean`  |   `false`   |
+| allowHideOnContentScroll | Enable the behavior of the sheet window closing by swiping down if the content is scrolled to its top (`content Node.scrollTop === 0`) or has no scroll at all | `boolean`  |   `true`    |
+| hideTopBar               | Hide top bar with resize handle                                                                                                                                | `boolean`  |             |
+| id                       | ID of the sheet, used as hash in URL. It's important to specify different `id` values if there can be more than one sheet on the page                          |  `string`  |   `modal`   |
+| title                    | Title of the sheet window                                                                                                                                      |  `string`  | `undefined` |
+| className                | HTML `class` attribute                                                                                                                                         |  `string`  | `undefined` |
+| contentClassName         | HTML `class` attribute for the sheet content                                                                                                                   |  `string`  | `undefined` |
+| swipeAreaClassName       | HTML `class` attribute for the swipe area                                                                                                                      |  `string`  | `undefined` |
+| onClose                  | Handler for close event                                                                                                                                        | `function` | `undefined` |
 
 ## CSS API
 

diff --git a/src/components/TreeSelect/TreeSelect.tsx b/src/components/TreeSelect/TreeSelect.tsx
@@ -80,10 +80,12 @@ export const TreeSelect = React.forwardRef(function TreeSelect<T>(
     });
 
     const listState = useListState({
-        expandedById,
-        disabledById,
-        activeItemId,
-        selectedById: selected,
+        controlledValues: {
+            expandedById,
+            disabledById,
+            activeItemId,
+            selectedById: selected,
+        },
     });
 
     const setActiveItemId = propsSetActiveItemId ?? listState.setActiveItemId;

diff --git a/...ents/TreeSelect/__stories__/components/WithGroupSelectionControlledStateAndCustomIcon.tsx b/...ents/TreeSelect/__stories__/components/WithGroupSelectionControlledStateAndCustomIcon.tsx
@@ -5,8 +5,8 @@ import {ChevronDown, ChevronUp, Database, PlugConnection} from '@gravity-ui/icon
 import {Button} from '../../../Button';
 import {Icon} from '../../../Icon';
 import {Flex, spacing} from '../../../layout';
-import {ListItemView, getListParsedState} from '../../../useList';
-import type {ListItemCommonProps, ListItemId} from '../../../useList';
+import {ListItemView, getListParsedState, useListState} from '../../../useList';
+import type {ListItemCommonProps} from '../../../useList';
 import {createRandomizedData} from '../../../useList/__stories__/utils/makeData';
 import {TreeSelect} from '../../TreeSelect';
 import type {TreeSelectProps} from '../../types';
@@ -40,9 +40,12 @@ export const WithGroupSelectionControlledStateAndCustomIconExample = ({
     );
 
     const [value, setValue] = React.useState<string[]>([]);
-    const [expandedById, setExpanded] = React.useState<Record<ListItemId, boolean>>(
-        () => getListParsedState(items).initialState.expandedById,
-    );
+
+    const {expandedById, setExpanded} = useListState({
+        initialValues: {
+            expandedById: getListParsedState(items).initialState.expandedById,
+        },
+    });
 
     return (
         <Flex>

diff --git a/src/components/layout/LayoutProvider/LayoutProvider.tsx b/src/components/layout/LayoutProvider/LayoutProvider.tsx
@@ -6,21 +6,16 @@ import {useCurrentActiveMediaQuery} from '../hooks/useCurrentActiveMediaQuery';
 import type {LayoutTheme, MediaType, RecursivePartial} from '../types';
 import {makeLayoutDefaultTheme} from '../utils/makeLayoutDefaultTheme';
 
-interface LayoutProviderProps {
+export interface LayoutProviderProps {
     theme?: RecursivePartial<LayoutTheme>;
     /**
-     * During ssr you can override default (`s`) media screen size
+     * During ssr you can override default (`s`) media screen size if needed
      */
     initialMediaQuery?: MediaType;
     children: React.ReactNode;
 }
 
-/**
- * Provide context for layout components and current media queries.
- * ---
- * Storybook - https://preview.gravity-ui.com/uikit/?path=/docs/layout--playground#layoutprovider-and-layouttheme
- */
-export function LayoutProvider({
+export function PrivateLayoutProvider({
     children,
     theme: override,
     initialMediaQuery,
@@ -39,3 +34,14 @@ export function LayoutProvider({
         </LayoutContext.Provider>
     );
 }
+
+/**
+ * @deprecated - already used as part of ThemeProvider. To override layout theme use `layout` prop
+ *
+ * Provide context for layout components and current media queries.
+ * ---
+ * Storybook - https://preview.gravity-ui.com/uikit/?path=/docs/layout--playground#layoutprovider-and-layouttheme
+ */
+export function LayoutProvider({children}: LayoutProviderProps) {
+    return children;
+}
diff --git a/src/components/layout/LayoutProvider/__stories__/Layout.mdx b/src/components/layout/LayoutProvider/__stories__/Layout.mdx
@@ -32,7 +32,6 @@ import {Container, Row, Col, Flex} from '@gravity-ui/uikit';
 
 ### Components:
 
--   [LayoutProvider and LayoutTheme](#layoutprovider-and-layouttheme)
 -   [Layout Grid](#layout-grid)
     -   [Row](#row)
     -   [Col](#col)
@@ -75,17 +74,17 @@ _You can override default values on project level:_
 ```
 
 ```tsx
-import {LayoutProvider, LayoutTheme} from '@gravity-ui/uikit';
+import {ThemeProvider, LayoutTheme} from '@gravity-ui/uikit';
 
-const layoutTheme: LayoutTheme = {
+const theme: LayoutTheme = {
     spaceBaseSize: 5,
 };
 
 export const App = () => {
     return (
-        <LayoutProvider theme={layoutTheme}>
+        <ThemeProvider layout={{theme}}>
             {...}
-        </LayoutProvider>
+        </ThemeProvider>
     );
 };
 ```
@@ -121,55 +120,29 @@ We use `mobile-first` approach. It means that you should adapt you app to deskto
 > To override breakpoint use `theme` breakpoints property;
 
     ```tsx
-    export const APP_LAYOUT_THEME: LayoutTheme = {
+    const APP_LAYOUT_THEME: LayoutTheme = {
+        spaceBaseSize: 4,
+        components: {
+            container: {
+                gutters: 3,
+                media: {
+                    l: {
+                        gutters: 5,
+                    },
+                },
+            },
+        },
         breakpoints: {
             s: 320,
             l: 980,
         }
     };
 
-    <LayoutProvider theme={APP_LAYOUT_THEME}>
+    <ThemeProvider layout={{theme: APP_LAYOUT_THEME}}>
         {...}
-    </LayoutProvider>
+    </ThemeProvider>
     ```
 
-## LayoutProvider and LayoutTheme
-
-Through `LayoutProvider` components can get default props which are corresponding to different screen sizes.
-
-Usage of `LayoutProvider` is optional. Use it if you need to override default spacing or add default behaviour to connected to theme compoennts (now only `Container`)
-
-### props:
-
--   `theme` - partial LayoutTheme onject that will be override original theme;
--   `initialMediaQuery` - use can directly pass initial
-
-```tsx
-import {LayoutProvider, LayoutTheme} from '@gravity-ui/uikit';
-
-export const APP_LAYOUT_THEME: LayoutTheme = {
-    spaceBaseSize: 4,
-    components: {
-        container: {
-            gutters: 3,
-            media: {
-                l: {
-                    gutters: 5,
-                },
-            },
-        },
-    },
-};
-
-export const App = () => {
-    return (
-        <LayoutProvider theme={AWESOME_LAYOUT_THEME}>
-            <Router />
-        </LayoutProvider>
-    );
-};
-```
-
 ## Box
 
 The `Box` component is a developer friend and basic block to build other components. Aware about spacing, its own sizes and most commonly used CSS properties.

diff --git a/src/components/layout/demo/LayoutPresenter/LayoutPresenter.tsx b/src/components/layout/demo/LayoutPresenter/LayoutPresenter.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 
 import {Text} from '../../../Text';
 import type {LayoutTheme} from '../../../layout';
+import {ThemeProvider} from '../../../theme';
 import {Flex} from '../../Flex/Flex';
-import {LayoutProvider} from '../../LayoutProvider/LayoutProvider';
 import {useLayoutContext} from '../../hooks/useLayoutContext';
 import {sp} from '../../spacing/spacing';
 
@@ -35,7 +35,7 @@ function Title({title}: {title?: string}) {
 
 export const LayoutPresenter = ({children, title, theme}: LayoutPresenterProps) => {
     return (
-        <LayoutProvider theme={theme}>
+        <ThemeProvider layout={{theme}}>
             <Title title={title} />
             <div
                 style={{
@@ -46,6 +46,6 @@ export const LayoutPresenter = ({children, title, theme}: LayoutPresenterProps)
             >
                 {children}
             </div>
-        </LayoutProvider>
+        </ThemeProvider>
     );
 };
diff --git a/src/components/layout/index.ts b/src/components/layout/index.ts
@@ -4,7 +4,7 @@ export * from './Row/Row';
 export * from './Flex/Flex';
 export * from './Box/Box';
 export * from './Container/Container';
-export * from './LayoutProvider/LayoutProvider';
+export {LayoutProvider} from './LayoutProvider/LayoutProvider';
 export * from './spacing/spacing';
 
 export * from './hooks/useLayoutContext';