npm - @progress/kendo-themes-html - Versions diffs - 5.6.1-dev.5 → 5.7.0 - Mend

@progress/kendo-themes-html 5.6.1-dev.5 → 5.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (827) hide show

package/dist/dialog/tests/dialog.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/dialog/tests/dialog.tsx", "../../../src/action-buttons/action-buttons.tsx", "../../../src/utils/classNames.ts", "../../../src/utils/theme.ts", "../../../src/button/button.tsx", "../../../src/icon/icon.tsx"],
-  "sourcesContent": ["import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { ActionButtons } from '../../action-buttons';\nimport { Button } from '../../button';\n\nconst root = ReactDOM.createRoot(\n    document.getElementById('app') as HTMLElement\n);\n\nconst styles = `\n    .k-dialog {\n        position: relative;\n    }\n`;\n\nroot.render(\n    <>\n        <style>{styles}</style>\n        <div id=\"test-area\" className=\"k-d-grid k-grid-cols-3\">\n\n            <div className=\"k-widget k-window k-dialog\">\n                <div className=\"k-window-titlebar k-dialog-titlebar\">\n                    <span className=\"k-window-title k-dialog-title\">\n                        Title\n                        g y p\n                        t d l\n                    </span>\n                    <div className=\"k-window-actions k-dialog-actions\">\n                        <Button fillMode=\"flat\" icon=\"close\"></Button>\n                    </div>\n                </div>\n\n                <div className=\"k-window-content k-dialog-content\">\n                    Dialog content template\n                </div>\n\n                <ActionButtons className=\"k-dialog-buttongroup\" alignment=\"end\">\n                    <Button>Action</Button>\n                    <Button themeColor=\"primary\">Primary</Button>\n                </ActionButtons>\n            </div>\n\n            <div className=\"k-widget k-window k-dialog\">\n                <div className=\"k-window-titlebar k-dialog-titlebar\">\n                    <span className=\"k-window-title k-dialog-title\" style={{ fontFamily: \"cursive\" }}>\n                        Cursive\n                        g y p\n                        t d l\n                    </span>\n                </div>\n\n                <div className=\"k-window-content k-dialog-content\">\n                    Dialog without titlebar actions\n                </div>\n\n                <ActionButtons className=\"k-dialog-buttongroup\" alignment=\"end\">\n                    <Button>Action</Button>\n                    <Button themeColor=\"primary\">Primary</Button>\n                </ActionButtons>\n            </div>\n\n            <div className=\"k-widget k-window k-dialog\">\n                <div className=\"k-window-titlebar k-dialog-titlebar\">\n                    <span className=\"k-window-title k-dialog-title\"></span>\n                    <div className=\"k-window-actions k-dialog-actions\">\n                        <Button fillMode=\"flat\" icon=\"close\"></Button>\n                    </div>\n                </div>\n\n                <div className=\"k-window-content k-dialog-content\">\n                    Dialog with empty title and actions\n                </div>\n\n                <ActionButtons className=\"k-dialog-buttongroup\" alignment=\"end\">\n                    <Button>Action</Button>\n                    <Button themeColor=\"primary\">Primary</Button>\n                </ActionButtons>\n            </div>\n\n            <div className=\"k-widget k-window k-dialog\">\n                <div className=\"k-window-titlebar k-dialog-titlebar\">\n                    <span className=\"k-window-title k-dialog-title\"></span>\n                </div>\n\n                <div className=\"k-window-content k-dialog-content\">\n                    Dialog with empty title and no actions\n                </div>\n            </div>\n\n            <div className=\"k-widget k-window k-dialog\">\n                <div className=\"k-window-content k-dialog-content\">\n                    Dialog without title\n                </div>\n\n                <ActionButtons className=\"k-dialog-buttongroup\" alignment=\"end\">\n                    <Button>Action</Button>\n                    <Button themeColor=\"primary\">Primary</Button>\n                </ActionButtons>\n            </div>\n\n            <div className=\"k-widget k-window k-dialog\" style={{ height: \"170px\" }}>\n                <div className=\"k-window-titlebar k-dialog-titlebar\">\n                    <span className=\"k-window-title k-dialog-title\">Scrolling</span>\n                    <div className=\"k-window-actions k-dialog-actions\">\n                        <Button fillMode=\"flat\" icon=\"close\"></Button>\n                    </div>\n                </div>\n\n                <div className=\"k-window-content k-dialog-content k-scroll\">\n                    <p>Dialog content template with long text and vertical scrolling.</p>\n                    <p>Dialog content template with long text and vertical scrolling.</p>\n                    <p>Dialog content template with long text and vertical scrolling.</p>\n                </div>\n\n                <ActionButtons className=\"k-dialog-buttongroup\" alignment=\"end\">\n                    <Button>Action</Button>\n                    <Button themeColor=\"primary\">Primary</Button>\n                </ActionButtons>\n            </div>\n\n        </div>\n    </>\n);\n", "import * as React from 'react';\nimport { ButtonProps } from '../button';\nimport { classNames } from '../utils';\n\nexport interface ActionButtonsProps {\n    children?: React.ReactElement<ButtonProps>|React.ReactElement<ButtonProps>[];\n    className?: string;\n    alignment?: 'start' | 'center' | 'end' | 'stretched';\n    orientation?: 'horizontal' | 'vertical';\n}\n\nexport class ActionButtons extends React.Component<ActionButtonsProps> {\n\n    static defaultProps = {\n        alignment: 'start',\n        orientation: 'horizontal'\n    };\n\n    render() {\n        const {\n            children,\n            className,\n            alignment,\n            orientation,\n            ...htmlAttributes\n        } = this.props;\n\n        return (\n            <div\n                {...htmlAttributes}\n                className={classNames(\n                    'k-actions',\n                    {\n                        [`k-actions-${alignment}`]: alignment,\n                        [`k-actions-${orientation}`]: orientation\n                    },\n                    className\n                )}>\n                {children}\n            </div>\n        );\n    }\n}\n", "/* eslint-disable no-return-assign */\nexport const classNames = (...args): string => {\n    const result = {};\n\n    const addLeafKeys = (arg) => {\n        (typeof arg === 'object'\n            ? Object.keys(arg).forEach((key) => {\n                result[key] = arg[key];\n            })\n            : (result[arg] = true)\n        );\n    };\n\n    const addKeys = (list) =>\n        list\n            .filter((arg) => arg !== true && Boolean(arg))\n            .map((arg: any) =>\n                (Array.isArray(arg) ? addKeys(arg) : addLeafKeys(arg))\n            );\n\n    addKeys(args);\n\n    return Object.keys(result)\n        .map((key) => (result[key] && key) || null)\n        .filter((el) => el !== null)\n        .join(' ');\n};\n", "export interface KendoThemeMaps {\n    sizeMap: Record<Exclude<any, null>, string>;\n    roundedMap: Record<Exclude<any, null>, string>;\n    calloutMap: Record<Exclude<any, null>, string>;\n    orientationMap: Record<Exclude<any, null>, string>;\n}\n\nexport const kendoThemeMaps: KendoThemeMaps = {\n    sizeMap: {\n        small: 'sm',\n        medium: 'md',\n        large: 'lg'\n    },\n    roundedMap: {\n        small: 'sm',\n        medium: 'md',\n        large: 'lg'\n    },\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};\n", "import * as React from 'react';\nimport { classNames, kendoThemeMaps } from '../utils';\nimport { Icon } from '../icon/';\n\nexport interface ButtonProps {\n    children?: React.ReactNode;\n    className?: string;\n    dir?: string;\n    style?: React.CSSProperties;\n    iconClassName?: string;\n    text?: string;\n    icon?: string;\n    size?: null | 'small' | 'medium' | 'large';\n    rounded: null | 'small' | 'medium' | 'large' | 'full';\n    fillMode?: null | 'solid' | 'outline' | 'flat' | 'link' | 'clear';\n    themeColor?: null | 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse';\n    hover?: boolean;\n    focus?: boolean;\n    active?: boolean;\n    selected?: boolean;\n    disabled?: boolean;\n    showArrow?: boolean;\n    arrowIconName?: string;\n}\n\nexport class Button extends React.Component<ButtonProps> {\n\n    static defaultProps = {\n        size: 'medium',\n        rounded: 'medium',\n        fillMode: 'solid',\n        themeColor: 'base',\n        showArrow: false,\n        arrowIconName: 'arrow-s'\n    };\n\n    render() {\n        const {\n            children,\n            className,\n            iconClassName,\n            text,\n            icon,\n            size,\n            rounded,\n            fillMode,\n            themeColor,\n            hover,\n            focus,\n            active,\n            selected,\n            disabled,\n            showArrow,\n            arrowIconName,\n            ...htmlAttributes\n        } = this.props;\n\n        const hasIcon = (icon !== undefined);\n        const hasChildren = children !== undefined;\n\n        return (\n            <button\n                style={this.props.style}\n                {...htmlAttributes}\n                dir={this.props.dir}\n                className={classNames(\n                    className,\n                    'k-button',\n                    {\n                        [`k-button-${kendoThemeMaps.sizeMap[size!] || size}`]: size,\n                        [`k-button-${fillMode}`]: fillMode,\n                        [`k-button-${fillMode}-${themeColor}`]: Boolean(fillMode && themeColor),\n                        [`k-rounded-${kendoThemeMaps.roundedMap[rounded!] || rounded}`]: rounded,\n                        'k-icon-button': !hasChildren && hasIcon,\n                        'k-hover': hover,\n                        'k-focus': focus,\n                        'k-active': active,\n                        'k-selected': selected,\n                        'k-disabled': disabled\n                    }\n                )}>\n                {icon && <Icon className={classNames(iconClassName, 'k-button-icon')} name={icon} />}\n\n                {text\n                    ?\n                    <>\n                        {text && <span className=\"k-button-text\">{text}</span>}\n                        {children}\n                    </>\n                    : children && <span className=\"k-button-text\">{children}</span>\n                }\n\n                {showArrow && <span className=\"k-menu-button-arrow k-button-arrow\"><Icon name={arrowIconName} /></span>}\n            </button>\n        );\n    }\n}\n", "import * as React from 'react';\nimport { classNames } from '../utils';\n\nexport interface IconProps {\n    className?: string;\n    style?: React.CSSProperties;\n    name?: string;\n}\n\nexport class Icon extends React.Component<IconProps> {\n\n    render() {\n        const {\n            className,\n            style,\n            name\n        } = this.props;\n\n        return (\n            <>\n                { name &&\n                    <span\n                        className={classNames(\n                            className,\n                            'k-icon',\n                            {\n                                [`k-i-${name}`]: name\n                            }\n                        )}\n                        style={style}>\n                    </span>\n                }\n            </>\n        );\n    }\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,qBAAkB;AAClB,sBAAqB;;;ACDrB,cAAuB;;;ACChB,MAAM,aAAa,IAAI,SAAiB;AAC3C,UAAM,SAAS,CAAC;AAEhB,UAAM,cAAc,CAAC,QAAQ;AACzB,MAAC,OAAO,QAAQ,WACV,OAAO,KAAK,GAAG,EAAE,QAAQ,CAAC,QAAQ;AAChC,eAAO,OAAO,IAAI;AAAA,MACtB,CAAC,IACE,OAAO,OAAO;AAAA,IAEzB;AAEA,UAAM,UAAU,CAAC,SACb,KACK,OAAO,CAAC,QAAQ,QAAQ,QAAQ,QAAQ,GAAG,CAAC,EAC5C;AAAA,MAAI,CAAC,QACD,MAAM,QAAQ,GAAG,IAAI,QAAQ,GAAG,IAAI,YAAY,GAAG;AAAA,IACxD;AAER,YAAQ,IAAI;AAEZ,WAAO,OAAO,KAAK,MAAM,EACpB,IAAI,CAAC,QAAS,OAAO,QAAQ,OAAQ,IAAI,EACzC,OAAO,CAAC,OAAO,OAAO,IAAI,EAC1B,KAAK,GAAG;AAAA,EACjB;;;ACnBO,MAAM,iBAAiC;AAAA,IAC1C,SAAS;AAAA,MACL,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,IACX;AAAA,IACA,YAAY;AAAA,MACR,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,IACX;AAAA,IACA,YAAY;AAAA,MACR,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,IACX;AAAA,IACA,gBAAgB;AAAA,MACZ,UAAU;AAAA,MACV,YAAY;AAAA,IAChB;AAAA,EACJ;;;AFjBO,MAAM,gBAAN,cAAkC,gBAA8B;AAAA,IAOnE,SAAS;AACL,YAAM;AAAA,QACF;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,WACG;AAAA,MACP,IAAI,KAAK;AAET,aACI,oCAAC;AAAA,QACI,GAAG;AAAA,QACJ,WAAW;AAAA,UACP;AAAA,UACA;AAAA,YACI,CAAC,aAAa,cAAc;AAAA,YAC5B,CAAC,aAAa,gBAAgB;AAAA,UAClC;AAAA,UACA;AAAA,QACJ;AAAA,SACC,QACL;AAAA,IAER;AAAA,EACJ;AA7BI,EAFS,cAEF,eAAe;AAAA,IAClB,WAAW;AAAA,IACX,aAAa;AAAA,EACjB;;;AGhBJ,MAAAA,SAAuB;;;ACAvB,MAAAC,SAAuB;AAShB,MAAM,OAAN,cAAyB,iBAAqB;AAAA,IAEjD,SAAS;AACL,YAAM;AAAA,QACF;AAAA,QACA;AAAA,QACA;AAAA,MACJ,IAAI,KAAK;AAET,aACI,4DACM,QACE,qCAAC;AAAA,QACG,WAAW;AAAA,UACP;AAAA,UACA;AAAA,UACA;AAAA,YACI,CAAC,OAAO,SAAS;AAAA,UACrB;AAAA,QACJ;AAAA,QACA;AAAA,OACJ,CAER;AAAA,IAER;AAAA,EACJ;;;ADVO,MAAM,SAAN,cAA2B,iBAAuB;AAAA,IAWrD,SAAS;AACL,YAAM;AAAA,QACF;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,WACG;AAAA,MACP,IAAI,KAAK;AAET,YAAM,UAAW,SAAS;AAC1B,YAAM,cAAc,aAAa;AAEjC,aACI,qCAAC;AAAA,QACG,OAAO,KAAK,MAAM;AAAA,QACjB,GAAG;AAAA,QACJ,KAAK,KAAK,MAAM;AAAA,QAChB,WAAW;AAAA,UACP;AAAA,UACA;AAAA,UACA;AAAA,YACI,CAAC,YAAY,eAAe,QAAQ,SAAU,SAAS;AAAA,YACvD,CAAC,YAAY,aAAa;AAAA,YAC1B,CAAC,YAAY,YAAY,eAAe,QAAQ,YAAY,UAAU;AAAA,YACtE,CAAC,aAAa,eAAe,WAAW,YAAa,YAAY;AAAA,YACjE,iBAAiB,CAAC,eAAe;AAAA,YACjC,WAAW;AAAA,YACX,WAAW;AAAA,YACX,YAAY;AAAA,YACZ,cAAc;AAAA,YACd,cAAc;AAAA,UAClB;AAAA,QACJ;AAAA,SACC,QAAQ,qCAAC;AAAA,QAAK,WAAW,WAAW,eAAe,eAAe;AAAA,QAAG,MAAM;AAAA,OAAM,GAEjF,OAEG,4DACK,QAAQ,qCAAC;AAAA,QAAK,WAAU;AAAA,SAAiB,IAAK,GAC9C,QACL,IACE,YAAY,qCAAC;AAAA,QAAK,WAAU;AAAA,SAAiB,QAAS,GAG3D,aAAa,qCAAC;AAAA,QAAK,WAAU;AAAA,SAAqC,qCAAC;AAAA,QAAK,MAAM;AAAA,OAAe,CAAE,CACpG;AAAA,IAER;AAAA,EACJ;AArEI,EAFS,OAEF,eAAe;AAAA,IAClB,MAAM;AAAA,IACN,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,eAAe;AAAA,EACnB;;;AJ7BJ,MAAM,OAAO,cAAAC,QAAS;AAAA,IAClB,SAAS,eAAe,KAAK;AAAA,EACjC;AAEA,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAMf,OAAK;AAAA,IACD,6BAAAC,QAAA,2BAAAA,QAAA,gBACI,6BAAAA,QAAA,cAAC,eAAO,MAAO,GACf,6BAAAA,QAAA,cAAC;AAAA,MAAI,IAAG;AAAA,MAAY,WAAU;AAAA,OAE1B,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OACX,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OACX,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAgC,mBAIhD,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OACX,6BAAAA,QAAA,cAAC;AAAA,MAAO,UAAS;AAAA,MAAO,MAAK;AAAA,KAAQ,CACzC,CACJ,GAEA,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OAAoC,yBAEnD,GAEA,6BAAAA,QAAA,cAAC;AAAA,MAAc,WAAU;AAAA,MAAuB,WAAU;AAAA,OACtD,6BAAAA,QAAA,cAAC,cAAO,QAAM,GACd,6BAAAA,QAAA,cAAC;AAAA,MAAO,YAAW;AAAA,OAAU,SAAO,CACxC,CACJ,GAEA,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OACX,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OACX,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,MAAgC,OAAO,EAAE,YAAY,UAAU;AAAA,OAAG,qBAIlF,CACJ,GAEA,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OAAoC,iCAEnD,GAEA,6BAAAA,QAAA,cAAC;AAAA,MAAc,WAAU;AAAA,MAAuB,WAAU;AAAA,OACtD,6BAAAA,QAAA,cAAC,cAAO,QAAM,GACd,6BAAAA,QAAA,cAAC;AAAA,MAAO,YAAW;AAAA,OAAU,SAAO,CACxC,CACJ,GAEA,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OACX,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OACX,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,KAAgC,GAChD,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OACX,6BAAAA,QAAA,cAAC;AAAA,MAAO,UAAS;AAAA,MAAO,MAAK;AAAA,KAAQ,CACzC,CACJ,GAEA,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OAAoC,qCAEnD,GAEA,6BAAAA,QAAA,cAAC;AAAA,MAAc,WAAU;AAAA,MAAuB,WAAU;AAAA,OACtD,6BAAAA,QAAA,cAAC,cAAO,QAAM,GACd,6BAAAA,QAAA,cAAC;AAAA,MAAO,YAAW;AAAA,OAAU,SAAO,CACxC,CACJ,GAEA,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OACX,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OACX,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,KAAgC,CACpD,GAEA,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OAAoC,wCAEnD,CACJ,GAEA,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OACX,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OAAoC,sBAEnD,GAEA,6BAAAA,QAAA,cAAC;AAAA,MAAc,WAAU;AAAA,MAAuB,WAAU;AAAA,OACtD,6BAAAA,QAAA,cAAC,cAAO,QAAM,GACd,6BAAAA,QAAA,cAAC;AAAA,MAAO,YAAW;AAAA,OAAU,SAAO,CACxC,CACJ,GAEA,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,MAA6B,OAAO,EAAE,QAAQ,QAAQ;AAAA,OACjE,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OACX,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAgC,WAAS,GACzD,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OACX,6BAAAA,QAAA,cAAC;AAAA,MAAO,UAAS;AAAA,MAAO,MAAK;AAAA,KAAQ,CACzC,CACJ,GAEA,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OACX,6BAAAA,QAAA,cAAC,WAAE,gEAA8D,GACjE,6BAAAA,QAAA,cAAC,WAAE,gEAA8D,GACjE,6BAAAA,QAAA,cAAC,WAAE,gEAA8D,CACrE,GAEA,6BAAAA,QAAA,cAAC;AAAA,MAAc,WAAU;AAAA,MAAuB,WAAU;AAAA,OACtD,6BAAAA,QAAA,cAAC,cAAO,QAAM,GACd,6BAAAA,QAAA,cAAC;AAAA,MAAO,YAAW;AAAA,OAAU,SAAO,CACxC,CACJ,CAEJ,CACJ;AAAA,EACJ;",
+  "sourcesContent": ["import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { ActionButtons } from '../../action-buttons';\nimport { Button } from '../../button';\n\nconst root = ReactDOM.createRoot(\n    document.getElementById('app') as HTMLElement\n);\n\nconst styles = `\n    .k-dialog {\n        position: relative;\n    }\n`;\n\nroot.render(\n    <>\n        <style>{styles}</style>\n        <div id=\"test-area\" className=\"k-d-grid k-grid-cols-3\">\n\n            <div className=\"k-widget k-window k-dialog\">\n                <div className=\"k-window-titlebar k-dialog-titlebar\">\n                    <span className=\"k-window-title k-dialog-title\">\n                        Title\n                        g y p\n                        t d l\n                    </span>\n                    <div className=\"k-window-actions k-dialog-actions\">\n                        <Button fillMode=\"flat\" icon=\"close\"></Button>\n                    </div>\n                </div>\n\n                <div className=\"k-window-content k-dialog-content\">\n                    Dialog content template\n                </div>\n\n                <ActionButtons className=\"k-dialog-buttongroup\" alignment=\"end\">\n                    <Button>Action</Button>\n                    <Button themeColor=\"primary\">Primary</Button>\n                </ActionButtons>\n            </div>\n\n            <div className=\"k-widget k-window k-dialog\">\n                <div className=\"k-window-titlebar k-dialog-titlebar\">\n                    <span className=\"k-window-title k-dialog-title\" style={{ fontFamily: \"cursive\" }}>\n                        Cursive\n                        g y p\n                        t d l\n                    </span>\n                </div>\n\n                <div className=\"k-window-content k-dialog-content\">\n                    Dialog without titlebar actions\n                </div>\n\n                <ActionButtons className=\"k-dialog-buttongroup\" alignment=\"end\">\n                    <Button>Action</Button>\n                    <Button themeColor=\"primary\">Primary</Button>\n                </ActionButtons>\n            </div>\n\n            <div className=\"k-widget k-window k-dialog\">\n                <div className=\"k-window-titlebar k-dialog-titlebar\">\n                    <span className=\"k-window-title k-dialog-title\"></span>\n                    <div className=\"k-window-actions k-dialog-actions\">\n                        <Button fillMode=\"flat\" icon=\"close\"></Button>\n                    </div>\n                </div>\n\n                <div className=\"k-window-content k-dialog-content\">\n                    Dialog with empty title and actions\n                </div>\n\n                <ActionButtons className=\"k-dialog-buttongroup\" alignment=\"end\">\n                    <Button>Action</Button>\n                    <Button themeColor=\"primary\">Primary</Button>\n                </ActionButtons>\n            </div>\n\n            <div className=\"k-widget k-window k-dialog\">\n                <div className=\"k-window-titlebar k-dialog-titlebar\">\n                    <span className=\"k-window-title k-dialog-title\"></span>\n                </div>\n\n                <div className=\"k-window-content k-dialog-content\">\n                    Dialog with empty title and no actions\n                </div>\n            </div>\n\n            <div className=\"k-widget k-window k-dialog\">\n                <div className=\"k-window-content k-dialog-content\">\n                    Dialog without title\n                </div>\n\n                <ActionButtons className=\"k-dialog-buttongroup\" alignment=\"end\">\n                    <Button>Action</Button>\n                    <Button themeColor=\"primary\">Primary</Button>\n                </ActionButtons>\n            </div>\n\n            <div className=\"k-widget k-window k-dialog\" style={{ height: \"170px\" }}>\n                <div className=\"k-window-titlebar k-dialog-titlebar\">\n                    <span className=\"k-window-title k-dialog-title\">Scrolling</span>\n                    <div className=\"k-window-actions k-dialog-actions\">\n                        <Button fillMode=\"flat\" icon=\"close\"></Button>\n                    </div>\n                </div>\n\n                <div className=\"k-window-content k-dialog-content k-scroll\">\n                    <p>Dialog content template with long text and vertical scrolling.</p>\n                    <p>Dialog content template with long text and vertical scrolling.</p>\n                    <p>Dialog content template with long text and vertical scrolling.</p>\n                </div>\n\n                <ActionButtons className=\"k-dialog-buttongroup\" alignment=\"end\">\n                    <Button>Action</Button>\n                    <Button themeColor=\"primary\">Primary</Button>\n                </ActionButtons>\n            </div>\n\n        </div>\n    </>\n);\n", "import * as React from 'react';\nimport { ButtonProps } from '../button';\nimport { classNames } from '../utils';\n\nexport interface ActionButtonsProps {\n    children?: React.ReactElement<ButtonProps>|React.ReactElement<ButtonProps>[];\n    className?: string;\n    alignment?: 'start' | 'center' | 'end' | 'stretched';\n    orientation?: 'horizontal' | 'vertical';\n}\n\nexport class ActionButtons extends React.Component<ActionButtonsProps> {\n\n    static defaultProps = {\n        alignment: 'start',\n        orientation: 'horizontal'\n    };\n\n    render() {\n        const {\n            children,\n            className,\n            alignment,\n            orientation,\n            ...htmlAttributes\n        } = this.props;\n\n        return (\n            <div\n                {...htmlAttributes}\n                className={classNames(\n                    'k-actions',\n                    {\n                        [`k-actions-${alignment}`]: alignment,\n                        [`k-actions-${orientation}`]: orientation\n                    },\n                    className\n                )}>\n                {children}\n            </div>\n        );\n    }\n}\n", "/* eslint-disable no-return-assign */\nexport const classNames = (...args): string => {\n    const result = {};\n\n    const addLeafKeys = (arg) => {\n        (typeof arg === 'object'\n            ? Object.keys(arg).forEach((key) => {\n                result[key] = arg[key];\n            })\n            : (result[arg] = true)\n        );\n    };\n\n    const addKeys = (list) =>\n        list\n            .filter((arg) => arg !== true && Boolean(arg))\n            .map((arg: any) =>\n                (Array.isArray(arg) ? addKeys(arg) : addLeafKeys(arg))\n            );\n\n    addKeys(args);\n\n    return Object.keys(result)\n        .map((key) => (result[key] && key) || null)\n        .filter((el) => el !== null)\n        .join(' ');\n};\n", "export interface KendoThemeMaps {\n    sizeMap: Record<Exclude<any, null>, string>;\n    roundedMap: Record<Exclude<any, null>, string>;\n    calloutMap: Record<Exclude<any, null>, string>;\n    orientationMap: Record<Exclude<any, null>, string>;\n}\n\nexport const kendoThemeMaps: KendoThemeMaps = {\n    sizeMap: {\n        small: 'sm',\n        medium: 'md',\n        large: 'lg'\n    },\n    roundedMap: {\n        small: 'sm',\n        medium: 'md',\n        large: 'lg'\n    },\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};\n", "import * as React from 'react';\nimport { classNames, kendoThemeMaps } from '../utils';\nimport { Icon } from '../icon/';\n\nexport interface ButtonProps {\n    children?: React.ReactNode;\n    className?: string;\n    dir?: string;\n    style?: React.CSSProperties;\n    iconClassName?: string;\n    text?: string;\n    icon?: string;\n    size?: null | 'small' | 'medium' | 'large';\n    rounded: null | 'small' | 'medium' | 'large' | 'full';\n    fillMode?: null | 'solid' | 'outline' | 'flat' | 'link' | 'clear';\n    themeColor?: null | 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse';\n    hover?: boolean;\n    focus?: boolean;\n    active?: boolean;\n    selected?: boolean;\n    disabled?: boolean;\n    showArrow?: boolean;\n    arrowIconName?: string;\n}\n\nexport class Button extends React.Component<ButtonProps> {\n\n    static defaultProps = {\n        size: 'medium',\n        rounded: 'medium',\n        fillMode: 'solid',\n        themeColor: 'base',\n        showArrow: false,\n        arrowIconName: 'arrow-s'\n    };\n\n    render() {\n        const {\n            children,\n            className,\n            iconClassName,\n            text,\n            icon,\n            size,\n            rounded,\n            fillMode,\n            themeColor,\n            hover,\n            focus,\n            active,\n            selected,\n            disabled,\n            showArrow,\n            arrowIconName,\n            ...htmlAttributes\n        } = this.props;\n\n        const hasIcon = (icon !== undefined);\n        const hasChildren = children !== undefined;\n\n        return (\n            <button\n                style={this.props.style}\n                {...htmlAttributes}\n                dir={this.props.dir}\n                className={classNames(\n                    className,\n                    'k-button',\n                    {\n                        [`k-button-${kendoThemeMaps.sizeMap[size!] || size}`]: size,\n                        [`k-button-${fillMode}`]: fillMode,\n                        [`k-button-${fillMode}-${themeColor}`]: Boolean(fillMode && themeColor),\n                        [`k-rounded-${kendoThemeMaps.roundedMap[rounded!] || rounded}`]: rounded,\n                        'k-icon-button': !text && !hasChildren && hasIcon,\n                        'k-hover': hover,\n                        'k-focus': focus,\n                        'k-active': active,\n                        'k-selected': selected,\n                        'k-disabled': disabled\n                    }\n                )}>\n                {icon && <Icon className={classNames(iconClassName, 'k-button-icon')} name={icon} />}\n\n                {text\n                    ?\n                    <>\n                        {text && <span className=\"k-button-text\">{text}</span>}\n                        {children}\n                    </>\n                    : children && <span className=\"k-button-text\">{children}</span>\n                }\n\n                {showArrow && <span className=\"k-menu-button-arrow k-button-arrow\"><Icon name={arrowIconName} /></span>}\n            </button>\n        );\n    }\n}\n", "import * as React from 'react';\nimport { classNames } from '../utils';\n\nexport interface IconProps {\n    className?: string;\n    style?: React.CSSProperties;\n    name?: string;\n}\n\nexport class Icon extends React.Component<IconProps> {\n\n    render() {\n        const {\n            className,\n            style,\n            name\n        } = this.props;\n\n        return (\n            <>\n                { name &&\n                    <span\n                        className={classNames(\n                            className,\n                            'k-icon',\n                            {\n                                [`k-i-${name}`]: name\n                            }\n                        )}\n                        style={style}>\n                    </span>\n                }\n            </>\n        );\n    }\n}\n"],
+  "mappings": "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",
   "names": ["React", "React", "ReactDOM", "React"]
 }

