@king-design/intact 3.1.1 → 3.1.3

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(':scope > .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/item.vdt.js

@@ -27,7 +27,7 @@ export default function ($props, $blocks, $__proto__) {
   var classNameObj = (_classNameObj = {}, _classNameObj[k + "-collapse-item"] = true, _classNameObj[makeItemStyles(k)] = true, _classNameObj[className] = className, _classNameObj[k + "-active"] = isActive, _classNameObj[k + "-disabled"] = disabled, _classNameObj);
   return _$cv('div', _extends({
     'className': _$cn(classNameObj)
-  }, getRestProps(this)), [_$ce(2, 'div', [(_$blocks['title'] = function ($super) {
+  }, getRestProps(this)), [_$ce(2, 'div', [_$ce(2, 'div', (_$blocks['title'] = function ($super) {
     return title;
   }, __$blocks['title'] = function ($super, data) {
     var block = $blocks['title'];
@@ -37,11 +37,11 @@ export default function ($props, $blocks, $__proto__) {
     };
 
     return block ? block.call($this, callBlock, data) : callBlock();
-  }, __$blocks['title'](_$no)), _$cc(Icon, {
+  }, __$blocks['title'](_$no)), 0, _$cn(k + "-collapse-title-wrapper")), _$cc(Icon, {
     'className': _$cn((_$cn2 = {}, _$cn2[k + "-collapse-arrow"] = true, _$cn2[k + "-icon-right"] = true, _$cn2)),
     'hoverable': true,
     'disabled': disabled
-  })], 0, _$cn(k + "-collapse-title"), {
+  })], 4, _$cn(k + "-collapse-title"), {
     'ev-click': this.toggle
   }), _$cc(Transition, _extends({
     'show': isActive

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,13 +2,13 @@ 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;
   },
 
   fontSize: '12px',
-  titleMarginRight: '8px',
   borderPadding: '0 24px',
   collBorder: '1px solid #eee',
 
@@ -18,7 +18,8 @@ var defaults = {
 
   item: {
     borderBottom: '1px solid #e5e5e5',
-    titleHeight: '40px'
+    titleHeight: '40px',
+    titleGap: '8px'
   }
 };
 var collapse;
@@ -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) {
-  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 makeStyles = cache(function makeStyles(k) {
+  return /*#__PURE__*/css("font-size:", collapse.fontSize, ";&.", k, "-left{>.", k, "-collapse-item>.", k, "-collapse-title{flex-direction:row-reverse;}}&.", k, "-border{border-radius:", collapse.borderRadius, ";padding:", collapse.borderPadding, ";border:", collapse.collBorder, ";}");
+});
+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;}}");
-}
+  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, ";transition:color ", collapse.transition, ";display:flex;align-items:center;gap:", collapseItem.titleGap, ";.", k, "-collapse-title-wrapper{flex:1;}.", k, "-collapse-arrow{transition:transform ", collapse.transition, ";}}&: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;

package/es/components/colorpicker/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 = {
   get height() {
     return theme.default.height;
@@ -114,17 +115,19 @@ setDefault(function () {
   colorpicker = deepDefaults(theme, {
     colorpicker: defaults
   }).colorpicker;
+  makeStyles == null ? void 0 : makeStyles.clearCache();
+  makePanelStyles == null ? void 0 : makePanelStyles.clearCache();
 });
 var _sizes = ['large', 'small', 'mini'];
-export function makeStyles(k) {
+export var makeStyles = cache(function makeStyles(k) {
   return /*#__PURE__*/css("display:inline-block;vertical-align:middle;.", k, "-colorpicker-color{height:", colorpicker.height, ";width:", colorpicker.width, ";border:", colorpicker.border, ";cursor:", colorpicker.cursor, ";border-radius:", colorpicker.borderRadius, ";background:", colorpicker.bgColor, ";padding:", colorpicker.padding, ";}.", k, "-colorpicker-inner{border-radius:", colorpicker.innerBorderRadius, ";height:100%;}", _mapInstanceProperty(_sizes).call(_sizes, function (size) {
     var styles = colorpicker[size];
     return /*#__PURE__*/css("&.", k, "-", size, "{.", k, "-colorpicker-color{height:", styles.height, ";width:", styles.width, ";", styles.padding && "padding: " + styles.padding, ";}}");
   }), "&.", k, "-disabled{.", k, "-colorpicker-color{background:", colorpicker.disabled.bgColor, ";border-color:", colorpicker.disabled.borderColor, ";cursor:", colorpicker.disabled.cursor, ";}}");
-}
-export function makePanelStyles(k) {
+});
+export var makePanelStyles = cache(function makePanelStyles(k) {
   return /*#__PURE__*/css("padding:", colorpicker.panel.padding, ";width:", colorpicker.panel.width, ";.", k, "-colorpicker-saturation{height:", colorpicker.panel.saturationHeight, ";position:relative;overflow:hidden;user-select:none;}.", k, "-colorpicker-white,.", k, "-colorpicker-black{position:absolute;width:100%;height:100%;}.", k, "-colorpicker-white{background:linear-gradient(90deg, #fff, rgba(255, 255, 255, 0));}.", k, "-colorpicker-black{background:linear-gradient(0, #000, rgba(0, 0, 0, 0));}.", k, "-colorpicker-pointer{position:absolute;}.", k, "-colorpicker-circle{width:", colorpicker.panel.circle.width, ";height:", colorpicker.panel.circle.width, ";box-shadow:", colorpicker.panel.circle.boxShadow, ";border-radius:50%;transform:translate(-50%, -50%);}.", k, "-colorpicker-controls{display:flex;margin-top:", colorpicker.panel.gutter, ";}.", k, "-colorpicker-sliders{flex:1;.", k, "-slider{margin-bottom:", colorpicker.panel.gutter, ";}.", k, "-slider-track-wrapper,.", k, "-slider-track{height:", colorpicker.slider.height, ";}.", k, "-slider-track-wrapper{cursor:", colorpicker.slider.cursor, ";}.", k, "-slider-track{border-radius:", colorpicker.slider.borderRadius, ";margin:0 calc(", colorpicker.slider.thumb.width, " / 2 + 1px);background-color:transparent;}.", k, "-slider-bar{background:transparent;}.", k, "-slider-thumb{height:", colorpicker.slider.thumb.height, ";width:", colorpicker.slider.thumb.width, ";border:", colorpicker.slider.thumb.border, ";border-radius:", colorpicker.slider.thumb.borderRadius, ";box-shadow:", colorpicker.slider.thumb.boxShadow, ";&:focus,&:hover{transform:", colorpicker.slider.thumb.hover.transform, ";cursor:", colorpicker.slider.thumb.hover.cursor, ";background-color:", colorpicker.slider.thumb.hover.bgColor, ";}}}.", k, "-colorpicker-hue{.", k, "-slider-track-wrapper{background:linear-gradient(90deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red);}}.", k, "-colorpicker-alpha{background-size:contain;}.", k, "-colorpicker-alpha-bg{background-image:url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMElEQVQ4T2N89uzZfwY8QFJSEp80A+OoAcMiDP7//483HTx//hx/Ohg1gIFx6IcBALl+VXknOCvFAAAAAElFTkSuQmCC\");}.", k, "-colorpicker-color-wrapper{width:", colorpicker.color.width, ";height:", colorpicker.color.height, ";border-radius:", colorpicker.color.borderRadius, ";margin-left:", colorpicker.panel.gutter, ";overflow:hidden;}.", k, "-colorpicker-color{height:100%;box-shadow:", colorpicker.color.boxShadow, ";}.", k, "-colorpicker-input.", k, "-small{.", k, "-input-inner{height:", colorpicker.input.height, ";line-height:", colorpicker.input.height, ";padding:", colorpicker.input.padding, ";font-size:", colorpicker.panel.fontSize, ";}}.", k, "-colorpicker-text{text-align:center;font-size:", colorpicker.panel.fontSize, ";padding:", colorpicker.input.textPadding, ";}.", k, "-colorpicker-presets{border-top:", colorpicker.presets.delimiter, ";margin:0 -", colorpicker.panel.padding, ";overflow:hidden;}.", k, "-colorpicker-preset-color-wrapper{float:left;border-radius:", colorpicker.presets.borderRadius, ";cursor:pointer;overflow:hidden;margin:", colorpicker.panel.padding, " 0 0 ", colorpicker.panel.padding, ";}.", k, "-colorpicker-preset-color{width:", colorpicker.presets.width, ";height:", colorpicker.presets.height, ";box-shadow:", colorpicker.presets.boxShadow, ";}.", k, "-colorpicker-drag{cursor:ew-resize;user-select:none;}");
-}
+});
 export function makeAlphaBgColor(_ref, k) {
   var r = _ref.r,
       g = _ref.g,

package/es/components/copy/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/copy/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: "t3aops",
     styles: "cursor:pointer;vertical-align:middle"
@@ -11,4 +12,4 @@ export function makeStyles(k) {
     styles: "cursor:pointer;vertical-align:middle",
     toString: _EMOTION_STRINGIFIED_CSS_ERROR__
   });
-}
+});

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

@@ -46,6 +46,15 @@ declare const defaults: {
 };
 declare let datepicker: typeof defaults;
 export { datepicker };
-export declare function makePanelStyles(k: string): string;
-export declare function makeCalendarStyles(k: string): string;
-export declare function makeTimeStyles(k: string): string;
+export declare const makePanelStyles: {
+    (k: string): string;
+    clearCache(): {};
+};
+export declare const makeCalendarStyles: {
+    (k: string): string;
+    clearCache(): {};
+};
+export declare const makeTimeStyles: {
+    (k: string): string;
+    clearCache(): {};
+};

package/es/components/datepicker/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: "300px",
   padding: "16px 16px 4px",
@@ -77,14 +78,17 @@ setDefault(function () {
   datepicker = deepDefaults(theme, {
     datepicker: defaults
   }).datepicker;
+  makePanelStyles == null ? void 0 : makePanelStyles.clearCache();
+  makeCalendarStyles == null ? void 0 : makeCalendarStyles.clearCache();
+  makeTimeStyles == null ? void 0 : makeTimeStyles.clearCache();
 });
 export { datepicker };
-export function makePanelStyles(k) {
+export var makePanelStyles = cache(function makePanelStyles(k) {
   return /*#__PURE__*/css("display:flex;.", k, "-datepicker-shortcuts{width:", datepicker.shortcuts.width, ";padding:", datepicker.shortcuts.padding, ";border-right:", datepicker.border, ";}.", k, "-datepicker-shortcut{height:", datepicker.shortcuts.shortcut.height, ";line-height:", datepicker.shortcuts.shortcut.height, ";padding:", datepicker.shortcuts.shortcut.padding, ";cursor:pointer;&:hover{background:", datepicker.shortcuts.shortcut.hoverBgcolor, ";}}.", k, "-datepicker-calendars{display:flex;}.", k, "-datepicker-calendar-wrapper{&:nth-child(2){border-left:", datepicker.border, ";}.", k, "-tabs{border:none;.", k, "-tabs-wrapper{float:none;}.", k, "-tab{width:50%;}}}.", k, "-datepicker-footer{border-top:", datepicker.border, ";padding:", datepicker.footer.padding, ";text-align:right;}");
-}
-export function makeCalendarStyles(k) {
+});
+export var makeCalendarStyles = cache(function makeCalendarStyles(k) {
   return /*#__PURE__*/css("padding:", datepicker.padding, ";width:", datepicker.width, ";position:relative;.", k, "-datepicker-month{display:flex;padding:", datepicker.month.padding, ";}.", k, "-prev .", k, "-icon,.", k, "-next .", k, "-icon{margin:0 -5px!important;}.", k, "-month-values{flex:1;font-size:14px;text-align:center;cursor:pointer;overflow:hidden;position:relative;}.", k, "-month-value{margin:0 ", datepicker.month.valueGap, ";line-height:", theme.small.height, ";&:hover{color:", theme.color.primary, ";}},.", k, "-weekdays{display:flex;border-bottom:", datepicker.border, ";padding:", datepicker.weekday.padding, ";}.", k, "-weekday{flex:1;text-align:center;}.", k, "-calendar-item{text-align:center;margin:", datepicker.item.gutter, ";aspect-ratio:1;display:flex;align-items:center;cursor:pointer;position:relative;border-radius:", datepicker.item.borderRadius, ";.", k, "-value{border-radius:", datepicker.item.borderRadius, ";}&.", k, "-hover{background:", datepicker.item.hoverBgColor, ";}&.", k, "-exceed{color:", datepicker.item.exceedColor, ";}&.", k, "-today .", k, "-value{border:", datepicker.item.todayBorder, ";}&.", k, "-active{background:", datepicker.item.active.bgColor, ";color:", datepicker.item.active.color, ";&.", k, "-today .", k, "-value{border-color:", datepicker.item.active.todayBorderColor, ";}}&.", k, "-disabled{color:", datepicker.item.disabled.color, ";cursor:not-allowed;background:", datepicker.item.disabled.hoverBgColor, ";}&.", k, "-in-range:after{content:'';display:block;position:absolute;box-sizing:content-box;background:", datepicker.item.range.bgColor, ";width:100%;height:100%;left:-", datepicker.item.gutter, ";padding:0 ", datepicker.item.gutter, ";z-index:-1;}.", k, "-value{flex:1;display:flex;align-items:center;justify-content:center;height:100%;}}.", k, "-days{display:grid;grid-template-columns:repeat(7, 1fr);}.", k, "-years{display:grid;grid-template-columns:repeat(4, 1fr);}");
-}
-export function makeTimeStyles(k) {
+});
+export var makeTimeStyles = cache(function makeTimeStyles(k) {
   return /*#__PURE__*/css("display:flex;padding:", datepicker.padding, ";width:", datepicker.width, ";position:relative;.", k, "-scroll-select{flex:1;height:305px;}");
-}
+});

package/es/components/diagram/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/diagram/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: "ohhwil",
     styles: "display:inline-block;overflow:auto;.mxRubberband{position:absolute;overflow:hidden;border-style:solid;border-width:1px;border-color:#0000ff;background:#0077ff;}.mxCellEditor{background:url(\"data:image/gif;base64,R0lGODlhMAAwAIAAAP///wAAACH5BAEAAAAALAAAAAAwADAAAAIxhI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKh8Si8egpAAA7\");border-color:transparent;border-style:solid;display:inline-block;position:absolute;overflow:visible;word-wrap:normal;border-width:0;min-width:1px;resize:none;padding:0;margin:0;}.mxPlainTextEditor{padding:0;margin:0;}"
@@ -11,4 +12,4 @@ export function makeStyles(k) {
     styles: "display:inline-block;overflow:auto;.mxRubberband{position:absolute;overflow:hidden;border-style:solid;border-width:1px;border-color:#0000ff;background:#0077ff;}.mxCellEditor{background:url(\"data:image/gif;base64,R0lGODlhMAAwAIAAAP///wAAACH5BAEAAAAALAAAAAAwADAAAAIxhI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKh8Si8egpAAA7\");border-color:transparent;border-style:solid;display:inline-block;position:absolute;overflow:visible;word-wrap:normal;border-width:0;min-width:1px;resize:none;padding:0;margin:0;}.mxPlainTextEditor{padding:0;margin:0;}",
     toString: _EMOTION_STRINGIFIED_CSS_ERROR__
   });
-}
+});

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

