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

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

@@ -5265,7 +5265,7 @@ var Form = (props) => {
     tag = defaultProps15.tag,
     children
   } = props;
-  const Parent = ({ tag: tag2, className: className24, children: children2 }) => tag2 === "form" ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("form", { className: className24, children: children2 }) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: className24, children: children2 });
+  const Parent = ({ tag: tag2, className: className26, children: children2 }) => tag2 === "form" ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("form", { className: className26, children: children2 }) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: className26, children: children2 });
   const formChildren = [];
   if (children) {
     if (Array.isArray(children)) {
@@ -7550,7 +7550,8 @@ var Slider = (props) => {
     focus,
     active,
     trackStyle,
-    dir
+    dir,
+    ...other
   } = props;
   let iconIncrease;
   let iconDecrease;
@@ -7561,46 +7562,54 @@ var Slider = (props) => {
     iconIncrease = "caret-alt-up";
     iconDecrease = "caret-alt-down";
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("div", { className: classNames(
-    SLIDER_CLASSNAME,
-    props.className,
-    stateClassNames(SLIDER_CLASSNAME, {
-      readonly,
-      disabled
-    }),
+  return /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(
+    "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__ */ (0, import_jsx_runtime135.jsx)(Button, { className: "k-button-decrease", rounded: "full", icon: iconDecrease }),
+        /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("div", { className: "k-slider-track-wrap", children: [
+          showTicks && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("ul", { className: "k-reset k-slider-items", children: props.children }),
+          /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("div", { className: "k-slider-track", style: trackStyle, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", { className: "k-slider-selection" }),
+            type === "range" && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("span", { className: classNames(
+              "k-draghandle",
+              "k-draghandle-start",
+              stateClassNames(SLIDER_CLASSNAME, {
+                hover,
+                focus,
+                active
+              })
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("span", { className: classNames(
+              "k-draghandle",
+              `k-draghandle-${handlePosition}`,
+              stateClassNames(SLIDER_CLASSNAME, {
+                hover,
+                focus,
+                active
+              })
+            ) })
+          ] })
+        ] }),
+        showButtons && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(Button, { className: "k-button-increase", rounded: "full", icon: iconIncrease })
+      ]
     }
-  ), dir, children: [
-    showButtons && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(Button, { className: "k-button-decrease", rounded: "full", icon: iconDecrease }),
-    /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("div", { className: "k-slider-track-wrap", children: [
-      showTicks && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("ul", { className: "k-reset k-slider-items", children: props.children }),
-      /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("div", { className: "k-slider-track", style: trackStyle, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", { className: "k-slider-selection" }),
-        type === "range" && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("span", { className: classNames(
-          "k-draghandle",
-          "k-draghandle-start",
-          stateClassNames(SLIDER_CLASSNAME, {
-            hover,
-            focus,
-            active
-          })
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("span", { className: classNames(
-          "k-draghandle",
-          `k-draghandle-${handlePosition}`,
-          stateClassNames(SLIDER_CLASSNAME, {
-            hover,
-            focus,
-            active
-          })
-        ) })
-      ] })
-    ] }),
-    showButtons && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(Button, { className: "k-button-increase", rounded: "full", icon: iconIncrease })
-  ] });
+  );
 };
 Slider.states = states47;
 Slider.options = options42;
@@ -7621,16 +7630,25 @@ var SliderTick = (props) => {
     label = defaultProps44.label,
     orientation,
     large,
-    text
+    text,
+    ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("li", { className: classNames(
-    props.className,
-    SLIDER_TICK_CLASSNAME,
+  return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
+    "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__ */ (0, import_jsx_runtime136.jsx)("span", { className: "k-label", children: text })
     }
-  ), style, children: label && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("span", { className: "k-label", children: text }) });
+  );
 };
 SliderTick.states = states48;
 SliderTick.options = options43;
@@ -9266,8 +9284,221 @@ var GridToolbar = (props) => /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
   }
 );
 
