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

package/dist/cjs/split-button/{tests/split-button-size.js → templates/split-button-popup.js}

@@ -16,12 +16,12 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/split-button/tests/split-button-size.tsx
-var split_button_size_exports = {};
-__export(split_button_size_exports, {
-  default: () => split_button_size_default
+// src/split-button/templates/split-button-popup.tsx
+var split_button_popup_exports = {};
+__export(split_button_popup_exports, {
+  SplitButtonPopup: () => SplitButtonPopup
 });
-module.exports = __toCommonJS(split_button_size_exports);
+module.exports = __toCommonJS(split_button_popup_exports);
 
 // src/misc/class-names.ts
 var classNames = (...args) => {
@@ -4378,17 +4378,81 @@ var import_jsx_runtime6 = require("react/jsx-runtime");
 // src/button/templates/text-button.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
 
-// src/split-button/split-button.spec.tsx
+// src/animation-container/animation-container.spec.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
+var ANIMATION_CONTAINER_CLASSNAME = `k-animation-container`;
+var states5 = [];
+var options5 = {};
+var defaultProps5 = {
+  positionMode: "absolute"
+};
+var AnimationContainer = (props) => {
+  const {
+    positionMode,
+    animationStyle,
+    offset,
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "div",
+    {
+      ...other,
+      style: { ...offset, ...props.style },
+      className: classNames(
+        ANIMATION_CONTAINER_CLASSNAME,
+        "k-animation-container-shown",
+        {
+          ["k-animation-container-fixed"]: positionMode === "fixed"
+        }
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "k-child-animation-container", style: animationStyle, children: props.children })
+    }
+  );
+};
+AnimationContainer.states = states5;
+AnimationContainer.options = options5;
+AnimationContainer.className = ANIMATION_CONTAINER_CLASSNAME;
+AnimationContainer.defaultProps = defaultProps5;
+
+// src/popup/popup.spec.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var POPUP_CLASSNAME = `k-popup`;
+var states6 = [];
+var options6 = {};
+var defaultProps6 = {
+  positionMode: "absolute"
+};
+var Popup = (props) => {
+  const {
+    offset,
+    positionMode,
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    AnimationContainer,
+    {
+      positionMode,
+      offset,
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { ...other, className: classNames(props.className, POPUP_CLASSNAME), children: props.children })
+    }
+  );
+};
+Popup.states = states6;
+Popup.options = options6;
+Popup.className = POPUP_CLASSNAME;
+Popup.defaultProps = defaultProps6;
+
+// src/split-button/split-button.spec.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var SPLITBUTTON_CLASSNAME = `k-split-button`;
-var states5 = [
+var states7 = [
   States.hover,
   States.focus,
   States.active,
   States.selected,
   States.disabled
 ];
-var options5 = {
+var options7 = {
   size: [Size.small, Size.medium, Size.large],
   rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
   fillMode: [FillMode.solid, FillMode.flat, FillMode.outline, FillMode.clear, FillMode.link],
@@ -4406,7 +4470,7 @@ var options5 = {
     ThemeColor.inverse
   ]
 };
-var defaultProps5 = {
+var defaultProps7 = {
   size: Size.medium,
   rounded: Roundness.medium,
   fillMode: FillMode.solid,
@@ -4415,10 +4479,10 @@ var defaultProps5 = {
 };
 var SplitButton = (props) => {
   const {
-    size = defaultProps5.size,
-    rounded = defaultProps5.rounded,
-    fillMode = defaultProps5.fillMode,
-    themeColor = defaultProps5.themeColor,
+    size = defaultProps7.size,
+    rounded = defaultProps7.rounded,
+    fillMode = defaultProps7.fillMode,
+    themeColor = defaultProps7.themeColor,
     hover,
     focus,
     active,
@@ -4426,157 +4490,252 @@ var SplitButton = (props) => {
     disabled,
     icon,
     text,
-    arrowIconName = defaultProps5.arrowIconName,
+    arrowIconName = defaultProps7.arrowIconName,
+    popup,
+    opened,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-    "div",
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+      "div",
+      {
+        ...other,
+        className: classNames(
+          props.className,
+          SPLITBUTTON_CLASSNAME,
+          "k-button-group",
+          optionClassNames(SPLITBUTTON_CLASSNAME, {
+            rounded
+          })
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            Button,
+            {
+              text,
+              icon,
+              size,
+              rounded,
+              fillMode,
+              themeColor,
+              hover,
+              focus,
+              active,
+              selected,
+              disabled,
+              children: props.children
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            Button,
+            {
+              className: "k-split-button-arrow",
+              icon: arrowIconName,
+              size,
+              rounded,
+              fillMode,
+              disabled
+            }
+          )
+        ]
+      }
+    ),
+    opened && popup && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Popup, { className: "k-menu-popup", children: popup })
+  ] });
+};
+SplitButton.states = states7;
+SplitButton.options = options7;
+SplitButton.className = SPLITBUTTON_CLASSNAME;
+SplitButton.defaultProps = defaultProps7;
+
+// src/menu/menu-item.spec.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var MENUITEM_CLASSNAME = `k-menu-item`;
+var states8 = [
+  States.hover,
+  States.focus,
+  States.active,
+  States.selected,
+  States.disabled
+];
+var options8 = {};
+var defaultProps8 = {
+  dir: "ltr"
+};
+var MenuItem = (props) => {
+  const {
+    hover,
+    focus,
+    active,
+    selected,
+    disabled,
+    icon,
+    text,
+    showArrow,
+    arrowIconName,
+    dir = defaultProps8.dir,
+    children,
+    ...other
+  } = props;
+  const contentTemplate = /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, {});
+  if (children) {
+    children.forEach((child) => {
+      const component = child.type;
+      if (component === "MenuItemContent") {
+        contentTemplate.props.children.push(child);
+        return;
+      }
+    });
+  }
+  let expandArrowName = arrowIconName;
+  if (!expandArrowName) {
+    expandArrowName = dir === "rtl" ? "caret-alt-left" : "caret-alt-right";
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    "li",
     {
       ...other,
       className: classNames(
         props.className,
-        SPLITBUTTON_CLASSNAME,
-        "k-button-group",
-        optionClassNames(SPLITBUTTON_CLASSNAME, {
-          rounded
+        MENUITEM_CLASSNAME,
+        //TODO
+        "k-item",
+        stateClassNames(MENUITEM_CLASSNAME, {
+          focus,
+          disabled
         })
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          Button,
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+          "span",
           {
-            text,
-            icon,
-            size,
-            rounded,
-            fillMode,
-            themeColor,
-            hover,
-            focus,
-            active,
-            selected,
-            disabled,
-            children: props.children
+            className: classNames(
+              "k-link k-menu-link",
+              stateClassNames("k-menu-link", {
+                hover,
+                active,
+                selected,
+                disabled
+              })
+            ),
+            children: [
+              icon && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { className: "k-menu-link-icon", icon }),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "k-menu-link-text", children: text }),
+              showArrow && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "k-menu-expand-arrow", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { icon: expandArrowName }) })
+            ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          Button,
-          {
-            className: "k-split-button-arrow",
-            icon: arrowIconName,
-            size,
-            rounded,
-            fillMode,
-            disabled
-          }
-        )
+        contentTemplate
       ]
     }
   );
 };
