@progress/kendo-themes-html 7.1.0-dev.8 → 7.1.0-dev.9

package/dist/cjs/splitter/tests/splitter.js

@@ -59,6 +59,22 @@ var optionClassNames = (componentClassName, props) => {
     }
   );
 };
+var stateClassNames = (_componentClassName, props) => {
+  return classNames({
+    "k-valid": props.valid,
+    "k-invalid": props.invalid,
+    "k-hover": props.hover,
+    "k-focus": props.focus,
+    "k-checked": props.checked,
+    "k-active": props.active,
+    "k-selected": props.selected,
+    "k-disabled": props.disabled,
+    "k-indeterminate": props.indeterminate && !props.checked,
+    "k-loading": props.loading,
+    "k-empty": props.empty,
+    "k-readonly": props.readonly
+  });
+};
 
 // src/misc/theme.ts
 var Size = {
@@ -84,12 +100,68 @@ var ThemeColor = {
   "light": "light",
   "inverse": "inverse"
 };
+var States = {
+  "open": "open",
+  "hover": "hover",
+  "focus": "focus",
+  "active": "active",
+  "selected": "selected",
+  "disabled": "disabled",
+  "valid": "valid",
+  "invalid": "invalid",
+  "loading": "loading",
+  "required": "required",
+  "empty": "empty",
+  "indeterminate": "indeterminate",
+  "checked": "checked",
+  "readonly": "readonly"
+};
 
-// src/icon/font-icon.spec.tsx
+// src/splitter/splitter-pane.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var FONTICON_CLASSNAME = `k-icon k-font-icon`;
+var SPLITTERPANE_CLASSNAME = "k-pane";
 var states = [];
-var options = {
+var options = {};
+var defaultProps = {
+  resizable: true,
+  flex: false
+};
+var SplitterPane = (props) => {
+  const {
+    scrollable,
+    flexBasis,
+    flex,
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ...other,
+      style: { flexBasis, ...props.style },
+      className: classNames(
+        props.className,
+        SPLITTERPANE_CLASSNAME,
+        {
+          [`${SPLITTERPANE_CLASSNAME}-static`]: flexBasis,
+          [`${SPLITTERPANE_CLASSNAME}-flex`]: flex,
+          [`k-scrollable`]: scrollable
+        }
+      ),
+      children: props.children
+    }
+  );
+};
+SplitterPane.states = states;
+SplitterPane.options = options;
+SplitterPane.className = SPLITTERPANE_CLASSNAME;
+SplitterPane.defaultProps = defaultProps;
+var splitter_pane_default = SplitterPane;
+
+// src/icon/font-icon.spec.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var FONTICON_CLASSNAME = `k-icon k-font-icon`;
+var states2 = [];
+var options2 = {
   size: [Size.xsmall, Size.small, Size.medium, Size.large, Size.xlarge, Size.xxlarge, Size.xxxlarge],
   themeColor: [
     ThemeColor.base,
@@ -104,7 +176,7 @@ var options = {
     ThemeColor.dark
   ]
 };
-var defaultProps = {};
+var defaultProps2 = {};
 var FontIcon = (props) => {
   const {
     size,
@@ -115,9 +187,9 @@ var FontIcon = (props) => {
     ...other
   } = props;
   if (!icon) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, {});
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "span",
     {
       ...other,
@@ -138,17 +210,17 @@ var FontIcon = (props) => {
     }
   );
 };
-FontIcon.states = states;
-FontIcon.options = options;
+FontIcon.states = states2;
+FontIcon.options = options2;
 FontIcon.className = FONTICON_CLASSNAME;
-FontIcon.defaultProps = defaultProps;
+FontIcon.defaultProps = defaultProps2;
 var font_icon_spec_default = FontIcon;
 
 // src/icon/svg-icon.spec.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var SVGICON_CLASSNAME = `k-icon k-svg-icon`;
-var states2 = [];
-var options2 = {
+var states3 = [];
+var options3 = {
   size: [Size.xsmall, Size.small, Size.medium, Size.large, Size.xlarge, Size.xxlarge, Size.xxxlarge],
   themeColor: [
     ThemeColor.base,
@@ -163,7 +235,7 @@ var options2 = {
     ThemeColor.dark
   ]
 };
-var defaultProps2 = {
+var defaultProps3 = {
   viewBox: "0 0 24 24"
 };
 var SvgIcon = (props) => {
@@ -172,15 +244,15 @@ var SvgIcon = (props) => {
     themeColor,
     rotate,
     flip,
-    viewBox = defaultProps2.viewBox,
+    viewBox = defaultProps3.viewBox,
     icon,
     ...other
   } = props;
   if (!icon) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, {});
   }
   if (icon === "none") {
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "span",
       {
         ...other,
@@ -193,7 +265,7 @@ var SvgIcon = (props) => {
     );
   }
   const name = typeof icon === "object" && icon.name && icon.name;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "span",
     {
       ...other,
@@ -211,7 +283,7 @@ var SvgIcon = (props) => {
           "k-flip-v": flip === "v" || flip === "both"
         }
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "svg",
         {
           "aria-hidden": true,
@@ -225,10 +297,10 @@ var SvgIcon = (props) => {
     }
   );
 };
-SvgIcon.states = states2;
-SvgIcon.options = options2;
+SvgIcon.states = states3;
+SvgIcon.options = options3;
 SvgIcon.className = SVGICON_CLASSNAME;
-SvgIcon.defaultProps = defaultProps2;
+SvgIcon.defaultProps = defaultProps3;
 var svg_icon_spec_default = SvgIcon;
 
 // ../../node_modules/@progress/kendo-svg-icons/dist/index.es.js
@@ -4263,13 +4335,13 @@ var chartChoroplethIcon = {
 };
 
 // src/icon/icon.spec.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var snakeToCamel = (str) => str.toLowerCase().replace(
   /([-_][a-z])/g,
   (group) => group.toUpperCase().replace("-", "").replace("_", "")
 );
-var states3 = [];
-var options3 = {
+var states4 = [];
+var options4 = {
   size: [Size.xsmall, Size.small, Size.medium, Size.large, Size.xlarge, Size.xxlarge, Size.xxxlarge],
   themeColor: [
     ThemeColor.base,
@@ -4284,7 +4356,7 @@ var options3 = {
     ThemeColor.dark
   ]
 };
-var defaultProps3 = {
+var defaultProps4 = {
   viewBox: "0 0 24 24",
   type: "svg"
 };
@@ -4293,98 +4365,202 @@ var Icon = (props) => {
     size,
     themeColor,
     icon,
-    type = defaultProps3.type,
+    type = defaultProps4.type,
     rotate,
     flip,
-    viewBox = defaultProps3.viewBox,
+    viewBox = defaultProps4.viewBox,
     ...other
   } = props;
   if (!icon) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, {});
   }
   if (type === "svg") {
     if (icon === "none") {
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(svg_icon_spec_default, { ...other, icon, size });
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(svg_icon_spec_default, { ...other, icon, size });
     }
     const iconSVG = snakeToCamel(`${icon}-icon`);
     if (!index_es_exports[iconSVG]) {
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, {});
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(svg_icon_spec_default, { ...other, icon: index_es_exports[iconSVG], size, themeColor, rotate, flip, viewBox });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(font_icon_spec_default, { ...other, icon, size, themeColor, rotate, flip });
+};
+Icon.states = states4;
+Icon.options = options4;
+Icon.defaultProps = defaultProps4;
+
+// src/splitter/splitter-splitbar.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var SPLITTERSPLITBAR_CLASSNAME = "k-splitbar";
+var states5 = [
+  States.hover,
+  States.focus
+];
+var options5 = {};
+var defaultProps5 = {
+  orientation: "horizontal",
+  draggable: true
+};
+var SplitterSplitbar = (props) => {
+  const {
+    hover,
+    focus,
+    orientation,
+    draggable,
+    collapsePrev,
+    collapseNext,
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "div",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        SPLITTERSPLITBAR_CLASSNAME,
+        stateClassNames(SPLITTERSPLITBAR_CLASSNAME, {
+          hover,
+          focus
+        }),
+        {
+          [`${SPLITTERSPLITBAR_CLASSNAME}-${orientation}`]: orientation,
+          [`${SPLITTERSPLITBAR_CLASSNAME}-draggable-${orientation}`]: draggable,
+          [`${SPLITTERSPLITBAR_CLASSNAME}-static-${orientation}`]: !draggable && !collapsePrev && !collapseNext
+        }
+      ),
+      children: [
+        collapsePrev && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "k-collapse-prev", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { icon: `caret-alt-${orientation === "horizontal" ? "left" : "up"}`, size: "xsmall" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "k-resize-handle" }),
+        collapseNext && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "k-collapse-next", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { icon: `caret-alt-${orientation === "horizontal" ? "right" : "down"}`, size: "xsmall" }) }) })
+      ]
+    }
+  );
+};
+SplitterSplitbar.states = states5;
+SplitterSplitbar.options = options5;
+SplitterSplitbar.className = SPLITTERSPLITBAR_CLASSNAME;
+SplitterSplitbar.defaultProps = defaultProps5;
+var splitter_splitbar_default = SplitterSplitbar;
+
+// src/splitter/splitter.spec.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_react = require("react");
+var SPLITTER_CLASSNAME = "k-splitter";
+var options6 = {};
+var defaultProps6 = {
+  orientation: "horizontal"
+};
+var Splitter = (props) => {
+  const {
+    orientation,
+    children,
+    ...other
+  } = props;
+  const listChildren = [];
+  if (children) {
+    if (Array.isArray(children)) {
+      children.map((child, index) => {
+        if (child.type === splitter_pane_default) {
+          listChildren.push(
+            /* @__PURE__ */ (0, import_react.createElement)(splitter_pane_default, { ...child.props, key: index }),
+            children[index + 1] && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              splitter_splitbar_default,
+              {
+                draggable: child.props.resizable !== false && children[index + 1].props.resizable !== false,
+                collapsePrev: child.props.collapsible,
+                collapseNext: children[index + 1].props.collapsible,
+                orientation
+              }
+            ) })
+          );
+        } else {
+          listChildren.push(child);
+        }
+      });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(svg_icon_spec_default, { ...other, icon: index_es_exports[iconSVG], size, themeColor, rotate, flip, viewBox });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(font_icon_spec_default, { ...other, icon, size, themeColor, rotate, flip });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "div",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        SPLITTER_CLASSNAME,
+        {
+          [`${SPLITTER_CLASSNAME}-${orientation}`]: orientation
+        },
+        "k-splitter-flex"
+      ),
+      children: listChildren
+    }
+  );
 };
