@gravity-ui/dashkit 6.7.2 → 6.9.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/__tests__/helpers.test.js

@@ -3,6 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const constants_1 = require("../../constants");
 const helpers_1 = require("../helpers");
 const DEFAULT_CONTROL_ID = 'controlId';
+const DEFAULT_CONTROL_ID_2 = 'controlId2';
+const DEFAULT_GROUP_ITEM_ID = 'groupItemId';
+const DEFAULT_GROUP_ITEM_ID_2 = 'groupItemId2';
 const DEFAULT_WIDGET_ID = 'widgetId';
 const DEFAULT_WIDGET_TAB_ID = 'widget_tabId';
 const NAMESPACE = 'default';
@@ -13,6 +16,25 @@ const getMockedControlItem = ({ id = DEFAULT_CONTROL_ID, defaults, }) => ({
     type: 'control',
     namespace: NAMESPACE,
 });
+const getMockedGroupControlItem = ({ id = DEFAULT_CONTROL_ID, groupItemId = DEFAULT_GROUP_ITEM_ID, groupItemId2 = DEFAULT_GROUP_ITEM_ID_2, defaults, }) => ({
+    id,
+    data: {
+        group: [
+            { id: groupItemId, namespace: NAMESPACE, defaults },
+            { id: groupItemId2, namespace: NAMESPACE, defaults },
+        ],
+    },
+    type: 'group-control',
+    namespace: NAMESPACE,
+});
+const getMockedConfig = ({ items }) => ({
+    items,
+    salt: '0.9021043992843898',
+    counter: 124,
+    layout: [],
+    aliases: {},
+    connections: [],
+});
 const stateAndParamsWithParamsOnly = {
     params: {
         paramName: 'param1',
@@ -121,6 +143,58 @@ describe('modules.helpers', () => {
                 },
             ]).toEqual((0, helpers_1.formQueueData)({ items: [controlItem5], itemsStateAndParams }));
         });
+        it('return correct queue data for control: group control', () => {
+            const itemsStateAndParams = {
+                [DEFAULT_CONTROL_ID]: {
+                    params: {
+                        [DEFAULT_GROUP_ITEM_ID]: {
+                            scale: 'd',
+                            view: 'normal',
+                        },
+                    },
+                },
+                [constants_1.META_KEY]: {
+                    queue: [{ id: DEFAULT_CONTROL_ID, groupItemId: DEFAULT_GROUP_ITEM_ID }],
+                    version: 2,
+                },
+            };
+            const controlItem1 = getMockedGroupControlItem({
+                id: 'control-1',
+                groupItemId: 'group-control-1',
+            });
+            expect([]).toEqual((0, helpers_1.formQueueData)({ items: [controlItem1], itemsStateAndParams }));
+            const controlItem2 = getMockedGroupControlItem({ defaults: { number: 'one', size: 's' } });
+            expect([
+                {
+                    id: DEFAULT_GROUP_ITEM_ID,
+                    namespace: NAMESPACE,
+                    params: {},
+                },
+            ]).toEqual((0, helpers_1.formQueueData)({ items: [controlItem2], itemsStateAndParams }));
+            const controlItem4 = getMockedGroupControlItem({ defaults: { scale: 'm', size: 's' } });
+            expect([
+                {
+                    id: DEFAULT_GROUP_ITEM_ID,
+                    namespace: NAMESPACE,
+                    params: {
+                        scale: 'd',
+                    },
+                },
+            ]).toEqual((0, helpers_1.formQueueData)({ items: [controlItem4], itemsStateAndParams }));
+            const controlItem5 = getMockedGroupControlItem({
+                defaults: { scale: 'm', size: 's', view: 'contrast' },
+            });
+            expect([
+                {
+                    id: DEFAULT_GROUP_ITEM_ID,
+                    namespace: NAMESPACE,
+                    params: {
+                        scale: 'd',
+                        view: 'normal',
+                    },
+                },
+            ]).toEqual((0, helpers_1.formQueueData)({ items: [controlItem5], itemsStateAndParams }));
+        });
         it('return correct queue data for widget: common', () => {
             const itemsStateAndParams = {
                 [DEFAULT_WIDGET_ID]: {
@@ -232,10 +306,18 @@ describe('modules.helpers', () => {
                         view: 'normal',
                     },
                 },
+                [DEFAULT_CONTROL_ID_2]: {
+                    params: {
+                        [DEFAULT_GROUP_ITEM_ID]: {
+                            size: 'm',
+                        },
+                    },
+                },
                 [constants_1.META_KEY]: {
                     queue: [
                         { id: DEFAULT_CONTROL_ID },
                         { id: DEFAULT_WIDGET_ID, tabId: DEFAULT_WIDGET_TAB_ID },
+                        { id: DEFAULT_CONTROL_ID_2, groupItemId: DEFAULT_GROUP_ITEM_ID },
                     ],
                     version: 2,
                 },
@@ -250,19 +332,41 @@ describe('modules.helpers', () => {
             });
             const control1 = getMockedControlItem({ id: 'control-1' });
             const control2 = getMockedControlItem({ defaults: { scale: 'm', view: 'contrast' } });
+            const groupControl1 = getMockedGroupControlItem({ id: 'group-control-1' });
+            const groupControl2 = getMockedGroupControlItem({
+                id: DEFAULT_CONTROL_ID_2,
+                defaults: { size: 'xl', view: 'normal' },
+            });
             expect([
                 {
                     id: DEFAULT_CONTROL_ID,
                     namespace: NAMESPACE,
-                    params: { scale: 'd' },
+                    params: {
+                        scale: 'd',
+                    },
                 },
                 {
                     id: DEFAULT_WIDGET_ID,
                     namespace: NAMESPACE,
                     params: { view: 'normal' },
                 },
+                {
+                    id: DEFAULT_GROUP_ITEM_ID,
+                    namespace: NAMESPACE,
+                    params: {
+                        size: 'm',
+                    },
+                },
             ]).toEqual((0, helpers_1.formQueueData)({
-                items: [widgetItem2, widgetItem3, control1, widgetItem1, control2],
+                items: [
+                    widgetItem2,
+                    widgetItem3,
+                    control1,
+                    widgetItem1,
+                    control2,
+                    groupControl1,
+                    groupControl2,
+                ],
                 itemsStateAndParams,
             }));
         });
@@ -291,4 +395,110 @@ describe('modules.helpers', () => {
             expect(exeptActionParam3.out).toEqual((0, helpers_1.pickExceptActionParamsFromParams)(exeptActionParam3.in));
         });
     });
