@progress/kendo-themes-html 7.2.1-dev.0 → 7.2.1-dev.2

package/dist/esm/grid/tests/grid-column-resizing-actions.js

@@ -5246,7 +5246,7 @@ var Form = (props) => {
     tag = defaultProps15.tag,
     children
   } = props;
-  const Parent = ({ tag: tag2, className: className24, children: children2 }) => tag2 === "form" ? /* @__PURE__ */ jsx49("form", { className: className24, children: children2 }) : /* @__PURE__ */ jsx49("div", { className: className24, children: children2 });
+  const Parent = ({ tag: tag2, className: className26, children: children2 }) => tag2 === "form" ? /* @__PURE__ */ jsx49("form", { className: className26, children: children2 }) : /* @__PURE__ */ jsx49("div", { className: className26, children: children2 });
   const formChildren = [];
   if (children) {
     if (Array.isArray(children)) {
@@ -7531,7 +7531,8 @@ var Slider = (props) => {
     focus,
     active,
     trackStyle,
-    dir
+    dir,
+    ...other
   } = props;
   let iconIncrease;
   let iconDecrease;
@@ -7542,46 +7543,54 @@ var Slider = (props) => {
     iconIncrease = "caret-alt-up";
     iconDecrease = "caret-alt-down";
   }
-  return /* @__PURE__ */ jsxs47("div", { className: classNames(
-    SLIDER_CLASSNAME,
-    props.className,
-    stateClassNames(SLIDER_CLASSNAME, {
-      readonly,
-      disabled
-    }),
+  return /* @__PURE__ */ jsxs47(
+    "div",
     {
-      [`k-slider-${orientation}`]: orientation,
-      "k-colorgradient-slider": type === "gradient",
-      "k-range-slider": type === "range"
+      ...other,
+      className: classNames(
+        SLIDER_CLASSNAME,
+        props.className,
+        stateClassNames(SLIDER_CLASSNAME, {
+          readonly,
+          disabled
+        }),
+        {
+          [`k-slider-${orientation}`]: orientation,
+          "k-colorgradient-slider": type === "gradient",
+          "k-range-slider": type === "range"
+        }
+      ),
+      dir,
+      children: [
+        showButtons && /* @__PURE__ */ jsx135(Button, { className: "k-button-decrease", rounded: "full", icon: iconDecrease }),
+        /* @__PURE__ */ jsxs47("div", { className: "k-slider-track-wrap", children: [
+          showTicks && /* @__PURE__ */ jsx135("ul", { className: "k-reset k-slider-items", children: props.children }),
+          /* @__PURE__ */ jsxs47("div", { className: "k-slider-track", style: trackStyle, children: [
+            /* @__PURE__ */ jsx135("div", { className: "k-slider-selection" }),
+            type === "range" && /* @__PURE__ */ jsx135("span", { className: classNames(
+              "k-draghandle",
+              "k-draghandle-start",
+              stateClassNames(SLIDER_CLASSNAME, {
+                hover,
+                focus,
+                active
+              })
+            ) }),
+            /* @__PURE__ */ jsx135("span", { className: classNames(
+              "k-draghandle",
+              `k-draghandle-${handlePosition}`,
+              stateClassNames(SLIDER_CLASSNAME, {
+                hover,
+                focus,
+                active
+              })
+            ) })
+          ] })
+        ] }),
+        showButtons && /* @__PURE__ */ jsx135(Button, { className: "k-button-increase", rounded: "full", icon: iconIncrease })
+      ]
     }
-  ), dir, children: [
-    showButtons && /* @__PURE__ */ jsx135(Button, { className: "k-button-decrease", rounded: "full", icon: iconDecrease }),
-    /* @__PURE__ */ jsxs47("div", { className: "k-slider-track-wrap", children: [
-      showTicks && /* @__PURE__ */ jsx135("ul", { className: "k-reset k-slider-items", children: props.children }),
-      /* @__PURE__ */ jsxs47("div", { className: "k-slider-track", style: trackStyle, children: [
-        /* @__PURE__ */ jsx135("div", { className: "k-slider-selection" }),
-        type === "range" && /* @__PURE__ */ jsx135("span", { className: classNames(
-          "k-draghandle",
-          "k-draghandle-start",
-          stateClassNames(SLIDER_CLASSNAME, {
-            hover,
-            focus,
-            active
-          })
-        ) }),
-        /* @__PURE__ */ jsx135("span", { className: classNames(
-          "k-draghandle",
-          `k-draghandle-${handlePosition}`,
-          stateClassNames(SLIDER_CLASSNAME, {
-            hover,
-            focus,
-            active
-          })
-        ) })
-      ] })
-    ] }),
-    showButtons && /* @__PURE__ */ jsx135(Button, { className: "k-button-increase", rounded: "full", icon: iconIncrease })
-  ] });
+  );
 };
 Slider.states = states47;
 Slider.options = options42;
@@ -7602,16 +7611,25 @@ var SliderTick = (props) => {
     label = defaultProps44.label,
     orientation,
     large,
-    text
+    text,
+    ...other
   } = props;
-  return /* @__PURE__ */ jsx136("li", { className: classNames(
-    props.className,
-    SLIDER_TICK_CLASSNAME,
+  return /* @__PURE__ */ jsx136(
+    "li",
     {
-      [`k-tick-${orientation}`]: orientation,
-      "k-tick-large": large
+      ...other,
+      className: classNames(
+        props.className,
+        SLIDER_TICK_CLASSNAME,
+        {
+          [`k-tick-${orientation}`]: orientation,
+          "k-tick-large": large
+        }
+      ),
+      style,
+      children: label && /* @__PURE__ */ jsx136("span", { className: "k-label", children: text })
     }
-  ), style, children: label && /* @__PURE__ */ jsx136("span", { className: "k-label", children: text }) });
+  );
 };
 SliderTick.states = states48;
 SliderTick.options = options43;
