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

package/dist/esm/grid/tests/grid-column-reordering.js

@@ -7025,7 +7025,8 @@ var Slider = (props) => {
     focus,
     active,
     trackStyle,
-    dir
+    dir,
+    ...other
   } = props;
   let iconIncrease;
   let iconDecrease;
@@ -7036,46 +7037,54 @@ var Slider = (props) => {
     iconIncrease = "caret-alt-up";
     iconDecrease = "caret-alt-down";
   }
-  return /* @__PURE__ */ jsxs37("div", { className: classNames(
-    SLIDER_CLASSNAME,
-    props.className,
-    stateClassNames(SLIDER_CLASSNAME, {
-      readonly,
-      disabled
-    }),
+  return /* @__PURE__ */ jsxs37(
+    "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__ */ jsx117(Button, { className: "k-button-decrease", rounded: "full", icon: iconDecrease }),
+        /* @__PURE__ */ jsxs37("div", { className: "k-slider-track-wrap", children: [
+          showTicks && /* @__PURE__ */ jsx117("ul", { className: "k-reset k-slider-items", children: props.children }),
+          /* @__PURE__ */ jsxs37("div", { className: "k-slider-track", style: trackStyle, children: [
+            /* @__PURE__ */ jsx117("div", { className: "k-slider-selection" }),
+            type === "range" && /* @__PURE__ */ jsx117("span", { className: classNames(
+              "k-draghandle",
+              "k-draghandle-start",
+              stateClassNames(SLIDER_CLASSNAME, {
+                hover,
+                focus,
+                active
+              })
+            ) }),
+            /* @__PURE__ */ jsx117("span", { className: classNames(
+              "k-draghandle",
+              `k-draghandle-${handlePosition}`,
+              stateClassNames(SLIDER_CLASSNAME, {
+                hover,
+                focus,
+                active
+              })
+            ) })
+          ] })
+        ] }),
+        showButtons && /* @__PURE__ */ jsx117(Button, { className: "k-button-increase", rounded: "full", icon: iconIncrease })
+      ]
     }
-  ), dir, children: [
-    showButtons && /* @__PURE__ */ jsx117(Button, { className: "k-button-decrease", rounded: "full", icon: iconDecrease }),
-    /* @__PURE__ */ jsxs37("div", { className: "k-slider-track-wrap", children: [
-      showTicks && /* @__PURE__ */ jsx117("ul", { className: "k-reset k-slider-items", children: props.children }),
-      /* @__PURE__ */ jsxs37("div", { className: "k-slider-track", style: trackStyle, children: [
-        /* @__PURE__ */ jsx117("div", { className: "k-slider-selection" }),
-        type === "range" && /* @__PURE__ */ jsx117("span", { className: classNames(
-          "k-draghandle",
-          "k-draghandle-start",
-          stateClassNames(SLIDER_CLASSNAME, {
-            hover,
-            focus,
-            active
-          })
-        ) }),
-        /* @__PURE__ */ jsx117("span", { className: classNames(
-          "k-draghandle",
-          `k-draghandle-${handlePosition}`,
-          stateClassNames(SLIDER_CLASSNAME, {
-            hover,
-            focus,
-            active
-          })
-        ) })
-      ] })
-    ] }),
-    showButtons && /* @__PURE__ */ jsx117(Button, { className: "k-button-increase", rounded: "full", icon: iconIncrease })
-  ] });
+  );
 };
 Slider.states = states40;
 Slider.options = options36;
@@ -7096,16 +7105,25 @@ var SliderTick = (props) => {
     label = defaultProps38.label,
     orientation,
     large,
-    text
+    text,
+    ...other
   } = props;
-  return /* @__PURE__ */ jsx118("li", { className: classNames(
-    props.className,
-    SLIDER_TICK_CLASSNAME,
+  return /* @__PURE__ */ jsx118(
+    "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__ */ jsx118("span", { className: "k-label", children: text })
     }
-  ), style, children: label && /* @__PURE__ */ jsx118("span", { className: "k-label", children: text }) });
+  );
 };
 SliderTick.states = states41;
 SliderTick.options = options37;
@@ -8854,8 +8872,221 @@ var GridToolbar = (props) => /* @__PURE__ */ jsx180(
   }
 );
 
