@capillarytech/blaze-ui 6.1.1 → 6.1.3

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/CapCustomCheckboxList/styles.css +3 -3
  2. package/CapCustomCheckboxList/styles.scss +7 -8
  3. package/CapMobileDatePicker/index.d.ts +3 -2
  4. package/CapMobileDatePicker/index.d.ts.map +1 -1
  5. package/CapMobileDatePicker/index.js +13 -3
  6. package/CapMobileDatePicker/messages.d.ts +9 -0
  7. package/CapMobileDatePicker/messages.d.ts.map +1 -0
  8. package/CapMobileDatePicker/messages.js +12 -0
  9. package/CapMobileDatePicker/types.d.ts +6 -0
  10. package/CapMobileDatePicker/types.d.ts.map +1 -1
  11. package/CapPopoverTree/index.d.ts +40 -3
  12. package/CapPopoverTree/index.d.ts.map +1 -1
  13. package/CapPopoverTree/index.js +82 -72
  14. package/CapPopoverTree/style.d.ts +1 -5
  15. package/CapPopoverTree/style.d.ts.map +1 -1
  16. package/CapPopoverTree/styles.css +18 -119
  17. package/CapPopoverTree/styles.scss +31 -179
  18. package/CapRadioCard/index.d.ts.map +1 -1
  19. package/CapRadioCard/index.js +52 -20
  20. package/CapRadioCard/styles.css +25 -25
  21. package/CapRadioCard/styles.module.scss.js +14 -40
  22. package/CapRadioCard/styles.scss +20 -20
  23. package/CapRadioCard/types.d.ts +20 -0
  24. package/CapRadioCard/types.d.ts.map +1 -1
  25. package/CapSelectFilter/index.d.ts.map +1 -1
  26. package/CapSelectFilter/index.js +10 -11
  27. package/CapSelectFilter/styles.css +11 -10
  28. package/CapSelectFilter/styles.module.scss.js +8 -10
  29. package/CapSelectFilter/styles.scss +11 -8
  30. package/CapSelectFilter/types.d.ts +1 -1
  31. package/CapSelectFilter/types.d.ts.map +1 -1
  32. package/CapStaticTemplates/index.d.ts +3 -1
  33. package/CapStaticTemplates/index.d.ts.map +1 -1
  34. package/CapStaticTemplates/index.js +185 -144
  35. package/CapStaticTemplates/messages.d.ts +32 -0
  36. package/CapStaticTemplates/messages.d.ts.map +1 -0
  37. package/CapStaticTemplates/messages.js +35 -0
  38. package/CapStaticTemplates/styles.css +220 -0
  39. package/CapStaticTemplates/styles.module.scss.js +55 -0
  40. package/CapStaticTemplates/styles.scss +291 -0
  41. package/CapStaticTemplates/tests/CapStaticTemplates.mockData.d.ts +54 -0
  42. package/CapStaticTemplates/tests/CapStaticTemplates.mockData.d.ts.map +1 -0
  43. package/CapStaticTemplates/types.d.ts +97 -0
  44. package/CapStaticTemplates/types.d.ts.map +1 -0
  45. package/index.d.ts +2 -2
  46. package/index.d.ts.map +1 -1
  47. package/index.js +44 -44
  48. package/package.json +1 -1
  49. package/styles/_variables.scss +2 -0
  50. package/CapPopoverTree/styles.module.scss.js +0 -26
  51. package/CapPopoverTree/tests/CapPopoverTree.mockData.d.ts +0 -22
  52. package/CapPopoverTree/tests/CapPopoverTree.mockData.d.ts.map +0 -1
  53. package/CapPopoverTree/types.d.ts +0 -62
  54. package/CapPopoverTree/types.d.ts.map +0 -1
  55. package/CapStaticTemplates/style.d.ts +0 -13
  56. package/CapStaticTemplates/style.d.ts.map +0 -1
  57. package/CapStaticTemplates/style.js +0 -216
  58. /package/{CapPopoverTree → CapStaticTemplates}/types.js +0 -0
@@ -13,9 +13,9 @@
13
13
  background-color: #ffffff;
14
14
  margin-right: 0.857rem;
15
15
  }