-Icon.states = states3;
-Icon.options = options3;
-Icon.defaultProps = defaultProps3;
+Splitter.options = options6;
+Splitter.className = SPLITTER_CLASSNAME;
+Splitter.defaultProps = defaultProps6;
+
+// src/splitter/templates/splitter-normal.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var SplitterNormal = (props) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  Splitter,
+  {
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SplitterPane, { flexBasis: "20%", collapsible: true, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { children: "Collapsible pane - 20%" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(SplitterPane, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { children: "Content" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { children: "Content" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { children: "Content" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SplitterPane, { flexBasis: "30%", collapsible: true, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { children: "Collapsible pane - 30%" }) })
+    ],
+    ...props
+  }
+);
+
+// src/splitter/templates/splitter-vertical.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var SplitterVertical = (props) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  Splitter,
+  {
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SplitterPane, { flexBasis: "20%", collapsible: true, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { children: "Collapsible pane - 20%" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(SplitterPane, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { children: "Content" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { children: "Content" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { children: "Content" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SplitterPane, { flexBasis: "30%", collapsible: true, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { children: "Collapsible pane - 30%" }) })
+    ],
+    orientation: "vertical",
+    ...props
+  }
+);
 
 // src/splitter/tests/splitter.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var splitter_default = () => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { id: "test-area", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { height: "280px" }, className: "k-widget k-splitter k-splitter-flex k-splitter-vertical", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { order: "0" }, className: "k-pane-flex k-pane", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "k-widget k-splitter k-splitter-flex k-splitter-horizontal", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { flexBasis: "20%", order: "0" }, className: "k-pane-static k-pane k-scrollable", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("p", { children: [
-      "Collapsible pane",
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("br", {}),
-      "Size = 20%"
-    ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { order: "2" }, className: "k-pane k-scrollable", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { children: "Fluid, scollable pane" }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { children: "Content" }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { children: "Content" }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { children: "Content" }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { children: "Content" }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { children: "Content" }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { children: "Content" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { flexBasis: "30%", order: "4" }, className: "k-pane-static k-pane", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("p", { children: [
-      "Collapsible pane",
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("br", {}),
-      "Size = 30%"
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var splitter_default = () => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { id: "test-area", className: "k-d-grid k-grid-cols-1", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "Splitter horizontal" }),
+  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SplitterNormal, {}),
+  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "Splitter vertical" }),
+  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SplitterVertical, {}),
+  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "Splitter nested" }),
+  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Splitter, { orientation: "vertical", style: { height: "280px" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SplitterPane, { flex: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Splitter, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SplitterPane, { flexBasis: "20%", collapsible: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { children: "Collapsible pane - 20%" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(SplitterPane, { scrollable: true, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { children: "Fluid, scollable pane" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { children: "Content" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { children: "Content" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { children: "Content" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { children: "Content" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { children: "Content" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { children: "Content" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SplitterPane, { flexBasis: "30%", collapsible: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { children: "Collapsible pane - 30%" }) })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { flexBasis: "10px", order: "6" }, className: "k-pane-static k-pane" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { flexBasis: "10px", order: "8" }, className: "k-pane-static k-pane" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { flexBasis: "10px", order: "10" }, className: "k-pane-static k-pane" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "k-splitbar k-splitbar-horizontal k-splitbar-draggable-horizontal", style: { order: "1" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "k-collapse-prev", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { icon: "caret-alt-left", size: "xsmall" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "k-resize-handle" }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, {})
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "k-splitbar k-splitbar-horizontal k-splitbar-draggable-horizontal", style: { order: "3" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "k-resize-handle" }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "k-collapse-next", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { icon: "caret-alt-right", size: "xsmall" }) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "k-splitbar k-splitbar-horizontal k-splitbar-draggable-horizontal", style: { order: "5" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "k-collapse-prev", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { icon: "caret-alt-left", size: "xsmall" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "k-resize-handle" }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "k-collapse-next", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { icon: "caret-alt-right", size: "xsmall" }) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "k-splitbar k-hover k-splitbar-horizontal k-splitbar-draggable-horizontal", style: { order: "7" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "k-collapse-prev", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { icon: "caret-alt-left", size: "xsmall" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "k-resize-handle" }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "k-collapse-next", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { icon: "caret-alt-right", size: "xsmall" }) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "k-splitbar k-focus k-splitbar-horizontal k-splitbar-draggable-horizontal", style: { order: "9" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "k-collapse-prev", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { icon: "caret-alt-left", size: "xsmall" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "k-resize-handle" }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "k-collapse-next", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { icon: "caret-alt-right", size: "xsmall" }) })
-    ] })
-  ] }) }),
-  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { flexBasis: "80px", order: "2" }, className: "k-pane-static k-pane k-scrollable", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { children: "Pane size: 80px" }) }),
-  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { flexBasis: "80px", order: "4" }, className: "k-pane-static k-pane k-scrollable", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("p", { children: [
-    "Static pane",
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("br", {}),
-    "Size = 80px"
-  ] }) }),
-  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { order: "6" }, className: "k-pane-static k-pane k-scrollable", hidden: true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h2", { children: "Hidden pane, should be invisible!" }) }),
-  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "k-splitbar k-splitbar-vertical k-splitbar-draggable-vertical", style: { order: "1" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "k-resize-handle" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, {})
-  ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "k-splitbar k-splitbar-vertical k-splitbar-static-vertical", style: { order: "3" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "k-resize-handle" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, {})
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SplitterPane, { flexBasis: "80px", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { children: "Pane - 80px" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SplitterPane, { flexBasis: "80px", resizable: false, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { children: "Non resizable pane - 80px" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SplitterPane, { hidden: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h2", { children: "Hidden pane, should be invisible!" }) })
   ] })
-] }) }) });
+] }) });