+// src/column-menu/column-menu.spec.tsx
+import { jsx as jsx181 } from "react/jsx-runtime";
+var COLUMNMENU_CLASSNAME = `k-column-menu`;
+var states60 = [];
+var options55 = {};
+var defaultProps56 = {
+  view: "list"
+};
+var ColumnMenu = (props) => {
+  const {
+    view = defaultProps56.view,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsx181(
+    "div",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        COLUMNMENU_CLASSNAME,
+        {
+          "k-column-menu-tabbed": view === "tabbed"
+        }
+      ),
+      children: props.children
+    }
+  );
+};
+ColumnMenu.states = states60;
+ColumnMenu.options = options55;
+ColumnMenu.className = COLUMNMENU_CLASSNAME;
+ColumnMenu.defaultProps = defaultProps56;
+
+// src/column-menu/column-menu-item.spec.tsx
+import { jsx as jsx182, jsxs as jsxs62 } from "react/jsx-runtime";
+var COLUMNMENUITEM_CLASSNAME = `k-columnmenu-item`;
+var states61 = [
+  States.focus,
+  States.selected
+];
+var options56 = {};
+var defaultProps57 = {};
+var ColumnMenuItem = (props) => {
+  const {
+    focus,
+    selected,
+    text,
+    icon,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsxs62(
+    "div",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        COLUMNMENUITEM_CLASSNAME,
+        stateClassNames(COLUMNMENUITEM_CLASSNAME, {
+          focus,
+          selected
+        })
+      ),
+      children: [
+        /* @__PURE__ */ jsx182(Icon, { icon }),
+        text,
+        props.children
+      ]
+    }
+  );
+};
+ColumnMenuItem.states = states61;
+ColumnMenuItem.options = options56;
+ColumnMenuItem.className = COLUMNMENUITEM_CLASSNAME;
+ColumnMenuItem.defaultProps = defaultProps57;
+
+// src/column-menu/column-menu-item-wrapper.tsx
+import { jsx as jsx183 } from "react/jsx-runtime";
+var className24 = `k-columnmenu-item-wrapper`;
+var ColumnMenuItemWrapper = (props) => /* @__PURE__ */ jsx183(
+  "div",
+  {
+    ...props,
+    className: classNames(
+      props.className,
+      className24
+    ),
+    children: props.children
+  }
+);
+
+// src/column-menu/column-menu-item-content.tsx
+import { jsx as jsx184 } from "react/jsx-runtime";
+var className25 = `k-columnmenu-item-content`;
+var ColumnMenuItemContent = (props) => /* @__PURE__ */ jsx184(
+  "div",
+  {
+    ...props,
+    className: classNames(
+      props.className,
+      className25,
+      "k-columns-item"
+    ),
+    children: props.children
+  }
+);
+
+// src/column-menu/filter-menu.spec.tsx
+import { jsx as jsx185 } from "react/jsx-runtime";
+var FILTERMENU_CLASSNAME = `k-filter-menu`;
+var states62 = [];
+var options57 = {};
+var defaultProps58 = {};
+var FilterMenu = (props) => {
+  const {
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsx185(
+    "form",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        FILTERMENU_CLASSNAME
+      ),
+      children: /* @__PURE__ */ jsx185("div", { className: "k-filter-menu-container", children: props.children })
+    }
+  );
+};
+FilterMenu.states = states62;
+FilterMenu.options = options57;
+FilterMenu.className = FILTERMENU_CLASSNAME;
+FilterMenu.defaultProps = defaultProps58;
+
+// src/column-menu/column-menu-multicheck-wrap.tsx
+import { jsx as jsx186 } from "react/jsx-runtime";
+
+// src/column-menu/column-menu-multicheck-item.tsx
+import { jsx as jsx187, jsxs as jsxs63 } from "react/jsx-runtime";
+
+// src/column-menu/column-menu-expander.spec.tsx
+import { Fragment as Fragment42, jsx as jsx188, jsxs as jsxs64 } from "react/jsx-runtime";
+var COLUMNMENUEXPANDER_CLASSNAME = `k-expander`;
+var states63 = [];
+var options58 = {};
+var defaultProps59 = {};
+var ColumnMenuExpander = (props) => {
+  const {
+    itemText,
+    itemIcon,
+    expanded,
+    itemContent,
+    expanderIcon,
+    ...other
+  } = props;
+  let icon = /* @__PURE__ */ jsx188(Fragment42, {});
+  if (!expanded && !expanderIcon) {
+    icon = /* @__PURE__ */ jsx188(Icon, { icon: "chevron-down" });
+  } else if (expanded && !expanderIcon) {
+    icon = /* @__PURE__ */ jsx188(Icon, { icon: "chevron-up" });
+  } else {
+    icon = /* @__PURE__ */ jsx188(Icon, { icon: expanderIcon });
+  }
+  return /* @__PURE__ */ jsxs64(
+    "div",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        COLUMNMENUEXPANDER_CLASSNAME
+      ),
+      children: [
+        /* @__PURE__ */ jsxs64(ColumnMenuItem, { text: itemText, icon: itemIcon, children: [
+          /* @__PURE__ */ jsx188("span", { className: "k-spacer" }),
+          /* @__PURE__ */ jsx188("span", { className: "k-expander-indicator", children: icon })
+        ] }),
+        expanded && /* @__PURE__ */ jsx188(ColumnMenuItemContent, { children: itemContent }),
+        props.children
+      ]
+    }
+  );
+};
+ColumnMenuExpander.states = states63;
+ColumnMenuExpander.options = options58;
+ColumnMenuExpander.className = COLUMNMENUEXPANDER_CLASSNAME;
+ColumnMenuExpander.defaultProps = defaultProps59;
+
+// src/column-menu/templates/column-menu-normal.tsx
+import { jsx as jsx189, jsxs as jsxs65 } from "react/jsx-runtime";
+var ColumnMenuNormal = (props) => /* @__PURE__ */ jsx189(
+  ColumnMenu,
+  {
+    children: [
+      /* @__PURE__ */ jsxs65(ColumnMenuItemWrapper, { children: [
+        /* @__PURE__ */ jsx189(ColumnMenuItem, { text: "Item 1", icon: "sort-asc-small" }),
+        /* @__PURE__ */ jsx189(ColumnMenuItem, { text: "Item 2", icon: "sort-desc-small" })
+      ] }),
+      /* @__PURE__ */ jsx189(ColumnMenuItemWrapper, { children: /* @__PURE__ */ jsx189(ColumnMenuExpander, { itemText: "Expandable item 1", itemIcon: "columns" }) }),
+      /* @__PURE__ */ jsx189(ColumnMenuItemWrapper, { children: /* @__PURE__ */ jsx189(ColumnMenuExpander, { itemText: "Expandable item 2", itemIcon: "filter" }) }),
+      /* @__PURE__ */ jsx189(ColumnMenuItemWrapper, { children: /* @__PURE__ */ jsx189(ColumnMenuExpander, { itemText: "Item with icons", itemIcon: "arrows-left-right", expanderIcon: "window-restore" }) })
+    ],
+    ...props
+  }
+);
+
+// src/column-menu/templates/column-menu-tabbed.tsx
+import { jsx as jsx190, jsxs as jsxs66 } from "react/jsx-runtime";
+
+// src/column-menu/templates/filter-menu-normal.tsx
+import { jsx as jsx191, jsxs as jsxs67 } from "react/jsx-runtime";
+
+// src/column-menu/templates/filter-menu-multi-check.tsx
+import { jsx as jsx192, jsxs as jsxs68 } from "react/jsx-runtime";
+
 // src/grid/tests/grid-column-reordering.tsx
