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

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

@@ -7044,7 +7044,8 @@ var Slider = (props) => {
     focus,
     active,
     trackStyle,
-    dir
+    dir,
+    ...other
   } = props;
   let iconIncrease;
   let iconDecrease;
@@ -7055,46 +7056,54 @@ var Slider = (props) => {
     iconIncrease = "caret-alt-up";
     iconDecrease = "caret-alt-down";
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)("div", { className: classNames(
-    SLIDER_CLASSNAME,
-    props.className,
-    stateClassNames(SLIDER_CLASSNAME, {
-      readonly,
-      disabled
-    }),
+  return /* @__PURE__ */ (0, import_jsx_runtime117.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_runtime117.jsx)(Button, { className: "k-button-decrease", rounded: "full", icon: iconDecrease }),
+        /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)("div", { className: "k-slider-track-wrap", children: [
+          showTicks && /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("ul", { className: "k-reset k-slider-items", children: props.children }),
+          /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)("div", { className: "k-slider-track", style: trackStyle, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("div", { className: "k-slider-selection" }),
+            type === "range" && /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("span", { className: classNames(
+              "k-draghandle",
+              "k-draghandle-start",
+              stateClassNames(SLIDER_CLASSNAME, {
+                hover,
+                focus,
+                active
+              })
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("span", { className: classNames(
+              "k-draghandle",
+              `k-draghandle-${handlePosition}`,
+              stateClassNames(SLIDER_CLASSNAME, {
+                hover,
+                focus,
+                active
+              })
+            ) })
+          ] })
+        ] }),
+        showButtons && /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(Button, { className: "k-button-increase", rounded: "full", icon: iconIncrease })
+      ]
     }
-  ), dir, children: [
-    showButtons && /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(Button, { className: "k-button-decrease", rounded: "full", icon: iconDecrease }),
-    /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)("div", { className: "k-slider-track-wrap", children: [
-      showTicks && /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("ul", { className: "k-reset k-slider-items", children: props.children }),
-      /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)("div", { className: "k-slider-track", style: trackStyle, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("div", { className: "k-slider-selection" }),
-        type === "range" && /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("span", { className: classNames(
-          "k-draghandle",
-          "k-draghandle-start",
-          stateClassNames(SLIDER_CLASSNAME, {
-            hover,
-            focus,
-            active
-          })
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("span", { className: classNames(
-          "k-draghandle",
-          `k-draghandle-${handlePosition}`,
-          stateClassNames(SLIDER_CLASSNAME, {
-            hover,
-            focus,
-            active
-          })
-        ) })
-      ] })
-    ] }),
-    showButtons && /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(Button, { className: "k-button-increase", rounded: "full", icon: iconIncrease })
-  ] });
+  );
 };
 Slider.states = states40;
 Slider.options = options36;
@@ -7115,16 +7124,25 @@ var SliderTick = (props) => {
     label = defaultProps38.label,
     orientation,
     large,
-    text
+    text,
+    ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("li", { className: classNames(
-    props.className,
-    SLIDER_TICK_CLASSNAME,
+  return /* @__PURE__ */ (0, import_jsx_runtime118.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_runtime118.jsx)("span", { className: "k-label", children: text })
     }
-  ), style, children: label && /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("span", { className: "k-label", children: text }) });
+  );
 };
 SliderTick.states = states41;
 SliderTick.options = options37;
@@ -8873,8 +8891,221 @@ var GridToolbar = (props) => /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
   }
 );
 
