@king-design/intact 3.1.1 → 3.1.3

package/components/menu/styles.ts

@@ -2,6 +2,7 @@ import {css} from '@emotion/css';
 import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults, getLeft, palette} from '../../styles/utils';
 import '../../styles/global';
+import { cache } from '../utils';
 
 const sizes = ['large', 'small'] as const;
 
@@ -81,11 +82,15 @@ const defaults = {
 let menu: typeof defaults;
 setDefault(() => {
     menu = deepDefaults(theme, {menu: defaults}).menu;
+    makeMenuStyles?.clearCache();
+    makeItemStyles?.clearCache();
+    makeTitleStyles?.clearCache();
+    makeNestedMenuStyles?.clearCache();
 });
 
 export {menu};
 
-export function makeMenuStyles(k: string) {
+export const makeMenuStyles = cache(function makeMenuStyles(k: string) {
     // we must increase the priority by adding &.${k}-menu
     // to override the css of dropdownMenu
     return css`
@@ -209,9 +214,9 @@ export function makeMenuStyles(k: string) {
             }
         }
     `
-}
+});
 
-export function makeTitleStyles(k: string) {
+export const makeTitleStyles = cache(function makeTitleStyles(k: string) {
     const item = menu.item;
     return css`
         display: flex;
@@ -222,16 +227,16 @@ export function makeTitleStyles(k: string) {
         overflow: hidden;
         flex-wrap: nowrap;
     `;
-}
+});
 
-export function makeItemStyles(k: string) {
+export const makeItemStyles = cache(function makeItemStyles(k: string) {
     const item = menu.item;
     return css`
         .${k}-menu-title {
             cursor: pointer;
-            height: ${menu.item.height};
+            height: ${item.height};
             &:hover {
-                color: ${menu.item.hoverColor};
+                color: ${item.hoverColor};
             }
         }
         .${k}-menu-name {
@@ -256,7 +261,7 @@ export function makeItemStyles(k: string) {
         // expanded
         &.${k}-expanded {
             > .${k}-menu-title {
-                color: ${menu.item.hoverColor};
+                color: ${item.hoverColor};
                 .${k}-menu-arrow {
                     transform: rotateX(180deg);
                 }
@@ -266,35 +271,35 @@ export function makeItemStyles(k: string) {
         // highlighted
         &.${k}-highlighted {
             > .${k}-menu-title {
-                color: ${menu.item.hoverColor};
+                color: ${item.hoverColor};
             }
         }
 
         // active
         &.${k}-active {
             > .${k}-menu-title {
-                color: ${menu.item.hoverColor} !important;
-                background: ${menu.item.activeBgColor};
+                color: ${item.hoverColor} !important;
+                background: ${item.activeBgColor};
             }
         }
 
         // disabled
         &.${k}-disabled {
             > .${k}-menu-title {
-                color: ${menu.item.disabledColor} !important;
+                color: ${item.disabledColor} !important;
                 cursor: not-allowed;
             }
         }
 
         // dot
         .${k}-menu-dot {
-            font-size: ${menu.item.dotFontSize};
+            font-size: ${item.dotFontSize};
             transform: scale(.4);
         }
     `
-}
+});
 
-export function makeNestedMenuStyles(k: string, hasIcon: boolean, parentPaddingLeft: string = getLeft(menu.item.padding)) {
+export const makeNestedMenuStyles = cache(function makeNestedMenuStyles(k: string, hasIcon: boolean, parentPaddingLeft: string = getLeft(menu.item.padding)) {
     const paddingLeft = `${parentPaddingLeft}${hasIcon ? ' + ' + menu.icon.width : ''} + ${menu.icon.gap}`;
     return [
         css`
@@ -308,4 +313,4 @@ export function makeNestedMenuStyles(k: string, hasIcon: boolean, parentPaddingL
         `,
         paddingLeft,
     ]
-}
+});

package/components/message/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 },
@@ -32,9 +33,11 @@ const defaults = {
 let message: typeof defaults;
 setDefault(() => {
     message = deepDefaults(theme, {message: defaults}).message;
+    makeMessagesStyles?.clearCache();
+    makeMessageStyles?.clearCache();
 });
 
-export function makeMessagesStyles(k: string) {
+export const makeMessagesStyles = cache(function makeMessagesStyles(k: string) {
     return css`
         position: fixed;
         top: ${message.top};
@@ -43,9 +46,9 @@ export function makeMessagesStyles(k: string) {
         pointer-events: none;
         z-index: ${theme.maxZIndex + 1};
     `;
-}
+});
 
-export function makeMessageStyles(k: string) {
+export const makeMessageStyles = cache(function makeMessageStyles(k: string) {
     return css`
         text-align: center;
         width: 100%;
@@ -121,5 +124,4 @@ export function makeMessageStyles(k: string) {
             transition: transform ${message.transition};
         }
     `;
-}
-
+});

package/components/pagination/styles.ts

@@ -3,6 +3,7 @@ import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults, Sizes}  from '../../styles/utils';
 import '../../styles/global';
 import {button}  from '../button/styles';
