@capillarytech/blaze-ui 6.1.4 → 6.1.6-beta.1

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 (87) hide show
  1. package/CapDragReorder/Card.d.ts +2 -2
  2. package/CapDragReorder/Card.d.ts.map +1 -1
  3. package/CapDragReorder/Card.js +53 -51
  4. package/CapDragReorder/index.d.ts +2 -9
  5. package/CapDragReorder/index.d.ts.map +1 -1
  6. package/CapDragReorder/index.js +26 -15
  7. package/CapDragReorder/styles.css +12 -2
  8. package/CapDragReorder/styles.d.ts +2 -12
  9. package/CapDragReorder/styles.d.ts.map +1 -1
  10. package/CapDragReorder/styles.js +1 -1
  11. package/CapDragReorder/styles.module.scss.js +29 -0
  12. package/CapDragReorder/styles.scss +23 -10
  13. package/CapDragReorder/tests/CapDragReorder.mockData.d.ts +4 -0
  14. package/CapDragReorder/tests/CapDragReorder.mockData.d.ts.map +1 -0
  15. package/CapDragReorder/types.d.ts +32 -0
  16. package/CapDragReorder/types.d.ts.map +1 -0
  17. package/CapDragReorder/types.js +1 -0
  18. package/CapNavigationSPA/CapNavigationSPASidebar/index.d.ts +10 -0
  19. package/CapNavigationSPA/CapNavigationSPASidebar/index.d.ts.map +1 -0
  20. package/CapNavigationSPA/CapNavigationSPASidebar/index.js +373 -0
  21. package/CapNavigationSPA/CapNavigationSPASidebar/styles.css +318 -0
  22. package/CapNavigationSPA/CapNavigationSPASidebar/styles.module.scss.js +56 -0
  23. package/CapNavigationSPA/CapNavigationSPASidebar/styles.scss +385 -0
  24. package/CapNavigationSPA/CapNavigationSPASidebar/types.d.ts +31 -0
  25. package/CapNavigationSPA/CapNavigationSPASidebar/types.d.ts.map +1 -0
  26. package/CapNavigationSPA/CapNavigationSPASidebar/types.js +1 -0
  27. package/CapNavigationSPA/CapNavigationSPATopBar/index.d.ts +10 -0
  28. package/CapNavigationSPA/CapNavigationSPATopBar/index.d.ts.map +1 -0
  29. package/CapNavigationSPA/CapNavigationSPATopBar/index.js +119 -0
  30. package/CapNavigationSPA/CapNavigationSPATopBar/styles.css +141 -0
  31. package/CapNavigationSPA/CapNavigationSPATopBar/styles.module.scss.js +19 -0
  32. package/CapNavigationSPA/CapNavigationSPATopBar/styles.scss +163 -0
  33. package/CapNavigationSPA/CapNavigationSPATopBar/types.d.ts +28 -0
  34. package/CapNavigationSPA/CapNavigationSPATopBar/types.d.ts.map +1 -0
  35. package/CapNavigationSPA/CapNavigationSPATopBar/types.js +1 -0
  36. package/CapNavigationSPA/constants.d.ts +2 -0
  37. package/CapNavigationSPA/constants.d.ts.map +1 -0
  38. package/CapNavigationSPA/constants.js +4 -0
  39. package/CapNavigationSPA/index.d.ts +10 -0
  40. package/CapNavigationSPA/index.d.ts.map +1 -0
  41. package/CapNavigationSPA/index.js +436 -0
  42. package/CapNavigationSPA/messages.d.ts +13 -0
  43. package/CapNavigationSPA/messages.d.ts.map +1 -0
  44. package/CapNavigationSPA/messages.js +16 -0
  45. package/CapNavigationSPA/mockdata.d.ts +6 -0
  46. package/CapNavigationSPA/mockdata.d.ts.map +1 -0
  47. package/CapNavigationSPA/mockdata.js +4 -0
  48. package/CapNavigationSPA/styles.css +59 -0
  49. package/CapNavigationSPA/styles.module.scss.js +10 -0
  50. package/CapNavigationSPA/styles.scss +60 -0
  51. package/CapNavigationSPA/tests/CapNavigationSPA.mockData.d.ts +31 -0
  52. package/CapNavigationSPA/tests/CapNavigationSPA.mockData.d.ts.map +1 -0
  53. package/CapNavigationSPA/types.d.ts +39 -0
  54. package/CapNavigationSPA/types.d.ts.map +1 -0
  55. package/CapNavigationSPA/types.js +1 -0
  56. package/CapSelectFilter/index.js +2 -2
  57. package/CapTreeView/index.d.ts +6 -28
  58. package/CapTreeView/index.d.ts.map +1 -1
  59. package/CapTreeView/index.js +63 -78
  60. package/CapTreeView/styles.css +12 -22
  61. package/CapTreeView/styles.module.scss.js +16 -0
  62. package/CapTreeView/styles.scss +26 -39
  63. package/CapTreeView/tests/CapTreeView.mockData.d.ts +5 -0
  64. package/CapTreeView/tests/CapTreeView.mockData.d.ts.map +1 -0
  65. package/CapTreeView/types.d.ts +16 -0
  66. package/CapTreeView/types.d.ts.map +1 -0
  67. package/CapTreeView/types.js +1 -0
  68. package/assets/svgIcons/Icons/AiraNav.js +23 -0
  69. package/assets/svgIcons/Icons/CreativesNav.js +22 -0
  70. package/assets/svgIcons/Icons/DataManagement.js +22 -0
  71. package/assets/svgIcons/Icons/EngageNav.js +23 -0
  72. package/assets/svgIcons/Icons/InsightsNav.js +22 -0
  73. package/assets/svgIcons/Icons/LoyaltyTag.js +22 -0
  74. package/assets/svgIcons/Icons/Members.js +22 -0
  75. package/assets/svgIcons/Icons/RewardsOutline.js +4 -6
  76. package/assets/svgIcons/Icons/SidebarCollapse.js +17 -0
  77. package/assets/svgIcons/Icons/SidebarExpand.js +22 -0
  78. package/assets/svgIcons/Icons/ThreeStars.js +36 -18
  79. package/assets/svgIcons/component.js +27 -0
  80. package/assets/svgIcons/index.js +612 -594
  81. package/index.d.ts +6 -0
  82. package/index.d.ts.map +1 -1
  83. package/index.js +195 -189
  84. package/package.json +1 -1
  85. package/utils/getCapThemeConfig.d.ts.map +1 -1
  86. package/utils/getCapThemeConfig.js +11 -2
  87. package/.npmrc +0 -3
