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

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/gantt/gantt-columns-table.spec.d.ts

@@ -0,0 +1,3 @@
+import { KendoTableOptions } from '../table';
+export declare const GANTTCOLUMNSTABLE_CLASSNAME = "k-gantt-columns";
+export declare const GanttColumnsTable: (props: KendoTableOptions & React.HTMLAttributes<HTMLTableElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/gantt/gantt-content.spec.d.ts

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

package/dist/types/gantt/gantt-footer-toolbar.spec.d.ts

@@ -0,0 +1,2 @@
+import { KendoToolbarProps } from '../toolbar';
+export declare const GanttFooterToolbar: (props: KendoToolbarProps & React.HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/gantt/gantt-header-toolbar.spec.d.ts

@@ -0,0 +1,2 @@
+import { KendoToolbarProps } from '../toolbar';
+export declare const GanttHeaderToolbar: (props: KendoToolbarProps & React.HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/gantt/gantt-line.spec.d.ts

@@ -0,0 +1,14 @@
+export declare const GANTTLINE_CLASSNAME = "k-gantt-line";
+export type KendoGanttLineProps = {
+    orientation?: "horizontal" | "vertical";
+};
+export declare const GanttLine: {
+    (props: KendoGanttLineProps & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    states: any[];
+    options: {};
+    className: string;
+    defaultProps: {
+        orientation: string;
+    };
+};
+export default GanttLine;

package/dist/types/gantt/gantt-rows-table.spec.d.ts

@@ -0,0 +1,3 @@
+import { KendoTableOptions } from '../table';
+export declare const GANTTROWSTABLE_CLASSNAME = "k-gantt-rows";
+export declare const GanttRowsTable: (props: KendoTableOptions & React.HTMLAttributes<HTMLTableElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/gantt/gantt-tables-wrapper.spec.d.ts

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

package/dist/types/gantt/gantt-task-content.spec.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export declare const GANTTTASKCONTENT_CLASSNAME = "k-task-content";
+export type KendoGanttTaskContentProps = {
+    content?: string | JSX.Element | JSX.Element[];
+};
+export declare const GanttTaskContent: {
+    (props: KendoGanttTaskContentProps & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    states: any[];
+    options: {};
+    className: string;
+    defaultProps: {};
+};
+export default GanttTaskContent;

package/dist/types/gantt/gantt-task-dot.spec.d.ts

@@ -0,0 +1,14 @@
+export declare const GANTTTASKWDOT_CLASSNAME = "k-task-dot";
+export type KendoGanttTaskDotProps = {
+    position?: "start" | "end";
+};
+export declare const GanttTaskDot: {
+    (props: KendoGanttTaskDotProps & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    states: any[];
+    options: {};
+    className: string;
+    defaultProps: {
+        position: string;
+    };
+};
+export default GanttTaskDot;

package/dist/types/gantt/gantt-task-wrap.spec.d.ts

@@ -0,0 +1,14 @@
+export declare const GANTTTASKWRAP_CLASSNAME = "k-task-wrap";
+export type KendoGanttTaskWrapProps = {
+    type?: "single" | "milestone" | "summary";
+};
+export declare const GanttTaskWrap: {
+    (props: KendoGanttTaskWrapProps & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    states: any[];
+    options: {};
+    className: string;
+    defaultProps: {
+        type: string;
+    };
+};
+export default GanttTaskWrap;

package/dist/types/gantt/gantt-task.spec.d.ts

@@ -0,0 +1,14 @@
+export declare const GANTTTASK_CLASSNAME = "k-task";
+export type KendoGanttTaskProps = {
+    type?: "single" | "milestone" | "summary";
+};
+export declare const GanttTask: {
+    (props: KendoGanttTaskProps & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    states: any[];
+    options: {};
+    className: string;
+    defaultProps: {
+        type: string;
+    };
+};
+export default GanttTask;

package/dist/types/gantt/gantt-tasks-table.spec.d.ts

@@ -0,0 +1,3 @@
+import { KendoTableOptions } from '../table';
+export declare const GANTTTASKSTABLE_CLASSNAME = "k-gantt-tasks";
+export declare const GanttTasksTable: (props: KendoTableOptions & React.HTMLAttributes<HTMLTableElement>) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export declare const GANTT_CLASSNAME = "k-gantt";
+export type KendoGanttProps = {
+    headerToolbar?: JSX.Element;
+    footerToolbar?: JSX.Element;
+};
+export declare const Gantt: {
+    (props: KendoGanttProps & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    states: any[];
+    options: {};
+    className: string;
+    defaultProps: {};
+};
+export default Gantt;

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

@@ -0,0 +1,13 @@
+export * from './gantt.spec';
+export * from './gantt-header-toolbar.spec';
+export * from './gantt-footer-toolbar.spec';
+export * from './gantt-content.spec';
+export * from './gantt-tables-wrapper.spec';
+export * from './gantt-columns-table.spec';
+export * from './gantt-rows-table.spec';
+export * from './gantt-tasks-table.spec';
+export * from './gantt-task.spec';
+export * from './gantt-task-wrap.spec';
+export * from './gantt-task-dot.spec';
+export * from './gantt-task-content.spec';
+export * from './gantt-line.spec';

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.2",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -52,5 +52,5 @@
   "devDependencies": {
     "@types/react": "^18.0.2"
   },
-  "gitHead": "e2d5c5a08efe3d7ba9bb5a5c9666d7f2aab15d3d"
+  "gitHead": "08e13ce0104dd28d6921783cb33c2ba53da6a0e7"
 }

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>
+);