@capillarytech/blaze-ui 6.1.0 → 6.1.2

package/CapProductSelection/index.js

@@ -1,9 +1,10 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { Checkbox, Tree, Tooltip } from "antd";
+import { useState, useEffect, createElement } from "react";
+import { Checkbox, Tree, Tooltip } from "antd-v5";
 import classNames from "classnames";
-import PropTypes from "prop-types";
-import { useState, useEffect } from "react";
+import { injectIntl } from "react-intl";
 import CapButton from "../CapButton/index.js";
+import CapCard from "../CapCard/index.js";
 import CapHeadingWithStatic from "../CapHeading/index.js";
 import CapIcon from "../CapIcon/index.js";
 import CapPopover from "../CapPopover/index.js";
@@ -11,12 +12,13 @@ import CapRadio from "../CapRadio/index.js";
 import CapRow from "../CapRow/index.js";
 import CapTooltip from "../CapTooltip/index.js";
 import CapTree from "../CapTree/index.js";
-import LocaleHoc from "../LocaleHoc/index.js";
 import { CAP_G06 } from "../styles/_variables.js";
 import { SKU, ATTRIBUTE, BRAND, CATEGORY, PRODUCT_ATTRIBUTE, SKU_UPLOAD, SKU_SELECT, LINE_ITEM } from "./constants.js";
