@capillarytech/blaze-ui 6.1.1 → 6.1.2

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 (81) hide show
  1. package/.npmrc +3 -0
  2. package/CapCustomCheckboxList/styles.css +3 -3
  3. package/CapCustomCheckboxList/styles.scss +7 -8
  4. package/CapMobileDatePicker/index.d.ts +14 -3
  5. package/CapMobileDatePicker/index.d.ts.map +1 -1
  6. package/CapMobileDatePicker/index.js +20 -28
  7. package/CapMobileDatePicker/styles.css +11 -28
  8. package/CapMobileDatePicker/styles.scss +16 -37
  9. package/CapPopoverTree/index.d.ts +40 -3
  10. package/CapPopoverTree/index.d.ts.map +1 -1
  11. package/CapPopoverTree/index.js +82 -72
  12. package/CapPopoverTree/style.d.ts +1 -5
  13. package/CapPopoverTree/style.d.ts.map +1 -1
  14. package/CapPopoverTree/styles.css +18 -119
  15. package/CapPopoverTree/styles.scss +31 -179
  16. package/CapProductSelection/index.d.ts +7 -29
  17. package/CapProductSelection/index.d.ts.map +1 -1
  18. package/CapProductSelection/index.js +52 -89
  19. package/CapProductSelection/messages.d.ts +76 -0
  20. package/CapProductSelection/messages.d.ts.map +1 -0
  21. package/CapProductSelection/messages.js +79 -0
  22. package/CapProductSelection/styles.css +81 -0
  23. package/CapProductSelection/styles.module.scss.js +8 -0
  24. package/CapProductSelection/styles.scss +82 -40
  25. package/CapProductSelection/tests/CapProductSelection.mockData.d.ts +36 -0
  26. package/CapProductSelection/tests/CapProductSelection.mockData.d.ts.map +1 -0
  27. package/CapProductSelection/types.d.ts +34 -0
  28. package/CapProductSelection/types.d.ts.map +1 -0
  29. package/CapRadioCard/index.d.ts.map +1 -1
  30. package/CapRadioCard/index.js +52 -20
  31. package/CapRadioCard/styles.css +25 -25
  32. package/CapRadioCard/styles.module.scss.js +14 -40
  33. package/CapRadioCard/styles.scss +20 -20
  34. package/CapRadioCard/types.d.ts +20 -0
  35. package/CapRadioCard/types.d.ts.map +1 -1
  36. package/CapSelectFilter/index.d.ts.map +1 -1
  37. package/CapSelectFilter/index.js +10 -11
  38. package/CapSelectFilter/styles.css +11 -10
  39. package/CapSelectFilter/styles.module.scss.js +8 -10
  40. package/CapSelectFilter/styles.scss +11 -8
  41. package/CapSelectFilter/types.d.ts +1 -1
  42. package/CapSelectFilter/types.d.ts.map +1 -1
  43. package/CapStaticTemplates/index.d.ts +3 -1
  44. package/CapStaticTemplates/index.d.ts.map +1 -1
  45. package/CapStaticTemplates/index.js +185 -144
  46. package/CapStaticTemplates/messages.d.ts +32 -0
  47. package/CapStaticTemplates/messages.d.ts.map +1 -0
  48. package/CapStaticTemplates/messages.js +35 -0
  49. package/CapStaticTemplates/styles.css +220 -0
  50. package/CapStaticTemplates/styles.module.scss.js +55 -0
  51. package/CapStaticTemplates/styles.scss +291 -0
  52. package/CapStaticTemplates/tests/CapStaticTemplates.mockData.d.ts +54 -0
  53. package/CapStaticTemplates/tests/CapStaticTemplates.mockData.d.ts.map +1 -0
  54. package/CapStaticTemplates/types.d.ts +97 -0
  55. package/CapStaticTemplates/types.d.ts.map +1 -0
  56. package/index.d.ts +4 -4
  57. package/index.d.ts.map +1 -1
  58. package/index.js +56 -56
  59. package/package.json +1 -1
  60. package/styles/_variables.scss +2 -0
  61. package/utils/dayjs.d.ts +0 -1
  62. package/utils/dayjs.d.ts.map +1 -1
  63. package/utils/dayjs.js +0 -1
  64. package/CapMobileDatePicker/styles.module.scss.js +0 -10
  65. package/CapMobileDatePicker/tests/CapMobileDatePicker.mockData.d.ts +0 -41
  66. package/CapMobileDatePicker/tests/CapMobileDatePicker.mockData.d.ts.map +0 -1
  67. package/CapMobileDatePicker/types.d.ts +0 -17
  68. package/CapMobileDatePicker/types.d.ts.map +0 -1
  69. package/CapPopoverTree/styles.module.scss.js +0 -26
  70. package/CapPopoverTree/tests/CapPopoverTree.mockData.d.ts +0 -22
  71. package/CapPopoverTree/tests/CapPopoverTree.mockData.d.ts.map +0 -1
  72. package/CapPopoverTree/types.d.ts +0 -62
  73. package/CapPopoverTree/types.d.ts.map +0 -1
  74. package/CapProductSelection/style.d.ts +0 -3
  75. package/CapProductSelection/style.d.ts.map +0 -1
  76. package/CapProductSelection/style.js +0 -38
  77. package/CapStaticTemplates/style.d.ts +0 -13
  78. package/CapStaticTemplates/style.d.ts.map +0 -1
  79. package/CapStaticTemplates/style.js +0 -216
  80. /package/{CapMobileDatePicker → CapProductSelection}/types.js +0 -0
  81. /package/{CapPopoverTree → CapStaticTemplates}/types.js +0 -0
