@douyinfe/semi-foundation 2.75.0 → 2.75.1-alpha.0

package/cascader/cascader.scss

@@ -315,16 +315,20 @@ $module: #{$prefix}-cascader;
         border-bottom: $width-cascader_search-border solid $color-cascader_search-border-default;
     }
 
-    .#{$module}-option-empty {
+    .#{$module}-option-lists .#{$module}-option-empty {
         @include font-size-regular;
         border-radius: $radius-cascader_option_empty;
-        min-width: $width-cascader_option;
+        // min-width: $width-cascader_option;
         color: $color-cascader_option_empty-text-default;
         margin: 0;
         padding: $spacing-cascader_option_empty-paddingY $spacing-cascader_option_empty-paddingX;
         user-select: none;
         text-align: center;
         cursor: not-allowed;
+
+        &:hover {
+            background-color: transparent;
+        }
     }
 }
 
@@ -381,6 +385,8 @@ $module: #{$prefix}-cascader;
 
     &-empty {
         height: auto;
+        justify-content: center;
+        cursor: not-allowed;
     }
 
     ul,

package/cascader/foundation.ts

@@ -1,4 +1,4 @@
-import { isEqual, get, difference, isUndefined, assign, isEmpty, isNumber, includes, isFunction, isObject } from 'lodash';
+import { isEqual, get, difference, isUndefined, assign, isEmpty, isNumber, includes, isFunction, isObject, isString } from 'lodash';
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import {
     findAncestorKeys,
@@ -186,6 +186,7 @@ export interface BasicCascaderProps {
 }
 
 export interface BasicCascaderInnerData {
+    emptyContentMinWidth: number;
     isOpen: boolean;
     rePosKey: number;
     keyEntities: BasicEntities;
@@ -239,7 +240,9 @@ export interface CascaderAdapter extends DefaultAdapter<BasicCascaderProps, Basi
     updateLoadingKeyRefValue: (keys: Set<string>) => void;
     getLoadingKeyRefValue: () => Set<string>;
     updateLoadedKeyRefValue: (keys: Set<string>) => void;
-    getLoadedKeyRefValue: () => Set<string>
+    getLoadedKeyRefValue: () => Set<string>;
+    setEmptyContentMinWidth: (minWidth: number) => void;
+    getTriggerWidth: () => number;
 }
 
 export default class CascaderFoundation extends BaseFoundation<CascaderAdapter, BasicCascaderProps, BasicCascaderInnerData> {
@@ -259,6 +262,19 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
         }
     }
 
+    _setEmptyContentMinWidth() {
+        const { style } = this.getProps();
+        let width;
+        if (style && isNumber(style.width)) {
+            width = style.width;
+        } else if (style && isString(style.width) && !style.width.includes('%')) {
+            width = style.width;
+        } else {
+            width = this._adapter.getTriggerWidth();
+        }
+        this._adapter.setEmptyContentMinWidth(width);
+    }
+
     handleKeyDown = (e: any) => {
         if (e.key === ESC_KEY) {
             const isOpen = this.getState('isOpen');
@@ -531,6 +547,7 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
         }
         this._adapter.notifyDropdownVisibleChange(true);
         this._adapter.registerClickOutsideHandler(e => this.close(e));
+        this._setEmptyContentMinWidth();
     }
 
     reCalcActiveKeys() {

package/getBabelConfig.js

@@ -19,6 +19,7 @@ module.exports = ({ isESM }) => {
         ],
         plugins: [
             'lodash',
+            ...(isESM ? [] : ['./scripts/babel-plugin-lottie.js'])
         ]
     };
 };

package/lib/cjs/cascader/cascader.css

@@ -256,12 +256,11 @@
   padding: 8px 12px;
   border-bottom: 1px solid var(--semi-color-fill-0);
 }