16
- .div-icon {
17
- width: 208px;
18
- height: 92px;
16
+ .cap-customCheckboxList-v2 .div-icon {
17
+ width: 14.857rem;
18
+ height: 6.571rem;
19
19
  padding: 1.614rem 5.714rem;
20
20
  border-radius: 0.285rem;
21
21
  background-color: #e9f0fe;
@@ -6,14 +6,13 @@
6
6
  border: solid 1px $CAP_G07;
7
7
  background-color: $CAP_WHITE;
8
8
  margin-right: $CAP_SPACE_12;
9
- }
10
-
11
- .div-icon {
12
- width: 208px;
13
- height: 92px;
14
- padding: $CAP_SPACE_23 $CAP_SPACE_80;
15
- border-radius: $CAP_SPACE_04;
16
- background-color: $CAP_PALE_GREY;
9
+ .div-icon {
10
+ width: 14.857rem; // 208px
11
+ height: 6.571rem; // 92px
12
+ padding: $CAP_SPACE_23 $CAP_SPACE_80;
13
+ border-radius: $CAP_SPACE_04;
14
+ background-color: $CAP_PALE_GREY;
15
+ }
17
16
  }
18
17
 
19
18
  .customCheckbox-icon {
@@ -3,8 +3,9 @@
3
3
  * MobileDatePicker
4
4
  *
5
5
  */
6
+ import React from 'react';
6
7
  import type { CapMobileDatePickerProps } from './types';
7
- declare function CapMobileDatePicker({ onChange, value, lastSyncDate }: CapMobileDatePickerProps): import("react/jsx-runtime").JSX.Element;
8
- export default CapMobileDatePicker;
8
+ declare const _default: React.ComponentType<Omit<CapMobileDatePickerProps, "intl">>;
9
+ export default _default;
9
10
  export type { CapMobileDatePickerProps } from './types';
10
11
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../components/CapMobileDatePicker/index.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAaH,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AAQxD,iBAAS,mBAAmB,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,YAAY,EAAE,EAAE,wBAAwB,2CAwDvF;AAED,eAAe,mBAAmB,CAAC;AACnC,YAAY,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../components/CapMobileDatePicker/index.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAmB,MAAM,OAAO,CAAC;AAYxC,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;;AAyExD,wBAAyE;AACzE,YAAY,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC"}
@@ -1,17 +1,25 @@
1
1
  import { jsxs, Fragment, jsx } from "react/jsx-runtime";
2
2
  import moment from "moment";
3
3
  import { useState } from "react";
4
+ import { injectIntl } from "react-intl";
4
5
  import { FORMAT_TOKENS } from "../utils/dayjs.js";
5
6
  import CapCalendarDatePicker from "../CapCalendarDatePicker/index.js";
6
7
  import CapIcon from "../CapIcon/index.js";
7
8
  import InputFinal from "../CapInput/index.js";
8
9
  import CapModalWithHoc from "../CapModal/index.js";
10
+ import messages from "./messages.js";
9
11
  import styles from "./styles.module.scss.js";
10
12
  const INCEPTION_DATE = "2000-01-01";
11
13
  const DATE_CALC_FORMAT = FORMAT_TOKENS.ISO_8601_DATE;
12
14
  const DATE_DISPLAY_FORMAT = FORMAT_TOKENS.DATE_DISPLAY_FULL;
13
15
  const clsPrefix = "cap-mobile-date-picker";
14
- function CapMobileDatePicker({ onChange, value, lastSyncDate }) {
16
+ function CapMobileDatePicker({
17
+ intl: { formatMessage },
18
+ onChange,
19
+ value,
20
+ lastSyncDate,
21
+ placeholderLabel
22
+ }) {
15
23
  const [open, setOpen] = useState(false);
16
24
  const handleDateChange = (date) => {
17
25
  onChange == null ? void 0 : onChange(moment(date));
@@ -30,7 +38,8 @@ function CapMobileDatePicker({ onChange, value, lastSyncDate }) {
30
38
  suffix: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(CapIcon, { type: "calendar", style: { color: "rgb(9, 30, 66)" }, size: "m" }) }),
31
39
  onClick: handleModalOpen,
32
40
  value: value ? moment(value).format(DATE_DISPLAY_FORMAT) : void 0,
33
- size: "large"
41
+ size: "large",
42
+ placeholder: placeholderLabel || formatMessage(messages.selectDate)
34
43
  }
35
44
  ),
36
45
  /* @__PURE__ */ jsx(
@@ -66,6 +75,7 @@ function CapMobileDatePicker({ onChange, value, lastSyncDate }) {
66
75
  )
67
76
  ] });
68
77
  }
78
+ const index = injectIntl(CapMobileDatePicker);
69
79
  export {
70
- CapMobileDatePicker as default
80
+ index as default
71
81
  };
@@ -0,0 +1,9 @@
1
+ export declare const scope = "app.commonUtils.capUiLibrary.CapMobileDatePicker";
2
+ declare const _default: {
3
+ selectDate: {
4
+ id: string;
5
+ defaultMessage: string;
6
+ };
7
+ };
8
+ export default _default;
9
+ //# sourceMappingURL=messages.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"messages.d.ts","sourceRoot":"","sources":["../../components/CapMobileDatePicker/messages.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK,qDAAqD,CAAC;;;;;;;AAExE,wBAKG"}
@@ -0,0 +1,12 @@
1
+ import { defineMessages } from "react-intl";
2
+ const scope = "app.commonUtils.capUiLibrary.CapMobileDatePicker";
3
+ const messages = defineMessages({
4
+ selectDate: {
5
+ id: `${scope}.selectDate`,
6
+ defaultMessage: "Select date"
7
+ }
8
+ });
9
+ export {
10
+ messages as default,
11
+ scope
12
+ };
@@ -1,5 +1,7 @@
1
1
  import type { Moment } from 'moment';
