@gravity-ui/dashkit 6.7.2 → 6.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/README.md +57 -0
  2. package/build/cjs/components/ActionPanel/ActionPanel.css +48 -6
  3. package/build/cjs/components/ActionPanel/ActionPanel.d.ts +3 -1
  4. package/build/cjs/components/ActionPanel/ActionPanel.js +12 -1
  5. package/build/cjs/components/GridItem/GridItem.css +22 -7
  6. package/build/esm/components/ActionPanel/ActionPanel.css +48 -6
  7. package/build/esm/components/ActionPanel/ActionPanel.d.ts +3 -1
  8. package/build/esm/components/ActionPanel/ActionPanel.js +12 -1
  9. package/build/esm/components/GridItem/GridItem.css +22 -7
  10. package/package.json +3 -2
package/README.md CHANGED
@@ -325,6 +325,63 @@ type MenuItem = {
325
325
  DashKit.setSettings({menu: [] as Array<MenuItem>});
326
326
  ```
327
327
 
328
+ ### CSS API
329
+
330
+ | Name | Description |
331
+ |-:----------------------------------------------|-:---------------------|
332
+ | Action panel variables | |
333
+ | `--dashkit-action-panel-color` | Background color |
334
+ | `--dashkit-action-panel-border-color` | Border color |
335
+ | `--dashkit-action-panel-border-radius` | Border radius |
336
+ | Action panel item variables | |
337
+ | `--dashkit-action-panel-item-color` | Backgroud color |
338
+ | `--dashkit-action-panel-item-text-color` | Text color |
339
+ | `--dashkit-action-panel-item-color-hover` | Hover backgroud color |
340
+ | `--dashkit-action-panel-item-text-color-hover` | Hover text color |
341
+ | Overlay variables | |
342
+ | `--dashkit-overlay-border-color` | Border color |
343
+ | `--dashkit-overlay-color` | Background color |
344
+ | `--dashkit-overlay-opacity` | Opacity |
345
+ | Grid item variables | |
346
+ | `--dashkit-grid-item-edit-opacity` | Opacity |
347
+ | `--dashkit-grid-item-border-radius` | Border radius |
348
+ | Placeholder variables | |
349
+ | `--dashkit-placeholder-color` | Background color |
350
+ | `--dashkit-placeholder-opacity` | Opacity |
351
+
352
+ #### Usage example
353
+
354
+
355
+ ```css
356
+ .custom-theme-wrapper {
357
+ --dashkit-grid-item-edit-opacit: 1;
358
+ --dashkit-overlay-color: var(--g-color-base-float);
359
+ --dashkit-overlay-border-color: var(--g-color-base-float);
360
+ --dashkit-overlay-opacity: 0.5;
361
+
362
+ --dashkit-action-panel-border-color: var(--g-color-line-info);
363
+ --dashkit-action-panel-color: var(--g-color-base-float-accent);
364
+ --dashkit-action-panel-border-radius: var(--g-border-radius-xxl);
365
+ }
366
+ ```
367
+
368
+ ```tsx
369
+ // ....
370
+
371
+ const CustomThemeWrapper = (props: {
372
+ dashkitProps: DashkitProps;
373
+ actionPanelProps: ActionPanelProps;
374
+ }) => {
375
+ return (
376
+ <div className="custom-theme-wrapper">
377
+ <Dashkit {...props.dashkitProps} />
378
+ <ActionPanel {...props.actionPanelProps} />
379
+ </div>
380
+ );
381
+ };
382
+ ```
383
+
384
+
328
385
  ## Development
329
386
 
330
387
  ### Build & watch
package/build/cjs/components/ActionPanel/ActionPanel.css CHANGED
@@ -1,33 +1,75 @@
1
1
  .dashkit-action-panel {
2
- background-color: var(--g-color-base-float);
3
- box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
2
+ --_--dashkit-action-panel-color: var(--dashkit-action-panel-color, var(--g-color-base-float));
3
+ --_--dashkit-action-panel-border-color: var(
4
+ --dashkit-action-panel-border-color,
5
+ var(--g-color-base-brand)
6
+ );
7
+ --_--dashkit-action-panel-border-radius: var(
8
+ --dashkit-action-panel-border-radius,
9
+ var(--g-border-radius-xl)
10
+ );
11
+ background-color: var(--_--dashkit-action-panel-color);
4
12
  position: fixed;
5
13
  bottom: 20px;
6
14
  display: flex;
7
- border-radius: 8px;
15
+ border-radius: var(--_--dashkit-action-panel-border-radius);
16
+ border: 2px solid var(--_--dashkit-action-panel-border-color);
8
17
  padding: 8px;
9
18
  gap: 0;
10
19
  left: 50%;
11
- transform: translateX(-50%);
20
+ transform: translateX(-50%) translateY(0);
12
21
  z-index: 1;
13
22
  }
23
+ .dashkit-action-panel-enter {
24
+ transform: translateX(-50%) translateY(calc(100% + 20px));
25
+ will-change: transform;
26
+ }
27
+ .dashkit-action-panel-enter-active {
28
+ transform: translateX(-50%) translateY(0);
29
+ transition: transform 300ms ease;
30
+ }
31
+ .dashkit-action-panel-exit {
32
+ transform: translateX(-50%) translateY(0);
33
+ will-change: transform;
34
+ }
35
+ .dashkit-action-panel-exit-active {
36
+ transform: translateX(-50%) translateY(calc(100% + 20px));
37
+ transition: transform 300ms ease;
38
+ }
14
39
  .dashkit-action-panel__item {
40
+ --_--dashkit-action-panel-item-color: var(--dashkit-action-panel-item-color, transparent);
41
+ --_--dashkit-action-panel-item-text-color: var(
42
+ --dashkit-action-panel-item-text-color,
43
+ var(--g-color-text-primary)
44
+ );
45
+ --_--dashkit-action-panel-item-color-hover: var(
46
+ --dashkit-action-panel-item-color-hover,
47
+ var(--g-color-base-simple-hover)
48
+ );
49
+ --_--dashkit-action-panel-item-text-color-hover: var(
50
+ --dashkit-action-panel-item-text-color-hover,
51
+ var(--g-color-text-primary)
52
+ );
15
53
  height: 68px;
16
54
  width: 98px;
17
55
  display: flex;
18
56
  flex-direction: column;
19
57
  justify-content: center;
20
58
  align-items: center;
21
- transition: 0.3s background-color ease-in-out;
59
+ transition: 300ms color ease-in-out, 300ms background-color ease-in-out;
22
60
  border-radius: 6px;
23
61
  padding: 0 12px;
24
62
  box-sizing: border-box;
25
63
  white-space: nowrap;
26
64
  overflow: hidden;
65
+ background-color: var(--_--dashkit-action-panel-item-color);
66
+ color: var(--_--dashkit-action-panel-item-text-color);
67
+ will-change: color, backgroung-color;
27
68
  }
28
69
  .dashkit-action-panel__item:hover {
29
70
  cursor: pointer;
30
- background-color: var(--g-color-base-simple-hover);
71
+ background-color: var(--_--dashkit-action-panel-item-color-hover);
72
+ color: var(--_--dashkit-action-panel-item-text-color-hover);
31
73
  }
32
74
  .dashkit-action-panel__icon {
33
75
  margin-bottom: 4px;
package/build/cjs/components/ActionPanel/ActionPanel.d.ts CHANGED
@@ -10,5 +10,7 @@ export type ActionPanelItem = {
10
10
  export type ActionPanelProps = {
11
11
  items: ActionPanelItem[];
12
12
  className?: string;
13
+ disable?: boolean;
14
+ toggleAnimation?: boolean;
13
15
  };
14
- export declare const ActionPanel: (props: ActionPanelProps) => JSX.Element;
16
+ export declare const ActionPanel: (props: ActionPanelProps) => JSX.Element | null;
package/build/cjs/components/ActionPanel/ActionPanel.js CHANGED
@@ -3,13 +3,24 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.ActionPanel = void 0;
4
4
  const tslib_1 = require("tslib");
5
5
  const react_1 = tslib_1.__importDefault(require("react"));
6
+ const react_transition_group_1 = require("react-transition-group");
6
7
  const cn_1 = require("../../utils/cn");
7
8
  const b = (0, cn_1.cn)('dashkit-action-panel');
8
9
  const ActionPanel = (props) => {
9
- return (react_1.default.createElement("div", { className: b(null, props.className) }, props.items.map((item) => {
10
+ var _a, _b;
11
+ const isDisabled = (_a = props.disable) !== null && _a !== void 0 ? _a : false;
12
+ const isAnimated = (_b = props.toggleAnimation) !== null && _b !== void 0 ? _b : false;
13
+ const nodeRef = react_1.default.useRef(null);
14
+ const content = (react_1.default.createElement("div", { ref: nodeRef, className: b(null, props.className) }, props.items.map((item) => {
10
15
  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 },
11
16
  react_1.default.createElement("div", { className: b('icon') }, item.icon),
12
17
  react_1.default.createElement("div", { className: b('title'), title: item.title }, item.title)));
13
18
  })));
19
+ if (isAnimated) {
20
+ return (react_1.default.createElement(react_transition_group_1.CSSTransition, { in: !isDisabled, nodeRef: nodeRef, classNames: b(null), timeout: 300, unmountOnExit: true }, content));
21
+ }
22
+ else {
23
+ return isDisabled ? null : content;
24
+ }
14
25
  };
15
26
  exports.ActionPanel = ActionPanel;
package/build/cjs/components/GridItem/GridItem.css CHANGED
@@ -2,25 +2,38 @@
2
2
  position: relative;
3
3
  }
4
4
  .dashkit-grid-item__overlay {
5
+ --_-dashkit-overlay-color: var(--dashkit-overlay-color, var(--g-color-base-generic));
6
+ --_-dashkit-overlay-border-color: var(--dashkit-overlay-border-color, rgba(0, 0, 0, 0.1));
7
+ --_-dashkit-overlay-opacity: var(--dashkit-overlay-opacity, 1);
8
+ --_-dashkit-overlay-border-radius: var(
9
+ --dashkit-grid-item-border-radius,
10
+ 3px
11
+ );
5
12
  position: absolute;
6
13
  top: 0;
7
14
  bottom: 0;
8
15
  left: 0;
9
16
  right: 0;
10
- border-radius: 3px;
11
- background-color: var(--g-color-base-generic);
12
- border: solid 1px rgba(0, 0, 0, 0.1);
17
+ border-radius: var(--_-dashkit-overlay-border-radius);
18
+ background-color: var(--_-dashkit-overlay-color);
19
+ border: solid 1px var(--_-dashkit-overlay-border-color);
20
+ opacity: var(--_-dashkit-overlay-opacity);
13
21
  }
14
22
  .dashkit-grid-item__item {
23
+ --_-dashkit-grid-item-border-radius: var(
24
+ --dashkit-grid-item-border-radius,
25
+ 3px
26
+ );
27
+ --_-dashkit-grid-item-edit-opacity: var(--dashkit-grid-item-edit-opacity, 0.5);
15
28
  position: absolute;
16
29
  top: 0;
17
30
  bottom: 0;
18
31
  left: 0;
19
32
  right: 0;
20
- border-radius: 3px;
33
+ border-radius: var(--_-dashkit-grid-item-border-radius);
21
34
  }
22
35
  .dashkit-grid-item__item_editMode {
23
- opacity: 0.5;
36
+ opacity: var(--_-dashkit-grid-item-edit-opacity);
24
37
  border-color: transparent;
25
38
  pointer-events: none;
26
39
  }
@@ -50,8 +63,10 @@
50
63
  }
51
64
 
52
65
  .react-grid-item.react-grid-placeholder {
53
- background: #fc0;
54
- opacity: 0.2;
66
+ --_-dashkit-placeholder-color: var(--dashkit-placeholder-color, #fc0);
67
+ --_-dashkit-placeholder-opacity: var(--dashkit-placeholder-opacity, 0.2);
68
+ background: var(--_-dashkit-placeholder-color);
69
+ opacity: var(--_-dashkit-placeholder-opacity);
55
70
  transition-duration: 100ms;
56
71
  z-index: 2;
57
72
  user-select: none;
package/build/esm/components/ActionPanel/ActionPanel.css CHANGED
@@ -1,33 +1,75 @@
1
1
  .dashkit-action-panel {
2
- background-color: var(--g-color-base-float);
3
- box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
2
+ --_--dashkit-action-panel-color: var(--dashkit-action-panel-color, var(--g-color-base-float));
3
+ --_--dashkit-action-panel-border-color: var(
4
+ --dashkit-action-panel-border-color,
5
+ var(--g-color-base-brand)
6
+ );
7
+ --_--dashkit-action-panel-border-radius: var(
8
+ --dashkit-action-panel-border-radius,
9
+ var(--g-border-radius-xl)
10
+ );
11
+ background-color: var(--_--dashkit-action-panel-color);
4
12
  position: fixed;
5
13
  bottom: 20px;
6
14
  display: flex;
7
- border-radius: 8px;
15
+ border-radius: var(--_--dashkit-action-panel-border-radius);
16
+ border: 2px solid var(--_--dashkit-action-panel-border-color);
8
17
  padding: 8px;
9
18
  gap: 0;
10
19
  left: 50%;
11
- transform: translateX(-50%);
20
+ transform: translateX(-50%) translateY(0);
12
21
  z-index: 1;
13
22
  }
23
+ .dashkit-action-panel-enter {
24
+ transform: translateX(-50%) translateY(calc(100% + 20px));
25
+ will-change: transform;
26
+ }
27
+ .dashkit-action-panel-enter-active {
28
+ transform: translateX(-50%) translateY(0);
29
+ transition: transform 300ms ease;
30
+ }
31
+ .dashkit-action-panel-exit {
32
+ transform: translateX(-50%) translateY(0);
33
+ will-change: transform;
34
+ }
35
+ .dashkit-action-panel-exit-active {
36
+ transform: translateX(-50%) translateY(calc(100% + 20px));
37
+ transition: transform 300ms ease;
38
+ }
14
39
  .dashkit-action-panel__item {
40
+ --_--dashkit-action-panel-item-color: var(--dashkit-action-panel-item-color, transparent);
41
+ --_--dashkit-action-panel-item-text-color: var(
42
+ --dashkit-action-panel-item-text-color,
43
+ var(--g-color-text-primary)
44
+ );
45
+ --_--dashkit-action-panel-item-color-hover: var(
46
+ --dashkit-action-panel-item-color-hover,
47
+ var(--g-color-base-simple-hover)
48
+ );
49
+ --_--dashkit-action-panel-item-text-color-hover: var(
50
+ --dashkit-action-panel-item-text-color-hover,
51
+ var(--g-color-text-primary)
52
+ );
15
53
  height: 68px;
16
54
  width: 98px;
17
55
  display: flex;
18
56
  flex-direction: column;
19
57
  justify-content: center;
20
58
  align-items: center;
21
- transition: 0.3s background-color ease-in-out;
59
+ transition: 300ms color ease-in-out, 300ms background-color ease-in-out;
22
60
  border-radius: 6px;
23
61
  padding: 0 12px;
24
62
  box-sizing: border-box;
25
63
  white-space: nowrap;
26
64
  overflow: hidden;
65
+ background-color: var(--_--dashkit-action-panel-item-color);
66
+ color: var(--_--dashkit-action-panel-item-text-color);
67
+ will-change: color, backgroung-color;
27
68
  }
28
69
  .dashkit-action-panel__item:hover {
29
70
  cursor: pointer;
30
- background-color: var(--g-color-base-simple-hover);
71
+ background-color: var(--_--dashkit-action-panel-item-color-hover);
72
+ color: var(--_--dashkit-action-panel-item-text-color-hover);
31
73
  }
32
74
  .dashkit-action-panel__icon {
33
75
  margin-bottom: 4px;
package/build/esm/components/ActionPanel/ActionPanel.d.ts CHANGED
@@ -11,5 +11,7 @@ export type ActionPanelItem = {
11
11
  export type ActionPanelProps = {
12
12
  items: ActionPanelItem[];
13
13
  className?: string;
14
+ disable?: boolean;
15
+ toggleAnimation?: boolean;
14
16
  };
15
- export declare const ActionPanel: (props: ActionPanelProps) => JSX.Element;
17
+ export declare const ActionPanel: (props: ActionPanelProps) => JSX.Element | null;
package/build/esm/components/ActionPanel/ActionPanel.js CHANGED
@@ -1,11 +1,22 @@
1
1
  import React from 'react';
2
+ import { CSSTransition } from 'react-transition-group';
2
3
  import { cn } from '../../utils/cn';
3
4
  import './ActionPanel.css';
4
5
  const b = cn('dashkit-action-panel');
5
6
  export const ActionPanel = (props) => {
6
- return (React.createElement("div", { className: b(null, props.className) }, props.items.map((item) => {
7
+ var _a, _b;
8
+ const isDisabled = (_a = props.disable) !== null && _a !== void 0 ? _a : false;
9
+ const isAnimated = (_b = props.toggleAnimation) !== null && _b !== void 0 ? _b : false;
10
+ const nodeRef = React.useRef(null);
11
+ const content = (React.createElement("div", { ref: nodeRef, className: b(null, props.className) }, props.items.map((item) => {
7
12
  return (React.createElement("div", { role: "button", className: b('item', item.className), key: `dk-action-panel-${item.id}`, onClick: item.onClick, "data-qa": item.qa },
8
13
  React.createElement("div", { className: b('icon') }, item.icon),
9
14
  React.createElement("div", { className: b('title'), title: item.title }, item.title)));
10
15
  })));
16
+ if (isAnimated) {
17
+ return (React.createElement(CSSTransition, { in: !isDisabled, nodeRef: nodeRef, classNames: b(null), timeout: 300, unmountOnExit: true }, content));
18
+ }
19
+ else {
20
+ return isDisabled ? null : content;
21
+ }
11
22
  };
package/build/esm/components/GridItem/GridItem.css CHANGED
@@ -2,25 +2,38 @@
2
2
  position: relative;
3
3
  }
4
4
  .dashkit-grid-item__overlay {
5
+ --_-dashkit-overlay-color: var(--dashkit-overlay-color, var(--g-color-base-generic));
6
+ --_-dashkit-overlay-border-color: var(--dashkit-overlay-border-color, rgba(0, 0, 0, 0.1));
7
+ --_-dashkit-overlay-opacity: var(--dashkit-overlay-opacity, 1);
8
+ --_-dashkit-overlay-border-radius: var(
9
+ --dashkit-grid-item-border-radius,
10
+ 3px
11
+ );
5
12
  position: absolute;
6
13
  top: 0;
7
14
  bottom: 0;
8
15
  left: 0;
9
16
  right: 0;
10
- border-radius: 3px;
11
- background-color: var(--g-color-base-generic);
12
- border: solid 1px rgba(0, 0, 0, 0.1);
17
+ border-radius: var(--_-dashkit-overlay-border-radius);
18
+ background-color: var(--_-dashkit-overlay-color);
19
+ border: solid 1px var(--_-dashkit-overlay-border-color);
20
+ opacity: var(--_-dashkit-overlay-opacity);
13
21
  }
14
22
  .dashkit-grid-item__item {
23
+ --_-dashkit-grid-item-border-radius: var(
24
+ --dashkit-grid-item-border-radius,
25
+ 3px
26
+ );
27
+ --_-dashkit-grid-item-edit-opacity: var(--dashkit-grid-item-edit-opacity, 0.5);
15
28
  position: absolute;
16
29
  top: 0;
17
30
  bottom: 0;
18
31
  left: 0;
19
32
  right: 0;
20
- border-radius: 3px;
33
+ border-radius: var(--_-dashkit-grid-item-border-radius);
21
34
  }
22
35
  .dashkit-grid-item__item_editMode {
23
- opacity: 0.5;
36
+ opacity: var(--_-dashkit-grid-item-edit-opacity);
24
37
  border-color: transparent;
25
38
  pointer-events: none;
26
39
  }
@@ -50,8 +63,10 @@
50
63
  }
51
64
 
52
65
  .react-grid-item.react-grid-placeholder {
53
- background: #fc0;
54
- opacity: 0.2;
66
+ --_-dashkit-placeholder-color: var(--dashkit-placeholder-color, #fc0);
67
+ --_-dashkit-placeholder-opacity: var(--dashkit-placeholder-opacity, 0.2);
68
+ background: var(--_-dashkit-placeholder-color);
69
+ opacity: var(--_-dashkit-placeholder-opacity);
55
70
  transition-duration: 100ms;
56
71
  z-index: 2;
57
72
  user-select: none;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gravity-ui/dashkit",
3
- "version": "6.7.2",
3
+ "version": "6.8.0",
4
4
  "description": "Library for rendering dashboard grid layout",
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -38,7 +38,8 @@
38
38
  "@gravity-ui/i18n": "^1.0.0",
39
39
  "hashids": "^2.2.8",
40
40
  "immutability-helper": "^3.1.1",
41
- "react-grid-layout": "^1.3.4"
41
+ "react-grid-layout": "^1.3.4",
42
+ "react-transition-group": "^4.4.5"
42
43
  },
43
44
  "peerDependencies": {
44
45
  "@bem-react/classname": "^1.6.0",