package/dist/drawer/tests/drawer-hierarchical-item-levels.js CHANGED Viewed

@@ -95,13 +95,13 @@
     }, /* @__PURE__ */ import_react.default.createElement(Icon, {
       name: "arrow-chevron-down"
     }))), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-drawer-item k-state-hover k-level-1"
+      className: "k-drawer-item k-hover k-level-1"
     }, /* @__PURE__ */ import_react.default.createElement(Icon, {
       name: "question"
     }), /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-item-text"
     }, "About Kendo UI")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-drawer-item k-state-selected k-level-2"
+      className: "k-drawer-item k-selected k-level-2"
     }, /* @__PURE__ */ import_react.default.createElement(Icon, {
       name: "palette"
     }), /* @__PURE__ */ import_react.default.createElement("span", {
@@ -182,13 +182,13 @@
     }, /* @__PURE__ */ import_react.default.createElement(Icon, {
       name: "arrow-chevron-down"
     }))), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-drawer-item k-state-hover k-level-1"
+      className: "k-drawer-item k-hover k-level-1"
     }, /* @__PURE__ */ import_react.default.createElement(Icon, {
       name: "question"
     }), /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-item-text"
     }, "About Kendo UI")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-drawer-item k-state-selected k-level-2"
+      className: "k-drawer-item k-selected k-level-2"
     }, /* @__PURE__ */ import_react.default.createElement(Icon, {
       name: "palette"
     }), /* @__PURE__ */ import_react.default.createElement("span", {

package/dist/drawer/tests/drawer-hierarchical-item-levels.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/drawer/tests/drawer-hierarchical-item-levels.tsx", "../../../src/icon/icon.tsx", "../../../src/utils/classNames.ts"],
-  "sourcesContent": ["import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { Icon } from '../../icon';\n\nconst root = ReactDOM.createRoot(\n    document.getElementById('app') as HTMLElement\n);\n\nroot.render(\n    <>\n        <div id=\"test-area\" className=\"k-d-grid k-grid-cols-4\">\n\n            <span>hierarchical items</span>\n            <span>hierarchical items - RTL</span>\n            <span></span>\n            <span></span>\n\n            <section>\n                <div className=\"k-drawer-container k-drawer-push k-drawer-expanded\">\n                    <div className=\"k-widget k-drawer k-drawer-start\">\n                        <div className=\"k-drawer-wrapper\">\n                            <ul className=\"k-drawer-items\">\n                                <li className=\"k-drawer-item k-level-0\">\n                                    <Icon name=\"information\" />\n                                    <span className=\"k-item-text\">Getting Started</span>\n                                    <span className=\"k-drawer-toggle\"><Icon name=\"arrow-chevron-down\" /></span>\n                                </li>\n                                <li className=\"k-drawer-item k-state-hover k-level-1\">\n                                    <Icon name=\"question\" />\n                                    <span className=\"k-item-text\">About Kendo UI</span>\n                                </li>\n                                <li className=\"k-drawer-item k-state-selected k-level-2\">\n                                    <Icon name=\"palette\" />\n                                    <span className=\"k-item-text\">Supported Themes</span>\n                                </li>\n                                <li className=\"k-drawer-item k-level-0\">\n                                    <Icon name=\"zoom\" />\n                                    <span className=\"k-item-text\">Overview</span>\n                                    <span className=\"k-drawer-toggle\"><Icon name=\"arrow-chevron-up\" /></span>\n                                </li>\n                                <li className=\"k-drawer-item k-level-0\">\n                                    <Icon name=\"star\" />\n                                    <span className=\"k-item-text\">Most Popular Widgets</span>\n                                    <span className=\"k-drawer-toggle\"><Icon name=\"arrow-chevron-down\" /></span>\n                                </li>\n                                <li className=\"k-drawer-item k-level-1\">\n                                    <Icon name=\"palette\" />\n                                    <span className=\"k-item-text\">Supported Themes</span>\n                                </li>\n                                <li className=\"k-drawer-item k-level-1\">\n                                    <Icon name=\"button\" />\n                                    <span className=\"k-item-text\">Button Package</span>\n                                </li>\n                                <li className=\"k-drawer-item k-level-2\">\n                                    <Icon name=\"button\" />\n                                    <span className=\"k-item-text\">Split Button</span>\n                                </li>\n                                <li className=\"k-drawer-item k-level-3\">\n                                    <Icon name=\"question\" />\n                                    <span className=\"k-item-text\">API</span>\n                                </li>\n                                <li className=\"k-drawer-item k-level-2\">\n                                    <Icon name=\"button\" />\n                                    <span className=\"k-item-text\">Chip List</span>\n                                </li>\n                                <li className=\"k-drawer-item k-level-3\">\n                                    <Icon name=\"question\" />\n                                    <span className=\"k-item-text\">API</span>\n                                </li>\n                            </ul>\n                        </div>\n                    </div>\n                </div>\n            </section>\n\n            <section>\n                <div dir=\"rtl\" className=\"k-drawer-container k-drawer-push k-drawer-expanded\">\n                    <div className=\"k-widget k-drawer k-drawer-start\">\n                        <div className=\"k-drawer-wrapper\">\n                            <ul className=\"k-drawer-items\">\n                                <li className=\"k-drawer-item k-level-0\">\n                                    <Icon name=\"information\" />\n                                    <span className=\"k-item-text\">Getting Started</span>\n                                    <span className=\"k-drawer-toggle\"><Icon name=\"arrow-chevron-down\" /></span>\n                                </li>\n                                <li className=\"k-drawer-item k-state-hover k-level-1\">\n                                    <Icon name=\"question\" />\n                                    <span className=\"k-item-text\">About Kendo UI</span>\n                                </li>\n                                <li className=\"k-drawer-item k-state-selected k-level-2\">\n                                    <Icon name=\"palette\" />\n                                    <span className=\"k-item-text\">Supported Themes</span>\n                                </li>\n                                <li className=\"k-drawer-item k-level-0\">\n                                    <Icon name=\"zoom\" />\n                                    <span className=\"k-item-text\">Overview</span>\n                                    <span className=\"k-drawer-toggle\"><Icon name=\"arrow-chevron-up\" /></span>\n                                </li>\n                                <li className=\"k-drawer-item k-level-0\">\n                                    <Icon name=\"star\" />\n                                    <span className=\"k-item-text\">Most Popular Widgets</span>\n                                    <span className=\"k-drawer-toggle\"><Icon name=\"arrow-chevron-down\" /></span>\n                                </li>\n                                <li className=\"k-drawer-item k-level-1\">\n                                    <Icon name=\"palette\" />\n                                    <span className=\"k-item-text\">Supported Themes</span>\n                                </li>\n                                <li className=\"k-drawer-item k-level-1\">\n                                    <Icon name=\"button\" />\n                                    <span className=\"k-item-text\">Button Package</span>\n                                </li>\n                                <li className=\"k-drawer-item k-level-2\">\n                                    <Icon name=\"button\" />\n                                    <span className=\"k-item-text\">Split Button</span>\n                                </li>\n                                <li className=\"k-drawer-item k-level-3\">\n                                    <Icon name=\"question\" />\n                                    <span className=\"k-item-text\">API</span>\n                                </li>\n                                <li className=\"k-drawer-item k-level-2\">\n                                    <Icon name=\"button\" />\n                                    <span className=\"k-item-text\">Chip List</span>\n                                </li>\n                                <li className=\"k-drawer-item k-level-3\">\n                                    <Icon name=\"question\" />\n                                    <span className=\"k-item-text\">API</span>\n                                </li>\n                            </ul>\n                        </div>\n                    </div>\n                </div>\n            </section>\n\n        </div>\n    </>\n);\n", "import * as React from 'react';\nimport { classNames } from '../utils';\n\nexport interface IconProps {\n    className?: string;\n    style?: React.CSSProperties;\n    name?: string;\n}\n\nexport class Icon extends React.Component<IconProps> {\n\n    render() {\n        const {\n            className,\n            style,\n            name\n        } = this.props;\n\n        return (\n            <>\n                { name &&\n                    <span\n                        className={classNames(\n                            className,\n                            'k-icon',\n                            {\n                                [`k-i-${name}`]: name\n                            }\n                        )}\n                        style={style}>\n                    </span>\n                }\n            </>\n        );\n    }\n}\n", "/* eslint-disable no-return-assign */\nexport const classNames = (...args): string => {\n    const result = {};\n\n    const addLeafKeys = (arg) => {\n        (typeof arg === 'object'\n            ? Object.keys(arg).forEach((key) => {\n                result[key] = arg[key];\n            })\n            : (result[arg] = true)\n        );\n    };\n\n    const addKeys = (list) =>\n        list\n            .filter((arg) => arg !== true && Boolean(arg))\n            .map((arg: any) =>\n                (Array.isArray(arg) ? addKeys(arg) : addLeafKeys(arg))\n            );\n\n    addKeys(args);\n\n    return Object.keys(result)\n        .map((key) => (result[key] && key) || null)\n        .filter((el) => el !== null)\n        .join(' ');\n};\n"],
+  "sourcesContent": ["import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { Icon } from '../../icon';\n\nconst root = ReactDOM.createRoot(\n    document.getElementById('app') as HTMLElement\n);\n\nroot.render(\n    <>\n        <div id=\"test-area\" className=\"k-d-grid k-grid-cols-4\">\n\n            <span>hierarchical items</span>\n            <span>hierarchical items - RTL</span>\n            <span></span>\n            <span></span>\n\n            <section>\n                <div className=\"k-drawer-container k-drawer-push k-drawer-expanded\">\n                    <div className=\"k-widget k-drawer k-drawer-start\">\n                        <div className=\"k-drawer-wrapper\">\n                            <ul className=\"k-drawer-items\">\n                                <li className=\"k-drawer-item k-level-0\">\n                                    <Icon name=\"information\" />\n                                    <span className=\"k-item-text\">Getting Started</span>\n                                    <span className=\"k-drawer-toggle\"><Icon name=\"arrow-chevron-down\" /></span>\n                                </li>\n                                <li className=\"k-drawer-item k-hover k-level-1\">\n                                    <Icon name=\"question\" />\n                                    <span className=\"k-item-text\">About Kendo UI</span>\n                                </li>\n                                <li className=\"k-drawer-item k-selected k-level-2\">\n                                    <Icon name=\"palette\" />\n                                    <span className=\"k-item-text\">Supported Themes</span>\n                                </li>\n                                <li className=\"k-drawer-item k-level-0\">\n                                    <Icon name=\"zoom\" />\n                                    <span className=\"k-item-text\">Overview</span>\n                                    <span className=\"k-drawer-toggle\"><Icon name=\"arrow-chevron-up\" /></span>\n                                </li>\n                                <li className=\"k-drawer-item k-level-0\">\n                                    <Icon name=\"star\" />\n                                    <span className=\"k-item-text\">Most Popular Widgets</span>\n                                    <span className=\"k-drawer-toggle\"><Icon name=\"arrow-chevron-down\" /></span>\n                                </li>\n                                <li className=\"k-drawer-item k-level-1\">\n                                    <Icon name=\"palette\" />\n                                    <span className=\"k-item-text\">Supported Themes</span>\n                                </li>\n                                <li className=\"k-drawer-item k-level-1\">\n                                    <Icon name=\"button\" />\n                                    <span className=\"k-item-text\">Button Package</span>\n                                </li>\n                                <li className=\"k-drawer-item k-level-2\">\n                                    <Icon name=\"button\" />\n                                    <span className=\"k-item-text\">Split Button</span>\n                                </li>\n                                <li className=\"k-drawer-item k-level-3\">\n                                    <Icon name=\"question\" />\n                                    <span className=\"k-item-text\">API</span>\n                                </li>\n                                <li className=\"k-drawer-item k-level-2\">\n                                    <Icon name=\"button\" />\n                                    <span className=\"k-item-text\">Chip List</span>\n                                </li>\n                                <li className=\"k-drawer-item k-level-3\">\n                                    <Icon name=\"question\" />\n                                    <span className=\"k-item-text\">API</span>\n                                </li>\n                            </ul>\n                        </div>\n                    </div>\n                </div>\n            </section>\n\n            <section>\n                <div dir=\"rtl\" className=\"k-drawer-container k-drawer-push k-drawer-expanded\">\n                    <div className=\"k-widget k-drawer k-drawer-start\">\n                        <div className=\"k-drawer-wrapper\">\n                            <ul className=\"k-drawer-items\">\n                                <li className=\"k-drawer-item k-level-0\">\n                                    <Icon name=\"information\" />\n                                    <span className=\"k-item-text\">Getting Started</span>\n                                    <span className=\"k-drawer-toggle\"><Icon name=\"arrow-chevron-down\" /></span>\n                                </li>\n                                <li className=\"k-drawer-item k-hover k-level-1\">\n                                    <Icon name=\"question\" />\n                                    <span className=\"k-item-text\">About Kendo UI</span>\n                                </li>\n                                <li className=\"k-drawer-item k-selected k-level-2\">\n                                    <Icon name=\"palette\" />\n                                    <span className=\"k-item-text\">Supported Themes</span>\n                                </li>\n                                <li className=\"k-drawer-item k-level-0\">\n                                    <Icon name=\"zoom\" />\n                                    <span className=\"k-item-text\">Overview</span>\n                                    <span className=\"k-drawer-toggle\"><Icon name=\"arrow-chevron-up\" /></span>\n                                </li>\n                                <li className=\"k-drawer-item k-level-0\">\n                                    <Icon name=\"star\" />\n                                    <span className=\"k-item-text\">Most Popular Widgets</span>\n                                    <span className=\"k-drawer-toggle\"><Icon name=\"arrow-chevron-down\" /></span>\n                                </li>\n                                <li className=\"k-drawer-item k-level-1\">\n                                    <Icon name=\"palette\" />\n                                    <span className=\"k-item-text\">Supported Themes</span>\n                                </li>\n                                <li className=\"k-drawer-item k-level-1\">\n                                    <Icon name=\"button\" />\n                                    <span className=\"k-item-text\">Button Package</span>\n                                </li>\n                                <li className=\"k-drawer-item k-level-2\">\n                                    <Icon name=\"button\" />\n                                    <span className=\"k-item-text\">Split Button</span>\n                                </li>\n                                <li className=\"k-drawer-item k-level-3\">\n                                    <Icon name=\"question\" />\n                                    <span className=\"k-item-text\">API</span>\n                                </li>\n                                <li className=\"k-drawer-item k-level-2\">\n                                    <Icon name=\"button\" />\n                                    <span className=\"k-item-text\">Chip List</span>\n                                </li>\n                                <li className=\"k-drawer-item k-level-3\">\n                                    <Icon name=\"question\" />\n                                    <span className=\"k-item-text\">API</span>\n                                </li>\n                            </ul>\n                        </div>\n                    </div>\n                </div>\n            </section>\n\n        </div>\n    </>\n);\n", "import * as React from 'react';\nimport { classNames } from '../utils';\n\nexport interface IconProps {\n    className?: string;\n    style?: React.CSSProperties;\n    name?: string;\n}\n\nexport class Icon extends React.Component<IconProps> {\n\n    render() {\n        const {\n            className,\n            style,\n            name\n        } = this.props;\n\n        return (\n            <>\n                { name &&\n                    <span\n                        className={classNames(\n                            className,\n                            'k-icon',\n                            {\n                                [`k-i-${name}`]: name\n                            }\n                        )}\n                        style={style}>\n                    </span>\n                }\n            </>\n        );\n    }\n}\n", "/* eslint-disable no-return-assign */\nexport const classNames = (...args): string => {\n    const result = {};\n\n    const addLeafKeys = (arg) => {\n        (typeof arg === 'object'\n            ? Object.keys(arg).forEach((key) => {\n                result[key] = arg[key];\n            })\n            : (result[arg] = true)\n        );\n    };\n\n    const addKeys = (list) =>\n        list\n            .filter((arg) => arg !== true && Boolean(arg))\n            .map((arg: any) =>\n                (Array.isArray(arg) ? addKeys(arg) : addLeafKeys(arg))\n            );\n\n    addKeys(args);\n\n    return Object.keys(result)\n        .map((key) => (result[key] && key) || null)\n        .filter((el) => el !== null)\n        .join(' ');\n};\n"],
   "mappings": "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",
   "names": ["ReactDOM", "React"]
 }

package/dist/drawer/tests/drawer-overlay-mini.js CHANGED Viewed

@@ -102,25 +102,25 @@
     }, "Item")), /* @__PURE__ */ import_react.default.createElement("li", {
       className: "k-drawer-item k-drawer-separator"
     }), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-drawer-item k-state-hover"
