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

package/dist/types/scrollview/scrollview-spec.d.ts

@@ -0,0 +1,23 @@
+export type KendoScrollViewProps = {
+    mode?: "light" | "normal" | "dark";
+    views?: number;
+    animate?: boolean;
+    arrows?: boolean;
+    pager?: boolean;
+    rtl?: boolean;
+};
+export declare const ScrollView: {
+    (props: KendoScrollViewProps & React.HtmlHTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    states: any[];
+    options: {};
+    className: string;
+    defaultProps: {
+        mode: string;
+        views: number;
+        animate: boolean;
+        arrows: boolean;
+        pager: boolean;
+        rtl: boolean;
+    };
+};
+export default ScrollView;

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

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

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

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+export declare const SKELETON_CLASSNAME = "k-skeleton";
+export type KendoSkeletonProps = {
+    shape?: 'circle' | 'text' | 'rect';
+    animation?: false | 'wave' | 'pulse';
+    style?: React.CSSProperties;
+};
+export declare const Skeleton: {
+    (props: KendoSkeletonProps & React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+    states: any[];
+    options: {};
+    className: string;
+    defaultProps: {
+        shape: string;
+        animation: string;
+    };
+};
+export default Skeleton;

package/dist/types/split-button/index.d.ts

@@ -1 +1,5 @@
 export * from './split-button.spec';
+export * from './templates/icon-split-button';
+export * from './templates/icon-text-split-button';
+export * from './templates/text-split-button';
+export * from './templates/split-button-popup';

package/dist/types/split-button/split-button.spec.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const SPLITBUTTON_CLASSNAME = "k-split-button";
 declare const states: ("active" | "focus" | "disabled" | "selected" | "hover")[];
 declare const options: {
@@ -18,6 +19,8 @@ export type KendoSplitButtonProps = KendoSplitButtonOptions & {
     iconClassName?: string;
     showArrow?: boolean;
     arrowIconName?: string;
+    popup?: JSX.Element;
+    opened?: boolean;
 };
 export type KendoSplitButtonState = {
     [K in (typeof states)[number]]?: boolean;

package/dist/types/split-button/templates/icon-split-button.d.ts

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

package/dist/types/split-button/templates/icon-text-split-button.d.ts

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

package/dist/types/split-button/templates/split-button-popup.d.ts

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

package/dist/types/split-button/templates/text-split-button.d.ts

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

package/dist/types/split-button/tests/split-button-solid.d.ts

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

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

@@ -1 +1,3 @@
 export * from './switch.spec';
+export * from "./templates/switch-normal";
+export * from "./templates/switch-checked";

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

@@ -2,15 +2,17 @@ export declare const SWITCH_CLASSNAME = "k-switch";
 declare const states: ("focus" | "disabled" | "checked" | "hover")[];
 declare const options: {
     size: ("small" | "medium" | "large")[];
+    trackRounded: ("small" | "medium" | "full" | "large")[];
+    thumbRounded: ("small" | "medium" | "full" | "large")[];
 };
 export type KendoSwitchOptions = {
     size?: (typeof options.size)[number] | null;
+    trackRounded?: (typeof options.trackRounded)[number] | null;
+    thumbRounded?: (typeof options.thumbRounded)[number] | null;
 };
 export type KendoSwitchProps = KendoSwitchOptions & {
     onLabel?: string;
     offLabel?: string;
-    trackRounded?: null | "sm" | "md" | "lg" | "full";
-    thumbRounded?: null | "sm" | "md" | "lg" | "full";
 };
 export type KendoSwitchState = {
     [K in (typeof states)[number]]?: boolean;
@@ -20,12 +22,14 @@ export declare const Switch: {
     states: ("focus" | "disabled" | "checked" | "hover")[];
     options: {
         size: ("small" | "medium" | "large")[];
+        trackRounded: ("small" | "medium" | "full" | "large")[];
+        thumbRounded: ("small" | "medium" | "full" | "large")[];
     };
     className: string;
     defaultProps: {
         size: "medium";
-        trackRounded: string;
-        thumbRounded: string;
+        trackRounded: "full";
+        thumbRounded: "full";
     };
 };
 export default Switch;

package/dist/types/switch/templates/switch-checked.d.ts

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

package/dist/types/switch/templates/switch-normal.d.ts

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

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

@@ -17,3 +17,7 @@ export * from './table-group-header';
 export * from './table-group-sticky-header';
 export * from './table-group-row';
 export * from './table-list-group-row';
+export * from "./templates/table-list";
+export * from "./templates/table-list-virtualization";
+export * from "./templates/data-table-normal";
+export * from "./templates/table-native";

package/dist/types/table/templates/data-table-normal.d.ts

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

package/dist/types/table/templates/table-list-virtualization.d.ts

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

package/dist/types/table/templates/table-list.d.ts

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

package/dist/types/table/templates/table-native.d.ts

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

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

@@ -1 +1,2 @@
 export * from './textarea.spec';
+export * from "./templates/textarea-normal";

package/dist/types/textarea/templates/textarea-normal.d.ts

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

package/dist/types/textarea/tests/textarea-size-rounded.d.ts

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

package/dist/types/textarea/tests/textarea-solid.d.ts

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

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

@@ -1,5 +1,5 @@
 export declare const TEXTAREA_CLASSNAME = "k-textarea";
-declare const states: ("required" | "loading" | "focus" | "invalid" | "disabled" | "hover" | "valid")[];
+declare const states: ("required" | "focus" | "invalid" | "disabled" | "hover" | "valid")[];
 declare const options: {
     size: ("small" | "medium" | "large")[];
     rounded: ("small" | "medium" | "full" | "large")[];
@@ -20,7 +20,7 @@ export type KendoTextareaState = {
 };
 export declare const Textarea: {
     (props: KendoTextareaProps & KendoTextareaState & React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
-    states: ("required" | "loading" | "focus" | "invalid" | "disabled" | "hover" | "valid")[];
+    states: ("required" | "focus" | "invalid" | "disabled" | "hover" | "valid")[];
     options: {
         size: ("small" | "medium" | "large")[];
         rounded: ("small" | "medium" | "full" | "large")[];

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

@@ -0,0 +1,3 @@
+export * from './tilelayout.spec';
+export * from './tilelayout-item.spec';
+export * from './tilelayout-item-hint.spec';

package/dist/types/tilelayout/tilelayout-item-hint.spec.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export declare const TILELAYOUTITEMHINT_CLASSNAME = "k-layout-item-hint";
+export type KendoTileLayoutItemHintProps = {
+    style?: React.CSSProperties;
+};
+export declare const TileLayoutItemHint: {
+    (props: KendoTileLayoutItemHintProps & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    states: any[];
+    options: {};
+    className: string;
+    defaultProps: {};
+};
+export default TileLayoutItemHint;

package/dist/types/tilelayout/tilelayout-item.spec.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export declare const TILELAYOUTITEM_CLASSNAME = "k-tilelayout-item";
+export type KendoTileLayoutItemProps = {
+    header?: React.ReactNode | string;
+    body?: React.ReactNode;
+    focus?: boolean;
+    resize?: true | 'vertical' | 'horizontal';
+    style?: React.CSSProperties;
+};
+export declare const TileLayoutItem: {
+    (props: KendoTileLayoutItemProps & React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+    states: "focus"[];
+    options: {};
+    className: string;
+    defaultProps: {};
+};
+export default TileLayoutItem;

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

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+export declare const TILELAYOUT_CLASSNAME = "k-tilelayout";
+export type KendoTileLayoutProps = {
+    gap?: string;
+    columns?: number;
+    columnWidth?: string;
+    rowHeight?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+};
+export declare const TileLayout: {
+    (props: KendoTileLayoutProps & React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+    states: any[];
+    options: {};
+    className: string;
+    defaultProps: {};
+};
+export default TileLayout;

package/dist/types/time-selector/index.d.ts

@@ -2,3 +2,6 @@ export * from './time-selector.spec';
 export * from './time-selector-column';
 export * from './time-selector-header';
 export * from './time-selector-fast-selection';
+export * from './templates/time-selector-all';
+export * from './templates/time-selector-hour';
+export * from './templates/time-selector-minute';

package/dist/types/time-selector/templates/time-selector-all.d.ts

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

package/dist/types/time-selector/templates/time-selector-hour.d.ts

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

package/dist/types/time-selector/templates/time-selector-minute.d.ts

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

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

@@ -2,3 +2,7 @@ export * from './treeview.spec';
 export * from './treeview-item.spec';
 export * from './treeview-leaf';
 export * from './treeview-group';
+export * from "./templates/treeview-normal";
+export * from "./templates/treeview-hierarchy";
+export * from "./templates/treeview-icons";
+export * from "./templates/treeview-checkboxes";

package/dist/types/treeview/templates/treeview-checkboxes.d.ts

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

package/dist/types/treeview/templates/treeview-hierarchy.d.ts

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

package/dist/types/treeview/templates/treeview-icons.d.ts

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

package/dist/types/treeview/templates/treeview-normal.d.ts

@@ -0,0 +1 @@
+export declare const TreeviewNormal: (props: any) => 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": "6.7.0-dev.0",
+  "version": "6.7.0-dev.2",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -51,5 +51,5 @@
   "devDependencies": {
     "@types/react": "^18.0.2"
   },
-  "gitHead": "dca7760b1c668eca96ff626ff9ec6dc6bdf5a3d3"
+  "gitHead": "48b9852e24736586f7bb277b8db520075eadd6e4"
 }

package/src/captcha/captcha.spec.tsx

@@ -1,5 +1,6 @@
 import { Button } from '../button';
 import { Textbox } from '../textbox';
+import { Skeleton } from '../skeleton';
 import { classNames, stateClassNames, States } from '../misc';
 
 export const CAPTCHA_CLASSNAME = `k-captcha`;
@@ -54,10 +55,7 @@ export const Captcha = (
                         src="/packages/html/assets/captcha.jpg"
                     />
                     {loading && (
-                        <span
-                            style={{ width: '100%', height: '100%' }}
-                            className="k-skeleton k-skeleton-rect">
-                        </span>
+                        <Skeleton shape={'rect'} style={{ width: '100%', height: '100%' }} />
                     )}
                 </div>
                 <div className="k-captcha-image-controls k-vstack">

package/src/chat/chat-message-group.tsx

@@ -0,0 +1,63 @@
+import { classNames, stateClassNames, States } from '../misc';
+import { Avatar } from '../avatar';
+
+export const CHATMESSAGEGROUP_CLASSNAME = 'k-message-group';
+
+const states = [
+    States.selected
+];
+
+const options = {};
+
+const defaultProps = {
+    author: "Bruv",
+    avatar: "/packages/html/assets/avatar.jpg",
+    alt: false
+};
+
+export type KendoChatMessageGroupProps = {
+    alt?: boolean;
+    author?: string;
+    avatar?: null | string;
+};
+
+export type KendoChatMessageGroupState = { [K in (typeof states)[number]]?: boolean };
+
+export const ChatMessageGroup = (
+    props: KendoChatMessageGroupProps &
+        KendoChatMessageGroupState &
+        React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        alt = defaultProps.alt,
+        author = defaultProps.author,
+        avatar = defaultProps.avatar,
+        selected,
+        ...other
+    } = props;
+
+    return (
+        <div
+            {...other}
+            className={classNames(
+                CHATMESSAGEGROUP_CLASSNAME,
+                props.className,
+                stateClassNames( CHATMESSAGEGROUP_CLASSNAME, { selected } ),
+                {
+                    'k-alt': alt,
+                    'k-no-avatar': !avatar
+                }
+            )}>
+            { author && <p className="k-author">{author}</p> }
+            { avatar && <Avatar type="image"><img src={avatar} /></Avatar> }
+            {props.children}
+        </div>
+    );
+};
+
+ChatMessageGroup.states = states;
+ChatMessageGroup.options = options;
+ChatMessageGroup.className = CHATMESSAGEGROUP_CLASSNAME;
+ChatMessageGroup.defaultProps = defaultProps;
+
+export default ChatMessageGroup;

package/src/chat/chat-message.tsx

@@ -0,0 +1,58 @@
+import { classNames, stateClassNames, States } from '../misc';
+
+export const CHATMESSAGE_CLASSNAME = 'k-message';
+
+const states = [
+    States.selected
+];
+
+const options = {};
+
+const defaultProps = {
+    time: 'Thu Feb 08 2018',
+    text: 'How can I help you?',
+    status: 'Seen'
+};
+
+export type KendoChatMessageProps = {
+    time?: string,
+    text?: string,
+    status?: string
+};
+
+export type KendoChatMessageState = { [K in (typeof states)[number]]?: boolean };
+
+export const ChatMessage = (
+    props: KendoChatMessageProps &
+        KendoChatMessageState &
+        React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        time = defaultProps.time,
+        text = defaultProps.text,
+        status = defaultProps.status,
+        selected,
+        ...other
+    } = props;
+
+    return (
+        <div
+            {...other}
+            className={classNames(
+                CHATMESSAGE_CLASSNAME,
+                props.className,
+                stateClassNames(CHATMESSAGE_CLASSNAME, { selected })
+            )}>
+            <time className="k-message-time">{time}</time>
+            <div className="k-chat-bubble">{text}</div>
+            <span className="k-message-status">{status}</span>
+        </div>
+    );
+};
+
+ChatMessage.states = states;
+ChatMessage.options = options;
+ChatMessage.className = CHATMESSAGE_CLASSNAME;
+ChatMessage.defaultProps = defaultProps;
+
+export default ChatMessage;

package/src/chat/chat-quick-replies.tsx

@@ -0,0 +1,54 @@
+import { classNames } from '../misc';
+
+const CHATQUICKREPLY_CLASSNAME = 'k-quick-replies';
+
+const states = [];
+
+const options = {};
+
+const defaultOptions = {
+    actions: [ 'Quick', 'Reply', 'Another quick', 'Reply with different length' ]
+};
+
+
+export type KendoChatQuickRepliesOptions = {
+    actions?: Array<string>;
+};
+
+export const ChatQuickReply = (
+    props: KendoChatQuickRepliesOptions &
+        React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        actions = defaultOptions.actions,
+        ...other
+    } = props;
+
+    const children: JSX.Element[] = [];
+
+    if (actions) {
+        actions.map((action, index) => {
+            children.push(
+                <span className="k-quick-reply" key={index}>{action}</span>
+            );
+        });
+    }
+
+    return (
+        <div
+            {...other}
+            className={classNames(
+                CHATQUICKREPLY_CLASSNAME,
+                props.className
+            )}>
+            {children}
+        </div>
+    );
+};
+
+ChatQuickReply.states = states;
+ChatQuickReply.options = options;
+ChatQuickReply.className = CHATQUICKREPLY_CLASSNAME;
+ChatQuickReply.defaultOptions = defaultOptions;
+
+export default ChatQuickReply;

package/src/chat/chat.spec.tsx

@@ -0,0 +1,88 @@
+import { classNames } from '../misc';
+import { Button } from '../button';
+import { Toolbar } from '../toolbar';
+import { Textbox } from '../textbox';
+
+const CHAT_CLASSNAME = 'k-chat';
+
+const states = [];
+
+const options = {};
+
+const defaultOptions = {
+    showToolbar: true,
+    showMessageBox: true,
+    showMoreButton: true
+};
+
+export type KendoChatProps = {
+    dir?: "ltr" | "rtl",
+    showToolbar?: boolean,
+    showMessageBox?: boolean,
+    showMoreButton?: boolean,
+}
+
+export const Chat = (
+    props: KendoChatProps &
+        React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        dir,
+        showToolbar = defaultOptions.showToolbar,
+        showMessageBox = defaultOptions.showMessageBox,
+        showMoreButton = defaultOptions.showMoreButton,
+        ...other
+    } = props;
+
+    return (
+        <div
+            {...other}
+            className={classNames(
+                CHAT_CLASSNAME,
+                props.className
+            )} dir={dir}>
+            <div className="k-message-list k-avatars">
+                <div className="k-message-list-content">
+                    {props.children}
+                </div>
+            </div>
+            { showMessageBox &&
+                <Textbox
+                    className="k-message-box"
+                    placeholder="Type a message..."
+                    suffix={
+                        <>
+                            { showMoreButton && <Button fillMode="flat" icon="more-horizontal"></Button> }
+                            <Button fillMode="flat" icon="paper-plane" className="k-chat-send"></Button>
+                        </>
+                    }
+                />
+            }
+            { showToolbar &&
+                <Toolbar className="k-chat-toolbar">
+                    <Button className="k-scroll-button k-scroll-button-left k-hidden" fillMode="flat" rounded={null} size={null} icon="chevron-left"></Button>
+                    <div className="k-toolbar-group k-button-list">
+                        <Button fillMode="flat" icon="arrow-rotate-cw"></Button>
+                        <Button fillMode="flat" icon="gear"></Button>
+                        <Button fillMode="flat" icon="wrench"></Button>
+                        <Button fillMode="flat" icon="plus"></Button>
+                        <Button fillMode="flat" icon="search"></Button>
+                        <Button fillMode="flat" icon="star"></Button>
+                        <Button fillMode="flat" icon="bell"></Button>
+                        <Button fillMode="flat" icon="question-circle"></Button>
+                        <Button fillMode="flat" icon="trash"></Button>
+                    </div>
+                    <Button className="k-scroll-button k-scroll-button-right" fillMode="flat" rounded={null} size={null} icon="chevron-right"></Button>
+                </Toolbar>
+            }
+        </div>
+
+    );
+};
+
+Chat.states = states;
+Chat.options = options;
+Chat.className = CHAT_CLASSNAME;
+Chat.defaultOptions = defaultOptions;
+
+export default Chat;

package/src/chat/index.ts

@@ -0,0 +1,4 @@
+export * from './chat.spec';
+export * from './chat-message';
+export * from './chat-message-group';
+export * from './chat-quick-replies';