2
+ import type { IntlShape } from 'react-intl';
2
3
  export interface CapMobileDatePickerProps {
4
+ intl: IntlShape;
3
5
  /**
4
6
  * Selected date value (moment object)
5
7
  */
@@ -13,5 +15,9 @@ export interface CapMobileDatePickerProps {
13
15
  * @param date - Selected moment object
14
16
  */
15
17
  onChange?: (date: Moment) => void;
18
+ /**
19
+ * Placeholder label for the input field
20
+ */
21
+ placeholderLabel?: string;
16
22
  }
17
23
  //# sourceMappingURL=types.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../components/CapMobileDatePicker/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAErC,MAAM,WAAW,wBAAwB;IACvC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../components/CapMobileDatePicker/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AACrC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAE5C,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,SAAS,CAAC;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAElC;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B"}
@@ -1,6 +1,43 @@
1
+ import PropTypes from 'prop-types';
1
2
  import React from 'react';
2
- import type { CapPopoverTreeProps } from './types';
3
- export declare const CapPopoverTree: (props: CapPopoverTreeProps) => import("react/jsx-runtime").JSX.Element;
4
- declare const _default: React.ComponentType<Omit<CapPopoverTreeProps & import("react-intl").WrappedComponentProps, "intl">>;
3
+ import './styles.scss';
4
+ export declare const CapPopoverTree: {
5
+ (props: any): import("react/jsx-runtime").JSX.Element;
6
+ defaultProps: {
7
+ trigger: string;
8
+ placement: string;
9
+ showIcon: boolean;
10
+ blockNode: boolean;
11
+ defaultExpandAll: boolean;
12
+ isLoadingData: boolean;
13
+ switcherIcon: import("react/jsx-runtime").JSX.Element;
14
+ renderOnKeyChange: boolean;
15
+ };
16
+ propTypes: {
17
+ trigger: PropTypes.Requireable<string>;
18
+ placement: PropTypes.Requireable<string>;
19
+ className: PropTypes.Requireable<string>;
20
+ defaultExpandAll: PropTypes.Requireable<boolean>;
21
+ overlayClassName: PropTypes.Requireable<string>;
22
+ showIcon: PropTypes.Requireable<boolean>;
23
+ blockNode: PropTypes.Requireable<boolean>;
24
+ propsTreeData: PropTypes.Requireable<any[]>;
25
+ switcherIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
26
+ TriggerComponent: PropTypes.Requireable<PropTypes.ReactNodeLike>;
27
+ componentText: PropTypes.Requireable<string>;
28
+ triggerProps: PropTypes.Requireable<object>;
29
+ isTriggerDisabled: PropTypes.Requireable<boolean>;
30
+ triggerDisabledText: PropTypes.Requireable<string>;
31
+ tooltipText: PropTypes.Requireable<string>;
32
+ onSelect: PropTypes.Requireable<(...args: any[]) => any>;
33
+ propsSelectedKey: PropTypes.Requireable<any[]>;
34
+ isLoadingData: PropTypes.Requireable<boolean>;
35
+ loadingTip: PropTypes.Requireable<string>;
36
+ searchPlaceholder: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
37
+ emptyDataMessage: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
38
+ renderOnKeyChange: PropTypes.Requireable<boolean>;
39
+ };
40
+ };
41
+ declare const _default: React.ComponentType<Omit<any, "intl">>;
5
42
  export default _default;
6
43
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../components/CapPopoverTree/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAanD,OAAO,KAAK,EAAE,mBAAmB,EAAgB,MAAM,SAAS,CAAC;AAKjE,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,4CA8OxD,CAAC;;AAEF,wBAEG"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../components/CapPopoverTree/index.tsx"],"names":[],"mappings":"AAEA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,KAA8B,MAAM,OAAO,CAAC;AAWnD,OAAO,eAAe,CAAC;AAMvB,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0M1B,CAAC;;AAsCF,wBAAoE"}
@@ -1,56 +1,54 @@
1
- import { jsx, jsxs, Fragment } from "react/jsx-runtime";
2
- import { InfoCircleOutlined } from "@ant-design-v5/icons";
3
- import { Tree, Input, Tooltip } from "antd-v5";
1
+ import { jsxs, jsx, Fragment } from "react/jsx-runtime";
2
+ import { Tree, Tooltip, Icon } from "antd";
4
3
  import classNames from "classnames";
4
+ import PropTypes from "prop-types";
5
5
  import { useState, useEffect } from "react";
6
- import CapColumn from "../CapColumn/index.js";
7
6
  import CapHeadingWithStatic from "../CapHeading/index.js";
8
- import CapIcon from "../CapIcon/index.js";
7
+ import InputFinal from "../CapInput/index.js";
9
8
  import CapPopover from "../CapPopover/index.js";
10
9
  import CapRow from "../CapRow/index.js";