+    describe('queue helpers', () => {
+        it('add common control to the end of queue', () => {
+            const itemsStateAndParams = {
+                [constants_1.META_KEY]: {
+                    queue: [
+                        { id: DEFAULT_CONTROL_ID },
+                        { id: DEFAULT_CONTROL_ID_2, groupItemId: DEFAULT_GROUP_ITEM_ID },
+                    ],
+                    version: 2,
+                },
+            };
+            const config = getMockedConfig({
+                items: [
+                    getMockedControlItem({}),
+                    getMockedGroupControlItem({ id: DEFAULT_CONTROL_ID_2 }),
+                ],
+            });
+            expect({
+                queue: [
+                    { id: DEFAULT_CONTROL_ID_2, groupItemId: DEFAULT_GROUP_ITEM_ID },
+                    { id: DEFAULT_CONTROL_ID },
+                ],
+                version: 2,
+            }).toEqual((0, helpers_1.addToQueue)({ id: DEFAULT_CONTROL_ID, config, itemsStateAndParams }));
+        });
+        it('remove unused items from queue after adding new group item: remove common items and group items', () => {
+            const itemsStateAndParams = {
+                [constants_1.META_KEY]: {
+                    queue: [
+                        { id: 'control1' },
+                        { id: 'control2', tabId: 'tab' },
+                        { id: DEFAULT_CONTROL_ID_2, groupItemId: DEFAULT_GROUP_ITEM_ID_2 },
+                        { id: DEFAULT_CONTROL_ID },
+                        { id: DEFAULT_CONTROL_ID_2, groupItemId: 'group-item-1' },
+                    ],
+                    version: 2,
+                },
+            };
+            const config = getMockedConfig({
+                items: [
+                    getMockedControlItem({}),
+                    getMockedGroupControlItem({ id: DEFAULT_CONTROL_ID_2 }),
+                ],
+            });
+            expect({
+                queue: [
+                    { id: DEFAULT_CONTROL_ID_2, groupItemId: DEFAULT_GROUP_ITEM_ID_2 },
+                    { id: DEFAULT_CONTROL_ID },
+                    { id: DEFAULT_CONTROL_ID_2, groupItemId: DEFAULT_GROUP_ITEM_ID },
+                ],
+                version: 2,
+            }).toEqual((0, helpers_1.addGroupToQueue)({
+                id: DEFAULT_CONTROL_ID_2,
+                groupItemIds: [DEFAULT_GROUP_ITEM_ID],
+                config,
+                itemsStateAndParams,
+            }));
+        });
+        it('remove unused items from queue after adding new item: remove common items and item with group', () => {
+            const itemsStateAndParams = {
+                [constants_1.META_KEY]: {
+                    queue: [
+                        { id: 'control1' },
+                        { id: 'control2', tabId: 'a3' },
+                        { id: DEFAULT_CONTROL_ID_2, groupItemId: DEFAULT_GROUP_ITEM_ID_2 },
+                        { id: DEFAULT_CONTROL_ID_2, groupItemId: DEFAULT_GROUP_ITEM_ID },
+                    ],
+                    version: 2,
+                },
+            };
+            const config = getMockedConfig({
+                items: [getMockedControlItem({})],
+            });
+            expect({
+                queue: [{ id: DEFAULT_CONTROL_ID }],
+                version: 2,
+            }).toEqual((0, helpers_1.addToQueue)({
+                id: DEFAULT_CONTROL_ID,
+                config,
+                itemsStateAndParams,
+            }));
+        });
+        it('add group control to queue', () => {
+            const itemsStateAndParams = {
+                [constants_1.META_KEY]: {
+                    queue: [{ id: DEFAULT_CONTROL_ID_2, groupItemId: DEFAULT_GROUP_ITEM_ID_2 }],
+                    version: 2,
+                },
+            };
+            const config = getMockedConfig({
+                items: [getMockedGroupControlItem({})],
+            });
+            expect({
+                queue: [
+                    { id: DEFAULT_CONTROL_ID_2, groupItemId: DEFAULT_GROUP_ITEM_ID },
+                    { id: DEFAULT_CONTROL_ID_2, groupItemId: DEFAULT_GROUP_ITEM_ID_2 },
+                ],
+                version: 2,
+            }).toEqual((0, helpers_1.addGroupToQueue)({
+                id: DEFAULT_CONTROL_ID_2,
+                groupItemIds: [DEFAULT_GROUP_ITEM_ID, DEFAULT_GROUP_ITEM_ID_2],
+                config,
+                itemsStateAndParams,
+            }));
+        });
+    });
 });

