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

package/CapSelect/index.js

@@ -1,163 +1,143 @@
-var _excluded = ["componentClassName", "dropdownClassName", "dropdownStyle", "dropdownMatchSelectWidth", "dropdownRender", "dropdownMenuStyle", "onDropdownVisibleChange", "firstActiveValue", "showArrow", "autoFocus", "onMouseEnter", "onMouseLeave", "autoClearSearchValue", "filterOption", "filterSort", "optionFilterProp", "searchValue", "onSearch", "popupClassName", "popupStyle", "popupMatchSelectWidth", "popupRender", "onOpenChange", "classNames", "styles", "showSearch", "options", "propToBeMadeLabel", "getMenuOptionsProps", "mode"];
-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; }
-/**
- *
- * CapSelect
- *
- */
-
-import { Select } from 'antd-v5';
-import classNames from 'classnames';
-import React, { useMemo } from 'react';
-import ComponentWithLabelHOC from "../assets/HOCs/ComponentWithLabelHOC";
-import CapCustomSelect from "../CapCustomSelect";
-import CapIcon from "../CapIcon";
-import CapTooltip from "../CapTooltip";
-import { CAP_SPACE_04 } from "../styles/_variables";
-import './styles.scss';
-const styles = {"cap-select-v2":"cap-select-v2_hB9F7","cap-select-v2-dropdown":"cap-select-v2-dropdown_1-EMP","capSelect-error-message":"capSelect-error-message_G9TV-","cap-select-option-tooltip":"cap-select-option-tooltip_mOr5C"};
-import { migrateShowSearchProps } from "./utils";
-import { jsx as _jsx } from "react/jsx-runtime";
-var clsPrefix = 'cap-select-v2';
+import { jsx } from "react/jsx-runtime";
+import { Select } from "antd-v5";
+import classNames from "classnames";
+import { useMemo } from "react";
+import componentWithLabelHOC from "../assets/HOCs/ComponentWithLabelHOC/index.js";
+import CapCustomSelect from "../CapCustomSelect/index.js";
+import CapIcon from "../CapIcon/index.js";
+import CapTooltip from "../CapTooltip/index.js";
+import { CAP_SPACE_04 } from "../styles/_variables.js";
+import styles from "./styles.module.scss.js";
+import { migrateShowSearchProps } from "./utils.js";
+const clsPrefix = "cap-select-v2";
 function CapSelect(props) {
-  var {
-      componentClassName,
-      dropdownClassName,
-      dropdownStyle,
-      dropdownMatchSelectWidth,
-      dropdownRender,
-      dropdownMenuStyle,
-      onDropdownVisibleChange
-      // Completely removed props (v6) - ignore these
-      ,
-
-      // Props moved to showSearch object (v3 → v6)
-      autoClearSearchValue,
-      filterOption,
-      filterSort,
-      optionFilterProp,
-      searchValue,
-      onSearch,
-      // v6 props
-      popupClassName,
-      popupStyle,
-      popupMatchSelectWidth,
-      popupRender,
-      onOpenChange,
-      classNames: classNamesProp,
-      styles: stylesProp,
-      showSearch: showSearchProp,
-      options,
-      propToBeMadeLabel,
-      getMenuOptionsProps = () => ({}),
-      mode
-    } = props,
-    rest = _objectWithoutPropertiesLoose(props, _excluded);
-
-  // Map deprecated dropdownClassName/popupClassName to classNames.popup.root (v6 way)
-  var finalClassNames = useMemo(() => {
-    var _classNamesProp$popup;
-    var mergedClassNames = _extends({}, classNamesProp || {});
-    var popupClassNameValue = dropdownClassName || popupClassName;
-
-    // Get the CSS module class name
-    var dropdownClassKey = clsPrefix + "-dropdown";
-    var dropdownClass = styles[dropdownClassKey];
-
-    // Always include base dropdown class, merge with any provided classes
-    var basePopupClassName = classNames(dropdownClass, popupClassNameValue, classNamesProp == null || (_classNamesProp$popup = classNamesProp.popup) == null ? void 0 : _classNamesProp$popup.root);
-    mergedClassNames.popup = _extends({}, mergedClassNames == null ? void 0 : mergedClassNames.popup, {
+  const {
+    componentClassName,
+    dropdownClassName,
+    dropdownStyle,
+    dropdownMatchSelectWidth,
+    dropdownRender,
+    dropdownMenuStyle,
+    onDropdownVisibleChange,
+    // Completely removed props (v6) - ignore these
+    firstActiveValue: _firstActiveValue,
+    showArrow: _showArrow,
+    autoFocus: _autoFocus,
+    onMouseEnter: _onMouseEnter,
+    onMouseLeave: _onMouseLeave,
+    // Props moved to showSearch object (v3 → v6)
+    autoClearSearchValue,
+    filterOption,
+    filterSort,
+    optionFilterProp,
+    searchValue,
+    onSearch,
+    // v6 props
+    popupClassName,
+    popupStyle,
+    popupMatchSelectWidth,
+    popupRender,
+    onOpenChange,
+    classNames: classNamesProp,
+    styles: stylesProp,
+    showSearch: showSearchProp,
+    options,
+    propToBeMadeLabel,
+    getMenuOptionsProps = () => ({}),
+    mode,
+    ...rest
+  } = props;
+  const finalClassNames = useMemo(() => {
+    var _a;
+    const mergedClassNames = { ...classNamesProp || {} };
+    const popupClassNameValue = dropdownClassName || popupClassName;
+    const dropdownClassKey = `${clsPrefix}-dropdown`;
+    const dropdownClass = styles[dropdownClassKey];
+    const basePopupClassName = classNames(
+      dropdownClass,
+      popupClassNameValue,
+      (_a = classNamesProp == null ? void 0 : classNamesProp.popup) == null ? void 0 : _a.root
+    );
+    mergedClassNames.popup = {
+      ...mergedClassNames == null ? void 0 : mergedClassNames.popup,
       root: basePopupClassName
-    });
+    };
     return mergedClassNames;
   }, [dropdownClassName, popupClassName, classNamesProp]);
-
-  // Map deprecated dropdownStyle/popupStyle/dropdownMenuStyle to styles.popup.root (v6 way)
-  var finalStyles = useMemo(() => {
-    var _mergedStyles$popup;
-    var mergedStyles = _extends({}, stylesProp || {});
-    var basePopupRootStyles = {
+  const finalStyles = useMemo(() => {
+    var _a;
+    const mergedStyles = { ...stylesProp || {} };
+    const basePopupRootStyles = {
       borderRadius: CAP_SPACE_04,
       padding: 0
     };
-
-    // Merge with any provided styles
-    mergedStyles.popup = _extends({}, mergedStyles == null ? void 0 : mergedStyles.popup, {
-      root: _extends({}, basePopupRootStyles, mergedStyles == null || (_mergedStyles$popup = mergedStyles.popup) == null ? void 0 : _mergedStyles$popup.root, dropdownStyle, popupStyle, dropdownMenuStyle)
-    });
-    return Object.keys(mergedStyles).length > 0 ? mergedStyles : undefined;
+    mergedStyles.popup = {
+      ...mergedStyles == null ? void 0 : mergedStyles.popup,
+      root: {
+        ...basePopupRootStyles,
+        ...(_a = mergedStyles == null ? void 0 : mergedStyles.popup) == null ? void 0 : _a.root,
+        ...dropdownStyle,
+        ...popupStyle,
+        ...dropdownMenuStyle
+      }
+    };
+    return Object.keys(mergedStyles).length > 0 ? mergedStyles : void 0;
   }, [dropdownStyle, popupStyle, dropdownMenuStyle, stylesProp]);
-
-  // Map deprecated dropdownMatchSelectWidth to popupMatchSelectWidth
-  var finalPopupMatchSelectWidth = popupMatchSelectWidth != null ? popupMatchSelectWidth : dropdownMatchSelectWidth;
-
-  // Map deprecated dropdownRender to popupRender
-  var finalPopupRender = popupRender != null ? popupRender : dropdownRender;
-
-  // Map deprecated onDropdownVisibleChange to onOpenChange
-  var finalOnOpenChange = onOpenChange != null ? onOpenChange : onDropdownVisibleChange;
-
-  // Handle props moved to showSearch object using utility function
-  var finalShowSearch = useMemo(() => migrateShowSearchProps(showSearchProp, {
-    autoClearSearchValue,
-    filterOption,
-    filterSort,
-    optionFilterProp,
-    searchValue,
-    onSearch
-  }), [showSearchProp, autoClearSearchValue, filterOption, filterSort, optionFilterProp, searchValue, onSearch]);
-  var items = options.map(op => {
-    var _ref, _op$value;
-    return /*#__PURE__*/_jsx(Select.Option, _extends({}, op, {
-      label: propToBeMadeLabel ? op[propToBeMadeLabel] || op.label : op.label
-    }, getMenuOptionsProps(op), {
-      children: op.tooltip ? /*#__PURE__*/_jsx(CapTooltip, {
-        title: op.tooltip,
-        placement: "top",
-        children: /*#__PURE__*/_jsx("div", {
-          className: "cap-select-option-tooltip_mOr5C",
-          children: op.label
-        })
-      }) : op.label
-    }), (_ref = (_op$value = op.value) != null ? _op$value : op.key) != null ? _ref : op.label);
-  });
-
-  // Build final props for Select component
-  var selectProps = _extends({
-    removeIcon: /*#__PURE__*/_jsx(CapIcon, {
-      type: "close",
-      size: "s"
-    }),
-    suffixIcon: /*#__PURE__*/_jsx(CapIcon, {
-      type: "chevron-down"
+  const finalPopupMatchSelectWidth = popupMatchSelectWidth ?? dropdownMatchSelectWidth;
+  const finalPopupRender = popupRender ?? dropdownRender;
+  const finalOnOpenChange = onOpenChange ?? onDropdownVisibleChange;
+  const finalShowSearch = useMemo(
+    () => migrateShowSearchProps(showSearchProp, {
+      autoClearSearchValue,
+      filterOption,
+      filterSort,
+      optionFilterProp,
+      searchValue,
+      onSearch
     }),
+    [
+      showSearchProp,
+      autoClearSearchValue,
+      filterOption,
+      filterSort,
+      optionFilterProp,
+      searchValue,
+      onSearch
+    ]
+  );
+  const items = options.map((op) => /* @__PURE__ */ jsx(
+    Select.Option,
+    {
+      ...op,
+      label: propToBeMadeLabel ? op[propToBeMadeLabel] || op.label : op.label,
+      ...getMenuOptionsProps(op),
+      children: op.tooltip ? /* @__PURE__ */ jsx(CapTooltip, { title: op.tooltip, placement: "top", children: /* @__PURE__ */ jsx("div", { className: styles["cap-select-option-tooltip"], children: op.label }) }) : op.label
+    },
+    op.value ?? op.key ?? op.label
+  ));
+  const selectProps = {
+    removeIcon: /* @__PURE__ */ jsx(CapIcon, { type: "close", size: "s" }),
+    suffixIcon: /* @__PURE__ */ jsx(CapIcon, { type: "chevron-down" }),
     className: classNames(styles[clsPrefix], componentClassName),
-    mode
-  }, mode && ['multiple', 'tags'].includes(mode) && {
-    menuItemSelectedIcon: /*#__PURE__*/_jsx(CapIcon, {
-      type: "tick",
-      size: "s",
-      className: styles[clsPrefix + "-tick-icon"]
-    })
-  }, finalClassNames && {
-    classNames: finalClassNames
-  }, finalStyles && {
-    styles: finalStyles
-  }, finalPopupMatchSelectWidth !== undefined && {
-    popupMatchSelectWidth: finalPopupMatchSelectWidth
-  }, finalPopupRender && {
-    popupRender: finalPopupRender
-  }, finalOnOpenChange && {
-    onOpenChange: finalOnOpenChange
-  }, finalShowSearch !== undefined && {
-    showSearch: finalShowSearch
-  }, rest);
-  return /*#__PURE__*/_jsx(Select, _extends({}, selectProps, {
-    children: items
-  }));
+    mode,
+    ...mode && ["multiple", "tags"].includes(mode) && {
+      menuItemSelectedIcon: /* @__PURE__ */ jsx(CapIcon, { type: "tick", size: "s", className: styles[`${clsPrefix}-tick-icon`] })
+    },
+    ...finalClassNames && { classNames: finalClassNames },
+    ...finalStyles && { styles: finalStyles },
+    ...finalPopupMatchSelectWidth !== void 0 && {
+      popupMatchSelectWidth: finalPopupMatchSelectWidth
+    },
+    ...finalPopupRender && { popupRender: finalPopupRender },
+    ...finalOnOpenChange && { onOpenChange: finalOnOpenChange },
+    ...finalShowSearch !== void 0 && { showSearch: finalShowSearch },
+    ...rest
+  };
+  return /* @__PURE__ */ jsx(Select, { ...selectProps, children: items });
 }
-CapSelect.displayName = 'CapSelect';
-var CapSelectFinal = ComponentWithLabelHOC(CapSelect);
-CapSelectFinal.CapCustomSelect = ComponentWithLabelHOC(CapCustomSelect);
-export default CapSelectFinal;
+CapSelect.displayName = "CapSelect";
+const CapSelectFinal = componentWithLabelHOC(CapSelect);
+CapSelectFinal.CapCustomSelect = componentWithLabelHOC(CapCustomSelect);
+export {
+  CapSelectFinal as default
+};

package/CapSelect/styles.module.css

@@ -0,0 +1,51 @@
+/* Color Palette */
+/* Fonts */
+/* Backward Compatibility Aliases */
+/* Component Heights */
+/* Border Radius */
+/* Border Width */
+/* Transition */
+/* Timezones Footer */
+.cap-select-v2 {
+  width: 100%;
+}
+.cap-select-v2 .ant-select-placeholder {
+  font-size: 1rem;
+}
+.cap-select-v2 .ant-select-suffix {
+  --ant-color-text-quaternary: $CAP_G01;
+  margin-top: 0.125rem;
+  transform: none;
+}
+.cap-select-v2 .ant-select-disabled {
+  border-color: #dfe2e7;
+}
+.cap-select-v2 .ant-select-content {
+  font-size: 1rem;
+}
+.cap-select-v2 .ant-select-multiple {
+  font-size: 0.857rem;
+}
+.cap-select-v2.ant-select-outlined.ant-select-status-error {
+  --select-color: $CAP_G01;
+}
+.ant-select-dropdown.cap-select-v2-dropdown .ant-select-item {
+  padding: 0.571rem 1.714rem;
+  border-radius: unset;
+}
+.ant-select-dropdown.cap-select-v2-dropdown .ant-select-item-option-selected {
+  border-left: 0.125rem solid #2466ea;
+}
+.ant-select-dropdown.cap-select-v2-dropdown .ant-select-item-option-selected svg {
+  font-size: 1.143rem;
+  color: #2466ea;
+}
+.capSelect-error-message {
+  color: #ea213a;
+  font-size: 0.857rem;
+  margin-top: 0.625rem;
+  display: block;
+}
+.cap-select-option-tooltip {
+  width: 100%;
+}

package/CapSelect/styles.module.scss.js

@@ -0,0 +1,9 @@
+import './styles.module.css';const styles = {
+  "cap-select-v2": "cap-select-v2",
+  "cap-select-v2-dropdown": "cap-select-v2-dropdown",
+  "capSelect-error-message": "capSelect-error-message",
+  "cap-select-option-tooltip": "cap-select-option-tooltip"
+};
+export {
+  styles as default
+};

package/CapSelect/styles.scss

@@ -5,42 +5,42 @@ $select: cap-select-v2;
 .#{$select} {
   width: 100%;
 
-  .ant-select-placeholder {
+  :global(.ant-select-placeholder) {
     font-size: $FONT_SIZE_M;
   }
 
-  .ant-select-suffix {
+  :global(.ant-select-suffix) {
     --ant-color-text-quaternary: $CAP_G01;
 
     margin-top: 0.125rem;
     transform: none;
   }
 
-  .ant-select-disabled {
+  :global(.ant-select-disabled) {
     border-color: $CAP_G07;
   }
 
-  .ant-select-content {
+  :global(.ant-select-content) {
     font-size: $FONT_SIZE_M;
   }
 
-  .ant-select-multiple {
+  :global(.ant-select-multiple) {
     font-size: $FONT_SIZE_S;
   }
 
-  &.ant-select-outlined.ant-select-status-error {
+  &:global(.ant-select-outlined.ant-select-status-error) {
     --select-color: $CAP_G01;
   }
 }
 
 // Target .ant-select-dropdown element that also has our class (same element, not descendant)
-.ant-select-dropdown.#{$select}-dropdown {
-  .ant-select-item {
+:global(.ant-select-dropdown).#{$select}-dropdown {
+  :global(.ant-select-item) {
     padding: $CAP_SPACE_08 $CAP_SPACE_24;
     border-radius: unset;
   }
 
-  .ant-select-item-option-selected {
+  :global(.ant-select-item-option-selected) {
     border-left: 0.125rem solid map-get($CAP_SECONDARY, base);  
 
     svg {
@@ -50,13 +50,13 @@ $select: cap-select-v2;
   }
 }
 
-.capSelect-error-message_G9TV-{
+.capSelect-error-message{
   color: $CAP_RED;
   font-size: $FONT_SIZE_S;
   margin-top: 0.625rem;
   display: block;
 }
 
-.cap-select-option-tooltip_mOr5C {
+.cap-select-option-tooltip {
   width: 100%;
 }

package/CapSelect/utils.js

@@ -1,20 +1,19 @@
-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 omitUndefined(obj) {
-  return Object.fromEntries(Object.entries(obj).filter(_ref => {
-    var [, value] = _ref;
-    return value !== undefined;
-  }));
+  return Object.fromEntries(
+    Object.entries(obj).filter(([, value]) => value !== void 0)
+  );
 }
-
-// Migrates deprecated showSearch-related props (v3) to v6 showSearch object format
-export function migrateShowSearchProps(showSearchProp, deprecatedProps) {
-  var definedDeprecatedProps = omitUndefined(deprecatedProps);
-  var hasDeprecatedProps = Object.keys(definedDeprecatedProps).length > 0;
-  if (typeof showSearchProp === 'object' && showSearchProp !== null) {
-    return hasDeprecatedProps ? _extends({}, showSearchProp, definedDeprecatedProps) : showSearchProp;
+function migrateShowSearchProps(showSearchProp, deprecatedProps) {
+  const definedDeprecatedProps = omitUndefined(deprecatedProps);
+  const hasDeprecatedProps = Object.keys(definedDeprecatedProps).length > 0;
+  if (typeof showSearchProp === "object" && showSearchProp !== null) {
+    return hasDeprecatedProps ? { ...showSearchProp, ...definedDeprecatedProps } : showSearchProp;
   }
   if (showSearchProp) {
     return hasDeprecatedProps ? definedDeprecatedProps : true;
   }
   return hasDeprecatedProps ? definedDeprecatedProps : showSearchProp;
-}
+}
+export {
+  migrateShowSearchProps
+};

package/CapSelectFilter/index.js

@@ -1,104 +1,96 @@
-var _excluded = ["className", "overlayClassName", "onSelect", "selectedValue", "placeholder", "placement", "width", "dropdownMaxHeight", "dropdownWidth", "data", "showBadge"];
-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 classNames from 'classnames';
-import React from 'react';
-import CapDropdown from "../CapDropdown";
-import CapHeading from "../CapHeading";
-import CapIcon from "../CapIcon";
-import CapLabel from "../CapLabel";
-import './styles.scss';
-const styles = {"cap-select-filter-v2":"cap-select-filter-v2_g0tfY","styled-div":"styled-div_pBQpb","styled-div-selected":"styled-div-selected_2dZ4s","ant-dropdown-open":"ant-dropdown-open_JXLls","menu-wrapper":"menu-wrapper_DTUoc","menu-item":"menu-item_mCg1w","menu-item-selected":"menu-item-selected_qmb9M","badge":"badge_vTnY2","dropdown-icon":"dropdown-icon_BO62O"};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-var {
-  CapLabelInline
-} = CapLabel;
-var clsPrefix = 'cap-select-filter-v2';
-export var renderMenuItem = (items, selectedValue) => {
-  return items.map(item => ({
+import { jsx, jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import CapDropdown from "../CapDropdown/index.js";
+import CapHeadingWithStatic from "../CapHeading/index.js";
+import CapIcon from "../CapIcon/index.js";
+import CapLabelWithStatic from "../CapLabel/index.js";
+import styles from "./styles.module.scss.js";
+const { CapLabelInline } = CapLabelWithStatic;
+const clsPrefix = "cap-select-filter-v2";
+const renderMenuItem = (items, selectedValue) => {
+  return items.map((item) => ({
     key: item.key,
-    label: /*#__PURE__*/_jsx(CapHeading, {
-      type: "h5",
-      children: item.label
+    label: /* @__PURE__ */ jsx(CapHeadingWithStatic, { type: "h5", children: item.label }),
+    className: classNames(styles["menu-item"], {
+      [styles["menu-item-selected"]]: item.value === selectedValue
     }),
-    className: classNames("menu-item_mCg1w", {
-      ["menu-item-selected_qmb9M"]: item.value === selectedValue
-    }),
-    'data-value': item.value
+    "data-value": item.value
   }));
 };
-export var renderDropdownMenu = (menu, dropdownMaxHeight, dropdownWidth) => {
-  return /*#__PURE__*/_jsx("div", {
-    className: "menu-wrapper_DTUoc",
-    style: {
-      maxHeight: dropdownMaxHeight,
-      width: dropdownWidth,
-      overflowY: 'auto'
-    },
-    children: menu
-  });
+const renderDropdownMenu = (menu, dropdownMaxHeight, dropdownWidth) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: styles["menu-wrapper"],
+      style: {
+        maxHeight: dropdownMaxHeight,
+        width: dropdownWidth,
+        overflowY: "auto"
+      },
+      children: menu
+    }
+  );
 };
-var CapSelectFilter = _ref => {
-  var {
-      className,
-      overlayClassName,
-      onSelect,
-      selectedValue,
-      placeholder,
-      placement = 'bottomLeft',
-      width = 'fit-content',
-      dropdownMaxHeight = '320px',
-      dropdownWidth = '228px',
-      data = [],
-      showBadge = false
-    } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var handleMenuClick = info => {
+const CapSelectFilter = ({
+  className,
+  overlayClassName,
+  onSelect,
+  selectedValue,
+  placeholder,
+  placement = "bottomLeft",
+  width = "fit-content",
+  dropdownMaxHeight = "320px",
+  dropdownWidth = "228px",
+  data = [],
+  showBadge = false,
+  ...rest
+}) => {
+  const handleMenuClick = (info) => {
     if (!onSelect || !info.domEvent) return;
-    var event = info.domEvent;
-    var menuItem = data.find(item => item.key === info.key);
+    const event = info.domEvent;
+    const menuItem = data.find((item) => item.key === info.key);
     if (menuItem) {
-      var syntheticEvent = _extends({}, event, {
+      const syntheticEvent = {
+        ...event,
         currentTarget: {
-          getAttribute: attr => attr === 'value' ? menuItem.value : null
+          getAttribute: (attr) => attr === "value" ? menuItem.value : null
         }
-      });
+      };
       onSelect(syntheticEvent);
       return;
     }
   };
-  return /*#__PURE__*/_jsx(CapDropdown, _extends({
-    placement: placement,
-    trigger: ['click'],
-    menu: {
-      items: renderMenuItem(data, selectedValue),
-      onClick: handleMenuClick
-    },
-    className: classNames(styles[clsPrefix]),
-    overlayClassName: classNames(clsPrefix + "-overlay", overlayClassName),
-    dropdownRender: menu => renderDropdownMenu(menu, dropdownMaxHeight, dropdownWidth),
-    getPopupContainer: trigger => trigger.parentNode
-  }, rest, {
-    children: /*#__PURE__*/_jsxs("div", {
-      className: classNames("styled-div_pBQpb", className, {
-        ["styled-div-selected_2dZ4s"]: 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: "badge_vTnY2",
-        children: [selectedValue].length
-      }), /*#__PURE__*/_jsx(CapIcon, {
-        className: "dropdown-icon_BO62O",
-        type: "down",
-        size: "s"
-      })]
-    })
-  }));
+  return /* @__PURE__ */ jsx(
+    CapDropdown,
+    {
+      placement,
+      trigger: ["click"],
+      menu: { items: renderMenuItem(data, selectedValue), onClick: handleMenuClick },
+      className: classNames(styles[clsPrefix]),
+      overlayClassName: classNames(`${clsPrefix}-overlay`, overlayClassName),
+      dropdownRender: (menu) => renderDropdownMenu(menu, dropdownMaxHeight, dropdownWidth),
+      getPopupContainer: (trigger) => trigger.parentNode,
+      ...rest,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          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["badge"], children: [selectedValue].length }),
+            /* @__PURE__ */ jsx(CapIcon, { className: styles["dropdown-icon"], type: "down", size: "s" })
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  CapSelectFilter as default,
+  renderDropdownMenu,
+  renderMenuItem
 };
-export default CapSelectFilter;