+      className: "k-drawer-item k-hover"
     }, /* @__PURE__ */ import_react.default.createElement(Icon, {
       name: "star-outline"
     }), /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-item-text"
     }, "Hovered Item")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-drawer-item k-state-selected"
+      className: "k-drawer-item k-selected"
     }, /* @__PURE__ */ import_react.default.createElement(Icon, {
       name: "star-outline"
     }), /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-item-text"
     }, "Selected Item")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-drawer-item k-state-selected k-state-hover"
+      className: "k-drawer-item k-selected k-hover"
     }, /* @__PURE__ */ import_react.default.createElement(Icon, {
       name: "star-outline"
     }), /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-item-text"
     }, "Selected and hovered item")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-drawer-item k-state-focused"
+      className: "k-drawer-item k-focus"
     }, /* @__PURE__ */ import_react.default.createElement(Icon, {
       name: "star-outline"
     }), /* @__PURE__ */ import_react.default.createElement("span", {
@@ -132,19 +132,19 @@
     })), /* @__PURE__ */ import_react.default.createElement("li", {
       className: "k-drawer-item k-drawer-separator"
     }), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-drawer-item k-state-hover"
+      className: "k-drawer-item k-hover"
     }, /* @__PURE__ */ import_react.default.createElement(Icon, {
       name: "star-outline"
     })), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-drawer-item k-state-selected"