-// src/grid/tests/grid-column-reordering.tsx
+// src/column-menu/column-menu.spec.tsx
 var import_jsx_runtime181 = require("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__ */ (0, import_jsx_runtime181.jsx)(
+    "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
+var import_jsx_runtime182 = require("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__ */ (0, import_jsx_runtime182.jsxs)(
+    "div",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        COLUMNMENUITEM_CLASSNAME,
+        stateClassNames(COLUMNMENUITEM_CLASSNAME, {
+          focus,
+          selected
+        })
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(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
+var import_jsx_runtime183 = require("react/jsx-runtime");
+var className24 = `k-columnmenu-item-wrapper`;
+var ColumnMenuItemWrapper = (props) => /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
+  "div",
+  {
+    ...props,
+    className: classNames(
+      props.className,
+      className24
+    ),
+    children: props.children
+  }
+);
+
+// src/column-menu/column-menu-item-content.tsx
+var import_jsx_runtime184 = require("react/jsx-runtime");
+var className25 = `k-columnmenu-item-content`;
+var ColumnMenuItemContent = (props) => /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
+  "div",
+  {
+    ...props,
+    className: classNames(
+      props.className,
+      className25,
+      "k-columns-item"
+    ),
+    children: props.children
+  }
+);
+
+// src/column-menu/filter-menu.spec.tsx
+var import_jsx_runtime185 = require("react/jsx-runtime");
+var FILTERMENU_CLASSNAME = `k-filter-menu`;
+var states62 = [];
+var options57 = {};
+var defaultProps58 = {};
+var FilterMenu = (props) => {
+  const {
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
+    "form",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        FILTERMENU_CLASSNAME
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime185.jsx)("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
+var import_jsx_runtime186 = require("react/jsx-runtime");
+
+// src/column-menu/column-menu-multicheck-item.tsx
+var import_jsx_runtime187 = require("react/jsx-runtime");
+
+// src/column-menu/column-menu-expander.spec.tsx
+var import_jsx_runtime188 = require("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__ */ (0, import_jsx_runtime188.jsx)(import_jsx_runtime188.Fragment, {});
+  if (!expanded && !expanderIcon) {
+    icon = /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(Icon, { icon: "chevron-down" });
+  } else if (expanded && !expanderIcon) {
+    icon = /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(Icon, { icon: "chevron-up" });
+  } else {
+    icon = /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(Icon, { icon: expanderIcon });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime188.jsxs)(
+    "div",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        COLUMNMENUEXPANDER_CLASSNAME
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime188.jsxs)(ColumnMenuItem, { text: itemText, icon: itemIcon, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime188.jsx)("span", { className: "k-spacer" }),
+          /* @__PURE__ */ (0, import_jsx_runtime188.jsx)("span", { className: "k-expander-indicator", children: icon })
+        ] }),
+        expanded && /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(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
+var import_jsx_runtime189 = require("react/jsx-runtime");
+var ColumnMenuNormal = (props) => /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(
+  ColumnMenu,
+  {
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime189.jsxs)(ColumnMenuItemWrapper, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(ColumnMenuItem, { text: "Item 1", icon: "sort-asc-small" }),
+        /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(ColumnMenuItem, { text: "Item 2", icon: "sort-desc-small" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(ColumnMenuItemWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(ColumnMenuExpander, { itemText: "Expandable item 1", itemIcon: "columns" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(ColumnMenuItemWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(ColumnMenuExpander, { itemText: "Expandable item 2", itemIcon: "filter" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(ColumnMenuItemWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime189.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_runtime190 = require("react/jsx-runtime");
+
+// src/column-menu/templates/filter-menu-normal.tsx
+var import_jsx_runtime191 = require("react/jsx-runtime");
+
+// src/column-menu/templates/filter-menu-multi-check.tsx
+var import_jsx_runtime192 = require("react/jsx-runtime");
+
+// src/grid/tests/grid-column-reordering.tsx
+var import_jsx_runtime193 = require("react/jsx-runtime");
 var styles = `
     .k-animation-container,
     .k-popup {
@@ -8892,153 +9123,120 @@ var styles = `
         left: 120px;
     }
 `;
-var grid_column_reordering_default = () => /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)(import_jsx_runtime181.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime181.jsx)("style", { children: styles }),
-  /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)("div", { id: "test-area", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime181.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)(Grid, { className: "k-grid-no-scrollbar", toolbar: /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(GridToolbar, { children: /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)(ChipList, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(Chip, { text: "Units in Stock", icon: "sort-asc-small", actions: /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)(import_jsx_runtime181.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(ChipAction, { type: "more" }),
-        /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(ChipAction, { type: "remove" })
+var grid_column_reordering_default = () => /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)(import_jsx_runtime193.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("style", { children: styles }),
+  /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)("div", { id: "test-area", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)(Grid, { className: "k-grid-no-scrollbar", toolbar: /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(GridToolbar, { children: /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)(ChipList, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(Chip, { text: "Units in Stock", icon: "sort-asc-small", actions: /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)(import_jsx_runtime193.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(ChipAction, { type: "more" }),
+        /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(ChipAction, { type: "remove" })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(Chip, { text: "Category", icon: "sort-desc-small", actions: /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)(import_jsx_runtime181.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(ChipAction, { type: "more" }),
-        /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(ChipAction, { type: "remove" })
+      /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(Chip, { text: "Category", icon: "sort-desc-small", actions: /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)(import_jsx_runtime193.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(ChipAction, { type: "more" }),
+        /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(ChipAction, { type: "remove" })
       ] }) })
-    ] }) }), pager: /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(GridPager, { refresh: false }), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(GridHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime181.jsx)("div", { className: "k-grid-header-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)(GridHeaderTable, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)("colgroup", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime181.jsx)("col", {}),
-          /* @__PURE__ */ (0, import_jsx_runtime181.jsx)("col", {}),
-          /* @__PURE__ */ (0, import_jsx_runtime181.jsx)("col", {})
+    ] }) }), pager: /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(GridPager, { refresh: false }), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(GridHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("div", { className: "k-grid-header-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)(GridHeaderTable, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)("colgroup", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("col", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("col", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("col", {})
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)(TableThead, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(GridHeaderCell, { sortable: true, menu: "column", columnTitle: "Product Id" }),
-          /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(GridHeaderCell, { sortable: true, menu: "column", columnTitle: "Unit Price" }),
-          /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(GridHeaderCell, { sortable: true, menu: "column", columnTitle: "Discontinued" }),
-          /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(GridHeaderCell, { sortable: true, menu: "column", columnTitle: "Category" })
+        /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)(TableThead, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(GridHeaderCell, { sortable: true, menu: "column", columnTitle: "Product Id" }),
+          /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(GridHeaderCell, { sortable: true, menu: "column", columnTitle: "Unit Price" }),
+          /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(GridHeaderCell, { sortable: true, menu: "column", columnTitle: "Discontinued" }),
+          /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(GridHeaderCell, { sortable: true, menu: "column", columnTitle: "Category" })
         ] })
       ] }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(GridContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(GridContent, { children: /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)(GridTable, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)("colgroup", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime181.jsx)("col", {}),
-          /* @__PURE__ */ (0, import_jsx_runtime181.jsx)("col", {}),
-          /* @__PURE__ */ (0, import_jsx_runtime181.jsx)("col", {})
+      /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(GridContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(GridContent, { children: /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)(GridTable, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)("colgroup", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("col", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("col", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("col", {})
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)(TableTbody, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)(TableRow, { className: "k-master-row", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(TableTd, { children: "Chef Anton's Gumbo" }),
-            /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(TableTd, { children: "21.35" }),
-            /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(TableTd, { children: "0" }),
-            /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(TableTd, { children: "Condiments" })
+        /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)(TableTbody, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)(TableRow, { className: "k-master-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(TableTd, { children: "Chef Anton's Gumbo" }),
+            /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(TableTd, { children: "21.35" }),
+            /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(TableTd, { children: "0" }),
+            /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(TableTd, { children: "Condiments" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)(TableRow, { className: "k-alt", alt: true, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(TableTd, { children: "Alice Mutton" }),
-            /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(TableTd, { children: "39" }),
-            /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(TableTd, { children: "0" }),
-            /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(TableTd, { children: "Meat/Poultry" })
+          /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)(TableRow, { className: "k-alt", alt: true, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(TableTd, { children: "Alice Mutton" }),
+            /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(TableTd, { children: "39" }),
+            /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(TableTd, { children: "0" }),
+            /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(TableTd, { children: "Meat/Poultry" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)(TableRow, { className: "k-master-row", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(TableTd, { children: "Singaporean Hokkien Fried Mee" }),
-            /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(TableTd, { children: "123.79" }),
-            /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(TableTd, { children: "1" }),
-            /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(TableTd, { children: "Meat/Poultry" })
+          /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)(TableRow, { className: "k-master-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(TableTd, { children: "Singaporean Hokkien Fried Mee" }),
+            /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(TableTd, { children: "123.79" }),
+            /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(TableTd, { children: "1" }),
+            /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(TableTd, { children: "Meat/Poultry" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)(TableRow, { className: "k-alt", alt: true, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(TableTd, { children: "Gorgonzola Telino" }),
-            /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(TableTd, { children: "12.5" }),
-            /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(TableTd, { children: "0" }),
-            /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(TableTd, { children: "Meat/Poultry" })
+          /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)(TableRow, { className: "k-alt", alt: true, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(TableTd, { children: "Gorgonzola Telino" }),
+            /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(TableTd, { children: "12.5" }),
+            /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(TableTd, { children: "0" }),
+            /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(TableTd, { children: "Meat/Poultry" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)(TableRow, { className: "k-master-row", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(TableTd, { children: "Perth Pasties" }),
-            /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(TableTd, { children: "32.8" }),
-            /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(TableTd, { children: "0" }),
-            /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(TableTd, { children: "Meat/Poultry" })
+          /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)(TableRow, { className: "k-master-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(TableTd, { children: "Perth Pasties" }),
+            /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(TableTd, { children: "32.8" }),
+            /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(TableTd, { children: "0" }),
+            /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(TableTd, { children: "Meat/Poultry" })
           ] })
         ] })
       ] }) }) })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)(Popup, { id: "discontinued", className: "k-column-menu k-grid-columnmenu-popup", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)("div", { className: "k-columnmenu-item-wrapper", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)("div", { className: "k-columnmenu-item", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(Icon, { icon: "sort-asc-small" }),
-          "Sort ascending"
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)("div", { className: "k-columnmenu-item", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(Icon, { icon: "sort-desc-small" }),
-          "Sort descending"
-        ] })
+    /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(Popup, { id: "discontinued", className: "k-grid-columnmenu-popup", children: /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)(ColumnMenuNormal, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)(ColumnMenuItemWrapper, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(ColumnMenuItem, { text: "Sort ascending", icon: "sort-asc-small" }),
+        /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(ColumnMenuItem, { text: "Sort descending", icon: "sort-desc-small" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime181.jsx)("div", { className: "k-columnmenu-item-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime181.jsx)("div", { className: "k-expander", children: /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)("div", { className: "k-columnmenu-item", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(Icon, { icon: "columns" }),
-        "Columns",
-        /* @__PURE__ */ (0, import_jsx_runtime181.jsx)("span", { className: "k-spacer" }),
-        /* @__PURE__ */ (0, import_jsx_runtime181.jsx)("span", { className: "k-expander-indicator", children: /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(Icon, { icon: "chevron-down" }) })
-      ] }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime181.jsx)("div", { className: "k-columnmenu-item-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime181.jsx)("div", { className: "k-expander", children: /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)("div", { className: "k-columnmenu-item", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(Icon, { icon: "filter" }),
-        "Filter",
-        /* @__PURE__ */ (0, import_jsx_runtime181.jsx)("span", { className: "k-spacer" }),
-        /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(Icon, { icon: "chevron-down" })
-      ] }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime181.jsx)("div", { className: "k-columnmenu-item-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)("div", { className: "k-columnmenu-item", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(Icon, { icon: "group" }),
-        "Group column"
-      ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)("div", { className: "k-columnmenu-item-wrapper", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)("div", { className: "k-columnmenu-item", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(Icon, { icon: "max-width" }),
-          "Autosize this column"
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)("div", { className: "k-columnmenu-item", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(Icon, { icon: "display-inline-flex" }),
-          "Autosize all columns"
-        ] })
+      /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(ColumnMenuItemWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(ColumnMenuExpander, { itemText: "Columns", itemIcon: "columns" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(ColumnMenuItemWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(ColumnMenuExpander, { itemText: "Filter", itemIcon: "filter" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(ColumnMenuItemWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(ColumnMenuItem, { text: "Group column", icon: "group" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)(ColumnMenuItemWrapper, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(ColumnMenuItem, { text: "Autosize this column", icon: "max-width" }),
+        /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(ColumnMenuItem, { text: "Autosize all columns", icon: "display-inline-flex" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime181.jsx)("div", { className: "k-columnmenu-item-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)("div", { className: "k-expander", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)("div", { className: "k-columnmenu-item", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(Icon, { icon: "set-column-position" }),
-          "Set column position",
-          /* @__PURE__ */ (0, import_jsx_runtime181.jsx)("span", { className: "k-spacer" }),
-          /* @__PURE__ */ (0, import_jsx_runtime181.jsx)("span", { className: "k-expander-indicator", children: /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(Icon, { icon: "chevron-up" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(ColumnMenuItemWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(ColumnMenuExpander, { itemText: "Set column position", itemIcon: "set-column-position", expanded: true, itemContent: /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(import_jsx_runtime193.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("div", { className: "k-column-list-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)("div", { className: "k-column-list", style: { maxHeight: "260px", overflowY: "hidden" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)("div", { className: "k-column-list-item", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(Icon, { icon: "lock" }),
+          "Lock column"
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime181.jsx)("div", { className: "k-columnmenu-item-content k-columns-item", children: /* @__PURE__ */ (0, import_jsx_runtime181.jsx)("div", { className: "k-column-list-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)("div", { className: "k-column-list", style: { maxHeight: "260px", overflowY: "hidden" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)("div", { className: "k-column-list-item", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(Icon, { icon: "lock" }),
-            "Lock column"
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)("div", { className: "k-column-list-item k-disabled", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(Icon, { icon: "unlock" }),
-            "Unlock column"
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)("div", { className: "k-column-list-item", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(Icon, { icon: "stick" }),
-            "Stick column"
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)("div", { className: "k-column-list-item k-disabled", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(Icon, { icon: "unstick" }),
-            "Unstick column"
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)("div", { className: "k-column-list-item", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(Icon, { icon: "caret-alt-left" }),
-            "Move previous"
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)("div", { className: "k-column-list-item", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(Icon, { icon: "caret-alt-right" }),
-            "Move next"
-          ] })
-        ] }) }) })
-      ] }) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(Popup, { id: "category", className: "k-column-menu k-grid-columnmenu-popup", children: /* @__PURE__ */ (0, import_jsx_runtime181.jsx)("div", { className: "k-columnmenu-item-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)("div", { className: "k-columnmenu-item", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)("div", { className: "k-column-list-item", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(Icon, { icon: "caret-alt-left" }),
+        /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)("div", { className: "k-column-list-item k-disabled", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(Icon, { icon: "unlock" }),
+          "Unlock column"
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)("div", { className: "k-column-list-item", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(Icon, { icon: "stick" }),
+          "Stick column"
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)("div", { className: "k-column-list-item k-disabled", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(Icon, { icon: "unstick" }),
+          "Unstick column"
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)("div", { className: "k-column-list-item", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(Icon, { icon: "caret-alt-left" }),
+          "Move previous"
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)("div", { className: "k-column-list-item", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(Icon, { icon: "caret-alt-right" }),
+          "Move next"
+        ] })
+      ] }) }) }) }) })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(Popup, { id: "category", className: "k-grid-columnmenu-popup", children: /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(ColumnMenuNormal, { children: /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(ColumnMenuItemWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)(ColumnMenuItem, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)("div", { className: "k-column-list-item", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(Icon, { icon: "caret-alt-left" }),
         "Move previous"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)("div", { className: "k-column-list-item k-disabled", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(Icon, { icon: "caret-alt-right" }),
+      /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)("div", { className: "k-column-list-item k-disabled", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(Icon, { icon: "caret-alt-right" }),
         "Move next"
       ] })
-    ] }) }) })
+    ] }) }) }) })
   ] })
 ] });