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

package/dist/types/column-menu/column-menu-expander.spec.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+export declare const COLUMNMENUEXPANDER_CLASSNAME = "k-expander";
+export type KendoColumnMenuExpanderProps = {
+    itemText?: string;
+    itemIcon?: string;
+    expanderIcon?: string;
+    itemContent?: JSX.Element;
+    expanded?: boolean;
+};
+export declare const ColumnMenuExpander: {
+    (props: KendoColumnMenuExpanderProps & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    states: any[];
+    options: {};
+    className: string;
+    defaultProps: {};
+};
+export default ColumnMenuExpander;

package/dist/types/column-menu/column-menu-item-content.d.ts

@@ -0,0 +1 @@
+export declare const ColumnMenuItemContent: (props: React.HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/column-menu/column-menu-item-wrapper.d.ts

@@ -0,0 +1 @@
+export declare const ColumnMenuItemWrapper: (props: React.HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/column-menu/column-menu-item.spec.d.ts

@@ -0,0 +1,17 @@
+export declare const COLUMNMENUITEM_CLASSNAME = "k-columnmenu-item";
+declare const states: ("focus" | "selected")[];
+export type KendoColumnMenuItemProps = {
+    text?: string;
+    icon?: string;
+};
+export type KendoColumnMenuItemState = {
+    [K in (typeof states)[number]]?: boolean;
+};
+export declare const ColumnMenuItem: {
+    (props: KendoColumnMenuItemProps & KendoColumnMenuItemState & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    states: ("focus" | "selected")[];
+    options: {};
+    className: string;
+    defaultProps: {};
+};
+export default ColumnMenuItem;

package/dist/types/column-menu/column-menu-multicheck-item.d.ts

@@ -0,0 +1,4 @@
+export type KendoColumnMenuMulticheckItemProps = {
+    text: string;
+};
+export declare const ColumnMenuMulticheckItem: (props: KendoColumnMenuMulticheckItemProps & React.HTMLAttributes<HTMLLIElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/column-menu/column-menu-multicheck-wrap.d.ts

@@ -0,0 +1 @@
+export declare const ColumnMenuMulticheckWrap: (props: React.HTMLAttributes<HTMLUListElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/column-menu/column-menu.spec.d.ts

@@ -0,0 +1,14 @@
+export declare const COLUMNMENU_CLASSNAME = "k-column-menu";
+export type KendoColumnMenuProps = {
+    view?: 'list' | 'tabbed';
+};
+export declare const ColumnMenu: {
+    (props: KendoColumnMenuProps & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    states: any[];
+    options: {};
+    className: string;
+    defaultProps: {
+        view: string;
+    };
+};
+export default ColumnMenu;

package/dist/types/column-menu/filter-menu.spec.d.ts

@@ -0,0 +1,9 @@
+export declare const FILTERMENU_CLASSNAME = "k-filter-menu";
+export declare const FilterMenu: {
+    (props: React.HTMLAttributes<HTMLFormElement>): import("react/jsx-runtime").JSX.Element;
+    states: any[];
+    options: {};
+    className: string;
+    defaultProps: {};
+};
+export default FilterMenu;

package/dist/types/column-menu/index.d.ts

@@ -0,0 +1,12 @@
+export * from './column-menu.spec';
+export * from './column-menu-item.spec';
+export * from './column-menu-item-wrapper';
+export * from './column-menu-item-content';
+export * from './filter-menu.spec';
+export * from './column-menu-multicheck-wrap';
+export * from './column-menu-multicheck-item';
+export * from './column-menu-expander.spec';
+export * from './templates/column-menu-normal';
+export * from './templates/column-menu-tabbed';
+export * from './templates/filter-menu-normal';
+export * from './templates/filter-menu-multi-check';

package/dist/types/column-menu/templates/column-menu-normal.d.ts

@@ -0,0 +1 @@
+export declare const ColumnMenuNormal: (props: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/column-menu/templates/column-menu-tabbed.d.ts

@@ -0,0 +1 @@
+export declare const ColumnMenuTabbed: (props: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/column-menu/templates/filter-menu-multi-check.d.ts

@@ -0,0 +1 @@
+export declare const FilterMenuMultiCheck: (props: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/column-menu/templates/filter-menu-normal.d.ts

@@ -0,0 +1 @@
+export declare const FilterMenuNormal: (props: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/column-menu/tests/column-menu-rtl.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/types/column-menu/tests/column-menu-tabbed.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/types/column-menu/tests/column-menu.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/types/index.d.ts

@@ -73,9 +73,11 @@ export * from './splitter/index';
 export * from './tilelayout/index';
 export * from './grid/index';
 export * from './listview/index';
+export * from './treelist/index';
 export * from './filter/index';
 export * from './filemanager/index';
 export * from './taskboard/index';
+export * from './column-menu/index';
 export * from './chat/index';
 export * from './timeline/index';
 export * from './pdf-viewer/index';

package/dist/types/treelist/index.d.ts

@@ -0,0 +1 @@
+export * from './treelist.spec';

package/dist/types/treelist/treelist.spec.d.ts

@@ -0,0 +1,9 @@
+import { KendoGridProps } from '../grid';
+export declare const TreeList: {
+    (props: KendoGridProps & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    states: any[];
+    options: {};
+    className: string;
+    defaultProps: {};
+};
+export default TreeList;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-themes-html",
   "description": "A collection of HTML helpers used for developing Kendo UI themes",
-  "version": "7.2.1-dev.0",
+  "version": "7.2.1-dev.1",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -52,5 +52,5 @@
   "devDependencies": {
     "@types/react": "^18.0.2"
   },
-  "gitHead": "e2d5c5a08efe3d7ba9bb5a5c9666d7f2aab15d3d"
+  "gitHead": "e457fb8fc63a63e7f4b44765d1240403e0b74703"
 }

package/src/column-menu/column-menu-expander.spec.tsx

@@ -0,0 +1,66 @@
+import { classNames } from '../misc';
+import { Icon } from '../icon';
+import { ColumnMenuItem, ColumnMenuItemContent } from '../column-menu';
+
+export const COLUMNMENUEXPANDER_CLASSNAME = `k-expander`;
+
+const states = [];
+
+const options = {};
+
+export type KendoColumnMenuExpanderProps = {
+    itemText?: string;
+    itemIcon?: string;
+    expanderIcon?: string;
+    itemContent?: JSX.Element;
+    expanded?: boolean;
+};
+
+const defaultProps = {};
+
+export const ColumnMenuExpander = (
+    props: KendoColumnMenuExpanderProps &
+        React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        itemText,
+        itemIcon,
+        expanded,
+        itemContent,
+        expanderIcon,
+        ...other
+    } = props;
+
+    let icon = <></>;
+
+    if ( !expanded && !expanderIcon) {
+        icon = <Icon icon="chevron-down" />;
+    } else if (expanded && !expanderIcon) {
+        icon = <Icon icon="chevron-up" />;
+    } else { icon = <Icon icon={expanderIcon} />; }
+
+    return (
+        <div
+            {...other}
+            className={classNames(
+                props.className,
+                COLUMNMENUEXPANDER_CLASSNAME
+            )}>
+            <ColumnMenuItem text={itemText} icon={itemIcon}>
+                <span className="k-spacer"></span>
+                <span className="k-expander-indicator">
+                    {icon}
+                </span>
+            </ColumnMenuItem>
+            { expanded && <ColumnMenuItemContent>{itemContent}</ColumnMenuItemContent> }
+            { props.children }
+        </div>
+    );
+};
+
+ColumnMenuExpander.states = states;
+ColumnMenuExpander.options = options;
+ColumnMenuExpander.className = COLUMNMENUEXPANDER_CLASSNAME;
+ColumnMenuExpander.defaultProps = defaultProps;
+
+export default ColumnMenuExpander;

package/src/column-menu/column-menu-item-content.tsx

@@ -0,0 +1,18 @@
+import { classNames } from '../misc';
+
+const className = `k-columnmenu-item-content`;
+
+export const ColumnMenuItemContent = (
+    props: React.HTMLAttributes<HTMLDivElement>
+) => (
+    <div
+        {...props}
+        className={classNames(
+            props.className,
+            className,
+            "k-columns-item"
+        )}
+    >
+        {props.children}
+    </div>
+);

package/src/column-menu/column-menu-item-wrapper.tsx

@@ -0,0 +1,17 @@
+import { classNames } from '../misc';
+
+const className = `k-columnmenu-item-wrapper`;
+
+export const ColumnMenuItemWrapper = (
+    props: React.HTMLAttributes<HTMLDivElement>
+) => (
+    <div
+        {...props}
+        className={classNames(
+            props.className,
+            className,
+        )}
+    >
+        {props.children}
+    </div>
+);

package/src/column-menu/column-menu-item.spec.tsx

@@ -0,0 +1,56 @@
+import { classNames, stateClassNames, States } from '../misc';
+import { Icon } from '../icon';
+
+export const COLUMNMENUITEM_CLASSNAME = `k-columnmenu-item`;
+
+const states = [
+    States.focus,
+    States.selected
+];
+
+const options = {};
+
+export type KendoColumnMenuItemProps = {
+    text?: string;
+    icon?: string;
+};
+
+const defaultProps = {};
+
+export type KendoColumnMenuItemState = { [K in (typeof states)[number]]?: boolean };
+
+export const ColumnMenuItem = (
+    props: KendoColumnMenuItemProps & KendoColumnMenuItemState &
+        React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        focus,
+        selected,
+        text,
+        icon,
+        ...other
+    } = props;
+
+    return (
+        <div
+            {...other}
+            className={classNames(
+                props.className,
+                COLUMNMENUITEM_CLASSNAME,
+                stateClassNames(COLUMNMENUITEM_CLASSNAME, {
+                    focus,
+                    selected,
+                })
+            )}>
+            <Icon icon={icon} />{text}
+            {props.children}
+        </div>
+    );
+};
+
+ColumnMenuItem.states = states;
+ColumnMenuItem.options = options;
+ColumnMenuItem.className = COLUMNMENUITEM_CLASSNAME;
+ColumnMenuItem.defaultProps = defaultProps;
+
+export default ColumnMenuItem;

package/src/column-menu/column-menu-multicheck-item.tsx

@@ -0,0 +1,32 @@
+import { classNames } from '../misc';
+import { Checkbox } from '../checkbox';
+
+const className = `k-item`;
+
+export type KendoColumnMenuMulticheckItemProps = {
+    text: string;
+}
+
+export const ColumnMenuMulticheckItem = (
+    props: KendoColumnMenuMulticheckItemProps &
+        React.HTMLAttributes<HTMLLIElement>
+) => {
+    const {
+        text,
+        ...other
+    } = props;
+
+    return (
+        <li
+            {...other}
+            className={classNames(
+                props.className,
+                className
+            )}
+        >
+            <label className="k-label k-checkbox-label">
+                <Checkbox /><span>{text}</span>
+            </label>
+        </li>
+    );
+};

package/src/column-menu/column-menu-multicheck-wrap.tsx

@@ -0,0 +1,17 @@
+import { classNames } from '../misc';
+
+const className = `k-multicheck-wrap`;
+
+export const ColumnMenuMulticheckWrap = (
+    props: React.HTMLAttributes<HTMLUListElement>
+) => (
+    <ul
+        {...props}
+        className={classNames(
+            props.className,
+            className
+        )}
+    >
+        {props.children}
+    </ul>
+);

package/src/column-menu/column-menu.spec.tsx

@@ -0,0 +1,46 @@
+import { classNames } from '../misc';
+
+export const COLUMNMENU_CLASSNAME = `k-column-menu`;
+
+const states = [];
+
+const options = {};
+
+export type KendoColumnMenuProps = {
+    view?: 'list' | 'tabbed';
+};
+
+const defaultProps = {
+    view: 'list',
+};
+
+export const ColumnMenu = (
+    props: KendoColumnMenuProps &
+        React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        view = defaultProps.view,
+        ...other
+    } = props;
+
+    return (
+        <div
+            {...other}
+            className={classNames(
+                props.className,
+                COLUMNMENU_CLASSNAME,
+                {
+                    'k-column-menu-tabbed': view === 'tabbed'
+                },
+            )}>
+            { props.children }
+        </div>
+    );
+};
+
+ColumnMenu.states = states;
+ColumnMenu.options = options;
+ColumnMenu.className = COLUMNMENU_CLASSNAME;
+ColumnMenu.defaultProps = defaultProps;
+
+export default ColumnMenu;

package/src/column-menu/filter-menu.spec.tsx

@@ -0,0 +1,38 @@
+import { classNames } from '../misc';
+
+export const FILTERMENU_CLASSNAME = `k-filter-menu`;
+
+const states = [];
+
+const options = {};
+
+const defaultProps = {};
+
+export const FilterMenu = (
+    props: React.HTMLAttributes<HTMLFormElement>
+) => {
+    const {
+        ...other
+    } = props;
+
+    return (
+        <form
+            {...other}
+            className={classNames(
+                props.className,
+                FILTERMENU_CLASSNAME
+            )}
+        >
+            <div className="k-filter-menu-container">
+                {props.children}
+            </div>
+        </form>
+    );
+};
+
+FilterMenu.states = states;
+FilterMenu.options = options;
+FilterMenu.className = FILTERMENU_CLASSNAME;
+FilterMenu.defaultProps = defaultProps;
+
+export default FilterMenu;

package/src/column-menu/index.ts

@@ -0,0 +1,12 @@
+export * from './column-menu.spec';
+export * from './column-menu-item.spec';
+export * from './column-menu-item-wrapper';
+export * from './column-menu-item-content';
+export * from './filter-menu.spec';
+export * from './column-menu-multicheck-wrap';
+export * from './column-menu-multicheck-item';
+export * from './column-menu-expander.spec';
+export * from './templates/column-menu-normal';
+export * from './templates/column-menu-tabbed';
+export * from './templates/filter-menu-normal';
+export * from './templates/filter-menu-multi-check';

package/src/column-menu/templates/column-menu-normal.tsx

@@ -0,0 +1,23 @@
+import { ColumnMenu, ColumnMenuItemWrapper, ColumnMenuItem, ColumnMenuExpander } from "../../column-menu";
+
+export const ColumnMenuNormal = (props) => (
+    <ColumnMenu
+        children={[
+            <ColumnMenuItemWrapper>
+                <ColumnMenuItem text="Item 1" icon="sort-asc-small" />
+                <ColumnMenuItem text="Item 2" icon="sort-desc-small" />
+            </ColumnMenuItemWrapper>,
+            <ColumnMenuItemWrapper>
+                <ColumnMenuExpander itemText="Expandable item 1" itemIcon="columns" />
+            </ColumnMenuItemWrapper>,
+            <ColumnMenuItemWrapper>
+                <ColumnMenuExpander itemText="Expandable item 2" itemIcon="filter" />
+            </ColumnMenuItemWrapper>,
+            <ColumnMenuItemWrapper>
+                <ColumnMenuExpander itemText="Item with icons" itemIcon="arrows-left-right" expanderIcon="window-restore"/>
+            </ColumnMenuItemWrapper>
+        ]}
+        {...props}
+    >
+    </ColumnMenu>
+);

package/src/column-menu/templates/column-menu-tabbed.tsx

@@ -0,0 +1,36 @@
+import { ColumnMenu } from "../../column-menu";
+import { Icon } from '../../icon';
+
+export const ColumnMenuTabbed = (props) => (
+    <ColumnMenu
+        view="tabbed"
+        children={[
+            <div className="k-tabstrip k-pos-relative k-tabstrip-top">
+                <div className="k-tabstrip-items-wrapper k-hstack">
+                    <ul className="k-reset k-tabstrip-items">
+                        <li className="k-tabstrip-item k-item k-active">
+                            <span className="k-link">
+                                <Icon icon="filter" />
+                            </span>
+                        </li>
+                        <li className="k-tabstrip-item k-item">
+                            <span className="k-link">
+                                <Icon icon="sliders" />
+                            </span>
+                        </li>
+                        <li className="k-tabstrip-item k-item">
+                            <span className="k-link">
+                                <Icon icon="columns" />
+                            </span>
+                        </li>
+                    </ul>
+                </div>
+                <div className="k-tabstrip-content k-active">
+                    Tabbed column menu content
+                </div>
+            </div>
+        ]}
+        {...props}
+    >
+    </ColumnMenu>
+);

package/src/column-menu/templates/filter-menu-multi-check.tsx

@@ -0,0 +1,26 @@
+import { FilterMenu, ColumnMenuMulticheckWrap, ColumnMenuMulticheckItem } from "../../column-menu";
+import { Searchbox } from '../../searchbox';
+import { ActionButtons } from '../../action-buttons';
+import { Button } from '../../button';
+
+export const FilterMenuMultiCheck = (props) => (
+    <FilterMenu
+        children={[
+            <Searchbox placeholder="Search..." />,
+            <ColumnMenuMulticheckWrap>
+                <ColumnMenuMulticheckItem text="Select All" className="k-check-all-wrap" />
+                <ColumnMenuMulticheckItem text="Column 1" />
+                <ColumnMenuMulticheckItem text="Column 2" />
+                <ColumnMenuMulticheckItem text="Column 3" />
+                <ColumnMenuMulticheckItem text="Column 4 Column 4 Column 4 Column 4 Column 4 Column 4 Column 4 Column 4" />
+            </ColumnMenuMulticheckWrap>,
+            <div className="k-filter-selected-items">0 selected items</div>,
+            <ActionButtons alignment="stretched">
+                <Button themeColor="primary">Apply</Button>
+                <Button>Clear</Button>
+            </ActionButtons>
+        ]}
+        {...props}
+    >
+    </FilterMenu>
+);

package/src/column-menu/templates/filter-menu-normal.tsx

@@ -0,0 +1,23 @@
+import { FilterMenu } from "../../column-menu";
+import { DropdownList } from "../../dropdownlist";
+import { Textbox } from "../../textbox";
+import { ActionButtons } from '../../action-buttons';
+import { Button } from '../../button';
+
+export const FilterMenuNormal = (props) => (
+    <FilterMenu
+        children={[
+            <DropdownList value="Contains" />,
+            <Textbox placeholder="Filter..." />,
+            <DropdownList value="And" className="k-filter-and" />,
+            <DropdownList value="Contains" />,
+            <Textbox placeholder="Filter..." />,
+            <ActionButtons alignment="stretched">
+                <Button themeColor="primary">Filter</Button>
+                <Button>Clear</Button>
+            </ActionButtons>
+        ]}
+        {...props}
+    >
+    </FilterMenu>
+);