package/.npmrc ADDED
@@ -0,0 +1,3 @@
1
+ npm config set scope capillarytech
2
+ //registry.npmjs.org/:_authToken=${NPM_TOKEN}
3
+ legacy-peer-deps=true
@@ -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,19 @@
3
3
  * MobileDatePicker
4
4
  *
5
5
  */
6
- import type { CapMobileDatePickerProps } from './types';
7
- declare function CapMobileDatePicker({ onChange, value, lastSyncDate }: CapMobileDatePickerProps): import("react/jsx-runtime").JSX.Element;
6
+ import PropTypes from 'prop-types';
7
+ import './styles.scss';
8
+ declare function CapMobileDatePicker({ onChange, value, lastSyncDate }: {
9
+ onChange: any;
10
+ value: any;
11
+ lastSyncDate: any;
12
+ }): import("react/jsx-runtime").JSX.Element;
13
+ declare namespace CapMobileDatePicker {
14
+ var propTypes: {
15
+ value: PropTypes.Requireable<object>;
16
+ lastSyncDate: PropTypes.Requireable<object>;
17
+ onChange: PropTypes.Requireable<(...args: any[]) => any>;
18
+ };
19
+ }
8
20
  export default CapMobileDatePicker;
9
- export type { CapMobileDatePickerProps } from './types';
10
21
  //# 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,SAAS,MAAM,YAAY,CAAC;AAQnC,OAAO,eAAe,CAAC;AAKvB,iBAAS,mBAAmB,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,YAAY,EAAE;;;;CAAA,2CA2C7D;kBA3CQ,mBAAmB;;;;;;;AAmD5B,eAAe,mBAAmB,CAAC"}
@@ -1,71 +1,63 @@
1
1
  import { jsxs, Fragment, jsx } from "react/jsx-runtime";
2
2
  import moment from "moment";
3
+ import PropTypes from "prop-types";
3
4
  import { useState } from "react";
4
- import { FORMAT_TOKENS } from "../utils/dayjs.js";
5
5
  import CapCalendarDatePicker from "../CapCalendarDatePicker/index.js";
