@progress/kendo-themes-html 6.2.1-dev.154 → 6.2.1-dev.170

package/dist/window/window.spec.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/utils/class-names.ts", "../../src/utils/component-class-names.ts", "../../src/utils/theme.ts", "../../src/action-buttons/action-buttons.spec.tsx", "../../src/icon/icon.spec.tsx", "../../src/button/button.spec.tsx", "../../src/window/window.spec.tsx"],
-  "sourcesContent": ["/* eslint-disable arrow-body-style */\nexport const classNames = (...args: any[]): string => {\n    return args\n        .filter((arg) => arg !== true && Boolean(arg))\n        .map((arg: any) => {\n            // eslint-disable-next-line no-nested-ternary\n            return Array.isArray(arg)\n                ? classNames(...arg)\n                : typeof arg === 'object'\n                    ? Object.keys(arg)\n                        .map((key, idx) => arg[idx] || (arg[key] && key) || null)\n                        .filter((el) => el !== null)\n                        .join(' ')\n                    : arg;\n        })\n        .filter((arg) => Boolean(arg))\n        .join(' ');\n};\n", "/* eslint-disable arrow-body-style */\nimport { classNames } from './class-names';\n\nexport const optionClassNames = (componentClassName: string, props: any) => {\n    return classNames(\n        {\n            [`${componentClassName}-xs`]: props.size === \"xsmall\",\n            [`${componentClassName}-sm`]: props.size === \"small\",\n            [`${componentClassName}-md`]: props.size === \"medium\",\n            [`${componentClassName}-lg`]: props.size === \"large\",\n            [`${componentClassName}-xl`]: props.size === \"xlarge\",\n            [`${componentClassName}-xxl`]: props.size === \"xxlarge\",\n            [`${componentClassName}-xxxl`]: props.size === \"xxxlarge\"\n        },\n        {\n            [`${componentClassName}-${props.fillMode}`]: props.fillMode,\n        },\n        {\n            [`${componentClassName}-${props.fillMode}-${props.themeColor}`]:\n            props.fillMode && props.themeColor,\n        },\n        {\n            [`${componentClassName}-${props.themeColor}`]:\n            props.themeColor && props.fillMode === undefined,\n        },\n        {\n            'k-rounded-sm': props.rounded === \"small\",\n            'k-rounded-md': props.rounded === \"medium\",\n            'k-rounded-lg': props.rounded === \"large\",\n            'k-rounded-full': props.rounded === \"full\",\n        }\n    );\n};\n\nexport const stateClassNames = (_componentClassName: string | undefined, props: any) => {\n    return classNames({\n        'k-valid': props.valid,\n        'k-invalid': props.invalid,\n        'k-hover': props.hover,\n        'k-focus': props.focus,\n        'k-checked': props.checked,\n        'k-active': props.active,\n        'k-selected': props.selected,\n        'k-disabled': props.disabled,\n        'k-indeterminate': props.indeterminate && !props.checked,\n        'k-loading': props.loading,\n        'k-empty': props.empty,\n        'k-readonly': props.readonly,\n    });\n};\n", "export const Size = {\n    'xsmall': 'xsmall',\n    'small': 'small',\n    'medium': 'medium',\n    'large': 'large',\n    'xlarge': 'xlarge',\n    'xxlarge': 'xxlarge',\n    'xxxlarge': 'xxxlarge',\n} as const;\n\nexport const Roundness = {\n    'small': 'small',\n    'medium': 'medium',\n    'large': 'large',\n    'full': 'full',\n} as const;\n\nexport const FillMode = {\n    'solid': 'solid',\n    'flat': 'flat',\n    'outline': 'outline',\n    'clear': 'clear',\n    'link': 'link',\n} as const;\n\nexport const ThemeColor = {\n    'inherit': 'inherit',\n    'base': 'base',\n    'primary': 'primary',\n    'secondary': 'secondary',\n    'tertiary': 'tertiary',\n    'info': 'info',\n    'success': 'success',\n    'warning': 'warning',\n    'error': 'error',\n    'dark': 'dark',\n    'light': 'light',\n    'inverse': 'inverse',\n} as const;\n\nexport const States = {\n    'open': 'open',\n    'hover': 'hover',\n    'focus': 'focus',\n    'active': 'active',\n    'selected': 'selected',\n    'disabled': 'disabled',\n    'valid': 'valid',\n    'invalid': 'invalid',\n    'loading': 'loading',\n    'required': 'required',\n    'empty': 'empty',\n    'indeterminate': 'indeterminate',\n    'checked': 'checked',\n    'readonly': 'readonly',\n} as const;\n\nexport const kendoThemeMaps = {\n    calloutMap: {\n        top: 'n',\n        bottom: 's',\n        left: 'w',\n        right: 'e'\n    },\n    orientationMap: {\n        vertical: 'vstack',\n        horizontal: 'hstack',\n    },\n} as const;\n", "import { classNames } from '../utils';\n\nexport const ACTIONBUTTONS_CLASSNAME = `k-actions`;\n\nconst states = [];\n\nconst options = {};\n\nexport type KendoActionButtonsProps = {\n    alignment?: 'start' | 'center' | 'end' | 'stretched';\n    orientation?: 'horizontal' | 'vertical';\n};\n\nconst defaultProps = {\n    alignment: 'start',\n    orientation: 'horizontal'\n};\n\nexport const ActionButtons = (\n    props: KendoActionButtonsProps &\n        React.HTMLAttributes<HTMLDivElement>\n) => {\n    const {\n        alignment = defaultProps.alignment,\n        orientation = defaultProps.orientation,\n        ...other\n    } = props;\n\n    return (\n        <div\n            {...other}\n            className={classNames(\n                ACTIONBUTTONS_CLASSNAME,\n                {\n                    [`${ACTIONBUTTONS_CLASSNAME}-${alignment}`]: alignment,\n                    [`${ACTIONBUTTONS_CLASSNAME}-${orientation}`]: orientation\n                },\n                props.className\n            )}>\n            {props.children}\n        </div>\n    );\n};\n\nActionButtons.states = states;\nActionButtons.options = options;\nActionButtons.className = ACTIONBUTTONS_CLASSNAME;\nActionButtons.defaultProps = defaultProps;\n\nexport default ActionButtons;\n", "import { classNames, optionClassNames, Size, ThemeColor } from '../utils';\n\nexport const ICON_CLASSNAME = `k-icon`;\n\nconst states = [];\n\nconst options = {\n    size: [ Size.xsmall, Size.small, Size.medium, Size.large, Size.xlarge, Size.xxlarge, Size.xxxlarge ],\n    themeColor: [\n        ThemeColor.base,\n        ThemeColor.primary,\n        ThemeColor.secondary,\n        ThemeColor.tertiary,\n        ThemeColor.success,\n        ThemeColor.warning,\n        ThemeColor.error,\n        ThemeColor.info,\n        ThemeColor.light,\n        ThemeColor.dark,\n    ],\n};\n\nconst defaultProps = {};\n\nexport type IconState = { [K in (typeof states)[number]]?: boolean };\n\nexport type IconOptions = {\n    size?: (typeof options.size)[number];\n    themeColor?: (typeof options.themeColor)[number];\n};\n\nexport type IconProps = IconOptions & {\n    name?: string;\n    rotate?: null | '0' | '45' | '90' | '135' | '180' | '225' | '270' | '315';\n    flip?: null | 'v' | 'h';\n}\n\nexport const Icon = (\n    props: IconProps & React.HTMLAttributes<HTMLSpanElement>\n) => {\n    const {\n        size,\n        themeColor,\n        name,\n        rotate,\n        flip,\n        ...other\n    } = props;\n\n    if (!name) {\n        return <></>;\n    }\n\n    return (\n        <span\n            {...other}\n            className={classNames(\n                props.className,\n                ICON_CLASSNAME,\n                optionClassNames(ICON_CLASSNAME, {\n                    size,\n                    themeColor,\n                }),\n                {\n                    [`k-i-${name}`]: name,\n                    [`k-rotate-${rotate}`]: rotate,\n                    [`k-flip-${flip}`]: flip,\n                }\n            )}\n        />\n    );\n};\n\nIcon.states = states;\nIcon.options = options;\nIcon.className = ICON_CLASSNAME;\nIcon.defaultProps = defaultProps;\n\nexport default Icon;\n", "import { Icon } from '../icon';\nimport { classNames, optionClassNames, stateClassNames, States, Size, Roundness, FillMode, ThemeColor } from '../utils';\n\nexport const BUTTON_CLASSNAME = `k-button`;\n\nconst states = [\n    States.hover,\n    States.focus,\n    States.active,\n    States.selected,\n    States.disabled\n];\n\nconst options = {\n    size: [ Size.small, Size.medium, Size.large ],\n    rounded: [ Roundness.small, Roundness.medium, Roundness.large, Roundness.full ],\n    fillMode: [ FillMode.solid, FillMode.flat, FillMode.outline, FillMode.clear, FillMode.link ],\n    themeColor: [\n        ThemeColor.base,\n        ThemeColor.primary,\n        ThemeColor.secondary,\n        ThemeColor.tertiary,\n        ThemeColor.success,\n        ThemeColor.warning,\n        ThemeColor.error,\n        ThemeColor.info,\n        ThemeColor.light,\n        ThemeColor.dark,\n        ThemeColor.inverse\n    ],\n};\n\nexport type KendoButtonOptions = {\n  size?: (typeof options.size)[number] | null;\n  rounded?: (typeof options.rounded)[number] | null;\n  fillMode?: (typeof options.fillMode)[number] | null;\n  themeColor?: (typeof options.themeColor)[number] | null;\n};\n\nexport type KendoButtonProps = KendoButtonOptions & {\n  icon?: string;\n  text?: string;\n  iconClassName?: string;\n  showArrow?: boolean;\n  arrowIconName?: string;\n};\n\nexport type KendoButtonState = { [K in (typeof states)[number]]?: boolean };\n\nconst defaultProps = {\n    size: Size.medium,\n    rounded: Roundness.medium,\n    fillMode: FillMode.solid,\n    themeColor: ThemeColor.base,\n    showArrow: false,\n    arrowIconName: \"arrow-s\"\n};\n\nexport const Button = (\n    props: KendoButtonProps &\n        KendoButtonState &\n        React.HTMLAttributes<HTMLButtonElement>\n) => {\n    const {\n        size = defaultProps.size,\n        rounded = defaultProps.rounded,\n        fillMode = defaultProps.fillMode,\n        themeColor = defaultProps.themeColor,\n        hover,\n        focus,\n        active,\n        selected,\n        disabled,\n        icon,\n        text,\n        iconClassName,\n        showArrow = defaultProps.showArrow,\n        arrowIconName = defaultProps.arrowIconName,\n        ...other\n    } = props;\n\n    const hasIcon = (icon !== undefined);\n    const hasChildren = props.children !== undefined;\n\n    return (\n        <button\n            {...other}\n            className={classNames(\n                props.className,\n                BUTTON_CLASSNAME,\n                optionClassNames(BUTTON_CLASSNAME, {\n                    size,\n                    rounded,\n                    fillMode,\n                    themeColor,\n                }),\n                stateClassNames(BUTTON_CLASSNAME, {\n                    hover,\n                    focus,\n                    active,\n                    disabled,\n                    selected,\n                }),\n                {\n                    ['k-icon-button']: !text && !hasChildren && hasIcon,\n                }\n            )}\n        >\n            {icon && (\n                <Icon\n                    className={classNames(iconClassName, 'k-button-icon')}\n                    name= {icon}\n                />\n            )}\n\n            {text\n                ?\n                <>\n                    {text && <span className=\"k-button-text\">{text}</span>}\n                    {props.children}\n                </>\n                : props.children && <span className=\"k-button-text\">{props.children}</span>\n            }\n\n            {showArrow && (<span className=\"k-menu-button-arrow k-button-arrow\"><Icon name= {arrowIconName} /></span>)}\n\n        </button>\n    );\n};\n\nButton.states = states;\nButton.options = options;\nButton.className = BUTTON_CLASSNAME;\nButton.defaultProps = defaultProps;\n\nexport default Button;\n", "import { ActionButtons } from '../action-buttons';\nimport { Button } from '../button';\nimport { classNames, optionClassNames, ThemeColor } from '../utils';\n\nexport const WINDOW_CLASSNAME = `k-window`;\n\nconst states = [];\n\nconst options = {\n    themeColor: [\n        ThemeColor.primary,\n        ThemeColor.light,\n        ThemeColor.dark,\n    ],\n};\n\nconst defaultProps = {};\n\nexport type KendoWindowOptions = {\n  themeColor?: (typeof options.themeColor)[number] | null;\n};\n\nexport type KendoWindowProps = KendoWindowOptions & {\n    title?: string;\n    actions?: string[];\n    minimized?: boolean;\n    actionButtons?: boolean;\n    actionButtonsAlign?: \"start\" | \"end\" | \"center\" | \"stretched\"\n};\n\nexport const Window = (\n    props: KendoWindowProps &\n        React.HTMLAttributes<HTMLDivElement>\n) => {\n    const {\n        title,\n        actions,\n        minimized,\n        themeColor,\n        actionButtons,\n        actionButtonsAlign,\n        ...other\n    } = props;\n\n    return (\n        <div\n            {...other}\n            className={classNames(\n                props.className,\n                WINDOW_CLASSNAME,\n                optionClassNames(WINDOW_CLASSNAME, { themeColor }),\n                {\n                    [`${WINDOW_CLASSNAME}-minimized`]: minimized,\n                }\n            )}>\n\n            {(title !== undefined || actions) &&\n                <div className=\"k-window-titlebar\">\n                    {title !== undefined && <span className=\"k-window-title\">{title}</span>}\n                    {actions && <>\n                        <div className=\"k-window-titlebar-actions\">\n                            {actions.map(actionName =>\n                                <Button key={actionName} icon={actionName} fillMode=\"flat\" className=\"k-window-titlebar-action\"></Button>\n                            )}\n                        </div>\n                    </>}\n                </div>\n            }\n            <div className={classNames(\n                \"k-window-content\",\n                {\n                    \"k-hidden\": minimized\n                }\n            )}>\n                {props.children}\n            </div>\n            {actionButtons &&\n                <ActionButtons alignment={actionButtonsAlign} className=\"k-window-actions\">\n                    <Button>Cancel</Button>\n                    <Button themeColor=\"primary\">Update</Button>\n                </ActionButtons>\n            }\n        </div>\n    );\n};\n\nWindow.states = states;\nWindow.options = options;\nWindow.className = WINDOW_CLASSNAME;\nWindow.defaultProps = defaultProps;\n\nexport default Window;\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable arrow-body-style */\nexport const classNames = (...args: any[]): string => {\n    return args\n        .filter((arg) => arg !== true && Boolean(arg))\n        .map((arg: any) => {\n            // eslint-disable-next-line no-nested-ternary\n            return Array.isArray(arg)\n                ? classNames(...arg)\n                : typeof arg === 'object'\n                    ? Object.keys(arg)\n                        .map((key, idx) => arg[idx] || (arg[key] && key) || null)\n                        .filter((el) => el !== null)\n                        .join(' ')\n                    : arg;\n        })\n        .filter((arg) => Boolean(arg))\n        .join(' ');\n};\n", "/* eslint-disable arrow-body-style */\nimport { classNames } from './class-names';\n\nexport const optionClassNames = (componentClassName: string, props: any) => {\n    return classNames(\n        {\n            [`${componentClassName}-xs`]: props.size === \"xsmall\",\n            [`${componentClassName}-sm`]: props.size === \"small\",\n            [`${componentClassName}-md`]: props.size === \"medium\",\n            [`${componentClassName}-lg`]: props.size === \"large\",\n            [`${componentClassName}-xl`]: props.size === \"xlarge\",\n            [`${componentClassName}-xxl`]: props.size === \"xxlarge\",\n            [`${componentClassName}-xxxl`]: props.size === \"xxxlarge\"\n        },\n        {\n            [`${componentClassName}-${props.fillMode}`]: props.fillMode,\n        },\n        {\n            [`${componentClassName}-${props.fillMode}-${props.themeColor}`]:\n            props.fillMode && props.themeColor,\n        },\n        {\n            [`${componentClassName}-${props.themeColor}`]:\n            props.themeColor && props.fillMode === undefined,\n        },\n        {\n            'k-rounded-sm': props.rounded === \"small\",\n            'k-rounded-md': props.rounded === \"medium\",\n            'k-rounded-lg': props.rounded === \"large\",\n            'k-rounded-full': props.rounded === \"full\",\n        }\n    );\n};\n\nexport const stateClassNames = (_componentClassName: string | undefined, props: any) => {\n    return classNames({\n        'k-valid': props.valid,\n        'k-invalid': props.invalid,\n        'k-hover': props.hover,\n        'k-focus': props.focus,\n        'k-checked': props.checked,\n        'k-active': props.active,\n        'k-selected': props.selected,\n        'k-disabled': props.disabled,\n        'k-indeterminate': props.indeterminate && !props.checked,\n        'k-loading': props.loading,\n        'k-empty': props.empty,\n        'k-readonly': props.readonly,\n    });\n};\n", "export const Size = {\n    'xsmall': 'xsmall',\n    'small': 'small',\n    'medium': 'medium',\n    'large': 'large',\n    'xlarge': 'xlarge',\n    'xxlarge': 'xxlarge',\n    'xxxlarge': 'xxxlarge',\n} as const;\n\nexport const Roundness = {\n    'small': 'small',\n    'medium': 'medium',\n    'large': 'large',\n    'full': 'full',\n} as const;\n\nexport const FillMode = {\n    'solid': 'solid',\n    'flat': 'flat',\n    'outline': 'outline',\n    'clear': 'clear',\n    'link': 'link',\n} as const;\n\nexport const ThemeColor = {\n    'inherit': 'inherit',\n    'base': 'base',\n    'primary': 'primary',\n    'secondary': 'secondary',\n    'tertiary': 'tertiary',\n    'info': 'info',\n    'success': 'success',\n    'warning': 'warning',\n    'error': 'error',\n    'dark': 'dark',\n    'light': 'light',\n    'inverse': 'inverse',\n} as const;\n\nexport const States = {\n    'open': 'open',\n    'hover': 'hover',\n    'focus': 'focus',\n    'active': 'active',\n    'selected': 'selected',\n    'disabled': 'disabled',\n    'valid': 'valid',\n    'invalid': 'invalid',\n    'loading': 'loading',\n    'required': 'required',\n    'empty': 'empty',\n    'indeterminate': 'indeterminate',\n    'checked': 'checked',\n    'readonly': 'readonly',\n} as const;\n\nexport const kendoThemeMaps = {\n    calloutMap: {\n        top: 'n',\n        bottom: 's',\n        left: 'w',\n        right: 'e'\n    },\n    orientationMap: {\n        vertical: 'vstack',\n        horizontal: 'hstack',\n    },\n} as const;\n", "import { classNames } from '../utils';\n\nexport const ACTIONBUTTONS_CLASSNAME = `k-actions`;\n\nconst states = [];\n\nconst options = {};\n\nexport type KendoActionButtonsProps = {\n    alignment?: 'start' | 'center' | 'end' | 'stretched';\n    orientation?: 'horizontal' | 'vertical';\n};\n\nconst defaultProps = {\n    alignment: 'start',\n    orientation: 'horizontal'\n};\n\nexport const ActionButtons = (\n    props: KendoActionButtonsProps &\n        React.HTMLAttributes<HTMLDivElement>\n) => {\n    const {\n        alignment = defaultProps.alignment,\n        orientation = defaultProps.orientation,\n        ...other\n    } = props;\n\n    return (\n        <div\n            {...other}\n            className={classNames(\n                ACTIONBUTTONS_CLASSNAME,\n                {\n                    [`${ACTIONBUTTONS_CLASSNAME}-${alignment}`]: alignment,\n                    [`${ACTIONBUTTONS_CLASSNAME}-${orientation}`]: orientation\n                },\n                props.className\n            )}>\n            {props.children}\n        </div>\n    );\n};\n\nActionButtons.states = states;\nActionButtons.options = options;\nActionButtons.className = ACTIONBUTTONS_CLASSNAME;\nActionButtons.defaultProps = defaultProps;\n\nexport default ActionButtons;\n", "import { classNames, optionClassNames, Size, ThemeColor } from '../utils';\n\nexport const ICON_CLASSNAME = `k-icon`;\n\nconst states = [];\n\nconst options = {\n    size: [ Size.xsmall, Size.small, Size.medium, Size.large, Size.xlarge, Size.xxlarge, Size.xxxlarge ],\n    themeColor: [\n        ThemeColor.base,\n        ThemeColor.primary,\n        ThemeColor.secondary,\n        ThemeColor.tertiary,\n        ThemeColor.success,\n        ThemeColor.warning,\n        ThemeColor.error,\n        ThemeColor.info,\n        ThemeColor.light,\n        ThemeColor.dark,\n    ],\n};\n\nconst defaultProps = {};\n\nexport type IconState = { [K in (typeof states)[number]]?: boolean };\n\nexport type IconOptions = {\n    size?: (typeof options.size)[number];\n    themeColor?: (typeof options.themeColor)[number];\n};\n\nexport type IconProps = IconOptions & {\n    name?: string;\n    rotate?: null | '0' | '45' | '90' | '135' | '180' | '225' | '270' | '315';\n    flip?: null | 'v' | 'h';\n}\n\nexport const Icon = (\n    props: IconProps & React.HTMLAttributes<HTMLSpanElement>\n) => {\n    const {\n        size,\n        themeColor,\n        name,\n        rotate,\n        flip,\n        ...other\n    } = props;\n\n    if (!name) {\n        return <></>;\n    }\n\n    return (\n        <span\n            {...other}\n            className={classNames(\n                props.className,\n                ICON_CLASSNAME,\n                optionClassNames(ICON_CLASSNAME, {\n                    size,\n                    themeColor,\n                }),\n                {\n                    [`k-i-${name}`]: name,\n                    [`k-rotate-${rotate}`]: rotate,\n                    [`k-flip-${flip}`]: flip,\n                }\n            )}\n        />\n    );\n};\n\nIcon.states = states;\nIcon.options = options;\nIcon.className = ICON_CLASSNAME;\nIcon.defaultProps = defaultProps;\n\nexport default Icon;\n", "import { Icon } from '../icon';\nimport { classNames, optionClassNames, stateClassNames, States, Size, Roundness, FillMode, ThemeColor } from '../utils';\n\nexport const BUTTON_CLASSNAME = `k-button`;\n\nconst states = [\n    States.hover,\n    States.focus,\n    States.active,\n    States.selected,\n    States.disabled\n];\n\nconst options = {\n    size: [ Size.small, Size.medium, Size.large ],\n    rounded: [ Roundness.small, Roundness.medium, Roundness.large, Roundness.full ],\n    fillMode: [ FillMode.solid, FillMode.flat, FillMode.outline, FillMode.clear, FillMode.link ],\n    themeColor: [\n        ThemeColor.base,\n        ThemeColor.primary,\n        ThemeColor.secondary,\n        ThemeColor.tertiary,\n        ThemeColor.success,\n        ThemeColor.warning,\n        ThemeColor.error,\n        ThemeColor.info,\n        ThemeColor.light,\n        ThemeColor.dark,\n        ThemeColor.inverse\n    ],\n};\n\nexport type KendoButtonOptions = {\n  size?: (typeof options.size)[number] | null;\n  rounded?: (typeof options.rounded)[number] | null;\n  fillMode?: (typeof options.fillMode)[number] | null;\n  themeColor?: (typeof options.themeColor)[number] | null;\n};\n\nexport type KendoButtonProps = KendoButtonOptions & {\n  icon?: string;\n  text?: string;\n  iconClassName?: string;\n  showArrow?: boolean;\n  arrowIconName?: string;\n};\n\nexport type KendoButtonState = { [K in (typeof states)[number]]?: boolean };\n\nconst defaultProps = {\n    size: Size.medium,\n    rounded: Roundness.medium,\n    fillMode: FillMode.solid,\n    themeColor: ThemeColor.base,\n    showArrow: false,\n    arrowIconName: \"arrow-s\"\n};\n\nexport const Button = (\n    props: KendoButtonProps &\n        KendoButtonState &\n        React.HTMLAttributes<HTMLButtonElement>\n) => {\n    const {\n        size = defaultProps.size,\n        rounded = defaultProps.rounded,\n        fillMode = defaultProps.fillMode,\n        themeColor = defaultProps.themeColor,\n        hover,\n        focus,\n        active,\n        selected,\n        disabled,\n        icon,\n        text,\n        iconClassName,\n        showArrow = defaultProps.showArrow,\n        arrowIconName = defaultProps.arrowIconName,\n        ...other\n    } = props;\n\n    const hasIcon = (icon !== undefined);\n    const hasChildren = props.children !== undefined;\n\n    return (\n        <button\n            {...other}\n            className={classNames(\n                props.className,\n                BUTTON_CLASSNAME,\n                optionClassNames(BUTTON_CLASSNAME, {\n                    size,\n                    rounded,\n                    fillMode,\n                    themeColor,\n                }),\n                stateClassNames(BUTTON_CLASSNAME, {\n                    hover,\n                    focus,\n                    active,\n                    disabled,\n                    selected,\n                }),\n                {\n                    ['k-icon-button']: !text && !hasChildren && hasIcon,\n                }\n            )}\n        >\n            {icon && (\n                <Icon\n                    className={classNames(iconClassName, 'k-button-icon')}\n                    name= {icon}\n                />\n            )}\n\n            {text\n                ?\n                <>\n                    {text && <span className=\"k-button-text\">{text}</span>}\n                    {props.children}\n                </>\n                : props.children && <span className=\"k-button-text\">{props.children}</span>\n            }\n\n            {showArrow && (<span className=\"k-menu-button-arrow k-button-arrow\"><Icon name= {arrowIconName} /></span>)}\n\n        </button>\n    );\n};\n\nButton.states = states;\nButton.options = options;\nButton.className = BUTTON_CLASSNAME;\nButton.defaultProps = defaultProps;\n\nexport default Button;\n", "import { ActionButtons } from '../action-buttons';\nimport { Button } from '../button';\nimport { classNames, optionClassNames, ThemeColor } from '../utils';\n\nexport const WINDOW_CLASSNAME = `k-window`;\n\nconst states = [];\n\nconst options = {\n    themeColor: [\n        ThemeColor.primary,\n        ThemeColor.light,\n        ThemeColor.dark,\n    ],\n};\n\nconst defaultProps = {};\n\nexport type KendoWindowOptions = {\n  themeColor?: (typeof options.themeColor)[number] | null;\n};\n\nexport type KendoWindowProps = KendoWindowOptions & {\n    title?: string;\n    actions?: string[];\n    minimized?: boolean;\n    actionButtons?: JSX.Element;\n    actionButtonsAlign?: \"start\" | \"end\" | \"center\" | \"stretched\"\n};\n\nexport const Window = (\n    props: KendoWindowProps &\n        React.HTMLAttributes<HTMLDivElement>\n) => {\n    const {\n        title,\n        actions,\n        minimized,\n        themeColor,\n        actionButtons,\n        actionButtonsAlign,\n        ...other\n    } = props;\n\n    return (\n        <div\n            {...other}\n            className={classNames(\n                props.className,\n                WINDOW_CLASSNAME,\n                optionClassNames(WINDOW_CLASSNAME, { themeColor }),\n                {\n                    [`${WINDOW_CLASSNAME}-minimized`]: minimized,\n                }\n            )}>\n\n            {(title !== undefined || actions) &&\n                <div className=\"k-window-titlebar\">\n                    {title !== undefined && <span className=\"k-window-title\">{title}</span>}\n                    {actions && <>\n                        <div className=\"k-window-titlebar-actions\">\n                            {actions.map(actionName =>\n                                <Button key={actionName} icon={actionName} fillMode=\"flat\" className=\"k-window-titlebar-action\"></Button>\n                            )}\n                        </div>\n                    </>}\n                </div>\n            }\n            <div className={classNames(\n                \"k-window-content\",\n                {\n                    \"k-hidden\": minimized\n                }\n            )}>\n                {props.children}\n            </div>\n            {actionButtons &&\n                <ActionButtons alignment={actionButtonsAlign} className=\"k-window-actions\">\n                    {actionButtons}\n                </ActionButtons>\n            }\n        </div>\n    );\n};\n\nWindow.states = states;\nWindow.options = options;\nWindow.className = WINDOW_CLASSNAME;\nWindow.defaultProps = defaultProps;\n\nexport default Window;\n"],
+  "mappings": "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",
   "names": ["import_jsx_runtime", "states", "options", "defaultProps", "import_jsx_runtime", "states", "options", "defaultProps", "import_jsx_runtime", "states", "options", "defaultProps"]
 }

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.2.1-dev.154+7780eb72a",
+  "version": "6.2.1-dev.170+8a13808d8",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -42,5 +42,5 @@
   "devDependencies": {
     "@types/react": "^18.0.2"
   },
