@capillarytech/blaze-ui 6.1.1 → 6.1.2

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;
+      }
     }
   }
-}
+}

package/CapProductSelection/tests/CapProductSelection.mockData.d.ts

@@ -0,0 +1,36 @@
+import type { CapProductSelectionProps } from '../types';
+export declare const mockHandleSelect: jest.Mock<any, any, any>;
+export declare const defaultLocale: {
+    lineItem: string;
+    selectAttribute: string;
+    brand: string;
+    brandInfo: string;
+    category: string;
+    categoryInfo: string;
+    product: string;
+    productInfo: string;
+    SKU: string;
+    uploadSKU: string;
+    uploadSKUInfo: string;
+    changeSelection: string;
+    description: string;
+    okText: string;
+    cancelText: string;
+    comingSoon: string;
+    selectValues: string;
+    atleast1Attribute: string;
+};
+export declare const defaultProps: CapProductSelectionProps;
+export declare const propsWithSelectedBrand: CapProductSelectionProps;
+export declare const propsWithSelectedSKU: CapProductSelectionProps;
+export declare const propsWithProductMandatory: CapProductSelectionProps;
+export declare const customTreeData: {
+    key: string;
+    title: string;
+    children: {
+        key: string;
+        title: string;
+    }[];
+}[];
+export declare const TRIGGER_TEXT = "Open product selection";
+//# sourceMappingURL=CapProductSelection.mockData.d.ts.map

package/CapProductSelection/tests/CapProductSelection.mockData.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CapProductSelection.mockData.d.ts","sourceRoot":"","sources":["../../../components/CapProductSelection/tests/CapProductSelection.mockData.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,UAAU,CAAC;AAEzD,eAAO,MAAM,gBAAgB,0BAAY,CAAC;AAE1C,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;CAoBzB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,wBAI1B,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,wBAGpC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,wBAGlC,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,wBAIvC,CAAC;AAEF,eAAO,MAAM,cAAc;;;;;;;GAM1B,CAAC;AAEF,eAAO,MAAM,YAAY,2BAA2B,CAAC"}

package/CapProductSelection/types.d.ts

@@ -0,0 +1,34 @@
+import type React from 'react';
+/**
+ * Tree node item for custom treeData.
+ * Used when building tree structure for CapProductSelection.
+ */
+export interface TreeNodeItem {
+    title?: React.ReactNode;
+    key: string;
+    children?: TreeNodeItem[];
+    checkable?: boolean;
+    info?: string;
+    isHover?: boolean;
+}
+export interface CapProductSelectionProps {
+    /** Trigger element (e.g. button or link) that opens the popover */
+    target?: React.ReactNode;
+    /** Custom tree data; when not provided, default Line Item / Attribute / SKU tree is used */
+    treeData?: TreeNodeItem[];
+    /** Popover trigger behavior */
+    trigger?: 'click' | 'hover';
+    /** Popover placement relative to target */
+    placement?: string;
+    /** Additional class name for the popover overlay */
+    overlayClassName?: string;
+    /** Called when popover closes with the current selection (array of attribute keys) */
+    handleSelect?: (selectedKeys: string[]) => void;
+    /** Controlled selected attribute keys (e.g. BRAND, CATEGORY, PRODUCT_ATTRIBUTE, SKU) */
+    selectedAttributes?: string[];
+    /** When true, at least one of Brand/Category/Product must be selected; disables unchecking the last one */
+    isProductMandatory?: boolean;
+    /** Additional props passed to CapPopover (e.g. getPopupContainer) */
+    [key: string]: unknown;
+}
+//# sourceMappingURL=types.d.ts.map

package/CapProductSelection/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../components/CapProductSelection/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;GAGG;AACH,MAAM,WAAW,YAAY;IAC3B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,YAAY,EAAE,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,wBAAwB;IACvC,mEAAmE;IACnE,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,4FAA4F;IAC5F,QAAQ,CAAC,EAAE,YAAY,EAAE,CAAC;IAC1B,+BAA+B;IAC/B,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAC5B,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oDAAoD;IACpD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,sFAAsF;IACtF,YAAY,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAChD,wFAAwF;IACxF,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC9B,2GAA2G;IAC3G,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B,qEAAqE;IACrE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB"}

package/CapRadioCard/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../components/CapRadioCard/index.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAKH,OAAO,KAAmB,MAAM,OAAO,CAAC;AAQxC,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAC;AAKvF,cAAM,YAAa,SAAQ,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC;IAC3D,YAAY,GAAI,GAAG,uBAAuB,UAExC;IAEF,cAAc,GAAI,MAAM,gBAAgB,6CAyEtC;IAEF,MAAM;CAmCP;AAED,eAAe,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../components/CapRadioCard/index.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAKH,OAAO,KAAmB,MAAM,OAAO,CAAC;AAQxC,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAC;AAKvF,cAAM,YAAa,SAAQ,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC;IAC3D,YAAY,GAAI,GAAG,uBAAuB,UAExC;IAEF,cAAc,GAAI,MAAM,gBAAgB,6CAuGtC;IAEF,MAAM;CAmCP;AAED,eAAe,YAAY,CAAC"}