+      className: "k-drawer-item k-selected"
     }, /* @__PURE__ */ import_react.default.createElement(Icon, {
       name: "star-outline"
     })), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-drawer-item k-state-selected k-state-hover"
+      className: "k-drawer-item k-selected k-hover"
     }, /* @__PURE__ */ import_react.default.createElement(Icon, {
       name: "star-outline"
     })), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-drawer-item k-state-focused"
+      className: "k-drawer-item k-focus"
     }, /* @__PURE__ */ import_react.default.createElement(Icon, {
       name: "star-outline"
     })))))), /* @__PURE__ */ import_react.default.createElement("div", {
@@ -167,25 +167,25 @@
     }, "Item")), /* @__PURE__ */ import_react.default.createElement("li", {
       className: "k-drawer-item k-drawer-separator"
     }), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-drawer-item k-state-hover"
+      className: "k-drawer-item k-hover"
     }, /* @__PURE__ */ import_react.default.createElement(Icon, {
       name: "star-outline"
     }), /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-item-text"
     }, "Hovered Item")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-drawer-item k-state-selected"
+      className: "k-drawer-item k-selected"
     }, /* @__PURE__ */ import_react.default.createElement(Icon, {
       name: "star-outline"
     }), /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-item-text"
     }, "Selected Item")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-drawer-item k-state-selected k-state-hover"
