@capillarytech/blaze-ui 5.23.3-beta.2 → 5.23.3-beta.4

package/CapPopoverTree/index.js

@@ -1,176 +1,130 @@
-var _excluded = ["treeData", "overlayClassName", "trigger", "TriggerComponent", "componentText", "triggerProps", "isTriggerDisabled", "triggerDisabledText", "tooltipText", "isLoadingData", "loadingTip", "placement", "switcherIcon", "className", "defaultExpandAll", "onSelect", "selectedKey", "emptyDataMessage", "searchPlaceholder", "renderOnKeyChange"];
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import { Tree, Icon, Tooltip } from 'antd';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React, { useState, useEffect } from 'react';
-import CapHeading from "../CapHeading";
-import CapInput from "../CapInput";
-import CapPopover from "../CapPopover";
-import CapRow from "../CapRow";
-import CapSpin from "../CapSpin";
-import CapTooltip from "../CapTooltip";
-import LocaleHoc from "../LocaleHoc";
-import { ExpandIcon, StyledIcon, StyledCapHeading, StyledCapTree, StyledCapColumn } from "./style";
-import "./styles.scss";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-var {
-  TreeNode
-} = Tree;
-var {
-  Search
-} = CapInput;
-var clsPrefix = 'cap-popover-tree-v2';
-export var CapPopoverTree = props => {
-  var _propsTreeData$;
-  var _ref = props || {},
-    {
-      treeData: propsTreeData = [],
-      overlayClassName,
-      trigger,
-      TriggerComponent,
-      componentText,
-      triggerProps,
-      isTriggerDisabled,
-      triggerDisabledText,
-      tooltipText,
-      isLoadingData,
-      loadingTip,
-      placement,
-      switcherIcon,
-      className,
-      defaultExpandAll,
-      onSelect,
-      selectedKey: propsSelectedKey,
-      emptyDataMessage,
-      searchPlaceholder,
-      renderOnKeyChange
-    } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var defaultExpandKey = (propsTreeData == null ? void 0 : propsTreeData.length) === 1 && ((_propsTreeData$ = propsTreeData[0]) == null ? void 0 : _propsTreeData$.key);
-  var [searchText, setSearchText] = useState(null);
-  var [showPopover, setShowPopover] = useState(null);
-  var [filteredTreeData, setFilteredTreeData] = useState(propsTreeData || []);
-  var [expandedKeys, setExpandedKeys] = useState(defaultExpandKey ? [defaultExpandKey] : []);
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { Tree, Tooltip, Icon } from "antd";
+import classNames from "classnames";
+import PropTypes from "prop-types";
+import { useState, useEffect } from "react";
+import CapHeadingWithStatic from "../CapHeading/index.js";
+import InputFinal from "../CapInput/index.js";
+import CapPopover from "../CapPopover/index.js";
+import CapRow from "../CapRow/index.js";
+import CapSpin from "../CapSpin/index.js";
+import CapTooltip from "../CapTooltip/index.js";
+import LocaleHoc from "../LocaleHoc/index.js";
+import { StyledCapTree, StyledIcon, StyledCapHeading, StyledCapColumn, ExpandIcon } from "./style.js";
+import './styles.css';/* empty css            */
+const { TreeNode } = Tree;
+const { Search } = InputFinal;
+const clsPrefix = "cap-popover-tree-v2";
+const CapPopoverTree = (props) => {
+  var _a;
+  const {
+    treeData: propsTreeData = [],
+    overlayClassName,
+    trigger,
+    TriggerComponent,
+    componentText,
+    triggerProps,
+    isTriggerDisabled,
+    triggerDisabledText,
+    tooltipText,
+    isLoadingData,
+    loadingTip,
+    placement,
+    switcherIcon,
+    className,
+    defaultExpandAll,
+    onSelect,
+    selectedKey: propsSelectedKey,
+    emptyDataMessage,
+    searchPlaceholder,
+    renderOnKeyChange,
+    ...rest
+  } = props || {};
+  const defaultExpandKey = (propsTreeData == null ? void 0 : propsTreeData.length) === 1 && ((_a = propsTreeData[0]) == null ? void 0 : _a.key);
+  const [searchText, setSearchText] = useState(null);
+  const [showPopover, setShowPopover] = useState(null);
+  const [filteredTreeData, setFilteredTreeData] = useState(propsTreeData || []);
+  const [expandedKeys, setExpandedKeys] = useState(defaultExpandKey ? [defaultExpandKey] : []);
   useEffect(() => {
     setFilteredTreeData(propsTreeData);
     setExpandedKeys([defaultExpandKey]);
   }, [propsTreeData]);
-  var handleSearch = e => {
-    var {
-      value
-    } = e.target;
+  const handleSearch = (e) => {
+    const { value } = e.target;
     setSearchText(value);
     setExpandedKeys([]);
     getFilteredData(value);
   };
-  var handleOnExpand = key => {
-    var keyLength = key == null ? void 0 : key.length;
-    var keys = [...key];
-    // This condition is to make only one parent expand at a time.
+  const handleOnExpand = (key) => {
+    const keyLength = key == null ? void 0 : key.length;
+    let keys = [...key];
     if (keyLength) {
       keys = [key[keyLength - 1]];
     }
     setExpandedKeys(keys);
   };
-  var handleSelect = (selectedKey, _ref2) => {
-    var {
-      node
-    } = _ref2;
-    var {
-      isLeafNode,
-      eventKey,
-      expanded
-    } = (node == null ? void 0 : node.props) || {};
-    // This condition is to select only child node and expand/collapse the parent node.
+  const handleSelect = (selectedKey, { node }) => {
+    const { isLeafNode, eventKey, expanded } = (node == null ? void 0 : node.props) || {};
     if (isLeafNode) {
       setShowPopover(false);
       onSelect(selectedKey);
     } else {
-      var key = expanded ? [] : [eventKey];
+      const key = expanded ? [] : [eventKey];
       handleOnExpand(key);
     }
   };
-  var getTreeData = treeData => {
-    var finalTreeData = treeData == null ? void 0 : treeData.reduce((result, data) => {
-      var {
-        title,
-        key,
-        icon,
-        children = [],
-        info
-      } = data;
+  const getTreeData = (treeData) => {
+    const finalTreeData = treeData == null ? void 0 : treeData.reduce((result, data) => {
+      var _a2, _b;
+      const { title, key, icon, children = [], info } = data;
       if (title) {
-        var _title$toLowerCase, _searchText$toLowerCa;
-        var itemName = title == null || (_title$toLowerCase = title.toLowerCase()) == null ? void 0 : _title$toLowerCase.trim();
-        var searchValue = searchText == null || (_searchText$toLowerCa = searchText.toLowerCase()) == null ? void 0 : _searchText$toLowerCa.trim();
-        var searchIndex = searchValue && (itemName == null ? void 0 : itemName.indexOf(searchValue));
-        var beforeString = title == null ? void 0 : title.substr(0, searchIndex);
-        var afterString = title == null ? void 0 : title.substr(searchIndex + (searchValue == null ? void 0 : searchValue.length));
-        var matchedSearch = title == null ? void 0 : title.substr(searchIndex, searchValue == null ? void 0 : searchValue.length);
-        var searchResult = /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx(StyledCapColumn, {
-            children: beforeString
-          }), /*#__PURE__*/_jsx(StyledCapColumn, {
-            style: {
-              fontWeight: 500
-            },
-            children: matchedSearch
-          }), /*#__PURE__*/_jsx(StyledCapColumn, {
-            children: afterString
-          })]
-        });
-        var treeNodeProps = {
-          title: /*#__PURE__*/_jsxs(StyledCapHeading, {
-            className: "tree-node-title",
-            children: [searchIndex > -1 ? searchResult : title, 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"
-                })
-              })
-            })]
-          }),
+        const itemName = (_a2 = title == null ? void 0 : title.toLowerCase()) == null ? void 0 : _a2.trim();
+        const searchValue = (_b = searchText == null ? void 0 : searchText.toLowerCase()) == null ? void 0 : _b.trim();
+        const searchIndex = searchValue && (itemName == null ? void 0 : itemName.indexOf(searchValue));
+        const beforeString = title == null ? void 0 : title.substr(0, searchIndex);
+        const afterString = title == null ? void 0 : title.substr(searchIndex + (searchValue == null ? void 0 : searchValue.length));
+        const matchedSearch = title == null ? void 0 : title.substr(searchIndex, searchValue == null ? void 0 : searchValue.length);
+        const searchResult = /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(StyledCapColumn, { children: beforeString }),
+          /* @__PURE__ */ jsx(StyledCapColumn, { style: { fontWeight: 500 }, children: matchedSearch }),
+          /* @__PURE__ */ jsx(StyledCapColumn, { children: afterString })
+        ] });
+        const treeNodeProps = {
+          title: /* @__PURE__ */ jsxs(StyledCapHeading, { className: "tree-node-title", children: [
+            searchIndex > -1 ? searchResult : title,
+            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" }) }) })
+          ] }),
           key,
-          isLeafNode: !(children != null && children.length),
-          icon: icon && /*#__PURE__*/_jsx(StyledIcon, {
-            className: "tree-node-icon",
-            size: "s",
-            type: icon
-          })
+          isLeafNode: !(children == null ? void 0 : children.length),
+          icon: icon && /* @__PURE__ */ jsx(StyledIcon, { className: "tree-node-icon", size: "s", type: icon })
         };
-        result.push(/*#__PURE__*/_jsx(TreeNode, _extends({}, treeNodeProps, {
-          children: (children == null ? void 0 : children.length) && getTreeData(children)
-        })));
+        result.push(
+          /* @__PURE__ */ jsx(TreeNode, { ...treeNodeProps, children: (children == null ? void 0 : children.length) && getTreeData(children) })
+        );
       }
       return result;
     }, []);
     return finalTreeData;
   };
