@gravity-ui/dashkit 6.7.1 → 6.8.0

package/README.md

@@ -325,6 +325,63 @@ type MenuItem = {
 DashKit.setSettings({menu: [] as Array<MenuItem>});
 ```
 
+### CSS API
+
+| Name                                           | Description           |
+|-:----------------------------------------------|-:---------------------|
+| Action panel variables                         |                       |
+| `--dashkit-action-panel-color`                 | Background color      |
+| `--dashkit-action-panel-border-color`          | Border color          |
+| `--dashkit-action-panel-border-radius`         | Border radius         |
+| Action panel item variables                    |                       |
+| `--dashkit-action-panel-item-color`            | Backgroud color       |
+| `--dashkit-action-panel-item-text-color`       | Text color            |
+| `--dashkit-action-panel-item-color-hover`      | Hover backgroud color |
+| `--dashkit-action-panel-item-text-color-hover` | Hover text color      |
+| Overlay variables                              |                       |
+| `--dashkit-overlay-border-color`               | Border color          |
+| `--dashkit-overlay-color`                      | Background color      |
+| `--dashkit-overlay-opacity`                    | Opacity               |
+| Grid item variables                            |                       |
+| `--dashkit-grid-item-edit-opacity`             | Opacity               |
+| `--dashkit-grid-item-border-radius`            | Border radius         |
+| Placeholder variables                          |                       |
+| `--dashkit-placeholder-color`                  | Background color      |
+| `--dashkit-placeholder-opacity`                | Opacity               |
+
+#### Usage example
+
+
+```css
+.custom-theme-wrapper {
+    --dashkit-grid-item-edit-opacit: 1;
+    --dashkit-overlay-color: var(--g-color-base-float);
+    --dashkit-overlay-border-color: var(--g-color-base-float);
+    --dashkit-overlay-opacity: 0.5;
+
+    --dashkit-action-panel-border-color: var(--g-color-line-info);
+    --dashkit-action-panel-color: var(--g-color-base-float-accent);
+    --dashkit-action-panel-border-radius: var(--g-border-radius-xxl);
+}
+```
+
+```tsx
+// ....
+
+const CustomThemeWrapper = (props: {
+    dashkitProps: DashkitProps;
+    actionPanelProps: ActionPanelProps;
+}) => {
+    return (
+        <div className="custom-theme-wrapper">
+            <Dashkit {...props.dashkitProps} />
+            <ActionPanel {...props.actionPanelProps} />
+        </div>
+    );
+};
+```
+
+
 ## Development
 
 ### Build & watch

package/build/cjs/components/ActionPanel/ActionPanel.css

@@ -1,33 +1,75 @@
 .dashkit-action-panel {
-  background-color: var(--g-color-base-float);
-  box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
+  --_--dashkit-action-panel-color: var(--dashkit-action-panel-color, var(--g-color-base-float));
+  --_--dashkit-action-panel-border-color: var(
+      --dashkit-action-panel-border-color,
+      var(--g-color-base-brand)
+  );
+  --_--dashkit-action-panel-border-radius: var(
+      --dashkit-action-panel-border-radius,
+      var(--g-border-radius-xl)
+  );
+  background-color: var(--_--dashkit-action-panel-color);
   position: fixed;
   bottom: 20px;
   display: flex;
-  border-radius: 8px;
+  border-radius: var(--_--dashkit-action-panel-border-radius);
+  border: 2px solid var(--_--dashkit-action-panel-border-color);
   padding: 8px;
   gap: 0;
   left: 50%;
-  transform: translateX(-50%);
+  transform: translateX(-50%) translateY(0);
   z-index: 1;
 }
+.dashkit-action-panel-enter {
+  transform: translateX(-50%) translateY(calc(100% + 20px));
+  will-change: transform;
+}
+.dashkit-action-panel-enter-active {
+  transform: translateX(-50%) translateY(0);
+  transition: transform 300ms ease;
+}
+.dashkit-action-panel-exit {
+  transform: translateX(-50%) translateY(0);
+  will-change: transform;
+}
+.dashkit-action-panel-exit-active {
+  transform: translateX(-50%) translateY(calc(100% + 20px));
+  transition: transform 300ms ease;
+}
 .dashkit-action-panel__item {
+  --_--dashkit-action-panel-item-color: var(--dashkit-action-panel-item-color, transparent);
+  --_--dashkit-action-panel-item-text-color: var(
+      --dashkit-action-panel-item-text-color,
+      var(--g-color-text-primary)
+  );
+  --_--dashkit-action-panel-item-color-hover: var(
+      --dashkit-action-panel-item-color-hover,
+      var(--g-color-base-simple-hover)
+  );
+  --_--dashkit-action-panel-item-text-color-hover: var(
+      --dashkit-action-panel-item-text-color-hover,
+      var(--g-color-text-primary)
+  );
   height: 68px;
   width: 98px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  transition: 0.3s background-color ease-in-out;
+  transition: 300ms color ease-in-out, 300ms background-color ease-in-out;
   border-radius: 6px;
   padding: 0 12px;
   box-sizing: border-box;
   white-space: nowrap;
   overflow: hidden;
+  background-color: var(--_--dashkit-action-panel-item-color);
+  color: var(--_--dashkit-action-panel-item-text-color);
+  will-change: color, backgroung-color;
 }
 .dashkit-action-panel__item:hover {
   cursor: pointer;
-  background-color: var(--g-color-base-simple-hover);
+  background-color: var(--_--dashkit-action-panel-item-color-hover);
+  color: var(--_--dashkit-action-panel-item-text-color-hover);
 }
 .dashkit-action-panel__icon {
   margin-bottom: 4px;

package/build/cjs/components/ActionPanel/ActionPanel.d.ts

@@ -10,5 +10,7 @@ export type ActionPanelItem = {
 export type ActionPanelProps = {
     items: ActionPanelItem[];
     className?: string;
+    disable?: boolean;
+    toggleAnimation?: boolean;
 };
-export declare const ActionPanel: (props: ActionPanelProps) => JSX.Element;
+export declare const ActionPanel: (props: ActionPanelProps) => JSX.Element | null;

package/build/cjs/components/ActionPanel/ActionPanel.js

@@ -3,13 +3,24 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ActionPanel = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
+const react_transition_group_1 = require("react-transition-group");
 const cn_1 = require("../../utils/cn");
 const b = (0, cn_1.cn)('dashkit-action-panel');
 const ActionPanel = (props) => {
-    return (react_1.default.createElement("div", { className: b(null, props.className) }, props.items.map((item) => {
+    var _a, _b;
+    const isDisabled = (_a = props.disable) !== null && _a !== void 0 ? _a : false;
+    const isAnimated = (_b = props.toggleAnimation) !== null && _b !== void 0 ? _b : false;
+    const nodeRef = react_1.default.useRef(null);
+    const content = (react_1.default.createElement("div", { ref: nodeRef, className: b(null, props.className) }, props.items.map((item) => {
         return (react_1.default.createElement("div", { role: "button", className: b('item', item.className), key: `dk-action-panel-${item.id}`, onClick: item.onClick, "data-qa": item.qa },
             react_1.default.createElement("div", { className: b('icon') }, item.icon),
             react_1.default.createElement("div", { className: b('title'), title: item.title }, item.title)));
     })));
+    if (isAnimated) {
+        return (react_1.default.createElement(react_transition_group_1.CSSTransition, { in: !isDisabled, nodeRef: nodeRef, classNames: b(null), timeout: 300, unmountOnExit: true }, content));
+    }
+    else {
+        return isDisabled ? null : content;
+    }
 };
 exports.ActionPanel = ActionPanel;

package/build/cjs/components/GridItem/GridItem.css

@@ -2,25 +2,38 @@
   position: relative;
 }
 .dashkit-grid-item__overlay {
+  --_-dashkit-overlay-color: var(--dashkit-overlay-color, var(--g-color-base-generic));
+  --_-dashkit-overlay-border-color: var(--dashkit-overlay-border-color, rgba(0, 0, 0, 0.1));
+  --_-dashkit-overlay-opacity: var(--dashkit-overlay-opacity, 1);
+  --_-dashkit-overlay-border-radius: var(
+      --dashkit-grid-item-border-radius,
+      3px
+  );
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
-  border-radius: 3px;
-  background-color: var(--g-color-base-generic);
-  border: solid 1px rgba(0, 0, 0, 0.1);
+  border-radius: var(--_-dashkit-overlay-border-radius);
+  background-color: var(--_-dashkit-overlay-color);
+  border: solid 1px var(--_-dashkit-overlay-border-color);
+  opacity: var(--_-dashkit-overlay-opacity);
 }
 .dashkit-grid-item__item {
+  --_-dashkit-grid-item-border-radius: var(
+      --dashkit-grid-item-border-radius,
+      3px
+  );
+  --_-dashkit-grid-item-edit-opacity: var(--dashkit-grid-item-edit-opacity, 0.5);
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
-  border-radius: 3px;
+  border-radius: var(--_-dashkit-grid-item-border-radius);
 }
 .dashkit-grid-item__item_editMode {
-  opacity: 0.5;
+  opacity: var(--_-dashkit-grid-item-edit-opacity);
   border-color: transparent;
   pointer-events: none;
 }
@@ -50,8 +63,10 @@
 }
 
 .react-grid-item.react-grid-placeholder {
-  background: #fc0;
-  opacity: 0.2;
+  --_-dashkit-placeholder-color: var(--dashkit-placeholder-color, #fc0);
+  --_-dashkit-placeholder-opacity: var(--dashkit-placeholder-opacity, 0.2);
+  background: var(--_-dashkit-placeholder-color);
+  opacity: var(--_-dashkit-placeholder-opacity);
   transition-duration: 100ms;
   z-index: 2;
   user-select: none;

package/build/cjs/shared/modules/helpers.js

@@ -78,19 +78,10 @@ function formQueueData({ items, itemsStateAndParams, }) {
         }
         const itemQueueParams = (0, get_1.default)(itemsStateAndParams, [item.id, 'params'], {});
         const filteredParamsByDefaults = (0, pick_1.default)(itemQueueParams, Object.keys(itemDefaultParams));
-        /**
-         * filtering actionParams without prefixes by defaults params
-         * ex.:
-         * itemDefaultParams contains 'Country' in defaults
-         * and we receive '_ap_Country' and '_ap_City' in itemQueueParams
-         * we need to ignore '_ap_City' param because we don't have actionParam without prefix ('City') in defaults
-         */
-        const actionParams = pickActionParamsFromParams(itemQueueParams, false) || {};
-        const filteredActionParamsByDefaults = (0, pick_1.default)(actionParams, Object.keys(itemDefaultParams));
         /**
          * merging filtered params and filtered actionParams with prefixes
          */
-        const params = Object.assign(Object.assign({}, filteredParamsByDefaults), transformParamsToActionParams(filteredActionParamsByDefaults));
+        const params = Object.assign(Object.assign({}, filteredParamsByDefaults), (pickActionParamsFromParams(itemQueueParams, true) || {}));
         return {
             id: item.id,
             namespace: item.namespace,

package/build/cjs/shared/units/__tests__/state-and-params.test.js

@@ -574,3 +574,150 @@ describe('getItemsStateAndParams actionParams variants check', () => {
         });
     });
 });
+const config = {
+    id: '7kw',
+    items: [
+        {
+            id: 'nvp',
+            data: {
+                tabs: [
+                    {
+                        id: 'rkq',
+                        title: 'test',
+                        params: {},
+                        chartId: 'some-chart',
+                        isDefault: true,
+                        autoHeight: false,
+                        description: '',
+                        enableActionParams: true,
+                    },
+                ],
+                hideTitle: true,
+            },
+            type: 'widget',
+            layout: {
+                h: 12,
+                w: 12,
+            },
+            namespace: 'default',
+        },
+        {
+            id: 'Q9K',
+            data: {
+                title: 'Year',
+                source: {},
+            },
+            type: 'control',
+            layout: {
+                h: 2,
+                w: 8,
+            },
+            defaults: {
+                year_some_id: '',
+            },
+            namespace: 'default',
+        },
+    ],
+    title: 'test',
+    layout: [
+        {
+            h: 12,
+            i: 'nvp',
+            w: 12,
+            x: 0,
+            y: 0,
+        },
+        {
+            h: 2,
+            i: 'Q9K',
+            w: 8,
+            x: 12,
+            y: 0,
+        },
+    ],
+    aliases: {},
+    connections: [],
+    salt: '123',
+    counter: 1,
+};
+const itemsStateAndParamsActionParamTest1 = {
+    nvp: {
+        params: {
+            _ap_year_some_id: ['2022'],
+        },
+    },
+    __meta__: {
+        queue: [
+            {
+                id: 'nvp',
+                tabId: 'rkq',
+            },
+        ],
+        version: 2,
+    },
+};
+const stateAndParamsActionParamsRes1 = {
+    Q9K: {
+        params: {
+            year_some_id: ['2022'],
+        },
+        state: {},
+    },
+    nvp: {
+        params: {
+            _ap_year_some_id: ['2022'],
+            year_some_id: '',
+        },
+        state: {},
+    },
+};
+const itemsStateAndParamsActionParamTest2 = {
+    nvp: {
+        params: {
+            _ap_another: ['2022'],
+        },
+    },
+    __meta__: {
+        queue: [
+            {
+                id: 'nvp',
+                tabId: 'rkq',
+            },
+        ],
+        version: 2,
+    },
+};
+const stateAndParamsActionParamsRes2 = {
+    Q9K: {
+        params: {
+            another: ['2022'],
+            year_some_id: '',
+        },
+        state: {},
+    },
+    nvp: {
+        params: {
+            _ap_another: ['2022'],
+            year_some_id: '',
+        },
+        state: {},
+    },
+};
+describe('state and params with actionParams', () => {
+    it('check state', () => {
+        const res1 = (0, datalens_1.getItemsStateAndParamsDL)({
+            defaultGlobalParams: {},
+            globalParams: {},
+            config,
+            itemsStateAndParams: itemsStateAndParamsActionParamTest1,
+        });
+        expect(res1).toEqual(stateAndParamsActionParamsRes1);
+        const res2 = (0, datalens_1.getItemsStateAndParamsDL)({
+            defaultGlobalParams: {},
+            globalParams: {},
+            config,
+            itemsStateAndParams: itemsStateAndParamsActionParamTest2,
+        });
+        expect(res2).toEqual(stateAndParamsActionParamsRes2);
+    });
+});

package/build/esm/components/ActionPanel/ActionPanel.css

@@ -1,33 +1,75 @@
 .dashkit-action-panel {
-  background-color: var(--g-color-base-float);
-  box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
+  --_--dashkit-action-panel-color: var(--dashkit-action-panel-color, var(--g-color-base-float));
+  --_--dashkit-action-panel-border-color: var(
+      --dashkit-action-panel-border-color,
+      var(--g-color-base-brand)
+  );
+  --_--dashkit-action-panel-border-radius: var(
+      --dashkit-action-panel-border-radius,
+      var(--g-border-radius-xl)
+  );
+  background-color: var(--_--dashkit-action-panel-color);
   position: fixed;
   bottom: 20px;
   display: flex;
-  border-radius: 8px;
+  border-radius: var(--_--dashkit-action-panel-border-radius);
+  border: 2px solid var(--_--dashkit-action-panel-border-color);
   padding: 8px;
   gap: 0;
   left: 50%;
-  transform: translateX(-50%);
+  transform: translateX(-50%) translateY(0);
   z-index: 1;
 }
+.dashkit-action-panel-enter {
+  transform: translateX(-50%) translateY(calc(100% + 20px));
+  will-change: transform;
+}
+.dashkit-action-panel-enter-active {
+  transform: translateX(-50%) translateY(0);
+  transition: transform 300ms ease;
+}
+.dashkit-action-panel-exit {
+  transform: translateX(-50%) translateY(0);
+  will-change: transform;
+}
+.dashkit-action-panel-exit-active {
+  transform: translateX(-50%) translateY(calc(100% + 20px));
+  transition: transform 300ms ease;
+}
 .dashkit-action-panel__item {
+  --_--dashkit-action-panel-item-color: var(--dashkit-action-panel-item-color, transparent);
+  --_--dashkit-action-panel-item-text-color: var(
+      --dashkit-action-panel-item-text-color,
+      var(--g-color-text-primary)
+  );
+  --_--dashkit-action-panel-item-color-hover: var(
+      --dashkit-action-panel-item-color-hover,
+      var(--g-color-base-simple-hover)
+  );
+  --_--dashkit-action-panel-item-text-color-hover: var(
+      --dashkit-action-panel-item-text-color-hover,
+      var(--g-color-text-primary)
+  );
   height: 68px;
   width: 98px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  transition: 0.3s background-color ease-in-out;
+  transition: 300ms color ease-in-out, 300ms background-color ease-in-out;
   border-radius: 6px;
   padding: 0 12px;
   box-sizing: border-box;
   white-space: nowrap;
   overflow: hidden;
+  background-color: var(--_--dashkit-action-panel-item-color);
+  color: var(--_--dashkit-action-panel-item-text-color);
+  will-change: color, backgroung-color;
 }
 .dashkit-action-panel__item:hover {
   cursor: pointer;
-  background-color: var(--g-color-base-simple-hover);
+  background-color: var(--_--dashkit-action-panel-item-color-hover);
+  color: var(--_--dashkit-action-panel-item-text-color-hover);
 }
 .dashkit-action-panel__icon {
   margin-bottom: 4px;

package/build/esm/components/ActionPanel/ActionPanel.d.ts

@@ -11,5 +11,7 @@ export type ActionPanelItem = {
 export type ActionPanelProps = {
     items: ActionPanelItem[];
     className?: string;
+    disable?: boolean;
+    toggleAnimation?: boolean;
 };
-export declare const ActionPanel: (props: ActionPanelProps) => JSX.Element;
+export declare const ActionPanel: (props: ActionPanelProps) => JSX.Element | null;

package/build/esm/components/ActionPanel/ActionPanel.js

@@ -1,11 +1,22 @@
 import React from 'react';
+import { CSSTransition } from 'react-transition-group';
 import { cn } from '../../utils/cn';
 import './ActionPanel.css';
 const b = cn('dashkit-action-panel');
 export const ActionPanel = (props) => {
-    return (React.createElement("div", { className: b(null, props.className) }, props.items.map((item) => {
+    var _a, _b;
+    const isDisabled = (_a = props.disable) !== null && _a !== void 0 ? _a : false;
+    const isAnimated = (_b = props.toggleAnimation) !== null && _b !== void 0 ? _b : false;
+    const nodeRef = React.useRef(null);
+    const content = (React.createElement("div", { ref: nodeRef, className: b(null, props.className) }, props.items.map((item) => {
         return (React.createElement("div", { role: "button", className: b('item', item.className), key: `dk-action-panel-${item.id}`, onClick: item.onClick, "data-qa": item.qa },
             React.createElement("div", { className: b('icon') }, item.icon),
             React.createElement("div", { className: b('title'), title: item.title }, item.title)));
     })));
+    if (isAnimated) {
+        return (React.createElement(CSSTransition, { in: !isDisabled, nodeRef: nodeRef, classNames: b(null), timeout: 300, unmountOnExit: true }, content));
+    }
+    else {
+        return isDisabled ? null : content;
+    }
 };

package/build/esm/components/GridItem/GridItem.css

@@ -2,25 +2,38 @@
   position: relative;
 }
 .dashkit-grid-item__overlay {
+  --_-dashkit-overlay-color: var(--dashkit-overlay-color, var(--g-color-base-generic));
+  --_-dashkit-overlay-border-color: var(--dashkit-overlay-border-color, rgba(0, 0, 0, 0.1));
+  --_-dashkit-overlay-opacity: var(--dashkit-overlay-opacity, 1);
+  --_-dashkit-overlay-border-radius: var(
+      --dashkit-grid-item-border-radius,
+      3px
+  );
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
-  border-radius: 3px;
-  background-color: var(--g-color-base-generic);
-  border: solid 1px rgba(0, 0, 0, 0.1);
+  border-radius: var(--_-dashkit-overlay-border-radius);
+  background-color: var(--_-dashkit-overlay-color);
+  border: solid 1px var(--_-dashkit-overlay-border-color);
+  opacity: var(--_-dashkit-overlay-opacity);
 }
 .dashkit-grid-item__item {
+  --_-dashkit-grid-item-border-radius: var(
+      --dashkit-grid-item-border-radius,
+      3px
+  );
+  --_-dashkit-grid-item-edit-opacity: var(--dashkit-grid-item-edit-opacity, 0.5);
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
-  border-radius: 3px;
+  border-radius: var(--_-dashkit-grid-item-border-radius);
 }
 .dashkit-grid-item__item_editMode {
-  opacity: 0.5;
+  opacity: var(--_-dashkit-grid-item-edit-opacity);
   border-color: transparent;
   pointer-events: none;
 }
@@ -50,8 +63,10 @@
 }
 
 .react-grid-item.react-grid-placeholder {
-  background: #fc0;
-  opacity: 0.2;
+  --_-dashkit-placeholder-color: var(--dashkit-placeholder-color, #fc0);
+  --_-dashkit-placeholder-opacity: var(--dashkit-placeholder-opacity, 0.2);
+  background: var(--_-dashkit-placeholder-color);
+  opacity: var(--_-dashkit-placeholder-opacity);
   transition-duration: 100ms;
   z-index: 2;
   user-select: none;

package/build/esm/shared/modules/helpers.js

@@ -70,19 +70,10 @@ export function formQueueData({ items, itemsStateAndParams, }) {
         }
         const itemQueueParams = get(itemsStateAndParams, [item.id, 'params'], {});
         const filteredParamsByDefaults = pick(itemQueueParams, Object.keys(itemDefaultParams));
-        /**
-         * filtering actionParams without prefixes by defaults params
-         * ex.:
-         * itemDefaultParams contains 'Country' in defaults
-         * and we receive '_ap_Country' and '_ap_City' in itemQueueParams
-         * we need to ignore '_ap_City' param because we don't have actionParam without prefix ('City') in defaults
-         */
-        const actionParams = pickActionParamsFromParams(itemQueueParams, false) || {};
-        const filteredActionParamsByDefaults = pick(actionParams, Object.keys(itemDefaultParams));
         /**
          * merging filtered params and filtered actionParams with prefixes
          */
-        const params = Object.assign(Object.assign({}, filteredParamsByDefaults), transformParamsToActionParams(filteredActionParamsByDefaults));
+        const params = Object.assign(Object.assign({}, filteredParamsByDefaults), (pickActionParamsFromParams(itemQueueParams, true) || {}));
         return {
             id: item.id,
             namespace: item.namespace,

package/build/esm/shared/units/__tests__/state-and-params.test.js

@@ -570,3 +570,150 @@ describe('getItemsStateAndParams actionParams variants check', () => {
         });
     });
 });
+const config = {
+    id: '7kw',
+    items: [
+        {
+            id: 'nvp',
+            data: {
+                tabs: [
+                    {
+                        id: 'rkq',
+                        title: 'test',
+                        params: {},
+                        chartId: 'some-chart',
+                        isDefault: true,
+                        autoHeight: false,
+                        description: '',
+                        enableActionParams: true,
+                    },
+                ],
+                hideTitle: true,
+            },
+            type: 'widget',
+            layout: {
+                h: 12,
+                w: 12,
+            },
+            namespace: 'default',
+        },
+        {
+            id: 'Q9K',
+            data: {
+                title: 'Year',
+                source: {},
+            },
+            type: 'control',
+            layout: {
+                h: 2,
+                w: 8,
+            },
+            defaults: {
+                year_some_id: '',
+            },
+            namespace: 'default',
+        },
+    ],
+    title: 'test',
+    layout: [
+        {
+            h: 12,
+            i: 'nvp',
+            w: 12,
+            x: 0,
+            y: 0,
+        },
+        {
+            h: 2,
+            i: 'Q9K',
+            w: 8,
+            x: 12,
+            y: 0,
+        },
+    ],
+    aliases: {},
+    connections: [],
+    salt: '123',
+    counter: 1,
+};
+const itemsStateAndParamsActionParamTest1 = {
+    nvp: {
+        params: {
+            _ap_year_some_id: ['2022'],
+        },
+    },
+    __meta__: {
+        queue: [
+            {
+                id: 'nvp',
+                tabId: 'rkq',
+            },
+        ],
+        version: 2,
+    },
+};
+const stateAndParamsActionParamsRes1 = {
+    Q9K: {
+        params: {
+            year_some_id: ['2022'],
+        },
+        state: {},
+    },
+    nvp: {
+        params: {
+            _ap_year_some_id: ['2022'],
+            year_some_id: '',
+        },
+        state: {},
+    },
+};
+const itemsStateAndParamsActionParamTest2 = {
+    nvp: {
+        params: {
+            _ap_another: ['2022'],
+        },
+    },
+    __meta__: {
+        queue: [
+            {
+                id: 'nvp',
+                tabId: 'rkq',
+            },
+        ],
+        version: 2,
+    },
+};
+const stateAndParamsActionParamsRes2 = {
+    Q9K: {
+        params: {
+            another: ['2022'],
+            year_some_id: '',
+        },
+        state: {},
+    },
+    nvp: {
+        params: {
+            _ap_another: ['2022'],
+            year_some_id: '',
+        },
+        state: {},
+    },
+};
+describe('state and params with actionParams', () => {
+    it('check state', () => {
+        const res1 = getItemsStateAndParamsDL({
+            defaultGlobalParams: {},
+            globalParams: {},
+            config,
+            itemsStateAndParams: itemsStateAndParamsActionParamTest1,
+        });
+        expect(res1).toEqual(stateAndParamsActionParamsRes1);
+        const res2 = getItemsStateAndParamsDL({
+            defaultGlobalParams: {},
+            globalParams: {},
+            config,
+            itemsStateAndParams: itemsStateAndParamsActionParamTest2,
+        });
+        expect(res2).toEqual(stateAndParamsActionParamsRes2);
+    });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/dashkit",
-  "version": "6.7.1",
+  "version": "6.8.0",
   "description": "Library for rendering dashboard grid layout",
   "license": "MIT",
   "repository": {
@@ -38,7 +38,8 @@
     "@gravity-ui/i18n": "^1.0.0",
     "hashids": "^2.2.8",
     "immutability-helper": "^3.1.1",
-    "react-grid-layout": "^1.3.4"
+    "react-grid-layout": "^1.3.4",
+    "react-transition-group": "^4.4.5"
   },
   "peerDependencies": {
     "@bem-react/classname": "^1.6.0",