@king-design/intact 3.1.1-beta.3 → 3.1.2

package/components/tree/demos/contextmenu.md

@@ -3,7 +3,10 @@ title: 右键菜单
 order: 4
 ---
 
-绑定`rightclick:node`并利用`DropdownMenu`可以实现右键菜单来操作节点增删
+利用`label`扩展点，配合`Dropdown`的`contextmenu`触发方式，可以实现右键菜单来操作节点增删
+
+> 当鼠标移动到菜单上时，节点的hover样式将会丢失，但是菜单弹出时，`Dropdown`会给触发元素添加`.k-dropdown-open`的类名，
+> 可以用`:has`选择器来添加hover样式。如本例所示
 
 ```vdt
 import {Tree, Dropdown, DropdownMenu, DropdownItem} from 'kpc';
@@ -26,6 +29,12 @@ import {Tree, Dropdown, DropdownMenu, DropdownItem} from 'kpc';
 </div>
 ```
 
+```styl
+// 鼠标移动到弹出菜单上，依然展示hover样式
+.k-tree-text:has(.k-dropdown-open)
+    background: #f3f5f6
+```
+
 ```ts
 import {bind, Tree, TreeDataItem, TreeNode} from 'kpc';
 

package/components/tree/index.spec.ts

@@ -69,6 +69,13 @@ describe('Tree', () => {
         checkbox3.click();
         await wait();
         expect(element.outerHTML).to.matchSnapshot();
+
+        checkbox4.click();
+        await wait();
+        instance.set<string[]>('checkedKeys', ['floor-2']);
+        await wait();
+        expect(checkbox2.classList.contains('k-checked')).to.be.true;
+        expect(checkbox2.classList.contains('k-indeterminate')).to.be.false;
     });
 
     it('async load', async function() {

package/components/tree/styles.ts

@@ -2,6 +2,7 @@ import {css} from '@emotion/css';
 import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults, palette} from '../../styles/utils';
 import '../../styles/global';
+import { cache } from '../utils';
 
 const defaults = {
     get transition() { return theme.transition.middle },
@@ -37,9 +38,10 @@ const defaults = {
 let tree: typeof defaults;
 setDefault(() => {
     tree = deepDefaults(theme, {tree: defaults}).tree;
+    makeStyles?.clearCache();
 });
 
-export function makeStyles(k: string) {
+export const makeStyles = cache(function makeStyles(k: string) {
     return css`
         font-size: ${tree.fontSize};
         line-height: ${tree.lineHeight};
@@ -151,4 +153,4 @@ export function makeStyles(k: string) {
             border-left: ${tree.line} 
         }
     `;
-}
+});

package/components/tree/useChecked.ts

@@ -38,6 +38,9 @@ export function useChecked(getNodes: () => Node<Key>[]) {
                 }
 
                 node.checked = checked;
+                if (checked) {
+                    node.indeterminate = false;
+                }
 
                 if (shouldUpdateCheckedKeys) {
                     updateCheckedKeys(node);

package/components/treeSelect/styles.ts

@@ -2,6 +2,7 @@ import {css} from '@emotion/css';
 import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults, palette} from '../../styles/utils';
 import '../../styles/global';
+import { cache } from '../utils';
 
 const defaults = {
     get transition() { return theme.transition.middle },
@@ -12,9 +13,10 @@ const defaults = {
 let treeSelect: typeof defaults;
 setDefault(() => {
     treeSelect = deepDefaults(theme, {treeSelect: defaults}).treeSelect;
+    makeStyles?.clearCache();
 });
 
-export function makeStyles(k: string) {
+export const makeStyles = cache(function makeStyles(k: string) {
     return css`
         min-width: auto;
         max-height: ${treeSelect.maxHeight};