@@ -0,0 +1,39 @@
1
+ /**
2
+ * CapNavigationSPA reuses the same data and integration types as CapNavigation.
3
+ */
4
+ import type React from 'react';
5
+ export type { User, OrgDetails, ModuleDetail, CurrentOrgDetails, UserData, TopbarMenuItem, DropdownMenuItem, SidebarMenuItem, TopbarIcon, BreadcrumbItem, CSSOverrides, OuItem, RawProxyOrgItem, ProductListItem, FormatMessageArg, ProductChangeParam, TopbarMenuChangeParam, SidebarLinkClickParam, ProxyOrgListItem, OrgItemWithOuList, MenuItemClickParam, NormalizedTopbarIcon, } from '../CapNavigation/types';
6
+ import type { CapNavigationProps, SidebarMenuItem } from '../CapNavigation/types';
7
+ export type { CapNavigationProps } from '../CapNavigation/types';
8
+ /**
9
+ * Sidebar menu item with optional nested children (L2 flyout).
10
+ * Defined in CapNavigationSPA only; CapNavigation uses base SidebarMenuItem.
11
+ */
12
+ export interface CapNavigationSPASidebarMenuItem extends SidebarMenuItem {
13
+ children?: CapNavigationSPASidebarMenuItem[];
14
+ }
15
+ /**
16
+ * SPA-only props (not in CapNavigation).
17
+ */
18
+ export interface CapNavigationSPAOnlyConfig {
19
+ /** When true, sidebar is collapsed (icons only). Used with onSidebarCollapseExpand for toggle. */
20
+ sidebarCollapsed?: boolean;
21
+ /** Callback when user clicks sidebar collapse/expand control. When provided, collapse button is shown. */
22
+ onSidebarCollapseExpand?: () => void;
23
+ /** When true, sidebar item click does not change window.location (e.g. for Storybook). Default false */
24
+ disableSidebarNavigation?: boolean;
25
+ /** Sidebar menu items (SPA type supports nested children). */
26
+ sidebarMenuData?: CapNavigationSPASidebarMenuItem[];
27
+ }
28
+ /**
29
+ * Single config object combining all navigation options (except children).
30
+ * Pass as the only data prop: <CapNavigationSPA config={...} />.
31
+ * Extends CapNavigation props with SPA-only options (sidebar collapse, nested sidebar items).
32
+ */
33
+ export type CapNavigationSPAConfig = Omit<CapNavigationProps, 'children'> & CapNavigationSPAOnlyConfig;
34
+ /** Props for CapNavigationSPA: single config object and optional children. */
35
+ export interface CapNavigationSPAProps {
36
+ config: CapNavigationSPAConfig;
37
+ children?: React.ReactNode;
38
+ }
39
+ //# sourceMappingURL=types.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../components/CapNavigationSPA/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,YAAY,EACV,IAAI,EACJ,UAAU,EACV,YAAY,EACZ,iBAAiB,EACjB,QAAQ,EACR,cAAc,EACd,gBAAgB,EAChB,eAAe,EACf,UAAU,EACV,cAAc,EACd,YAAY,EACZ,MAAM,EACN,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,kBAAkB,EAClB,qBAAqB,EACrB,qBAAqB,EACrB,gBAAgB,EAChB,iBAAiB,EACjB,kBAAkB,EAClB,oBAAoB,GACrB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,KAAK,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAElF,YAAY,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAEjE;;;GAGG;AACH,MAAM,WAAW,+BAAgC,SAAQ,eAAe;IACtE,QAAQ,CAAC,EAAE,+BAA+B,EAAE,CAAC;CAC9C;AAED;;GAEG;AACH,MAAM,WAAW,0BAA0B;IACzC,kGAAkG;IAClG,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,0GAA0G;IAC1G,uBAAuB,CAAC,EAAE,MAAM,IAAI,CAAC;IACrC,wGAAwG;IACxG,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,8DAA8D;IAC9D,eAAe,CAAC,EAAE,+BAA+B,EAAE,CAAC;CACrD;AAED;;;;GAIG;AACH,MAAM,MAAM,sBAAsB,GAAG,IAAI,CAAC,kBAAkB,EAAE,UAAU,CAAC,GACvE,0BAA0B,CAAC;AAE7B,8EAA8E;AAC9E,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,sBAAsB,CAAC;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B"}
@@ -0,0 +1 @@
1
+
@@ -67,8 +67,8 @@ const CapSelectFilter = ({
67
67
  trigger: ["click"],
68
68
  menu: { items: renderMenuItem(data, selectedValue), onClick: handleMenuClick },
69
69
  className: classNames(styles[clsPrefix]),
70
- overlayClassName: classNames(styles[clsPrefix], `${clsPrefix}-overlay`, overlayClassName),
71
- dropdownRender: (menu) => renderDropdownMenu(menu, dropdownMaxHeight, dropdownWidth),
70
+ classNames: { root: classNames(`${clsPrefix}-overlay`, overlayClassName) },
71
+ popupRender: (menu) => renderDropdownMenu(menu, dropdownMaxHeight, dropdownWidth),
72
72
  getPopupContainer: (trigger) => trigger.parentNode,
73
73
  ...rest,
74
74
  children: /* @__PURE__ */ jsxs(
@@ -1,31 +1,9 @@
1
- import PropTypes from 'prop-types';
2
1
  import React from 'react';
3
- import './styles.scss';
4
- export declare const CapTreeView: {
5
- (props: any): import("react/jsx-runtime").JSX.Element;
6
- propTypes: {
7
- treeData: PropTypes.Validator<PropTypes.InferProps<{
8
- title: PropTypes.Validator<string>;
9
- key: PropTypes.Validator<string>;
10
- children: PropTypes.Requireable<any[]>;
11
- }>[]>;
12
- placeholder: PropTypes.Requireable<string>;
13
- showLine: PropTypes.Requireable<boolean>;
14
- showIcon: PropTypes.Requireable<boolean>;
15
- defaultExpandAll: PropTypes.Requireable<boolean>;
16
- counterMargin: PropTypes.Requireable<number>;
17
- };
18
- defaultProps: {
19
- className: string;
20
- searchClassName: string;
21
- treeClassName: string;
22
- placeholder: string;
23
- showLine: boolean;
24
- showIcon: boolean;
25
- defaultExpandAll: boolean;
26
- counterMargin: number;
27
- };
28
- };
29
- declare const _default: React.ComponentType<Omit<any, "intl">>;
2
+ import { type IntlShape } from 'react-intl';
3
+ import type { CapTreeViewProps } from './types';
4
+ export declare const CapTreeView: ({ className, searchClassName, treeClassName, treeData, placeholder, showLine, defaultExpandAll, showIcon, counterMargin: _counterMargin, intl: _intl, ...rest }: CapTreeViewProps & {
5
+ intl?: IntlShape;
6
+ }) => import("react/jsx-runtime").JSX.Element;
7
+ declare const _default: React.ComponentType<Omit<import("react-intl").WrappedComponentProps, "intl">>;
30
8
  export default _default;
31
9
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../components/CapTreeView/index.tsx"],"names":[],"mappings":"AAEA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,KAA8B,MAAM,OAAO,CAAC;AAOnD,OAAO,eAAe,CAAC;AAsBvB,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;CAoKvB,CAAC;;AA8BF,wBAA8D"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../components/CapTreeView/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAChE,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,YAAY,CAAC;AAOxD,OAAO,KAAK,EAAE,gBAAgB,EAAgB,MAAM,SAAS,CAAC;AAoB9D,eAAO,MAAM,WAAW,GAAI,iKAYzB,gBAAgB,GAAG;IAAE,IAAI,CAAC,EAAE,SAAS,CAAA;CAAE,4CAgKzC,CAAC;;AAEF,wBAAuC"}
@@ -1,14 +1,12 @@
1
1
  import { jsxs, jsx, Fragment } from "react/jsx-runtime";
2
- import { Tree } from "antd";
2
+ import { Tree } from "antd-v5";
3
3
  import classNames from "classnames";
4
- import PropTypes from "prop-types";
5
- import { useState, useEffect } from "react";
4
+ import { useState, useCallback, useEffect } from "react";
5
+ import { injectIntl } from "react-intl";
6
6
  import CapIcon from "../CapIcon/index.js";
7
7
  import CapSearch from "../CapInput/Search.js";
8
8
  import CapRow from "../CapRow/index.js";
9
- import LocaleHoc from "../LocaleHoc/index.js";
10
- import './styles.css';/* empty css */
11
- const { TreeNode } = Tree;
9
+ import styles from "./styles.module.scss.js";
12
10
  const clsPrefix = "cap-tree-v1";
13
11
  const getAllKeys = (nodes) => {
14
12
  const keys = [];
@@ -25,33 +23,37 @@ const getAllKeys = (nodes) => {
25
23
  traverse(nodes);
26
24
  return keys;
27
25
  };
28
- const CapTreeView = (props) => {
29
- const {
30
- className,
31
- searchClassName,
32
- treeClassName,
33
- treeData,
34
- placeholder,
35
- showLine,
36
- defaultExpandAll,
37
- showIcon,
38
- counterMargin,
39
- ...rest
40
- } = props;
26
+ const CapTreeView = ({
27
+ className,
28
+ searchClassName,
29
+ treeClassName,
30
+ treeData = [],
31
+ placeholder = "Search",
32
+ showLine = true,
33
+ defaultExpandAll = false,
34
+ showIcon = false,
35
+ counterMargin: _counterMargin = -40,
36
+ intl: _intl,
37
+ ...rest
38
+ }) => {
41
39
  const [expandedKeys, setExpandedKeys] = useState([]);
42
40
  const [searchValue, setSearchValue] = useState("");
43
41
  const [autoExpandParent, setAutoExpandParent] = useState(true);
44
- const [dataList, setDataList] = useState([]);
45
- let counter = 0;
46
- const generateList = (data, list) => {
47
- data == null ? void 0 : data.forEach((node) => {
48
- const { key, title, value, children } = node;
49
- list.push({ key, title, value });
50
- if (children) {
51
- generateList(children, list);
52
- }
53
- });
54
- };
42
+ const [dataList, setDataList] = useState(
43
+ []
44
+ );
45
+ const generateList = useCallback(
46
+ (data, list) => {
47
+ data == null ? void 0 : data.forEach((node) => {
48
+ const { key, title, value, children } = node;
49
+ list.push({ key, title, value });
50
+ if (children) {
51
+ generateList(children, list);
52
+ }
53
+ });
54
+ },
55
+ []
56
+ );
55
57
  const getParentKey = (key, tree) => {
56
58
  let parentKey;
57
59
  tree == null ? void 0 : tree.forEach((node) => {
@@ -73,7 +75,7 @@ const CapTreeView = (props) => {
73
75
  const updatedDataList = [];
74
76
  generateList(treeData, updatedDataList);
75
77
  setDataList(updatedDataList);
76
- }, [treeData, defaultExpandAll]);
78
+ }, [treeData, defaultExpandAll, generateList]);
77
79
  const onClear = () => {
78
80
  setSearchValue("");
79
81
  setExpandedKeys(defaultExpandAll ? getAllKeys(treeData) : []);
@@ -81,9 +83,13 @@ const CapTreeView = (props) => {
81
83
  };
82
84
  const onSearch = (e) => {
83
85
  const { value } = e.target;
86
+ if (!value) {
87
+ onClear();
88
+ return;
89
+ }
84
90
  setSearchValue(value);
85
91
  const searchLower = value.toLowerCase();
86
- const newExpandedKeysSet = new Set(expandedKeys);
92
+ const newExpandedKeysSet = /* @__PURE__ */ new Set();
87
93
  dataList == null ? void 0 : dataList.forEach((item) => {
88
94
  var _a, _b;
89
95
  if (((_a = item == null ? void 0 : item.value) == null ? void 0 : _a.toLowerCase().includes(searchLower)) || ((_b = item == null ? void 0 : item.title) == null ? void 0 : _b.toLowerCase().includes(searchLower))) {
@@ -103,31 +109,34 @@ const CapTreeView = (props) => {
103
109
  if (searchIndex === -1) return text;
104
110
  return /* @__PURE__ */ jsxs(Fragment, { children: [
105
111
  text.substring(0, searchIndex),
106
- /* @__PURE__ */ jsx("span", { className: `${clsPrefix}-highlighted-node`, children: text.substring(searchIndex, searchIndex + (searchLower == null ? void 0 : searchLower.length)) }),
112
+ /* @__PURE__ */ jsx("span", { className: styles[`${clsPrefix}-highlighted-node`], children: text.substring(searchIndex, searchIndex + (searchLower == null ? void 0 : searchLower.length)) }),
107
113
  text.substring(searchIndex + (searchLower == null ? void 0 : searchLower.length))
108
114
  ] });
109
115
  };
110
- const renderTreeNodes = (data, previousMargin) => {
116
+ let counter = 0;
117
+ const getTransformedTreeData = (data) => {
111
118
  const searchLower = searchValue.toLowerCase();
112
- return data == null ? void 0 : data.map((item) => {
119
+ return (data == null ? void 0 : data.map((item) => {
113
120
  const titleHighlight = highlightText(item.title || "", searchLower);
114
121
  const valueHighlight = highlightText(item.value || "", searchLower);
115
- const nodeTitle = /* @__PURE__ */ jsxs("div", { className: `${clsPrefix}-node-row`, children: [
116
- /* @__PURE__ */ jsx("span", { className: `${clsPrefix}-node-row-counter`, style: { marginLeft: previousMargin }, children: ++counter }),
117
- /* @__PURE__ */ jsx("span", { className: `${clsPrefix}-node-row-title`, children: titleHighlight }),
118
- /* @__PURE__ */ jsx("span", { className: `${clsPrefix}-node-row-value`, children: valueHighlight })
122
+ const nodeTitle = /* @__PURE__ */ jsxs("div", { className: styles[`${clsPrefix}-node-row`], children: [
123
+ /* @__PURE__ */ jsx("span", { className: styles[`${clsPrefix}-node-row-counter`], children: ++counter }),
124
+ /* @__PURE__ */ jsx("span", { className: styles[`${clsPrefix}-node-row-title`], children: titleHighlight }),
125
+ /* @__PURE__ */ jsx("span", { className: styles[`${clsPrefix}-node-row-value`], children: valueHighlight })
119
126
  ] });
120
- if (item == null ? void 0 : item.children) {
121
- return /* @__PURE__ */ jsx(TreeNode, { title: nodeTitle, children: renderTreeNodes(item == null ? void 0 : item.children, previousMargin - 18) }, item == null ? void 0 : item.key);
122
- }
123
- return /* @__PURE__ */ jsx(TreeNode, { title: nodeTitle }, item == null ? void 0 : item.key);
124
- });
127
+ return {
128
+ key: item.key,
129
+ title: nodeTitle,
130
+ children: item.children ? getTransformedTreeData(item.children) : void 0
131
+ };
132
+ })) ?? [];
125
133
  };
126
- return /* @__PURE__ */ jsxs(CapRow, { className, children: [
127
- /* @__PURE__ */ jsx(CapRow, { className: `${clsPrefix}-search-row`, children: /* @__PURE__ */ jsx(
134
+ const transformedTreeData = getTransformedTreeData(treeData);
135
+ return /* @__PURE__ */ jsxs(CapRow, { className: classNames(styles[`${clsPrefix}-wrapper`], className), children: [
136
+ /* @__PURE__ */ jsx(CapRow, { className: styles[`${clsPrefix}-search-row`], children: /* @__PURE__ */ jsx(
128
137
  CapSearch,
129
138
  {
130
- className: classNames(`${clsPrefix}-search`, searchClassName),
139
+ className: classNames(styles[`${clsPrefix}-search`], searchClassName),
131
140
  placeholder,
132
141
  value: searchValue,
133
142
  onChange: onSearch,
@@ -135,50 +144,26 @@ const CapTreeView = (props) => {
135
144
  allowClear: true
136
145
  }
137
146
  ) }),
138
- /* @__PURE__ */ jsx(CapRow, { className: `${clsPrefix}-tree-row`, children: /* @__PURE__ */ jsx(
147
+ /* @__PURE__ */ jsx(CapRow, { className: styles[`${clsPrefix}-tree-row`], children: /* @__PURE__ */ jsx(
139
148
  Tree,
140
149
  {
141
- className: classNames(`${clsPrefix}`, treeClassName),
150
+ className: classNames(styles[`${clsPrefix}`], treeClassName),
142
151
  onExpand: (keys) => {
143
- setExpandedKeys(keys);
152
+ setExpandedKeys(keys.map(String));
144
153
  setAutoExpandParent(false);
145
154
  },
146
155
  expandedKeys,
147
156
  autoExpandParent,
148
157
  showLine,
149
- switcherIcon: /* @__PURE__ */ jsx(CapIcon, { type: "chevron-down" }),
158
+ switcherIcon: /* @__PURE__ */ jsx(CapIcon, { type: "chevron-down", size: "s" }),
150
159
  showIcon,
151
- ...rest,
152
- children: renderTreeNodes(treeData, counterMargin)
160
+ treeData: transformedTreeData,
161
+ ...rest
153
162
  }
154
163
  ) })
155
164
  ] });
156
165
  };
157
- CapTreeView.propTypes = {
158
- treeData: PropTypes.arrayOf(
159
- PropTypes.shape({
160
- title: PropTypes.string.isRequired,
161
- key: PropTypes.string.isRequired,
162
- children: PropTypes.array
163
- })
164
- ).isRequired,
165
- placeholder: PropTypes.string,
166
- showLine: PropTypes.bool,
167
- showIcon: PropTypes.bool,
168
- defaultExpandAll: PropTypes.bool,
169
- counterMargin: PropTypes.number
170
- };
171
- CapTreeView.defaultProps = {
172
- className: "",
173
- searchClassName: "",
174
- treeClassName: "",
175
- placeholder: "Search",
176
- showLine: true,
177
- showIcon: false,
178
- defaultExpandAll: false,
179
- counterMargin: -40
180
- };
181
- const index = LocaleHoc(CapTreeView, { key: "CapTreeView" });
166
+ const index = injectIntl(CapTreeView);
182
167
  export {
183
168
  CapTreeView,
184
169
  index as default
@@ -6,27 +6,15 @@
6
6
  /* Border Width */
7
7
  /* Transition */
8
8
  /* Timezones Footer */
9
- .cap-tree-v1-tree-row .anticon.anticon-file.ant-tree-switcher-line-icon {
10
- display: none;
9
+ .cap-tree-v1-wrapper {
10
+ display: flex;
11
+ flex-direction: column;
12
+ width: 100%;
11
13
  }
12
- .cap-tree-v1-tree-row .ant-tree {
14
+ .cap-tree-v1-tree-row {
15
+ overflow-y: auto;
13
16
  max-height: 100dvh;
14
17
  }
15
- .cap-tree-v1-tree-row .ant-tree li .ant-tree-node-content-wrapper {
16
- height: max-content;
17
- }
18
- .cap-tree-v1-tree-row .ant-tree.ant-tree-show-line li:not(:last-child)::before {
19
- border-left: 0.071rem solid #dfe2e7;
20
- }
21
- .cap-tree-v1-tree-row .ant-tree.ant-tree-show-line li span.ant-tree-switcher {
22
- background: transparent;
23
- border-left: 0.071rem solid #dfe2e7;
24
- margin-left: 0.857rem !important;
25
- }
26
- .cap-tree-v1-tree-row .ant-tree-switcher-icon {
27
- color: black;
28
- font-size: x-large !important;
29
- }
30
18
  .cap-tree-v1-highlighted-node {
31
19
  background-color: #f9e9b3;
32
20
  color: #000;
@@ -36,12 +24,9 @@
36
24
  width: 23.5rem;
37
25
  margin-bottom: 0.857rem;
38
26
  }
39
- .cap-tree-v1-search-row .ant-input {
40
- height: 2.285rem;
41
- }
42
27
  .cap-tree-v1-node-row {
43
28
  display: grid;
44
- grid-template-columns: 0.1rem 15rem auto;
29
+ grid-template-columns: 1rem 15rem auto;
45
30
  gap: 0.71rem;
46
31
  }
47
32
  .cap-tree-v1-node-row-counter {
@@ -59,4 +44,9 @@
59
44
  white-space: normal;
60
45
  word-wrap: break-word;
61
46
  overflow-wrap: break-word;
47
+ color: rgba(0, 0, 0, 0.65);
48
+ }
49
+ .cap-tree-v1 .ant-tree-switcher-icon {
50
+ color: black;
51
+ font-size: x-large !important;
62
52
  }
@@ -0,0 +1,16 @@
1
+ import './styles.css';const styles = {
2
+ "cap-tree-v1-wrapper": "cap-tree-v1-wrapper",
3
+ "cap-tree-v1-tree-row": "cap-tree-v1-tree-row",
4
+ "cap-tree-v1-highlighted-node": "cap-tree-v1-highlighted-node",
5
+ "cap-tree-v1-search-row": "cap-tree-v1-search-row",
6
+ "cap-tree-v1-search": "cap-tree-v1-search",
7
+ "cap-tree-v1-node-row": "cap-tree-v1-node-row",
8
+ "cap-tree-v1-node-row-counter": "cap-tree-v1-node-row-counter",
9
+ "cap-tree-v1-node-row-title": "cap-tree-v1-node-row-title",
10
+ "cap-tree-v1-node-row-value": "cap-tree-v1-node-row-value",
11
+ "cap-tree-v1": "cap-tree-v1",
12
+ "ant-tree-switcher-icon": "ant-tree-switcher-icon"
13
+ };
14
+ export {
15
+ styles as default
16
+ };
@@ -1,73 +1,60 @@
1
1
  @import '../styles/_variables.scss';
2
2
 
3
- $tree: cap-tree-v1;
3
+ $clsPrefix: 'cap-tree-v1';
4
4
 
5
- .cap-tree-v1-tree-row {
6
- .anticon.anticon-file.ant-tree-switcher-line-icon {
7
- display: none;
8
- }
9
-
10
- .ant-tree {
11
- max-height: 100dvh;
12
- }
13
-
14
- .ant-tree li .ant-tree-node-content-wrapper {
15
- height: max-content;
16
- }
17
-
18
- .ant-tree.ant-tree-show-line li:not(:last-child)::before {
19
- border-left: 0.071rem solid $CAP_G07;
20
- }
21
-
22
- .ant-tree.ant-tree-show-line li span.ant-tree-switcher {
23
- background: transparent;
24
- border-left: 0.071rem solid $CAP_G07;
25
- margin-left: $CAP_SPACE_12 !important;
26
- }
5
+ .#{$clsPrefix}-wrapper {
6
+ display: flex;
7
+ flex-direction: column;
8
+ width: 100%;
9
+ }
27
10
 
28
- .ant-tree-switcher-icon {
29
- color: black;
30
- font-size: x-large !important;
31
- }
11
+ .#{$clsPrefix}-tree-row {
12
+ overflow-y: auto;
13
+ max-height: 100dvh;
32
14
  }
33
15
 
34
- .cap-tree-v1-highlighted-node {
16
+ .#{$clsPrefix}-highlighted-node {
35
17
  background-color: #f9e9b3;
36
18
  color: #000;
37
19
  font-weight: bold;
38
20
  }
39
21
 
40
- .cap-tree-v1-search-row {
41
- .cap-tree-v1-search {
22
+ .#{$clsPrefix}-search-row {
23
+ .#{$clsPrefix}-search {
42
24
  width: 23.5rem;
43
25
  margin-bottom: $CAP_SPACE_12;
44
26
  }
45
- .ant-input {
46
- height: $CAP_SPACE_32;
47
- }
48
27
  }
49
28
 
50
- .cap-tree-v1-node-row {
29
+ .#{$clsPrefix}-node-row {
51
30
  display: grid;
52
- grid-template-columns: 0.1rem 15rem auto;
31
+ grid-template-columns: 1rem 15rem auto;
53
32
  gap: 0.71rem;
54
33
  }
55
34
 
56
- .cap-tree-v1-node-row-counter {
35
+ .#{$clsPrefix}-node-row-counter {
57
36
  grid-column: 1;
58
37
  font-size: $CAP_SPACE_12;
59
38
  color: $CAP_G04;
60
39
  }
61
40
 
62
- .cap-tree-v1-node-row-title {
41
+ .#{$clsPrefix}-node-row-title {
63
42
  grid-column: 2;
64
43
  color: $CAP_G04;
65
44
  }
66
45
 
67
- .cap-tree-v1-node-row-value {
46
+ .#{$clsPrefix}-node-row-value {
68
47
  grid-column: 3;
69
48
  max-width: 70dvh;
70
49
  white-space: normal;
71
50
  word-wrap: break-word;
72
51
  overflow-wrap: break-word;
73
- }
52
+ color: rgba(0, 0, 0, 0.65);
53
+ }
54
+
55
+ .#{$clsPrefix} {
56
+ .ant-tree-switcher-icon {
57
+ color: black;
58
+ font-size: x-large !important;
59
+ }
60
+ }
@@ -0,0 +1,5 @@
1
+ import type { TreeDataItem } from '../types';
2
+ export declare const flatTreeData: TreeDataItem[];
3
+ export declare const nestedTreeData: TreeDataItem[];
4
+ export declare const searchableTreeData: TreeDataItem[];
5
+ //# sourceMappingURL=CapTreeView.mockData.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"CapTreeView.mockData.d.ts","sourceRoot":"","sources":["../../../components/CapTreeView/tests/CapTreeView.mockData.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C,eAAO,MAAM,YAAY,EAAE,YAAY,EAItC,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,YAAY,EAqBxC,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,YAAY,EAmB5C,CAAC"}
@@ -0,0 +1,16 @@
1
+ import type { TreeProps } from 'antd-v5';
2
+ export interface TreeDataItem {
3
+ key: string;
4
+ title: string;
5
+ value?: string;
6
+ children?: TreeDataItem[];
7
+ }
8
+ export interface CapTreeViewProps extends Omit<TreeProps, 'treeData'> {
9
+ searchClassName?: string;
10
+ treeClassName?: string;
11
+ treeData?: TreeDataItem[];
12
+ placeholder?: string;
13
+ defaultExpandAll?: boolean;
14
+ counterMargin?: number;
15
+ }
16
+ //# sourceMappingURL=types.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../components/CapTreeView/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,YAAY,EAAE,CAAC;CAC3B;AAED,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IACnE,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,YAAY,EAAE,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB"}
@@ -0,0 +1 @@
1
+
@@ -0,0 +1,23 @@
1
+ import { jsx } from "react/jsx-runtime";
2
+ const AiraNav = (props) => /* @__PURE__ */ jsx(
3
+ "svg",
4
+ {
5
+ width: "1em",
6
+ height: "1em",
7
+ viewBox: "0 0 16 16",
8
+ fill: "none",
9
+ xmlns: "http://www.w3.org/2000/svg",
10
+ ...props,
11
+ children: /* @__PURE__ */ jsx(
12
+ "path",
13
+ {
14
+ d: "M12.4545 6.09091L13.25 4.34091L15 3.54545L13.25 2.75L12.4545 1L11.6591 2.75L9.90909 3.54545L11.6591 4.34091L12.4545 6.09091ZM7.68182 6.40909L6.09091 2.90909L4.5 6.40909L1 8L4.5 9.59091L6.09091 13.0909L7.68182 9.59091L11.1818 8L7.68182 6.40909ZM12.4545 9.90909L11.6591 11.6591L9.90909 12.4545L11.6591 13.25L12.4545 15L13.25 13.25L15 12.4545L13.25 11.6591L12.4545 9.90909Z",
15
+ stroke: "currentColor",
16
+ strokeLinejoin: "round"
17
+ }
18
+ )
19
+ }
20
+ );
21
+ export {
22
+ AiraNav as default
23
+ };
@@ -0,0 +1,22 @@
1
+ import { jsx } from "react/jsx-runtime";
2
+ const CreativesNav = (props) => /* @__PURE__ */ jsx(
3
+ "svg",
4
+ {
5
+ width: "1em",
6
+ height: "1em",
7
+ viewBox: "0 0 16 16",
8
+ fill: "none",
9
+ xmlns: "http://www.w3.org/2000/svg",
10
+ ...props,
11
+ children: /* @__PURE__ */ jsx(
12
+ "path",
13
+ {
14
+ d: "M5.33498 10.7333C4.96832 10.7333 4.65443 10.6028 4.39332 10.3417C4.13221 10.0806 4.00165 9.76667 4.00165 9.4V3.33333C4.00165 2.96667 4.13221 2.65278 4.39332 2.39167C4.65443 2.13056 4.96832 2 5.33498 2H13.335C13.7016 2 14.0155 2.13056 14.2766 2.39167C14.5378 2.65278 14.6683 2.96667 14.6683 3.33333V9.4C14.6683 9.76667 14.5378 10.0806 14.2766 10.3417C14.0155 10.6028 13.7016 10.7333 13.335 10.7333H5.33498ZM5.33498 9.4H13.335V3.33333H5.33498V9.4ZM11.335 6C11.5239 6 11.6822 5.93611 11.81 5.80833C11.9378 5.68056 12.0016 5.52222 12.0016 5.33333C12.0016 5.14444 11.9378 4.98611 11.81 4.85833C11.6822 4.73056 11.5239 4.66667 11.335 4.66667H7.31832C7.12943 4.66667 6.97387 4.73056 6.85165 4.85833C6.72943 4.98611 6.66832 5.14444 6.66832 5.33333C6.66832 5.52222 6.73221 5.68056 6.85998 5.80833C6.98776 5.93611 7.14609 6 7.33498 6H11.335ZM9.33498 8C9.52387 8 9.68221 7.93611 9.80998 7.80833C9.93776 7.68056 10.0016 7.52222 10.0016 7.33333C10.0016 7.14444 9.93776 6.98611 9.80998 6.85833C9.68221 6.73056 9.52387 6.66667 9.33498 6.66667H7.31832C7.12943 6.66667 6.97387 6.73056 6.85165 6.85833C6.72943 6.98611 6.66832 7.14444 6.66832 7.33333C6.66832 7.52222 6.73221 7.68056 6.85998 7.80833C6.98776 7.93611 7.14609 8 7.33498 8H9.33498ZM3.63498 13.9833C3.26832 14.0389 2.94054 13.9556 2.65165 13.7333C2.36276 13.5111 2.19054 13.2167 2.13498 12.85L1.25165 6.25C1.22943 6.06111 1.27387 5.89444 1.38498 5.75C1.49609 5.60556 1.64609 5.52222 1.83498 5.5C2.01276 5.47778 2.17387 5.51944 2.31832 5.625C2.46276 5.73056 2.54609 5.87778 2.56832 6.06667L3.50165 12.6667L8.06832 12.0333L10.8016 11.65C11.0016 11.6167 11.1794 11.6667 11.335 11.8C11.4905 11.9333 11.5683 12.1056 11.5683 12.3167C11.5683 12.4833 11.5128 12.6306 11.4016 12.7583C11.2905 12.8861 11.1516 12.9611 10.985 12.9833L3.63498 13.9833Z",
15
+ fill: "currentColor"
16
+ }
17
+ )
18
+ }
19
+ );
20
+ export {
21
+ CreativesNav as default
22
+ };
@@ -0,0 +1,22 @@
1
+ import { jsx } from "react/jsx-runtime";
2
+ const SvgDataManagement = (props) => /* @__PURE__ */ jsx(
3
+ "svg",
4
+ {
5
+ xmlns: "http://www.w3.org/2000/svg",
6
+ width: "1em",
7
+ height: "1em",
8
+ viewBox: "0 0 16 16",
9
+ fill: "none",
10
+ ...props,
11
+ children: /* @__PURE__ */ jsx(
12
+ "path",
13
+ {
14
+ d: "M10 15.3333C9.63337 15.3333 9.31948 15.2028 9.05837 14.9417C8.79726 14.6806 8.66671 14.3667 8.66671 14C8.66671 13.7444 8.72782 13.5167 8.85004 13.3167C8.97226 13.1167 9.13337 12.9556 9.33337 12.8333V9.14996C9.13337 9.02774 8.97226 8.86941 8.85004 8.67496C8.72782 8.48052 8.66671 8.25552 8.66671 7.99996C8.66671 7.63329 8.79726 7.31941 9.05837 7.05829C9.31948 6.79718 9.63337 6.66663 10 6.66663C10.3667 6.66663 10.6806 6.79718 10.9417 7.05829C11.2028 7.31941 11.3333 7.63329 11.3333 7.99996C11.3333 8.25552 11.2722 8.48052 11.15 8.67496C11.0278 8.86941 10.8667 9.02774 10.6667 9.14996V11.0667L13.3333 10.1833V9.14996C13.1333 9.02774 12.9722 8.86941 12.85 8.67496C12.7278 8.48052 12.6667 8.25552 12.6667 7.99996C12.6667 7.63329 12.7972 7.31941 13.0583 7.05829C13.3194 6.79718 13.6333 6.66663 14 6.66663C14.3667 6.66663 14.6806 6.79718 14.9417 7.05829C15.2028 7.31941 15.3333 7.63329 15.3333 7.99996C15.3333 8.25552 15.2722 8.48052 15.15 8.67496C15.0278 8.86941 14.8667 9.02774 14.6667 9.14996V10.1667C14.6667 10.4556 14.5833 10.7167 14.4167 10.95C14.25 11.1833 14.0278 11.3444 13.75 11.4333L10.6667 12.4667V12.8333C10.8667 12.9556 11.0278 13.1167 11.15 13.3167C11.2722 13.5167 11.3333 13.7444 11.3333 14C11.3333 14.3667 11.2028 14.6806 10.9417 14.9417C10.6806 15.2028 10.3667 15.3333 10 15.3333ZM2.66671 13.3333C2.30004 13.3333 1.98615 13.2028 1.72504 12.9417C1.46393 12.6806 1.33337 12.3667 1.33337 12V3.99996C1.33337 3.63329 1.46393 3.3194 1.72504 3.05829C1.98615 2.79718 2.30004 2.66663 2.66671 2.66663H6.11671C6.29448 2.66663 6.46393 2.69996 6.62504 2.76663C6.78615 2.83329 6.92782 2.92774 7.05004 3.04996L8.00004 3.99996H14C14.1889 3.99996 14.3472 4.06385 14.475 4.19163C14.6028 4.3194 14.6667 4.47774 14.6667 4.66663C14.6667 4.85552 14.6028 5.01385 14.475 5.14163C14.3472 5.2694 14.1889 5.33329 14 5.33329H7.45004L6.11671 3.99996H2.66671V12H6.66671C6.8556 12 7.01393 12.0639 7.14171 12.1917C7.26948 12.3194 7.33337 12.4778 7.33337 12.6667C7.33337 12.8556 7.26948 13.0139 7.14171 13.1417C7.01393 13.2694 6.8556 13.3333 6.66671 13.3333H2.66671Z",
15
+ fill: "currentColor"
16
+ }
17
+ )
18
+ }
19
+ );
20
+ export {
21
+ SvgDataManagement as default
22
+ };
@@ -0,0 +1,23 @@
1
+ import { jsx } from "react/jsx-runtime";
2
+ const EngageNav = (props) => /* @__PURE__ */ jsx(
3
+ "svg",
4
+ {
5
+ width: "1em",
6
+ height: "1em",
7
+ viewBox: "0 0 14 11",
8
+ fill: "none",
9
+ xmlns: "http://www.w3.org/2000/svg",
10
+ preserveAspectRatio: "xMidYMid meet",
11
+ ...props,
12
+ children: /* @__PURE__ */ jsx(
13
+ "path",
14
+ {
15
+ d: "M12.6667 5.73889H11.3333C11.1444 5.73889 10.9861 5.675 10.8583 5.54722C10.7306 5.41944 10.6667 5.26111 10.6667 5.07222C10.6667 4.88333 10.7306 4.725 10.8583 4.59722C10.9861 4.46944 11.1444 4.40556 11.3333 4.40556H12.6667C12.8556 4.40556 13.0139 4.46944 13.1417 4.59722C13.2694 4.725 13.3333 4.88333 13.3333 5.07222C13.3333 5.26111 13.2694 5.41944 13.1417 5.54722C13.0139 5.675 12.8556 5.73889 12.6667 5.73889ZM9.73333 8.27222C9.84444 8.11667 9.98889 8.02778 10.1667 8.00556C10.3444 7.98333 10.5111 8.02778 10.6667 8.13889L11.7333 8.93889C11.8889 9.05 11.9778 9.19444 12 9.37222C12.0222 9.55 11.9778 9.71667 11.8667 9.87222C11.7556 10.0278 11.6111 10.1167 11.4333 10.1389C11.2556 10.1611 11.0889 10.1167 10.9333 10.0056L9.86667 9.20555C9.71111 9.09444 9.62222 8.95 9.6 8.77222C9.57778 8.59444 9.62222 8.42778 9.73333 8.27222ZM11.7333 1.20556L10.6667 2.00556C10.5111 2.11667 10.3444 2.16111 10.1667 2.13889C9.98889 2.11667 9.84444 2.02778 9.73333 1.87222C9.62222 1.71667 9.57778 1.55 9.6 1.37222C9.62222 1.19444 9.71111 1.05 9.86667 0.938889L10.9333 0.138889C11.0889 0.0277778 11.2556 -0.0166667 11.4333 0.00555556C11.6111 0.0277778 11.7556 0.116667 11.8667 0.272222C11.9778 0.427778 12.0222 0.594444 12 0.772222C11.9778 0.95 11.8889 1.09444 11.7333 1.20556ZM2 7.07222H1.33333C0.966667 7.07222 0.652778 6.94167 0.391667 6.68056C0.130556 6.41944 0 6.10556 0 5.73889V4.40556C0 4.03889 0.130556 3.725 0.391667 3.46389C0.652778 3.20278 0.966667 3.07222 1.33333 3.07222H4L6.31667 1.67222C6.53889 1.53889 6.76389 1.53889 6.99167 1.67222C7.21944 1.80556 7.33333 2 7.33333 2.25556V7.88889C7.33333 8.14444 7.21944 8.33889 6.99167 8.47222C6.76389 8.60556 6.53889 8.60556 6.31667 8.47222L4 7.07222H3.33333V9.07222C3.33333 9.26111 3.26944 9.41944 3.14167 9.54722C3.01389 9.675 2.85556 9.73889 2.66667 9.73889C2.47778 9.73889 2.31944 9.675 2.19167 9.54722C2.06389 9.41944 2 9.26111 2 9.07222V7.07222ZM6 6.70556V3.43889L4.36667 4.40556H1.33333V5.73889H4.36667L6 6.70556ZM8 7.30556V2.83889C8.3 3.10556 8.54167 3.43056 8.725 3.81389C8.90833 4.19722 9 4.61667 9 5.07222C9 5.52778 8.90833 5.94722 8.725 6.33056C8.54167 6.71389 8.3 7.03889 8 7.30556Z",
16
+ fill: "currentColor"
17
+ }
18
+ )
19
+ }
20
+ );
21
+ export {
22
+ EngageNav as default
23
+ };