@gooddata/sdk-ui-kit 10.18.0-alpha.9 → 10.18.0-beta.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 (58) hide show
  1. package/esm/@ui/@types/icon.d.ts +1 -1
  2. package/esm/@ui/@types/icon.d.ts.map +1 -1
  3. package/esm/@ui/@types/icon.js +1 -1
  4. package/esm/@ui/@types/icon.js.map +1 -1
  5. package/esm/@ui/UiButton/UiButton.d.ts +2 -1
  6. package/esm/@ui/UiButton/UiButton.d.ts.map +1 -1
  7. package/esm/@ui/UiButton/UiButton.js +2 -2
  8. package/esm/@ui/UiButton/UiButton.js.map +1 -1
  9. package/esm/@ui/UiIcon/icons.d.ts.map +1 -1
  10. package/esm/@ui/UiIcon/icons.js +8 -1
  11. package/esm/@ui/UiIcon/icons.js.map +1 -1
  12. package/esm/@ui/UiPagedVirtualList/UiPagedVirtualList.d.ts +28 -0
  13. package/esm/@ui/UiPagedVirtualList/UiPagedVirtualList.d.ts.map +1 -0
  14. package/esm/@ui/UiPagedVirtualList/UiPagedVirtualList.js +81 -0
  15. package/esm/@ui/UiPagedVirtualList/UiPagedVirtualList.js.map +1 -0
  16. package/esm/@ui/UiSkeleton/UiSkeleton.d.ts +31 -0
  17. package/esm/@ui/UiSkeleton/UiSkeleton.d.ts.map +1 -0
  18. package/esm/@ui/UiSkeleton/UiSkeleton.js +22 -0
  19. package/esm/@ui/UiSkeleton/UiSkeleton.js.map +1 -0
  20. package/esm/@ui/hooks/useElementSize.d.ts +10 -0
  21. package/esm/@ui/hooks/useElementSize.d.ts.map +1 -0
  22. package/esm/@ui/hooks/useElementSize.js +35 -0
  23. package/esm/@ui/hooks/useElementSize.js.map +1 -0
  24. package/esm/Dropdown/DropdownButton.d.ts +1 -0
  25. package/esm/Dropdown/DropdownButton.d.ts.map +1 -1
  26. package/esm/Dropdown/DropdownButton.js +3 -3
  27. package/esm/Dropdown/DropdownButton.js.map +1 -1
  28. package/esm/Header/Header.d.ts.map +1 -1
  29. package/esm/Header/Header.js +72 -16
  30. package/esm/Header/Header.js.map +1 -1
  31. package/esm/Header/HeaderHelp.d.ts +1 -0
  32. package/esm/Header/HeaderHelp.d.ts.map +1 -1
  33. package/esm/Header/HeaderHelp.js +1 -0
  34. package/esm/Header/HeaderHelp.js.map +1 -1
  35. package/esm/Header/HeaderMenu.d.ts.map +1 -1
  36. package/esm/Header/HeaderMenu.js +2 -1
  37. package/esm/Header/HeaderMenu.js.map +1 -1
  38. package/esm/Header/typings.d.ts +6 -1
  39. package/esm/Header/typings.d.ts.map +1 -1
  40. package/esm/Overlay/Overlay.d.ts.map +1 -1
  41. package/esm/Overlay/Overlay.js +5 -1
  42. package/esm/Overlay/Overlay.js.map +1 -1
  43. package/esm/Overlay/typings.d.ts +4 -0
  44. package/esm/Overlay/typings.d.ts.map +1 -1
  45. package/esm/index.d.ts +7 -2
  46. package/esm/index.d.ts.map +1 -1
  47. package/esm/index.js +4 -1
  48. package/esm/index.js.map +1 -1
  49. package/esm/sdk-ui-kit.d.ts +84 -3
  50. package/package.json +10 -8
  51. package/src/@ui/UiPagedVirtualList/UiPagedVirtualList.scss +44 -0
  52. package/src/@ui/UiSkeleton/UiSkeleton.scss +41 -0
  53. package/src/@ui/index.scss +3 -1
  54. package/styles/css/header.css +61 -3
  55. package/styles/css/header.css.map +1 -1
  56. package/styles/css/main.css +174 -3
  57. package/styles/css/main.css.map +1 -1
  58. package/styles/scss/header.scss +68 -2
@@ -1,5 +1,5 @@
1
1
  /**
2
2
  * @internal
3
3
  */
4
- export type IconType = "check" | "plus" | "sync" | "alert" | "close";
4
+ export type IconType = "check" | "plus" | "sync" | "alert" | "close" | "question";
5
5
  //# sourceMappingURL=icon.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../src/@ui/@types/icon.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC"}
1
+ {"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../src/@ui/@types/icon.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,UAAU,CAAC"}
@@ -1,3 +1,3 @@
1
- // (C) 2024 GoodData Corporation
1
+ // (C) 2024-2025 GoodData Corporation
2
2
  export {};
3
3
  //# sourceMappingURL=icon.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/@ui/@types/icon.ts"],"names":[],"mappings":"AAAA,gCAAgC"}
1
+ {"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/@ui/@types/icon.ts"],"names":[],"mappings":"AAAA,qCAAqC"}
@@ -16,9 +16,10 @@ export interface UiButtonProps {
16
16
  isLoading?: boolean;
17
17
  tooltip?: React.ReactNode;
18
18
  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
19
+ dataId?: string;
19
20
  }
20
21
  /**
21
22
  * @internal
22
23
  */
23
- export declare const UiButton: ({ buttonRef, size, variant, label, isDisabled, isLoading, iconBefore, iconAfter, onClick, }: UiButtonProps) => React.JSX.Element;
24
+ export declare const UiButton: ({ buttonRef, size, variant, label, isDisabled, isLoading, iconBefore, iconAfter, onClick, dataId, }: UiButtonProps) => React.JSX.Element;
24
25
  //# sourceMappingURL=UiButton.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"UiButton.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiButton/UiButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACrE,OAAO,EACH,cAAc,EACd,gBAAgB,EAChB,eAAe,EACf,aAAa,EACb,aAAa,EAChB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAG7C;;GAEG;AACH,MAAM,WAAW,aAAa;IAC1B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAC/C,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,OAAO,CAAC,EAAE,cAAc,GAAG,gBAAgB,GAAG,eAAe,GAAG,aAAa,GAAG,aAAa,CAAC;IAC9F,UAAU,CAAC,EAAE,QAAQ,CAAC;IACtB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC9D;AAID;;GAEG;AACH,eAAO,MAAM,QAAQ,gGAUlB,aAAa,sBAwBf,CAAC"}