11
10
  import CapSpin from "../CapSpin/index.js";
12
11
  import CapTooltip from "../CapTooltip/index.js";
13
- import CapTree from "../CapTree/index.js";
14
12
  import LocaleHoc from "../LocaleHoc/index.js";
15
- import styles from "./styles.module.scss.js";
13
+ import { StyledCapTree, StyledIcon, StyledCapHeading, StyledCapColumn, ExpandIcon } from "./style.js";
14
+ import './styles.css';/* empty css */
16
15
  const { TreeNode } = Tree;
16
+ const { Search } = InputFinal;
17
17
  const clsPrefix = "cap-popover-tree-v2";
18
18
  const CapPopoverTree = (props) => {
19
19
  var _a;
20
20
  const {
21
21
  treeData: propsTreeData = [],
22
22
  overlayClassName,
23
- trigger = "click",
23
+ trigger,
24
24
  TriggerComponent,
25
25
  componentText,
26
26
  triggerProps,
27
27
  isTriggerDisabled,
28
28
  triggerDisabledText,
29
29
  tooltipText,
30
- isLoadingData = false,
30
+ isLoadingData,
31
31
  loadingTip,
32
- placement = "rightBottom",
33
- switcherIcon = /* @__PURE__ */ jsx(CapIcon, { className: styles.expandIcon, size: "m", type: "chevron-down" }),
32
+ placement,
33
+ switcherIcon,
34
34
  className,
35
- defaultExpandAll = false,
35
+ defaultExpandAll,
36
36
  onSelect,
37
37
  selectedKey: propsSelectedKey,
38
38
  emptyDataMessage,
39
39
  searchPlaceholder,
40
- renderOnKeyChange = false,
40
+ renderOnKeyChange,
41
41
  ...rest
42
42
  } = props || {};
43
- const defaultExpandKey = (propsTreeData == null ? void 0 : propsTreeData.length) === 1 && ((_a = propsTreeData[0]) == null ? void 0 : _a.key) ? propsTreeData[0].key : null;
43
+ const defaultExpandKey = (propsTreeData == null ? void 0 : propsTreeData.length) === 1 && ((_a = propsTreeData[0]) == null ? void 0 : _a.key);
44
44
  const [searchText, setSearchText] = useState(null);
45
45
  const [showPopover, setShowPopover] = useState(null);
46
46
  const [filteredTreeData, setFilteredTreeData] = useState(propsTreeData || []);
47
- const [expandedKeys, setExpandedKeys] = useState(
48
- defaultExpandKey ? [defaultExpandKey] : []
49
- );
47
+ const [expandedKeys, setExpandedKeys] = useState(defaultExpandKey ? [defaultExpandKey] : []);
50
48
  useEffect(() => {
51
49
  setFilteredTreeData(propsTreeData);
52
- setExpandedKeys(defaultExpandKey ? [defaultExpandKey] : []);
53
- }, [propsTreeData, defaultExpandKey]);
50
+ setExpandedKeys([defaultExpandKey]);
51
+ }, [propsTreeData]);
54
52
  const handleSearch = (e) => {
55
53
  const { value } = e.target;
56
54
  setSearchText(value);
@@ -65,15 +63,13 @@ const CapPopoverTree = (props) => {
65
63
  }
66
64
  setExpandedKeys(keys);
67
65
  };