+      className: "k-drawer-item k-selected k-hover"
     }, /* @__PURE__ */ import_react.default.createElement(Icon, {
       name: "star-outline"
     }), /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-item-text"
     }, "Selected and hovered item")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-drawer-item k-state-focused"
+      className: "k-drawer-item k-focus"
     }, /* @__PURE__ */ import_react.default.createElement(Icon, {
       name: "star-outline"
     }), /* @__PURE__ */ import_react.default.createElement("span", {
@@ -197,19 +197,19 @@
     })), /* @__PURE__ */ import_react.default.createElement("li", {
       className: "k-drawer-item k-drawer-separator"
     }), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-drawer-item k-state-hover"
+      className: "k-drawer-item k-hover"
     }, /* @__PURE__ */ import_react.default.createElement(Icon, {
       name: "star-outline"
     })), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-drawer-item k-state-selected"
+      className: "k-drawer-item k-selected"
     }, /* @__PURE__ */ import_react.default.createElement(Icon, {
       name: "star-outline"
     })), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-drawer-item k-state-selected k-state-hover"
+      className: "k-drawer-item k-selected k-hover"
     }, /* @__PURE__ */ import_react.default.createElement(Icon, {
       name: "star-outline"
     })), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-drawer-item k-state-focused"
+      className: "k-drawer-item k-focus"
     }, /* @__PURE__ */ import_react.default.createElement(Icon, {
       name: "star-outline"
     })))))), /* @__PURE__ */ import_react.default.createElement("div", {

package/dist/drawer/tests/drawer-overlay-mini.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/drawer/tests/drawer-overlay-mini.tsx", "../../../src/icon/icon.tsx", "../../../src/utils/classNames.ts"],
-  "sourcesContent": ["import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { Icon } from '../../icon';\n\nconst root = ReactDOM.createRoot(\n    document.getElementById('app') as HTMLElement\n);\n\nconst styles = `\n    #test-area {\n        height: 600px;\n        position: relative;\n    }\n    #test-area .k-drawer,\n    #test-area .k-overlay {\n        position: absolute;\n    }\n`;\n\nroot.render(\n    <>\n        <style>{styles}</style>\n        <div id=\"test-area\">\n            <div className=\"k-drawer-container k-drawer-left k-drawer-overlay k-drawer-mini\">\n                <div className=\"k-widget k-drawer\">\n                    <div className=\"k-drawer-wrapper\">\n                        <div className=\"k-drawer-items\">\n                            <ul>\n                                <li className=\"k-drawer-item\">\n                                    <Icon name=\"star-outline\" />\n                                    <span className=\"k-item-text\">Item</span>\n                                </li>\n                                <li className=\"k-drawer-item k-drawer-separator\"></li>\n                                <li className=\"k-drawer-item k-state-hover\">\n                                    <Icon name=\"star-outline\" />\n                                    <span className=\"k-item-text\">Hovered Item</span>\n                                </li>\n                                <li className=\"k-drawer-item k-state-selected\">\n                                    <Icon name=\"star-outline\" />\n                                    <span className=\"k-item-text\">Selected Item</span>\n                                </li>\n                                <li className=\"k-drawer-item k-state-selected k-state-hover\">\n                                    <Icon name=\"star-outline\" />\n                                    <span className=\"k-item-text\">Selected and hovered item</span>\n                                </li>\n                                <li className=\"k-drawer-item k-state-focused\">\n                                    <Icon name=\"star-outline\" />\n                                    <span className=\"k-item-text\">Focused item</span>\n                                </li>\n\n                                {/* React and Angular rendering */}\n                                <li className=\"k-drawer-item\">\n                                    <Icon name=\"star-outline\" />\n                                </li>\n                                <li className=\"k-drawer-item k-drawer-separator\"></li>\n                                <li className=\"k-drawer-item k-state-hover\">\n                                    <Icon name=\"star-outline\" />\n                                </li>\n                                <li className=\"k-drawer-item k-state-selected\">\n                                    <Icon name=\"star-outline\" />\n                                </li>\n                                <li className=\"k-drawer-item k-state-selected k-state-hover\">\n                                    <Icon name=\"star-outline\" />\n                                </li>\n                                <li className=\"k-drawer-item k-state-focused\">\n                                    <Icon name=\"star-outline\" />\n                                </li>\n                            </ul>\n                        </div>\n                    </div>\n                </div>\n                <div className=\"k-overlay\" style={{ display: \"block\" }}></div>\n            </div>\n\n            <div className=\"k-drawer-container k-drawer-right k-drawer-overlay k-drawer-mini\">\n                <div className=\"k-widget k-drawer\">\n                    <div className=\"k-drawer-wrapper\">\n                        <div className=\"k-drawer-items\">\n                            <ul>\n                                <li className=\"k-drawer-item\">\n                                    <Icon name=\"star-outline\" />\n                                    <span className=\"k-item-text\">Item</span>\n                                </li>\n                                <li className=\"k-drawer-item k-drawer-separator\"></li>\n                                <li className=\"k-drawer-item k-state-hover\">\n                                    <Icon name=\"star-outline\" />\n                                    <span className=\"k-item-text\">Hovered Item</span>\n                                </li>\n                                <li className=\"k-drawer-item k-state-selected\">\n                                    <Icon name=\"star-outline\" />\n                                    <span className=\"k-item-text\">Selected Item</span>\n                                </li>\n                                <li className=\"k-drawer-item k-state-selected k-state-hover\">\n                                    <Icon name=\"star-outline\" />\n                                    <span className=\"k-item-text\">Selected and hovered item</span>\n                                </li>\n                                <li className=\"k-drawer-item k-state-focused\">\n                                    <Icon name=\"star-outline\" />\n                                    <span className=\"k-item-text\">Focused item</span>\n                                </li>\n\n                                {/* React and Angular rendering */}\n                                <li className=\"k-drawer-item\">\n                                    <Icon name=\"star-outline\" />\n                                </li>\n                                <li className=\"k-drawer-item k-drawer-separator\"></li>\n                                <li className=\"k-drawer-item k-state-hover\">\n                                    <Icon name=\"star-outline\" />\n                                </li>\n                                <li className=\"k-drawer-item k-state-selected\">\n                                    <Icon name=\"star-outline\" />\n                                </li>\n                                <li className=\"k-drawer-item k-state-selected k-state-hover\">\n                                    <Icon name=\"star-outline\" />\n                                </li>\n                                <li className=\"k-drawer-item k-state-focused\">\n                                    <Icon name=\"star-outline\" />\n                                </li>\n                            </ul>\n                        </div>\n                    </div>\n                </div>\n                <div className=\"k-overlay\" style={{ display: \"none\" }}></div>\n            </div>\n\n            <h2 style={{ textAlign: \"center\" }}>Drawer overlay mini</h2>\n            <div className=\"k-drawer-content\" style={{ padding: \"0 20px\" }}>Lorem ipsum dolor sit amet consectetur adipisicing elit.olor sit amet consectetur\n                adipisicing elit. Error accusantium odit, optio nulla maiores quo neque fugit debitis dignissimos incidunt\n                maxime? Eum voluptatem blanditiis voluptatum praesentium dolorem, dolore placeat debitis quod delectus laborum\n                assumenda cupiditate.\n            </div>\n        </div>\n    </>\n);\n", "import * as React from 'react';\nimport { classNames } from '../utils';\n\nexport interface IconProps {\n    className?: string;\n    style?: React.CSSProperties;\n    name?: string;\n}\n\nexport class Icon extends React.Component<IconProps> {\n\n    render() {\n        const {\n            className,\n            style,\n            name\n        } = this.props;\n\n        return (\n            <>\n                { name &&\n                    <span\n                        className={classNames(\n                            className,\n                            'k-icon',\n                            {\n                                [`k-i-${name}`]: name\n                            }\n                        )}\n                        style={style}>\n                    </span>\n                }\n            </>\n        );\n    }\n}\n", "/* eslint-disable no-return-assign */\nexport const classNames = (...args): string => {\n    const result = {};\n\n    const addLeafKeys = (arg) => {\n        (typeof arg === 'object'\n            ? Object.keys(arg).forEach((key) => {\n                result[key] = arg[key];\n            })\n            : (result[arg] = true)\n        );\n    };\n\n    const addKeys = (list) =>\n        list\n            .filter((arg) => arg !== true && Boolean(arg))\n            .map((arg: any) =>\n                (Array.isArray(arg) ? addKeys(arg) : addLeafKeys(arg))\n            );\n\n    addKeys(args);\n\n    return Object.keys(result)\n        .map((key) => (result[key] && key) || null)\n        .filter((el) => el !== null)\n        .join(' ');\n};\n"],
+  "sourcesContent": ["import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { Icon } from '../../icon';\n\nconst root = ReactDOM.createRoot(\n    document.getElementById('app') as HTMLElement\n);\n\nconst styles = `\n    #test-area {\n        height: 600px;\n        position: relative;\n    }\n    #test-area .k-drawer,\n    #test-area .k-overlay {\n        position: absolute;\n    }\n`;\n\nroot.render(\n    <>\n        <style>{styles}</style>\n        <div id=\"test-area\">\n            <div className=\"k-drawer-container k-drawer-left k-drawer-overlay k-drawer-mini\">\n                <div className=\"k-widget k-drawer\">\n                    <div className=\"k-drawer-wrapper\">\n                        <div className=\"k-drawer-items\">\n                            <ul>\n                                <li className=\"k-drawer-item\">\n                                    <Icon name=\"star-outline\" />\n                                    <span className=\"k-item-text\">Item</span>\n                                </li>\n                                <li className=\"k-drawer-item k-drawer-separator\"></li>\n                                <li className=\"k-drawer-item k-hover\">\n                                    <Icon name=\"star-outline\" />\n                                    <span className=\"k-item-text\">Hovered Item</span>\n                                </li>\n                                <li className=\"k-drawer-item k-selected\">\n                                    <Icon name=\"star-outline\" />\n                                    <span className=\"k-item-text\">Selected Item</span>\n                                </li>\n                                <li className=\"k-drawer-item k-selected k-hover\">\n                                    <Icon name=\"star-outline\" />\n                                    <span className=\"k-item-text\">Selected and hovered item</span>\n                                </li>\n                                <li className=\"k-drawer-item k-focus\">\n                                    <Icon name=\"star-outline\" />\n                                    <span className=\"k-item-text\">Focused item</span>\n                                </li>\n\n                                {/* React and Angular rendering */}\n                                <li className=\"k-drawer-item\">\n                                    <Icon name=\"star-outline\" />\n                                </li>\n                                <li className=\"k-drawer-item k-drawer-separator\"></li>\n                                <li className=\"k-drawer-item k-hover\">\n                                    <Icon name=\"star-outline\" />\n                                </li>\n                                <li className=\"k-drawer-item k-selected\">\n                                    <Icon name=\"star-outline\" />\n                                </li>\n                                <li className=\"k-drawer-item k-selected k-hover\">\n                                    <Icon name=\"star-outline\" />\n                                </li>\n                                <li className=\"k-drawer-item k-focus\">\n                                    <Icon name=\"star-outline\" />\n                                </li>\n                            </ul>\n                        </div>\n                    </div>\n                </div>\n                <div className=\"k-overlay\" style={{ display: \"block\" }}></div>\n            </div>\n\n            <div className=\"k-drawer-container k-drawer-right k-drawer-overlay k-drawer-mini\">\n                <div className=\"k-widget k-drawer\">\n                    <div className=\"k-drawer-wrapper\">\n                        <div className=\"k-drawer-items\">\n                            <ul>\n                                <li className=\"k-drawer-item\">\n                                    <Icon name=\"star-outline\" />\n                                    <span className=\"k-item-text\">Item</span>\n                                </li>\n                                <li className=\"k-drawer-item k-drawer-separator\"></li>\n                                <li className=\"k-drawer-item k-hover\">\n                                    <Icon name=\"star-outline\" />\n                                    <span className=\"k-item-text\">Hovered Item</span>\n                                </li>\n                                <li className=\"k-drawer-item k-selected\">\n                                    <Icon name=\"star-outline\" />\n                                    <span className=\"k-item-text\">Selected Item</span>\n                                </li>\n                                <li className=\"k-drawer-item k-selected k-hover\">\n                                    <Icon name=\"star-outline\" />\n                                    <span className=\"k-item-text\">Selected and hovered item</span>\n                                </li>\n                                <li className=\"k-drawer-item k-focus\">\n                                    <Icon name=\"star-outline\" />\n                                    <span className=\"k-item-text\">Focused item</span>\n                                </li>\n\n                                {/* React and Angular rendering */}\n                                <li className=\"k-drawer-item\">\n                                    <Icon name=\"star-outline\" />\n                                </li>\n                                <li className=\"k-drawer-item k-drawer-separator\"></li>\n                                <li className=\"k-drawer-item k-hover\">\n                                    <Icon name=\"star-outline\" />\n                                </li>\n                                <li className=\"k-drawer-item k-selected\">\n                                    <Icon name=\"star-outline\" />\n                                </li>\n                                <li className=\"k-drawer-item k-selected k-hover\">\n                                    <Icon name=\"star-outline\" />\n                                </li>\n                                <li className=\"k-drawer-item k-focus\">\n                                    <Icon name=\"star-outline\" />\n                                </li>\n                            </ul>\n                        </div>\n                    </div>\n                </div>\n                <div className=\"k-overlay\" style={{ display: \"none\" }}></div>\n            </div>\n\n            <h2 style={{ textAlign: \"center\" }}>Drawer overlay mini</h2>\n            <div className=\"k-drawer-content\" style={{ padding: \"0 20px\" }}>Lorem ipsum dolor sit amet consectetur adipisicing elit.olor sit amet consectetur\n                adipisicing elit. Error accusantium odit, optio nulla maiores quo neque fugit debitis dignissimos incidunt\n                maxime? Eum voluptatem blanditiis voluptatum praesentium dolorem, dolore placeat debitis quod delectus laborum\n                assumenda cupiditate.\n            </div>\n        </div>\n    </>\n);\n", "import * as React from 'react';\nimport { classNames } from '../utils';\n\nexport interface IconProps {\n    className?: string;\n    style?: React.CSSProperties;\n    name?: string;\n}\n\nexport class Icon extends React.Component<IconProps> {\n\n    render() {\n        const {\n            className,\n            style,\n            name\n        } = this.props;\n\n        return (\n            <>\n                { name &&\n                    <span\n                        className={classNames(\n                            className,\n                            'k-icon',\n                            {\n                                [`k-i-${name}`]: name\n                            }\n                        )}\n                        style={style}>\n                    </span>\n                }\n            </>\n        );\n    }\n}\n", "/* eslint-disable no-return-assign */\nexport const classNames = (...args): string => {\n    const result = {};\n\n    const addLeafKeys = (arg) => {\n        (typeof arg === 'object'\n            ? Object.keys(arg).forEach((key) => {\n                result[key] = arg[key];\n            })\n            : (result[arg] = true)\n        );\n    };\n\n    const addKeys = (list) =>\n        list\n            .filter((arg) => arg !== true && Boolean(arg))\n            .map((arg: any) =>\n                (Array.isArray(arg) ? addKeys(arg) : addLeafKeys(arg))\n            );\n\n    addKeys(args);\n\n    return Object.keys(result)\n        .map((key) => (result[key] && key) || null)\n        .filter((el) => el !== null)\n        .join(' ');\n};\n"],
   "mappings": "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",
   "names": ["ReactDOM", "React"]
 }

package/dist/drawer/tests/drawer-overlay.js CHANGED Viewed

@@ -102,25 +102,25 @@
     }, "Item")), /* @__PURE__ */ import_react.default.createElement("li", {
       className: "k-drawer-item k-drawer-separator"
     }), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-drawer-item k-state-hover"