-.semi-cascader-popover .semi-cascader-option-empty {
+.semi-cascader-popover .semi-cascader-option-lists .semi-cascader-option-empty {
   font-size: 14px;
   line-height: 20px;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
   border-radius: var(--semi-border-radius-medium);
-  min-width: 150px;
   color: var(--semi-color-disabled-text);
   margin: 0;
   padding: 8px 12px;
@@ -269,6 +268,9 @@
   text-align: center;
   cursor: not-allowed;
 }
+.semi-cascader-popover .semi-cascader-option-lists .semi-cascader-option-empty:hover {
+  background-color: transparent;
+}
 
 .semi-cascader-single.semi-cascader-filterable {
   display: inline-flex;
@@ -314,6 +316,8 @@
 }
 .semi-cascader-option-lists-empty {
   height: auto;
+  justify-content: center;
+  cursor: not-allowed;
 }
 .semi-cascader-option-lists ul,
 .semi-cascader-option-lists li {

package/lib/cjs/cascader/cascader.scss

@@ -315,16 +315,20 @@ $module: #{$prefix}-cascader;
         border-bottom: $width-cascader_search-border solid $color-cascader_search-border-default;
     }
 
-    .#{$module}-option-empty {
+    .#{$module}-option-lists .#{$module}-option-empty {
         @include font-size-regular;
         border-radius: $radius-cascader_option_empty;
-        min-width: $width-cascader_option;
+        // min-width: $width-cascader_option;
         color: $color-cascader_option_empty-text-default;
         margin: 0;
         padding: $spacing-cascader_option_empty-paddingY $spacing-cascader_option_empty-paddingX;
         user-select: none;
         text-align: center;
         cursor: not-allowed;
+
+        &:hover {
+            background-color: transparent;
+        }
     }
 }
 
@@ -381,6 +385,8 @@ $module: #{$prefix}-cascader;
 
     &-empty {
         height: auto;
+        justify-content: center;
+        cursor: not-allowed;
     }
 
     ul,

package/lib/cjs/cascader/foundation.d.ts

@@ -129,6 +129,7 @@ export interface BasicCascaderProps {
     onFocus?: (e: any) => void;
 }
 export interface BasicCascaderInnerData {
+    emptyContentMinWidth: number;
     isOpen: boolean;
     rePosKey: number;
     keyEntities: BasicEntities;
@@ -182,10 +183,13 @@ export interface CascaderAdapter extends DefaultAdapter<BasicCascaderProps, Basi
     getLoadingKeyRefValue: () => Set<string>;
     updateLoadedKeyRefValue: (keys: Set<string>) => void;
     getLoadedKeyRefValue: () => Set<string>;
+    setEmptyContentMinWidth: (minWidth: number) => void;
+    getTriggerWidth: () => number;
 }
 export default class CascaderFoundation extends BaseFoundation<CascaderAdapter, BasicCascaderProps, BasicCascaderInnerData> {
     constructor(adapter: CascaderAdapter);
     init(): void;
+    _setEmptyContentMinWidth(): void;
     handleKeyDown: (e: any) => void;
     destroy(): void;
     _isDisabled(): any;
@@ -244,16 +248,7 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
      */
     calcCheckedKeys(key: string, curCheckedStatus: boolean): {
         checkedKeys: Set<string>;
-        halfCheckedKeys: Set<string>; /**
-         * If selectedKeys does not meet the update conditions,
-         * and state.selectedKeys is the same as selectedKeys
-         * at this time, state.selectedKeys should be cleared.
-         * A typical scenario is:
-         * The originally selected node is the leaf node, but
-         * after props.treeData is dynamically updated, the node
-         * is a non-leaf node. At this point, selectedKeys should
-         * be cleared.
-         */
+        halfCheckedKeys: Set<string>;
     };
     handleInputChange(sugInput: string): void;
     handleClear(): void;

package/lib/cjs/cascader/foundation.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _isString2 = _interopRequireDefault(require("lodash/isString"));
 var _isObject2 = _interopRequireDefault(require("lodash/isObject"));
 var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
 var _includes2 = _interopRequireDefault(require("lodash/includes"));
@@ -68,6 +69,20 @@ class CascaderFoundation extends _foundation.default {
       this.open();
     }
   }