package/dist/cjs/spreadsheet/tests/spreadsheet-borders-config.js

@@ -4583,7 +4583,9 @@ var defaultProps7 = {
   orientation: "horizontal",
   readonly: false,
   disabled: false,
-  handlePosition: "end"
+  handlePosition: "end",
+  showButtons: true,
+  showTicks: true
 };
 var Slider = (props) => {
   const {
@@ -4592,6 +4594,8 @@ var Slider = (props) => {
     readonly = defaultProps7.readonly,
     disabled = defaultProps7.disabled,
     handlePosition = defaultProps7.handlePosition,
+    showButtons = defaultProps7.showButtons,
+    showTicks = defaultProps7.showTicks,
     hover,
     focus,
     active,
@@ -4620,9 +4624,9 @@ var Slider = (props) => {
       "k-range-slider": type === "range"
     }
   ), dir, children: [
-    type !== "gradient" && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Button, { className: "k-button-decrease", rounded: "full", icon: iconDecrease }),
+    showButtons && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Button, { className: "k-button-decrease", rounded: "full", icon: iconDecrease }),
     /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "k-slider-track-wrap", children: [
-      type !== "gradient" && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("ul", { className: "k-reset k-slider-items", children: props.children }),
+      showTicks && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("ul", { className: "k-reset k-slider-items", children: props.children }),
       /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "k-slider-track", style: trackStyle, children: [
         /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "k-slider-selection" }),
         type === "range" && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: classNames(
@@ -4645,7 +4649,7 @@ var Slider = (props) => {
         ) })
       ] })
     ] }),
-    type !== "gradient" && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Button, { className: "k-button-increase", rounded: "full", icon: iconIncrease })
+    showButtons && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Button, { className: "k-button-increase", rounded: "full", icon: iconIncrease })
   ] });
 };
 Slider.states = states7;
@@ -4705,6 +4709,8 @@ var SliderGradientVertical = (props) => /* @__PURE__ */ (0, import_jsx_runtime21
   {
     type: "gradient",
     orientation: "vertical",
+    showButtons: false,
+    showTicks: false,
     children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SliderTick, { label: true, large: true, text: "0" }),
       /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SliderTick, {}),