@@ -7,7 +7,7 @@ import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
 
 function _createForOfIteratorHelperLoose(o, allowArrayLike) { var it = typeof _Symbol !== "undefined" && _getIteratorMethod(o) || o["@@iterator"]; if (it) return (it = it.call(o)).next.bind(it); if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; return function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 
-function _unsupportedIterableToArray(o, minLen) { var _context21; if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = _sliceInstanceProperty(_context21 = Object.prototype.toString.call(o)).call(_context21, 8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return _Array$from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _unsupportedIterableToArray(o, minLen) { var _context23; if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = _sliceInstanceProperty(_context23 = Object.prototype.toString.call(o)).call(_context23, 8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return _Array$from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
@@ -732,6 +732,66 @@ describe('Dialog', function () {
         }
       }
     }, _callee14);
+  })));
+  it('should update position when change container', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee15() {
+    var Demo, _mount15, instance, element, dialogDom, style;
+
+    return _regeneratorRuntime.wrap(function _callee15$(_context22) {
+      while (1) {
+        switch (_context22.prev = _context22.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_Component7) {
+              _inheritsLoose(Demo, _Component7);
+
+              function Demo() {
+                var _context21;
+
+                var _this7;
+
+                for (var _len7 = arguments.length, args = new Array(_len7), _key7 = 0; _key7 < _len7; _key7++) {
+                  args[_key7] = arguments[_key7];
+                }
+
+                _this7 = _Component7.call.apply(_Component7, _concatInstanceProperty(_context21 = [this]).call(_context21, args)) || this;
+                _this7.Dialog = Dialog;
+                return _this7;
+              }
+
+              Demo.defaults = function defaults() {
+                return {
+                  container: function container(parentDom) {
+                    return parentDom;
+                  }
+                };
+              };
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "\n                var Dialog = this.Dialog;\n                <Dialog value={true} container={this.get('container')} ref=\"dialog\">test</Dialog>\n            ";
+            _mount15 = mount(Demo), instance = _mount15[0], element = _mount15[1];
+            _context22.next = 5;
+            return wait();
+
+          case 5:
+            instance.set('container', undefined);
+            _context22.next = 8;
+            return wait();
+
+          case 8:
+            dialogDom = instance.refs.dialog.dialogRef.value;
+            style = dialogDom.style;
+            expect(style.left).not.eql('');
+            expect(style.top).not.eql(''); // should append to body
+
+            expect(dialogDom.closest('.k-dialog-wrapper').parentElement).to.eql(document.body);
+
+          case 13:
+          case "end":
+            return _context22.stop();
+        }
+      }
+    }, _callee15);
   }))); // it('should handle v-if and v-model at the same time correctly in Vue', async () => {
   // const Test = {
   // template: `<Dialog v-model="show" v-if="show" ref="dialog">test</Dialog>`,

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