+  _setEmptyContentMinWidth() {
+    const {
+      style
+    } = this.getProps();
+    let width;
+    if (style && (0, _isNumber2.default)(style.width)) {
+      width = style.width;
+    } else if (style && (0, _isString2.default)(style.width) && !style.width.includes('%')) {
+      width = style.width;
+    } else {
+      width = this._adapter.getTriggerWidth();
+    }
+    this._adapter.setEmptyContentMinWidth(width);
+  }
   destroy() {
     this._adapter.unregisterClickOutsideHandler();
   }
@@ -335,6 +350,7 @@ class CascaderFoundation extends _foundation.default {
     }
     this._adapter.notifyDropdownVisibleChange(true);
     this._adapter.registerClickOutsideHandler(e => this.close(e));
+    this._setEmptyContentMinWidth();
   }
   reCalcActiveKeys() {
     const {

package/lib/cjs/lottie/foundation.js

@@ -5,8 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _foundation = _interopRequireDefault(require("../base/foundation"));
-var _lottieWeb = _interopRequireDefault(require("lottie-web"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _lottieWeb = undefined;
+if (typeof document !== "undefined") {
+  _lottieWeb = require("lottie-web");
+  if (_lottieWeb && _lottieWeb.__esModule) _lottieWeb = _lottieWeb.default;
+}
 class LottieFoundation extends _foundation.default {
   constructor(adapter) {
     super(Object.assign(Object.assign({}, LottieFoundation.defaultAdapter), adapter));
@@ -14,14 +18,14 @@ class LottieFoundation extends _foundation.default {
     this.handleParamsUpdate = () => {
       var _a;
       this.animation.destroy();
-      this.animation = _lottieWeb.default.loadAnimation(this._adapter.getLoadParams());
+      this.animation = lottie.loadAnimation(this._adapter.getLoadParams());
       (_a = this.getProp("getAnimationInstance")) === null || _a === void 0 ? void 0 : _a(this.animation);
     };
   }
   init(lifecycle) {
     var _a, _b;
     super.init(lifecycle);
-    this.animation = _lottieWeb.default.loadAnimation(this._adapter.getLoadParams());
+    this.animation = lottie.loadAnimation(this._adapter.getLoadParams());
     (_a = this.getProp("getAnimationInstance")) === null || _a === void 0 ? void 0 : _a(this.animation);
     (_b = this.getProp("getLottie")) === null || _b === void 0 ? void 0 : _b(LottieFoundation.getLottie());
   }
@@ -31,6 +35,6 @@ class LottieFoundation extends _foundation.default {
   }
 }
 LottieFoundation.getLottie = () => {
-  return _lottieWeb.default;
+  return lottie;
 };
 var _default = exports.default = LottieFoundation;

package/lib/cjs/navigation/foundation.js

@@ -38,6 +38,7 @@ class NavigationFoundation extends _foundation.default {
     let keysMap = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     let parentKeys = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
     let keyPropName = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'itemKey';
+    var _a;
     if (Array.isArray(items) && items.length) {
       for (const item of items) {
         if (Array.isArray(item)) {
@@ -49,10 +50,15 @@ class NavigationFoundation extends _foundation.default {
           }
           if (itemKey) {
             keysMap[itemKey] = [...parentKeys];
+            // Children is not a recommended usage and may cause some bug-like performance, but some users have already used it, so here we only delete the ts definition instead of deleting the actual code
+            // children 并不是我们推荐的用法，可能会导致一些像 bug的表现，但是有些用户已经用了，所以此处仅作删除 ts 定义而非删除实际代码的操作
+            // refer https://github.com/DouyinFE/semi-design/issues/2710
+            // @ts-ignore  
+            const itemChildren = (_a = item.props) === null || _a === void 0 ? void 0 : _a.children;
             if (Array.isArray(item.items) && item.items.length) {
               NavigationFoundation.buildItemKeysMap(item.items, keysMap, [...parentKeys, itemKey], keyPropName);
-            } else if (item.props && item.props.children) {
-              const children = Array.isArray(item.props.children) ? item.props.children : [item.props.children];
+            } else if (itemChildren) {
+              const children = Array.isArray(itemChildren) ? itemChildren : [itemChildren];
               NavigationFoundation.buildItemKeysMap(children, keysMap, [...parentKeys, itemKey], keyPropName);
             }
           }

package/lib/cjs/navigation/itemFoundation.d.ts

@@ -10,7 +10,6 @@ export interface ItemProps {
     link?: string;
     linkOptions?: Record<string, any>;
     disabled?: boolean;
-    children?: any;
 }
 export type ItemKey = string | number;
 export interface SelectedItemProps<Props = ItemProps> {

package/lib/es/cascader/cascader.css

@@ -256,12 +256,11 @@
   padding: 8px 12px;
   border-bottom: 1px solid var(--semi-color-fill-0);
 }
-.semi-cascader-popover .semi-cascader-option-empty {
+.semi-cascader-popover .semi-cascader-option-lists .semi-cascader-option-empty {
   font-size: 14px;
   line-height: 20px;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
   border-radius: var(--semi-border-radius-medium);
-  min-width: 150px;
   color: var(--semi-color-disabled-text);
   margin: 0;
   padding: 8px 12px;
@@ -269,6 +268,9 @@
   text-align: center;
   cursor: not-allowed;
 }
+.semi-cascader-popover .semi-cascader-option-lists .semi-cascader-option-empty:hover {
+  background-color: transparent;
+}
 
 .semi-cascader-single.semi-cascader-filterable {
   display: inline-flex;
@@ -314,6 +316,8 @@
 }
 .semi-cascader-option-lists-empty {
   height: auto;
+  justify-content: center;
+  cursor: not-allowed;
 }
 .semi-cascader-option-lists ul,
 .semi-cascader-option-lists li {

package/lib/es/cascader/cascader.scss

@@ -315,16 +315,20 @@ $module: #{$prefix}-cascader;
         border-bottom: $width-cascader_search-border solid $color-cascader_search-border-default;
     }
 
-    .#{$module}-option-empty {
+    .#{$module}-option-lists .#{$module}-option-empty {
         @include font-size-regular;
         border-radius: $radius-cascader_option_empty;
-        min-width: $width-cascader_option;
+        // min-width: $width-cascader_option;
         color: $color-cascader_option_empty-text-default;
         margin: 0;
         padding: $spacing-cascader_option_empty-paddingY $spacing-cascader_option_empty-paddingX;
         user-select: none;
         text-align: center;
         cursor: not-allowed;
+
+        &:hover {
+            background-color: transparent;
+        }
     }
 }
 
@@ -381,6 +385,8 @@ $module: #{$prefix}-cascader;
 
     &-empty {
         height: auto;
+        justify-content: center;
+        cursor: not-allowed;
     }
 
     ul,

package/lib/es/cascader/foundation.d.ts

@@ -129,6 +129,7 @@ export interface BasicCascaderProps {
     onFocus?: (e: any) => void;
 }
 export interface BasicCascaderInnerData {
+    emptyContentMinWidth: number;
     isOpen: boolean;
     rePosKey: number;
     keyEntities: BasicEntities;
@@ -182,10 +183,13 @@ export interface CascaderAdapter extends DefaultAdapter<BasicCascaderProps, Basi
     getLoadingKeyRefValue: () => Set<string>;
     updateLoadedKeyRefValue: (keys: Set<string>) => void;
     getLoadedKeyRefValue: () => Set<string>;
+    setEmptyContentMinWidth: (minWidth: number) => void;
+    getTriggerWidth: () => number;
 }
 export default class CascaderFoundation extends BaseFoundation<CascaderAdapter, BasicCascaderProps, BasicCascaderInnerData> {
     constructor(adapter: CascaderAdapter);
     init(): void;
+    _setEmptyContentMinWidth(): void;
     handleKeyDown: (e: any) => void;
     destroy(): void;
     _isDisabled(): any;
@@ -244,16 +248,7 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
      */
     calcCheckedKeys(key: string, curCheckedStatus: boolean): {
         checkedKeys: Set<string>;
-        halfCheckedKeys: Set<string>; /**
-         * If selectedKeys does not meet the update conditions,
-         * and state.selectedKeys is the same as selectedKeys
-         * at this time, state.selectedKeys should be cleared.
-         * A typical scenario is:
-         * The originally selected node is the leaf node, but
-         * after props.treeData is dynamically updated, the node
-         * is a non-leaf node. At this point, selectedKeys should
-         * be cleared.
-         */
+        halfCheckedKeys: Set<string>;
     };
     handleInputChange(sugInput: string): void;
     handleClear(): void;

package/lib/es/cascader/foundation.js

@@ -1,3 +1,4 @@
+import _isString from "lodash/isString";
 import _isObject from "lodash/isObject";
 import _isFunction from "lodash/isFunction";
 import _includes from "lodash/includes";
@@ -61,6 +62,20 @@ export default class CascaderFoundation extends BaseFoundation {
       this.open();
     }
   }
+  _setEmptyContentMinWidth() {
+    const {
+      style
+    } = this.getProps();
+    let width;
+    if (style && _isNumber(style.width)) {
+      width = style.width;
+    } else if (style && _isString(style.width) && !style.width.includes('%')) {
+      width = style.width;
+    } else {
+      width = this._adapter.getTriggerWidth();
+    }
+    this._adapter.setEmptyContentMinWidth(width);
+  }
   destroy() {
     this._adapter.unregisterClickOutsideHandler();
   }
@@ -328,6 +343,7 @@ export default class CascaderFoundation extends BaseFoundation {
     }
     this._adapter.notifyDropdownVisibleChange(true);
     this._adapter.registerClickOutsideHandler(e => this.close(e));
+    this._setEmptyContentMinWidth();
   }
   reCalcActiveKeys() {
     const {

package/lib/es/navigation/foundation.js

@@ -31,6 +31,7 @@ export default class NavigationFoundation extends BaseFoundation {
     let keysMap = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     let parentKeys = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
     let keyPropName = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'itemKey';
+    var _a;
     if (Array.isArray(items) && items.length) {
       for (const item of items) {
         if (Array.isArray(item)) {
@@ -42,10 +43,15 @@ export default class NavigationFoundation extends BaseFoundation {
           }
           if (itemKey) {
             keysMap[itemKey] = [...parentKeys];
+            // Children is not a recommended usage and may cause some bug-like performance, but some users have already used it, so here we only delete the ts definition instead of deleting the actual code
+            // children 并不是我们推荐的用法，可能会导致一些像 bug的表现，但是有些用户已经用了，所以此处仅作删除 ts 定义而非删除实际代码的操作
+            // refer https://github.com/DouyinFE/semi-design/issues/2710
+            // @ts-ignore  
+            const itemChildren = (_a = item.props) === null || _a === void 0 ? void 0 : _a.children;
             if (Array.isArray(item.items) && item.items.length) {
               NavigationFoundation.buildItemKeysMap(item.items, keysMap, [...parentKeys, itemKey], keyPropName);
-            } else if (item.props && item.props.children) {
-              const children = Array.isArray(item.props.children) ? item.props.children : [item.props.children];
+            } else if (itemChildren) {
+              const children = Array.isArray(itemChildren) ? itemChildren : [itemChildren];
               NavigationFoundation.buildItemKeysMap(children, keysMap, [...parentKeys, itemKey], keyPropName);
             }
           }

package/lib/es/navigation/itemFoundation.d.ts

@@ -10,7 +10,6 @@ export interface ItemProps {
     link?: string;
     linkOptions?: Record<string, any>;
     disabled?: boolean;
-    children?: any;
 }
 export type ItemKey = string | number;
 export interface SelectedItemProps<Props = ItemProps> {

package/navigation/foundation.ts

@@ -80,6 +80,11 @@ export default class NavigationFoundation<P = Record<string, any>, S = Record<st
                     }
                     if (itemKey) {
                         keysMap[itemKey] = [...parentKeys];
+                        // Children is not a recommended usage and may cause some bug-like performance, but some users have already used it, so here we only delete the ts definition instead of deleting the actual code
+                        // children 并不是我们推荐的用法，可能会导致一些像 bug的表现，但是有些用户已经用了，所以此处仅作删除 ts 定义而非删除实际代码的操作
+                        // refer https://github.com/DouyinFE/semi-design/issues/2710
+                        // @ts-ignore  
+                        const itemChildren = item.props?.children;
 
                         if (Array.isArray(item.items) && item.items.length) {
                             NavigationFoundation.buildItemKeysMap(
@@ -87,11 +92,11 @@ export default class NavigationFoundation<P = Record<string, any>, S = Record<st
                                 keysMap,
                                 [...parentKeys, itemKey],
                                 keyPropName
-                            );
-                        } else if (item.props && item.props.children) {
-                            const children = Array.isArray(item.props.children)
-                                ? item.props.children
-                                : [item.props.children];
+                            );  
+                        } else if (itemChildren) { 
+                            const children = Array.isArray(itemChildren) 
+                                ? itemChildren
+                                : [itemChildren];
                             NavigationFoundation.buildItemKeysMap(
                                 children,
                                 keysMap,

package/navigation/itemFoundation.ts

@@ -13,8 +13,7 @@ export interface ItemProps {
     isSubNav?: boolean;
     link?: string;
     linkOptions?: Record<string, any>;
-    disabled?: boolean;
-    children?: any
+    disabled?: boolean
 }
 
 export type ItemKey = string | number;

package/package.json

@@ -1,14 +1,14 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.75.0",
+    "version": "2.75.1-alpha.0",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
         "prepublishOnly": "npm run build:lib"
     },
     "dependencies": {
-        "@douyinfe/semi-animation": "2.75.0",
-        "@douyinfe/semi-json-viewer-core": "2.75.0",
+        "@douyinfe/semi-animation": "2.74.0",
+        "@douyinfe/semi-json-viewer-core": "2.74.0",
         "@mdx-js/mdx": "^3.0.1",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -29,7 +29,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "cd269c0f1d3a0af5a564109f22e3dc51dfd7691a",
+    "gitHead": "728ec65f284c2173b012475c0af90ac24dfa9c87",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",

package/scripts/babel-plugin-lottie.js

@@ -0,0 +1,58 @@
+module.exports = function (babel) {
+    const { types: t } = babel;
+    return {
+        visitor: {
+            ImportDeclaration(path) {
+                // 只处理 lottie-web 的导入
+                if (path.node.source.value === 'lottie-web') {
+                    // 创建变量声明
+                    const varDeclaration = t.variableDeclaration('var', [
+                        t.variableDeclarator(
+                            t.identifier('_lottieWeb'),
+                            t.identifier('undefined')
+                        )
+                    ]);
+
+                    // 创建条件语句
+                    const ifStatement = t.ifStatement(
+                        t.binaryExpression(
+                            '!==',
+                            t.unaryExpression('typeof', t.identifier('document')),
+                            t.stringLiteral('undefined')
+                        ),
+                        t.blockStatement([
+                            // _lottieWeb = require("lottie-web")
+                            t.expressionStatement(
+                                t.assignmentExpression(
+                                    '=',
+                                    t.identifier('_lottieWeb'),
+                                    t.callExpression(t.identifier('require'), [
+                                        t.stringLiteral('lottie-web')
+                                    ])
+                                )
+                            ),
+                            // if (_lottieWeb && _lottieWeb.__esModule) _lottieWeb = _lottieWeb.default
+                            t.ifStatement(
+                                t.logicalExpression(
+                                    '&&',
+                                    t.identifier('_lottieWeb'),
+                                    t.memberExpression(t.identifier('_lottieWeb'), t.identifier('__esModule'))
+                                ),
+                                t.expressionStatement(
+                                    t.assignmentExpression(
+                                        '=',
+                                        t.identifier('_lottieWeb'),
+                                        t.memberExpression(t.identifier('_lottieWeb'), t.identifier('default'))
+                                    )
+                                )
+                            )
+                        ])
+                    );
+
+                    path.insertBefore(varDeclaration);
+                    path.replaceWith(ifStatement);
+                }
+            }
+        }
+    };
+};