-
-  // This function is to handle the search items;
-  var getFilteredData = searchValue => {
-    var _searchValue$toLowerC;
-    var searchString = searchValue == null || (_searchValue$toLowerC = searchValue.toLowerCase()) == null ? void 0 : _searchValue$toLowerC.trim();
-    var expandedKeysData = [];
+  const getFilteredData = (searchValue) => {
+    var _a2;
+    const searchString = (_a2 = searchValue == null ? void 0 : searchValue.toLowerCase()) == null ? void 0 : _a2.trim();
+    const expandedKeysData = [];
     if (!searchString) {
       return;
     }
-    var filteredData = propsTreeData.reduce((result, currentData) => {
-      var _currentData$title, _currentData$children;
-      var parentName = currentData == null || (_currentData$title = currentData.title) == null ? void 0 : _currentData$title.toLowerCase();
-      var isParent = (parentName == null ? void 0 : parentName.indexOf(searchString)) > -1;
-      var childItems = currentData == null || (_currentData$children = currentData.children) == null ? void 0 : _currentData$children.filter(childItem => {
-        var _childItem$title;
-        return (childItem == null || (_childItem$title = childItem.title) == null || (_childItem$title = _childItem$title.toLowerCase()) == null ? void 0 : _childItem$title.indexOf(searchString)) > -1;
-      });
-      var hasChildren = !!(childItems != null && childItems.length);
-      var currentDataCopy = _extends({}, currentData);
+    const filteredData = propsTreeData.reduce((result, currentData) => {
+      var _a3, _b;
+      const parentName = (_a3 = currentData == null ? void 0 : currentData.title) == null ? void 0 : _a3.toLowerCase();
+      const isParent = (parentName == null ? void 0 : parentName.indexOf(searchString)) > -1;
+      const childItems = (_b = currentData == null ? void 0 : currentData.children) == null ? void 0 : _b.filter(
+        (childItem) => {
+          var _a4, _b2;
+          return ((_b2 = (_a4 = childItem == null ? void 0 : childItem.title) == null ? void 0 : _a4.toLowerCase()) == null ? void 0 : _b2.indexOf(searchString)) > -1;
+        }
+      );
+      const hasChildren = !!(childItems == null ? void 0 : childItems.length);
+      const currentDataCopy = { ...currentData };
       if (hasChildren) {
         currentDataCopy.children = childItems;
         result.push(currentDataCopy);
@@ -183,78 +137,58 @@ export var CapPopoverTree = props => {
     setExpandedKeys(expandedKeysData);
     setFilteredTreeData(filteredData);
   };
-  return /*#__PURE__*/_jsxs(CapRow, {
-    children: [/*#__PURE__*/_jsx(CapPopover, _extends({
-      visible: showPopover,
-      onVisibleChange: setShowPopover,
-      trigger: trigger,
-      placement: placement,
-      overlayClassName: classNames("" + clsPrefix, overlayClassName)
-    }, rest, {
-      content: /*#__PURE__*/_jsx(CapRow, {
-        className: "search-and-tree-wrapper",
-        children: /*#__PURE__*/_jsxs(CapSpin, {
-          spinning: isLoadingData,
-          tip: loadingTip,
-          children: [/*#__PURE__*/_jsx(Search, {
-            placeholder: searchPlaceholder,
-            onChange: handleSearch,
-            className: "search-tree-node"
-          }), /*#__PURE__*/_jsx("div", {
-            className: "divider"
-          }), filteredTreeData != null && filteredTreeData.length ? /*#__PURE__*/_jsx(StyledCapTree, _extends({
-            showIcon: true,
-            blockNode: true,
-            expandedKeys: expandedKeys,
-            selectedKeys: propsSelectedKey,
-            defaultExpandAll: defaultExpandAll,
-            onExpand: handleOnExpand,
-            onSelect: handleSelect,
-            switcherIcon: switcherIcon,
-            isExpanded: (expandedKeys == null ? void 0 : expandedKeys.length) && !searchText,
-            className: className
-          }, renderOnKeyChange ? {
-            key: JSON.stringify(filteredTreeData)
-          } : {}, rest, {
-            children: getTreeData(searchText ? filteredTreeData : propsTreeData)
-          })) : /*#__PURE__*/_jsx(CapHeading, {
-            type: "h5",
-            className: "empty-data-text",
-            children: emptyDataMessage
-          })]
-        })
-      })
-    })), /*#__PURE__*/_jsx(CapRow, {
-      children: !isTriggerDisabled ? /*#__PURE__*/_jsx(CapTooltip, {
-        title: tooltipText,
-        overlayClassName: "add-condition-tooltip",
-        children: /*#__PURE__*/_jsx(TriggerComponent, _extends({}, triggerProps, {
-          onClick: () => setShowPopover(true),
-          children: componentText
-        }))
-      }) : /*#__PURE__*/_jsx(CapTooltip, {
-        title: triggerDisabledText,
-        children: /*#__PURE__*/_jsx("span", {
-          className: "button-disabled-tooltip-wrapper",
-          children: /*#__PURE__*/_jsx(TriggerComponent, _extends({}, triggerProps, {
-            children: componentText
-          }))
-        })
-      })
-    })]
-  });
+  return /* @__PURE__ */ jsxs(CapRow, { children: [
+    /* @__PURE__ */ jsx(
+      CapPopover,
+      {
+        visible: showPopover,
+        onVisibleChange: setShowPopover,
+        trigger,
+        placement,
+        overlayClassName: classNames(`${clsPrefix}`, overlayClassName),
+        ...rest,
+        content: /* @__PURE__ */ jsx(CapRow, { className: "search-and-tree-wrapper", children: /* @__PURE__ */ jsxs(CapSpin, { spinning: isLoadingData, tip: loadingTip, children: [
+          /* @__PURE__ */ jsx(
+            Search,
+            {
+              placeholder: searchPlaceholder,
+              onChange: handleSearch,
+              className: "search-tree-node"
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "divider" }),
+          (filteredTreeData == null ? void 0 : filteredTreeData.length) ? /* @__PURE__ */ jsx(
+            StyledCapTree,
+            {
+              showIcon: true,
+              blockNode: true,
+              expandedKeys,
+              selectedKeys: propsSelectedKey,
+              defaultExpandAll,
+              onExpand: handleOnExpand,
+              onSelect: handleSelect,
+              switcherIcon,
+              isExpanded: (expandedKeys == null ? void 0 : expandedKeys.length) && !searchText,
+              className,
+              ...renderOnKeyChange ? { key: JSON.stringify(filteredTreeData) } : {},
+              ...rest,
+              children: getTreeData(searchText ? filteredTreeData : propsTreeData)
+            }
+          ) : /* @__PURE__ */ jsx(CapHeadingWithStatic, { type: "h5", className: "empty-data-text", children: emptyDataMessage })
+        ] }) })
+      }
+    ),
+    /* @__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 }) }) }) })
+  ] });
 };
 CapPopoverTree.defaultProps = {
-  trigger: 'click',
-  placement: 'rightBottom',
+  trigger: "click",
+  placement: "rightBottom",
   showIcon: true,
   blockNode: true,
   defaultExpandAll: false,
   isLoadingData: false,
-  switcherIcon: /*#__PURE__*/_jsx(ExpandIcon, {
-    size: "m",
-    type: "chevron-down"
-  }),
+  switcherIcon: /* @__PURE__ */ jsx(ExpandIcon, { size: "m", type: "chevron-down" }),
   renderOnKeyChange: false
 };
 CapPopoverTree.propTypes = {
@@ -281,6 +215,8 @@ CapPopoverTree.propTypes = {
   emptyDataMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   renderOnKeyChange: PropTypes.bool
 };
-export default LocaleHoc(CapPopoverTree, {
-  key: 'CapPopoverTree'
-});
+const index = LocaleHoc(CapPopoverTree, { key: "CapPopoverTree" });
+export {
+  CapPopoverTree,
+  index as default
+};

package/CapPopoverTree/style.js

@@ -1,13 +1,94 @@
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-function _taggedTemplateLiteralLoose(e, t) { return t || (t = e.slice(0)), e.raw = t, e; }
-import styled from 'styled-components';
-import CapColumn from "../CapColumn";
-import CapHeading from "../CapHeading";
-import CapIcon from "../CapIcon";
-import CapTree from "../CapTree";
-import { FONT_COLOR_05, CAP_G08, CAP_WHITE, CAP_PALE_GREY, BG_01 } from "../styles/_variables";
-export var ExpandIcon = styled(CapIcon)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  margin-top: 10px;\n  svg {\n    height: 24px;\n    width: 24px;\n  }\n"])));
-export var StyledIcon = styled(CapIcon)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  padding: 4px;\n  border-radius: 8px;\n  background: ", ";\n"])), CAP_G08);
-export var StyledCapHeading = styled(CapHeading)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  display: inline;\n  margin-left: 4px;\n  type: h5;\n"])));
-export var StyledCapColumn = styled(CapColumn)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  display: inline;\n"])));
-export var StyledCapTree = styled(CapTree)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  &.ant-tree.cap-tree-v2 {\n    padding: 3px 0 3px 16px;\n    min-height: 124px;\n    li {\n      padding: 0;\n    }\n    .ant-tree-node-content-wrapper {\n      height: 40px;\n      padding: 9px 0 11px 4px;\n      :hover {\n        background-color: ", ";\n        margin-left: -40px;\n        padding-left: 44px;\n        width: 324px;\n      }\n    }\n    .ant-tree-node-selected {\n      .tree-node-title {\n        color: #1d61ee;\n      }\n    }\n\n    .ant-tree-node-content-wrapper-open {\n      background: ", ";\n      border-left: ", ";\n      margin-left: -40px;\n      padding-left: 44px;\n      width: 324px;\n      :hover {\n        background-color: ", ";\n      }\n      .tree-node-title {\n        color: ", ";\n      }\n      .tree-node-icon {\n        background: ", ";\n        color: ", ";\n      }\n    }\n    .ant-tree-child-tree {\n      .ant-tree-node-content-wrapper {\n        position: relative;\n        margin-left: 16px;\n        padding-left: 0;\n        width: 250px;\n      }\n      .ant-tree-node-selected {\n        background-color: ", ";\n      }\n      .ant-tree-title {\n        margin-left: -12px;\n        .info-icon {\n          position: absolute;\n          right: 25px;\n          top: 14px;\n        }\n      }\n    }\n  }\n"])), BG_01, props => (props == null ? void 0 : props.isExpanded) && CAP_PALE_GREY, props => (props == null ? void 0 : props.isExpanded) && "2px solid " + FONT_COLOR_05, props => (props == null ? void 0 : props.isExpanded) && CAP_PALE_GREY, props => props.isExpanded && '#1d61ee', props => props != null && props.isExpanded ? FONT_COLOR_05 : CAP_G08, props => (props == null ? void 0 : props.isExpanded) && CAP_WHITE, CAP_PALE_GREY);
+import styled from "styled-components";
+import CapColumn from "../CapColumn/index.js";
+import CapHeadingWithStatic from "../CapHeading/index.js";
+import CapIcon from "../CapIcon/index.js";
+import CapTree from "../CapTree/index.js";
+import { BG_01, CAP_PALE_GREY, FONT_COLOR_05, CAP_G08, CAP_WHITE } from "../styles/_variables.js";
+const ExpandIcon = styled(CapIcon)`
+  margin-top: 10px;
+  svg {
+    height: 24px;
+    width: 24px;
+  }
+`;
+const StyledIcon = styled(CapIcon)`
+  padding: 4px;
+  border-radius: 8px;
+  background: ${CAP_G08};
+`;
+const StyledCapHeading = styled(CapHeadingWithStatic)`
+  display: inline;
+  margin-left: 4px;
+  type: h5;
+`;
+const StyledCapColumn = styled(CapColumn)`
+  display: inline;
+`;
+const StyledCapTree = styled(CapTree)`
+  &.ant-tree.cap-tree-v2 {
+    padding: 3px 0 3px 16px;
+    min-height: 124px;
+    li {
+      padding: 0;
+    }
+    .ant-tree-node-content-wrapper {
+      height: 40px;
+      padding: 9px 0 11px 4px;
+      :hover {
+        background-color: ${BG_01};
+        margin-left: -40px;
+        padding-left: 44px;
+        width: 324px;
+      }
+    }
+    .ant-tree-node-selected {
+      .tree-node-title {
+        color: #1d61ee;
+      }
+    }
+
+    .ant-tree-node-content-wrapper-open {
+      background: ${(props) => (props == null ? void 0 : props.isExpanded) && CAP_PALE_GREY};
+      border-left: ${(props) => (props == null ? void 0 : props.isExpanded) && `2px solid ${FONT_COLOR_05}`};
+      margin-left: -40px;
+      padding-left: 44px;
+      width: 324px;
+      :hover {
+        background-color: ${(props) => (props == null ? void 0 : props.isExpanded) && CAP_PALE_GREY};
+      }
+      .tree-node-title {
+        color: ${(props) => props.isExpanded && "#1d61ee"};
+      }
+      .tree-node-icon {
+        background: ${(props) => (props == null ? void 0 : props.isExpanded) ? FONT_COLOR_05 : CAP_G08};
+        color: ${(props) => (props == null ? void 0 : props.isExpanded) && CAP_WHITE};
+      }
+    }
+    .ant-tree-child-tree {
+      .ant-tree-node-content-wrapper {
+        position: relative;
+        margin-left: 16px;
+        padding-left: 0;
+        width: 250px;
+      }
+      .ant-tree-node-selected {
+        background-color: ${CAP_PALE_GREY};
+      }
+      .ant-tree-title {
+        margin-left: -12px;
+        .info-icon {
+          position: absolute;
+          right: 25px;
+          top: 14px;
+        }
+      }
+    }
+  }
+`;
+export {
+  ExpandIcon,
+  StyledCapColumn,
+  StyledCapHeading,
+  StyledCapTree,
+  StyledIcon
+};

package/CapPopoverTree/styles.css

@@ -0,0 +1,36 @@
+/* Color Palette */
+/* Fonts */
+/* Backward Compatibility Aliases */
+/* Component Heights */
+/* Border Radius */
+/* Border Width */
+/* Transition */
+/* Timezones Footer */
+.ant-popover.cap-popover-tree-v2 .ant-popover-content {
+  width: 334px;
+  padding: 0;
+  min-height: 176px;
+}
+.ant-popover.cap-popover-tree-v2 .divider {
+  border-top: 1px solid #dfe2e7;
+}
+.ant-popover.cap-popover-tree-v2 .empty-data-text {
+  text-align: center;
+  margin-top: 12px;
+  padding: 10px 0;
+}
+.ant-popover.cap-popover-tree-v2 .ant-popover-inner-content {
+  padding: 0 0 12px 0;
+}
+.ant-popover.cap-popover-tree-v2 .search-tree-node .ant-input-affix-wrapper {
+  width: 300px;
+  margin-left: 12px;
+}
+.ant-popover.cap-popover-tree-v2 .search-tree-node .ant-input-affix-wrapper .ant-input.ant-input-lg {
+  border: none !important;
+  border-radius: 0 !important;
+  margin-left: 8px;
+}
+.add-condition-tooltip .ant-tooltip-inner {
+  width: 386px;
+}

package/CapPopoverTree/styles.scss

@@ -2,29 +2,29 @@
 
 $popoverTree: cap-popover-tree-v2;
 
-.ant-popover_cg6LQ.#{$popoverTree} {
-    .ant-popover-content_HySaZ {
+.ant-popover.#{$popoverTree} {
+    .ant-popover-content {
         width: 334px;
         padding: 0;
         min-height: 176px;
     }
 
-    .divider_XMCY4 {
+    .divider {
         border-top: 1px solid $CAP_G07;
     }
-    .empty-data-text_eJXev {
+    .empty-data-text {
         text-align: center;
         margin-top: 12px;
         padding: 10px 0;
     }
-    .ant-popover-inner-content_Sq3Jj {
+    .ant-popover-inner-content {
         padding: 0 0 12px 0;
     }
-    .search-tree-node_0VNkJ {
-        .ant-input-affix-wrapper_ZqmGT {
+    .search-tree-node {
+        .ant-input-affix-wrapper {
             width: 300px;
             margin-left: 12px;
-            .ant-input_Jf8-4.ant-input-lg_t2ln1 {
+            .ant-input.ant-input-lg {
                 border: none !important;
                 border-radius: 0 !important;
                 margin-left: 8px;
@@ -32,8 +32,8 @@ $popoverTree: cap-popover-tree-v2;
         }
     }
 }
-.add-condition-tooltip_ehv5w {
-    .ant-tooltip-inner_-eVfG {
+.add-condition-tooltip {
+    .ant-tooltip-inner {
         width: 386px;
       }
 }

package/CapProductSelection/constants.js

@@ -1,8 +1,18 @@
-export var LINE_ITEM = 'LINE_ITEM';
-export var BRAND = 'BRAND';
-export var CATEGORY = 'CATEGORY';
-export var PRODUCT_ATTRIBUTE = 'PRODUCT_ATTRIBUTE';
-export var ATTRIBUTE = 'ATTRIBUTE';
-export var SKU = 'SKU';
-export var SKU_UPLOAD = 'SKU_UPLOAD';
-export var SKU_SELECT = 'SKU_SELECT';
+const LINE_ITEM = "LINE_ITEM";
+const BRAND = "BRAND";
+const CATEGORY = "CATEGORY";
+const PRODUCT_ATTRIBUTE = "PRODUCT_ATTRIBUTE";
+const ATTRIBUTE = "ATTRIBUTE";
+const SKU = "SKU";
+const SKU_UPLOAD = "SKU_UPLOAD";
+const SKU_SELECT = "SKU_SELECT";
+export {
+  ATTRIBUTE,
+  BRAND,
+  CATEGORY,
+  LINE_ITEM,
+  PRODUCT_ATTRIBUTE,
+  SKU,
+  SKU_SELECT,
+  SKU_UPLOAD
+};