6
6
  import CapIcon from "../CapIcon/index.js";
7
7
  import InputFinal from "../CapInput/index.js";
8
8
  import CapModalWithHoc from "../CapModal/index.js";
9
- import styles from "./styles.module.scss.js";
9
+ import './styles.css';/* empty css */
10
10
  const INCEPTION_DATE = "2000-01-01";
11
- const DATE_CALC_FORMAT = FORMAT_TOKENS.ISO_8601_DATE;
12
- const DATE_DISPLAY_FORMAT = FORMAT_TOKENS.DATE_DISPLAY_FULL;
13
- const clsPrefix = "cap-mobile-date-picker";
11
+ const DATE_CALC_FORMAT = "YYYY-MM-DD";
12
+ const DATE_DISPLAY_FORMAT = "DD MMMM YYYY";
14
13
  function CapMobileDatePicker({ onChange, value, lastSyncDate }) {
15
- const [open, setOpen] = useState(false);
14
+ const [visible, setVisible] = useState(false);
16
15
  const handleDateChange = (date) => {
17
- onChange == null ? void 0 : onChange(moment(date));
18
- setOpen(false);
19
- };
20
- const handleModalOpen = () => {
21
- setOpen(true);
22
- };
23
- const handleModalClose = () => {
24
- setOpen(false);
16
+ onChange(moment(date));
17
+ setVisible(false);
25
18
  };
26
19
  return /* @__PURE__ */ jsxs(Fragment, { children: [
27
20
  /* @__PURE__ */ jsx(
28
21
  InputFinal,
29
22
  {
30
23
  suffix: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(CapIcon, { type: "calendar", style: { color: "rgb(9, 30, 66)" }, size: "m" }) }),
31
- onClick: handleModalOpen,
32
- value: value ? moment(value).format(DATE_DISPLAY_FORMAT) : void 0,
33
- size: "large"
24
+ onClick: () => setVisible(true),
25
+ value: moment(value).format(DATE_DISPLAY_FORMAT)
34
26
  }
35
27
  ),
36
28
  /* @__PURE__ */ jsx(
37
29
  CapModalWithHoc,
38
30
  {
39
- open,
31
+ visible,
40
32
  centered: true,
41
- onCancel: handleModalClose,
42
- className: styles[`${clsPrefix}-modal`],
43
- classNames: {
44
- root: styles[`${clsPrefix}-modal-root`],
45
- body: styles[`${clsPrefix}-modal-body`],
46
- container: styles[`${clsPrefix}-modal-container`],
47
- footer: styles[`${clsPrefix}-modal-footer`]
48
- },
33
+ onCancel: () => setVisible(false),
34
+ className: "mobile-date-picker-modal",
49
35
  closable: false,
50
36
  footer: /* @__PURE__ */ jsx(Fragment, {}),
51
37
  children: /* @__PURE__ */ jsx(
52
38
  CapCalendarDatePicker,
53
39
  {
54
40
  inline: true,
55
- className: styles[`${clsPrefix}-calendar`],
56
41
  minDate: moment(INCEPTION_DATE, DATE_CALC_FORMAT).toDate(),
57
42
  maxDate: lastSyncDate.toDate(),
58
43
  dropdownMode: "select",
59
44
  showMonthDropdown: true,
60
45
  showYearDropdown: true,
46
+ readOnly: true,
61
47
  onChange: handleDateChange,
62
- selected: value ? moment(value).toDate() : void 0
48
+ selected: moment(value).toDate(),
49
+ disabledDate: (currentDate) => currentDate.isAfter(lastSyncDate) || currentDate.isBefore(moment(INCEPTION_DATE))
63
50
  }
64
51
  )
65
52
  }
66
53
  )
67
54
  ] });
68
55
  }