package/CapRadioCard/index.js

@@ -18,7 +18,22 @@ class CapRadioCard extends React.Component {
       (_b = (_a = this.props).onChange) == null ? void 0 : _b.call(_a, e);
     };
     this.getRadioButton = (pane) => {
-      const { cardHeight, cardWidth, selected, defaultValue, size } = this.props;
+      const {
+        cardHeight,
+        cardWidth,
+        selected,
+        defaultValue,
+        size,
+        radioButtonWrapperClassName,
+        checkedIconClassName,
+        iconWrapperClassName,
+        iconContainerClassName,
+        divIconClassName,
+        contentContainerClassName,
+        headerClassName,
+        contentClassName,
+        infoIconWrapperClassName
+      } = this.props;
       const {
         content,
         title,
@@ -46,34 +61,51 @@ class CapRadioCard extends React.Component {
           disabled,
           style: radioButtonStyle,
           className: classNames(
-            styles["radioButtonWrapper"],
+            styles["radio-button-wrapper"],
             {
-              [styles["customDisableRadioButton"]]: customDisableClass,
-              [styles["disabledWrapper"]]: disabled
+              [styles["custom-disable-radio-button"]]: customDisableClass,
+              [styles["disabled-wrapper"]]: disabled
             },
-            radioCardClassName
+            radioCardClassName,
+            radioButtonWrapperClassName
           ),
           ...restParams,
           children: [
-            !customDisableClass && /* @__PURE__ */ jsx(CapIcon, { type: "check-filled", className: styles["radioCardChecked"] }),
+            !customDisableClass && /* @__PURE__ */ jsx(
+              CapIcon,
+              {
+                type: "check-filled",
+                className: classNames(styles["radio-card-checked"], checkedIconClassName)
+              }
+            ),
             /* @__PURE__ */ jsxs(Card, { variant: "borderless", children: [
-              icon && /* @__PURE__ */ jsx("div", { className: styles["radioCardIcon"], children: /* @__PURE__ */ jsx(
+              icon && /* @__PURE__ */ jsx("div", { className: classNames(styles["radio-card-icon"], iconWrapperClassName), children: /* @__PURE__ */ jsx(
                 "div",
                 {
-                  className: classNames(styles["iconContainer"], {
-                    [styles["greenColor"]]: isChecked && !isSmall && !disabled
-                  }),
-                  children: /* @__PURE__ */ jsx("div", { className: styles["divIcon"], children: icon })
+                  className: classNames(
+                    styles["icon-container"],
+                    {
+                      [styles["green-color"]]: isChecked && !isSmall && !disabled
+                    },
+                    iconContainerClassName
+                  ),
+                  children: /* @__PURE__ */ jsx("div", { className: classNames(styles["div-icon"], divIconClassName), children: icon })
                 }
               ) }),
-              /* @__PURE__ */ jsxs("div", { className: styles["radioCardContentContainer"], children: [
-                /* @__PURE__ */ jsx("div", { className: styles["radioCardHeader"], children: /* @__PURE__ */ jsx(CapHeadingWithStatic, { type: "h4", className: classNames(titleClassName), children: title }) }),
-                /* @__PURE__ */ jsxs("div", { className: styles["radioCardContent"], children: [
-                  " ",
-                  content
-                ] })
-              ] }),
-              infoIconDescription && /* @__PURE__ */ jsx("div", { className: styles["infoIconWrapper"], children: /* @__PURE__ */ jsx(CapTooltipWithInfo, { title: infoIconDescription }) }),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: classNames(
+                    styles["radio-card-content-container"],
+                    contentContainerClassName
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx("div", { className: classNames(styles["radio-card-header"], headerClassName), children: /* @__PURE__ */ jsx(CapHeadingWithStatic, { type: "h4", className: classNames(titleClassName), children: title }) }),
+                    /* @__PURE__ */ jsx("div", { className: classNames(styles["radio-card-content"], contentClassName), children: content })
+                  ]
+                }
+              ),
+              infoIconDescription && /* @__PURE__ */ jsx("div", { className: classNames(styles["info-icon-wrapper"], infoIconWrapperClassName), children: /* @__PURE__ */ jsx(CapTooltipWithInfo, { title: infoIconDescription }) }),
               customComponent
             ] })
           ]
@@ -98,7 +130,7 @@ class CapRadioCard extends React.Component {
         ...rest,
         onChange: this.handleChange,
         className: classNames(
-          styles["capRadioCardV2"],
+          styles["cap-radioCard-v2"],
           {
             [styles["smallRadioCard"]]: size === "small"
           },