-// src/grid/tests/grid-column-resizing-actions.tsx
+// src/column-menu/column-menu.spec.tsx
 var import_jsx_runtime195 = require("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__ */ (0, import_jsx_runtime195.jsx)(
+    "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
+var import_jsx_runtime196 = require("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__ */ (0, import_jsx_runtime196.jsxs)(
+    "div",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        COLUMNMENUITEM_CLASSNAME,
+        stateClassNames(COLUMNMENUITEM_CLASSNAME, {
+          focus,
+          selected
+        })
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(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
+var import_jsx_runtime197 = require("react/jsx-runtime");
+var className24 = `k-columnmenu-item-wrapper`;
+var ColumnMenuItemWrapper = (props) => /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(
+  "div",
+  {
+    ...props,
+    className: classNames(
+      props.className,
+      className24
+    ),
+    children: props.children
+  }
+);
+
+// src/column-menu/column-menu-item-content.tsx
+var import_jsx_runtime198 = require("react/jsx-runtime");
+var className25 = `k-columnmenu-item-content`;
+var ColumnMenuItemContent = (props) => /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(
+  "div",
+  {
+    ...props,
+    className: classNames(
+      props.className,
+      className25,
+      "k-columns-item"
+    ),
+    children: props.children
+  }
+);
+
+// src/column-menu/filter-menu.spec.tsx
+var import_jsx_runtime199 = require("react/jsx-runtime");
+var FILTERMENU_CLASSNAME = `k-filter-menu`;
+var states68 = [];
+var options62 = {};
+var defaultProps63 = {};
+var FilterMenu = (props) => {
+  const {
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(
+    "form",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        FILTERMENU_CLASSNAME
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime199.jsx)("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
+var import_jsx_runtime200 = require("react/jsx-runtime");
+
+// src/column-menu/column-menu-multicheck-item.tsx
+var import_jsx_runtime201 = require("react/jsx-runtime");
+
+// src/column-menu/column-menu-expander.spec.tsx
+var import_jsx_runtime202 = require("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__ */ (0, import_jsx_runtime202.jsx)(import_jsx_runtime202.Fragment, {});
+  if (!expanded && !expanderIcon) {
+    icon = /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(Icon, { icon: "chevron-down" });
+  } else if (expanded && !expanderIcon) {
+    icon = /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(Icon, { icon: "chevron-up" });
+  } else {
+    icon = /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(Icon, { icon: expanderIcon });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime202.jsxs)(
+    "div",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        COLUMNMENUEXPANDER_CLASSNAME
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime202.jsxs)(ColumnMenuItem, { text: itemText, icon: itemIcon, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime202.jsx)("span", { className: "k-spacer" }),
+          /* @__PURE__ */ (0, import_jsx_runtime202.jsx)("span", { className: "k-expander-indicator", children: icon })
+        ] }),
+        expanded && /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(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
+var import_jsx_runtime203 = require("react/jsx-runtime");
+var ColumnMenuNormal = (props) => /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(
+  ColumnMenu,
+  {
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime203.jsxs)(ColumnMenuItemWrapper, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(ColumnMenuItem, { text: "Item 1", icon: "sort-asc-small" }),
+        /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(ColumnMenuItem, { text: "Item 2", icon: "sort-desc-small" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(ColumnMenuItemWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(ColumnMenuExpander, { itemText: "Expandable item 1", itemIcon: "columns" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(ColumnMenuItemWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(ColumnMenuExpander, { itemText: "Expandable item 2", itemIcon: "filter" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(ColumnMenuItemWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(ColumnMenuExpander, { itemText: "Item with icons", itemIcon: "arrows-left-right", expanderIcon: "window-restore" }) })
+    ],
+    ...props
+  }
+);
+
+// src/column-menu/templates/column-menu-tabbed.tsx
+var import_jsx_runtime204 = require("react/jsx-runtime");
+
+// src/column-menu/templates/filter-menu-normal.tsx
+var import_jsx_runtime205 = require("react/jsx-runtime");
+
+// src/column-menu/templates/filter-menu-multi-check.tsx
+var import_jsx_runtime206 = require("react/jsx-runtime");
+
+// src/grid/tests/grid-column-resizing-actions.tsx
+var import_jsx_runtime207 = require("react/jsx-runtime");
 var styles = `
     .k-animation-container,
     .k-popup {
@@ -9284,133 +9515,103 @@ var styles = `
         margin-inline-end: 16px;
     }
 `;
-var grid_column_resizing_actions_default = () => /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)(import_jsx_runtime195.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("style", { children: styles }),
-  /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)("div", { id: "test-area", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)(Grid, { className: "k-grid-no-scrollbar", toolbar: /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(GridToolbar, { children: /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)(ChipList, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(Chip, { text: "Units in Stock", icon: "sort-asc-small", actions: /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)(import_jsx_runtime195.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(ChipAction, { type: "more" }),
-        /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(ChipAction, { type: "remove" })
+var grid_column_resizing_actions_default = () => /* @__PURE__ */ (0, import_jsx_runtime207.jsxs)(import_jsx_runtime207.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime207.jsx)("style", { children: styles }),
+  /* @__PURE__ */ (0, import_jsx_runtime207.jsxs)("div", { id: "test-area", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime207.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime207.jsxs)(Grid, { className: "k-grid-no-scrollbar", toolbar: /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(GridToolbar, { children: /* @__PURE__ */ (0, import_jsx_runtime207.jsxs)(ChipList, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(Chip, { text: "Units in Stock", icon: "sort-asc-small", actions: /* @__PURE__ */ (0, import_jsx_runtime207.jsxs)(import_jsx_runtime207.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(ChipAction, { type: "more" }),
+        /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(ChipAction, { type: "remove" })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(Chip, { text: "Category", icon: "sort-desc-small", actions: /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)(import_jsx_runtime195.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(ChipAction, { type: "more" }),
-        /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(ChipAction, { type: "remove" })
+      /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(Chip, { text: "Category", icon: "sort-desc-small", actions: /* @__PURE__ */ (0, import_jsx_runtime207.jsxs)(import_jsx_runtime207.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(ChipAction, { type: "more" }),
+        /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(ChipAction, { type: "remove" })
       ] }) })
-    ] }) }), pager: /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(GridPager, { refresh: false }), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(GridHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("div", { className: "k-grid-header-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)(GridHeaderTable, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)("colgroup", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("col", {}),
-          /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("col", {}),
-          /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("col", {})
+    ] }) }), pager: /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(GridPager, { refresh: false }), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(GridHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime207.jsx)("div", { className: "k-grid-header-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime207.jsxs)(GridHeaderTable, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime207.jsxs)("colgroup", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime207.jsx)("col", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime207.jsx)("col", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime207.jsx)("col", {})
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(TableThead, { children: /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)(TableRow, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(GridHeaderCell, { sortable: true, menu: "column", columnTitle: "Product Id" }),
-          /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(GridHeaderCell, { sortable: true, menu: "column", columnTitle: "Unit Price" }),
-          /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(GridHeaderCell, { sortable: true, menu: "column", columnTitle: "Discontinued" }),
-          /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(GridHeaderCell, { sortable: true, menu: "column", columnTitle: "Category" })
+        /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(TableThead, { children: /* @__PURE__ */ (0, import_jsx_runtime207.jsxs)(TableRow, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(GridHeaderCell, { sortable: true, menu: "column", columnTitle: "Product Id" }),
+          /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(GridHeaderCell, { sortable: true, menu: "column", columnTitle: "Unit Price" }),
+          /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(GridHeaderCell, { sortable: true, menu: "column", columnTitle: "Discontinued" }),
+          /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(GridHeaderCell, { sortable: true, menu: "column", columnTitle: "Category" })
         ] }) })
       ] }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(GridContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(GridContent, { children: /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)(GridTable, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)("colgroup", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("col", {}),
-          /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("col", {}),
-          /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("col", {})
+      /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(GridContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(GridContent, { children: /* @__PURE__ */ (0, import_jsx_runtime207.jsxs)(GridTable, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime207.jsxs)("colgroup", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime207.jsx)("col", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime207.jsx)("col", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime207.jsx)("col", {})
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)(TableTbody, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)(TableRow, { className: "k-master-row", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(TableTd, { children: "Chef Anton's Gumbo" }),
-            /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(TableTd, { children: "21.35" }),
-            /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(TableTd, { children: "0" }),
-            /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(TableTd, { children: "Condiments" })
+        /* @__PURE__ */ (0, import_jsx_runtime207.jsxs)(TableTbody, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime207.jsxs)(TableRow, { className: "k-master-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(TableTd, { children: "Chef Anton's Gumbo" }),
+            /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(TableTd, { children: "21.35" }),
+            /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(TableTd, { children: "0" }),
+            /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(TableTd, { children: "Condiments" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)(TableRow, { className: "k-alt", alt: true, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(TableTd, { children: "Alice Mutton" }),
-            /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(TableTd, { children: "39" }),
-            /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(TableTd, { children: "0" }),
-            /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(TableTd, { children: "Meat/Poultry" })
+          /* @__PURE__ */ (0, import_jsx_runtime207.jsxs)(TableRow, { className: "k-alt", alt: true, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(TableTd, { children: "Alice Mutton" }),
+            /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(TableTd, { children: "39" }),
+            /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(TableTd, { children: "0" }),
+            /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(TableTd, { children: "Meat/Poultry" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)(TableRow, { className: "k-master-row", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(TableTd, { children: "Singaporean Hokkien Fried Mee" }),
-            /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(TableTd, { children: "123.79" }),
-            /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(TableTd, { children: "1" }),
-            /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(TableTd, { children: "Meat/Poultry" })
+          /* @__PURE__ */ (0, import_jsx_runtime207.jsxs)(TableRow, { className: "k-master-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(TableTd, { children: "Singaporean Hokkien Fried Mee" }),
+            /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(TableTd, { children: "123.79" }),
+            /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(TableTd, { children: "1" }),
+            /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(TableTd, { children: "Meat/Poultry" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)(TableRow, { className: "k-alt", alt: true, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(TableTd, { children: "Gorgonzola Telino" }),
-            /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(TableTd, { children: "12.5" }),
-            /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(TableTd, { children: "0" }),
-            /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(TableTd, { children: "Meat/Poultry" })
+          /* @__PURE__ */ (0, import_jsx_runtime207.jsxs)(TableRow, { className: "k-alt", alt: true, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(TableTd, { children: "Gorgonzola Telino" }),
+            /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(TableTd, { children: "12.5" }),
+            /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(TableTd, { children: "0" }),
+            /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(TableTd, { children: "Meat/Poultry" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)(TableRow, { className: "k-master-row", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(TableTd, { children: "Perth Pasties" }),
-            /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(TableTd, { children: "32.8" }),
-            /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(TableTd, { children: "0" }),
-            /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(TableTd, { children: "Meat/Poultry" })
+          /* @__PURE__ */ (0, import_jsx_runtime207.jsxs)(TableRow, { className: "k-master-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(TableTd, { children: "Perth Pasties" }),
+            /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(TableTd, { children: "32.8" }),
+            /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(TableTd, { children: "0" }),
+            /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(TableTd, { children: "Meat/Poultry" })
           ] })
         ] })
       ] }) }) })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)(Popup, { className: "k-column-menu k-grid-columnmenu-popup", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)("div", { className: "k-columnmenu-item-wrapper", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)("div", { className: "k-columnmenu-item", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(Icon, { icon: "sort-asc-small" }),
-          "Sort ascending"
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)("div", { className: "k-columnmenu-item", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(Icon, { icon: "sort-desc-small" }),
-          "Sort descending"
-        ] })
+    /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(Popup, { className: "k-grid-columnmenu-popup", children: /* @__PURE__ */ (0, import_jsx_runtime207.jsxs)(ColumnMenuNormal, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime207.jsxs)(ColumnMenuItemWrapper, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(ColumnMenuItem, { text: "Sort ascending", icon: "sort-asc-small" }),
+        /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(ColumnMenuItem, { text: "Sort descending", icon: "sort-desc-small" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("div", { className: "k-columnmenu-item-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("div", { className: "k-expander", children: /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)("div", { className: "k-columnmenu-item", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(Icon, { icon: "columns" }),
-        "Columns",
-        /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("span", { className: "k-spacer" }),
-        /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("span", { className: "k-expander-indicator", children: /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(Icon, { icon: "chevron-down" }) })
-      ] }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("div", { className: "k-columnmenu-item-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("div", { className: "k-expander", children: /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)("div", { className: "k-columnmenu-item", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(Icon, { icon: "filter" }),
-        "Filter",
-        /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("span", { className: "k-spacer" }),
-        /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("span", { className: "k-expander-indicator", children: /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(Icon, { icon: "chevron-down" }) })
-      ] }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("div", { className: "k-columnmenu-item-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)("div", { className: "k-columnmenu-item", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(Icon, { icon: "group" }),
-        "Group column"
-      ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("div", { className: "k-columnmenu-item-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("div", { className: "k-expander", children: /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)("div", { className: "k-columnmenu-item", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(Icon, { icon: "arrows-left-right" }),
-        "Resize column",
-        /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("span", { className: "k-spacer" }),
-        /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("span", { className: "k-expander-indicator", children: /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(Icon, { icon: "window-restore" }) })
-      ] }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("div", { className: "k-columnmenu-item-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)("div", { className: "k-columnmenu-item", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(Icon, { icon: "group" }),
-        "Autosize all columns"
-      ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("div", { className: "k-columnmenu-item-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("div", { className: "k-expander", children: /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)("div", { className: "k-columnmenu-item", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(Icon, { icon: "set-column-position" }),
-        "Set column position",
-        /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("span", { className: "k-spacer" }),
-        /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("span", { className: "k-expander-indicator", children: /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(Icon, { icon: "chevron-down" }) })
-      ] }) }) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(WindowNormal, { title: "Column Width", actions: ["x"], className: "k-grid-window", actionButtonsAlign: "start", actionButtons: /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)(import_jsx_runtime195.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(Button, { themeColor: "primary", children: "Apply" }),
-      /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(Button, { children: "Cancel" })
-    ] }), children: /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)(FormNormal, { formButtons: null, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(ColumnMenuItemWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(ColumnMenuExpander, { itemText: "Columns", itemIcon: "columns" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(ColumnMenuItemWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(ColumnMenuExpander, { itemText: "Filter", itemIcon: "filter" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(ColumnMenuItemWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(ColumnMenuItem, { text: "Group column", icon: "group" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime207.jsxs)(ColumnMenuItemWrapper, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(ColumnMenuExpander, { itemText: "Resize column", itemIcon: "arrows-left-right", expanderIcon: "window-restore" }),
+        /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(ColumnMenuItem, { text: "Autosize all columns", icon: "display-inline-flex" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(ColumnMenuItemWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(ColumnMenuExpander, { itemText: "Set column position", itemIcon: "set-column-position" }) })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime207.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(WindowNormal, { title: "Column Width", actions: ["x"], className: "k-grid-window", actionButtonsAlign: "start", actionButtons: /* @__PURE__ */ (0, import_jsx_runtime207.jsxs)(import_jsx_runtime207.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(Button, { themeColor: "primary", children: "Apply" }),
+      /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(Button, { children: "Cancel" })
+    ] }), children: /* @__PURE__ */ (0, import_jsx_runtime207.jsxs)(FormNormal, { formButtons: null, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(
         FormField,
         {
           label: "Value in px",
-          editor: /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(Textbox, { value: "412" })
+          editor: /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(Textbox, { value: "412" })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(
         FormField,
         {
-          editor: /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)(import_jsx_runtime195.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(Checkbox, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("label", { className: "k-checkbox-label", children: "Autofit to content" })
+          editor: /* @__PURE__ */ (0, import_jsx_runtime207.jsxs)(import_jsx_runtime207.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(Checkbox, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime207.jsx)("label", { className: "k-checkbox-label", children: "Autofit to content" })
           ] })
         }
       )