-SplitButton.states = states5;
-SplitButton.options = options5;
-SplitButton.className = SPLITBUTTON_CLASSNAME;
-SplitButton.defaultProps = defaultProps5;
+MenuItem.states = states8;
+MenuItem.options = options8;
+MenuItem.className = MENUITEM_CLASSNAME;
+MenuItem.defaultProps = defaultProps8;
+var menu_item_spec_default = MenuItem;
 
-// src/split-button/tests/split-button-size.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var styles = `
-    #test-area {
-        max-width: 1240px;
-        grid-template-columns: 80px 320px 320px 1fr;
+// src/menu/menu-separator.spec.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var SEPARATOR_CLASSNAME = `k-separator`;
+var defaultProps9 = {
+  orientation: "horizontal"
+};
+var MenuSeparator = (props) => {
+  const {
+    orientation = defaultProps9.orientation,
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    "li",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        "k-item",
+        SEPARATOR_CLASSNAME,
+        {
+          [`${SEPARATOR_CLASSNAME}-${orientation}`]: orientation
+        }
+      )
+    }
+  );
+};
+var menu_separator_spec_default = MenuSeparator;
+
+// src/menu/menu-item-content.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+
+// src/menu/menu-list.spec.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_react = require("react");
+var MENULIST_CLASSNAME = `k-menu-group`;
+var states9 = [];
+var options9 = {
+  size: [Size.small, Size.medium, Size.large]
+};
+var defaultProps10 = {
+  size: Size.medium,
+  dir: "ltr"
+};
+var MenuList = (props) => {
+  const {
+    children,
+    size = defaultProps10.size,
+    dir = defaultProps10.dir,
+    ...other
+  } = props;
+  const listChildren = [];
+  if (children) {
+    if (Array.isArray(children)) {
+      children.map((child, index) => {
+        if (child.type === menu_item_spec_default) {
+          listChildren.push(
+            /* @__PURE__ */ (0, import_react.createElement)(menu_item_spec_default, { ...child.props, dir, key: index })
+          );
+        } else if (child.type === menu_separator_spec_default) {
+          listChildren.push(
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(menu_separator_spec_default, {})
+          );
+        } else {
+          listChildren.push(child);
+        }
+      });
     }
-    small,
-    section {
-        white-space: nowrap;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    "ul",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        MENULIST_CLASSNAME,
+        optionClassNames(MENULIST_CLASSNAME, {
+          size
+        })
+      ),
+      children: listChildren
     }
-`;
-var split_button_size_default = () => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("style", { children: styles }),
-  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { id: "test-area", className: "k-d-grid", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("small", { children: "rounded / size" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "small" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "medium" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "large" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "null" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("section", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SplitButton, { size: "small", rounded: null, children: "Button" }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SplitButton, { size: "small", rounded: null, icon: "folder", children: "Button" }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SplitButton, { size: "small", rounded: null, icon: "folder" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("section", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SplitButton, { size: "medium", rounded: null, children: "Button" }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SplitButton, { size: "medium", rounded: null, icon: "folder", children: "Button" }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SplitButton, { size: "medium", rounded: null, icon: "folder" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("section", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SplitButton, { size: "large", rounded: null, children: "Button" }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SplitButton, { size: "large", rounded: null, icon: "folder", children: "Button" }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SplitButton, { size: "large", rounded: null, icon: "folder" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "small" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("section", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SplitButton, { size: "small", rounded: "small", children: "Button" }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SplitButton, { size: "small", rounded: "small", icon: "folder", children: "Button" }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SplitButton, { size: "small", rounded: "small", icon: "folder" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("section", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SplitButton, { size: "medium", rounded: "small", children: "Button" }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SplitButton, { size: "medium", rounded: "small", icon: "folder", children: "Button" }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SplitButton, { size: "medium", rounded: "small", icon: "folder" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("section", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SplitButton, { size: "large", rounded: "small", children: "Button" }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SplitButton, { size: "large", rounded: "small", icon: "folder", children: "Button" }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SplitButton, { size: "large", rounded: "small", icon: "folder" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "medium" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("section", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SplitButton, { size: "small", children: "Button" }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SplitButton, { size: "small", icon: "folder", children: "Button" }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SplitButton, { size: "small", icon: "folder" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("section", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SplitButton, { size: "medium", children: "Button" }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SplitButton, { size: "medium", icon: "folder", children: "Button" }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SplitButton, { size: "medium", icon: "folder" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("section", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SplitButton, { size: "large", children: "Button" }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SplitButton, { size: "large", icon: "folder", children: "Button" }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SplitButton, { size: "large", icon: "folder" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "large" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("section", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SplitButton, { size: "small", rounded: "large", children: "Button" }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SplitButton, { size: "small", rounded: "large", icon: "folder", children: "Button" }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SplitButton, { size: "small", rounded: "large", icon: "folder" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("section", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SplitButton, { size: "medium", rounded: "large", children: "Button" }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SplitButton, { size: "medium", rounded: "large", icon: "folder", children: "Button" }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SplitButton, { size: "medium", rounded: "large", icon: "folder" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("section", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SplitButton, { size: "large", rounded: "large", children: "Button" }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SplitButton, { size: "large", rounded: "large", icon: "folder", children: "Button" }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SplitButton, { size: "large", rounded: "large", icon: "folder" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "full" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("section", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SplitButton, { size: "small", rounded: "full", children: "Button" }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SplitButton, { size: "small", rounded: "full", icon: "folder", children: "Button" }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SplitButton, { size: "small", rounded: "full", icon: "folder" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("section", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SplitButton, { size: "medium", rounded: "full", children: "Button" }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SplitButton, { size: "medium", rounded: "full", icon: "folder", children: "Button" }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SplitButton, { size: "medium", rounded: "full", icon: "folder" })
+  );
+};
+MenuList.states = states9;
+MenuList.options = options9;
+MenuList.className = MENULIST_CLASSNAME;
+MenuList.defaultProps = defaultProps10;
+
+// src/split-button/templates/split-button-popup.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var SplitButtonPopup = (props) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  SplitButton,
+  {
+    children: "button",
+    opened: true,
+    popup: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(MenuList, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(MenuItem, { text: "Menu Item" }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(MenuItem, { text: "Menu Item" }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(MenuItem, { text: "Menu Item" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("section", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SplitButton, { size: "large", rounded: "full", children: "Button" }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SplitButton, { size: "large", rounded: "full", icon: "folder", children: "Button" }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SplitButton, { size: "large", rounded: "full", icon: "folder" })
-    ] })
-  ] })
-] });
+    ...props
+  }
+);