@@ -1,4 +1,13 @@
 import '../../styles/global';
-export declare function makeDialogStyles(k: string): string;
-export declare function makeWrapperStyles(k: string): string;
-export declare function makeAlertStyles(k: string): string;
+export declare const makeDialogStyles: {
+    (k: string): string;
+    clearCache(): {};
+};
+export declare const makeWrapperStyles: {
+    (k: string): string;
+    clearCache(): {};
+};
+export declare const makeAlertStyles: {
+    (k: string): string;
+    clearCache(): {};
+};

package/es/components/dialog/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: '800px',
   bgColor: '#fff',
@@ -81,24 +82,27 @@ setDefault(function () {
   dialog = deepDefaults(theme, {
     dialog: defaults
   }).dialog;
+  makeDialogStyles == null ? void 0 : makeDialogStyles.clearCache();
+  makeWrapperStyles == null ? void 0 : makeWrapperStyles.clearCache();
+  makeAlertStyles == null ? void 0 : makeAlertStyles.clearCache();
 });
-export function makeDialogStyles(k) {
+export var makeDialogStyles = cache(function makeDialogStyles(k) {
   var _context;
 
   return /*#__PURE__*/css("position:absolute;width:", dialog.width, ";border-radius:", dialog.borderRadius, ";background:", dialog.bgColor, ";font-size:", dialog.fontSize, ";color:", dialog.color, ";box-shadow:", dialog.boxShadow, ";max-width:100%;z-index:", theme.maxZIndex, ";&.", k, "-dragging{cursor:move;user-select:none;}&.transition-enter-active,&.transition-leave-active,&.transition-appear-active{transition:all ", dialog.transition, ";}&.transition-enter-from,&.transition-leave-to,&.transition-appear-from{transform:", dialog.transform, ";opacity:0;}", _mapInstanceProperty(_context = ['large', 'small', 'mini']).call(_context, function (size) {
     return /*#__PURE__*/css("&.", k, "-", size, "{width:", dialog[size + "Width"], ";}");
   }), ".", k, "-dialog-header{padding:0 ", dialog.padding, ";margin:", dialog.margin, ";border-bottom:", dialog.header.border, ";height:", dialog.header.height, ";line-height:", dialog.header.height, ";font-size:", dialog.header.fontSize, ";color:", dialog.header.color, ";position:relative;font-weight:", dialog.header.fontWeight, ";}.", k, "-dialog-title{display:inline-block;}.", k, "-dialog-close{position:absolute;right:", dialog.header.closeRight, ";top:", dialog.header.closeTop, ";.", k, "-icon{font-size:", dialog.header.closeIconFontSize, ";}}.", k, "-dialog-body{padding:", dialog.body.padding, ";position:relative;}.", k, "-dialog-footer{text-align:right;padding:", dialog.footer.padding, ";margin:", dialog.margin, ";border-top:", dialog.footer.border, ";.", k, "-btn{margin-left:", dialog.footer.btnGap, ";}}");
-}
-export function makeWrapperStyles(k) {
+});
+export var makeWrapperStyles = cache(function makeWrapperStyles(k) {
   //.${k}-fade-leave-active will add position absolute to the styles
   // so we must set fixed with important to .${k}-dialog-overlay
   return /*#__PURE__*/css("position:absolute;z-index:", theme.maxZIndex, ";top:0;left:0;width:100%;.", k, "-dialog-overlay{position:fixed!important;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, .5);overflow:auto;}");
-}
-export function makeAlertStyles(k) {
+});
+export var makeAlertStyles = cache(function makeAlertStyles(k) {
   var _context2;
 
   return /*#__PURE__*/css("&.", k, "-alert-dialog{.", k, "-dialog-body{margin-top:", dialog.alert.bodyMarginTop, ";padding:", dialog.alert.padding, ";text-align:center;z-index:1;}.", k, "-dialog-header,.", k, "-dialog-footer{border:none;}.", k, "-dialog-tip-icon{margin-bottom:", dialog.alert.tipIconMarginBottom, ";.", k, "-icon{font-size:", dialog.alert.tipIconFontSize, ";line-height:", dialog.alert.tipIconLineHeight, ";}}", _mapInstanceProperty(_context2 = ['success', 'warning', 'error', 'confirm']).call(_context2, function (type) {
     var color = type === 'error' ? theme.color.danger : type === 'confirm' ? theme.color.primary : theme.color[type];
     return /*#__PURE__*/css("&.", k, "-", type, "{.", k, "-dialog-tip-icon{color:", color, ";}}");
   }), " &:not(.", k, "-confirm){.", k, "-dialog-cancel{display:none;}}&.", k, "-with-title{.", k, "-dialog-body{margin-top:", dialog.alert.titleBodyMarginTop, ";text-align:left;}.", k, "-dialog-tip-icon{float:left;.", k, "-icon{font-size:", dialog.alert.titleTipIconFontSize, ";}}.", k, "-alert-dialog-wrapper{overflow:hidden;padding-left:", dialog.alert.wrapperPaddingLeft, ";}.", k, "-alert-dialog-title{line-height:", dialog.alert.tipIconLineHeight, ";font-size:", dialog.alert.titleFontSize, ";font-weight:", dialog.alert.titleFontWeight, ";}}}");
-}
+});