-  "gitHead": "7780eb72a9b41b851c1f48e17422323fa2fca2ac"
+  "gitHead": "8a13808d819533aac7618d8548361f9c8d476de2"
 }

package/src/datetime-selector/datetime-selector.spec.tsx

@@ -68,8 +68,8 @@ export const DateTimeSelector = (
             </div>
 
             <ActionButtons className="k-datetime-footer" alignment="stretched">
-                <Button className="k-time-cancel">Cancel</Button>
                 <Button themeColor="primary" className="k-time-accept">Set</Button>
+                <Button className="k-time-cancel">Cancel</Button>
             </ActionButtons>
         </div>
     );

package/src/dialog/dialog.spec.tsx

@@ -23,7 +23,7 @@ export type KendoDialogOptions = {
 export type KendoDialogProps = KendoDialogOptions & {
     title?: string;
     actions?: string[];
-    actionButtons?: boolean;
+    actionButtons?: JSX.Element;
     actionButtonsAlign?: "start" | "end" | "center" | "stretched"
 };
 
@@ -67,8 +67,7 @@ export const Dialog = (
             </div>
             {actionButtons &&
                 <ActionButtons alignment={actionButtonsAlign} className="k-window-actions k-dialog-actions">
-                    <Button>Action</Button>
-                    <Button themeColor="primary">Primary</Button>
+                    {actionButtons}
                 </ActionButtons>
             }
         </div>

package/src/dialog/tests/dialog-action-buttons.tsx

@@ -1,4 +1,5 @@
 import ReactDOM from 'react-dom/client';
+import { Button } from '../../button';
 import { Dialog } from '../../dialog';
 
 const root = ReactDOM.createRoot(
@@ -17,19 +18,39 @@ root.render(
         <style>{styles}</style>
         <div id="test-area" className="k-d-grid k-grid-cols-2">
 
-            <Dialog title="Title" actions={[ 'close' ]} actionButtons actionButtonsAlign="start">
+            <Dialog title="Title" actions={[ 'close' ]} actionButtonsAlign="start" actionButtons={
+                <>
+                    <Button>Action</Button>
+                    <Button themeColor="primary">Primary</Button>
+                </>
+            }>
                 Action Buttons at start position
             </Dialog>
 
-            <Dialog title="Title" actions={[ 'close' ]} actionButtons actionButtonsAlign="center">
+            <Dialog title="Title" actions={[ 'close' ]} actionButtonsAlign="center" actionButtons={
+                <>
+                    <Button>Action</Button>
+                    <Button themeColor="primary">Primary</Button>
+                </>
+            }>
                 Action Buttons at center position
             </Dialog>
 
-            <Dialog title="Title" actions={[ 'close' ]} actionButtons actionButtonsAlign="end">
+            <Dialog title="Title" actions={[ 'close' ]} actionButtonsAlign="end" actionButtons={
+                <>
+                    <Button>Action</Button>
+                    <Button themeColor="primary">Primary</Button>
+                </>
+            }>
                 Action Buttons at end position
             </Dialog>
 
-            <Dialog title="Title" actions={[ 'close' ]} actionButtons actionButtonsAlign="stretched">
+            <Dialog title="Title" actions={[ 'close' ]} actionButtonsAlign="stretched" actionButtons={
+                <>
+                    <Button>Action</Button>
+                    <Button themeColor="primary">Primary</Button>
+                </>
+            }>
                 Action Buttons with stretched position
             </Dialog>
 

package/src/dialog/tests/dialog-modal.tsx

@@ -1,4 +1,5 @@
 import ReactDOM from 'react-dom/client';
+import { Button } from '../../button';
 import { Dialog } from '../../dialog';
 
 const root = ReactDOM.createRoot(
@@ -23,7 +24,12 @@ root.render(
         <div id="test-area" className="k-grid-cols-1">
             <div className="k-dialog-wrapper">
                 <div className="k-overlay"></div>
-                <Dialog title="Title" actions={[ 'close' ]} actionButtons actionButtonsAlign="end">
+                <Dialog title="Title" actions={[ 'close' ]} actionButtonsAlign="end" actionButtons={
+                    <>
+                        <Button>Action</Button>
+                        <Button themeColor="primary">Primary</Button>
+                    </>
+                }>
                     Dialog content template
                 </Dialog>
             </div>

package/src/dialog/tests/dialog-theme-colors.tsx

@@ -1,4 +1,5 @@
 import ReactDOM from 'react-dom/client';
+import { Button } from '../../button';
 import { Dialog } from '..';
 
 
@@ -17,19 +18,39 @@ root.render(
         <style>{styles}</style>
         <div id="test-area" className="k-d-grid k-grid-cols-3">
 
-            <Dialog title="Title" actions={[ 'close' ]} actionButtons actionButtonsAlign="end">
+            <Dialog title="Title" actions={[ 'close' ]} actionButtonsAlign="end" actionButtons={
+                <>
+                    <Button>Action</Button>
+                    <Button themeColor="primary">Primary</Button>
+                </>
+            }>
                 Dialog with default theme color
             </Dialog>
 
-            <Dialog themeColor="primary" title="Title" actions={[ 'close' ]} actionButtons actionButtonsAlign="end">
+            <Dialog themeColor="primary" title="Title" actions={[ 'close' ]} actionButtonsAlign="end" actionButtons={
+                <>
+                    <Button>Action</Button>
+                    <Button themeColor="primary">Primary</Button>
+                </>
+            }>
                 Dialog with primary theme color
             </Dialog>
 
-            <Dialog themeColor="dark" title="Title" actions={[ 'close' ]} actionButtons actionButtonsAlign="end">
+            <Dialog themeColor="dark" title="Title" actions={[ 'close' ]} actionButtonsAlign="end" actionButtons={
+                <>
+                    <Button>Action</Button>
+                    <Button themeColor="primary">Primary</Button>
+                </>
+            }>
                 Dialog with dark theme color
             </Dialog>
 
-            <Dialog themeColor="light" title="Title" actions={[ 'close' ]} actionButtons actionButtonsAlign="end">
+            <Dialog themeColor="light" title="Title" actions={[ 'close' ]} actionButtonsAlign="end" actionButtons={
+                <>
+                    <Button>Action</Button>
+                    <Button themeColor="primary">Primary</Button>
+                </>
+            }>
                 Dialog with light theme color
             </Dialog>
         </div>

package/src/dialog/tests/dialog.tsx

@@ -1,4 +1,5 @@
 import ReactDOM from 'react-dom/client';
+import { Button } from '../../button';
 import { Dialog } from '../../dialog';
 
 
@@ -19,17 +20,32 @@ root.render(
 
             <Dialog title="Title
                         g y p
-                        t d l" actions={[ 'close' ]} actionButtons actionButtonsAlign="end">
+                        t d l" actions={[ 'close' ]} actionButtonsAlign="end" actionButtons={
+                <>
+                    <Button>Action</Button>
+                    <Button themeColor="primary">Primary</Button>
+                </>
+            }>
                 Dialog content template
             </Dialog>
 
             <Dialog title="Cursive
                         g y p
-                        t d l" actionButtons actionButtonsAlign="end">
+                        t d l" actionButtonsAlign="end" actionButtons={
+                <>
+                    <Button>Action</Button>
+                    <Button themeColor="primary">Primary</Button>
+                </>
+            }>
                 Dialog without titlebar actions
             </Dialog>
 
-            <Dialog title="" actions={[ 'close' ]} actionButtons actionButtonsAlign="end">
+            <Dialog title="" actions={[ 'close' ]} actionButtonsAlign="end" actionButtons={
+                <>
+                    <Button>Action</Button>
+                    <Button themeColor="primary">Primary</Button>
+                </>
+            }>
                 Dialog with empty title and actions
             </Dialog>
 
@@ -37,11 +53,21 @@ root.render(
                 Dialog with empty title and no actions
             </Dialog>
 
-            <Dialog actionButtons actionButtonsAlign="end">
+            <Dialog actionButtonsAlign="end" actionButtons={
+                <>
+                    <Button>Action</Button>
+                    <Button themeColor="primary">Primary</Button>
+                </>
+            }>
                 Dialog without title
             </Dialog>
 
-            <Dialog title="Scrolling" actions={[ 'close' ]} actionButtons actionButtonsAlign="end" style={{ height: "170px" }}>
+            <Dialog title="Scrolling" actions={[ 'close' ]} actionButtonsAlign="end" style={{ height: "170px" }} actionButtons={
+                <>
+                    <Button>Action</Button>
+                    <Button themeColor="primary">Primary</Button>
+                </>
+            }>
                 <p>Dialog content template with long text and vertical scrolling.</p>
                 <p>Dialog content template with long text and vertical scrolling.</p>
                 <p>Dialog content template with long text and vertical scrolling.</p>

package/src/editor/tests/editor-image-editor.tsx

@@ -1,4 +1,5 @@
 import ReactDOM from 'react-dom/client';
+import { Button } from '../../button';
 import { Textbox } from '../../textbox';
 import { Window } from '../../window';
 import { Form, FormField } from '../../form';
@@ -23,8 +24,13 @@ root.render(
             <span></span>
 
             <section>
-                <Window title="Insert Image" actions={[ 'close' ]} actionButtons actionButtonsAlign="end">
-                    <Form tag="div" orientation="horizontal">
+                <Window title="Insert Image" actions={[ 'close' ]} actionButtonsAlign="start" actionButtons={
+                    <>
+                        <Button themeColor="primary">Insert</Button>
+                        <Button>Cancel</Button>
+                    </>
+                }>
+                    <Form tag="div" orientation="vertical">
                         <FormField label="Web address:" editor={ <Textbox showClearButton={false} /> } />
                         <FormField label="Alternate text:" editor={ <Textbox showClearButton={false} /> } />
                         <FormField label="Width:" editor={ <Textbox showClearButton={false} /> } />

package/src/editor/tests/editor-table-wizard-accessibility.tsx

@@ -5,6 +5,7 @@ import { NumericTextbox } from '../../numerictextbox';
 import { Textarea } from '../../textarea';
 import { Textbox } from '../../textbox';
 import { Form, FormField } from '../../form';
+import { Button } from '../../button';
 
 const root = ReactDOM.createRoot(
     document.getElementById('app') as HTMLElement
@@ -25,7 +26,12 @@ root.render(
         <style>{styles}</style>
         <div id="test-area" className="k-d-grid">
             <section>
-                <Window className="k-editor-window k-editor-table-wizard-window" title="Table Wizard" actions={[ 'close' ]} actionButtons actionButtonsAlign="end">
+                <Window className="k-editor-window k-editor-table-wizard-window" title="Table Wizard" actions={[ 'close' ]} actionButtonsAlign="start" actionButtons={
+                    <>
+                        <Button themeColor="primary">Update</Button>
+                        <Button>Cancel</Button>
+                    </>
+                }>
                     <div className="k-tabstrip k-tabstrip-top">
                         <div className="k-tabstrip-items-wrapper k-hstack">
                             <ul className="k-tabstrip-items k-reset">

package/src/editor/tests/editor-view-source.tsx

@@ -1,6 +1,7 @@
 import ReactDOM from 'react-dom/client';
 import { Window } from '../../window';
 import { Textarea } from '../../textarea';
+import { Button } from '../../button';
 
 const root = ReactDOM.createRoot(
     document.getElementById('app') as HTMLElement
@@ -23,7 +24,12 @@ root.render(
         <style>{styles}</style>
         <div id="test-area" className="k-d-grid k-grid-cols-1">
             <section>
-                <Window className="k-editor-window" title="View HTML" actions={[ 'close' ]} actionButtons actionButtonsAlign="end">
+                <Window className="k-editor-window" title="View HTML" actions={[ 'close' ]} actionButtonsAlign="start" actionButtons={
+                    <>
+                        <Button themeColor="primary">Update</Button>
+                        <Button>Cancel</Button>
+                    </>
+                }>
                     <Textarea className="k-editor-textarea"></Textarea>
                 </Window>
             </section>

package/src/filemanager/tests/filemanager-dialogs.tsx

@@ -1,4 +1,5 @@
 import ReactDOM from 'react-dom/client';
+import { Button } from '../../button';
 import { Dialog } from '../../dialog';
 import { Upload } from '../../upload';
 
@@ -20,7 +21,12 @@ root.render(
 
             {/* Upload Dialog */}
             <section>
-                <Dialog title="Upload Files" actions={[ 'close' ]} actionButtons actionButtonsAlign="end" className="k-filemanager-upload-dialog">
+                <Dialog title="Upload Files" actions={[ 'close' ]} actionButtonsAlign="start" className="k-filemanager-upload-dialog" actionButtons={
+                    <>
+                        <Button themeColor="primary">Upload</Button>
+                        <Button>Cancel</Button>
+                    </>
+                }>
                     <Upload async empty status="upload"></Upload>
                 </Dialog>
 
@@ -30,7 +36,12 @@ root.render(
             {/* Move/Copy Dialog */}
             <section>
 
-                <Dialog title="Confirm" actions={[ 'close' ]} actionButtons actionButtonsAlign="end">
+                <Dialog title="Confirm" actions={[ 'close' ]} actionButtonsAlign="start" actionButtons={
+                    <>
+                        <Button themeColor="primary">Confirm</Button>
+                        <Button>Cancel</Button>
+                    </>
+                }>
                     <p>Do you want to move or copy?</p>
                 </Dialog>
 
@@ -39,7 +50,12 @@ root.render(
             {/* Delete Dialog */}
             <section>
 
-                <Dialog title="Confirm" actions={[ 'close' ]} actionButtons actionButtonsAlign="end">
+                <Dialog title="Confirm" actions={[ 'close' ]} actionButtonsAlign="start" actionButtons={
+                    <>
+                        <Button themeColor="primary">Confirm</Button>
+                        <Button>Cancel</Button>
+                    </>
+                }>
                     <p>Are you sure you want to delete this file?</p>
                     <p>You can&apos;t undo this action.</p>
                 </Dialog>

package/src/gantt/tests/gantt-editing-popup-general.tsx

@@ -0,0 +1,97 @@
+import ReactDOM from 'react-dom/client';
+import { Button } from '../../button';
+import { Window } from '../../window';
+import { Textbox } from '../../textbox';
+import { DateTimePicker } from '../../datetimepicker';
+import { NumericTextbox } from '../../numerictextbox';
+import { DropdownList } from '../../dropdownlist';
+import { Form, FormField } from '../../form';
+
+const root = ReactDOM.createRoot(
+    document.getElementById('app') as HTMLElement
+);
+
+const styles = `
+    .k-window {
+        min-width: 580px;
+        position: relative;
+    }
+`;
+
+root.render(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid k-grid-cols-2">
+
+            <section>
+                <Window title="Edit task" actions={[ 'window-minimize', 'window-maximize', 'close' ]} actionButtons={
+                    <>
+                        <Button icon="save" themeColor="primary">Save</Button>
+                        <Button icon="cancel">Cancel</Button>
+                        <span className="k-spacer"></span>
+                        <Button icon="delete" fillMode="flat" themeColor="primary">Delete</Button>
+                    </>
+                }>
+                    <div className="k-tabstrip k-tabstrip-top">
+                        <div className="k-tabstrip-items-wrapper k-hstack">
+                            <ul className="k-reset k-tabstrip-items">
+                                <li className="k-item k-first k-active">
+                                    <span className="k-link">General</span>
+                                </li>
+                                <li className="k-item">
+                                    <span className="k-link">Resources</span>
+                                </li>
+                                <li className="k-item">
+                                    <span className="k-link">Predecessors</span>
+                                </li>
+                                <li className="k-item k-last">
+                                    <span className="k-link">Successors</span>
+                                </li>
+                            </ul>
+                        </div>
+                        <div className="k-tabstrip-content k-active">
+                            <Form layout="grid" cols={4} gapX={2}>
+                                <FormField
+                                    className="k-form-field-error k-col-span-full"
+                                    label="Title" error="Error"
+                                    editor={ <Textbox invalid value="Invalid" /> }
+                                />
+                                <FormField
+                                    className="k-col-span-2"
+                                    label="Planned Start Date"
+                                    editor={ <DateTimePicker placeholder="dd/MM/yyyy hh:mm AM" /> }
+                                />
+                                <FormField
+                                    className="k-col-span-2"
+                                    label="Planned End Date"
+                                    editor={ <DateTimePicker placeholder="dd/MM/yyyy hh:mm AM" /> }
+                                />
+                                <FormField
+                                    className="k-col-span-2"
+                                    label="Actual Start Date"
+                                    editor={ <DateTimePicker placeholder="dd/MM/yyyy hh:mm AM" /> }
+                                />
+                                <FormField
+                                    className="k-col-span-2"
+                                    label="Actual End Date"
+                                    editor={ <DateTimePicker placeholder="dd/MM/yyyy hh:mm AM" /> }
+                                />
+                                <FormField
+                                    className="k-col-span-1"
+                                    label="Complete"
+                                    editor={ <NumericTextbox /> }
+                                    hint="value from 0 to 1"
+                                />
+                                <FormField
+                                    className="k-col-span-full"
+                                    label="Parent"
+                                    editor={ <DropdownList placeholder="-None-"/> }
+                                />
+                            </Form>
+                        </div>
+                    </div>
+                </Window>
+            </section>
+        </div>
+    </>
+);