@king-design/react 3.1.0-beta.2 → 3.1.0

package/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 _context18; if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = _sliceInstanceProperty(_context18 = Object.prototype.toString.call(o)).call(_context18, 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 _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 _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; }
 
@@ -19,7 +19,7 @@ import { __decorate } from "tslib";
 import { Component } from 'intact-react';
 import { Dialog, BaseDialog } from './';
 import { bind } from '../utils';
-import { getElement, mount, unmount, dispatchEvent, wait } from '../../test/utils';
+import { getElement, mount, unmount, dispatchEvent, wait, getElements } from '../../test/utils';
 import BasicDemo from '~/components/dialog/demos/basic';
 import AsyncCloseDemo from '~/components/dialog/demos/asyncClose';
 import TerminateDemo from '~/components/dialog/demos/terminate';
@@ -594,7 +594,7 @@ describe('Dialog', function () {
     }, _callee12);
   })));
   it('should remove body style when destroy', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee13() {
-    var Demo, _mount13, instance, element;
+    var Demo, _mount13, instance, element, style;
 
     return _regeneratorRuntime.wrap(function _callee13$(_context17) {
       while (1) {
@@ -642,14 +642,96 @@ describe('Dialog', function () {
             return wait();
 
           case 7:
-            expect(document.body.getAttribute('style')).to.be.null;
+            style = document.body.getAttribute('style');
+            expect(style === null || style === '').to.be.true;
 
-          case 8:
+          case 9:
           case "end":
             return _context17.stop();
         }
       }
     }, _callee13);
+  })));
+  it('show nested dialog', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee14() {
+    var Test, Demo, _mount14, instance, element, _getElements, dialog1, dialog2;
+
+    return _regeneratorRuntime.wrap(function _callee14$(_context20) {
+      while (1) {
+        switch (_context20.prev = _context20.next) {
+          case 0:
+            Test = /*#__PURE__*/function (_Component5) {
+              _inheritsLoose(Test, _Component5);
+
+              function Test() {
+                var _context18;
+
+                var _this5;
+
+                for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
+                  args[_key5] = arguments[_key5];
+                }
+
+                _this5 = _Component5.call.apply(_Component5, _concatInstanceProperty(_context18 = [this]).call(_context18, args)) || this;
+                _this5.Dialog = Dialog;
+                return _this5;
+              }
+
+              return Test;
+            }(Component);
+
+            Test.template = "\n                const { Dialog } = this;\n                <Dialog v-model=\"value\">test</Dialog>\n            ";
+
+            Demo = /*#__PURE__*/function (_Component6) {
+              _inheritsLoose(Demo, _Component6);
+
+              function Demo() {
+                var _context19;
+
+                var _this6;
+
+                for (var _len6 = arguments.length, args = new Array(_len6), _key6 = 0; _key6 < _len6; _key6++) {
+                  args[_key6] = arguments[_key6];
+                }
+
+                _this6 = _Component6.call.apply(_Component6, _concatInstanceProperty(_context19 = [this]).call(_context19, args)) || this;
+                _this6.Test = Test;
+                _this6.Dialog = Dialog;
+                return _this6;
+              }
+
+              var _proto2 = Demo.prototype;
+
+              _proto2.showTest = function showTest() {
+                this.set('testShow', true);
+              };
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "\n                const { Test, Dialog } = this;\n                <Dialog v-model=\"show\">\n                    <div ev-click={this.showTest}>click</div>\n                    <Test v-model=\"testShow\" /> \n                </Dialog>\n            ";
+
+            __decorate([bind], Demo.prototype, "showTest", null);
+
+            _mount14 = mount(Demo), instance = _mount14[0], element = _mount14[1];
+            instance.set('show', true);
+            _context20.next = 9;
+            return wait();
+
+          case 9:
+            instance.showTest();
+            _context20.next = 12;
+            return wait();
+
+          case 12:
+            _getElements = getElements('.k-dialog'), dialog1 = _getElements[0], dialog2 = _getElements[1];
+            expect(dialog2.querySelector('.k-dialog-body').textContent).to.eql('test');
+
+          case 14:
+          case "end":
+            return _context20.stop();
+        }
+      }
+    }, _callee14);
   }))); // 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/components/dialog/styles.js

@@ -92,7 +92,7 @@ export function makeDialogStyles(k) {
 export 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);}");