@@ -24,4 +26,4 @@ export function makeStyles(k: string) {
             transition: left ${treeSelect.transition}, top ${treeSelect.transition};
         }
     `;
-}
+});

package/components/upload/styles.ts

@@ -2,6 +2,7 @@ import {css} from '@emotion/css';
 import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults, palette} from '../../styles/utils';
 import '../../styles/global';
+import { cache } from '../utils';
 
 const defaults = {
     get transition() { return theme.transition.middle },
@@ -75,9 +76,11 @@ const defaults = {
 let upload: typeof defaults;
 setDefault(() => {
     upload = deepDefaults(theme, {upload: defaults}).upload;
+    makeStyles?.clearCache();
+    makeUploadDialogStyles?.clearCache();
 });
 
-export function makeStyles(k: string) {
+export const makeStyles = cache(function makeStyles(k: string) {
     return css`
         font-size: ${upload.fontSize};
         position: relative;
@@ -254,12 +257,12 @@ export function makeStyles(k: string) {
             }
         }
     `;
-}
+});
 
-export function makeUploadDialogStyles(k: string) {
+export const makeUploadDialogStyles = cache(function makeUploadDialogStyles(k: string) {
     return css`
         img {
             width: 100%;
         }
     `
-}
+});

package/components/utils.ts

@@ -95,15 +95,21 @@ export function addStyle(style: string | Record<string, string | null> | undefin
     return style;
 }
 
-const _cache: Record<string, string> = {};
-export function cache(callback: (...args: string[]) => any) {
-    return function(...args: string[]) {
+type CacheArgType = number | string | boolean | undefined;
+type CacheFunction<T extends CacheArgType[]> = (...args: T) => any;
+export function cache<T extends CacheArgType[]>(callback: CacheFunction<T>) {
+    let _cache: Record<string, string> = {};
+    const fn = function(...args: T) {
         const cacheId = args.join('~');
         if (!hasOwn.call(_cache, cacheId)) {
             _cache[cacheId] = callback(...args); 
         }
         return _cache[cacheId];
-    }
+    };
+
+    fn.clearCache = () => _cache = {};
+
+    return fn;
 }
 const uppercasePattern = /[A-Z]/g;
 export const kebabCase = cache((word: string) => {

package/components/wave/styles.ts

@@ -2,6 +2,7 @@ import {css, keyframes} from '@emotion/css';
 import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults, palette} from '../../styles/utils';
 import '../../styles/global';
+import { cache } from '../utils';
 
 const defaults = {
     inset: '-3px',
@@ -10,9 +11,10 @@ const defaults = {
 let wave: typeof defaults;
 setDefault(() => {
     wave = deepDefaults(theme, {wave: defaults}).wave;
+    makeStyles?.clearCache();
 });
 
-export function makeStyles(color: string, inset: string, k: string) {
+export const makeStyles = cache(function makeStyles(color: string, inset: string, k: string) {
     const waveEffect = keyframes`
         100% {
             top: calc(${inset} + ${wave.inset});
@@ -48,4 +50,4 @@ export function makeStyles(color: string, inset: string, k: string) {
             }
         }
     `;
-}
+});

package/es/components/affix/styles.d.ts

@@ -1,2 +1,5 @@
 import '../../styles/global';
-export declare function makeStyles(k: string): string;
+export declare const makeStyles: {
+    (k: string): string;
+    clearCache(): {};
+};

package/es/components/affix/styles.js

@@ -2,6 +2,7 @@ import { css } from '@emotion/css';
 import { theme, setDefault } from '../../styles/theme';
 import { deepDefaults } from '../../styles/utils';
 import '../../styles/global';
+import { cache } from '../utils';
 var defaults = {
   zIndex: 9
 };
@@ -10,7 +11,8 @@ setDefault(function () {
   affix = deepDefaults(theme, {
     affix: defaults
   }).affix;
+  makeStyles == null ? void 0 : makeStyles.clearCache();
 });
-export function makeStyles(k) {
+export var makeStyles = cache(function makeStyles(k) {
   return /*#__PURE__*/css("position:relative;z-index:", affix.zIndex, ";");
-}
+});

package/es/components/badge/index.vdt.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 import { createVNode as _$cv, className as _$cn, createElementVNode as _$ce } from 'intact';
 import { getRestProps } from '../utils';
-import makeStyles from './styles';
+import { makeStyles } from './styles';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
 

package/es/components/badge/styles.d.ts

@@ -1,2 +1,5 @@
 import '../../styles/global';
-export default function makeStyles(k: string): string;
+export declare const makeStyles: {
+    (k: string): string;
+    clearCache(): {};
+};

package/es/components/badge/styles.js

@@ -2,6 +2,7 @@ import { css } from '@emotion/css';
 import { theme, setDefault } from '../../styles/theme';
 import { deepDefaults } from '../../styles/utils';
 import '../../styles/global';
+import { cache } from '../utils';
 var defaults = {
   width: '8px',
 
@@ -20,7 +21,8 @@ setDefault(function () {
   badge = deepDefaults(theme, {
     badge: defaults
   }).badge;
+  makeStyles == null ? void 0 : makeStyles.clearCache();
 });
-export default function makeStyles(k) {
+export var makeStyles = cache(function makeStyles(k) {
   return /*#__PURE__*/css("display:inline-block;position:relative;vertical-align:middle;>.", k, "-badge-text{display:inline-block;position:absolute;width:", badge.width, ";height:", badge.height, ";border-radius:50%;top:0;right:0;transform:translate(50%, -50%);background:", badge.bgColor, ";font-size:85%;vertical-align:baseline;}&.", k, "-has-text>.", k, "-badge-text{width:auto;height:", badge.textHeight, ";line-height:", badge.textHeight, ";border-radius:calc(", badge.textHeight, " / 2);padding:0 ", badge.textPadding, ";color:", badge.textColor, ";}&.", k, "-alone>.", k, "-badge-text{position:static;transform:none;}");
-}
+});

package/es/components/breadcrumb/index.vdt.js

@@ -3,7 +3,7 @@ import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/spl
 import { createElementVNode as _$ce, noop as _$no, className as _$cn, createVNode as _$cv } from 'intact';
 import { getRestProps, mapChildren } from '../utils';
 import { BreadcrumbItem } from './item';
-import makeStyles from './styles';
+import { makeStyles } from './styles';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
 

package/es/components/breadcrumb/styles.d.ts

@@ -1,2 +1,5 @@
 import '../../styles/global';
-export default function makeStyles(k: string): string;
+export declare const makeStyles: {
+    (k: string): string;
+    clearCache(): {};
+};

package/es/components/breadcrumb/styles.js

@@ -2,6 +2,7 @@ import { css } from '@emotion/css';
 import { deepDefaults } from '../../styles/utils';
 import { theme, setDefault } from '../../styles/theme';
 import '../../styles/global';
+import { cache } from '../utils';
 var defaults = {
   fontSize: '14px',
 
@@ -22,7 +23,8 @@ setDefault(function () {
   breadcrumb = deepDefaults(theme, {
     breadcrumb: defaults
   }).breadcrumb;
+  makeStyles == null ? void 0 : makeStyles.clearCache();
 });
-export default function makeStyles(k) {
+export var makeStyles = cache(function makeStyles(k) {
   return /*#__PURE__*/css("font-size:", breadcrumb.fontSize, ";display:flex;align-items:center;.", k, "-breadcrumb-item{&:last-of-type .", k, "-breadcrumb-link{font-weight:", breadcrumb.activeFontWeight, ";color:", breadcrumb.activeColor, ";}}.", k, "-breadcrumb-link,.", k, "-breadcrumb-link a{color:", breadcrumb.color, ";}a.", k, "-breadcrumb-link,.", k, "-breadcrumb-link a{cursor:pointer;&:hover{color:", breadcrumb.hoverColor, ";}}.", k, "-breadcrumb-separator{margin:0 ", breadcrumb.gap, ";}");
-}
+});

package/es/components/button/styles.d.ts

@@ -83,5 +83,11 @@ declare const defaults: {
 };
 declare let button: typeof defaults;
 export { button };
-export declare function makeButtonStyles(k: string, iconSide?: string): string;
-export declare function makeButtonGroupStyles(k: string): string;
+export declare const makeButtonStyles: {
+    (k: string, iconSide?: string | undefined): string;
+    clearCache(): {};
+};
+export declare const makeButtonGroupStyles: {
+    (k: string): string;
+    clearCache(): {};
+};

package/es/components/button/styles.js

@@ -3,6 +3,7 @@ import { css, cx } from '@emotion/css';
 import { theme, setDefault } from '../../styles/theme';
 import { deepDefaults, palette, getLeft, darken } from '../../styles/utils';
 import '../../styles/global';
+import { cache } from '../utils';
 export var types = ['primary', 'warning', 'danger', 'active', 'success'];
 var sizes = ['large', 'small', 'mini'];
 var btnStyles = {
@@ -230,9 +231,11 @@ setDefault(function () {
   button = deepDefaults(theme, {
     button: defaults
   }).button;
+  makeButtonStyles == null ? void 0 : makeButtonStyles.clearCache();
+  makeButtonGroupStyles == null ? void 0 : makeButtonGroupStyles.clearCache();
 });
 export { button };
-export function makeButtonStyles(k, iconSide) {
+export var makeButtonStyles = cache(function makeButtonStyles(k, iconSide) {
   var _button = button,
       secondary = _button.secondary,
       link = _button.link;
@@ -259,8 +262,8 @@ export function makeButtonStyles(k, iconSide) {
   css(".", k, "-icon{", iconSide === 'right' ? "margin-left: " + button.icon.gap + ";" : "margin-right: " + button.icon.gap + ";", ";}", !iconSide && /*#__PURE__*/css("&.", k, "-loading{&:not(.", k, "-btn-icon){padding-left:calc(", getLeft(button.padding), " + 1em);", _mapInstanceProperty(sizes).call(sizes, function (size) {
     return /*#__PURE__*/css("&.", k, "-", size, "{padding-left:calc(", getLeft(button[size].padding), " + 1em);}");
   }), ";.", k, "-icon-loading{margin-left:-1em;}}}"), ";"));
-}
-export function makeButtonGroupStyles(k) {
+});
+export var makeButtonGroupStyles = cache(function makeButtonGroupStyles(k) {
   return /*#__PURE__*/css("display:inline-flex;align-items:center;flex-wrap:wrap;vertical-align:middle;.", k, "-btn{margin:0;vertical-align:middle;&:hover,&:focus,&.", k, "-active{z-index:1;position:relative;}}&.", k, "-fluid{width:100%;}&:not(.", k, "-vertical){>.", k, "-btn{", _mapInstanceProperty(types).call(types, function (type) {
     if (type === 'active') return;
     var borderColor = button.group[type].borderColor;
@@ -270,4 +273,4 @@ export function makeButtonGroupStyles(k) {
     var borderColor = button.group[type].borderColor;
     return /*#__PURE__*/css("&.", k, "-", type, ":not(:first-child){border-top-color:", borderColor, ";}&.", k, "-", type, ":not(:last-child){border-bottom-color:", borderColor, ";}");
   }), ";&:not(.", k, "-btn-icon){width:100%;}&:not(:first-child){margin-top:-1px;&:not(:last-child){border-radius:0;}}&:not(:only-child):first-child{border-bottom-left-radius:0;border-bottom-right-radius:0;}&:not(:only-child):last-child{border-top-left-radius:0;border-top-right-radius:0;}}}&.", k, "-seperate{gap:8px;>.", k, "-btn{border-radius:", button.borderRadius, "!important;}}");
-}
+});

package/es/components/card/styles.d.ts

@@ -1,2 +1,5 @@
 import '../../styles/global';
-export declare function makeStyles(k: string): string;
+export declare const makeStyles: {
+    (k: string): string;
+    clearCache(): {};
+};

package/es/components/card/styles.js

@@ -2,6 +2,7 @@ import { css } from '@emotion/css';
 import { theme, setDefault } from '../../styles/theme';
 import { deepDefaults } from '../../styles/utils';
 import '../../styles/global';
+import { cache } from '../utils';
 var defaults = {
   border: '1px solid #e5e5e5',
   padding: '16px',
@@ -23,7 +24,8 @@ setDefault(function () {
   card = deepDefaults(theme, {
     card: defaults
   }).card;
+  makeStyles == null ? void 0 : makeStyles.clearCache();
 });
-export function makeStyles(k) {
+export var makeStyles = cache(function makeStyles(k) {
   return /*#__PURE__*/css("border-radius:", card.borderRadius, ";background:", card.bgColor, ";.", k, "-card-header{height:", card.headerHeight, ";line-height:", card.headerHeight, ";padding:0 ", card.padding, ";}.", k, "-card-title{font-size:", card.headerFontSize, ";display:inline-block;}.", k, "-card-extra{float:right;height:100%;display:flex;align-items:center;}.", k, "-card-body{padding:0 ", card.padding, " ", card.padding, ";}&.", k, "-shadow{box-shadow:", card.boxShadow, ";}&.", k, "-none{box-shadow:none;}&.", k, "-border{border:", card.border, ";.", k, "-card-header{border-bottom:", card.border, ";}.", k, "-card-body{padding-top:", card.padding, ";}}&.", k, "-no-header{.", k, "-card-body{padding-top:", card.padding, ";}}&.", k, "-card-grid{.", k, "-card-body{display:flex;padding:0;}&.", k, "-border{.", k, "-card-column:not(:last-of-type){border-right:", card.border, ";}}}.", k, "-card-column{display:flex;align-items:center;padding:", card.padding, ";&.", k, "-fluid{flex:1;}&.", k, "-center{justify-content:center;}}");
-}
+});

package/es/components/carousel/styles.d.ts

@@ -1,3 +1,9 @@
 import '../../styles/global';
-export declare function makeStyles(k: string): string;
-export declare function makeItemStyles(k: string): string;
+export declare const makeStyles: {
+    (k: string): string;
+    clearCache(): {};
+};
+export declare const makeItemStyles: {
+    (k: string): string;
+    clearCache(): {};
+};

package/es/components/carousel/styles.js

@@ -2,6 +2,7 @@ import { css } from '@emotion/css';
 import { theme, setDefault } from '../../styles/theme';
 import { deepDefaults } from '../../styles/utils';
 import '../../styles/global';
+import { cache } from '../utils';
 var defaults = {
   get transition() {
     return theme.transition.large;
@@ -38,10 +39,12 @@ setDefault(function () {
   carousel = deepDefaults(theme, {
     carousel: defaults
   }).carousel;
+  makeStyles == null ? void 0 : makeStyles.clearCache();
+  makeItemStyles == null ? void 0 : makeItemStyles.clearCache();
 });
-export function makeStyles(k) {
+export var makeStyles = cache(function makeStyles(k) {
   return /*#__PURE__*/css("height:", carousel.height, ";position:relative;overflow:hidden;.", k, "-carousel-indicator{position:absolute;left:50%;transform:translateX(-50%);bottom:", carousel.indicator.bottom, ";}.", k, "-carousel-dot{height:", carousel.indicator.height, ";float:left;margin:", carousel.dot.margin, ";cursor:pointer;padding-top:", carousel.dot.paddingTop, ";&:before{content:'';display:block;width:", carousel.dot.width, ";height:", carousel.dot.height, ";background:", carousel.dot.bgColor, ";opacity:", carousel.dot.opacity, ";transition:width ", carousel.transition, ";}&.", k, "-active:before{opacity:", carousel.dot.active.opacity, ";width:", carousel.dot.active.width, ";}}.", k, "-carousel-btn{position:absolute;background:", carousel.arrow.bgColor, "!important;top:50%;transform:translateY(-50%);color:", carousel.arrow.color, ";opacity:", carousel.arrow.opacity, ";&:hover{color:#fff;opacity:", carousel.arrow.hoverOpacity, "!important;background:", carousel.arrow.bgColor, ";}&.", k, "-prev{left:", carousel.arrow.left, ";}&.", k, "-next{right:", carousel.arrow.right, ";}}&.", k, "-hover{.", k, "-carousel-btn{opacity:0;}&:hover{.", k, "-carousel-btn{opacity:", carousel.arrow.opacity, ";}}}&.", k, "-never{.", k, "-carousel-btn{display:none;}}&.", k, "-slide{.", k, "-carousel-wrapper{transition:transform ", carousel.transition, ";white-space:nowrap;}}&.", k, "-stop{.", k, "-carousel-wrapper{transition:none;}}&.", k, "-fade{.", k, "-carousel-item{position:absolute;}}");
-}
-export function makeItemStyles(k) {
+});
+export var makeItemStyles = cache(function makeItemStyles(k) {
   return /*#__PURE__*/css("display:inline-block;width:100%;height:100%;&.", k, "-carousel-fade-enter-active,&.", k, "-carousel-fade-leave-active{transition:opacity ", carousel.transition, ";}&.", k, "-carousel-fade-enter-from,&.", k, "-carousel-fade-leave-to{opacity:0;}");
-}
+});

package/es/components/cascader/index.vdt.js

@@ -18,7 +18,8 @@ export default function ($props, $blocks, $__proto__) {
       data = _this$get.data,
       trigger = _this$get.trigger,
       filterable = _this$get.filterable,
-      fields = _this$get.fields;
+      fields = _this$get.fields,
+      multiple = _this$get.multiple;
 
   var k = this.config.k;
   var baseMenuStyles = makeMenuStyles(k);
@@ -57,6 +58,7 @@ export default function ($props, $blocks, $__proto__) {
           'disabled': getField(item, 'disabled'),
           'className': _$cn((_$cn2 = {}, _$cn2[k + "-cascader-option"] = true, _$cn2[k + "-active"] = showed, _$cn2[k + "-selected"] = selected, _$cn2)),
           'ev-select': onSelect.bind(null, value, level),
+          'hideOnSelect': !multiple,
           'children': [getField(item, 'label'), children ? _$cc(Icon, {
             'className': _$cn(k + "-cascader-arrow " + k + "-icon-right")
           }) : undefined]

package/es/components/cascader/styles.d.ts

@@ -1,3 +1,9 @@
 import '../../styles/global';
-export declare function makeMenuStyles(k: string): string;
-export declare function makeFilterMenuStyles(k: string): string;
+export declare const makeMenuStyles: {
+    (k: string): string;
+    clearCache(): {};
+};
+export declare const makeFilterMenuStyles: {
+    (k: string): string;
+    clearCache(): {};
+};

package/es/components/cascader/styles.js

@@ -3,6 +3,7 @@ import { css } from '@emotion/css';
 import { theme, setDefault } from '../../styles/theme';
 import { deepDefaults } from '../../styles/utils';
 import '../../styles/global';
+import { cache } from '../utils';
 var defaults = {
   width: '140px',
   height: '160px',
@@ -41,10 +42,12 @@ setDefault(function () {
   cascader = deepDefaults(theme, {
     cascader: defaults
   }).cascader;
+  makeMenuStyles == null ? void 0 : makeMenuStyles.clearCache();
+  makeFilterMenuStyles == null ? void 0 : makeFilterMenuStyles.clearCache();
 });
-export function makeMenuStyles(k) {
+export var makeMenuStyles = cache(function makeMenuStyles(k) {
   return /*#__PURE__*/css("min-width:", cascader.width, "!important;height:", cascader.height, ";overflow:auto;.", k, "-cascader-arrow{float:right;height:100%;margin-left:", cascader.arrowGap, ";line-height:inherit;}.", k, "-cascader-loading{display:block;text-align:center;margin-top:", cascader.loadingGap, ";}.", k, "-cascader-empty{padding:", cascader.empty.padding, ";color:", cascader.empty.color, ";text-align:center;}.", k, "-cascader-option{&.", k, "-selected{color:", cascader.selectedColor, ";}&.", k, "-active{background:", cascader.activeBgColor, ";}}");
-}
-export function makeFilterMenuStyles(k) {
+});
+export var makeFilterMenuStyles = cache(function makeFilterMenuStyles(k) {
   return /*#__PURE__*/css("min-width:", _filterInstanceProperty(cascader).minWidth, "!important;height:auto;max-height:", _filterInstanceProperty(cascader).maxHeight, ";em{font-style:normal;color:", _filterInstanceProperty(cascader).highlightColor, ";}");
-}
+});

package/es/components/checkbox/index.vdt.js

@@ -3,7 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime-corejs3/helpers/object
 var _excluded = ["className", "disabled", "falseValue", "children", "value", "trueValue", "style", "indeterminate", "title"];
 import { createVNode as _$cv, className as _$cn, createUnknownComponentVNode as _$cc, createElementVNode as _$ce } from 'intact';
 import { getRestProps } from '../utils';
-import makeStyles from './styles';
+import { makeStyles } from './styles';
 import { Wave } from '../wave';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;

package/es/components/checkbox/styles.d.ts

@@ -1,2 +1,5 @@
 import '../../styles/global';
-export default function makeStyles(k: string): string;
+export declare const makeStyles: {
+    (k: string): string;
+    clearCache(): {};
+};

package/es/components/checkbox/styles.js

@@ -2,6 +2,7 @@ import { css } from '@emotion/css';
 import { theme, setDefault } from '../../styles/theme';
 import { deepDefaults, palette } from '../../styles/utils';
 import '../../styles/global';
+import { cache } from '../utils';
 var defaults = {
   width: '16px',
 
@@ -76,7 +77,8 @@ setDefault(function () {
   checkbox = deepDefaults(theme, {
     checkbox: defaults
   }).checkbox;
+  makeStyles == null ? void 0 : makeStyles.clearCache();
 });
-export default function makeStyles(k) {
+export var makeStyles = cache(function makeStyles(k) {
   return /*#__PURE__*/css("display:inline-flex;align-items:center;cursor:pointer;vertical-align:middle;.", k, "-checkbox-wrapper{width:", checkbox.width, ";height:", checkbox.width, ";border:1px solid ", checkbox.borderColor, ";border-radius:", checkbox.borderRadius, ";position:relative;transition:all ", checkbox.transition, ";background:", checkbox.bgColor, ";flex:0 0 auto;&:before{content:\"\";display:block;position:absolute;width:", checkbox.inner.width, ";height:", checkbox.inner.height, ";top:", checkbox.inner.top, ";left:", checkbox.inner.left, ";border:", checkbox.inner.border, ";border-top:0;border-left:0;transform:rotate(45deg) scale(0);transition:all ", checkbox.transition, ";}}&:hover{.", k, "-checkbox-wrapper{border:", checkbox.hoverBorder, ";}}input{width:100%;height:100%;opacity:0;cursor:pointer;position:absolute;left:0;top:0;margin:0;}.", k, "-checkbox-text{margin-left:", checkbox.text.gap, ";flex:0 1 auto;}&.", k, "-checked,&.", k, "-indeterminate{.", k, "-checkbox-wrapper{border-color:", checkbox.checked.borderColor, ";background:", checkbox.checked.bgColor, ";}}&.", k, "-indeterminate{.", k, "-checkbox-wrapper{&:before{transform:rotate(90deg) scale(1);border-bottom:0;}}}&.", k, "-checked{.", k, "-checkbox-wrapper{&:before{transform:rotate(45deg) scale(1);}}}&:focus{outline:none;.", k, "-checkbox-wrapper{border-color:", checkbox.checked.borderColor, ";}}&.", k, "-disabled{color:", checkbox.disabled.color, ";cursor:not-allowed;.", k, "-checkbox-wrapper{border-color:", checkbox.disabled.borderColor, ";background:", checkbox.disabled.bgColor, ";&:before{border-color:", checkbox.disabled.innerColor, ";}}input{cursor:not-allowed;}&.", k, "-checked,&.", k, "-indeterminate{.", k, "-checkbox-wrapper{border-color:", checkbox.disabled.checked.borderColor, ";background:", checkbox.disabled.checked.bgColor, ";}}}");
-}
+});

package/es/components/code/styles.d.ts

@@ -1,2 +1,5 @@
 import '../../styles/global';
-export declare function makeStyles(k: string): string;
+export declare const makeStyles: {
+    (k: string): string;
+    clearCache(): {};
+};

package/es/components/code/styles.js

@@ -2,7 +2,8 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 
 import { css } from '@emotion/css';
 import '../../styles/global';
-export function makeStyles(k) {
+import { cache } from '../utils';
+export var makeStyles = cache(function makeStyles(k) {
   return /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
     name: "1wv4onu",
     styles: "position:relative;height:100%"
@@ -11,4 +12,4 @@ export function makeStyles(k) {
     styles: "position:relative;height:100%",
     toString: _EMOTION_STRINGIFIED_CSS_ERROR__
   });
-}
+});

package/es/components/collapse/index.spec.js

@@ -16,7 +16,7 @@ describe('Collapse', function () {
           case 0:
             this.timeout(0);
             _mount = mount(BasicDemo), instance = _mount[0], element = _mount[1];
-            _element$querySelecto = element.querySelectorAll('.k-collapse-title'), title1 = _element$querySelecto[0], title2 = _element$querySelecto[1], title3 = _element$querySelecto[2];
+            _element$querySelecto = element.querySelectorAll(':scope > .k-collapse-item > .k-collapse-title'), title1 = _element$querySelecto[0], title2 = _element$querySelecto[1], title3 = _element$querySelecto[2];
             title2.click();
             _context.next = 6;
             return wait(500);

package/es/components/collapse/styles.d.ts

@@ -1,3 +1,9 @@
 import '../../styles/global';
-export declare function makeStyles(k: string): string;
-export declare function makeItemStyles(k: string): string;
+export declare const makeStyles: {
+    (k: string): string;
+    clearCache(): {};
+};
+export declare const makeItemStyles: {
+    (k: string): string;
+    clearCache(): {};
+};

package/es/components/collapse/styles.js

@@ -2,6 +2,7 @@ import { deepDefaults } from '../../styles/utils';
 import { theme, setDefault } from '../../styles/theme';
 import { css } from '@emotion/css';
 import '../../styles/global';
+import { cache } from '../utils';
 var defaults = {
   get transition() {
     return theme.transition.large;
@@ -26,11 +27,13 @@ setDefault(function () {
   collapse = deepDefaults(theme, {
     collapse: defaults
   }).collapse;
+  makeStyles == null ? void 0 : makeStyles.clearCache();
+  makeItemStyles == null ? void 0 : makeItemStyles.clearCache();
 });
-export function makeStyles(k) {
+export var makeStyles = cache(function makeStyles(k) {
   return /*#__PURE__*/css("font-size:", collapse.fontSize, ";&.", k, "-left{.", k, "-collapse-arrow{float:left;margin-right:", collapse.titleMarginRight, ";}}&.", k, "-border{border-radius:", collapse.borderRadius, ";padding:", collapse.borderPadding, ";border:", collapse.collBorder, ";}");
-}
-export function makeItemStyles(k) {
+});
+export var makeItemStyles = cache(function makeItemStyles(k) {
   var collapseItem = collapse.item;
   return /*#__PURE__*/css("border-bottom:", collapseItem.borderBottom, ";&:last-of-type{border-bottom-color:transparent;}>.", k, "-collapse-title{cursor:pointer;font-weight:bold;height:", collapseItem.titleHeight, ";line-height:", collapseItem.titleHeight, ";transition:color ", collapse.transition, ";.", k, "-collapse-arrow{float:right;transition:transform ", collapse.transition, ";line-height:", collapseItem.titleHeight, ";height:", collapseItem.titleHeight, ";}}&:not(.", k, "-disabled){>.", k, "-collapse-title{&:hover{color:", theme.color.primary, ";}}}&.", k, "-active{>.", k, "-collapse-title .", k, "-collapse-arrow{transform:rotate(90deg);}}&.", k, "-disabled{color:", theme.color.disabledBorder, ";>.", k, "-collapse-title{cursor:not-allowed;}}");
-}
+});

package/es/components/colorpicker/styles.d.ts

@@ -1,5 +1,11 @@
 import '../../styles/global';
 import { ColorFormats } from 'tinycolor2';
-export declare function makeStyles(k: string): string;
-export declare function makePanelStyles(k: string): string;
+export declare const makeStyles: {
+    (k: string): string;
+    clearCache(): {};
+};
+export declare const makePanelStyles: {
+    (k: string): string;
+    clearCache(): {};
+};
 export declare function makeAlphaBgColor({ r, g, b }: ColorFormats.RGBA, k: string): string;