-import { StyledCapCard } from "./style.js";
+import messages from "./messages.js";
+import styles from "./styles.module.scss.js";
 const clsPrefix = "cap-product-selection-v2";
 const CapProductSelection = ({
+  intl: { formatMessage },
   treeData: treeDataProps,
   target,
   trigger = "click",
@@ -26,25 +28,6 @@ const CapProductSelection = ({
   handleSelect = () => {
   },
   isProductMandatory,
-  /**LocaleHoc messages */
-  lineItem,
-  selectAttribute,
-  brand,
-  brandInfo,
-  category,
-  categoryInfo,
-  product,
-  productInfo,
-  SKU: SKU$1,
-  uploadSKU,
-  uploadSKUInfo,
-  comingSoon,
-  changeSelection,
-  description,
-  okText,
-  cancelText,
-  selectValues,
-  atleast1Attribute,
   ...rest
 }) => {
   const [showPopover, setShowPopover] = useState(false);
@@ -87,11 +70,17 @@ const CapProductSelection = ({
       if (attribute === ATTRIBUTE) handleSelect(checkedKeys);
       if (attribute === SKU) handleSelect([SKU]);
     }
-  }, [showPopover, isBrandSelected, isCategorySelected, isProductSelected, attribute]);
+  }, [
+    showPopover,
+    isBrandSelected,
+    isCategorySelected,
+    isProductSelected,
+    attribute,
+    handleSelect
+  ]);
   const handleCheckboxSelect = (event) => {
-    const {
-      target: { value }
-    } = event;
+    var _a;
+    const value = (_a = event.target) == null ? void 0 : _a.value;
     if (attribute && attribute !== ATTRIBUTE) {
       setShowModal(true);
       setIntermediateValue(ATTRIBUTE);
@@ -115,7 +104,7 @@ const CapProductSelection = ({
     setShowModal(false);
     setAttribute(intermediateValue);
     setIntermediateValue(null);
-    if (intermediateValue === SKU$1) {
+    if (intermediateValue === SKU) {
       setIsBrandSelected(false);
       setIsCategorySelected(false);
       setIsProductSelected(false);
@@ -142,12 +131,14 @@ const CapProductSelection = ({
     setIntermediateValue(null);
   };
   const handleRadioOnChange = (event) => {
+    var _a;
+    const value = (_a = event.target) == null ? void 0 : _a.value;
     if (attribute) {
       setShowModal(true);
-      setIntermediateValue(event.target.value);
+      setIntermediateValue(value);
       return;
     }
-    setAttribute(event.target.value);
+    setAttribute(value);
   };
   const checkedMap = {
     [BRAND]: isBrandSelected,
@@ -155,9 +146,9 @@ const CapProductSelection = ({
     [PRODUCT_ATTRIBUTE]: isProductSelected
   };
   const titleMap = {
-    [BRAND]: brand,
-    [CATEGORY]: category,
-    [PRODUCT_ATTRIBUTE]: product
+    [BRAND]: formatMessage(messages.brand),
+    [CATEGORY]: formatMessage(messages.category),
+    [PRODUCT_ATTRIBUTE]: formatMessage(messages.product)
   };
   const checkIfDisabled = (type) => {
     if (isProductMandatory) {
@@ -176,7 +167,7 @@ const CapProductSelection = ({
   };
   const getCheckboxComponent = (type) => {
     if (checkIfDisabled(type)) {
-      return /* @__PURE__ */ jsx(CapTooltip, { title: atleast1Attribute, children: /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsx(CapTooltip, { title: formatMessage(messages.atleast1Attribute), children: /* @__PURE__ */ jsx(
         Checkbox,
         {
           checked: checkedMap[type],
@@ -191,7 +182,7 @@ const CapProductSelection = ({
   };
   const defaultTreeData = [
     {
-      title: lineItem,
+      title: formatMessage(messages.lineItem),
       key: LINE_ITEM,
       children: [
         {
@@ -201,7 +192,7 @@ const CapProductSelection = ({
               checked: attribute === ATTRIBUTE,
               value: ATTRIBUTE,
               onChange: handleRadioOnChange,
-              children: selectAttribute
+              children: formatMessage(messages.selectAttribute)
             }
           ),
           key: ATTRIBUTE,
@@ -209,17 +200,17 @@ const CapProductSelection = ({
             {
               title: getCheckboxComponent(BRAND),
               key: BRAND,
-              info: brandInfo
+              info: formatMessage(messages.brandInfo)
             },
             {
               title: getCheckboxComponent(CATEGORY),
               key: CATEGORY,
-              info: categoryInfo
+              info: formatMessage(messages.categoryInfo)
             },
             {
               title: getCheckboxComponent(PRODUCT_ATTRIBUTE),
               key: PRODUCT_ATTRIBUTE,
-              info: productInfo
+              info: formatMessage(messages.productInfo)
             }
           ]
         },
@@ -230,7 +221,7 @@ const CapProductSelection = ({
               checked: attribute === SKU,
               value: SKU,
               onChange: handleRadioOnChange,
-              children: SKU$1
+              children: formatMessage(messages.SKU)
             }
           ),
           key: SKU,
@@ -242,16 +233,16 @@ const CapProductSelection = ({
                   onChange: handleRadioOnChange,
                   value: SKU,
                   checked: attribute === "SKU",
-                  children: uploadSKU
+                  children: formatMessage(messages.uploadSKU)
                 }
               ),
               key: SKU_UPLOAD,
-              info: uploadSKUInfo
+              info: formatMessage(messages.uploadSKUInfo)
             },
             {
-              title: /* @__PURE__ */ jsx(CapRadio, { disabled: true, children: selectValues }),
+              title: /* @__PURE__ */ jsx(CapRadio, { disabled: true, children: formatMessage(messages.selectValues) }),
               key: SKU_SELECT,
-              info: comingSoon,
+              info: formatMessage(messages.comingSoon),
               isHover: true
             }
           ]
@@ -260,7 +251,9 @@ const CapProductSelection = ({
     }
   ];
   const getTreeData = (treeData) => {
-    const finalTreeData = treeData == null ? void 0 : treeData.reduce((result, data) => {
+    const result = [];
+    if (!treeData) return result;
+    treeData.forEach((data) => {
       const { title, key, children = [], checkable, info, isHover } = data;
       const hoverProps = {};
       const tooltipProp = {};
@@ -280,33 +273,32 @@ const CapProductSelection = ({
           checkable
         };
         result.push(
-          /* @__PURE__ */ jsx(Tree.TreeNode, { ...treeNodeProps, children: (children == null ? void 0 : children.length) && getTreeData(children) })
+          /* @__PURE__ */ createElement(Tree.TreeNode, { ...treeNodeProps, key }, (children == null ? void 0 : children.length) ? getTreeData(children) : null)
         );
       }
-      return result;
-    }, []);
-    return finalTreeData;
+    });
+    return result;
   };
   return /* @__PURE__ */ jsx(
     CapPopover,
     {
-      visible: showPopover,
-      onVisibleChange: setShowPopover,
+      open: showPopover,
+      onOpenChange: setShowPopover,
       trigger,
       placement,
-      overlayClassName: classNames(`${clsPrefix}`, overlayClassName, { greyed: showModal }),
+      overlayClassName: classNames(clsPrefix, overlayClassName, { greyed: showModal }),
       ...rest,
       content: /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(CapTree, { blockNode: true, selectable: false, defaultExpandAll: true, disabled: showModal, ...rest, children: getTreeData(treeDataProps || defaultTreeData) }),
-        showModal && /* @__PURE__ */ jsxs(StyledCapCard, { children: [
-          /* @__PURE__ */ jsxs(CapRow, { type: "flex", align: "center", justify: "space-between", className: "card-title", children: [
-            /* @__PURE__ */ jsx(CapHeadingWithStatic, { type: "h3", children: changeSelection }),
+        showModal && /* @__PURE__ */ jsxs(CapCard, { className: styles.changeSelectionCard, children: [
+          /* @__PURE__ */ jsxs(CapRow, { type: "flex", align: "middle", justify: "space-between", className: "card-title", children: [
+            /* @__PURE__ */ jsx(CapHeadingWithStatic, { type: "h3", children: formatMessage(messages.changeSelection) }),
             /* @__PURE__ */ jsx(CapIcon, { type: "close", size: "s", style: { paddingTop: "4px" } })
           ] }),
-          /* @__PURE__ */ jsx(CapHeadingWithStatic, { type: "h5", className: "card-description", children: description }),
+          /* @__PURE__ */ jsx(CapHeadingWithStatic, { type: "h5", className: "card-description", children: formatMessage(messages.description) }),
           /* @__PURE__ */ jsxs(CapRow, { className: "card-buttons", children: [
-            /* @__PURE__ */ jsx(CapButton, { onClick: handleOk, className: "card-buttons-primary", type: "primary", children: okText }),
-            /* @__PURE__ */ jsx(CapButton, { onClick: handleCancel, type: "secondary", children: cancelText })
+            /* @__PURE__ */ jsx(CapButton, { onClick: handleOk, className: "card-buttons-primary", type: "primary", children: formatMessage(messages.okText) }),
+            /* @__PURE__ */ jsx(CapButton, { onClick: handleCancel, type: "secondary", children: formatMessage(messages.cancelText) })
           ] })
         ] })
       ] }),
@@ -314,36 +306,7 @@ const CapProductSelection = ({
     }
   );
 };
-CapProductSelection.propTypes = {
-  target: PropTypes.node,
-  treeData: PropTypes.array,
-  trigger: PropTypes.string,
-  placement: PropTypes.string,
-  overlayClassName: PropTypes.string,
-  handleSelect: PropTypes.func,
-  selectedAttributes: PropTypes.array,
-  isProductMandatory: PropTypes.bool,
-  /**LocaleHoc messages */
-  lineItem: PropTypes.string,
-  selectAttribute: PropTypes.string,
-  brand: PropTypes.string,
-  brandInfo: PropTypes.string,
-  category: PropTypes.string,
-  categoryInfo: PropTypes.string,
-  product: PropTypes.string,
-  productInfo: PropTypes.string,
-  SKU: PropTypes.string,
-  uploadSKU: PropTypes.string,
-  uploadSKUInfo: PropTypes.string,
-  comingSoon: PropTypes.string,
-  changeSelection: PropTypes.string,
-  description: PropTypes.string,
-  okText: PropTypes.string,
-  cancelText: PropTypes.string,
-  selectValues: PropTypes.string,
-  atleast1Attribute: PropTypes.string
-};
-const CapProductSelection$1 = LocaleHoc(CapProductSelection, { key: "CapProductSelection" });
+const CapProductSelection$1 = injectIntl(CapProductSelection);
 export {
   CapProductSelection$1 as default
 };

package/CapProductSelection/messages.d.ts

@@ -0,0 +1,76 @@
+declare const _default: {
+    lineItem: {
+        id: string;
+        defaultMessage: string;
+    };
+    selectAttribute: {
+        id: string;
+        defaultMessage: string;
+    };
+    brand: {
+        id: string;
+        defaultMessage: string;
+    };
+    brandInfo: {
+        id: string;
+        defaultMessage: string;
+    };
+    category: {
+        id: string;
+        defaultMessage: string;
+    };
+    categoryInfo: {
+        id: string;
+        defaultMessage: string;
+    };
+    product: {
+        id: string;
+        defaultMessage: string;
+    };
+    productInfo: {
+        id: string;
+        defaultMessage: string;
+    };
+    SKU: {
+        id: string;
+        defaultMessage: string;
+    };
+    uploadSKU: {
+        id: string;
+        defaultMessage: string;
+    };
+    uploadSKUInfo: {
+        id: string;
+        defaultMessage: string;
+    };
+    changeSelection: {
+        id: string;
+        defaultMessage: string;
+    };
+    description: {
+        id: string;
+        defaultMessage: string;
+    };
+    okText: {
+        id: string;
+        defaultMessage: string;
+    };
+    cancelText: {
+        id: string;
+        defaultMessage: string;
+    };
+    comingSoon: {
+        id: string;
+        defaultMessage: string;
+    };
+    selectValues: {
+        id: string;
+        defaultMessage: string;
+    };
+    atleast1Attribute: {
+        id: string;
+        defaultMessage: string;
+    };
+};
+export default _default;
+//# sourceMappingURL=messages.d.ts.map

package/CapProductSelection/messages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"messages.d.ts","sourceRoot":"","sources":["../../components/CapProductSelection/messages.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,wBA0EG"}

package/CapProductSelection/messages.js

@@ -0,0 +1,79 @@
+import { defineMessages } from "react-intl";
+const scope = "blaze.components.CapProductSelection";
+const messages = defineMessages({
+  lineItem: {
+    id: `${scope}.lineItem`,
+    defaultMessage: "Line items"
+  },
+  selectAttribute: {
+    id: `${scope}.selectAttribute`,
+    defaultMessage: "Select Attribute"
+  },
+  brand: {
+    id: `${scope}.brand`,
+    defaultMessage: "Brand"
+  },
+  brandInfo: {
+    id: `${scope}.brandInfo`,
+    defaultMessage: "Brand"
+  },
+  category: {
+    id: `${scope}.category`,
+    defaultMessage: "Category"
+  },
+  categoryInfo: {
+    id: `${scope}.categoryInfo`,
+    defaultMessage: "Category"
+  },
+  product: {
+    id: `${scope}.product`,
+    defaultMessage: "Product"
+  },
+  productInfo: {
+    id: `${scope}.productInfo`,
+    defaultMessage: "Product"
+  },
+  SKU: {
+    id: `${scope}.SKU`,
+    defaultMessage: "SKU"
+  },
+  uploadSKU: {
+    id: `${scope}.uploadSKU`,
+    defaultMessage: "Upload SKU"
+  },
+  uploadSKUInfo: {
+    id: `${scope}.uploadSKUInfo`,
+    defaultMessage: "Upload SKU"
+  },
+  changeSelection: {
+    id: `${scope}.changeSelection`,
+    defaultMessage: "Change the selection"
+  },
+  description: {
+    id: `${scope}.description`,
+    defaultMessage: "Changing the attribute of additional condition will result in lose of previously defined additional condition"
+  },
+  okText: {
+    id: `${scope}.okText`,
+    defaultMessage: "Yes, change"
+  },
+  cancelText: {
+    id: `${scope}.cancelText`,
+    defaultMessage: "Cancel"
+  },
+  comingSoon: {
+    id: `${scope}.comingSoon`,
+    defaultMessage: "Coming soon"
+  },
+  selectValues: {
+    id: `${scope}.selectValues`,
+    defaultMessage: "Select value(s)"
+  },
+  atleast1Attribute: {
+    id: `${scope}.atleast1Attribute`,
+    defaultMessage: "At least 1 attribute is required"
+  }
+});
+export {
+  messages as default
+};

package/CapProductSelection/styles.css

@@ -0,0 +1,81 @@
+/* Color Palette */
+/* Fonts */
+/* Backward Compatibility Aliases */
+/* Component Heights */
+/* Border Radius */
+/* Border Width */
+/* Transition */
+/* Timezones Footer */
+.changeSelectionCard {
+  position: absolute;
+  top: 2.857rem;
+  left: 0.857rem;
+  width: 21.428rem;
+}
+.changeSelectionCard .card-title {
+  font-size: 1rem;
+  line-height: 1.714rem;
+  padding-bottom: 0.857rem;
+  padding-top: 0.571rem;
+}
+.changeSelectionCard .card-description {
+  font-size: 0.857rem;
+}
+.changeSelectionCard .card-buttons {
+  padding-top: 1.142rem;
+}
+.changeSelectionCard .card-buttons-primary {
+  margin-right: 0.857rem;
+}
+.ant-popover.cap-product-selection-v2.greyed .ant-popover-arrow {
+  border-top-color: #f4f5f7;
+  border-left-color: #f4f5f7;
+}
+.ant-popover.cap-product-selection-v2.greyed .ant-popover-container {
+  background-color: #f4f5f7;
+}
+.ant-popover.cap-product-selection-v2 .ant-popover-container {
+  padding: 0;
+}
+.ant-popover.cap-product-selection-v2 .ant-tree {
+  background-color: inherit;
+}
+.ant-popover.cap-product-selection-v2 .ant-tree .ant-tree-list {
+  padding: 0.5rem 0;
+}
+.ant-popover.cap-product-selection-v2 .ant-tree li ul {
+  padding-left: 2.143rem;
+}
+.ant-popover.cap-product-selection-v2 .ant-popover-content {
+  width: 23.143rem;
+  padding: 0;
+  min-height: 12.571rem;
+  font-size: 1rem;
+  line-height: 1.428rem;
+  color: #091e42;
+}
+.ant-popover.cap-product-selection-v2 .divider {
+  border-top: 0.071rem solid #dfe2e7;
+}
+.ant-popover.cap-product-selection-v2 .empty-data-text {
+  text-align: center;
+  margin-top: 0.857rem;
+  padding: 0.714rem 0;
+}
+.ant-popover.cap-product-selection-v2 .ant-popover-content {
+  padding: 0 0.285rem 0.857rem 0.285rem;
+}
+.ant-popover.cap-product-selection-v2 .ant-tree-child-tree > li:first-child {
+  margin-top: 0.285rem;
+}
+.ant-popover.cap-product-selection-v2 .ant-tree-treenode-switcher-open, .ant-popover.cap-product-selection-v2 .ant-tree-treenode-switcher-close {
+  position: relative;
+}
+.ant-popover.cap-product-selection-v2 .ant-tree-treenode-switcher-open .info-tooltip, .ant-popover.cap-product-selection-v2 .ant-tree-treenode-switcher-close .info-tooltip {
+  position: absolute;
+  right: 0.714rem;
+  top: 0.428rem;
+}
+.ant-popover.cap-product-selection-v2 .tree-node-title .cap-radio-v2 .ant-radio-wrapper .title {
+  font-weight: normal !important;
+}

package/CapProductSelection/styles.module.scss.js

@@ -0,0 +1,8 @@
+import './styles.css';const changeSelectionCard = "changeSelectionCard";
+const styles = {
+  changeSelectionCard
+};
+export {
+  changeSelectionCard,
+  styles as default
+};

package/CapProductSelection/styles.scss

@@ -2,55 +2,97 @@
 
 $popoverTree: cap-product-selection-v2;
 
-.ant-popover.#{$popoverTree} {
-  &.greyed {
-    .ant-popover-arrow {
-      border-top-color: $CAP_G09;
-      border-left-color:  $CAP_G09;
-    }
-    .ant-popover-inner {
-      background-color: $CAP_G09;
-    }
+// Change-selection modal card (replaces StyledCapCard from style.ts)
+.changeSelectionCard {
+  position: absolute;
+  top: $CAP_SPACE_40;
+  left: $CAP_SPACE_12;
+  width: 21.428rem; // 300px
+  .card-title {
+    font-size: $FONT_SIZE_M;
+    line-height: $CAP_SPACE_24;
+    padding-bottom: $CAP_SPACE_12;
+    padding-top: $CAP_SPACE_08;
+  }
+  .card-description {
+    font-size: $FONT_SIZE_S;
   }
-  .ant-tree li ul {
-    padding-left: 30px;
+  .card-buttons {
+    padding-top: $CAP_SPACE_16;
   }
-  .ant-popover-content {
-      width: 324px;
+  .card-buttons-primary {
+    margin-right: $CAP_SPACE_12;
+  }
+}
+
+// OVERRIDE: CapProductSelection uses a single global class for the popover overlay (cap-product-selection-v2).
+// Antd Popover does not expose tokens for content width, inner padding, or greyed state; layout is component-specific.
+:global {
+  .ant-popover.#{$popoverTree} {
+    &.greyed {
+      .ant-popover-arrow {
+        border-top-color: $CAP_G09;
+        border-left-color: $CAP_G09;
+      }
+      .ant-popover-container {
+        background-color: $CAP_G09;
+      }
+    }
+    .ant-popover-container {
       padding: 0;
-      min-height: 176px;
-      font-size: 14px;
-      line-height: 20px;
+    }
+    // OVERRIDE: Tree indentation not exposed as design token
+    .ant-tree {
+      background-color: inherit;
+      .ant-tree-list {
+        padding: 0.5rem 0; // 7px
+      }
+    }
+    .ant-tree li ul {
+      padding-left: 2.143rem; // 30px
+    }
+    // OVERRIDE: Content dimensions and typography are component-specific; no token for popover content width
+    .ant-popover-content {
+      width: 23.143rem; // 324px
+      padding: 0;
+      min-height: 12.571rem; // 176px
+      font-size: $FONT_SIZE_M;
+      line-height: $CAP_SPACE_20;
       color: $CAP_G01;
-  }
+    }
 
-  .divider {
-      border-top: 1px solid $CAP_G07;
-  }
-  .empty-data-text {
+    .divider {
+      border-top: $border-width-1 solid $CAP_G07;
+    }
+    .empty-data-text {
       text-align: center;
-      margin-top: 12px;
-      padding: 10px 0;
-  }
-  .ant-popover-inner-content {
-      padding: 0 4px 12px 4px;
-  }
+      margin-top: $CAP_SPACE_12;
+      padding: 0.714rem 0; // 10px
+    }
+    // OVERRIDE: Inner content padding is layout-specific
+    .ant-popover-content {
+      padding: 0 $CAP_SPACE_04 $CAP_SPACE_12 $CAP_SPACE_04;
+    }
 
-  .ant-tree-child-tree > li:first-child {
-    margin-top: 4px;
-  }
+    // OVERRIDE: Tree node spacing not tokenized
+    .ant-tree-child-tree > li:first-child {
+      margin-top: $CAP_SPACE_04;
+    }
 
-  .ant-tree-treenode-switcher-open{
-    position: relative;
-    .info-tooltip {
-      position: absolute;
-      right: 10px;
-      top: 6px;
+    // OVERRIDE: Info tooltip position in tree node is custom layout
+    .ant-tree-treenode-switcher-open, .ant-tree-treenode-switcher-close {
+      position: relative;
+      .info-tooltip {
+        position: absolute;
+        right: 0.714rem; // 10px
+        top: $CAP_SPACE_06;
+      }
     }
-  }
-  .tree-node-title {
-    .cap-radio-v2 .ant-radio-wrapper .title {
+    // OVERRIDE: Radio title font-weight in tree context; no token for nested radio in tree
+    .tree-node-title {
+      .cap-radio-v2 .ant-radio-wrapper .title {
         font-weight: normal !important;
+      }
     }
   }
-}
+}