+import { cache } from '../utils';
 
 type SizeStyles = {
     fontSize: string,
@@ -55,9 +56,10 @@ const defaults = deepDefaults(
 let pagination: typeof defaults;
 setDefault(() => {
     pagination = deepDefaults(theme, {pagination: defaults}).pagination;
+    makeStyles?.clearCache();
 });
 
-export function makeStyles(k: string) {
+export const makeStyles = cache(function makeStyles(k: string) {
     return css`
         font-size: ${pagination.fontSize};
         > * {   
@@ -145,4 +147,4 @@ export function makeStyles(k: string) {
             }
         }
     `;
-}
+});

package/components/popover/content.vdt

@@ -1,5 +1,5 @@
 import {Icon} from '../icon';
-import makeStyles from "./styles";
+import {makeStyles} from "./styles";
 
 const { type, title, content } = this.get();
 const { k } = this.config;

package/components/popover/styles.ts

@@ -1,6 +1,7 @@
 import {css} from '@emotion/css';
 import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults} from '../../styles/utils';
+import { cache } from '../utils';
 
 const defaults = {
     width: '320px',
@@ -19,10 +20,11 @@ const defaults = {
 let popover: typeof defaults;
 setDefault(() => {
     popover = deepDefaults(theme, {popover: defaults}).popover;
+    makeStyles?.clearCache();
 });
 
 
-export default function makeStyles(k: string) {
+export const makeStyles = cache(function makeStyles(k: string) {
     return css`
         // increase priority
         &.${k}-tooltip-content.${k}-popover {
@@ -50,4 +52,4 @@ export default function makeStyles(k: string) {
             }
         }
     `;
-}
+});

package/components/portal.ts

@@ -10,6 +10,8 @@ import {
     remove,
     TypeDefs,
     inject,
+    unmount,
+    removeVNodeDom,
 } from 'intact';
 import {isString} from 'intact-shared';
 import {DIALOG} from './dialog/constants';
@@ -59,7 +61,9 @@ export class Portal<T extends PortalProps = PortalProps> extends Component<T> {
         const fakeContainer = document.createDocumentFragment();
 
         (mountedQueue.priority || mountedQueue).push(() => {
-            const parentDom = this.$lastInput!.dom!.parentElement!;
+            const parentDom = this.$lastInput!.dom!.parentElement;
+            // maybe the <!-- portal --> has been removed by react, #938
+            if (!parentDom) return;
             this.initContainer(nextProps.container, parentDom, anchor);
             this.container!.appendChild(fakeContainer);
         });
@@ -130,8 +134,13 @@ export class Portal<T extends PortalProps = PortalProps> extends Component<T> {
     }
 
     $unmount(vNode: VNodeComponentClass<this>, nextVNode: VNodeComponentClass<this> | null) {
-        remove(vNode.props!.children as VNode, this.container!, false);
-        // removeVNodeDom(vNode.props!.children as VNode, this.container!);
+        const children = vNode.props!.children as VNode;
+        unmount(children, null);
+        if (this.container) {
+            // maybe the <!-- portal --> has been removed by react, #938
+            // remove(children, this.container, false);
+            removeVNodeDom(children, this.container);
+        }
         super.$unmount(vNode, nextVNode);
     }
 
@@ -142,7 +151,11 @@ export class Portal<T extends PortalProps = PortalProps> extends Component<T> {
             } else {
                 this.container = container(parentDom, anchor);
             }
+        } else {
+            // let below logic to set container to default if container does not exist.
+            this.container = null;
         }
+
         if (!this.container) {
             if (this.$senior instanceof BaseDialog) {
                 // Dialog and Drawer must be inserted into document.body

package/components/progress/styles.ts

@@ -2,6 +2,7 @@ import {css, keyframes} from '@emotion/css';
 import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults} from '../../styles/utils';
 import '../../styles/global';
+import { cache } from '../utils';
 
 export const types = ['active', 'normal', 'error', 'success', 'warning'] as const;
 
@@ -70,9 +71,10 @@ const defaults = {
 let progress: typeof defaults;
 setDefault(() => {
     progress = deepDefaults(theme, {progress: defaults}).progress;
+    makeStyles?.clearCache();
 });
 
-export function makeStyles(k: string) {
+export const makeStyles = cache(function makeStyles(k: string) {
     return css`
         position: relative;
         line-height: 1;
@@ -234,6 +236,4 @@ export function makeStyles(k: string) {
             })}
         }
     `
-}
-
-
+});

package/components/radio/styles.ts

@@ -2,6 +2,7 @@ import {css} from '@emotion/css';
 import {deepDefaults, darken, palette} from '../../styles/utils';
 import {theme, setDefault} from '../../styles/theme';
 import '../../styles/global';
+import { cache } from '../utils';
 
 const defaults = {
     width: '16px',
@@ -34,9 +35,10 @@ const defaults = {
 let radio: typeof defaults;
 setDefault(() => {
     radio = deepDefaults(theme, {radio: defaults}).radio;
+    makeStyles?.clearCache();
 });
 
-export function makeStyles(k: string) {
+export const makeStyles = cache(function makeStyles(k: string) {
     return css`
         display: inline-flex;
         align-items: center;
@@ -126,4 +128,4 @@ export function makeStyles(k: string) {
             }
         }            
     `;
-}
+});

package/components/rate/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 = {
     color: '#ccc',
@@ -18,9 +19,10 @@ const defaults = {
 let rate: typeof defaults;
 setDefault(() => {
     rate = deepDefaults(theme, {rate: defaults}).rate;
+    makeStyles?.clearCache();
 });
 
-export function makeStyles(k: string) {
+export const makeStyles = cache(function makeStyles(k: string) {
     return css`
         display: inline-block;
         .${k}-rate-item {
@@ -65,4 +67,4 @@ export function makeStyles(k: string) {
             }
         }
     `;
-}
+});

package/components/scrollSelect/styles.ts

@@ -2,6 +2,7 @@ import {css} from '@emotion/css';
 import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults, sizes, Sizes, getRight, getLeft} from '../../styles/utils';
 import '../../styles/global';
+import { cache } from '../utils';
 
 type SizeStyles = {
     padding?: string,
@@ -28,11 +29,12 @@ const defaults = {
 let scrollSelect: typeof defaults;
 setDefault(() => {
     scrollSelect = deepDefaults(theme, {scrollSelect: defaults}).scrollSelect;
+    makeStyles?.clearCache();
 });
 
 export {scrollSelect};
 
-export function makeStyles(k: string) {
+export const makeStyles = cache(function makeStyles(k: string) {
     return css`
         text-align: center;
         overflow: hidden;
@@ -91,4 +93,4 @@ export function makeStyles(k: string) {
             pointer-events: none;
         }
     `;
-}
+});

package/components/select/base.ts

@@ -121,9 +121,10 @@ export abstract class BaseSelect<
 
     @bind
     position() {
-        const dropdown = this.dropdownRef.value!;
+        let dropdown = this.dropdownRef.value!;
         if (dropdown.get('value')) {
-            dropdown.position();
+            do { dropdown.position() }
+            while (dropdown = dropdown.showedDropdown!)
         }
     }
 

package/components/select/base.vdt

@@ -2,7 +2,7 @@ import {TransitionGroup, Transition} from 'intact';
 import {Input} from '../input';
 import {Icon} from '../icon';
 import {isNullOrUndefined, isStringOrNumber} from 'intact-shared';
-import makeStyles from './styles';
+import {makeStyles} from './styles';
 import {Dropdown} from '../dropdown';
 import {getRestProps, addStyle} from '../utils';
 import {Wave} from '../wave';

package/components/select/styles.ts

@@ -2,6 +2,7 @@ import {css} from '@emotion/css';
 import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults, sizes, Sizes, getRight, getLeft} from '../../styles/utils';
 import '../../styles/global';
+import { cache } from '../utils';
 
 type SizeStyles = {
     padding?: string,
@@ -112,9 +113,12 @@ const defaults = deepDefaults(
 let select: typeof defaults;
 setDefault(() => {
     select = deepDefaults(theme, {select: defaults}).select;
+    makeStyles?.clearCache();
+    makeMenuStyles?.clearCache();
+    makeGroupStyles?.clearCache();
 });
 
-export default function makeStyles(k: string) {
+export const makeStyles = cache(function makeStyles(k: string) {
     return css`
         display: inline-flex;
         align-items: center;
@@ -275,9 +279,9 @@ export default function makeStyles(k: string) {
             }
         }
     `;
-}
+});
 
-export function makeMenuStyles(k: string) {
+export const makeMenuStyles = cache(function makeMenuStyles(k: string) {
     const searchable = select.searchable;
     
     return css`
@@ -367,13 +371,13 @@ export function makeMenuStyles(k: string) {
             font-size: ${select.multiple.checkmark.fontSize};
         }
     `;
-}
+});
 
-export function makeGroupStyles(k: string) {
+export const makeGroupStyles = cache(function makeGroupStyles(k: string) {
     return css`
         .${k}-select-group-label {
             color: ${select.group.labelColor};
             padding: ${select.group.labelPadding};
         }
     `
-}
+});

package/components/skeleton/styles.ts

@@ -2,6 +2,7 @@ import {deepDefaults}  from '../../styles/utils';
 import { theme, setDefault } from '../../styles/theme';
 import {css, keyframes} from '@emotion/css';
 import '../../styles/global';
+import { cache } from '../utils';
 
 export const kls = (className: string, k: string) => `${k}-skeleton-${className}`;
 
@@ -16,9 +17,11 @@ const defaults = {
 let skeleton: typeof defaults;
 setDefault(() => {
     skeleton = deepDefaults(theme, {skeleton: defaults}).skeleton;
+    makeStyles?.clearCache();
+    makeItemStyles?.clearCache();
 });
 
-export function makeStyles(k: string, size: ItemSize) {
+export const makeStyles = cache(function makeStyles(k: string, size: ItemSize) {
     return css`
         &.${k}-animated {
             .${kls('item', k)} {
@@ -53,7 +56,7 @@ export function makeStyles(k: string, size: ItemSize) {
             height: ${theme[size].height}
         }
     `;
-}
+});
 
 const skeletonLoading = keyframes`
     0% {
@@ -64,7 +67,7 @@ const skeletonLoading = keyframes`
     }
 `;
 
-export function makeItemStyles(k: string) {
+export const makeItemStyles = cache(function makeItemStyles(k: string) {
     const skeletonItem = skeleton.item;
     return css`
         & > div {
@@ -102,4 +105,4 @@ export function makeItemStyles(k: string) {
             background: ${skeletonItem.bgColor};
         }
     `;
-}
+});

package/components/slider/styles.ts

@@ -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';
 
 const defaults = {
     get transition() { return theme.transition.middle },
@@ -51,9 +52,10 @@ const defaults = {
 let slider: typeof defaults;
 setDefault(() => {
     slider = deepDefaults(theme, {slider: defaults}).slider;
+    makeStyles?.clearCache();
 });
 
-export function makeStyles(k: string) {
+export const makeStyles = cache(function makeStyles(k: string) {
     return css`
         position: relative;
         outline: none;
@@ -197,4 +199,4 @@ export function makeStyles(k: string) {
             white-space: nowrap;
         }
     `;
-}
+});

package/components/spin/styles.ts

@@ -2,6 +2,7 @@ import {css, keyframes} from '@emotion/css';
 import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults, sizes, Sizes} from '../../styles/utils';
 import '../../styles/global';
+import { cache } from '../utils';
 
 const defaults = {
     width: `40px`,
@@ -16,9 +17,10 @@ const defaults = {
 let spin: typeof defaults;
 setDefault(() => {
     spin = deepDefaults(theme, {spin: defaults}).spin;
+    makeStyles?.clearCache();
 });
 
-export function makeStyles(k: string) {
+export const makeStyles = cache(function makeStyles(k: string) {
     const width = spin.strokeWidth;
     const r = 120 - 60 - (width / 2);
     const c = Math.round(2 * 3.14 * r);
@@ -89,6 +91,4 @@ export function makeStyles(k: string) {
             background: rgba(255, 255, 255, .5);
         }
     `;
-}
-
-
+});

package/components/spinner/styles.ts

@@ -2,7 +2,7 @@ import {css} from '@emotion/css';
 import {deepDefaults, sizes, palette} from '../../styles/utils';
 import {theme, setDefault} from '../../styles/theme';
 import '../../styles/global';
-import spin from '~/components/spin';
+import { cache } from '../utils';
 
 const defaults = {
     get borderRadius() { return theme.borderRadius },
@@ -49,9 +49,10 @@ const defaults = {
 let spinner: typeof defaults;
 setDefault(() => {
     spinner = deepDefaults(theme, {spinner: defaults}).spinner;
+    makeStyles?.clearCache();
 });
 
-export function makeStyles(k: string) {
+export const makeStyles = cache(function makeStyles(k: string) {
     return css`
         display: inline-block;
         vertical-align: middle;
@@ -159,4 +160,4 @@ export function makeStyles(k: string) {
             }
         })}
     `;
-}
+});

package/components/split/styles.ts

@@ -2,6 +2,7 @@ import {theme, setDefault} from '../../styles/theme';
 import {css} from '@emotion/css';
 import '../../styles/global';
 import {deepDefaults}  from '../../styles/utils';
+import { cache } from '../utils';
 
 export type Mode = 'horizontal' | 'vertical';
 
@@ -37,9 +38,10 @@ const defaults = {
 let split: typeof defaults;
 setDefault(() => {
     split = deepDefaults(theme, {split: defaults}).split;
+    makeStyles?.clearCache();
 });
 
-export function makeStyles(k: string) {
+export const makeStyles = cache(function makeStyles(k: string) {
     return css`
         display: flex;
         height: 100%;
@@ -126,4 +128,4 @@ export function makeStyles(k: string) {
             }
         }
     `;
-}
+});

package/components/steps/index.vdt

@@ -1,6 +1,6 @@
 import {getRestProps, eachChildren} from '../utils';
 import {Step} from './step';
-import {makeStepsStyles} from './styles';
+import {makeStyles} from './styles';
 import {context as StepsContext} from './context';
 
 const {
@@ -16,7 +16,7 @@ const classNameObj = {
     [`${k}-${type}`]: true,
     [`${k}-clickable`]: clickable,
     [`${k}-vertical`]: vertical,
-    [makeStepsStyles(k)]: true,
+    [makeStyles(k)]: true,
 };
 
 let stepIndex = 0;

package/components/steps/styles.ts

@@ -2,6 +2,7 @@ import {css, cx} from '@emotion/css';
 import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults, palette}  from '../../styles/utils';
 import '../../styles/global';
+import { cache } from '../utils';
 
 const defaults = {
     gap: '10px',
@@ -78,11 +79,12 @@ const defaults = {
 let steps: typeof defaults;
 setDefault(() => {
     steps = deepDefaults(theme, {steps: defaults}).steps;
+    makeStyles?.clearCache();
 });
 
 const stepStatus = ['done', 'active', 'error'] as const; 
 
-export function makeStepsStyles(k: string) {
+export const makeStyles = cache(function makeStyles(k: string) {
     return css`
         display: flex;
 
@@ -118,7 +120,7 @@ export function makeStepsStyles(k: string) {
 
         ${makeVerticalStyles(k)};
     `;
-}
+});
 
 function makeDefaultStyles(k: string) {
     const defaults = steps.default;
@@ -383,7 +385,7 @@ function makeSimpleStyles(k: string) {
             }
         }
     `;
-}
+};
 
 function center(flex: 'flex' | 'inline-flex' = 'flex') {
     return css`
@@ -393,7 +395,7 @@ function center(flex: 'flex' | 'inline-flex' = 'flex') {
     `;
 }
 
-export function makeCommonStyles(k: string) {
+function makeCommonStyles(k: string) {
     return css`
         .${k}-step {
             position: relative; 
@@ -427,7 +429,7 @@ export function makeCommonStyles(k: string) {
     `;
 }
 
-export function makeVerticalStyles(k: string) {
+function makeVerticalStyles(k: string) {
     const verticalLine = steps.vertical.line;
 
     return css`