@@ -9247,8 +9265,221 @@ var GridToolbar = (props) => /* @__PURE__ */ jsx194(
   }
 );
 
+// src/column-menu/column-menu.spec.tsx
+import { jsx as jsx195 } from "react/jsx-runtime";
+var COLUMNMENU_CLASSNAME = `k-column-menu`;
+var states66 = [];
+var options60 = {};
+var defaultProps61 = {
+  view: "list"
+};
+var ColumnMenu = (props) => {
+  const {
+    view = defaultProps61.view,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsx195(
+    "div",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        COLUMNMENU_CLASSNAME,
+        {
+          "k-column-menu-tabbed": view === "tabbed"
+        }
+      ),
+      children: props.children
+    }
+  );
+};
+ColumnMenu.states = states66;
+ColumnMenu.options = options60;
+ColumnMenu.className = COLUMNMENU_CLASSNAME;
+ColumnMenu.defaultProps = defaultProps61;
+
+// src/column-menu/column-menu-item.spec.tsx
+import { jsx as jsx196, jsxs as jsxs71 } from "react/jsx-runtime";
+var COLUMNMENUITEM_CLASSNAME = `k-columnmenu-item`;
+var states67 = [
+  States.focus,
+  States.selected
+];
+var options61 = {};
+var defaultProps62 = {};
+var ColumnMenuItem = (props) => {
+  const {
+    focus,
+    selected,
+    text,
+    icon,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsxs71(
+    "div",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        COLUMNMENUITEM_CLASSNAME,
+        stateClassNames(COLUMNMENUITEM_CLASSNAME, {
+          focus,
+          selected
+        })
+      ),
+      children: [
+        /* @__PURE__ */ jsx196(Icon, { icon }),
+        text,
+        props.children
+      ]
+    }
+  );
+};
+ColumnMenuItem.states = states67;
+ColumnMenuItem.options = options61;
+ColumnMenuItem.className = COLUMNMENUITEM_CLASSNAME;
+ColumnMenuItem.defaultProps = defaultProps62;
+
+// src/column-menu/column-menu-item-wrapper.tsx
+import { jsx as jsx197 } from "react/jsx-runtime";
+var className24 = `k-columnmenu-item-wrapper`;
+var ColumnMenuItemWrapper = (props) => /* @__PURE__ */ jsx197(
+  "div",
+  {
+    ...props,
+    className: classNames(
+      props.className,
+      className24
+    ),
+    children: props.children
+  }
+);
+
+// src/column-menu/column-menu-item-content.tsx
+import { jsx as jsx198 } from "react/jsx-runtime";
+var className25 = `k-columnmenu-item-content`;
+var ColumnMenuItemContent = (props) => /* @__PURE__ */ jsx198(
+  "div",
+  {
+    ...props,
+    className: classNames(
+      props.className,
+      className25,
+      "k-columns-item"
+    ),
+    children: props.children
+  }
+);
+
+// src/column-menu/filter-menu.spec.tsx
+import { jsx as jsx199 } from "react/jsx-runtime";
+var FILTERMENU_CLASSNAME = `k-filter-menu`;
+var states68 = [];
+var options62 = {};
+var defaultProps63 = {};
+var FilterMenu = (props) => {
+  const {
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsx199(
+    "form",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        FILTERMENU_CLASSNAME
+      ),
+      children: /* @__PURE__ */ jsx199("div", { className: "k-filter-menu-container", children: props.children })
+    }
+  );
+};
+FilterMenu.states = states68;
+FilterMenu.options = options62;
+FilterMenu.className = FILTERMENU_CLASSNAME;
+FilterMenu.defaultProps = defaultProps63;
+
+// src/column-menu/column-menu-multicheck-wrap.tsx
+import { jsx as jsx200 } from "react/jsx-runtime";
+
+// src/column-menu/column-menu-multicheck-item.tsx
+import { jsx as jsx201, jsxs as jsxs72 } from "react/jsx-runtime";
+
+// src/column-menu/column-menu-expander.spec.tsx
+import { Fragment as Fragment51, jsx as jsx202, jsxs as jsxs73 } from "react/jsx-runtime";
+var COLUMNMENUEXPANDER_CLASSNAME = `k-expander`;
+var states69 = [];
+var options63 = {};
+var defaultProps64 = {};
+var ColumnMenuExpander = (props) => {
+  const {
+    itemText,
+    itemIcon,
+    expanded,
+    itemContent,
+    expanderIcon,
+    ...other
+  } = props;
+  let icon = /* @__PURE__ */ jsx202(Fragment51, {});
+  if (!expanded && !expanderIcon) {
+    icon = /* @__PURE__ */ jsx202(Icon, { icon: "chevron-down" });
+  } else if (expanded && !expanderIcon) {
+    icon = /* @__PURE__ */ jsx202(Icon, { icon: "chevron-up" });
+  } else {
+    icon = /* @__PURE__ */ jsx202(Icon, { icon: expanderIcon });
+  }
+  return /* @__PURE__ */ jsxs73(
+    "div",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        COLUMNMENUEXPANDER_CLASSNAME
+      ),
+      children: [
+        /* @__PURE__ */ jsxs73(ColumnMenuItem, { text: itemText, icon: itemIcon, children: [
+          /* @__PURE__ */ jsx202("span", { className: "k-spacer" }),
+          /* @__PURE__ */ jsx202("span", { className: "k-expander-indicator", children: icon })
+        ] }),
+        expanded && /* @__PURE__ */ jsx202(ColumnMenuItemContent, { children: itemContent }),
+        props.children
+      ]
+    }
+  );
+};
+ColumnMenuExpander.states = states69;
+ColumnMenuExpander.options = options63;
+ColumnMenuExpander.className = COLUMNMENUEXPANDER_CLASSNAME;
+ColumnMenuExpander.defaultProps = defaultProps64;
+
+// src/column-menu/templates/column-menu-normal.tsx
+import { jsx as jsx203, jsxs as jsxs74 } from "react/jsx-runtime";
+var ColumnMenuNormal = (props) => /* @__PURE__ */ jsx203(
+  ColumnMenu,
+  {
+    children: [
+      /* @__PURE__ */ jsxs74(ColumnMenuItemWrapper, { children: [
+        /* @__PURE__ */ jsx203(ColumnMenuItem, { text: "Item 1", icon: "sort-asc-small" }),
+        /* @__PURE__ */ jsx203(ColumnMenuItem, { text: "Item 2", icon: "sort-desc-small" })
+      ] }),
+      /* @__PURE__ */ jsx203(ColumnMenuItemWrapper, { children: /* @__PURE__ */ jsx203(ColumnMenuExpander, { itemText: "Expandable item 1", itemIcon: "columns" }) }),
+      /* @__PURE__ */ jsx203(ColumnMenuItemWrapper, { children: /* @__PURE__ */ jsx203(ColumnMenuExpander, { itemText: "Expandable item 2", itemIcon: "filter" }) }),
+      /* @__PURE__ */ jsx203(ColumnMenuItemWrapper, { children: /* @__PURE__ */ jsx203(ColumnMenuExpander, { itemText: "Item with icons", itemIcon: "arrows-left-right", expanderIcon: "window-restore" }) })
+    ],
+    ...props
+  }
+);
+
+// src/column-menu/templates/column-menu-tabbed.tsx
+import { jsx as jsx204, jsxs as jsxs75 } from "react/jsx-runtime";
+
+// src/column-menu/templates/filter-menu-normal.tsx
+import { jsx as jsx205, jsxs as jsxs76 } from "react/jsx-runtime";
+
+// src/column-menu/templates/filter-menu-multi-check.tsx
+import { jsx as jsx206, jsxs as jsxs77 } from "react/jsx-runtime";
+
 // src/grid/tests/grid-column-resizing-actions.tsx