package/es/components/dialog/usePosition.js

@@ -5,6 +5,13 @@ export function usePosition(elementRef) {
   var instance = useInstance();
   instance.on(SHOW, center);
   instance.on('afterClose', onAfterLeave);
+  instance.watch('container', function () {
+    if (!instance.get('value')) return;
+    center();
+  }, {
+    presented: true,
+    inited: true
+  });
 
   function center() {
     position(elementRef.value, {

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

@@ -2,5 +2,8 @@ import '../../styles/global';
 declare type ValueOf<T extends readonly any[]> = T[number];
 export declare type Placement = ValueOf<typeof placements>;
 export declare const placements: readonly ["top", "right", "bottom", "left"];
-export declare function makeStyles(overlay: boolean, k: string): string;
+export declare const makeStyles: {
+    (overlay: boolean, k: string): string;
+    clearCache(): {};
+};
 export {};

package/es/components/drawer/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';
 export var placements = ['top', 'right', 'bottom', 'left'];
 var defaults = {
   get transition() {
@@ -18,11 +19,12 @@ setDefault(function () {
   drawer = deepDefaults(theme, {
     drawer: defaults
   }).drawer;
+  makeStyles == null ? void 0 : makeStyles.clearCache();
 });
-export function makeStyles(overlay, k) {
+export var makeStyles = cache(function makeStyles(overlay, k) {
   var borderRadius = theme.largeBorderRadius;
   return /*#__PURE__*/css("&.k-drawer{position:fixed;background:transparent;box-shadow:none;border-radius:0;}&.transition-enter-active,&.transition-leave-active,&.transition-appear-active{transition:opacity ", drawer.transition, "!important;overflow:hidden;.", k, "-drawer-content{transition:transform ", drawer.transition, ";}}.", k, "-drawer-content{height:100%;display:flex;background:#fff;flex-direction:column;transform:translateX(0);box-shadow:", drawer.boxShadow, ";.", k, "-dialog-body{flex-grow:1;overflow:auto;}}", makePlacementStyles(k, 'right', "right: 0; height: 100%;", "translateX(100%)", borderRadius + " 0 0 " + borderRadius), " ", makePlacementStyles(k, 'left', 'left: 0; height: 100%;', "translateX(-100%)", "0 " + borderRadius + " " + borderRadius + " 0"), " ", makePlacementStyles(k, 'top', 'left: 50%; top: 0; transform: translateX(-50%);', "translateY(-100%)", "0 0 " + borderRadius + " " + borderRadius), " ", makePlacementStyles(k, 'bottom', 'left: 50%; bottom: 0; transform: translateX(-50%);', "translateY(100%)", "0 " + borderRadius + " " + borderRadius + " 0"), " &.", k, "-top,&.", k, "-bottom{width:100%;}");
-}
+});
 
 function makePlacementStyles(k, placement, styles, transform, borderRadius) {
   return /*#__PURE__*/css("&.", k, "-drawer.", k, "-", placement, "{", styles, " &.transition-enter-from,&.transition-leave-to,&.transition-appear-from{.", k, "-drawer-content{transform:", transform, ";}}.", k, "-drawer-content{border-radius:", borderRadius, ";}}");

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

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

package/es/components/dropdown/styles.js

@@ -2,6 +2,7 @@ import { css } from '@emotion/css';
 import { theme, setDefault } from '../../styles/theme';
 import { deepDefaults, getLeft, getRight } from '../../styles/utils';
 import '../../styles/global';
+import { cache } from '../utils';
 var defaults = {
   item: {
     get height() {
@@ -47,10 +48,12 @@ setDefault(function () {
   dropdown = deepDefaults(theme, {
     dropdown: defaults
   }).dropdown;
+  makeMenuStyles == null ? void 0 : makeMenuStyles.clearCache();
+  makeItemStyles == null ? void 0 : makeItemStyles.clearCache();
 });
-export function makeMenuStyles(k) {
+export var makeMenuStyles = cache(function makeMenuStyles(k) {
   return /*#__PURE__*/css("position:absolute;min-width:", dropdown.menu.minWidth, ";background:", dropdown.menu.bgColor, ";border-radius:", dropdown.menu.borderRadius, ";box-shadow:", theme.middleBoxShadow, ";font-size:", dropdown.menu.fontSize, ";z-index:", dropdown.menu.zIndex, ";top:0;left:0;.", k, "-dropdown{display:block;}");
-}
-export function makeItemStyles(k) {
+});
+export var makeItemStyles = cache(function makeItemStyles(k) {
   return /*#__PURE__*/css("padding:", dropdown.item.padding, ";cursor:pointer;white-space:nowrap;height:", dropdown.item.height, ";line-height:", dropdown.item.height, ";&.", k, "-hover{background:", dropdown.item.hoverBgColor, ";}&:first-of-type{border-radius:", dropdown.menu.borderRadius, " ", dropdown.menu.borderRadius, " 0 0;}&:last-of-type{border-radius:0 0 ", dropdown.menu.borderRadius, " ", dropdown.menu.borderRadius, ";}&.", k, "-disabled{background:", dropdown.item.disabledBgColor, ";color:", dropdown.item.disabledColor, ";cursor:not-allowed;}.", k, "-checkbox,.", k, "-radio{display:flex;margin:0 -", getRight(dropdown.item.padding), " 0 -", getLeft(dropdown.item.padding), ";padding:", dropdown.item.padding, ";}.", k, "-checkbox-wrapper,.", k, "-radio-wrapper{vertical-align:text-bottom;}.", k, "-checkbox-text,.", k, "-radio-text{vertical-align:baseline;}");
-}
+});

package/es/components/dropdown/usePosition.js

@@ -1,8 +1,7 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 import { useInstance, findDomFromVNode } from 'intact';
 import { position } from '../position';
-import { noop } from 'intact-shared';
-import { isObject } from 'intact-shared';
+import { noop, isObject, isFunction } from 'intact-shared';
 import { isEqualObject } from '../utils';
 export function usePosition() {
   var instance = useInstance();
@@ -16,19 +15,23 @@ export function usePosition() {
   });
   ['of', 'position'].forEach(function (item) {
     instance.watch(item, function (newValue, oldValue) {
-      // return if object is the same
-      if (isObject(newValue) && isObject(oldValue) && // is not event object
-      !(newValue instanceof Event) && isEqualObject(newValue, oldValue)) {
-        return;
-      }
-
-      if (instance.get('value')) {
-        handle(noop);
-      }
+      if (!instance.get('value') || // return if object is the same
+      isObject(newValue) && isObject(oldValue) && // is not event object
+      !(newValue instanceof Event) && isEqualObject(newValue, oldValue)) return;
+      handle(noop);
     }, {
       presented: true,
       inited: true
     });
+  }); // watch container, it is not commonly used
+
+  instance.watch('container', function (newValue, oldValue) {
+    if (!instance.get('value') || // return if function is the same. Not rigorous!
+    isFunction(newValue) && isFunction(oldValue) && newValue.toString() === oldValue.toString()) return;
+    handle(noop);
+  }, {
+    presented: true,
+    inited: true
   }); // if the dropdown is nested, we must show child after parent has positioned
 
   function p(ofElement, parentFeedback) {

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

@@ -7,4 +7,7 @@ declare const defaults: {
 };
 declare let editable: typeof defaults;
 export { editable };
-export declare function makeStyles(k: string): string;
+export declare const makeStyles: {
+    (k: string): string;
+    clearCache(): {};
+};

package/es/components/editable/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 = {
   iconGap: '0 0 0 8px',
   // invalid
@@ -17,8 +18,9 @@ setDefault(function () {
   editable = deepDefaults(theme, {
     editable: defaults
   }).editable;
+  makeStyles == null ? void 0 : makeStyles.clearCache();
 });
 export { editable };
-export function makeStyles(k) {
+export var makeStyles = cache(function makeStyles(k) {
   return /*#__PURE__*/css("display:inline-flex;align-items:center;.", k, "-editable-icon{margin:", editable.iconGap, ";}&.", k, "-invalid{.", k, "-input-inner{border:", editable.invalid.border, "!important;}}");
-}
+});

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

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