@capillarytech/blaze-ui 6.1.0 → 6.1.1

package/CapPopoverTree/styles.scss

@@ -2,38 +2,186 @@
 
 $popoverTree: cap-popover-tree-v2;
 
-.ant-popover.#{$popoverTree} {
-    .ant-popover-content {
-        width: 334px;
-        padding: 0;
-        min-height: 176px;
-    }
-
-    .divider {
-        border-top: 1px solid $CAP_G07;
-    }
-    .empty-data-text {
-        text-align: center;
-        margin-top: 12px;
-        padding: 10px 0;
-    }
-    .ant-popover-inner-content {
-        padding: 0 0 12px 0;
-    }
-    .search-tree-node {
-        .ant-input-affix-wrapper {
-            width: 300px;
-            margin-left: 12px;
-            .ant-input.ant-input-lg {
-                border: none !important;
-                border-radius: 0 !important;
-                margin-left: 8px;
-            }
+// ExpandIcon styles
+.expandIcon {
+  margin-top: 0.714rem; // 10px / 14
+  z-index: 1;
+
+  svg {
+    height: 1.714rem; // 24px / 14
+    width: 1.714rem; // 24px / 14
+  }
+}
+
+// StyledIcon styles
+.styledIcon {
+  z-index: 1;
+  padding: 0.286rem; // 4px / 14
+  border-radius: 0.571rem; // 8px / 14
+  background: $CAP_G08;
+}
+
+// StyledCapHeading styles
+.styledCapHeading {
+  display: inline;
+  margin-left: 0.286rem; // 4px / 14
+}
+
+// StyledCapColumn styles
+.styledCapColumn {
+  display: inline;
+}
+
+.matchedSearch {
+  font-weight: 500;
+}
+
+// StyledCapTree styles
+.styledCapTree {
+  &.ant-tree.cap-tree-v2 {
+    min-height: 8.857rem; // 124px / 14
+
+    li {
+      padding: 0;
+    }
+
+    .ant-tree-node-content-wrapper {
+      height: 2.857rem; // 40px / 14
+      padding: 0.643rem 0 0.786rem 0.286rem; // 9px 0 11px 4px / 14
+
+      &:hover {
+        background-color: $BG_01;
+        margin-left: -2.857rem; // -40px / 14
+        padding-left: 3.143rem; // 44px / 14
+      }
+    }
+
+    .ant-tree-node-selected {
+      .tree-node-title {
+        color: $CAP_COLOR_17; // #1d61ee
+      }
+    }
+
+    .ant-tree-node-content-wrapper-open {
+      margin-left: -2.857rem; // -40px / 14
+      padding-left: 3.143rem; // 44px / 14
+      width: 23.143rem; // 324px / 14
+    }
+
+    &.isExpanded {
+      .ant-tree-node-content-wrapper-open {
+        background: $CAP_PALE_GREY;
+        border-left: 0.143rem solid $FONT_COLOR_05; // 2px / 14
+
+        &:hover {
+          background-color: $CAP_PALE_GREY;
+        }
+
+        .tree-node-title {
+          color: $CAP_COLOR_17; // #1d61ee
+        }
+
+        .tree-node-icon {
+          z-index: 1;
+          background: $FONT_COLOR_05;
+          color: $CAP_WHITE;
+        }
+      }
+    }
+
+    .ant-tree-child-tree {
+      .ant-tree-node-content-wrapper {
+        position: relative;
+        margin-left: 1.143rem; // 16px / 14
+        padding-left: 0;
+        width: 17.857rem; // 250px / 14
+      }
+
+      .ant-tree-node-selected {
+        background-color: $CAP_PALE_GREY;
+      }
+
+      .ant-tree-title {
+        margin-left: -0.857rem; // -12px / 14
+
+        .info-icon {
+          position: absolute;
+          right: 1.786rem; // 25px / 14
+          top: 1rem; // 14px / 14
         }
+      }
     }
+  }
 }
-.add-condition-tooltip {
-    .ant-tooltip-inner {
-        width: 386px;
+
+// IsExpanded styles - exported as separate class for CSS module
+.isExpanded {
+  &.ant-tree.cap-tree-v2 {
+    .ant-tree-node-content-wrapper-open {
+      background: $CAP_PALE_GREY;
+      border-left: 0.143rem solid $FONT_COLOR_05; // 2px / 14
+
+      &:hover {
+        background-color: $CAP_PALE_GREY;
+      }
+
+      .tree-node-title {
+        color: $CAP_COLOR_17; // #1d61ee
+      }
+
+      .tree-node-icon {
+        z-index: 1;
+        background: $FONT_COLOR_05;
+        color: $CAP_WHITE;
+      }
+    }
+  }
+}
+
+.ant-popover.#{$popoverTree} {
+  width: 23.857rem; // 334px / 14
+  .ant-popover-content {
+    padding: 0;
+    min-height: 12.571rem; // 176px / 14
+  }
+
+  .ant-popover-inner-content {
+    padding: 0 0 $CAP_SPACE_12 0;
+  }
+
+  .search-and-tree-wrapper {
+    display: block;
+
+    .ant-spin-container {
+      width: 100%;
+    }
+  }
+
+  .search-tree-node {
+    &.ant-input-affix-wrapper {
+      width: 100%;
+      padding: 0.571rem $CAP_SPACE_12; // 8px 12px / 14
+      border-bottom: 0.071rem solid $CAP_G07; // 1px / 14
+
+      .ant-input {
+        margin-left: 0.286rem; // 4px / 14
       }
-}
+    }
+  }
+
+  .divider {
+    display: none; // replaced by search input bottom border
+  }
+
+  .empty-data-text {
+    text-align: center;
+    margin-top: 0.857rem; // 12px / 14
+    padding: 0.714rem $CAP_SPACE_12; // 10px 12px / 14
+  }
+}
+
+.add-condition-tooltip {
+  .ant-tooltip-inner {
+    width: 27.571rem; // 386px / 14
+  }
+}

package/CapPopoverTree/tests/CapPopoverTree.mockData.d.ts

@@ -0,0 +1,22 @@
+import type { CapPopoverTreeProps, TreeNodeData } from '../types';
+export declare const basicTreeData: TreeNodeData[];
+export declare const treeDataWithIcons: TreeNodeData[];
+export declare const singleNodeTreeData: TreeNodeData[];
+export declare const emptyTreeData: TreeNodeData[];
+export declare const nestedTreeData: TreeNodeData[];
+export declare const mockOnSelect: jest.Mock<any, any, any>;
+export declare const defaultProps: CapPopoverTreeProps;
+export declare const propsWithSelectedKey: CapPopoverTreeProps;
+export declare const propsWithDisabledTrigger: CapPopoverTreeProps;
+export declare const propsWithTooltip: CapPopoverTreeProps;
+export declare const propsWithLoading: CapPopoverTreeProps;
+export declare const propsWithEmptyMessage: CapPopoverTreeProps;
+export declare const propsWithSearchPlaceholder: CapPopoverTreeProps;
+export declare const propsWithDefaultExpandAll: CapPopoverTreeProps;
+export declare const propsWithCustomClassName: CapPopoverTreeProps;
+export declare const propsWithRenderOnKeyChange: CapPopoverTreeProps;
+export declare const propsWithTriggerProps: CapPopoverTreeProps;
+export declare const propsWithPlacement: CapPopoverTreeProps;
+export declare const propsWithTriggerHover: CapPopoverTreeProps;
+export declare const propsWithTriggerFocus: CapPopoverTreeProps;
+//# sourceMappingURL=CapPopoverTree.mockData.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CapPopoverTree.mockData.d.ts","sourceRoot":"","sources":["../../../components/CapPopoverTree/tests/CapPopoverTree.mockData.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAElE,eAAO,MAAM,aAAa,EAAE,YAAY,EAcvC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,YAAY,EAW3C,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,YAAY,EAM5C,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,YAAY,EAAO,CAAC;AAEhD,eAAO,MAAM,cAAc,EAAE,YAAY,EAYxC,CAAC;AAEF,eAAO,MAAM,YAAY,0BAAY,CAAC;AAEtC,eAAO,MAAM,YAAY,EAAE,mBAK1B,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,mBAGlC,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,mBAItC,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,mBAG9B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,mBAI9B,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,mBAInC,CAAC;AAEF,eAAO,MAAM,0BAA0B,EAAE,mBAGxC,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,mBAGvC,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,mBAItC,CAAC;AAEF,eAAO,MAAM,0BAA0B,EAAE,mBAGxC,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,mBAGnC,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,mBAGhC,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,mBAGnC,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,mBAGnC,CAAC"}

package/CapPopoverTree/types.d.ts

@@ -0,0 +1,62 @@
+import type { TreeProps } from 'antd-v5';
+import type React from 'react';
+import type { CapPopoverProps } from '../CapPopover/types';
+export interface TreeNodeData {
+    title: string | React.ReactNode;
+    key: string;
+    children?: TreeNodeData[];
+    icon?: string;
+    info?: string;
+    [key: string]: unknown;
+}
+/**
+ * Props for CapPopoverTree component
+ *
+ * @deprecated Props inherited from CapPopoverProps (Ant Design Popover component):
+ * - `overlayClassName` - Use `classNames.root` on CapPopover instead
+ * - `visible` - Use `open` instead (not recommended for public API - component manages popover state internally)
+ * - `onVisibleChange` - Use `onOpenChange` instead (not recommended for public API - component manages popover state internally)
+ *
+ * These deprecated props are handled internally by CapPopover with backward compatibility.
+ * They will show deprecation warnings in development mode.
+ *
+ * Note: `visible` and `onVisibleChange` are inherited from CapPopoverProps but are not recommended
+ * for use as the component manages popover state internally. Use `overlayClassName` if needed for styling.
+ */
+export interface CapPopoverTreeProps extends Omit<TreeProps, 'treeData' | 'onSelect' | 'className' | 'classNames' | 'styles' | 'motion'>, Omit<CapPopoverProps, 'content' | 'classNames' | 'motion'> {
+    /** Tree data structure */
+    treeData?: TreeNodeData[];
+    /** Component to use as trigger */
+    TriggerComponent?: React.ComponentType<Record<string, unknown>>;
+    /** Text to display in trigger component */
+    componentText?: string;
+    /** Props to pass to trigger component */
+    triggerProps?: Record<string, unknown>;
+    /** Whether trigger is disabled */
+    isTriggerDisabled?: boolean;
+    /** Text to show when trigger is disabled */
+    triggerDisabledText?: string;
+    /** Tooltip text */
+    tooltipText?: string;
+    /** Whether data is loading */
+    isLoadingData?: boolean;
+    /** Loading tip text */
+    loadingTip?: string;
+    /** Custom switcher icon */
+    switcherIcon?: React.ReactNode;
+    /** Additional CSS class name */
+    className?: string;
+    /** Expand all nodes by default */
+    defaultExpandAll?: boolean;
+    /** Callback when node is selected */
+    onSelect?: (selectedKey: string[]) => void;
+    /** Currently selected key */
+    selectedKey?: string[];
+    /** Message to show when tree data is empty */
+    emptyDataMessage?: string | React.ReactNode;
+    /** Placeholder text for search input */
+    searchPlaceholder?: string | React.ReactNode;
+    /** Whether to re-render tree on key change */
+    renderOnKeyChange?: boolean;
+}
+//# sourceMappingURL=types.d.ts.map

package/CapPopoverTree/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../components/CapPopoverTree/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAE3D,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAChC,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,YAAY,EAAE,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,mBACf,SAAQ,IAAI,CACR,SAAS,EACT,UAAU,GAAG,UAAU,GAAG,WAAW,GAAG,YAAY,GAAG,QAAQ,GAAG,QAAQ,CAC3E,EACD,IAAI,CAAC,eAAe,EAAE,SAAS,GAAG,YAAY,GAAG,QAAQ,CAAC;IAC5D,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,YAAY,EAAE,CAAC;IAC1B,kCAAkC;IAClC,gBAAgB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAChE,2CAA2C;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,yCAAyC;IACzC,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACvC,kCAAkC;IAClC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,4CAA4C;IAC5C,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8BAA8B;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,uBAAuB;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2BAA2B;IAC3B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kCAAkC;IAClC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,qCAAqC;IACrC,QAAQ,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC3C,6BAA6B;IAC7B,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,8CAA8C;IAC9C,gBAAgB,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAC5C,wCAAwC;IACxC,iBAAiB,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAC7C,8CAA8C;IAC9C,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B"}

package/CapPopoverTree/types.js

@@ -0,0 +1 @@
+

package/CapSelectFilter/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../components/CapSelectFilter/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,KAAK,EAAE,uBAAuB,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAM7E,eAAO,MAAM,cAAc,GAAI,OAAO,uBAAuB,EAAE,EAAE,gBAAgB,MAAM;;;;;GAStF,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAC7B,MAAM,KAAK,CAAC,SAAS,EACrB,oBAAoB,MAAM,EAC1B,gBAAgB,MAAM,4CAcvB,CAAC;AAEF,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAyDnD,CAAC;AAEF,eAAe,eAAe,CAAC;AAC/B,YAAY,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../components/CapSelectFilter/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,KAAK,EAAE,uBAAuB,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAM7E,eAAO,MAAM,cAAc,GAAI,OAAO,uBAAuB,EAAE,EAAE,gBAAgB,MAAM;;;;;GAStF,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAC7B,MAAM,KAAK,CAAC,SAAS,EACrB,oBAAoB,MAAM,EAC1B,gBAAgB,MAAM,4CAcvB,CAAC;AAEF,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA0DnD,CAAC;AAEF,eAAe,eAAe,CAAC;AAC/B,YAAY,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAC"}

package/CapSelectFilter/index.js

@@ -11,8 +11,8 @@ const renderMenuItem = (items, selectedValue) => {
   return items.map((item) => ({
     key: item.key,
     label: /* @__PURE__ */ jsx(CapHeadingWithStatic, { type: "h5", children: item.label }),
-    className: classNames(styles[`${clsPrefix}-dropdown-menu-item`], {
-      [styles[`${clsPrefix}-dropdown-menu-item-selected`]]: item.value === selectedValue
+    className: classNames(styles["menu-item"], {
+      [styles["menu-item-selected"]]: item.value === selectedValue
     }),
     "data-value": item.value
   }));
@@ -21,7 +21,7 @@ const renderDropdownMenu = (menu, dropdownMaxHeight, dropdownWidth) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: styles[`${clsPrefix}-dropdown-menu-wrapper`],
+      className: styles["menu-wrapper"],
       style: {
         maxHeight: dropdownMaxHeight,
         width: dropdownWidth,
@@ -34,11 +34,11 @@ const renderDropdownMenu = (menu, dropdownMaxHeight, dropdownWidth) => {
 const CapSelectFilter = ({
   className,
   overlayClassName,
-  triggerClass,
   onSelect,
   selectedValue,
   placeholder,
   placement = "bottomLeft",
+  width = "fit-content",
   dropdownMaxHeight = "320px",
   dropdownWidth = "228px",
   data = [],
@@ -67,21 +67,22 @@ const CapSelectFilter = ({
       trigger: ["click"],
       menu: { items: renderMenuItem(data, selectedValue), onClick: handleMenuClick },
       className: classNames(styles[clsPrefix]),
-      overlayClassName: classNames(styles[clsPrefix], `${clsPrefix}-overlay`, overlayClassName),
+      overlayClassName: classNames(`${clsPrefix}-overlay`, overlayClassName),
       dropdownRender: (menu) => renderDropdownMenu(menu, dropdownMaxHeight, dropdownWidth),
       getPopupContainer: (trigger) => trigger.parentNode,
       ...rest,
       children: /* @__PURE__ */ jsxs(
         "div",
         {
-          className: classNames(styles[`${clsPrefix}-trigger`], className, triggerClass, {
-            [styles[`${clsPrefix}-trigger-selected`]]: selectedValue,
-            [styles[`${clsPrefix}-trigger-with-badge`]]: Boolean(showBadge) && Boolean(selectedValue)
+          className: classNames(styles["styled-div"], className, {
+            [styles["styled-div-selected"]]: selectedValue,
+            [styles["styled-div-with-badge"]]: Boolean(showBadge) && Boolean(selectedValue)
           }),
+          style: { width },
           children: [
             /* @__PURE__ */ jsx(CapLabelInline, { type: "label9", children: placeholder }),
-            showBadge && selectedValue && /* @__PURE__ */ jsx("div", { className: styles[`${clsPrefix}-trigger-badge`], children: [selectedValue].length }),
-            /* @__PURE__ */ jsx(CapIcon, { className: styles[`${clsPrefix}-trigger-icon`], type: "down", size: "s" })
+            showBadge && selectedValue && /* @__PURE__ */ jsx("div", { className: styles["badge"], children: [selectedValue].length }),
+            /* @__PURE__ */ jsx(CapIcon, { className: styles["dropdown-icon"], type: "down", size: "s" })
           ]
         }
       )

package/CapSelectFilter/styles.css

@@ -9,8 +9,7 @@
 .cap-select-filter-v2 {
   display: inline-block;
 }
-.cap-select-filter-v2-trigger {
-  width: fit-content;
+.styled-div {
   position: relative;
   display: flex;
   align-items: center;
@@ -22,32 +21,32 @@
   cursor: pointer;
   transition: all 0.3s ease;
 }
-.cap-select-filter-v2-trigger:hover {
+.styled-div:hover {
   border-color: #091e42;
 }
-.cap-select-filter-v2-trigger.cap-select-filter-v2-trigger-selected {
+.styled-div.styled-div-selected {
   border: none;
   background-color: #ecece7;
 }
-.cap-select-filter-v2-trigger.ant-dropdown-open {
+.styled-div.ant-dropdown-open {
   border-color: #091e42;
 }
-.cap-select-filter-v2-dropdown-menu-wrapper {
+.menu-wrapper {
   border: 0.071rem solid #e8e8e8;
 }
-.cap-select-filter-v2-dropdown-menu-wrapper .ant-dropdown-menu {
+.menu-wrapper .ant-dropdown-menu {
   border: none;
   box-shadow: none;
 }
-.cap-select-filter-v2-dropdown-menu-item {
+.menu-item {
   background-color: transparent;
   border-left: 0.214rem solid transparent;
 }
-.cap-select-filter-v2-dropdown-menu-item.cap-select-filter-v2-dropdown-menu-item-selected {
+.menu-item.menu-item-selected {
   background-color: #e9f0fe;
   border-left-color: #2466ea;
 }
-.cap-select-filter-v2-trigger-badge {
+.badge {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -61,7 +60,7 @@
   font-weight: 500;
   line-height: normal;
 }
-.cap-select-filter-v2-trigger-icon {
+.dropdown-icon {
   position: relative;
   width: 1.786rem;
   min-width: 1.786rem;

package/CapSelectFilter/styles.module.scss.js

@@ -1,14 +1,16 @@
-import './styles.css';const styles = {
+import './styles.css';const badge = "badge";
+const styles = {
   "cap-select-filter-v2": "cap-select-filter-v2",
-  "cap-select-filter-v2-trigger": "cap-select-filter-v2-trigger",
-  "cap-select-filter-v2-trigger-selected": "cap-select-filter-v2-trigger-selected",
+  "styled-div": "styled-div",
+  "styled-div-selected": "styled-div-selected",
   "ant-dropdown-open": "ant-dropdown-open",
-  "cap-select-filter-v2-dropdown-menu-wrapper": "cap-select-filter-v2-dropdown-menu-wrapper",
-  "cap-select-filter-v2-dropdown-menu-item": "cap-select-filter-v2-dropdown-menu-item",
-  "cap-select-filter-v2-dropdown-menu-item-selected": "cap-select-filter-v2-dropdown-menu-item-selected",
-  "cap-select-filter-v2-trigger-badge": "cap-select-filter-v2-trigger-badge",
-  "cap-select-filter-v2-trigger-icon": "cap-select-filter-v2-trigger-icon"
+  "menu-wrapper": "menu-wrapper",
+  "menu-item": "menu-item",
+  "menu-item-selected": "menu-item-selected",
+  badge,
+  "dropdown-icon": "dropdown-icon"
 };
 export {
+  badge,
   styles as default
 };

package/CapSelectFilter/styles.scss

@@ -1,13 +1,10 @@
 @import '../styles/_variables';
 
-$cap-select-filter-v2-prefix: 'cap-select-filter-v2';
-
-.#{$cap-select-filter-v2-prefix} {
+.cap-select-filter-v2 {
   display: inline-block;
 }
 
-.#{$cap-select-filter-v2-prefix}-trigger {
-  width: fit-content;
+.styled-div {
   position: relative;
   display: flex;
   align-items: center;
@@ -23,7 +20,7 @@ $cap-select-filter-v2-prefix: 'cap-select-filter-v2';
     border-color: $cap-g01;
   }
 
-  &.#{$cap-select-filter-v2-prefix}-trigger-selected {
+  &.styled-div-selected {
     border: none;
     background-color: $cap-g13;
   }
@@ -33,7 +30,7 @@ $cap-select-filter-v2-prefix: 'cap-select-filter-v2';
   }
 }
 
-.#{$cap-select-filter-v2-prefix}-dropdown-menu-wrapper {
+.menu-wrapper {
   border: $border-width-1 solid $cap-g12;
 
   :global(.ant-dropdown-menu) {
@@ -42,17 +39,17 @@ $cap-select-filter-v2-prefix: 'cap-select-filter-v2';
   }
 }
 
-.#{$cap-select-filter-v2-prefix}-dropdown-menu-item {
+.menu-item {
   background-color: transparent;
   border-left: 0.214rem solid transparent;
 
-  &.#{$cap-select-filter-v2-prefix}-dropdown-menu-item-selected {
+  &.menu-item-selected {
     background-color: $cap-pale-grey;
     border-left-color: $font-color-05;
   }
 }
 
-.#{$cap-select-filter-v2-prefix}-trigger-badge {
+.badge {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -67,7 +64,7 @@ $cap-select-filter-v2-prefix: 'cap-select-filter-v2';
   line-height: $normal-line-height;
 }
 
-.#{$cap-select-filter-v2-prefix}-trigger-icon {
+.dropdown-icon {
   position: relative;
   width: 1.786rem; // 25px
   min-width: 1.786rem;

package/CapSelectFilter/types.d.ts

@@ -8,12 +8,12 @@ export interface CapSelectFilterMenuItem {
 export interface CapSelectFilterProps extends Omit<DropdownProps, 'menu' | 'overlay' | 'overlayStyle' | 'onOpenChange'> {
     className?: string;
     overlayClassName?: string;
-    triggerClass?: string;
     onSelect?: (event: React.MouseEvent<HTMLElement>) => void;
     onOpenChange?: (open: boolean) => void;
     selectedValue?: string;
     placeholder?: string | React.ReactNode;
     placement?: 'bottomLeft' | 'bottom' | 'bottomRight' | 'topLeft' | 'top' | 'topRight';
+    width?: string;
     dropdownMaxHeight?: string;
     dropdownWidth?: string;
     data?: CapSelectFilterMenuItem[];

package/CapSelectFilter/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../components/CapSelectFilter/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACxC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,uBAAuB;IACtC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;CACjC;AAED,MAAM,WAAW,oBACf,SAAQ,IAAI,CAAC,aAAa,EAAE,MAAM,GAAG,SAAS,GAAG,cAAc,GAAG,cAAc,CAAC;IACjF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC1D,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACvC,SAAS,CAAC,EAAE,YAAY,GAAG,QAAQ,GAAG,aAAa,GAAG,SAAS,GAAG,KAAK,GAAG,UAAU,CAAC;IACrF,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,uBAAuB,EAAE,CAAC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../components/CapSelectFilter/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACxC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,uBAAuB;IACtC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;CACjC;AAED,MAAM,WAAW,oBACf,SAAQ,IAAI,CAAC,aAAa,EAAE,MAAM,GAAG,SAAS,GAAG,cAAc,GAAG,cAAc,CAAC;IACjF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC1D,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACvC,SAAS,CAAC,EAAE,YAAY,GAAG,QAAQ,GAAG,aAAa,GAAG,SAAS,GAAG,KAAK,GAAG,UAAU,CAAC;IACrF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,uBAAuB,EAAE,CAAC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB"}