-import { Fragment as Fragment51, jsx as jsx195, jsxs as jsxs71 } from "react/jsx-runtime";
+import { Fragment as Fragment52, jsx as jsx207, jsxs as jsxs78 } from "react/jsx-runtime";
 var styles = `
     .k-animation-container,
     .k-popup {
@@ -9265,133 +9496,103 @@ var styles = `
         margin-inline-end: 16px;
     }
 `;
-var grid_column_resizing_actions_default = () => /* @__PURE__ */ jsxs71(Fragment51, { children: [
-  /* @__PURE__ */ jsx195("style", { children: styles }),
-  /* @__PURE__ */ jsxs71("div", { id: "test-area", children: [
-    /* @__PURE__ */ jsx195("section", { children: /* @__PURE__ */ jsxs71(Grid, { className: "k-grid-no-scrollbar", toolbar: /* @__PURE__ */ jsx195(GridToolbar, { children: /* @__PURE__ */ jsxs71(ChipList, { children: [
-      /* @__PURE__ */ jsx195(Chip, { text: "Units in Stock", icon: "sort-asc-small", actions: /* @__PURE__ */ jsxs71(Fragment51, { children: [
-        /* @__PURE__ */ jsx195(ChipAction, { type: "more" }),
-        /* @__PURE__ */ jsx195(ChipAction, { type: "remove" })
+var grid_column_resizing_actions_default = () => /* @__PURE__ */ jsxs78(Fragment52, { children: [
+  /* @__PURE__ */ jsx207("style", { children: styles }),
+  /* @__PURE__ */ jsxs78("div", { id: "test-area", children: [
+    /* @__PURE__ */ jsx207("section", { children: /* @__PURE__ */ jsxs78(Grid, { className: "k-grid-no-scrollbar", toolbar: /* @__PURE__ */ jsx207(GridToolbar, { children: /* @__PURE__ */ jsxs78(ChipList, { children: [
+      /* @__PURE__ */ jsx207(Chip, { text: "Units in Stock", icon: "sort-asc-small", actions: /* @__PURE__ */ jsxs78(Fragment52, { children: [
+        /* @__PURE__ */ jsx207(ChipAction, { type: "more" }),
+        /* @__PURE__ */ jsx207(ChipAction, { type: "remove" })
       ] }) }),
-      /* @__PURE__ */ jsx195(Chip, { text: "Category", icon: "sort-desc-small", actions: /* @__PURE__ */ jsxs71(Fragment51, { children: [
-        /* @__PURE__ */ jsx195(ChipAction, { type: "more" }),
-        /* @__PURE__ */ jsx195(ChipAction, { type: "remove" })
+      /* @__PURE__ */ jsx207(Chip, { text: "Category", icon: "sort-desc-small", actions: /* @__PURE__ */ jsxs78(Fragment52, { children: [
+        /* @__PURE__ */ jsx207(ChipAction, { type: "more" }),
+        /* @__PURE__ */ jsx207(ChipAction, { type: "remove" })
       ] }) })
-    ] }) }), pager: /* @__PURE__ */ jsx195(GridPager, { refresh: false }), children: [
-      /* @__PURE__ */ jsx195(GridHeader, { children: /* @__PURE__ */ jsx195("div", { className: "k-grid-header-wrap", children: /* @__PURE__ */ jsxs71(GridHeaderTable, { children: [
-        /* @__PURE__ */ jsxs71("colgroup", { children: [
-          /* @__PURE__ */ jsx195("col", {}),
-          /* @__PURE__ */ jsx195("col", {}),
-          /* @__PURE__ */ jsx195("col", {})
+    ] }) }), pager: /* @__PURE__ */ jsx207(GridPager, { refresh: false }), children: [
+      /* @__PURE__ */ jsx207(GridHeader, { children: /* @__PURE__ */ jsx207("div", { className: "k-grid-header-wrap", children: /* @__PURE__ */ jsxs78(GridHeaderTable, { children: [
+        /* @__PURE__ */ jsxs78("colgroup", { children: [
+          /* @__PURE__ */ jsx207("col", {}),
+          /* @__PURE__ */ jsx207("col", {}),
+          /* @__PURE__ */ jsx207("col", {})
         ] }),
-        /* @__PURE__ */ jsx195(TableThead, { children: /* @__PURE__ */ jsxs71(TableRow, { children: [
-          /* @__PURE__ */ jsx195(GridHeaderCell, { sortable: true, menu: "column", columnTitle: "Product Id" }),
-          /* @__PURE__ */ jsx195(GridHeaderCell, { sortable: true, menu: "column", columnTitle: "Unit Price" }),
-          /* @__PURE__ */ jsx195(GridHeaderCell, { sortable: true, menu: "column", columnTitle: "Discontinued" }),
-          /* @__PURE__ */ jsx195(GridHeaderCell, { sortable: true, menu: "column", columnTitle: "Category" })
+        /* @__PURE__ */ jsx207(TableThead, { children: /* @__PURE__ */ jsxs78(TableRow, { children: [
+          /* @__PURE__ */ jsx207(GridHeaderCell, { sortable: true, menu: "column", columnTitle: "Product Id" }),
+          /* @__PURE__ */ jsx207(GridHeaderCell, { sortable: true, menu: "column", columnTitle: "Unit Price" }),
+          /* @__PURE__ */ jsx207(GridHeaderCell, { sortable: true, menu: "column", columnTitle: "Discontinued" }),
+          /* @__PURE__ */ jsx207(GridHeaderCell, { sortable: true, menu: "column", columnTitle: "Category" })
         ] }) })
       ] }) }) }),
-      /* @__PURE__ */ jsx195(GridContainer, { children: /* @__PURE__ */ jsx195(GridContent, { children: /* @__PURE__ */ jsxs71(GridTable, { children: [
-        /* @__PURE__ */ jsxs71("colgroup", { children: [
-          /* @__PURE__ */ jsx195("col", {}),
-          /* @__PURE__ */ jsx195("col", {}),
-          /* @__PURE__ */ jsx195("col", {})
+      /* @__PURE__ */ jsx207(GridContainer, { children: /* @__PURE__ */ jsx207(GridContent, { children: /* @__PURE__ */ jsxs78(GridTable, { children: [
+        /* @__PURE__ */ jsxs78("colgroup", { children: [
+          /* @__PURE__ */ jsx207("col", {}),
+          /* @__PURE__ */ jsx207("col", {}),
+          /* @__PURE__ */ jsx207("col", {})
         ] }),
-        /* @__PURE__ */ jsxs71(TableTbody, { children: [
-          /* @__PURE__ */ jsxs71(TableRow, { className: "k-master-row", children: [
-            /* @__PURE__ */ jsx195(TableTd, { children: "Chef Anton's Gumbo" }),
-            /* @__PURE__ */ jsx195(TableTd, { children: "21.35" }),
-            /* @__PURE__ */ jsx195(TableTd, { children: "0" }),
-            /* @__PURE__ */ jsx195(TableTd, { children: "Condiments" })
+        /* @__PURE__ */ jsxs78(TableTbody, { children: [
+          /* @__PURE__ */ jsxs78(TableRow, { className: "k-master-row", children: [
+            /* @__PURE__ */ jsx207(TableTd, { children: "Chef Anton's Gumbo" }),
+            /* @__PURE__ */ jsx207(TableTd, { children: "21.35" }),
+            /* @__PURE__ */ jsx207(TableTd, { children: "0" }),
+            /* @__PURE__ */ jsx207(TableTd, { children: "Condiments" })
           ] }),
-          /* @__PURE__ */ jsxs71(TableRow, { className: "k-alt", alt: true, children: [
-            /* @__PURE__ */ jsx195(TableTd, { children: "Alice Mutton" }),
-            /* @__PURE__ */ jsx195(TableTd, { children: "39" }),
-            /* @__PURE__ */ jsx195(TableTd, { children: "0" }),
-            /* @__PURE__ */ jsx195(TableTd, { children: "Meat/Poultry" })
+          /* @__PURE__ */ jsxs78(TableRow, { className: "k-alt", alt: true, children: [
+            /* @__PURE__ */ jsx207(TableTd, { children: "Alice Mutton" }),
+            /* @__PURE__ */ jsx207(TableTd, { children: "39" }),
+            /* @__PURE__ */ jsx207(TableTd, { children: "0" }),
+            /* @__PURE__ */ jsx207(TableTd, { children: "Meat/Poultry" })
           ] }),
-          /* @__PURE__ */ jsxs71(TableRow, { className: "k-master-row", children: [
-            /* @__PURE__ */ jsx195(TableTd, { children: "Singaporean Hokkien Fried Mee" }),
-            /* @__PURE__ */ jsx195(TableTd, { children: "123.79" }),
-            /* @__PURE__ */ jsx195(TableTd, { children: "1" }),
-            /* @__PURE__ */ jsx195(TableTd, { children: "Meat/Poultry" })
+          /* @__PURE__ */ jsxs78(TableRow, { className: "k-master-row", children: [
+            /* @__PURE__ */ jsx207(TableTd, { children: "Singaporean Hokkien Fried Mee" }),
+            /* @__PURE__ */ jsx207(TableTd, { children: "123.79" }),
+            /* @__PURE__ */ jsx207(TableTd, { children: "1" }),
+            /* @__PURE__ */ jsx207(TableTd, { children: "Meat/Poultry" })
           ] }),
-          /* @__PURE__ */ jsxs71(TableRow, { className: "k-alt", alt: true, children: [
-            /* @__PURE__ */ jsx195(TableTd, { children: "Gorgonzola Telino" }),
-            /* @__PURE__ */ jsx195(TableTd, { children: "12.5" }),
-            /* @__PURE__ */ jsx195(TableTd, { children: "0" }),
-            /* @__PURE__ */ jsx195(TableTd, { children: "Meat/Poultry" })
+          /* @__PURE__ */ jsxs78(TableRow, { className: "k-alt", alt: true, children: [
+            /* @__PURE__ */ jsx207(TableTd, { children: "Gorgonzola Telino" }),
+            /* @__PURE__ */ jsx207(TableTd, { children: "12.5" }),
+            /* @__PURE__ */ jsx207(TableTd, { children: "0" }),
+            /* @__PURE__ */ jsx207(TableTd, { children: "Meat/Poultry" })
           ] }),
-          /* @__PURE__ */ jsxs71(TableRow, { className: "k-master-row", children: [
-            /* @__PURE__ */ jsx195(TableTd, { children: "Perth Pasties" }),
-            /* @__PURE__ */ jsx195(TableTd, { children: "32.8" }),
-            /* @__PURE__ */ jsx195(TableTd, { children: "0" }),
-            /* @__PURE__ */ jsx195(TableTd, { children: "Meat/Poultry" })
+          /* @__PURE__ */ jsxs78(TableRow, { className: "k-master-row", children: [
+            /* @__PURE__ */ jsx207(TableTd, { children: "Perth Pasties" }),
+            /* @__PURE__ */ jsx207(TableTd, { children: "32.8" }),
+            /* @__PURE__ */ jsx207(TableTd, { children: "0" }),
+            /* @__PURE__ */ jsx207(TableTd, { children: "Meat/Poultry" })
           ] })
         ] })
       ] }) }) })
     ] }) }),
-    /* @__PURE__ */ jsxs71(Popup, { className: "k-column-menu k-grid-columnmenu-popup", children: [
-      /* @__PURE__ */ jsxs71("div", { className: "k-columnmenu-item-wrapper", children: [
-        /* @__PURE__ */ jsxs71("div", { className: "k-columnmenu-item", children: [
-          /* @__PURE__ */ jsx195(Icon, { icon: "sort-asc-small" }),
-          "Sort ascending"
-        ] }),
-        /* @__PURE__ */ jsxs71("div", { className: "k-columnmenu-item", children: [
-          /* @__PURE__ */ jsx195(Icon, { icon: "sort-desc-small" }),
-          "Sort descending"
-        ] })
+    /* @__PURE__ */ jsx207(Popup, { className: "k-grid-columnmenu-popup", children: /* @__PURE__ */ jsxs78(ColumnMenuNormal, { children: [
+      /* @__PURE__ */ jsxs78(ColumnMenuItemWrapper, { children: [
+        /* @__PURE__ */ jsx207(ColumnMenuItem, { text: "Sort ascending", icon: "sort-asc-small" }),
+        /* @__PURE__ */ jsx207(ColumnMenuItem, { text: "Sort descending", icon: "sort-desc-small" })
       ] }),
-      /* @__PURE__ */ jsx195("div", { className: "k-columnmenu-item-wrapper", children: /* @__PURE__ */ jsx195("div", { className: "k-expander", children: /* @__PURE__ */ jsxs71("div", { className: "k-columnmenu-item", children: [
-        /* @__PURE__ */ jsx195(Icon, { icon: "columns" }),
-        "Columns",
-        /* @__PURE__ */ jsx195("span", { className: "k-spacer" }),
-        /* @__PURE__ */ jsx195("span", { className: "k-expander-indicator", children: /* @__PURE__ */ jsx195(Icon, { icon: "chevron-down" }) })
-      ] }) }) }),
-      /* @__PURE__ */ jsx195("div", { className: "k-columnmenu-item-wrapper", children: /* @__PURE__ */ jsx195("div", { className: "k-expander", children: /* @__PURE__ */ jsxs71("div", { className: "k-columnmenu-item", children: [
-        /* @__PURE__ */ jsx195(Icon, { icon: "filter" }),
-        "Filter",
-        /* @__PURE__ */ jsx195("span", { className: "k-spacer" }),
-        /* @__PURE__ */ jsx195("span", { className: "k-expander-indicator", children: /* @__PURE__ */ jsx195(Icon, { icon: "chevron-down" }) })
-      ] }) }) }),
-      /* @__PURE__ */ jsx195("div", { className: "k-columnmenu-item-wrapper", children: /* @__PURE__ */ jsxs71("div", { className: "k-columnmenu-item", children: [
-        /* @__PURE__ */ jsx195(Icon, { icon: "group" }),
-        "Group column"
-      ] }) }),
-      /* @__PURE__ */ jsx195("div", { className: "k-columnmenu-item-wrapper", children: /* @__PURE__ */ jsx195("div", { className: "k-expander", children: /* @__PURE__ */ jsxs71("div", { className: "k-columnmenu-item", children: [
-        /* @__PURE__ */ jsx195(Icon, { icon: "arrows-left-right" }),
-        "Resize column",
-        /* @__PURE__ */ jsx195("span", { className: "k-spacer" }),
-        /* @__PURE__ */ jsx195("span", { className: "k-expander-indicator", children: /* @__PURE__ */ jsx195(Icon, { icon: "window-restore" }) })
-      ] }) }) }),
-      /* @__PURE__ */ jsx195("div", { className: "k-columnmenu-item-wrapper", children: /* @__PURE__ */ jsxs71("div", { className: "k-columnmenu-item", children: [
-        /* @__PURE__ */ jsx195(Icon, { icon: "group" }),
-        "Autosize all columns"
-      ] }) }),
-      /* @__PURE__ */ jsx195("div", { className: "k-columnmenu-item-wrapper", children: /* @__PURE__ */ jsx195("div", { className: "k-expander", children: /* @__PURE__ */ jsxs71("div", { className: "k-columnmenu-item", children: [
-        /* @__PURE__ */ jsx195(Icon, { icon: "set-column-position" }),
-        "Set column position",
-        /* @__PURE__ */ jsx195("span", { className: "k-spacer" }),
-        /* @__PURE__ */ jsx195("span", { className: "k-expander-indicator", children: /* @__PURE__ */ jsx195(Icon, { icon: "chevron-down" }) })
-      ] }) }) })
-    ] }),
-    /* @__PURE__ */ jsx195("section", { children: /* @__PURE__ */ jsx195(WindowNormal, { title: "Column Width", actions: ["x"], className: "k-grid-window", actionButtonsAlign: "start", actionButtons: /* @__PURE__ */ jsxs71(Fragment51, { children: [
-      /* @__PURE__ */ jsx195(Button, { themeColor: "primary", children: "Apply" }),
-      /* @__PURE__ */ jsx195(Button, { children: "Cancel" })
-    ] }), children: /* @__PURE__ */ jsxs71(FormNormal, { formButtons: null, children: [
-      /* @__PURE__ */ jsx195(
+      /* @__PURE__ */ jsx207(ColumnMenuItemWrapper, { children: /* @__PURE__ */ jsx207(ColumnMenuExpander, { itemText: "Columns", itemIcon: "columns" }) }),
+      /* @__PURE__ */ jsx207(ColumnMenuItemWrapper, { children: /* @__PURE__ */ jsx207(ColumnMenuExpander, { itemText: "Filter", itemIcon: "filter" }) }),
+      /* @__PURE__ */ jsx207(ColumnMenuItemWrapper, { children: /* @__PURE__ */ jsx207(ColumnMenuItem, { text: "Group column", icon: "group" }) }),
+      /* @__PURE__ */ jsxs78(ColumnMenuItemWrapper, { children: [
+        /* @__PURE__ */ jsx207(ColumnMenuExpander, { itemText: "Resize column", itemIcon: "arrows-left-right", expanderIcon: "window-restore" }),
+        /* @__PURE__ */ jsx207(ColumnMenuItem, { text: "Autosize all columns", icon: "display-inline-flex" })
+      ] }),
+      /* @__PURE__ */ jsx207(ColumnMenuItemWrapper, { children: /* @__PURE__ */ jsx207(ColumnMenuExpander, { itemText: "Set column position", itemIcon: "set-column-position" }) })
+    ] }) }),
+    /* @__PURE__ */ jsx207("section", { children: /* @__PURE__ */ jsx207(WindowNormal, { title: "Column Width", actions: ["x"], className: "k-grid-window", actionButtonsAlign: "start", actionButtons: /* @__PURE__ */ jsxs78(Fragment52, { children: [
+      /* @__PURE__ */ jsx207(Button, { themeColor: "primary", children: "Apply" }),
+      /* @__PURE__ */ jsx207(Button, { children: "Cancel" })
+    ] }), children: /* @__PURE__ */ jsxs78(FormNormal, { formButtons: null, children: [
+      /* @__PURE__ */ jsx207(
         FormField,
         {
           label: "Value in px",
-          editor: /* @__PURE__ */ jsx195(Textbox, { value: "412" })
+          editor: /* @__PURE__ */ jsx207(Textbox, { value: "412" })
         }
       ),
-      /* @__PURE__ */ jsx195(
+      /* @__PURE__ */ jsx207(
         FormField,
         {
-          editor: /* @__PURE__ */ jsxs71(Fragment51, { children: [
-            /* @__PURE__ */ jsx195(Checkbox, {}),
-            /* @__PURE__ */ jsx195("label", { className: "k-checkbox-label", children: "Autofit to content" })
+          editor: /* @__PURE__ */ jsxs78(Fragment52, { children: [
+            /* @__PURE__ */ jsx207(Checkbox, {}),
+            /* @__PURE__ */ jsx207("label", { className: "k-checkbox-label", children: "Autofit to content" })
           ] })
         }
       )