1
+ {"version":3,"file":"UiButton.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiButton/UiButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACrE,OAAO,EACH,cAAc,EACd,gBAAgB,EAChB,eAAe,EACf,aAAa,EACb,aAAa,EAChB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAG7C;;GAEG;AACH,MAAM,WAAW,aAAa;IAC1B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAC/C,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,OAAO,CAAC,EAAE,cAAc,GAAG,gBAAgB,GAAG,eAAe,GAAG,aAAa,GAAG,aAAa,CAAC;IAC9F,UAAU,CAAC,EAAE,QAAQ,CAAC;IACtB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC3D,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB;AAID;;GAEG;AACH,eAAO,MAAM,QAAQ,wGAWlB,aAAa,sBAyBf,CAAC"}
@@ -6,9 +6,9 @@ const { b, e } = bem("gd-ui-kit-button");
6
6
  /**
7
7
  * @internal
8
8
  */
9
- export const UiButton = ({ buttonRef, size = "medium", variant = "secondary", label, isDisabled, isLoading, iconBefore, iconAfter, onClick, }) => {
9
+ export const UiButton = ({ buttonRef, size = "medium", variant = "secondary", label, isDisabled, isLoading, iconBefore, iconAfter, onClick, dataId, }) => {
10
10
  const iconPosition = iconBefore ? "left" : iconAfter ? "right" : undefined;
11
- return (React.createElement("button", { ref: buttonRef, className: b({ size, variant, isLoading, iconPosition }), disabled: isDisabled, tabIndex: 0, onClick: onClick },
11
+ return (React.createElement("button", { ref: buttonRef, className: b({ size, variant, isLoading, iconPosition }), disabled: isDisabled, tabIndex: 0, onClick: onClick, "data-id": dataId },
12
12
  iconBefore ? (React.createElement("span", { className: e("icon") },
13
13
  React.createElement(UiIcon, { type: iconBefore, label: label, size: 14 }))) : null,
14
14
  React.createElement("span", { className: e("text") }, label),
@@ -1 +1 @@
1
- {"version":3,"file":"UiButton.js","sourceRoot":"","sources":["../../../src/@ui/UiButton/UiButton.tsx"],"names":[],"mappings":"AAAA,gCAAgC;AAEhC,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAEvC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAkB7C,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,GAAG,CAAC,kBAAkB,CAAC,CAAC;AAEzC;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACrB,SAAS,EACT,IAAI,GAAG,QAAQ,EACf,OAAO,GAAG,WAAW,EACrB,KAAK,EACL,UAAU,EACV,SAAS,EACT,UAAU,EACV,SAAS,EACT,OAAO,GACK,EAAE,EAAE;IAChB,MAAM,YAAY,GAAG,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC;IAE3E,OAAO,CACH,gCACI,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC,EACxD,QAAQ,EAAE,UAAU,EACpB,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,OAAO;QAEf,UAAU,CAAC,CAAC,CAAC,CACV,8BAAM,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC;YACtB,oBAAC,MAAM,IAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,GAAI,CACjD,CACV,CAAC,CAAC,CAAC,IAAI;QACR,8BAAM,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,IAAG,KAAK,CAAQ;QACzC,SAAS,CAAC,CAAC,CAAC,CACT,8BAAM,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC;YACtB,oBAAC,MAAM,IAAC,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,GAAI,CAChD,CACV,CAAC,CAAC,CAAC,IAAI,CACH,CACZ,CAAC;AACN,CAAC,CAAC"}
1
+ {"version":3,"file":"UiButton.js","sourceRoot":"","sources":["../../../src/@ui/UiButton/UiButton.tsx"],"names":[],"mappings":"AAAA,gCAAgC;AAEhC,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAEvC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAmB7C,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,GAAG,CAAC,kBAAkB,CAAC,CAAC;AAEzC;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACrB,SAAS,EACT,IAAI,GAAG,QAAQ,EACf,OAAO,GAAG,WAAW,EACrB,KAAK,EACL,UAAU,EACV,SAAS,EACT,UAAU,EACV,SAAS,EACT,OAAO,EACP,MAAM,GACM,EAAE,EAAE;IAChB,MAAM,YAAY,GAAG,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC;IAE3E,OAAO,CACH,gCACI,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC,EACxD,QAAQ,EAAE,UAAU,EACpB,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,OAAO,aACP,MAAM;QAEd,UAAU,CAAC,CAAC,CAAC,CACV,8BAAM,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC;YACtB,oBAAC,MAAM,IAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,GAAI,CACjD,CACV,CAAC,CAAC,CAAC,IAAI;QACR,8BAAM,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,IAAG,KAAK,CAAQ;QACzC,SAAS,CAAC,CAAC,CAAC,CACT,8BAAM,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC;YACtB,oBAAC,MAAM,IAAC,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,GAAI,CAChD,CACV,CAAC,CAAC,CAAC,IAAI,CACH,CACZ,CAAC;AACN,CAAC,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiIcon/icons.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,MAAM,WAAW,WAAW;IACxB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,OAAO,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,QAAQ,EAAE,WAAW,CAgDrD,CAAC"}
1
+ {"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiIcon/icons.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,MAAM,WAAW,WAAW;IACxB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,OAAO,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,QAAQ,EAAE,WAAW,CAqErD,CAAC"}
@@ -1,4 +1,4 @@
1
- // (C) 2024 GoodData Corporation
1
+ // (C) 2024-2025 GoodData Corporation
2
2
  import React from "react";
3
3
  import { e } from "./iconBem.js";
4
4
  export const iconsConfig = {
@@ -22,5 +22,12 @@ export const iconsConfig = {
22
22
  content: (React.createElement("path", { d: "M11.332 10.7559L6.38281 5.79297L11.0723 1.11719C11.1178 1.0625 11.1406 0.998698 11.1406 0.925781C11.1406 0.852865 11.1178 0.789062 11.0723 0.734375C11.0176 0.679688 10.9492 0.652344 10.8672 0.652344C10.7943 0.652344 10.735 0.679688 10.6895 0.734375L6 5.41016L1.31055 0.734375C1.26497 0.679688 1.20117 0.652344 1.11914 0.652344C1.04622 0.652344 0.982422 0.679688 0.927734 0.734375C0.882161 0.789062 0.859375 0.852865 0.859375 0.925781C0.859375 0.998698 0.882161 1.0625 0.927734 1.11719L5.61719 5.79297L0.667969 10.7559C0.613281 10.8105 0.585938 10.8743 0.585938 10.9473C0.585938 11.0202 0.613281 11.084 0.667969 11.1387C0.695312 11.166 0.722656 11.1888 0.75 11.207C0.786458 11.2161 0.822917 11.2207 0.859375 11.2207C0.886719 11.2207 0.91862 11.2161 0.955078 11.207C0.991536 11.1888 1.02344 11.166 1.05078 11.1387L6 6.17578L10.9492 11.1387C10.9766 11.166 11.0085 11.1888 11.0449 11.207C11.0814 11.2161 11.1133 11.2207 11.1406 11.2207C11.1771 11.2207 11.209 11.2161 11.2363 11.207C11.2728 11.1888 11.3047 11.166 11.332 11.1387C11.3867 11.084 11.4141 11.0202 11.4141 10.9473C11.4141 10.8743 11.3867 10.8105 11.332 10.7559Z", className: e("fill") })),
23
23
  viewBox: "0 0 12 12",
24
24
  },
25
+ question: {
26
+ content: (React.createElement(React.Fragment, null,
27
+ React.createElement("path", { d: "M9.95618 6.5C9.08558 6.5 8.41614 7.01519 8.22278 7.6258C8.12553 7.93293 7.7977 8.10307 7.49057 8.00581C7.18343 7.90856 7.01329 7.58073 7.11055 7.2736C7.47729 6.11545 8.64581 5.33333 9.95618 5.33333C11.5211 5.33333 12.9167 6.46884 12.9167 8.01667C12.9167 9.36868 11.8519 10.4061 10.5395 10.6469V11.75C10.5395 12.0722 10.2783 12.3333 9.95618 12.3333C9.63401 12.3333 9.37284 12.0722 9.37284 11.75V10.1167C9.37284 9.7945 9.63401 9.53333 9.95618 9.53333C11.0169 9.53333 11.75 8.78844 11.75 8.01667C11.75 7.24489 11.0169 6.5 9.95618 6.5Z", className: e("fill") }),
28
+ React.createElement("path", { d: "M10 12.9167C9.51675 12.9167 9.125 13.3084 9.125 13.7917C9.125 14.2749 9.51675 14.6667 10 14.6667C10.4832 14.6667 10.875 14.2749 10.875 13.7917C10.875 13.3084 10.4832 12.9167 10 12.9167Z", className: e("fill") }),
29
+ React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10 17C13.866 17 17 13.866 17 10C17 6.13401 13.866 3 10 3C6.13401 3 3 6.13401 3 10C3 13.866 6.13401 17 10 17ZM10 16.3C13.4794 16.3 16.3 13.4794 16.3 10C16.3 6.52061 13.4794 3.7 10 3.7C6.52061 3.7 3.7 6.52061 3.7 10C3.7 13.4794 6.52061 16.3 10 16.3Z", className: e("fill") }))),
30
+ viewBox: "0 0 20 20",
31
+ },
25
32
  };
26
33
  //# sourceMappingURL=icons.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"icons.js","sourceRoot":"","sources":["../../../src/@ui/UiIcon/icons.tsx"],"names":[],"mappings":"AAAA,gCAAgC;AAChC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,CAAC,EAAE,MAAM,cAAc,CAAC;AAQjC,MAAM,CAAC,MAAM,WAAW,GAAkC;IACtD,KAAK,EAAE;QACH,OAAO,EAAE,CACL,8BACI,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,ktBAAktB,EACptB,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,GACtB,CACL;QACD,OAAO,EAAE,WAAW;KACvB;IACD,IAAI,EAAE;QACF,OAAO,EAAE,CACL,8BACI,CAAC,EAAC,u2BAAu2B,EACz2B,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,GACtB,CACL;QACD,OAAO,EAAE,WAAW;KACvB;IACD,IAAI,EAAE;QACF,OAAO,EAAE,CACL,8BACI,CAAC,EAAC,gwFAAgwF,EAClwF,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,GACtB,CACL;QACD,OAAO,EAAE,WAAW;KACvB;IACD,KAAK,EAAE;QACH,OAAO,EAAE,CACL,8BACI,CAAC,EAAC,m7GAAm7G,EACr7G,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,GACtB,CACL;QACD,OAAO,EAAE,WAAW;KACvB;IACD,KAAK,EAAE;QACH,OAAO,EAAE,CACL,8BACI,CAAC,EAAC,gmCAAgmC,EAClmC,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,GACtB,CACL;QACD,OAAO,EAAE,WAAW;KACvB;CACJ,CAAC"}
1
+ {"version":3,"file":"icons.js","sourceRoot":"","sources":["../../../src/@ui/UiIcon/icons.tsx"],"names":[],"mappings":"AAAA,qCAAqC;AACrC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,CAAC,EAAE,MAAM,cAAc,CAAC;AAQjC,MAAM,CAAC,MAAM,WAAW,GAAkC;IACtD,KAAK,EAAE;QACH,OAAO,EAAE,CACL,8BACI,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,ktBAAktB,EACptB,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,GACtB,CACL;QACD,OAAO,EAAE,WAAW;KACvB;IACD,IAAI,EAAE;QACF,OAAO,EAAE,CACL,8BACI,CAAC,EAAC,u2BAAu2B,EACz2B,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,GACtB,CACL;QACD,OAAO,EAAE,WAAW;KACvB;IACD,IAAI,EAAE;QACF,OAAO,EAAE,CACL,8BACI,CAAC,EAAC,gwFAAgwF,EAClwF,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,GACtB,CACL;QACD,OAAO,EAAE,WAAW;KACvB;IACD,KAAK,EAAE;QACH,OAAO,EAAE,CACL,8BACI,CAAC,EAAC,m7GAAm7G,EACr7G,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,GACtB,CACL;QACD,OAAO,EAAE,WAAW;KACvB;IACD,KAAK,EAAE;QACH,OAAO,EAAE,CACL,8BACI,CAAC,EAAC,gmCAAgmC,EAClmC,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,GACtB,CACL;QACD,OAAO,EAAE,WAAW;KACvB;IACD,QAAQ,EAAE;QACN,OAAO,EAAE,CACL;YACI,8BACI,CAAC,EAAC,qhBAAqhB,EACvhB,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,GACtB;YACF,8BACI,CAAC,EAAC,2LAA2L,EAC7L,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,GACtB;YACF,8BACI,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,0PAA0P,EAC5P,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,GACtB,CACH,CACN;QACD,OAAO,EAAE,WAAW;KACvB;CACJ,CAAC"}
@@ -0,0 +1,28 @@
1
+ import React from "react";
2
+ /**
3
+ * @internal
4
+ */
5
+ export interface UiPagedVirtualListSkeletonItemProps {
6
+ itemHeight: number;
7
+ }
8
+ /**
9
+ * @internal
10
+ */
11
+ export interface UiPagedVirtualListProps<T> {
12
+ maxHeight: number;
13
+ items?: T[];
14
+ itemHeight: number;
15
+ itemsGap: number;
16
+ itemPadding: number;
17
+ skeletonItemsCount: number;
18
+ hasNextPage?: boolean;
19
+ loadNextPage?: () => void;
20
+ isLoading?: boolean;
21
+ children: (item: T) => React.ReactNode;
22
+ SkeletonItem?: React.ComponentType<UiPagedVirtualListSkeletonItemProps>;
23
+ }
24
+ /**
25
+ * @internal
26
+ */
27
+ export declare function UiPagedVirtualList<T>(props: UiPagedVirtualListProps<T>): React.JSX.Element;
28
+ //# sourceMappingURL=UiPagedVirtualList.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"UiPagedVirtualList.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiPagedVirtualList/UiPagedVirtualList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAOzC;;GAEG;AACH,MAAM,WAAW,mCAAmC;IAChD,UAAU,EAAE,MAAM,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,WAAW,uBAAuB,CAAC,CAAC;IACtC,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACvC,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,mCAAmC,CAAC,CAAC;CAC3E;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,EAAE,KAAK,EAAE,uBAAuB,CAAC,CAAC,CAAC,qBAmDtE"}
@@ -0,0 +1,81 @@
1
+ // (C) 2024-2025 GoodData Corporation
2
+ import React, { useEffect } from "react";
3
+ import { useVirtualizer } from "@tanstack/react-virtual";
4
+ import { UiSkeleton } from "../UiSkeleton/UiSkeleton.js";
5
+ import { bem } from "../@utils/bem.js";
6
+ const { b, e } = bem("gd-ui-kit-paged-virtual-list");
7
+ /**
8
+ * @internal
9
+ */
10
+ export function UiPagedVirtualList(props) {
11
+ const { SkeletonItem = UiSkeleton, items, itemHeight, itemsGap, itemPadding, children } = props;
12
+ const { itemsCount, scrollContainerRef, height, hasScroll, rowVirtualizer, virtualItems } = useVirtualList(props);
13
+ return (React.createElement("div", { className: b({
14
+ hasScroll,
15
+ }) },
16
+ React.createElement("div", { ref: scrollContainerRef, className: e("scroll-container"), style: { height, paddingTop: itemsGap } },
17
+ React.createElement("div", { style: {
18
+ height: `${rowVirtualizer.getTotalSize()}px`,
19
+ width: "100%",
20
+ position: "relative",
21
+ } }, virtualItems.map((virtualRow) => {
22
+ const item = items?.[virtualRow.index];
23
+ const isSkeletonItem = virtualRow.index > itemsCount - 1;
24
+ const style = {
25
+ width: `calc(100% + ${hasScroll ? "10px" : "0px"})`,
26
+ height: `${virtualRow.size}px`,
27
+ transform: `translateY(${virtualRow.start}px)`,
28
+ paddingRight: itemPadding,
29
+ paddingLeft: itemPadding,
30
+ };
31
+ return (React.createElement("div", { key: virtualRow.index, className: e("item"), style: style },
32
+ isSkeletonItem ? (React.createElement(SkeletonItem, { key: virtualRow.index, itemHeight: itemHeight })) : (children(item)),
33
+ React.createElement("div", { className: e("gap"), style: { height: itemsGap } })));
34
+ })))));
35
+ }
36
+ function useVirtualList(props) {
37
+ const { items, itemHeight, itemsGap, skeletonItemsCount, hasNextPage, loadNextPage, isLoading, maxHeight, } = props;
38
+ const scrollContainerRef = React.useRef(null);
39
+ const itemsCount = items ? items.length : 0;
40
+ let renderItemsCount = itemsCount;
41
+ if (hasNextPage) {
42
+ renderItemsCount = itemsCount + skeletonItemsCount;
43
+ }
44
+ else if (itemsCount === 0 && isLoading) {
45
+ renderItemsCount = skeletonItemsCount;
46
+ }
47
+ //
48
+ const realHeight = itemsCount > 0
49
+ ? (itemHeight + itemsGap) * itemsCount + itemsGap
50
+ : skeletonItemsCount * (itemHeight + itemsGap) + itemsGap;
51
+ const height = Math.min(maxHeight, realHeight);
52
+ const hasScroll = scrollContainerRef.current
53
+ ? scrollContainerRef.current?.scrollHeight >
54
+ scrollContainerRef.current?.getBoundingClientRect().height
55
+ : false;
56
+ const rowVirtualizer = useVirtualizer({
57
+ count: renderItemsCount,
58
+ getScrollElement: () => scrollContainerRef.current,
59
+ estimateSize: () => itemHeight + itemsGap,
60
+ overscan: 5,
61
+ });
62
+ const virtualItems = rowVirtualizer.getVirtualItems();
63
+ useEffect(() => {
64
+ const [lastItem] = [...virtualItems].reverse();
65
+ if (!lastItem) {
66
+ return;
67
+ }
68
+ if (lastItem.index >= itemsCount - 1 - skeletonItemsCount && hasNextPage && !isLoading) {
69
+ loadNextPage?.();
70
+ }
71
+ }, [hasNextPage, loadNextPage, itemsCount, isLoading, virtualItems, skeletonItemsCount]);
72
+ return {
73
+ itemsCount,
74
+ scrollContainerRef,
75
+ height,
76
+ hasScroll,
77
+ rowVirtualizer,
78
+ virtualItems,
79
+ };
80
+ }
81
+ //# sourceMappingURL=UiPagedVirtualList.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"UiPagedVirtualList.js","sourceRoot":"","sources":["../../../src/@ui/UiPagedVirtualList/UiPagedVirtualList.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,31 @@
1
+ import React from "react";
2
+ /**
3
+ * @internal
4
+ */
5
+ export interface UiSkeletonProps {
6
+ /**
7
+ * Number of items to render.
8
+ */
9
+ itemsCount?: number;
10
+ /**
11
+ * Height of the item, or items.
12
+ */
13
+ itemHeight?: (number | string) | (number | string)[];
14
+ /**
15
+ * Width of the item, or items.
16
+ */
17
+ itemWidth?: (number | string) | (number | string)[];
18
+ /**
19
+ * Gap between the items.
20
+ */
21
+ itemsGap?: number;
22
+ /**
23
+ * Whether to render the skeleton in a row or column.
24
+ */
25
+ direction?: "row" | "column";
26
+ }
27
+ /**
28
+ * @internal
29
+ */
30
+ export declare function UiSkeleton({ itemsCount, itemHeight, itemWidth, itemsGap, direction, }: UiSkeletonProps): React.JSX.Element;
31
+ //# sourceMappingURL=UiSkeleton.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"UiSkeleton.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiSkeleton/UiSkeleton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAMvC;;GAEG;AACH,MAAM,WAAW,eAAe;IAC5B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IAErD;;OAEG;IACH,SAAS,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IAEpD;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;CAChC;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,EACvB,UAAc,EACd,UAAe,EACf,SAAS,EACT,QAAa,EACb,SAAoB,GACvB,EAAE,eAAe,qBA2BjB"}
@@ -0,0 +1,22 @@
1
+ // (C) 2024-2025 GoodData Corporation
2
+ import React, { useMemo } from "react";
3
+ import ReactLoadingSkeleton from "react-loading-skeleton";
4
+ import { bem } from "../@utils/bem.js";
5
+ const { b, e } = bem("gd-ui-kit-skeleton");
6
+ /**
7
+ * @internal
8
+ */
9
+ export function UiSkeleton({ itemsCount = 1, itemHeight = 24, itemWidth, itemsGap = 10, direction = "column", }) {
10
+ const items = Array.from({ length: itemsCount }, (_, idx) => (React.createElement("div", { className: e("item"), key: idx, style: {
11
+ height: typeof itemHeight === "number" || typeof itemHeight === "undefined"
12
+ ? itemHeight
13
+ : itemHeight[idx],
14
+ width: typeof itemWidth === "number" || typeof itemWidth === "undefined"
15
+ ? itemWidth
16
+ : itemWidth[idx],
17
+ } },
18
+ React.createElement(ReactLoadingSkeleton, null))));
19
+ const style = useMemo(() => ({ gap: itemsGap }), [itemsGap]);
20
+ return (React.createElement("div", { className: b({ direction }), style: style }, items));
21
+ }
22
+ //# sourceMappingURL=UiSkeleton.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"UiSkeleton.js","sourceRoot":"","sources":["../../../src/@ui/UiSkeleton/UiSkeleton.tsx"],"names":[],"mappings":"AAAA,qCAAqC;AACrC,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,oBAAoB,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAEvC,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,GAAG,CAAC,oBAAoB,CAAC,CAAC;AAgC3C;;GAEG;AACH,MAAM,UAAU,UAAU,CAAC,EACvB,UAAU,GAAG,CAAC,EACd,UAAU,GAAG,EAAE,EACf,SAAS,EACT,QAAQ,GAAG,EAAE,EACb,SAAS,GAAG,QAAQ,GACN;IACd,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CACzD,6BACI,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,EACpB,GAAG,EAAE,GAAG,EACR,KAAK,EAAE;YACH,MAAM,EACF,OAAO,UAAU,KAAK,QAAQ,IAAI,OAAO,UAAU,KAAK,WAAW;gBAC/D,CAAC,CAAC,UAAU;gBACZ,CAAC,CAAC,UAAU,CAAC,GAAG,CAAC;YACzB,KAAK,EACD,OAAO,SAAS,KAAK,QAAQ,IAAI,OAAO,SAAS,KAAK,WAAW;gBAC7D,CAAC,CAAC,SAAS;gBACX,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC;SAC3B;QAED,oBAAC,oBAAoB,OAAG,CACtB,CACT,CAAC,CAAC;IAEH,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAE7D,OAAO,CACH,6BAAK,SAAS,EAAE,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,IACzC,KAAK,CACJ,CACT,CAAC;AACN,CAAC"}
@@ -0,0 +1,10 @@
1
+ /// <reference types="react" />
2
+ /**
3
+ * @internal
4
+ */
5
+ export declare function useElementSize(): {
6
+ ref: import("react").MutableRefObject<HTMLElement>;
7
+ height: number;
8
+ width: number;
9
+ };
10
+ //# sourceMappingURL=useElementSize.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useElementSize.d.ts","sourceRoot":"","sources":["../../../src/@ui/hooks/useElementSize.tsx"],"names":[],"mappings":";AAGA;;GAEG;AACH,wBAAgB,cAAc;;;;EAgC7B"}
@@ -0,0 +1,35 @@
1
+ // (C) 2024-2025 GoodData Corporation
2
+ import { useLayoutEffect, useState, useRef } from "react";
3
+ /**
4
+ * @internal
5
+ */
6
+ export function useElementSize() {
7
+ const ref = useRef(null);
8
+ const [height, setHeight] = useState(0);
9
+ const [width, setWidth] = useState(0);
10
+ useLayoutEffect(() => {
11
+ const resizeObserver = new ResizeObserver((entries) => {
12
+ const [entry] = entries;
13
+ if (entry) {
14
+ setHeight(entry.contentRect.height);
15
+ setWidth(entry.contentRect.width);
16
+ }
17
+ });
18
+ if (ref.current) {
19
+ resizeObserver.observe(ref.current);
20
+ }
21
+ return () => {
22
+ if (resizeObserver) {
23
+ resizeObserver.disconnect();
24
+ setHeight(0);
25
+ setWidth(0);
26
+ }
27
+ };
28
+ }, []);
29
+ return {
30
+ ref,
31
+ height,
32
+ width,
33
+ };
34
+ }
35
+ //# sourceMappingURL=useElementSize.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useElementSize.js","sourceRoot":"","sources":["../../../src/@ui/hooks/useElementSize.tsx"],"names":[],"mappings":"AAAA,qCAAqC;AACrC,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE1D;;GAEG;AACH,MAAM,UAAU,cAAc;IAC1B,MAAM,GAAG,GAAG,MAAM,CAAqB,IAAI,CAAC,CAAC;IAC7C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAS,CAAC,CAAC,CAAC;IAChD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAS,CAAC,CAAC,CAAC;IAE9C,eAAe,CAAC,GAAG,EAAE;QACjB,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,CAAC,OAAO,EAAE,EAAE;YAClD,MAAM,CAAC,KAAK,CAAC,GAAG,OAAO,CAAC;YACxB,IAAI,KAAK,EAAE,CAAC;gBACR,SAAS,CAAC,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;gBACpC,QAAQ,CAAC,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;YACtC,CAAC;QACL,CAAC,CAAC,CAAC;QAEH,IAAI,GAAG,CAAC,OAAO,EAAE,CAAC;YACd,cAAc,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QACxC,CAAC;QAED,OAAO,GAAG,EAAE;YACR,IAAI,cAAc,EAAE,CAAC;gBACjB,cAAc,CAAC,UAAU,EAAE,CAAC;gBAC5B,SAAS,CAAC,CAAC,CAAC,CAAC;gBACb,QAAQ,CAAC,CAAC,CAAC,CAAC;YAChB,CAAC;QACL,CAAC,CAAC;IACN,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO;QACH,GAAG;QACH,MAAM;QACN,KAAK;KACR,CAAC;AACN,CAAC"}
@@ -7,6 +7,7 @@ export interface IDropdownButtonProps {
7
7
  className?: string;
8
8
  value?: ReactNode;
9
9
  title?: string;
10
+ ariaLabel?: string;
10
11
  disabled?: boolean;
11
12
  isOpen?: boolean;
12
13
  isSmall?: boolean;
@@ -1 +1 @@
1
- {"version":3,"file":"DropdownButton.d.ts","sourceRoot":"","sources":["../../src/Dropdown/DropdownButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIzC;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACjC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAExC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAyCzD,CAAC"}
1
+ {"version":3,"file":"DropdownButton.d.ts","sourceRoot":"","sources":["../../src/Dropdown/DropdownButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIzC;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACjC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAExC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA2CzD,CAAC"}
@@ -1,16 +1,16 @@
1
- // (C) 2007-2024 GoodData Corporation
1
+ // (C) 2007-2025 GoodData Corporation
2
2
  import React from "react";
3
3
  import cx from "classnames";
4
4
  import { Button } from "../Button/Button.js";
5
5
  /**
6
6
  * @internal
7
7
  */
8
- export const DropdownButton = ({ id, className, value, title = value, disabled, isOpen, isSmall = true, iconLeft, onClick, children, }) => {
8
+ export const DropdownButton = ({ id, className, value, title = value, ariaLabel, disabled, isOpen, isSmall = true, iconLeft, onClick, children, }) => {
9
9
  const buttonClasses = cx("gd-button-primary", "button-dropdown", "dropdown-button", {
10
10
  "gd-button-small": isSmall,
11
11
  "is-dropdown-open": isOpen,
12
12
  "is-active": isOpen,
13
13
  }, className);
14
- return (React.createElement(Button, { id: id, title: title && typeof title === "string" ? title : undefined, className: buttonClasses, value: value, iconLeft: iconLeft, iconRight: isOpen ? "gd-icon-navigateup" : "gd-icon-navigatedown", disabled: disabled, onClick: onClick }, children));
14
+ return (React.createElement(Button, { id: id, title: title && typeof title === "string" ? title : undefined, ariaLabel: ariaLabel, className: buttonClasses, value: value, iconLeft: iconLeft, iconRight: isOpen ? "gd-icon-navigateup" : "gd-icon-navigatedown", disabled: disabled, onClick: onClick }, children));
15
15
  };
16
16
  //# sourceMappingURL=DropdownButton.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"DropdownButton.js","sourceRoot":"","sources":["../../src/Dropdown/DropdownButton.tsx"],"names":[],"mappings":"AAAA,qCAAqC;AACrC,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAsB7C;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAmC,CAAC,EAC3D,EAAE,EACF,SAAS,EAET,KAAK,EACL,KAAK,GAAG,KAAK,EACb,QAAQ,EAER,MAAM,EACN,OAAO,GAAG,IAAI,EACd,QAAQ,EAER,OAAO,EACP,QAAQ,GACX,EAAE,EAAE;IACD,MAAM,aAAa,GAAG,EAAE,CACpB,mBAAmB,EACnB,iBAAiB,EACjB,iBAAiB,EACjB;QACI,iBAAiB,EAAE,OAAO;QAC1B,kBAAkB,EAAE,MAAM;QAC1B,WAAW,EAAE,MAAM;KACtB,EACD,SAAS,CACZ,CAAC;IAEF,OAAO,CACH,oBAAC,MAAM,IACH,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,EAC7D,SAAS,EAAE,aAAa,EACxB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,sBAAsB,EACjE,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,IAEf,QAAQ,CACJ,CACZ,CAAC;AACN,CAAC,CAAC"}
1
+ {"version":3,"file":"DropdownButton.js","sourceRoot":"","sources":["../../src/Dropdown/DropdownButton.tsx"],"names":[],"mappings":"AAAA,qCAAqC;AACrC,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAuB7C;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAmC,CAAC,EAC3D,EAAE,EACF,SAAS,EAET,KAAK,EACL,KAAK,GAAG,KAAK,EACb,SAAS,EACT,QAAQ,EAER,MAAM,EACN,OAAO,GAAG,IAAI,EACd,QAAQ,EAER,OAAO,EACP,QAAQ,GACX,EAAE,EAAE;IACD,MAAM,aAAa,GAAG,EAAE,CACpB,mBAAmB,EACnB,iBAAiB,EACjB,iBAAiB,EACjB;QACI,iBAAiB,EAAE,OAAO;QAC1B,kBAAkB,EAAE,MAAM;QAC1B,WAAW,EAAE,MAAM;KACtB,EACD,SAAS,CACZ,CAAC;IAEF,OAAO,CACH,oBAAC,MAAM,IACH,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,EAC7D,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,aAAa,EACxB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,sBAAsB,EACjE,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,IAEf,QAAQ,CACJ,CACZ,CAAC;AACN,CAAC,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../src/Header/Header.tsx"],"names":[],"mappings":"AACA,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,qBAAqB,EAAgC,MAAM,YAAY,CAAC;AAuBjF,OAAO,EAAE,eAAe,EAAoC,MAAM,cAAc,CAAC;AA6cjF;;GAEG;AACH,eAAO,MAAM,SAAS,oJAErB,CAAC"}
1
+ {"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../src/Header/Header.tsx"],"names":[],"mappings":"AACA,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,qBAAqB,EAAgC,MAAM,YAAY,CAAC;AAuBjF,OAAO,EAAE,eAAe,EAAoC,MAAM,cAAc,CAAC;AAohBjF;;GAEG;AACH,eAAO,MAAM,SAAS,oJAErB,CAAC"}
@@ -42,6 +42,7 @@ class AppHeaderCore extends Component {
42
42
  helpMenuItems: [],
43
43
  menuItemsGroups: [],
44
44
  search: null,
45
+ notificationsPanel: null,
45
46
  };
46
47
  nodeRef = createRef();
47
48
  resizeHandler = debounce(() => this.measure(), 100);
@@ -55,6 +56,7 @@ class AppHeaderCore extends Component {
55
56
  responsiveMode: false,
56
57
  isHelpMenuOpen: false,
57
58
  isSearchMenuOpen: false,
59
+ isNotificationsMenuOpen: false,
58
60
  };
59
61
  }
60
62
  render() {
@@ -107,6 +109,7 @@ class AppHeaderCore extends Component {
107
109
  isOverlayMenuOpen: false,
108
110
  isHelpMenuOpen: false,
109
111
  isSearchMenuOpen: false,
112
+ isNotificationsMenuOpen: false,
110
113
  });
111
114
  }
112
115
  };
@@ -135,18 +138,36 @@ class AppHeaderCore extends Component {
135
138
  isOverlayMenuOpen,
136
139
  isHelpMenuOpen: false,
137
140
  isSearchMenuOpen: false,
141
+ isNotificationsMenuOpen: false,
138
142
  });
139
143
  };
140
144
  toggleSearchMenu = () => {
141
145
  this.setState(({ isSearchMenuOpen }) => ({
142
146
  isSearchMenuOpen: !isSearchMenuOpen,
143
147
  isHelpMenuOpen: false,
148
+ isNotificationsMenuOpen: false,
149
+ }));
150
+ };
151
+ toggleNotificationsMenu = () => {
152
+ this.setState(({ isNotificationsMenuOpen }) => ({
153
+ isNotificationsMenuOpen: !isNotificationsMenuOpen,
154
+ isHelpMenuOpen: false,
155
+ isSearchMenuOpen: false,
156
+ }));
157
+ };
158
+ closeNotificationsMenu = () => {
159
+ this.setState(() => ({
160
+ isNotificationsMenuOpen: false,
161
+ isHelpMenuOpen: false,
162
+ isSearchMenuOpen: false,
163
+ isOverlayMenuOpen: false,
144
164
  }));
145
165
  };
146
166
  setHelpMenu = (isHelpMenuOpen) => {
147
167
  this.setState({
148
168
  isHelpMenuOpen,
149
169
  isSearchMenuOpen: false,
170
+ isNotificationsMenuOpen: false,
150
171
  });
151
172
  };
152
173
  toggleHelpMenu = () => this.setHelpMenu(!this.state.isHelpMenuOpen);
@@ -159,20 +180,28 @@ class AppHeaderCore extends Component {
159
180
  addHelpItemGroup = (itemGroups) => {
160
181
  return !this.props.documentationUrl ? itemGroups : [...itemGroups, [this.getHelpMenuLink()]];
161
182
  };
162
- addSearchMenu = (itemGroups) => {
163
- if (!this.props.search) {
183
+ addAdditionalItems = (itemGroups) => {
184
+ const additionalItems = [];
185
+ if (this.props.search) {
186
+ additionalItems.push({
187
+ key: "gs.header.search",
188
+ className: "gd-icon-header-search",
189
+ onClick: this.toggleSearchMenu,
190
+ });
191
+ }
192
+ if (this.props.notificationsPanel) {
193
+ additionalItems.push({
194
+ key: "gs.header.notifications",
195
+ className: "gd-icon-header-notifications",
196
+ icon: (React.createElement("span", { className: "gd-header-notifications-icon" },
197
+ React.createElement(Icon.Alert, { width: 16, height: 16 }))),
198
+ onClick: this.toggleNotificationsMenu,
199
+ });
200
+ }
201
+ if (!additionalItems.length) {
164
202
  return itemGroups;
165
203
  }
166
- return [
167
- ...itemGroups,
168
- [
169
- {
170
- key: "gs.header.search",
171
- className: "gd-icon-header-search",
172
- onClick: this.toggleSearchMenu,
173
- },
174
- ],
175
- ];
204
+ return [...itemGroups, additionalItems];
176
205
  };
177
206
  getHelpMenu = () => [
178
207
  [this.getHelpMenuLink("gd-icon-header-help-back"), ...this.props.helpMenuItems],
@@ -210,6 +239,7 @@ class AppHeaderCore extends Component {
210
239
  "hamburger-icon": true,
211
240
  "is-open": this.state.isOverlayMenuOpen,
212
241
  "search-open": this.state.isSearchMenuOpen,
242
+ "notifications-open": this.state.isNotificationsMenuOpen,
213
243
  });
214
244
  return (React.createElement(React.Fragment, null,
215
245
  React.createElement("div", { className: "hamburger-wrapper", key: "hamburger-wrapper" },
@@ -220,15 +250,24 @@ class AppHeaderCore extends Component {
220
250
  this.state.isOverlayMenuOpen ? this.renderOverlayMenu() : null));
221
251
  };
222
252
  renderOverlayMenu = () => {
253
+ let content = this.renderVerticalMenu();
254
+ if (this.state.isSearchMenuOpen) {
255
+ content = this.renderSearchMenu();
256
+ }
257
+ if (this.state.isNotificationsMenuOpen) {
258
+ content = this.renderNotificationsOverlay();
259
+ }
223
260
  return (React.createElement(Overlay, { key: "header-overlay-menu", alignPoints: [
224
261
  {
225
- align: this.state.isSearchMenuOpen ? "tl tl" : "tr tr",
262
+ align: this.state.isSearchMenuOpen || this.state.isNotificationsMenuOpen
263
+ ? "tl tl"
264
+ : "tr tr",
226
265
  },
227
266
  ], closeOnOutsideClick: this.state.isOverlayMenuOpen, isModal: this.state.isOverlayMenuOpen, positionType: "fixed", onClose: () => {
228
267
  this.setOverlayMenu(false);
229
268
  } },
230
269
  React.createElement(TransitionGroup, null,
231
- React.createElement(CSSTransition, { classNames: "gd-header", timeout: 300 }, this.state.isSearchMenuOpen ? this.renderSearchMenu() : this.renderVerticalMenu()))));
270
+ React.createElement(CSSTransition, { classNames: "gd-header", timeout: 300 }, content))));
232
271
  };
233
272
  renderSearchMenu = () => {
234
273
  return (React.createElement("div", { className: "gd-header-menu-search" },
@@ -236,6 +275,18 @@ class AppHeaderCore extends Component {
236
275
  React.createElement(FormattedMessage, { id: "gs.header.search" })),
237
276
  React.createElement(HeaderSearchProvider, { isOpen: this.state.isSearchMenuOpen, toggleOpen: this.toggleSearchMenu }, this.props.search)));
238
277
  };
278
+ renderNotificationsOverlay = () => {
279
+ if (!this.props.notificationsPanel) {
280
+ return null;
281
+ }
282
+ return (React.createElement("div", { className: "gd-header-menu-notifications" },
283
+ React.createElement(Typography, { tagName: "h3", className: "gd-header-menu-notifications-title" },
284
+ React.createElement(FormattedMessage, { id: "gs.header.notifications" })),
285
+ this.props.notificationsPanel({
286
+ isMobile: true,
287
+ closeNotificationsOverlay: this.closeNotificationsMenu,
288
+ })));
289
+ };
239
290
  renderTrialItems = () => {
240
291
  if (this.props.expiredDate || this.props.showUpsellButton) {
241
292
  return (React.createElement("div", { className: "gd-header-menu-trial gd-header-measure" },
@@ -249,7 +300,7 @@ class AppHeaderCore extends Component {
249
300
  const menuItemsGroups = !this.state.isHelpMenuOpen
250
301
  ? this.props.showStaticHelpMenu
251
302
  ? [[this.getHelpMenuLink()]]
252
- : this.addHelpItemGroup(this.addSearchMenu(this.props.menuItemsGroups))
303
+ : this.addHelpItemGroup(this.addAdditionalItems(this.props.menuItemsGroups))
253
304
  : this.getHelpMenu();
254
305
  return (React.createElement("div", { key: "overlay-menu", className: "gd-header-menu-vertical-wrapper" },
255
306
  React.createElement("div", { className: "gd-header-menu-vertical-header" }, "Menu"),
@@ -278,7 +329,12 @@ class AppHeaderCore extends Component {
278
329
  React.createElement(HeaderMenu, { onMenuItemClick: this.props.onMenuItemClick, sections: this.props.menuItemsGroups, className: "gd-header-menu-horizontal" }),
279
330
  this.renderTrialItems(),
280
331
  this.props.showChatItem ? React.createElement(HeaderChatButton, { onClick: this.props.onChatItemClick }) : null,
281
- this.props.notificationsPanel ?? null,
332
+ this.props.notificationsPanel
333
+ ? this.props.notificationsPanel({
334
+ isMobile: false,
335
+ closeNotificationsOverlay: this.closeNotificationsMenu,
336
+ })
337
+ : null,
282
338
  this.props.search ? (React.createElement(HeaderSearchProvider, { isOpen: this.state.isSearchMenuOpen, toggleOpen: this.toggleSearchMenu },
283
339
  React.createElement(HeaderSearchButton, { title: this.props.intl.formatMessage({ id: "gs.header.search" }) }, this.props.search))) : null,
284
340
  this.props.helpMenuItems.length ? (React.createElement(HeaderHelp, { onMenuItemClick: this.props.onMenuItemClick, className: "gd-header-measure", helpMenuDropdownAlignPoints: helpMenuDropdownAlignPoints, items: this.props.helpMenuItems, disableDropdown: this.props.disableHelpDropdown, onHelpClicked: this.props.onHelpClick, helpRedirectUrl: this.props.helpRedirectUrl })) : null,