68
- const handleSelect = (selectedKey, info) => {
69
- const { node } = info;
70
- const nodeProps = node == null ? void 0 : node.props;
71
- const { isLeafNode, eventKey, expanded } = nodeProps || {};
66
+ const handleSelect = (selectedKey, { node }) => {
67
+ const { isLeafNode, eventKey, expanded } = (node == null ? void 0 : node.props) || {};
72
68
  if (isLeafNode) {
73
69
  setShowPopover(false);
74
- onSelect == null ? void 0 : onSelect(selectedKey);
70
+ onSelect(selectedKey);
75
71
  } else {
76
- const key = expanded ? [] : eventKey !== void 0 ? [eventKey] : [];
72
+ const key = expanded ? [] : [eventKey];
77
73
  handleOnExpand(key);
78
74
  }
79
75
  };
@@ -82,38 +78,25 @@ const CapPopoverTree = (props) => {
82
78
  var _a2, _b;
83
79
  const { title, key, icon, children = [], info } = data;
84
80
  if (title) {
85
- const titleString = typeof title === "string" ? title : String(title);
86
- const itemName = (_a2 = titleString == null ? void 0 : titleString.toLowerCase()) == null ? void 0 : _a2.trim();
81
+ const itemName = (_a2 = title == null ? void 0 : title.toLowerCase()) == null ? void 0 : _a2.trim();
87
82
  const searchValue = (_b = searchText == null ? void 0 : searchText.toLowerCase()) == null ? void 0 : _b.trim();
88
- const searchIndex = searchValue && itemName ? itemName.indexOf(searchValue) : -1;
89
- const beforeString = titleString == null ? void 0 : titleString.substr(0, searchIndex >= 0 ? searchIndex : 0);
90
- const afterString = titleString == null ? void 0 : titleString.substr(
91
- (searchIndex >= 0 ? searchIndex : 0) + ((searchValue == null ? void 0 : searchValue.length) || 0)
92
- );
93
- const matchedSearch = titleString == null ? void 0 : titleString.substr(
94
- searchIndex >= 0 ? searchIndex : 0,
95
- (searchValue == null ? void 0 : searchValue.length) || 0
96
- );
83
+ const searchIndex = searchValue && (itemName == null ? void 0 : itemName.indexOf(searchValue));
84
+ const beforeString = title == null ? void 0 : title.substr(0, searchIndex);
85
+ const afterString = title == null ? void 0 : title.substr(searchIndex + (searchValue == null ? void 0 : searchValue.length));
86
+ const matchedSearch = title == null ? void 0 : title.substr(searchIndex, searchValue == null ? void 0 : searchValue.length);
97
87
  const searchResult = /* @__PURE__ */ jsxs(Fragment, { children: [
98
- /* @__PURE__ */ jsx(CapColumn, { className: styles.styledCapColumn, children: beforeString }),
99
- /* @__PURE__ */ jsx(CapColumn, { className: classNames(styles.styledCapColumn, styles.matchedSearch), children: matchedSearch }),
100
- /* @__PURE__ */ jsx(CapColumn, { className: styles.styledCapColumn, children: afterString })
88
+ /* @__PURE__ */ jsx(StyledCapColumn, { children: beforeString }),
89
+ /* @__PURE__ */ jsx(StyledCapColumn, { style: { fontWeight: 500 }, children: matchedSearch }),
90
+ /* @__PURE__ */ jsx(StyledCapColumn, { children: afterString })
101
91
  ] });
102
92
  const treeNodeProps = {
103
- title: /* @__PURE__ */ jsxs(CapHeadingWithStatic, { className: classNames(styles.styledCapHeading, "tree-node-title"), children: [
93
+ title: /* @__PURE__ */ jsxs(StyledCapHeading, { className: "tree-node-title", children: [
104
94
  searchIndex > -1 ? searchResult : title,
105
- info && /* @__PURE__ */ jsx("span", { className: "info-tooltip", children: /* @__PURE__ */ jsx(Tooltip, { placement: "right", title: info, children: /* @__PURE__ */ jsx(InfoCircleOutlined, { className: "info-icon" }) }) })
95
+ info && /* @__PURE__ */ jsx("span", { className: "info-tooltip", children: /* @__PURE__ */ jsx(Tooltip, { placement: "right", title: info, children: /* @__PURE__ */ jsx(Icon, { className: "info-icon", type: "info-circle-o" }) }) })
106
96
  ] }),
107
97
  key,
108
98
  isLeafNode: !(children == null ? void 0 : children.length),
109
- icon: icon && /* @__PURE__ */ jsx(
110
- CapIcon,
111
- {
112
- className: classNames(styles.styledIcon, "tree-node-icon"),
113
- size: "s",
114
- type: icon
115
- }
116
- )
99
+ icon: icon && /* @__PURE__ */ jsx(StyledIcon, { className: "tree-node-icon", size: "s", type: icon })
117
100
  };
118
101
  result.push(
119
102
  /* @__PURE__ */ jsx(TreeNode, { ...treeNodeProps, children: (children == null ? void 0 : children.length) && getTreeData(children) })
@@ -131,15 +114,15 @@ const CapPopoverTree = (props) => {
131
114
  return;
132
115
  }
133
116
  const filteredData = propsTreeData.reduce((result, currentData) => {
134
- var _a3;
135
- const titleString = typeof (currentData == null ? void 0 : currentData.title) === "string" ? currentData.title : String((currentData == null ? void 0 : currentData.title) || "");
136
- const parentName = titleString == null ? void 0 : titleString.toLowerCase();
117
+ var _a3, _b;
118
+ const parentName = (_a3 = currentData == null ? void 0 : currentData.title) == null ? void 0 : _a3.toLowerCase();
137
119
  const isParent = (parentName == null ? void 0 : parentName.indexOf(searchString)) > -1;
138
- const childItems = (_a3 = currentData == null ? void 0 : currentData.children) == null ? void 0 : _a3.filter((childItem) => {
139
- var _a4;
140
- const childTitleString = typeof (childItem == null ? void 0 : childItem.title) === "string" ? childItem.title : String((childItem == null ? void 0 : childItem.title) || "");
141
- return ((_a4 = childTitleString == null ? void 0 : childTitleString.toLowerCase()) == null ? void 0 : _a4.indexOf(searchString)) > -1;
142
- });
120
+ const childItems = (_b = currentData == null ? void 0 : currentData.children) == null ? void 0 : _b.filter(
121
+ (childItem) => {
122
+ var _a4, _b2;
123
+ return ((_b2 = (_a4 = childItem == null ? void 0 : childItem.title) == null ? void 0 : _a4.toLowerCase()) == null ? void 0 : _b2.indexOf(searchString)) > -1;
124
+ }
125
+ );
143
126
  const hasChildren = !!(childItems == null ? void 0 : childItems.length);
144
127
  const currentDataCopy = { ...currentData };
145
128
  if (hasChildren) {
@@ -158,18 +141,16 @@ const CapPopoverTree = (props) => {
158
141
  /* @__PURE__ */ jsx(
159
142
  CapPopover,
160
143
  {
161
- visible: showPopover ?? void 0,
162
- onVisibleChange: (visible) => setShowPopover(visible),
144
+ visible: showPopover,
145
+ onVisibleChange: setShowPopover,
163
146
  trigger,
164
147
  placement,
165
148
  overlayClassName: classNames(`${clsPrefix}`, overlayClassName),
166
149
  ...rest,
167
150
  content: /* @__PURE__ */ jsx(CapRow, { className: "search-and-tree-wrapper", children: /* @__PURE__ */ jsxs(CapSpin, { spinning: isLoadingData, tip: loadingTip, children: [
168
151
  /* @__PURE__ */ jsx(
169
- Input,
152
+ Search,
170
153
  {
171
- prefix: /* @__PURE__ */ jsx(CapIcon, { type: "search", size: "s" }),
172
- variant: "borderless",
173
154
  placeholder: searchPlaceholder,
174
155
  onChange: handleSearch,
175
156
  className: "search-tree-node"
@@ -177,7 +158,7 @@ const CapPopoverTree = (props) => {
177
158
  ),
178
159
  /* @__PURE__ */ jsx("div", { className: "divider" }),
179
160
  (filteredTreeData == null ? void 0 : filteredTreeData.length) ? /* @__PURE__ */ jsx(
180
- CapTree,
161
+ StyledCapTree,
181
162
  {
182
163
  showIcon: true,
183
164
  blockNode: true,
@@ -187,11 +168,8 @@ const CapPopoverTree = (props) => {
187
168
  onExpand: handleOnExpand,
188
169
  onSelect: handleSelect,
189
170
  switcherIcon,
190
- className: classNames(
191
- styles.styledCapTree,
192
- (expandedKeys == null ? void 0 : expandedKeys.length) && !searchText && styles.isExpanded,
193
- className
194
- ),
171
+ isExpanded: (expandedKeys == null ? void 0 : expandedKeys.length) && !searchText,
172
+ className,
195
173
  ...renderOnKeyChange ? { key: JSON.stringify(filteredTreeData) } : {},
196
174
  ...rest,
197
175
  children: getTreeData(searchText ? filteredTreeData : propsTreeData)
@@ -200,12 +178,44 @@ const CapPopoverTree = (props) => {
200
178
  ] }) })
201
179
  }
202
180
  ),
203
- /* @__PURE__ */ jsx(CapRow, { children: !isTriggerDisabled ? /* @__PURE__ */ jsx(CapTooltip, { title: tooltipText, overlayClassName: "add-condition-tooltip", children: TriggerComponent && /* @__PURE__ */ jsx(TriggerComponent, { ...triggerProps, onClick: () => setShowPopover(true), children: componentText }) }) : /* @__PURE__ */ jsx(CapTooltip, { title: triggerDisabledText, children: /* @__PURE__ */ jsx("span", { className: "button-disabled-tooltip-wrapper", children: TriggerComponent && /* @__PURE__ */ jsx(TriggerComponent, { ...triggerProps, children: componentText }) }) }) })
181
+ /* @__PURE__ */ jsx(CapRow, { children: !isTriggerDisabled ? /* @__PURE__ */ jsx(CapTooltip, { title: tooltipText, overlayClassName: "add-condition-tooltip", children: /* @__PURE__ */ jsx(TriggerComponent, { ...triggerProps, onClick: () => setShowPopover(true), children: componentText }) }) : /* @__PURE__ */ jsx(CapTooltip, { title: triggerDisabledText, children: /* @__PURE__ */ jsx("span", { className: "button-disabled-tooltip-wrapper", children: /* @__PURE__ */ jsx(TriggerComponent, { ...triggerProps, children: componentText }) }) }) })
204
182
  ] });
205
183
  };
206
- const index = LocaleHoc(CapPopoverTree, {
207
- key: "CapPopoverTree"
208
- });
184
+ CapPopoverTree.defaultProps = {
185
+ trigger: "click",
186
+ placement: "rightBottom",
187
+ showIcon: true,
188
+ blockNode: true,
189
+ defaultExpandAll: false,
190
+ isLoadingData: false,
191
+ switcherIcon: /* @__PURE__ */ jsx(ExpandIcon, { size: "m", type: "chevron-down" }),
192
+ renderOnKeyChange: false
193
+ };
194
+ CapPopoverTree.propTypes = {
195
+ trigger: PropTypes.string,
196
+ placement: PropTypes.string,
197
+ className: PropTypes.string,
198
+ defaultExpandAll: PropTypes.bool,
199
+ overlayClassName: PropTypes.string,
200
+ showIcon: PropTypes.bool,
201
+ blockNode: PropTypes.bool,
202
+ propsTreeData: PropTypes.array,
203
+ switcherIcon: PropTypes.node,
204
+ TriggerComponent: PropTypes.node,
205
+ componentText: PropTypes.string,
206
+ triggerProps: PropTypes.object,
207
+ isTriggerDisabled: PropTypes.bool,
208
+ triggerDisabledText: PropTypes.string,
209
+ tooltipText: PropTypes.string,
210
+ onSelect: PropTypes.func,
211
+ propsSelectedKey: PropTypes.array,
212
+ isLoadingData: PropTypes.bool,
213
+ loadingTip: PropTypes.string,
214
+ searchPlaceholder: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
215
+ emptyDataMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
216
+ renderOnKeyChange: PropTypes.bool
217
+ };
218
+ const index = LocaleHoc(CapPopoverTree, { key: "CapPopoverTree" });
209
219
  export {
210
220
  CapPopoverTree,
211
221
  index as default
@@ -1,10 +1,6 @@
1
- interface StyledCapTreeProps {
2
- isExpanded?: boolean;
3
- }
4
1
  export declare const ExpandIcon: import("styled-components").StyledComponent<import("../CapIcon").CapIconComponent, any, {}, never>;
5
2
  export declare const StyledIcon: import("styled-components").StyledComponent<import("../CapIcon").CapIconComponent, any, {}, never>;
6
3
  export declare const StyledCapHeading: import("styled-components").StyledComponent<import("../CapHeading/types").CapHeadingComponent, any, {}, never>;
7
4
  export declare const StyledCapColumn: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../CapColumn").CapColumnProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
8
- export declare const StyledCapTree: import("styled-components").StyledComponent<import("react").FC<import("../CapTree").CapTreeProps>, any, StyledCapTreeProps, never>;
9
- export {};
5
+ export declare const StyledCapTree: import("styled-components").StyledComponent<import("react").FC<import("../CapTree").CapTreeProps>, any, {}, never>;
10
6
  //# sourceMappingURL=style.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../components/CapPopoverTree/style.ts"],"names":[],"mappings":"AAQA,UAAU,kBAAkB;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,UAAU,oGAMtB,CAAC;AAEF,eAAO,MAAM,UAAU,oGAItB,CAAC;AAEF,eAAO,MAAM,gBAAgB,gHAI5B,CAAC;AAEF,eAAO,MAAM,eAAe,+LAE3B,CAAC;AAEF,eAAO,MAAM,aAAa,oIA6DzB,CAAC"}
1
+ {"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../components/CapPopoverTree/style.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,UAAU,oGAMtB,CAAC;AAEF,eAAO,MAAM,UAAU,oGAItB,CAAC;AAEF,eAAO,MAAM,gBAAgB,gHAI5B,CAAC;AAEF,eAAO,MAAM,eAAe,+LAE3B,CAAC;AAEF,eAAO,MAAM,aAAa,oHA4DzB,CAAC"}
@@ -6,132 +6,31 @@
6
6
  /* Border Width */
7
7
  /* Transition */
8
8
  /* Timezones Footer */
9
- .expandIcon {
10
- margin-top: 0.714rem;
11
- z-index: 1;
12
- }
13
- .expandIcon svg {
14
- height: 1.714rem;
15
- width: 1.714rem;
16
- }
17
- .styledIcon {
18
- z-index: 1;
19
- padding: 0.286rem;
20
- border-radius: 0.571rem;
21
- background: #ebecf0;
22
- }
23
- .styledCapHeading {
24
- display: inline;
25
- margin-left: 0.286rem;
26
- }
27
- .styledCapColumn {
28
- display: inline;
29
- }
30
- .matchedSearch {
31
- font-weight: 500;
32
- }
33
- .styledCapTree.ant-tree.cap-tree-v2 {
34
- min-height: 8.857rem;
35
- }
36
- .styledCapTree.ant-tree.cap-tree-v2 li {
37
- padding: 0;
38
- }
39
- .styledCapTree.ant-tree.cap-tree-v2 .ant-tree-node-content-wrapper {
40
- height: 2.857rem;
41
- padding: 0.643rem 0 0.786rem 0.286rem;
42
- }
43
- .styledCapTree.ant-tree.cap-tree-v2 .ant-tree-node-content-wrapper:hover {
44
- background-color: #faf9f4;
45
- margin-left: -2.857rem;
46
- padding-left: 3.143rem;
47
- }
48
- .styledCapTree.ant-tree.cap-tree-v2 .ant-tree-node-selected .tree-node-title {
49
- color: #1d61ee;
50
- }
51
- .styledCapTree.ant-tree.cap-tree-v2 .ant-tree-node-content-wrapper-open {
52
- margin-left: -2.857rem;
53
- padding-left: 3.143rem;
54
- width: 23.143rem;
55
- }
56
- .styledCapTree.ant-tree.cap-tree-v2.isExpanded .ant-tree-node-content-wrapper-open {
57
- background: #e9f0fe;
58
- border-left: 0.143rem solid #2466ea;
59
- }
60
- .styledCapTree.ant-tree.cap-tree-v2.isExpanded .ant-tree-node-content-wrapper-open:hover {
61
- background-color: #e9f0fe;
62
- }
63
- .styledCapTree.ant-tree.cap-tree-v2.isExpanded .ant-tree-node-content-wrapper-open .tree-node-title {
64
- color: #1d61ee;
65
- }
66
- .styledCapTree.ant-tree.cap-tree-v2.isExpanded .ant-tree-node-content-wrapper-open .tree-node-icon {
67
- z-index: 1;
68
- background: #2466ea;
69
- color: #ffffff;
70
- }
71
- .styledCapTree.ant-tree.cap-tree-v2 .ant-tree-child-tree .ant-tree-node-content-wrapper {
72
- position: relative;
73
- margin-left: 1.143rem;
74
- padding-left: 0;
75
- width: 17.857rem;
76
- }
77
- .styledCapTree.ant-tree.cap-tree-v2 .ant-tree-child-tree .ant-tree-node-selected {
78
- background-color: #e9f0fe;
79
- }
80
- .styledCapTree.ant-tree.cap-tree-v2 .ant-tree-child-tree .ant-tree-title {
81
- margin-left: -0.857rem;
82
- }
83
- .styledCapTree.ant-tree.cap-tree-v2 .ant-tree-child-tree .ant-tree-title .info-icon {
84
- position: absolute;
85
- right: 1.786rem;
86
- top: 1rem;
87
- }
88
- .isExpanded.ant-tree.cap-tree-v2 .ant-tree-node-content-wrapper-open {
89
- background: #e9f0fe;
90
- border-left: 0.143rem solid #2466ea;
91
- }
92
- .isExpanded.ant-tree.cap-tree-v2 .ant-tree-node-content-wrapper-open:hover {
93
- background-color: #e9f0fe;
94
- }
95
- .isExpanded.ant-tree.cap-tree-v2 .ant-tree-node-content-wrapper-open .tree-node-title {
96
- color: #1d61ee;
97
- }
98
- .isExpanded.ant-tree.cap-tree-v2 .ant-tree-node-content-wrapper-open .tree-node-icon {
99
- z-index: 1;
100
- background: #2466ea;
101
- color: #ffffff;
102
- }
103
- .ant-popover.cap-popover-tree-v2 {
104
- width: 23.857rem;
105
- }
106
9
  .ant-popover.cap-popover-tree-v2 .ant-popover-content {
10
+ width: 334px;
107
11
  padding: 0;
108
- min-height: 12.571rem;
109
- }
110
- .ant-popover.cap-popover-tree-v2 .ant-popover-inner-content {
111
- padding: 0 0 0.857rem 0;
112
- }
113
- .ant-popover.cap-popover-tree-v2 .search-and-tree-wrapper {
114
- display: block;
115
- }
116
- .ant-popover.cap-popover-tree-v2 .search-and-tree-wrapper .ant-spin-container {
117
- width: 100%;
118
- }
119
- .ant-popover.cap-popover-tree-v2 .search-tree-node.ant-input-affix-wrapper {
120
- width: 100%;
121
- padding: 0.571rem 0.857rem;
122
- border-bottom: 0.071rem solid #dfe2e7;
123
- }
124
- .ant-popover.cap-popover-tree-v2 .search-tree-node.ant-input-affix-wrapper .ant-input {
125
- margin-left: 0.286rem;
12
+ min-height: 176px;
126
13
  }
127
14
  .ant-popover.cap-popover-tree-v2 .divider {
128
- display: none;
15
+ border-top: 1px solid #dfe2e7;
129
16
  }
130
17
  .ant-popover.cap-popover-tree-v2 .empty-data-text {
131
18
  text-align: center;
132
- margin-top: 0.857rem;
133
- padding: 0.714rem 0.857rem;
19
+ margin-top: 12px;
20
+ padding: 10px 0;
21
+ }
22
+ .ant-popover.cap-popover-tree-v2 .ant-popover-inner-content {
23
+ padding: 0 0 12px 0;
24
+ }
25
+ .ant-popover.cap-popover-tree-v2 .search-tree-node .ant-input-affix-wrapper {
26
+ width: 300px;
27
+ margin-left: 12px;
28
+ }
29
+ .ant-popover.cap-popover-tree-v2 .search-tree-node .ant-input-affix-wrapper .ant-input.ant-input-lg {
30
+ border: none !important;
31
+ border-radius: 0 !important;
32
+ margin-left: 8px;
134
33
  }
135
34
  .add-condition-tooltip .ant-tooltip-inner {
136
- width: 27.571rem;
35
+ width: 386px;
137
36
  }