+      className: "k-drawer-item k-hover"
     }, /* @__PURE__ */ import_react.default.createElement(Icon, {
       name: "star-outline"
     }), /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-item-text"
     }, "Hovered Item")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-drawer-item k-state-selected"
+      className: "k-drawer-item k-selected"
     }, /* @__PURE__ */ import_react.default.createElement(Icon, {
       name: "star-outline"
     }), /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-item-text"
     }, "Selected Item")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-drawer-item k-state-selected k-state-hover"
+      className: "k-drawer-item k-selected k-hover"
     }, /* @__PURE__ */ import_react.default.createElement(Icon, {
       name: "star-outline"
     }), /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-item-text"
     }, "Selected and hovered item")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-drawer-item k-state-focused"
+      className: "k-drawer-item k-focus"
     }, /* @__PURE__ */ import_react.default.createElement(Icon, {
       name: "star-outline"
     }), /* @__PURE__ */ import_react.default.createElement("span", {
@@ -183,25 +183,25 @@
     }, "Item")), /* @__PURE__ */ import_react.default.createElement("li", {
       className: "k-drawer-item k-drawer-separator"
     }), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-drawer-item k-state-hover"
+      className: "k-drawer-item k-hover"
     }, /* @__PURE__ */ import_react.default.createElement(Icon, {
       name: "star-outline"
     }), /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-item-text"
     }, "Hovered Item")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-drawer-item k-state-selected"
