npm - @progress/kendo-themes-html - Versions diffs - 5.6.1-dev.7 → 5.8.1-dev.0 - Mend

@progress/kendo-themes-html 5.6.1-dev.7 → 5.8.1-dev.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 (250) hide show

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"]
 }

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

@@ -103,25 +103,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"
     }, "Hover")), /* @__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")), /* @__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 hover")), /* @__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", {
@@ -148,25 +148,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"
     }, "Hover")), /* @__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")), /* @__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 hover")), /* @__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", {
@@ -194,13 +194,13 @@
     }, "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: "twitter"
     }), /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-item-text"
     }, "Hover")), /* @__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: "anchor"
     }), /* @__PURE__ */ import_react.default.createElement("span", {
@@ -220,15 +220,15 @@
     }), /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-item-text"
     }, "Drawer Link"))), /* @__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("span", {
       className: "k-item-text"
     }, "Selected hover")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-drawer-item k-state-focused"
+      className: "k-drawer-item k-focus"
     }, /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-item-text"
     }, "Focus")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-drawer-item k-state-selected k-state-focused"
+      className: "k-drawer-item k-selected k-focus"
     }, /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-item-text"
     }, "Selected focus")), /* @__PURE__ */ import_react.default.createElement("li", {
@@ -292,13 +292,13 @@
     }, "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: "twitter"
     }), /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-item-text"
     }, "Hover")), /* @__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: "anchor"
     }), /* @__PURE__ */ import_react.default.createElement("span", {
@@ -318,15 +318,15 @@
     }), /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-item-text"
     }, "Drawer Link"))), /* @__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("span", {
       className: "k-item-text"
     }, "Selected hover")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-drawer-item k-state-focused"
+      className: "k-drawer-item k-focus"
     }, /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-item-text"
     }, "Focus")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-drawer-item k-state-selected k-state-focused"
+      className: "k-drawer-item k-selected k-focus"
     }, /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-item-text"
     }, "Selected focus")), /* @__PURE__ */ import_react.default.createElement("li", {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/drawer/tests/drawer-rtl.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 h2 {\n        text-align: center;\n        grid-column-start: 1;\n        grid-column-end: 3;\n        margin: 0;\n    }\n`;\n\nroot.render(\n    <>\n        <style>{styles}</style>\n        <div id=\"test-area\" className=\"k-d-grid k-grid-cols-2\">\n            <h2>Drawer Push Mode</h2>\n            <section className=\"k-rtl\">\n                <h4>Drawer mini left</h4>\n                <div className=\"k-drawer-container k-drawer-left k-drawer-push k-drawer-mini 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\">Hover</span>\n                                    </li>\n                                    <li className=\"k-drawer-item k-state-selected\">\n                                        <Icon name=\"star-outline\" />\n                                        <span className=\"k-item-text\">Selected</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 hover</span>\n                                    </li>\n                                    <li className=\"k-drawer-item k-state-focused\">\n                                        <Icon name=\"star-outline\" />\n                                        <span className=\"k-item-text\">Focus</span>\n                                    </li>\n                                </ul>\n                            </div>\n                        </div>\n                    </div>\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            </section>\n\n            <section className=\"k-rtl\">\n                <h4> Drawer mini right</h4>\n                <div className=\"k-drawer-container k-drawer-right k-drawer-push k-drawer-mini 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\">Hover</span>\n                                    </li>\n                                    <li className=\"k-drawer-item k-state-selected\">\n                                        <Icon name=\"star-outline\" />\n                                        <span className=\"k-item-text\">Selected</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 hover</span>\n                                    </li>\n                                    <li className=\"k-drawer-item k-state-focused\">\n                                        <Icon name=\"star-outline\" />\n                                        <span className=\"k-item-text\">Focus</span>\n                                    </li>\n                                </ul>\n                            </div>\n                        </div>\n                    </div>\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            </section>\n\n\n            <section className=\"k-rtl\">\n                <h4>Drawer left</h4>\n                <div className=\"k-drawer-container k-drawer-left k-drawer-push k-drawer-expanded\">\n                    <div className=\"k-widget k-drawer\">\n                        <div className=\"k-drawer-wrapper\" style={{ width: \"280px\" }}>\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=\"twitter\" />\n                                        <span className=\"k-item-text\">Hover</span>\n                                    </li>\n                                    <li className=\"k-drawer-item k-state-selected\">\n                                        <Icon name=\"anchor\" />\n                                        <span className=\"k-item-text\">Selected</span>\n                                    </li>\n                                    <li className=\"k-drawer-item\">\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\">\n                                        <span className=\"k-drawer-link\">\n                                            <Icon name=\"anchor\" />\n                                            <span className=\"k-item-text\">Drawer Link</span>\n                                        </span>\n                                    </li>\n                                    <li className=\"k-drawer-item k-state-selected k-state-hover\">\n                                        <span className=\"k-item-text\">Selected hover</span>\n                                    </li>\n                                    <li className=\"k-drawer-item k-state-focused\">\n                                        <span className=\"k-item-text\">Focus</span>\n                                    </li>\n                                    <li className=\"k-drawer-item k-state-selected k-state-focused\">\n                                        <span className=\"k-item-text\">Selected focus</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-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            </section>\n\n            <section className=\"k-rtl\">\n                <h4>Drawer right</h4>\n                <div className=\"k-drawer-container k-drawer-right k-drawer-push k-drawer-expanded\">\n                    <div className=\"k-widget k-drawer\">\n                        <div className=\"k-drawer-wrapper\" style={{ width: \"280px\" }}>\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=\"twitter\" />\n                                        <span className=\"k-item-text\">Hover</span>\n                                    </li>\n                                    <li className=\"k-drawer-item k-state-selected\">\n                                        <Icon name=\"anchor\" />\n                                        <span className=\"k-item-text\">Selected</span>\n                                    </li>\n                                    <li className=\"k-drawer-item\">\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\">\n                                        <span className=\"k-drawer-link\">\n                                            <Icon name=\"anchor\" />\n                                            <span className=\"k-item-text\">Drawer Link</span>\n                                        </span>\n                                    </li>\n                                    <li className=\"k-drawer-item k-state-selected k-state-hover\">\n                                        <span className=\"k-item-text\">Selected hover</span>\n                                    </li>\n                                    <li className=\"k-drawer-item k-state-focused\">\n                                        <span className=\"k-item-text\">Focus</span>\n                                    </li>\n                                    <li className=\"k-drawer-item k-state-selected k-state-focused\">\n                                        <span className=\"k-item-text\">Selected focus</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-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            </section>\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 h2 {\n        text-align: center;\n        grid-column-start: 1;\n        grid-column-end: 3;\n        margin: 0;\n    }\n`;\n\nroot.render(\n    <>\n        <style>{styles}</style>\n        <div id=\"test-area\" className=\"k-d-grid k-grid-cols-2\">\n            <h2>Drawer Push Mode</h2>\n            <section className=\"k-rtl\">\n                <h4>Drawer mini left</h4>\n                <div className=\"k-drawer-container k-drawer-left k-drawer-push k-drawer-mini 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\">Hover</span>\n                                    </li>\n                                    <li className=\"k-drawer-item k-selected\">\n                                        <Icon name=\"star-outline\" />\n                                        <span className=\"k-item-text\">Selected</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 hover</span>\n                                    </li>\n                                    <li className=\"k-drawer-item k-focus\">\n                                        <Icon name=\"star-outline\" />\n                                        <span className=\"k-item-text\">Focus</span>\n                                    </li>\n                                </ul>\n                            </div>\n                        </div>\n                    </div>\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            </section>\n\n            <section className=\"k-rtl\">\n                <h4> Drawer mini right</h4>\n                <div className=\"k-drawer-container k-drawer-right k-drawer-push k-drawer-mini 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\">Hover</span>\n                                    </li>\n                                    <li className=\"k-drawer-item k-selected\">\n                                        <Icon name=\"star-outline\" />\n                                        <span className=\"k-item-text\">Selected</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 hover</span>\n                                    </li>\n                                    <li className=\"k-drawer-item k-focus\">\n                                        <Icon name=\"star-outline\" />\n                                        <span className=\"k-item-text\">Focus</span>\n                                    </li>\n                                </ul>\n                            </div>\n                        </div>\n                    </div>\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            </section>\n\n\n            <section className=\"k-rtl\">\n                <h4>Drawer left</h4>\n                <div className=\"k-drawer-container k-drawer-left k-drawer-push k-drawer-expanded\">\n                    <div className=\"k-widget k-drawer\">\n                        <div className=\"k-drawer-wrapper\" style={{ width: \"280px\" }}>\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=\"twitter\" />\n                                        <span className=\"k-item-text\">Hover</span>\n                                    </li>\n                                    <li className=\"k-drawer-item k-selected\">\n                                        <Icon name=\"anchor\" />\n                                        <span className=\"k-item-text\">Selected</span>\n                                    </li>\n                                    <li className=\"k-drawer-item\">\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\">\n                                        <span className=\"k-drawer-link\">\n                                            <Icon name=\"anchor\" />\n                                            <span className=\"k-item-text\">Drawer Link</span>\n                                        </span>\n                                    </li>\n                                    <li className=\"k-drawer-item k-selected k-hover\">\n                                        <span className=\"k-item-text\">Selected hover</span>\n                                    </li>\n                                    <li className=\"k-drawer-item k-focus\">\n                                        <span className=\"k-item-text\">Focus</span>\n                                    </li>\n                                    <li className=\"k-drawer-item k-selected k-focus\">\n                                        <span className=\"k-item-text\">Selected focus</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-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            </section>\n\n            <section className=\"k-rtl\">\n                <h4>Drawer right</h4>\n                <div className=\"k-drawer-container k-drawer-right k-drawer-push k-drawer-expanded\">\n                    <div className=\"k-widget k-drawer\">\n                        <div className=\"k-drawer-wrapper\" style={{ width: \"280px\" }}>\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=\"twitter\" />\n                                        <span className=\"k-item-text\">Hover</span>\n                                    </li>\n                                    <li className=\"k-drawer-item k-selected\">\n                                        <Icon name=\"anchor\" />\n                                        <span className=\"k-item-text\">Selected</span>\n                                    </li>\n                                    <li className=\"k-drawer-item\">\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\">\n                                        <span className=\"k-drawer-link\">\n                                            <Icon name=\"anchor\" />\n                                            <span className=\"k-item-text\">Drawer Link</span>\n                                        </span>\n                                    </li>\n                                    <li className=\"k-drawer-item k-selected k-hover\">\n                                        <span className=\"k-item-text\">Selected hover</span>\n                                    </li>\n                                    <li className=\"k-drawer-item k-focus\">\n                                        <span className=\"k-item-text\">Focus</span>\n                                    </li>\n                                    <li className=\"k-drawer-item k-selected k-focus\">\n                                        <span className=\"k-item-text\">Selected focus</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-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            </section>\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.js CHANGED Viewed

@@ -101,25 +101,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"
     }, "Hover")), /* @__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")), /* @__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 hover")), /* @__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", {
@@ -144,25 +144,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"
     }, "Hover")), /* @__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")), /* @__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 hover")), /* @__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", {
@@ -188,13 +188,13 @@
     }, "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: "twitter"
     }), /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-item-text"
     }, "Hover")), /* @__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: "anchor"
     }), /* @__PURE__ */ import_react.default.createElement("span", {
@@ -214,15 +214,15 @@
     }), /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-item-text"
     }, "Drawer Link"))), /* @__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("span", {
       className: "k-item-text"
     }, "Selected hover")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-drawer-item k-state-focused"
+      className: "k-drawer-item k-focus"
     }, /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-item-text"
     }, "Focus")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-drawer-item k-state-selected k-state-focused"
+      className: "k-drawer-item k-selected k-focus"
     }, /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-item-text"
     }, "Selected focus")), /* @__PURE__ */ import_react.default.createElement("li", {
@@ -284,13 +284,13 @@
     }, "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: "twitter"
     }), /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-item-text"
     }, "Hover")), /* @__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: "anchor"
     }), /* @__PURE__ */ import_react.default.createElement("span", {
@@ -310,15 +310,15 @@
     }), /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-item-text"
     }, "Drawer Link"))), /* @__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("span", {
       className: "k-item-text"
     }, "Selected hover")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-drawer-item k-state-focused"
+      className: "k-drawer-item k-focus"
     }, /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-item-text"
     }, "Focus")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-drawer-item k-state-selected k-state-focused"
+      className: "k-drawer-item k-selected k-focus"
     }, /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-item-text"
     }, "Selected focus")), /* @__PURE__ */ import_react.default.createElement("li", {