package/build/cjs/shared/modules/helpers.d.ts

@@ -1,11 +1,12 @@
-import { PluginBase, ConfigItem, ItemsStateAndParams, StateAndParamsMetaData, StringParams, ConfigConnection, ConfigAliases, ConfigItemWithTabs, Config, ItemStateAndParams } from '../types';
+import { Config, ConfigAliases, ConfigConnection, ConfigItem, ConfigItemGroup, ConfigItemWithGroup, ConfigItemWithTabs, ItemStateAndParams, ItemsStateAndParams, PluginBase, StateAndParamsMetaData, StringParams } from '../types';
 export declare function prerenderItems({ items, plugins, }: {
     items: ConfigItem[];
     plugins: PluginBase[];
 }): ConfigItem[];
 export declare function getItemsStateAndParamsMeta(itemsStateAndParams: ItemsStateAndParams): StateAndParamsMetaData | undefined;
 export declare function getCurrentVersion(itemsStateAndParams: ItemsStateAndParams): number;
-export declare function isItemWithTabs(item: Pick<ConfigItem, 'data'>): item is Pick<ConfigItemWithTabs, 'data'>;
+export declare function isItemWithTabs(item: Pick<ConfigItem, 'data'> | ConfigItemGroup): item is Pick<ConfigItemWithTabs, 'data'>;
+export declare function isItemWithGroup(item: Pick<ConfigItem, 'data'>): item is Pick<ConfigItemWithGroup, 'data'>;
 export type FormedQueueData = {
     id: string;
     namespace: string;
@@ -16,11 +17,11 @@ export declare function formQueueData({ items, itemsStateAndParams, }: {
     itemsStateAndParams: ItemsStateAndParams;
 }): FormedQueueData[];
 export declare function resolveItemInnerId({ item, itemsStateAndParams, }: {
-    item: ConfigItem;
+    item: Pick<ConfigItemWithTabs, 'data' | 'id'>;
     itemsStateAndParams: ItemsStateAndParams;
 }): string;
 export declare function getMapItemsIgnores({ items, ignores, itemsStateAndParams, isFirstVersion, }: {
-    items: ConfigItem[];
+    items: (ConfigItem | ConfigItemGroup)[];
     ignores: ConfigConnection[];
     itemsStateAndParams: ItemsStateAndParams;
     isFirstVersion: boolean;
@@ -35,10 +36,18 @@ export declare function getInitialItemsStateAndParamsMeta(): StateAndParamsMetaD
 interface ChangeQueueArg {
     id: string;
     tabId?: string;
+    groupItemId?: string;
+    config: Config;
+    itemsStateAndParams: ItemsStateAndParams;
+}
+interface ChangeQueueGroupArg {
+    id: string;
+    groupItemIds: string[];
     config: Config;
     itemsStateAndParams: ItemsStateAndParams;
 }
 export declare function addToQueue({ id, tabId, config, itemsStateAndParams, }: ChangeQueueArg): StateAndParamsMetaData;
+export declare function addGroupToQueue({ id, groupItemIds, config, itemsStateAndParams, }: ChangeQueueGroupArg): StateAndParamsMetaData;
 export declare function deleteFromQueue(data: ChangeQueueArg): StateAndParamsMetaData;
 /**
  * public function for getting only actionParams from object (all fields with keys that contains prefix)
@@ -63,7 +72,7 @@ export declare function transformParamsToActionParams(params: ItemStateAndParams
  * check if object contains actionParams
  * @param conf
  */
-export declare function hasActionParam(conf?: StringParams): boolean;
+export declare function hasActionParam(conf?: StringParams | Record<string, StringParams>): boolean;
 /**
  * check if ItemStateAndParams object has actionParams in params or state field
  * @param stateAndParams