@progress/kendo-themes-html 7.1.1-dev.0 → 7.2.0-dev.0

package/dist/esm/table/table-th.js

@@ -12,6 +12,7 @@ var TableTh = (props) => {
   const {
     text,
     colspan,
+    rowspan,
     ...other
   } = props;
   const textOrChildren = text ? text : props.children;
@@ -19,6 +20,7 @@ var TableTh = (props) => {
     "th",
     {
       colSpan: colspan,
+      rowSpan: rowspan,
       ...other,
       className: classNames(
         props.className,

package/dist/esm/table/templates/data-table-normal.js

@@ -325,6 +325,7 @@ var TableTh = (props) => {
   const {
     text,
     colspan,
+    rowspan,
     ...other
   } = props;
   const textOrChildren = text ? text : props.children;
@@ -332,6 +333,7 @@ var TableTh = (props) => {
     "th",
     {
       colSpan: colspan,
+      rowSpan: rowspan,
       ...other,
       className: classNames(
         props.className,

package/dist/esm/table/templates/table-list-virtualization.js

@@ -323,6 +323,7 @@ var TableTh = (props) => {
   const {
     text,
     colspan,
+    rowspan,
     ...other
   } = props;
   const textOrChildren = text ? text : props.children;
@@ -330,6 +331,7 @@ var TableTh = (props) => {
     "th",
     {
       colSpan: colspan,
+      rowSpan: rowspan,
       ...other,
       className: classNames(
         props.className,

package/dist/esm/table/templates/table-list.js

@@ -334,6 +334,7 @@ var TableTh = (props) => {
   const {
     text,
     colspan,
+    rowspan,
     ...other
   } = props;
   const textOrChildren = text ? text : props.children;
@@ -341,6 +342,7 @@ var TableTh = (props) => {
     "th",
     {
       colSpan: colspan,
+      rowSpan: rowspan,
       ...other,
       className: classNames(
         props.className,

package/dist/esm/table/templates/table-native.js

@@ -291,6 +291,7 @@ var TableTh = (props) => {
   const {
     text,
     colspan,
+    rowspan,
     ...other
   } = props;
   const textOrChildren = text ? text : props.children;
@@ -298,6 +299,7 @@ var TableTh = (props) => {
     "th",
     {
       colSpan: colspan,
+      rowSpan: rowspan,
       ...other,
       className: classNames(
         props.className,

package/dist/esm/table/tests/table-data-sizes.js

@@ -325,6 +325,7 @@ var TableTh = (props) => {
   const {
     text,
     colspan,
+    rowspan,
     ...other
   } = props;
   const textOrChildren = text ? text : props.children;
@@ -332,6 +333,7 @@ var TableTh = (props) => {
     "th",
     {
       colSpan: colspan,
+      rowSpan: rowspan,
       ...other,
       className: classNames(
         props.className,

package/dist/esm/table/tests/table-list-jquery.js

@@ -334,6 +334,7 @@ var TableTh = (props) => {
   const {
     text,
     colspan,
+    rowspan,
     ...other
   } = props;
   const textOrChildren = text ? text : props.children;
@@ -341,6 +342,7 @@ var TableTh = (props) => {
     "th",
     {
       colSpan: colspan,
+      rowSpan: rowspan,
       ...other,
       className: classNames(
         props.className,

package/dist/esm/table/tests/table-list-sizes.js

@@ -334,6 +334,7 @@ var TableTh = (props) => {
   const {
     text,
     colspan,
+    rowspan,
     ...other
   } = props;
   const textOrChildren = text ? text : props.children;
@@ -341,6 +342,7 @@ var TableTh = (props) => {
     "th",
     {
       colSpan: colspan,
+      rowSpan: rowspan,
       ...other,
       className: classNames(
         props.className,

package/dist/esm/table/tests/table-list-virtual.js

@@ -323,6 +323,7 @@ var TableTh = (props) => {
   const {
     text,
     colspan,
+    rowspan,
     ...other
   } = props;
   const textOrChildren = text ? text : props.children;
@@ -330,6 +331,7 @@ var TableTh = (props) => {
     "th",
     {
       colSpan: colspan,
+      rowSpan: rowspan,
       ...other,
       className: classNames(
         props.className,

package/dist/esm/table/tests/table-native-sizes.js

@@ -291,6 +291,7 @@ var TableTh = (props) => {
   const {
     text,
     colspan,
+    rowspan,
     ...other
   } = props;
   const textOrChildren = text ? text : props.children;
@@ -298,6 +299,7 @@ var TableTh = (props) => {
     "th",
     {
       colSpan: colspan,
+      rowSpan: rowspan,
       ...other,
       className: classNames(
         props.className,

package/dist/esm/table/tests/table-native-states.js

@@ -291,6 +291,7 @@ var TableTh = (props) => {
   const {
     text,
     colspan,
+    rowspan,
     ...other
   } = props;
   const textOrChildren = text ? text : props.children;
@@ -298,6 +299,7 @@ var TableTh = (props) => {
     "th",
     {
       colSpan: colspan,
+      rowSpan: rowspan,
       ...other,
       className: classNames(
         props.className,

package/dist/types/grid/grid-container.spec.d.ts

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

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

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

package/dist/types/grid/grid-footer-table.spec.d.ts

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

package/dist/types/grid/grid-footer.spec.d.ts

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

package/dist/types/grid/grid-grouping-header.spec.d.ts

@@ -0,0 +1,5 @@
+export type KendoGroupingHeaderProps = {
+    dropHint?: string;
+    dropClue?: boolean;
+};
+export declare const GridGroupingHeader: (props: KendoGroupingHeaderProps & React.HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/grid/grid-header-cell.spec.d.ts

@@ -0,0 +1,17 @@
+import { KendoTableThProps } from "../table/table-th";
+declare const states: ("active" | "focus" | "hover")[];
+export type KendoGridHeaderCellProps = KendoTableThProps & {
+    menu?: "filter" | "column";
+    sortable?: boolean;
+    sticky?: boolean;
+    resizable?: boolean;
+    columnTitle?: string;
+    scope?: string;
+    sortIcon?: string;
+    sortOrder?: number;
+};
+export type KendoGridHeaderCellState = {
+    [K in (typeof states)[number]]?: boolean;
+};
+export declare const GridHeaderCell: (props: KendoGridHeaderCellProps & KendoGridHeaderCellState & React.HTMLAttributes<HTMLTableCellElement>) => import("react/jsx-runtime").JSX.Element;
+export default GridHeaderCell;

package/dist/types/grid/grid-header-table.spec.d.ts

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

package/dist/types/grid/grid-header.spec.d.ts

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

package/dist/types/grid/grid-pager.spec.d.ts

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

package/dist/types/grid/grid-table.spec.d.ts

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

package/dist/types/grid/grid-toolbar.spec.d.ts

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

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

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+export declare const GRID_CLASSNAME = "k-grid";
+declare const options: {
+    size: ("small" | "medium" | "large")[];
+};
+export type KendoGridOptions = {
+    size?: (typeof options.size)[number] | null;
+};
+export type KendoGridProps = KendoGridOptions & {
+    toolbar?: JSX.Element;
+    pager?: JSX.Element;
+    pagerPosition?: 'top' | 'bottom';
+    groupingHeader?: JSX.Element;
+    _renderAriaRoot?: boolean;
+};
+export declare const Grid: {
+    (props: KendoGridProps & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    states: any[];
+    options: {
+        size: ("small" | "medium" | "large")[];
+    };
+    className: string;
+    defaultProps: {
+        size: "medium";
+        pagerPosition: string;
+    };
+};
+export default Grid;

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

@@ -0,0 +1,12 @@
+export * from './grid.spec';
+export * from './grid-header.spec';
+export * from './grid-grouping-header.spec';
+export * from './grid-header-table.spec';
+export * from './grid-header-cell.spec';
+export * from './grid-container.spec';
+export * from './grid-content.spec';
+export * from './grid-table.spec';
+export * from './grid-footer.spec';
+export * from './grid-footer-table.spec';
+export * from './grid-pager.spec';
+export * from './grid-toolbar.spec';

package/dist/types/index.d.ts

@@ -68,6 +68,7 @@ export * from './card/index';
 export * from './expansion-panel/index';
 export * from './splitter/index';
 export * from './tilelayout/index';
+export * from './grid/index';
 export * from './listview/index';
 export * from './filter/index';
 export * from './filemanager/index';

package/dist/types/table/table-th.d.ts

@@ -1,5 +1,6 @@
 export type KendoTableThProps = {
     text?: string;
     colspan?: any;
+    rowspan?: any;
 };
 export declare const TableTh: (props: KendoTableThProps & React.HTMLAttributes<HTMLTableCellElement>) => import("react/jsx-runtime").JSX.Element;

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.1.1-dev.0",
+  "version": "7.2.0-dev.0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -52,5 +52,5 @@
   "devDependencies": {
     "@types/react": "^18.0.2"
   },
-  "gitHead": "d879bc81a2fce80d78a55bb65466396bf71ca022"
+  "gitHead": "7b4e2fb481605b5b53d064fb79bbb60ea0c41d13"
 }

package/src/grid/grid-container.spec.tsx

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

package/src/grid/grid-content.spec.tsx

@@ -0,0 +1,16 @@
+import { classNames } from '../misc';
+
+const className = `k-grid-content`;
+
+export const GridContent = (
+    props: React.HTMLAttributes<HTMLDivElement>
+) => (
+    <div
+        {...props}
+        className={classNames(
+            props.className,
+            className,
+        )}>
+        {props.children}
+    </div>
+);

package/src/grid/grid-footer-table.spec.tsx

@@ -0,0 +1,20 @@
+import { classNames } from '../misc';
+import { Table, KendoTableOptions } from '../table';
+
+export const GRIDFOOTERTABLE_CLASSNAME = `k-grid-footer-table`;
+
+export const GridFooterTable = (
+    props: KendoTableOptions &
+        React.HTMLAttributes<HTMLTableElement>
+) => (
+    <Table
+        size="medium"
+        {...props}
+        className={classNames(
+            props.className,
+            GRIDFOOTERTABLE_CLASSNAME,
+        )}
+    >
+        {props.children}
+    </Table>
+);

package/src/grid/grid-footer.spec.tsx

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

package/src/grid/grid-grouping-header.spec.tsx

@@ -0,0 +1,33 @@
+import { classNames } from '../misc';
+
+const className = `k-grouping-header`;
+
+export type KendoGroupingHeaderProps = {
+    dropHint?: string;
+    dropClue?: boolean;
+};
+
+export const GridGroupingHeader = (
+    props: KendoGroupingHeaderProps &
+    React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        dropHint,
+        dropClue,
+        ...others
+    } = props;
+
+    return (
+        <div
+            {...others}
+            className={classNames(
+                props.className,
+                className,
+            )}
+        >
+            { dropClue && <div className="k-grouping-dropclue"></div> }
+            {props.children}
+            <div className="k-grouping-drop-container">{dropHint}</div>
+        </div>
+    );
+};

package/src/grid/grid-header-cell.spec.tsx

@@ -0,0 +1,104 @@
+import { classNames, States, stateClassNames } from "../misc";
+import { TableTh, KendoTableThProps } from "../table/table-th";
+import { Icon } from "../icon";
+
+const className = `k-header`;
+
+const states = [
+    States.hover,
+    States.focus,
+    States.active
+];
+
+export type KendoGridHeaderCellProps = KendoTableThProps & {
+    menu?: "filter" | "column";
+    sortable?: boolean;
+    sticky?: boolean;
+    resizable?: boolean;
+    columnTitle?: string;
+    scope?: string;
+    sortIcon?: string;
+    sortOrder?: number;
+};
+
+const defaultProps = {
+    sortIcon: "sort-asc-small"
+};
+
+export type KendoGridHeaderCellState = { [K in (typeof states)[number]]?: boolean };
+
+export const GridHeaderCell = (
+    props: KendoGridHeaderCellProps &
+        KendoGridHeaderCellState &
+        React.HTMLAttributes<HTMLTableCellElement>
+) => {
+    const {
+        menu,
+        sortable,
+        sticky,
+        resizable,
+        columnTitle,
+        hover,
+        focus,
+        active,
+        sortIcon = defaultProps.sortIcon,
+        sortOrder,
+        ...others
+    } = props;
+
+    return (
+        <TableTh
+            {...others}
+            className={classNames(
+                props.className,
+                className,
+                {
+                    [`k-filterable`]: menu === "filter",
+                    [`k-sorted`]: sortable,
+                    [`k-grid-header-sticky`]: sticky,
+                    [`k-touch-action-none`]: resizable
+                },
+                stateClassNames(className, {
+                    hover,
+                    focus,
+                    active
+                })
+            )}
+        >
+            {
+                columnTitle && (
+                    <span className="k-cell-inner">
+                        <span className="k-link">
+                            <span className="k-column-title">{columnTitle}</span>
+                            {sortable && (
+                                <span className="k-sort-icon">
+                                    <Icon icon={sortIcon} />
+                                </span>
+                            )}
+                            {sortOrder && (
+                                <span className="k-sort-order">{sortOrder}</span>
+                            )}
+                        </span>
+                        {menu && (
+                            <a href="#" className={classNames(
+                                'k-grid-header-menu',
+                                {
+                                    [`k-active`]: active,
+                                    [`k-grid-filter-menu`]: menu === "filter",
+                                    [`k-grid-column-menu`]: menu === "column"
+                                }
+                            )}>
+                                <Icon icon={ menu === "filter" ? "filter" : "more-vertical" } />
+                            </a>
+                        )}
+                    </span>
+                )
+
+            }
+            {props.children}
+            {resizable && ( <span className="k-column-resizer k-touch-action-none"></span> )}
+        </TableTh>
+    );
+};
+
+export default GridHeaderCell;

package/src/grid/grid-header-table.spec.tsx

@@ -0,0 +1,20 @@
+import { classNames } from '../misc';
+import { Table, KendoTableOptions } from '../table';
+
+export const GRIDHEADERTABLE_CLASSNAME = `k-grid-header-table`;
+
+export const GridHeaderTable = (
+    props: KendoTableOptions &
+        React.HTMLAttributes<HTMLTableElement>
+) => (
+    <Table
+        size="medium"
+        {...props}
+        className={classNames(
+            props.className,
+            GRIDHEADERTABLE_CLASSNAME,
+        )}
+    >
+        {props.children}
+    </Table>
+);

package/src/grid/grid-header.spec.tsx

@@ -0,0 +1,19 @@
+import { classNames } from '../misc';
+
+const className = `k-grid-header`;
+
+export const GridHeader = (
+    props: React.HTMLAttributes<HTMLDivElement>
+) => (
+    <div
+        {...props}
+        className={classNames(
+            props.className,
+            className,
+        )}
+    >
+
+        {props.children}
+
+    </div>
+);

package/src/grid/grid-pager.spec.tsx

@@ -0,0 +1,19 @@
+import { classNames } from '../misc';
+import { Pager, KendoPagerProps } from '../pager';
+
+const className = `k-grid-pager`;
+
+export const GridPager = (
+    props: KendoPagerProps &
+        React.HTMLAttributes<HTMLDivElement>
+) => (
+    <Pager
+        {...props}
+        className={classNames(
+            props.className,
+            className,
+        )}
+    >
+        {props.children}
+    </Pager>
+);

package/src/grid/grid-table.spec.tsx

@@ -0,0 +1,20 @@
+import { classNames } from '../misc';
+import { Table, KendoTableOptions } from '../table';
+
+export const GRIDTABLE_CLASSNAME = `k-grid-table`;
+
+export const GridTable = (
+    props: KendoTableOptions &
+        React.HTMLAttributes<HTMLTableElement>
+) => (
+    <Table
+        size="medium"
+        {...props}
+        className={classNames(
+            props.className,
+            GRIDTABLE_CLASSNAME,
+        )}
+    >
+        {props.children}
+    </Table>
+);

package/src/grid/grid-toolbar.spec.tsx

@@ -0,0 +1,19 @@
+import { classNames } from '../misc';
+import { Toolbar, KendoToolbarProps } from '../toolbar';
+
+const className = `k-grid-toolbar`;
+
+export const GridToolbar = (
+    props: KendoToolbarProps &
+        React.HTMLAttributes<HTMLDivElement>
+) => (
+    <Toolbar
+        {...props}
+        className={classNames(
+            props.className,
+            className,
+        )}
+    >
+        {props.children}
+    </Toolbar>
+);