+  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) {
   var _context2;

package/components/drawer/index.d.ts

@@ -5,7 +5,7 @@ export interface DrawerProps extends BaseDialogProps {
     placement?: Placement;
 }
 export declare class Drawer extends BaseDialog<DrawerProps> {
-    static template: string | import("intact").Template<any>;
+    static template: string | import('intact-react').Template<any>;
     static typeDefs: Required<TypeDefs<DrawerProps>>;
     static defaults: () => Partial<DrawerProps>;
 }

package/components/drawer/index.spec.js

@@ -5,7 +5,7 @@ import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
 import BasicDemo from '~/components/drawer/demos/basic';
 import PlacementDemo from '~/components/drawer/demos/placement';
 import overlayDemo from '~/components/drawer/demos/overlay';
-import { mount, unmount, dispatchEvent, getElement, wait } from '../../test/utils';
+import { mount, unmount, dispatchEvent, getElement, wait, getElements } from '../../test/utils';
 import { Component } from 'intact-react';
 import { Drawer } from '.';
 import { Dialog } from '../dialog';
@@ -165,7 +165,7 @@ describe('Drawer', function () {
     }, _callee4);
   })));
   it('nested dialog', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
-    var Demo, _mount4, instance, element;
+    var Demo, _mount4, instance, element, _getElements, dialog1, dialog2;
 
     return _regeneratorRuntime.wrap(function _callee5$(_context6) {
       while (1) {
@@ -198,9 +198,11 @@ describe('Drawer', function () {
             return wait();
 
           case 5:
-            expect(instance.refs.dialog.dialogRef.value.parentElement.parentElement).to.eql(document.body);
+            // expect(instance.refs.dialog.dialogRef.value.parentElement.parentElement).to.eql(document.body);
+            _getElements = getElements('.k-dialog'), dialog1 = _getElements[0], dialog2 = _getElements[1];
+            expect(dialog2.querySelector('.k-dialog-body').textContent).to.eql('Dialog');
 
-          case 6:
+          case 7:
           case "end":
             return _context6.stop();
         }

package/components/dropdown/item.d.ts

@@ -12,7 +12,7 @@ export interface DropdownItemEvents {
     mouseleave: [MouseEvent];
 }
 export declare class DropdownItem extends Component<DropdownItemProps, DropdownItemEvents> {
-    static template: string | import("intact").Template<any>;
+    static template: string | import('intact-react').Template<any>;
     static typeDefs: Required<TypeDefs<DropdownItemProps>>;
     static defaults: () => Partial<DropdownItemProps>;
     parentDropdown?: Dropdown;

package/components/dropdown/menu.d.ts

@@ -8,7 +8,7 @@ export interface DropdownMenuBlocks {
 }
 export declare const DROPDOWN_MENU = "DropdownMenu";
 export declare class DropdownMenu<T extends DropdownMenuProps = DropdownMenuProps, E extends DropdownMenuEvents = DropdownMenuEvents, B extends DropdownMenuBlocks = DropdownMenuBlocks> extends Component<T, E, B> {
-    static template: string | import("intact").Template<any>;
+    static template: string | import('intact-react').Template<any>;
     elementRef: RefObject<HTMLDivElement>;
     dropdown: Dropdown;
     keyboard: {

package/components/dropdown/menu.vdt.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 import { createUnknownComponentVNode as _$cc, createElementVNode as _$ce, noop as _$no, className as _$cn } from 'intact-react';
-import { Transition } from 'intact';
+import { Transition } from 'intact-react';
 import { makeMenuStyles } from './styles';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;

package/components/editable/index.d.ts

@@ -16,7 +16,7 @@ export interface EditableEvents<V extends Value = Value> {
     change: [string, V | undefined];
 }
 export declare class Editable<V extends Value = Value> extends Component<EditableProps<V>, EditableEvents<V>> {
-    static template: string | import("intact").Template<any>;
+    static template: string | import('intact-react').Template<any>;
     static typeDefs: Required<TypeDefs<EditableProps<Value>>>;
     static defaults: () => Partial<EditableProps<Value>>;
     static events: Events<EditableEvents<Value>>;

package/components/form/form.d.ts

@@ -23,7 +23,7 @@ export interface FormEvents {
 export declare const FORM = "Form";
 export declare const RECORD_KEY = "FormRecord";
 export declare class Form extends Component<FormProps, FormEvents> {
-    static template: string | import("intact").Template<any>;
+    static template: string | import('intact-react').Template<any>;
     static typeDefs: Required<TypeDefs<Omit<FormProps, keyof FormHTMLAttributes>>>;
     static defaults: () => Partial<FormProps>;
     static addMethod: (name: string, method: import("./methods").Method, message?: import("./methods").Message | undefined, className?: import("./methods").ClassName | undefined) => void;

package/components/form/item.d.ts

@@ -22,7 +22,7 @@ export interface FormItemBlocks {
 }
 export declare type Rules = Record<string, any>;
 export declare class FormItem extends Component<FormItemProps, FormItemEvents, FormItemBlocks> {
-    static template: string | import("intact").Template<any>;
+    static template: string | import('intact-react').Template<any>;
     static typeDefs: Required<TypeDefs<FormItemProps>>;
     private form;
     private error;

package/components/form/item.vdt.js

@@ -3,7 +3,7 @@ import { createVNode as _$cv, className as _$cn, createElementVNode as _$ce, noo
 import { getRestProps } from '../utils';
 import { Tooltip } from '../tooltip';
 import { Icon } from '../icon';
-import { Transition } from 'intact';
+import { Transition } from 'intact-react';
 import { makeItemStyles } from './styles';
 import { context as ErrorContext } from './useError';
 export default function ($props, $blocks, $__proto__) {

package/components/form/useError.d.ts

@@ -1,12 +1,12 @@
 export declare const context: {
-    Provider: import('intact-react').ComponentConstructor<import("intact").Component<import("../context").ProviderProps<any>, {}, {}, {}>>;
-    Consumer: import("intact").ComponentConstructor<import("intact").Component<import("../context").ConsumerProps<any>, {}, {}, {}>>;
-    useContext: () => import("intact").RefObject<any>;
+    Provider: import('intact-react').ComponentConstructor<import('intact-react').Component<import("../context").ProviderProps<any>, {}, {}, {}>>;
+    Consumer: import('intact-react').ComponentConstructor<import('intact-react').Component<import("../context").ConsumerProps<any>, {}, {}, {}>>;
+    useContext: () => import('intact-react').RefObject<any>;
 };
 export declare function useError(): {
     ellipsis: import("../../hooks/useState").State<boolean>;
     message: import("../../hooks/useState").State<string | undefined>;
-    errorRef: import("intact").RefObject<HTMLDivElement>;
+    errorRef: import('intact-react').RefObject<HTMLDivElement>;
     getErrorMessage: (key: string) => string;
     getErrorClassName: (key: string) => string;
     reset: () => void;

package/components/grid/col.d.ts

@@ -11,7 +11,7 @@ export declare type BreakpointProps = BreakpointValues<keyof BaseColProps>;
 export declare type ColProps = BaseColProps & BreakpointProps;
 export declare const baseTypeDefs: Required<TypeDefs<BaseColProps>>;
 export declare class Col extends Component<ColProps> {
-    static template: string | import("intact").Template<any>;
+    static template: string | import('intact-react').Template<any>;
     static typeDefs: Required<TypeDefs<ColProps>>;
     private breakpoints;
     private config;

package/components/grid/row.d.ts

@@ -6,7 +6,7 @@ export interface RowProps {
     align?: 'top' | 'bottom' | 'middle' | 'stretch' | 'baseline';
 }
 export declare class Row extends Component<RowProps> {
-    static template: string | import("intact").Template<any>;
+    static template: string | import('intact-react').Template<any>;
     static typeDefs: Required<TypeDefs<RowProps>>;
     private gutter;
     private config;

package/components/grid/useGutter.d.ts

@@ -1,7 +1,7 @@
 export declare const context: {
-    Provider: import('intact-react').ComponentConstructor<import("intact").Component<import("../context").ProviderProps<number>, {}, {}, {}>>;
-    Consumer: import("intact").ComponentConstructor<import("intact").Component<import("../context").ConsumerProps<number>, {}, {}, {}>>;
-    useContext: () => import("intact").RefObject<number | undefined>;
+    Provider: import('intact-react').ComponentConstructor<import('intact-react').Component<import("../context").ProviderProps<number>, {}, {}, {}>>;
+    Consumer: import('intact-react').ComponentConstructor<import('intact-react').Component<import("../context").ConsumerProps<number>, {}, {}, {}>>;
+    useContext: () => import('intact-react').RefObject<number | undefined>;
 };
 export declare function useGutter(): {
     getGutter: () => import("./constants").PrimitiveValue | null | undefined;

package/components/icon/index.d.ts

@@ -9,7 +9,7 @@ export interface IconProps {
 }
 export declare class Icon extends Component<IconProps> {
     static displayName: string;
-    static template: string | import("intact").Template<any>;
+    static template: string | import('intact-react').Template<any>;
     static typeDefs: Required<TypeDefs<IconProps>>;
     static defaults: () => Partial<IconProps>;
     private colors;

package/components/input/index.d.ts

@@ -50,7 +50,7 @@ export interface InputBlocks {
     append: null;
 }
 export declare class Input<V extends Value = Value> extends Component<InputProps<V>, InputEvents, InputBlocks> {
-    static template: string | import("intact").Template<any>;
+    static template: string | import('intact-react').Template<any>;
     static typeDefs: Required<TypeDefs<Omit<InputProps<Value>, keyof InputHTMLAttributes>>>;
     static defaults: () => Partial<InputProps<Value>>;
     static events: Events<InputEvents>;

package/components/input/search.d.ts

@@ -11,7 +11,7 @@ export interface SearchEvents {
     submit: [string];
 }
 export declare class Search extends Component<SearchProps, SearchEvents> {
-    static template: string | import("intact").Template<any>;
+    static template: string | import('intact-react').Template<any>;
     static typeDefs: Required<TypeDefs<SearchProps>>;
     static defaults: () => Partial<SearchProps>;
     private elementRef;

package/components/input/styles.js

@@ -132,7 +132,7 @@ setDefault(function () {
 export function makeStyles(k) {
   var _context;
 
-  return /*#__PURE__*/css("display:inline-block;width:", input.width, ";color:", input.color, ";vertical-align:middle;.", k, "-input-wrapper{display:inline-flex;align-items:center;width:100%;position:relative;border:", input.border, ";background-color:", input.bgColor, ";transition:border ", input.transition, ",background ", input.transition, ",box-shadow ", input.transition, ";border-radius:", input.borderRadius, ";&:hover{border:", input.hoverBorder, ";z-index:1;}}&.", k, "-focus .", k, "-input-wrapper{border:", input.focusBorder, ";z-index:1;}.", k, "-input-inner{flex:1;outline:none;color:inherit;font-size:inherit;border:none;background:transparent;padding:0;width:0;&::placeholder{color:", input.placeholderColor, ";}}&.", k, "-fluid{width:100%;}.", k, "-input-prefix,.", k, "-input-suffix{display:flex;align-items:center;gap:", input.clearIconGap, ";color:", theme.color.lightBlack, ";position:relative;}.", k, "-input-prefix{margin-right:", input.clearIconGap, ";}.", k, "-input-suffix{margin-left:", input.clearIconGap, ";}.", k, "-input-clear{opacity:0;transition:opacity ", input.transition, ";pointer-events:none;color:", input.clearIconColor, ";}&:hover .", k, "-input-clear.", k, "-input-show{opacity:1;pointer-events:all;}.", k, "-input-show-password{color:", input.clearIconColor, ";}&.", k, "-stack-clear{.", k, "-input-clear{position:absolute;z-index:1;right:0;&.", k, "-input-show+*{transition:opacity ", input.transition, ";}}&:hover{.", k, "-input-clear.", k, "-input-show+*{opacity:0;}}}&.", k, "-group{display:inline-flex;.", k, "-input-wrapper{border-radius:0;}.", k, "-input-wrapper:first-child{border-radius:", input.borderRadius, " 0 0 ", input.borderRadius, ";}.", k, "-input-wrapper:last-child{border-radius:0 ", input.borderRadius, " ", input.borderRadius, " 0;}}.", k, "-input-prepend,.", k, "-input-append{display:inline-flex;align-items:center;background-color:", input.groupBgColor, ";border:", input.border, ";white-space:nowrap;.", k, "-btn{margin:-1px;border:none;&.", k, "-none:hover{background:transparent;}}.", k, "-select{margin:-1px;text-align:left;}}.", k, "-input-prepend{&,.", k, "-btn,.", k, "-select{z-index:1;border-radius:", input.borderRadius, " 0 0 ", input.borderRadius, ";}}.", k, "-input-append{&,.", k, "-btn,.", k, "-select{z-index:1;border-radius:0 ", input.borderRadius, " ", input.borderRadius, " 0;}}.", k, "-input-padding{padding:0 ", input.groupPaddingGap, ";}.", k, "-input-prepend{border-right:none;}.", k, "-input-append{border-left:none;}&.", k, "-flat{color:", _flatInstanceProperty(input).color, ";.", k, "-input-wrapper{border:none;background:", _flatInstanceProperty(input).bgColor, ";}}&.", k, "-disabled{color:", input.disabledColor, ";cursor:not-allowed;.", k, "-input-wrapper{border-color:", input.disabledBorderColor, ";background:", input.disabledBgColor, ";}.", k, "-input-inner{cursor:not-allowed;}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+  return /*#__PURE__*/css("display:inline-block;width:", input.width, ";color:", input.color, ";vertical-align:middle;.", k, "-input-wrapper{display:inline-flex;align-items:center;width:100%;position:relative;border:", input.border, ";background-color:", input.bgColor, ";transition:border ", input.transition, ",background ", input.transition, ",box-shadow ", input.transition, ";border-radius:", input.borderRadius, ";&:hover{border:", input.hoverBorder, ";z-index:1;}}&.", k, "-focus .", k, "-input-wrapper{border:", input.focusBorder, ";z-index:1;}.", k, "-input-inner{flex:1;outline:none;color:inherit;font-size:inherit;border:none;background:transparent;padding:0;width:0;&::placeholder{color:", input.placeholderColor, ";}}&.", k, "-fluid{width:100%;}.", k, "-input-prefix,.", k, "-input-suffix{display:flex;align-items:center;gap:", input.clearIconGap, ";color:", theme.color.lightBlack, ";position:relative;}.", k, "-input-prefix{margin-right:", input.clearIconGap, ";}.", k, "-input-suffix{margin-left:", input.clearIconGap, ";}.", k, "-input-clear{opacity:0;transition:opacity ", input.transition, ";pointer-events:none;color:", input.clearIconColor, ";}&:hover .", k, "-input-clear.", k, "-input-show{opacity:1;pointer-events:all;}.", k, "-input-show-password{color:", input.clearIconColor, ";}&.", k, "-stack-clear{.", k, "-input-clear{position:absolute;z-index:1;right:0;&.", k, "-input-show+*{transition:opacity ", input.transition, ";}}&:hover{.", k, "-input-clear.", k, "-input-show+*{opacity:0;}}}&.", k, "-group{display:inline-flex;.", k, "-input-wrapper{border-radius:0;flex:1;}.", k, "-input-wrapper:first-child{border-radius:", input.borderRadius, " 0 0 ", input.borderRadius, ";}.", k, "-input-wrapper:last-child{border-radius:0 ", input.borderRadius, " ", input.borderRadius, " 0;}}.", k, "-input-prepend,.", k, "-input-append{display:inline-flex;align-items:center;background-color:", input.groupBgColor, ";border:", input.border, ";white-space:nowrap;.", k, "-btn{margin:-1px;&.", k, "-none:hover{background:transparent;}}.", k, "-select{margin:-1px;text-align:left;}}.", k, "-input-prepend{&,.", k, "-btn,.", k, "-select{z-index:1;border-radius:", input.borderRadius, " 0 0 ", input.borderRadius, ";}}.", k, "-input-append{&,.", k, "-btn,.", k, "-select{z-index:1;border-radius:0 ", input.borderRadius, " ", input.borderRadius, " 0;}}.", k, "-input-padding{padding:0 ", input.groupPaddingGap, ";}.", k, "-input-prepend{border-right:none;}.", k, "-input-append{border-left:none;}&.", k, "-flat{color:", _flatInstanceProperty(input).color, ";.", k, "-input-wrapper{border:none;background:", _flatInstanceProperty(input).bgColor, ";}}&.", k, "-disabled{color:", input.disabledColor, ";cursor:not-allowed;.", k, "-input-wrapper{border-color:", input.disabledBorderColor, ";background:", input.disabledBgColor, ";}.", k, "-input-inner{cursor:not-allowed;}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var styles = input[size];
     var sizeClassName = /*#__PURE__*/css("font-size:", styles.fontSize, ";.", k, "-input-wrapper{height:", styles.height, ";padding:0 ", styles.paddingGap, ";}");
     if (size === 'default') return sizeClassName;

package/components/layout/aside.d.ts

@@ -8,7 +8,7 @@ export interface AsideProps {
     collapsedWidth?: number | string;
 }
 export declare class Aside extends Component<AsideProps> {
-    static template: string | import("intact").Template<any>;
+    static template: string | import('intact-react').Template<any>;
     static typeDefs: Required<TypeDefs<AsideProps>>;
     static defaults: () => Partial<AsideProps>;
     private rootLayout;

package/components/layout/aside.vdt.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 import { createElementVNode as _$ce, className as _$cn, createVNode as _$cv } from 'intact-react';
-import { directClone } from 'intact';
+import { directClone } from 'intact-react';
 import { mapChildren, getRestProps } from '../utils';
 import { Menu } from '../menu';
 import { makeAsideStyles } from './styles';

package/components/layout/body.d.ts

@@ -1,6 +1,6 @@
 import { Component } from 'intact-react';
 export declare class Body extends Component {
-    static template: string | import("intact").Template<any>;
+    static template: string | import('intact-react').Template<any>;
     private layout;
     private config;
     init(): void;

package/components/layout/footer.d.ts

@@ -1,6 +1,6 @@
 import { Component } from 'intact-react';
 export declare class Footer extends Component {
-    static template: string | import("intact").Template<any>;
+    static template: string | import('intact-react').Template<any>;
     private config;
     private getClassNames;
 }

package/components/layout/header.d.ts

@@ -9,7 +9,7 @@ export interface HeaderProps {
     boxShadow?: boolean;
 }
 export declare class Header extends Component<HeaderProps> {
-    static template: string | import("intact").Template<any>;
+    static template: string | import('intact-react').Template<any>;
     static typeDefs: Required<TypeDefs<HeaderProps>>;
     static defaults: () => Partial<HeaderProps>;
     private rootLayout;

package/components/layout/layout.d.ts

@@ -1,6 +1,6 @@
 import { Component } from 'intact-react';
 export declare class Layout extends Component {
-    static template: string | import("intact").Template<any>;
+    static template: string | import('intact-react').Template<any>;
     parse: () => {
         hasAside: boolean;
         hasFixedHeader: boolean;

package/components/menu/item.d.ts

@@ -13,7 +13,7 @@ export interface MenuItemEvents {
 }
 export declare const MENU_ITEM = "MenuItem";
 export declare class MenuItem extends Component<MenuItemProps, MenuItemEvents> {
-    static template: string | import("intact").Template<any>;
+    static template: string | import('intact-react').Template<any>;
     static typeDefs: Required<TypeDefs<MenuItemProps>>;
     static events: Events<MenuItemEvents>;
     rootMenu: Menu<Key>;

package/components/menu/item.vdt.js

@@ -1,13 +1,13 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 import { createElementVNode as _$ce, createUnknownComponentVNode as _$cc, className as _$cn, createVNode as _$cv, extend as _$ex, EMPTY_OBJ as _$em } from 'intact-react';
-import { directClone, Transition } from 'intact';
+import { directClone, Transition } from 'intact-react';
 import { Dropdown, DropdownItem } from '../dropdown';
 import { Tooltip } from '../tooltip';
 import { Icon } from '../icon';
 import { Menu } from './menu';
 import { getRestProps, expandAnimationCallbacks } from '../utils';
 import { isNullOrUndefined } from 'intact-shared';
-import { makeItemStyles, makeTitleStyles } from './styles';
+import { makeItemStyles, makeTitleStyles, makeNestedMenuStyles } from './styles';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj,
       _this = this;
@@ -67,7 +67,27 @@ export default function ($props, $blocks, $__proto__) {
     'show': isExpanded,
     'key': 'subMenu'
   }, expandAnimationCallbacks, {
-    'children': subMenuVNode
+    'children': function () {
+      if (subMenuVNode) {
+        var _$cn3;
+
+        var paddingLeft = _this.parentMenu.get('_paddingLeft');
+
+        var _makeNestedMenuStyles = makeNestedMenuStyles(k, showDot || !!iconVNode, paddingLeft),
+            _classname = _makeNestedMenuStyles[0],
+            _paddingLeft = _makeNestedMenuStyles[1];
+
+        var _className = _$cn((_$cn3 = {}, _$cn3[_classname] = true, _$cn3[subMenuVNode.className] = subMenuVNode.className, _$cn3));
+
+        var clonedVNode = directClone(subMenuVNode);
+        clonedVNode.props = _extends({}, clonedVNode.props, {
+          className: _className,
+          _paddingLeft: _paddingLeft
+        });
+        clonedVNode.className = _className;
+        return clonedVNode;
+      }
+    }()
   }), 'subMenu')] : !subMenuVNode ? isTopItem && isCollapse ? _$cc(Tooltip, {
     'position': rootMenu.get('type') !== 'horizontal' ? 'right' : 'bottom',
     'theme': rootMenu.get('theme') === 'dark' ? 'dark' : 'light',

package/components/menu/menu.d.ts

@@ -9,6 +9,7 @@ export interface MenuProps<K extends Key = Key> {
     size?: 'large' | 'default' | 'small';
     accordion?: boolean;
     dot?: boolean;
+    _paddingLeft?: string;
 }
 export interface MenuEvents {
 }
@@ -18,7 +19,7 @@ export interface MenuBlocks {
 export declare const MENU = "Menu";
 export declare const ROOT_MENU = "RootMenu";
 export declare class Menu<K extends Key = Key> extends Component<MenuProps<K>, MenuEvents, MenuBlocks> {
-    static template: string | import("intact").Template<any>;
+    static template: string | import('intact-react').Template<any>;
     static typeDefs: Required<TypeDefs<MenuProps<Key>>>;
     static defaults: () => Partial<MenuProps<Key>>;
     rootMenu: Menu<Key> | null;

package/components/menu/menu.js

@@ -12,7 +12,8 @@ var typeDefs = {
   type: ['vertical', 'horizontal'],
   size: ['large', 'default', 'small'],
   accordion: Boolean,
-  dot: Boolean
+  dot: Boolean,
+  _paddingLeft: String
 };
 
 var defaults = function defaults() {

package/components/menu/menu.vdt.js

@@ -44,7 +44,7 @@ export default function ($props, $blocks, $__proto__) {
   }), 0, _$cn((_$cn2 = {}, _$cn2[k + "-menu-header"] = true, _$cn2[makeTitleStyles(k)] = true, _$cn2))) : undefined, children];
   return !isDropdownMenu ? _$cv('div', _extends({}, getRestProps(this), {
     'className': _$cn(classNameObj)
-  }), [content, null]) : _$cc(DropdownMenu, _extends({}, getRestProps(this), {
+  }), content) : _$cc(DropdownMenu, _extends({}, getRestProps(this), {
     'className': _$cn(classNameObj),
     'children': content
   }));

package/components/menu/styles.d.ts

@@ -65,3 +65,4 @@ export { menu };
 export declare function makeMenuStyles(k: string): string;
 export declare function makeTitleStyles(k: string): string;
 export declare function makeItemStyles(k: string): string;
+export declare function makeNestedMenuStyles(k: string, hasIcon: boolean, parentPaddingLeft?: string): string[];

package/components/menu/styles.js

@@ -122,7 +122,7 @@ export function makeMenuStyles(k) {
 
   // we must increase the priority by adding &.${k}-menu
   // to override the css of dropdownMenu
-  return /*#__PURE__*/css("&.", k, "-menu{width:", menu.width, ";transition:width ", menu.transition, ";background:", menu.bgColor, ";font-size:", menu.fontSize, ";}&:not(.", k, "-dropdown-menu) &:not(.", k, "-dropdown-menu){width:auto;background:", menu.subBgColor, ";.", k, "-menu-title{padding-left:calc(", getLeft(menu.item.padding), " + ", menu.icon.width, " + ", menu.icon.gap, ");}}&:not(.", k, "-dropdown-menu) &:not(.", k, "-dropdown-menu) &:not(.", k, "-dropdown-menu){.", k, "-menu-title{padding-left:calc(", getLeft(menu.item.padding), " + ", menu.icon.width, " * 2 + ", menu.icon.gap, ");}}.", k, "-icon{width:", menu.icon.width, ";margin-right:", menu.icon.gap, ";text-align:center;flex-shrink:0;}.", k, "-menu-header{height:", menu.header.height, ";font-size:", menu.header.fontSize, ";font-weight:bold;border-bottom:", menu.header.borderBottom, ";}", _mapInstanceProperty(_context = ['light', 'white']).call(_context, function (theme) {
+  return /*#__PURE__*/css("&.", k, "-menu{width:", menu.width, ";transition:width ", menu.transition, ";background:", menu.bgColor, ";font-size:", menu.fontSize, ";}.", k, "-icon{width:", menu.icon.width, ";margin-right:", menu.icon.gap, ";text-align:center;flex-shrink:0;}.", k, "-menu-header{height:", menu.header.height, ";font-size:", menu.header.fontSize, ";font-weight:bold;border-bottom:", menu.header.borderBottom, ";}", _mapInstanceProperty(_context = ['light', 'white']).call(_context, function (theme) {
     var styles = menu[theme];
     return /*#__PURE__*/css("&.", k, "-", theme, "{background:", styles.bgColor, ";.", k, "-menu-header{color:", styles.item.color, ";border-bottom:", styles.border, ";}.", k, "-menu-item{.", k, "-menu-title{color:", styles.item.color, ";&:hover{color:", styles.item.hoverColor, ";}}&.", k, "-highlighted{>.", k, "-menu-title{color:", styles.item.hoverColor, ";}}&.", k, "-disabled{>.", k, "-menu-title{color:", styles.item.disabledColor, "!important;}}}.", k, "-menu:not(.", k, "-dropdown-menu){background:", styles.subBgColor, ";}&.", k, "-horizontal{.", k, "-menu-header{border-right:", styles.border, ";}}}");
   }), " &.", k, "-white{.", k, "-menu-item.", k, "-active{>.", k, "-menu-title{color:", menu.white.active.color, "!important;background:", menu.white.active.bgColor, ";}}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
@@ -136,5 +136,13 @@ export function makeTitleStyles(k) {
 }
 export function makeItemStyles(k) {
   var item = menu.item;
-  return /*#__PURE__*/css(".", k, "-menu-title{cursor:pointer;height:", menu.item.height, ";transition:all ", menu.transition, ";&:hover{color:", menu.item.hoverColor, ";}}.", k, "-menu-name{flex:1;display:flex;align-items:center;min-width:0;span{overflow:hidden;text-overflow:ellipsis;min-width:0;}}.", k, "-menu-arrow{transition:transform ", menu.transition, ";margin:0 0 0 ", menu.icon.gap, ";}&.", k, "-expanded{>.", k, "-menu-title{color:", menu.item.hoverColor, ";.", k, "-menu-arrow{transform:rotateX(180deg);}}}&.", k, "-highlighted{>.", k, "-menu-title{color:", menu.item.hoverColor, ";}}&.", k, "-active{>.", k, "-menu-title{color:", menu.item.hoverColor, "!important;background:", menu.item.activeBgColor, ";}}&.", k, "-disabled{>.", k, "-menu-title{color:", menu.item.disabledColor, "!important;cursor:not-allowed;}}.", k, "-menu-dot{font-size:", menu.item.dotFontSize, ";transform:scale(.4);}");
+  return /*#__PURE__*/css(".", k, "-menu-title{cursor:pointer;height:", menu.item.height, ";&:hover{color:", menu.item.hoverColor, ";}}.", k, "-menu-name{flex:1;display:flex;align-items:center;min-width:0;span{overflow:hidden;text-overflow:ellipsis;min-width:0;}.", k, "-icon{color:inherit;}}.", k, "-menu-arrow{transition:transform ", menu.transition, ";margin:0 0 0 ", menu.icon.gap, ";}&.", k, "-expanded{>.", k, "-menu-title{color:", menu.item.hoverColor, ";.", k, "-menu-arrow{transform:rotateX(180deg);}}}&.", k, "-highlighted{>.", k, "-menu-title{color:", menu.item.hoverColor, ";}}&.", k, "-active{>.", k, "-menu-title{color:", menu.item.hoverColor, "!important;background:", menu.item.activeBgColor, ";}}&.", k, "-disabled{>.", k, "-menu-title{color:", menu.item.disabledColor, "!important;cursor:not-allowed;}}.", k, "-menu-dot{font-size:", menu.item.dotFontSize, ";transform:scale(.4);}");
+}
+export function makeNestedMenuStyles(k, hasIcon, parentPaddingLeft) {
+  if (parentPaddingLeft === void 0) {
+    parentPaddingLeft = getLeft(menu.item.padding);
+  }
+
+  var paddingLeft = "" + parentPaddingLeft + (hasIcon ? ' + ' + menu.icon.width : '') + " + " + menu.icon.gap;
+  return [/*#__PURE__*/css("&.", k, "-menu{width:auto;background:", menu.subBgColor, ";.", k, "-menu-title{padding-left:calc(", paddingLeft, ");}}"), paddingLeft];
 }

package/components/menu/useDropdown.d.ts

@@ -5,7 +5,7 @@ import { ValidVNode } from '../utils';
 import { Options } from '../position';
 export declare function useDropdown(rootMenu: Menu, parentMenu: Menu): () => {
     isTopItem: boolean;
-    subMenuVNode: VNodeComponentClass<Menu<import("intact").Key>> | null;
+    subMenuVNode: VNodeComponentClass<Menu<import('intact-react').Key>> | null;
     isDropdownMenu: boolean;
     tooltipContents: ValidVNode[];
     iconVNode: VNodeComponentClass<Icon> | null;

package/components/menu/useDropdown.js

@@ -31,16 +31,13 @@ export function useDropdown(rootMenu, parentMenu) {
     eachChildren(children, function (vNode) {
       if (isComponentVNode(vNode, Menu)) {
         subMenuVNode = vNode;
-      } else if (isTopItem && isCollapse) {
-        if (isStringOrNumberNotEmpty(vNode) || isTextVNode(vNode)) {
-          tooltipContents.push(vNode);
-        } else if (!iconVNode && isComponentVNode(vNode, Icon)) {
-          iconVNode = vNode;
-        }
       } else {
         if (isStringOrNumberNotEmpty(vNode) || isTextVNode(vNode)) {
           // wrap with span for showing text ellipsis
           vNode = createVNode('span', null, vNode);
+          tooltipContents.push(vNode);
+        } else if (!iconVNode && isComponentVNode(vNode, Icon)) {
+          iconVNode = vNode;
         }
 
         titleVNodes.push(vNode);

package/components/message/message.d.ts

@@ -7,7 +7,7 @@ export interface MessageProps {
     hideIcon?: boolean;
 }
 export declare class Message extends Component<MessageProps> {
-    static template: string | import("intact").Template<any>;
+    static template: string | import('intact-react').Template<any>;
     static typeDefs: Required<TypeDefs<MessageProps>>;
     static defaults: () => Partial<MessageProps>;
     static notice(content: Children | Partial<MessageProps>, duration?: number, type?: MessageProps['type']): void;

package/components/message/messages.d.ts

@@ -1,7 +1,7 @@
 import { Component, VNodeComponentClass } from 'intact-react';
 import type { Message } from './message';
 export declare class Messages extends Component {
-    static template: string | import("intact").Template<any>;
+    static template: string | import('intact-react').Template<any>;
     private messages;
     private config;
     notice(message: VNodeComponentClass<Message>): void;

package/components/message/messages.vdt.js

@@ -1,5 +1,5 @@
 import { createElementVNode as _$ce, createUnknownComponentVNode as _$cc, map as _$ma, className as _$cn } from 'intact-react';
-import { TransitionGroup, Transition } from 'intact';
+import { TransitionGroup, Transition } from 'intact-react';
 import { makeMessagesStyles } from './styles';
 export default function ($props, $blocks, $__proto__) {
   var _$cn2;

package/components/pagination/index.d.ts

@@ -24,7 +24,7 @@ export declare type PaginationChangeData = {
     value: number;
 };
 export declare class Pagination extends Component<PaginationProps, PaginationEvents> {
-    static template: string | import("intact").Template<any>;
+    static template: string | import('intact-react').Template<any>;
     static typeDefs: Required<TypeDefs<PaginationProps>>;
     static defaults: () => Partial<PaginationProps>;
     static events: Events<PaginationEvents>;