-import { Fragment as Fragment42, jsx as jsx181, jsxs as jsxs62 } from "react/jsx-runtime";
+import { Fragment as Fragment43, jsx as jsx193, jsxs as jsxs69 } from "react/jsx-runtime";
 var styles = `
     .k-animation-container,
     .k-popup {
@@ -8873,154 +9104,121 @@ var styles = `
         left: 120px;
     }
 `;
-var grid_column_reordering_default = () => /* @__PURE__ */ jsxs62(Fragment42, { children: [
-  /* @__PURE__ */ jsx181("style", { children: styles }),
-  /* @__PURE__ */ jsxs62("div", { id: "test-area", children: [
-    /* @__PURE__ */ jsx181("section", { children: /* @__PURE__ */ jsxs62(Grid, { className: "k-grid-no-scrollbar", toolbar: /* @__PURE__ */ jsx181(GridToolbar, { children: /* @__PURE__ */ jsxs62(ChipList, { children: [
-      /* @__PURE__ */ jsx181(Chip, { text: "Units in Stock", icon: "sort-asc-small", actions: /* @__PURE__ */ jsxs62(Fragment42, { children: [
-        /* @__PURE__ */ jsx181(ChipAction, { type: "more" }),
-        /* @__PURE__ */ jsx181(ChipAction, { type: "remove" })
+var grid_column_reordering_default = () => /* @__PURE__ */ jsxs69(Fragment43, { children: [
+  /* @__PURE__ */ jsx193("style", { children: styles }),
+  /* @__PURE__ */ jsxs69("div", { id: "test-area", children: [
+    /* @__PURE__ */ jsx193("section", { children: /* @__PURE__ */ jsxs69(Grid, { className: "k-grid-no-scrollbar", toolbar: /* @__PURE__ */ jsx193(GridToolbar, { children: /* @__PURE__ */ jsxs69(ChipList, { children: [
+      /* @__PURE__ */ jsx193(Chip, { text: "Units in Stock", icon: "sort-asc-small", actions: /* @__PURE__ */ jsxs69(Fragment43, { children: [
+        /* @__PURE__ */ jsx193(ChipAction, { type: "more" }),
+        /* @__PURE__ */ jsx193(ChipAction, { type: "remove" })
       ] }) }),
-      /* @__PURE__ */ jsx181(Chip, { text: "Category", icon: "sort-desc-small", actions: /* @__PURE__ */ jsxs62(Fragment42, { children: [
-        /* @__PURE__ */ jsx181(ChipAction, { type: "more" }),
-        /* @__PURE__ */ jsx181(ChipAction, { type: "remove" })
+      /* @__PURE__ */ jsx193(Chip, { text: "Category", icon: "sort-desc-small", actions: /* @__PURE__ */ jsxs69(Fragment43, { children: [
+        /* @__PURE__ */ jsx193(ChipAction, { type: "more" }),
+        /* @__PURE__ */ jsx193(ChipAction, { type: "remove" })
       ] }) })
-    ] }) }), pager: /* @__PURE__ */ jsx181(GridPager, { refresh: false }), children: [
-      /* @__PURE__ */ jsx181(GridHeader, { children: /* @__PURE__ */ jsx181("div", { className: "k-grid-header-wrap", children: /* @__PURE__ */ jsxs62(GridHeaderTable, { children: [
-        /* @__PURE__ */ jsxs62("colgroup", { children: [
-          /* @__PURE__ */ jsx181("col", {}),
-          /* @__PURE__ */ jsx181("col", {}),
-          /* @__PURE__ */ jsx181("col", {})
+    ] }) }), pager: /* @__PURE__ */ jsx193(GridPager, { refresh: false }), children: [
+      /* @__PURE__ */ jsx193(GridHeader, { children: /* @__PURE__ */ jsx193("div", { className: "k-grid-header-wrap", children: /* @__PURE__ */ jsxs69(GridHeaderTable, { children: [
+        /* @__PURE__ */ jsxs69("colgroup", { children: [
+          /* @__PURE__ */ jsx193("col", {}),
+          /* @__PURE__ */ jsx193("col", {}),
+          /* @__PURE__ */ jsx193("col", {})
         ] }),
-        /* @__PURE__ */ jsxs62(TableThead, { children: [
-          /* @__PURE__ */ jsx181(GridHeaderCell, { sortable: true, menu: "column", columnTitle: "Product Id" }),
-          /* @__PURE__ */ jsx181(GridHeaderCell, { sortable: true, menu: "column", columnTitle: "Unit Price" }),
-          /* @__PURE__ */ jsx181(GridHeaderCell, { sortable: true, menu: "column", columnTitle: "Discontinued" }),
-          /* @__PURE__ */ jsx181(GridHeaderCell, { sortable: true, menu: "column", columnTitle: "Category" })
+        /* @__PURE__ */ jsxs69(TableThead, { children: [
+          /* @__PURE__ */ jsx193(GridHeaderCell, { sortable: true, menu: "column", columnTitle: "Product Id" }),
+          /* @__PURE__ */ jsx193(GridHeaderCell, { sortable: true, menu: "column", columnTitle: "Unit Price" }),
+          /* @__PURE__ */ jsx193(GridHeaderCell, { sortable: true, menu: "column", columnTitle: "Discontinued" }),
+          /* @__PURE__ */ jsx193(GridHeaderCell, { sortable: true, menu: "column", columnTitle: "Category" })
         ] })
       ] }) }) }),
-      /* @__PURE__ */ jsx181(GridContainer, { children: /* @__PURE__ */ jsx181(GridContent, { children: /* @__PURE__ */ jsxs62(GridTable, { children: [
-        /* @__PURE__ */ jsxs62("colgroup", { children: [
-          /* @__PURE__ */ jsx181("col", {}),
-          /* @__PURE__ */ jsx181("col", {}),
-          /* @__PURE__ */ jsx181("col", {})
+      /* @__PURE__ */ jsx193(GridContainer, { children: /* @__PURE__ */ jsx193(GridContent, { children: /* @__PURE__ */ jsxs69(GridTable, { children: [
+        /* @__PURE__ */ jsxs69("colgroup", { children: [
+          /* @__PURE__ */ jsx193("col", {}),
+          /* @__PURE__ */ jsx193("col", {}),
+          /* @__PURE__ */ jsx193("col", {})
         ] }),
-        /* @__PURE__ */ jsxs62(TableTbody, { children: [
-          /* @__PURE__ */ jsxs62(TableRow, { className: "k-master-row", children: [
-            /* @__PURE__ */ jsx181(TableTd, { children: "Chef Anton's Gumbo" }),
-            /* @__PURE__ */ jsx181(TableTd, { children: "21.35" }),
-            /* @__PURE__ */ jsx181(TableTd, { children: "0" }),
-            /* @__PURE__ */ jsx181(TableTd, { children: "Condiments" })
+        /* @__PURE__ */ jsxs69(TableTbody, { children: [
+          /* @__PURE__ */ jsxs69(TableRow, { className: "k-master-row", children: [
+            /* @__PURE__ */ jsx193(TableTd, { children: "Chef Anton's Gumbo" }),
+            /* @__PURE__ */ jsx193(TableTd, { children: "21.35" }),
+            /* @__PURE__ */ jsx193(TableTd, { children: "0" }),
+            /* @__PURE__ */ jsx193(TableTd, { children: "Condiments" })
           ] }),
-          /* @__PURE__ */ jsxs62(TableRow, { className: "k-alt", alt: true, children: [
-            /* @__PURE__ */ jsx181(TableTd, { children: "Alice Mutton" }),
-            /* @__PURE__ */ jsx181(TableTd, { children: "39" }),
-            /* @__PURE__ */ jsx181(TableTd, { children: "0" }),
-            /* @__PURE__ */ jsx181(TableTd, { children: "Meat/Poultry" })
+          /* @__PURE__ */ jsxs69(TableRow, { className: "k-alt", alt: true, children: [
+            /* @__PURE__ */ jsx193(TableTd, { children: "Alice Mutton" }),
+            /* @__PURE__ */ jsx193(TableTd, { children: "39" }),
+            /* @__PURE__ */ jsx193(TableTd, { children: "0" }),
+            /* @__PURE__ */ jsx193(TableTd, { children: "Meat/Poultry" })
           ] }),
-          /* @__PURE__ */ jsxs62(TableRow, { className: "k-master-row", children: [
-            /* @__PURE__ */ jsx181(TableTd, { children: "Singaporean Hokkien Fried Mee" }),
-            /* @__PURE__ */ jsx181(TableTd, { children: "123.79" }),
-            /* @__PURE__ */ jsx181(TableTd, { children: "1" }),
-            /* @__PURE__ */ jsx181(TableTd, { children: "Meat/Poultry" })
+          /* @__PURE__ */ jsxs69(TableRow, { className: "k-master-row", children: [
+            /* @__PURE__ */ jsx193(TableTd, { children: "Singaporean Hokkien Fried Mee" }),
+            /* @__PURE__ */ jsx193(TableTd, { children: "123.79" }),
+            /* @__PURE__ */ jsx193(TableTd, { children: "1" }),
+            /* @__PURE__ */ jsx193(TableTd, { children: "Meat/Poultry" })
           ] }),
-          /* @__PURE__ */ jsxs62(TableRow, { className: "k-alt", alt: true, children: [
-            /* @__PURE__ */ jsx181(TableTd, { children: "Gorgonzola Telino" }),
-            /* @__PURE__ */ jsx181(TableTd, { children: "12.5" }),
-            /* @__PURE__ */ jsx181(TableTd, { children: "0" }),
-            /* @__PURE__ */ jsx181(TableTd, { children: "Meat/Poultry" })
+          /* @__PURE__ */ jsxs69(TableRow, { className: "k-alt", alt: true, children: [
+            /* @__PURE__ */ jsx193(TableTd, { children: "Gorgonzola Telino" }),
+            /* @__PURE__ */ jsx193(TableTd, { children: "12.5" }),
+            /* @__PURE__ */ jsx193(TableTd, { children: "0" }),
+            /* @__PURE__ */ jsx193(TableTd, { children: "Meat/Poultry" })
           ] }),
-          /* @__PURE__ */ jsxs62(TableRow, { className: "k-master-row", children: [
-            /* @__PURE__ */ jsx181(TableTd, { children: "Perth Pasties" }),
-            /* @__PURE__ */ jsx181(TableTd, { children: "32.8" }),
-            /* @__PURE__ */ jsx181(TableTd, { children: "0" }),
-            /* @__PURE__ */ jsx181(TableTd, { children: "Meat/Poultry" })
+          /* @__PURE__ */ jsxs69(TableRow, { className: "k-master-row", children: [
+            /* @__PURE__ */ jsx193(TableTd, { children: "Perth Pasties" }),
+            /* @__PURE__ */ jsx193(TableTd, { children: "32.8" }),
+            /* @__PURE__ */ jsx193(TableTd, { children: "0" }),
+            /* @__PURE__ */ jsx193(TableTd, { children: "Meat/Poultry" })
           ] })
         ] })
       ] }) }) })
     ] }) }),
-    /* @__PURE__ */ jsxs62(Popup, { id: "discontinued", className: "k-column-menu k-grid-columnmenu-popup", children: [
-      /* @__PURE__ */ jsxs62("div", { className: "k-columnmenu-item-wrapper", children: [
-        /* @__PURE__ */ jsxs62("div", { className: "k-columnmenu-item", children: [
-          /* @__PURE__ */ jsx181(Icon, { icon: "sort-asc-small" }),
-          "Sort ascending"
-        ] }),
-        /* @__PURE__ */ jsxs62("div", { className: "k-columnmenu-item", children: [
-          /* @__PURE__ */ jsx181(Icon, { icon: "sort-desc-small" }),
-          "Sort descending"
-        ] })
+    /* @__PURE__ */ jsx193(Popup, { id: "discontinued", className: "k-grid-columnmenu-popup", children: /* @__PURE__ */ jsxs69(ColumnMenuNormal, { children: [
+      /* @__PURE__ */ jsxs69(ColumnMenuItemWrapper, { children: [
+        /* @__PURE__ */ jsx193(ColumnMenuItem, { text: "Sort ascending", icon: "sort-asc-small" }),
+        /* @__PURE__ */ jsx193(ColumnMenuItem, { text: "Sort descending", icon: "sort-desc-small" })
       ] }),
-      /* @__PURE__ */ jsx181("div", { className: "k-columnmenu-item-wrapper", children: /* @__PURE__ */ jsx181("div", { className: "k-expander", children: /* @__PURE__ */ jsxs62("div", { className: "k-columnmenu-item", children: [
-        /* @__PURE__ */ jsx181(Icon, { icon: "columns" }),
-        "Columns",
-        /* @__PURE__ */ jsx181("span", { className: "k-spacer" }),
-        /* @__PURE__ */ jsx181("span", { className: "k-expander-indicator", children: /* @__PURE__ */ jsx181(Icon, { icon: "chevron-down" }) })
-      ] }) }) }),
-      /* @__PURE__ */ jsx181("div", { className: "k-columnmenu-item-wrapper", children: /* @__PURE__ */ jsx181("div", { className: "k-expander", children: /* @__PURE__ */ jsxs62("div", { className: "k-columnmenu-item", children: [
-        /* @__PURE__ */ jsx181(Icon, { icon: "filter" }),
-        "Filter",
-        /* @__PURE__ */ jsx181("span", { className: "k-spacer" }),
-        /* @__PURE__ */ jsx181(Icon, { icon: "chevron-down" })
-      ] }) }) }),
-      /* @__PURE__ */ jsx181("div", { className: "k-columnmenu-item-wrapper", children: /* @__PURE__ */ jsxs62("div", { className: "k-columnmenu-item", children: [
-        /* @__PURE__ */ jsx181(Icon, { icon: "group" }),
-        "Group column"
-      ] }) }),
-      /* @__PURE__ */ jsxs62("div", { className: "k-columnmenu-item-wrapper", children: [
-        /* @__PURE__ */ jsxs62("div", { className: "k-columnmenu-item", children: [
-          /* @__PURE__ */ jsx181(Icon, { icon: "max-width" }),
-          "Autosize this column"
-        ] }),
-        /* @__PURE__ */ jsxs62("div", { className: "k-columnmenu-item", children: [
-          /* @__PURE__ */ jsx181(Icon, { icon: "display-inline-flex" }),
-          "Autosize all columns"
-        ] })
+      /* @__PURE__ */ jsx193(ColumnMenuItemWrapper, { children: /* @__PURE__ */ jsx193(ColumnMenuExpander, { itemText: "Columns", itemIcon: "columns" }) }),
+      /* @__PURE__ */ jsx193(ColumnMenuItemWrapper, { children: /* @__PURE__ */ jsx193(ColumnMenuExpander, { itemText: "Filter", itemIcon: "filter" }) }),
+      /* @__PURE__ */ jsx193(ColumnMenuItemWrapper, { children: /* @__PURE__ */ jsx193(ColumnMenuItem, { text: "Group column", icon: "group" }) }),
+      /* @__PURE__ */ jsxs69(ColumnMenuItemWrapper, { children: [
+        /* @__PURE__ */ jsx193(ColumnMenuItem, { text: "Autosize this column", icon: "max-width" }),
+        /* @__PURE__ */ jsx193(ColumnMenuItem, { text: "Autosize all columns", icon: "display-inline-flex" })
       ] }),
-      /* @__PURE__ */ jsx181("div", { className: "k-columnmenu-item-wrapper", children: /* @__PURE__ */ jsxs62("div", { className: "k-expander", children: [
-        /* @__PURE__ */ jsxs62("div", { className: "k-columnmenu-item", children: [
-          /* @__PURE__ */ jsx181(Icon, { icon: "set-column-position" }),
-          "Set column position",
-          /* @__PURE__ */ jsx181("span", { className: "k-spacer" }),
-          /* @__PURE__ */ jsx181("span", { className: "k-expander-indicator", children: /* @__PURE__ */ jsx181(Icon, { icon: "chevron-up" }) })
+      /* @__PURE__ */ jsx193(ColumnMenuItemWrapper, { children: /* @__PURE__ */ jsx193(ColumnMenuExpander, { itemText: "Set column position", itemIcon: "set-column-position", expanded: true, itemContent: /* @__PURE__ */ jsx193(Fragment43, { children: /* @__PURE__ */ jsx193("div", { className: "k-column-list-wrapper", children: /* @__PURE__ */ jsxs69("div", { className: "k-column-list", style: { maxHeight: "260px", overflowY: "hidden" }, children: [
+        /* @__PURE__ */ jsxs69("div", { className: "k-column-list-item", children: [
+          /* @__PURE__ */ jsx193(Icon, { icon: "lock" }),
+          "Lock column"
         ] }),
-        /* @__PURE__ */ jsx181("div", { className: "k-columnmenu-item-content k-columns-item", children: /* @__PURE__ */ jsx181("div", { className: "k-column-list-wrapper", children: /* @__PURE__ */ jsxs62("div", { className: "k-column-list", style: { maxHeight: "260px", overflowY: "hidden" }, children: [
-          /* @__PURE__ */ jsxs62("div", { className: "k-column-list-item", children: [
-            /* @__PURE__ */ jsx181(Icon, { icon: "lock" }),
-            "Lock column"
-          ] }),
-          /* @__PURE__ */ jsxs62("div", { className: "k-column-list-item k-disabled", children: [
-            /* @__PURE__ */ jsx181(Icon, { icon: "unlock" }),
-            "Unlock column"
-          ] }),
-          /* @__PURE__ */ jsxs62("div", { className: "k-column-list-item", children: [
-            /* @__PURE__ */ jsx181(Icon, { icon: "stick" }),
-            "Stick column"
-          ] }),
-          /* @__PURE__ */ jsxs62("div", { className: "k-column-list-item k-disabled", children: [
-            /* @__PURE__ */ jsx181(Icon, { icon: "unstick" }),
-            "Unstick column"
-          ] }),
-          /* @__PURE__ */ jsxs62("div", { className: "k-column-list-item", children: [
-            /* @__PURE__ */ jsx181(Icon, { icon: "caret-alt-left" }),
-            "Move previous"
-          ] }),
-          /* @__PURE__ */ jsxs62("div", { className: "k-column-list-item", children: [
-            /* @__PURE__ */ jsx181(Icon, { icon: "caret-alt-right" }),
-            "Move next"
-          ] })
-        ] }) }) })
-      ] }) })
-    ] }),
-    /* @__PURE__ */ jsx181(Popup, { id: "category", className: "k-column-menu k-grid-columnmenu-popup", children: /* @__PURE__ */ jsx181("div", { className: "k-columnmenu-item-wrapper", children: /* @__PURE__ */ jsxs62("div", { className: "k-columnmenu-item", children: [
-      /* @__PURE__ */ jsxs62("div", { className: "k-column-list-item", children: [
-        /* @__PURE__ */ jsx181(Icon, { icon: "caret-alt-left" }),
+        /* @__PURE__ */ jsxs69("div", { className: "k-column-list-item k-disabled", children: [
+          /* @__PURE__ */ jsx193(Icon, { icon: "unlock" }),
+          "Unlock column"
+        ] }),
+        /* @__PURE__ */ jsxs69("div", { className: "k-column-list-item", children: [
+          /* @__PURE__ */ jsx193(Icon, { icon: "stick" }),
+          "Stick column"
+        ] }),
+        /* @__PURE__ */ jsxs69("div", { className: "k-column-list-item k-disabled", children: [
+          /* @__PURE__ */ jsx193(Icon, { icon: "unstick" }),
+          "Unstick column"
+        ] }),
+        /* @__PURE__ */ jsxs69("div", { className: "k-column-list-item", children: [
+          /* @__PURE__ */ jsx193(Icon, { icon: "caret-alt-left" }),
+          "Move previous"
+        ] }),
+        /* @__PURE__ */ jsxs69("div", { className: "k-column-list-item", children: [
+          /* @__PURE__ */ jsx193(Icon, { icon: "caret-alt-right" }),
+          "Move next"
+        ] })
+      ] }) }) }) }) })
+    ] }) }),
+    /* @__PURE__ */ jsx193(Popup, { id: "category", className: "k-grid-columnmenu-popup", children: /* @__PURE__ */ jsx193(ColumnMenuNormal, { children: /* @__PURE__ */ jsx193(ColumnMenuItemWrapper, { children: /* @__PURE__ */ jsxs69(ColumnMenuItem, { children: [
+      /* @__PURE__ */ jsxs69("div", { className: "k-column-list-item", children: [
+        /* @__PURE__ */ jsx193(Icon, { icon: "caret-alt-left" }),
         "Move previous"
       ] }),
-      /* @__PURE__ */ jsxs62("div", { className: "k-column-list-item k-disabled", children: [
-        /* @__PURE__ */ jsx181(Icon, { icon: "caret-alt-right" }),
+      /* @__PURE__ */ jsxs69("div", { className: "k-column-list-item k-disabled", children: [
+        /* @__PURE__ */ jsx193(Icon, { icon: "caret-alt-right" }),
         "Move next"
       ] })
-    ] }) }) })
+    ] }) }) }) })
   ] })
 ] });
 export {