56
+ CapMobileDatePicker.propTypes = {
57
+ value: PropTypes.object,
58
+ lastSyncDate: PropTypes.object,
59
+ onChange: PropTypes.func
60
+ };
69
61
  export {
70
62
  CapMobileDatePicker as default
71
63
  };
@@ -1,36 +1,19 @@
1
- /* Color Palette */
2
- /* Fonts */
3
- /* Backward Compatibility Aliases */
4
- /* Component Heights */
5
- /* Border Radius */
6
- /* Border Width */
7
- /* Transition */
8
- /* Timezones Footer */
9
- .cap-mobile-date-picker-modal-root {
10
- min-width: 22.857rem;
1
+ .mobile-date-picker-modal {
2
+ min-width: 320px;
11
3
  width: unset !important;
12
4
  }
13
- .cap-mobile-date-picker-modal-body {
14
- display: flex;
15
- justify-content: center;
16
- align-items: center;
5
+ .mobile-date-picker-modal .ant-modal-content .ant-modal-body, .mobile-date-picker-modal .ant-modal-content .ant-modal-footer {
6
+ padding: 0 !important;
17
7
  }
18
- .cap-mobile-date-picker-modal-body .react-datepicker__day--keyboard-selected {
19
- background-color: #2466ea;
20
- color: #ffffff !important;
8
+ .mobile-date-picker-modal .ant-modal-content .react-datepicker__day--keyboard-selected {
9
+ background-color: rgb(36, 102, 234);
10
+ color: #fff !important;
21
11
  border-radius: 50%;
22
12
  }
23
- .cap-mobile-date-picker-modal-container {
24
- padding: 0 !important;
25
- }
26
- .cap-mobile-date-picker-modal-footer {
13
+ .mobile-date-picker-modal .ant-modal-content .react-datepicker__navigation-icon--next, .mobile-date-picker-modal .ant-modal-content .react-datepicker__navigation-icon--previous {
27
14
  display: none !important;
28
15
  }
29
- .cap-mobile-date-picker-calendar {
30
- box-shadow: none;
31
- height: 100%;
32
- width: 100%;
33
- display: flex;
34
- justify-content: center;
35
- align-items: center;
16
+
17
+ .ant-input-lg {
18
+ font-size: 14px !important;
36
19
  }
@@ -1,41 +1,20 @@
1
- @import '../styles/_variables.scss';
2
-
3
- $clsPrefix: 'cap-mobile-date-picker';
4
-
5
- .#{$clsPrefix}-modal {
6
- &-root {
7
- min-width: 22.857rem;
1
+ .mobile-date-picker-modal{
2
+ min-width: 320px;
8
3
  width: unset !important;
9
- }
10
-
11
- &-body {
12
- display: flex;
13
- justify-content: center;
14
- align-items: center;
15
-
16
- :global {
17
- .react-datepicker__day--keyboard-selected {
18
- background-color: $cap-secondary-base;
19
- color: $cap-white !important;
20
- border-radius: 50%;
21
- }
4
+ .ant-modal-content{
5
+ .ant-modal-body, .ant-modal-footer{
6
+ padding: 0 !important;
7
+ }
8
+ .react-datepicker__day--keyboard-selected {
9
+ background-color: rgb(36, 102, 234);
10
+ color: #fff !important;
11
+ border-radius: 50%;
12
+ }
13
+ .react-datepicker__navigation-icon--next, .react-datepicker__navigation-icon--previous{
14
+ display: none !important;
15
+ }
22
16
  }
23
- }
24
-
25
- &-container {
26
- padding: 0 !important;
27
- }
28
-
29
- &-footer {
30
- display: none !important;
31
- }
32
17
  }
33
-
34
- .#{$clsPrefix}-calendar {
35
- box-shadow: none;
36
- height: 100%;
37
- width: 100%;
38
- display: flex;
39
- justify-content: center;
40
- align-items: center;
18
+ .ant-input-lg{
19
+ font-size: 14px !important;
41
20
  }
@@ -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"}