+      className: "k-drawer-item k-selected"
     }, /* @__PURE__ */ import_react.default.createElement(Icon, {
       name: "star-outline"
     }), /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-item-text"
     }, "Selected Item")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-drawer-item k-state-selected k-state-hover"
+      className: "k-drawer-item k-selected k-hover"
     }, /* @__PURE__ */ import_react.default.createElement(Icon, {
       name: "star-outline"
     }), /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-item-text"
     }, "Selected and hovered item")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-drawer-item k-state-focused"
+      className: "k-drawer-item k-focus"
     }, /* @__PURE__ */ import_react.default.createElement(Icon, {
       name: "star-outline"
     }), /* @__PURE__ */ import_react.default.createElement("span", {

package/dist/drawer/tests/drawer-overlay.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/drawer/tests/drawer-overlay.tsx", "../../../src/icon/icon.tsx", "../../../src/utils/classNames.ts"],
-  "sourcesContent": ["import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { Icon } from '../../icon';\n\nconst root = ReactDOM.createRoot(\n    document.getElementById('app') as HTMLElement\n);\n\nconst styles = `\n    #test-area {\n        height: 600px;\n        position: relative;\n    }\n    #test-area .k-drawer,\n    #test-area .k-overlay {\n        position: absolute;\n    }\n`;\n\nroot.render(\n    <>\n        <style>{styles}</style>\n        <div id=\"test-area\">\n            <div className=\"k-drawer-container k-drawer-left k-drawer-overlay k-drawer-expanded\">\n                <div className=\"k-widget k-drawer\">\n                    <div className=\"k-drawer-wrapper\">\n                        <div className=\"k-drawer-items\">\n                            <ul>\n                                <li className=\"k-drawer-item\">\n                                    <Icon name=\"star-outline\" />\n                                    <span className=\"k-item-text\">Item</span>\n                                </li>\n                                <li className=\"k-drawer-item k-drawer-separator\"></li>\n                                <li className=\"k-drawer-item k-state-hover\">\n                                    <Icon name=\"star-outline\" />\n                                    <span className=\"k-item-text\">Hovered Item</span>\n                                </li>\n                                <li className=\"k-drawer-item k-state-selected\">\n                                    <Icon name=\"star-outline\" />\n                                    <span className=\"k-item-text\">Selected Item</span>\n                                </li>\n                                <li className=\"k-drawer-item k-state-selected k-state-hover\">\n                                    <Icon name=\"star-outline\" />\n                                    <span className=\"k-item-text\">Selected and hovered item</span>\n                                </li>\n                                <li className=\"k-drawer-item k-state-focused\">\n                                    <Icon name=\"star-outline\" />\n                                    <span className=\"k-item-text\">Focused item</span>\n                                </li>\n                                <li className=\"k-drawer-item\">\n                                    <Icon name=\"star-outline\" />\n                                    <span className=\"k-item-text\">Collapsed</span>\n                                    <span className=\"k-spacer\"></span>\n                                    <Icon name=\"arrow-chevron-down\" />\n                                </li>\n                                <li className=\"k-drawer-item\">\n                                    <Icon name=\"star-outline\" />\n                                    <span className=\"k-item-text\">Expanded</span>\n                                    <span className=\"k-spacer\"></span>\n                                    <Icon name=\"arrow-chevron-up\" />\n                                </li>\n                                <li className=\"k-drawer-item\">\n                                    <Icon name=\"none\" />\n                                    <Icon name=\"star-outline\" />\n                                    <span className=\"k-item-text\">Child Lvl 1</span>\n                                </li>\n                                <li className=\"k-drawer-item\">\n                                    <Icon name=\"none\" />\n                                    <Icon name=\"none\" />\n                                    <Icon name=\"star-outline\" />\n                                    <span className=\"k-item-text\">Child Lvl 2</span>\n                                </li>\n                            </ul>\n                        </div>\n                    </div>\n                </div>\n                <div className=\"k-overlay\" style={{ display: \"block\" }}></div>\n            </div>\n\n            <div className=\"k-drawer-container k-drawer-right k-drawer-overlay k-drawer-expanded\">\n                <div className=\"k-widget k-drawer\">\n                    <div className=\"k-drawer-wrapper\">\n                        <div className=\"k-drawer-items\">\n                            <ul>\n                                <li className=\"k-drawer-item\">\n                                    <Icon name=\"star-outline\" />\n                                    <span className=\"k-item-text\">Item</span>\n                                </li>\n                                <li className=\"k-drawer-item k-drawer-separator\"></li>\n                                <li className=\"k-drawer-item k-state-hover\">\n                                    <Icon name=\"star-outline\" />\n                                    <span className=\"k-item-text\">Hovered Item</span>\n                                </li>\n                                <li className=\"k-drawer-item k-state-selected\">\n                                    <Icon name=\"star-outline\" />\n                                    <span className=\"k-item-text\">Selected Item</span>\n                                </li>\n                                <li className=\"k-drawer-item k-state-selected k-state-hover\">\n                                    <Icon name=\"star-outline\" />\n                                    <span className=\"k-item-text\">Selected and hovered item</span>\n                                </li>\n                                <li className=\"k-drawer-item k-state-focused\">\n                                    <Icon name=\"star-outline\" />\n                                    <span className=\"k-item-text\">Focused item</span>\n                                </li>\n                                <li className=\"k-drawer-item\">\n                                    <Icon name=\"star-outline\" />\n                                    <span className=\"k-item-text\">Collapsed</span>\n                                    <span className=\"k-spacer\"></span>\n                                    <Icon name=\"arrow-chevron-down\" />\n                                </li>\n                                <li className=\"k-drawer-item\">\n                                    <Icon name=\"star-outline\" />\n                                    <span className=\"k-item-text\">Expanded</span>\n                                    <span className=\"k-spacer\"></span>\n                                    <Icon name=\"arrow-chevron-up\" />\n                                </li>\n                                <li className=\"k-drawer-item\">\n                                    <Icon name=\"none\" />\n                                    <Icon name=\"star-outline\" />\n                                    <span className=\"k-item-text\">Child Lvl 1</span>\n                                </li>\n                                <li className=\"k-drawer-item\">\n                                    <Icon name=\"none\" />\n                                    <Icon name=\"none\" />\n                                    <Icon name=\"star-outline\" />\n                                    <span className=\"k-item-text\">Child Lvl 2</span>\n                                </li>\n                            </ul>\n                        </div>\n                    </div>\n                </div>\n                <div className=\"k-overlay\" style={{ display: \"none\" }}></div>\n            </div>\n\n            <h2 style={{ textAlign: \"center\" }}>Drawer overlay</h2>\n            <div className=\"k-drawer-content\" style={{ padding: \"0 20px\" }}>Lorem ipsum dolor sit amet consectetur adipisicing elit.olor sit amet consectetur\n                adipisicing elit. Error accusantium odit, optio nulla maiores quo neque fugit debitis dignissimos incidunt\n                maxime? Eum voluptatem blanditiis voluptatum praesentium dolorem, dolore placeat debitis quod delectus laborum\n                assumenda cupiditate.\n            </div>\n        </div>\n    </>\n);\n", "import * as React from 'react';\nimport { classNames } from '../utils';\n\nexport interface IconProps {\n    className?: string;\n    style?: React.CSSProperties;\n    name?: string;\n}\n\nexport class Icon extends React.Component<IconProps> {\n\n    render() {\n        const {\n            className,\n            style,\n            name\n        } = this.props;\n\n        return (\n            <>\n                { name &&\n                    <span\n                        className={classNames(\n                            className,\n                            'k-icon',\n                            {\n                                [`k-i-${name}`]: name\n                            }\n                        )}\n                        style={style}>\n                    </span>\n                }\n            </>\n        );\n    }\n}\n", "/* eslint-disable no-return-assign */\nexport const classNames = (...args): string => {\n    const result = {};\n\n    const addLeafKeys = (arg) => {\n        (typeof arg === 'object'\n            ? Object.keys(arg).forEach((key) => {\n                result[key] = arg[key];\n            })\n            : (result[arg] = true)\n        );\n    };\n\n    const addKeys = (list) =>\n        list\n            .filter((arg) => arg !== true && Boolean(arg))\n            .map((arg: any) =>\n                (Array.isArray(arg) ? addKeys(arg) : addLeafKeys(arg))\n            );\n\n    addKeys(args);\n\n    return Object.keys(result)\n        .map((key) => (result[key] && key) || null)\n        .filter((el) => el !== null)\n        .join(' ');\n};\n"],
+  "sourcesContent": ["import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { Icon } from '../../icon';\n\nconst root = ReactDOM.createRoot(\n    document.getElementById('app') as HTMLElement\n);\n\nconst styles = `\n    #test-area {\n        height: 600px;\n        position: relative;\n    }\n    #test-area .k-drawer,\n    #test-area .k-overlay {\n        position: absolute;\n    }\n`;\n\nroot.render(\n    <>\n        <style>{styles}</style>\n        <div id=\"test-area\">\n            <div className=\"k-drawer-container k-drawer-left k-drawer-overlay k-drawer-expanded\">\n                <div className=\"k-widget k-drawer\">\n                    <div className=\"k-drawer-wrapper\">\n                        <div className=\"k-drawer-items\">\n                            <ul>\n                                <li className=\"k-drawer-item\">\n                                    <Icon name=\"star-outline\" />\n                                    <span className=\"k-item-text\">Item</span>\n                                </li>\n                                <li className=\"k-drawer-item k-drawer-separator\"></li>\n                                <li className=\"k-drawer-item k-hover\">\n                                    <Icon name=\"star-outline\" />\n                                    <span className=\"k-item-text\">Hovered Item</span>\n                                </li>\n                                <li className=\"k-drawer-item k-selected\">\n                                    <Icon name=\"star-outline\" />\n                                    <span className=\"k-item-text\">Selected Item</span>\n                                </li>\n                                <li className=\"k-drawer-item k-selected k-hover\">\n                                    <Icon name=\"star-outline\" />\n                                    <span className=\"k-item-text\">Selected and hovered item</span>\n                                </li>\n                                <li className=\"k-drawer-item k-focus\">\n                                    <Icon name=\"star-outline\" />\n                                    <span className=\"k-item-text\">Focused item</span>\n                                </li>\n                                <li className=\"k-drawer-item\">\n                                    <Icon name=\"star-outline\" />\n                                    <span className=\"k-item-text\">Collapsed</span>\n                                    <span className=\"k-spacer\"></span>\n                                    <Icon name=\"arrow-chevron-down\" />\n                                </li>\n                                <li className=\"k-drawer-item\">\n                                    <Icon name=\"star-outline\" />\n                                    <span className=\"k-item-text\">Expanded</span>\n                                    <span className=\"k-spacer\"></span>\n                                    <Icon name=\"arrow-chevron-up\" />\n                                </li>\n                                <li className=\"k-drawer-item\">\n                                    <Icon name=\"none\" />\n                                    <Icon name=\"star-outline\" />\n                                    <span className=\"k-item-text\">Child Lvl 1</span>\n                                </li>\n                                <li className=\"k-drawer-item\">\n                                    <Icon name=\"none\" />\n                                    <Icon name=\"none\" />\n                                    <Icon name=\"star-outline\" />\n                                    <span className=\"k-item-text\">Child Lvl 2</span>\n                                </li>\n                            </ul>\n                        </div>\n                    </div>\n                </div>\n                <div className=\"k-overlay\" style={{ display: \"block\" }}></div>\n            </div>\n\n            <div className=\"k-drawer-container k-drawer-right k-drawer-overlay k-drawer-expanded\">\n                <div className=\"k-widget k-drawer\">\n                    <div className=\"k-drawer-wrapper\">\n                        <div className=\"k-drawer-items\">\n                            <ul>\n                                <li className=\"k-drawer-item\">\n                                    <Icon name=\"star-outline\" />\n                                    <span className=\"k-item-text\">Item</span>\n                                </li>\n                                <li className=\"k-drawer-item k-drawer-separator\"></li>\n                                <li className=\"k-drawer-item k-hover\">\n                                    <Icon name=\"star-outline\" />\n                                    <span className=\"k-item-text\">Hovered Item</span>\n                                </li>\n                                <li className=\"k-drawer-item k-selected\">\n                                    <Icon name=\"star-outline\" />\n                                    <span className=\"k-item-text\">Selected Item</span>\n                                </li>\n                                <li className=\"k-drawer-item k-selected k-hover\">\n                                    <Icon name=\"star-outline\" />\n                                    <span className=\"k-item-text\">Selected and hovered item</span>\n                                </li>\n                                <li className=\"k-drawer-item k-focus\">\n                                    <Icon name=\"star-outline\" />\n                                    <span className=\"k-item-text\">Focused item</span>\n                                </li>\n                                <li className=\"k-drawer-item\">\n                                    <Icon name=\"star-outline\" />\n                                    <span className=\"k-item-text\">Collapsed</span>\n                                    <span className=\"k-spacer\"></span>\n                                    <Icon name=\"arrow-chevron-down\" />\n                                </li>\n                                <li className=\"k-drawer-item\">\n                                    <Icon name=\"star-outline\" />\n                                    <span className=\"k-item-text\">Expanded</span>\n                                    <span className=\"k-spacer\"></span>\n                                    <Icon name=\"arrow-chevron-up\" />\n                                </li>\n                                <li className=\"k-drawer-item\">\n                                    <Icon name=\"none\" />\n                                    <Icon name=\"star-outline\" />\n                                    <span className=\"k-item-text\">Child Lvl 1</span>\n                                </li>\n                                <li className=\"k-drawer-item\">\n                                    <Icon name=\"none\" />\n                                    <Icon name=\"none\" />\n                                    <Icon name=\"star-outline\" />\n                                    <span className=\"k-item-text\">Child Lvl 2</span>\n                                </li>\n                            </ul>\n                        </div>\n                    </div>\n                </div>\n                <div className=\"k-overlay\" style={{ display: \"none\" }}></div>\n            </div>\n\n            <h2 style={{ textAlign: \"center\" }}>Drawer overlay</h2>\n            <div className=\"k-drawer-content\" style={{ padding: \"0 20px\" }}>Lorem ipsum dolor sit amet consectetur adipisicing elit.olor sit amet consectetur\n                adipisicing elit. Error accusantium odit, optio nulla maiores quo neque fugit debitis dignissimos incidunt\n                maxime? Eum voluptatem blanditiis voluptatum praesentium dolorem, dolore placeat debitis quod delectus laborum\n                assumenda cupiditate.\n            </div>\n        </div>\n    </>\n);\n", "import * as React from 'react';\nimport { classNames } from '../utils';\n\nexport interface IconProps {\n    className?: string;\n    style?: React.CSSProperties;\n    name?: string;\n}\n\nexport class Icon extends React.Component<IconProps> {\n\n    render() {\n        const {\n            className,\n            style,\n            name\n        } = this.props;\n\n        return (\n            <>\n                { name &&\n                    <span\n                        className={classNames(\n                            className,\n                            'k-icon',\n                            {\n                                [`k-i-${name}`]: name\n                            }\n                        )}\n                        style={style}>\n                    </span>\n                }\n            </>\n        );\n    }\n}\n", "/* eslint-disable no-return-assign */\nexport const classNames = (...args): string => {\n    const result = {};\n\n    const addLeafKeys = (arg) => {\n        (typeof arg === 'object'\n            ? Object.keys(arg).forEach((key) => {\n                result[key] = arg[key];\n            })\n            : (result[arg] = true)\n        );\n    };\n\n    const addKeys = (list) =>\n        list\n            .filter((arg) => arg !== true && Boolean(arg))\n            .map((arg: any) =>\n                (Array.isArray(arg) ? addKeys(arg) : addLeafKeys(arg))\n            );\n\n    addKeys(args);\n\n    return Object.keys(result)\n        .map((key) => (result[key] && key) || null)\n        .filter((el) => el !== null)\n        .join(' ');\n};\n"],
   "mappings": "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",
   "names": ["ReactDOM", "React"]
 }