@douyinfe/semi-ui 2.38.2-alpha.1 → 2.38.2-alpha.2-patch-modal

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/dist/css/semi.css +45 -2
  2. package/dist/css/semi.min.css +1 -1
  3. package/dist/umd/semi-ui.js +78 -88
  4. package/dist/umd/semi-ui.js.map +1 -1
  5. package/dist/umd/semi-ui.min.js +1 -1
  6. package/dist/umd/semi-ui.min.js.map +1 -1
  7. package/lib/cjs/collapsible/index.d.ts +2 -0
  8. package/lib/cjs/collapsible/index.js +19 -11
  9. package/lib/cjs/dropdown/dropdownItem.js +11 -1
  10. package/lib/cjs/form/baseForm.d.ts +1 -1
  11. package/lib/cjs/form/field.d.ts +1 -1
  12. package/lib/cjs/input/textarea.js +1 -1
  13. package/lib/cjs/modal/Modal.js +9 -6
  14. package/lib/cjs/modal/ModalContent.js +5 -4
  15. package/lib/cjs/modal/confirm.d.ts +3 -3
  16. package/lib/cjs/scrollList/scrollItem.js +1 -1
  17. package/lib/cjs/select/option.js +2 -1
  18. package/lib/cjs/spin/icon.js +14 -51
  19. package/lib/cjs/table/Body/index.js +1 -1
  20. package/lib/cjs/table/TableCell.js +7 -1
  21. package/lib/cjs/table/interface.d.ts +9 -0
  22. package/lib/cjs/treeSelect/index.d.ts +1 -1
  23. package/lib/cjs/treeSelect/index.js +2 -2
  24. package/lib/es/collapsible/index.d.ts +2 -0
  25. package/lib/es/collapsible/index.js +19 -11
  26. package/lib/es/dropdown/dropdownItem.js +11 -1
  27. package/lib/es/form/baseForm.d.ts +1 -1
  28. package/lib/es/form/field.d.ts +1 -1
  29. package/lib/es/input/textarea.js +1 -1
  30. package/lib/es/modal/Modal.js +9 -6
  31. package/lib/es/modal/ModalContent.js +5 -4
  32. package/lib/es/modal/confirm.d.ts +3 -3
  33. package/lib/es/scrollList/scrollItem.js +1 -1
  34. package/lib/es/select/option.js +2 -1
  35. package/lib/es/spin/icon.js +14 -51
  36. package/lib/es/table/Body/index.js +1 -1
  37. package/lib/es/table/TableCell.js +7 -1
  38. package/lib/es/table/interface.d.ts +9 -0
  39. package/lib/es/treeSelect/index.d.ts +1 -1
  40. package/lib/es/treeSelect/index.js +2 -2
  41. package/package.json +8 -8
@@ -17854,14 +17854,9 @@ class AnchorFoundation extends foundation {
17854
17854
  */
17855
17855
  behavior: actions => {
17856
17856
  // We just need to scroll the innermost target container
17857
- const verticalScrollAction = actions.find(action => {
17858
- const {
17859
- el
17860
- } = action;
17861
- return el.scrollHeight > el.clientHeight;
17862
- });
17863
- const el = get_default()(verticalScrollAction, 'el');
17864
- const top = get_default()(verticalScrollAction, 'top');
17857
+ const innermostAction = get_default()(actions, '0');
17858
+ const el = get_default()(innermostAction, 'el');
17859
+ const top = get_default()(innermostAction, 'top');
17865
17860
  if (el) {
17866
17861
  const offsetTop = top - targetOffset;
17867
17862
  if (el.scroll && canSmoothScroll) {
@@ -18538,6 +18533,7 @@ class foundation_Tooltip extends foundation {
18538
18533
  this._adapter.unregisterClickOutsideHandler();
18539
18534
  this.unBindResizeEvent();
18540
18535
  this.unBindScrollEvent();
18536
+ clearTimeout(this._timer);
18541
18537
  }
18542
18538
  _bindTriggerEvent(triggerEventSet) {
18543
18539
  this._adapter.registerTriggerEvent(triggerEventSet);
@@ -27099,65 +27095,28 @@ var icon_rest = undefined && undefined.__rest || function (s, e) {
27099
27095
  };
27100
27096
  /* eslint-disable no-unused-vars */
27101
27097
 
27102
-
27103
- let _id = -1;
27104
27098
  function icon_Icon() {
27105
27099
  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
27106
27100
  const {
27107
- id: propsId,
27101
+ id,
27108
27102
  className
27109
27103
  } = props,
27110
27104
  rest = icon_rest(props, ["id", "className"]);
27111
- let _propsId = propsId;
27112
- if (isNullOrUndefined(_propsId)) {
27113
- _id++;
27114
- _propsId = _id;
27115
- }
27116
- const id = `linearGradient-${_propsId}`;
27117
27105
  return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("svg", Object.assign({}, rest, {
27118
27106
  className: className,
27119
- width: "48",
27120
- height: "48",
27121
- viewBox: "0 0 36 36",
27122
- version: "1.1",
27123
- xmlns: "http://www.w3.org/2000/svg",
27124
- "aria-hidden": true,
27125
- "data-icon": "spin"
27126
- }), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("defs", null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("linearGradient", {
27127
- x1: "0%",
27128
- y1: "100%",
27129
- x2: "100%",
27130
- y2: "100%",
27131
- id: id
27132
- }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("stop", {
27133
- stopColor: "currentColor",
27134
- stopOpacity: "0",
27135
- offset: "0%"
27136
- }), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("stop", {
27137
- stopColor: "currentColor",
27138
- stopOpacity: "0.50",
27139
- offset: "39.9430698%"
27140
- }), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("stop", {
27141
- stopColor: "currentColor",
27142
- offset: "100%"
27143
- }))), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("g", {
27144
- stroke: "none",
27145
- strokeWidth: "1",
27146
- fill: "none",
27147
- fillRule: "evenodd"
27148
- }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("rect", {
27149
- fillOpacity: "0.01",
27150
- fill: "none",
27151
- x: "0",
27152
- y: "0",
27153
- width: "36",
27154
- height: "36"
27155
- }), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("path", {
27156
- d: "M34,18 C34,9.163444 26.836556,2 18,2 C11.6597233,2 6.18078805,5.68784135 3.59122325,11.0354951",
27157
- stroke: `url(#${id})`,
27158
- strokeWidth: "4",
27159
- strokeLinecap: "round"
27160
- })));
27107
+ width: "100%",
27108
+ height: "100%",
27109
+ viewBox: "0 0 100 100"
27110
+ }), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("circle", {
27111
+ cx: "50",
27112
+ cy: "50",
27113
+ r: "35",
27114
+ stroke: "currentColor",
27115
+ strokeWidth: "11",
27116
+ strokeLinecap: "round",
27117
+ strokeMiterlimit: "10",
27118
+ fill: "none"
27119
+ }));
27161
27120
  }
27162
27121
  /* harmony default export */ const spin_icon = (icon_Icon);
27163
27122
  // EXTERNAL MODULE: ../semi-foundation/spin/spin.scss
@@ -44263,6 +44222,7 @@ var collapsible = __webpack_require__("v967");
44263
44222
 
44264
44223
 
44265
44224
 
44225
+
44266
44226
  class Collapsible extends BaseComponent {
44267
44227
  constructor(props) {
44268
44228
  super(props);
@@ -44286,7 +44246,8 @@ class Collapsible extends BaseComponent {
44286
44246
  domInRenderTree: false,
44287
44247
  domHeight: 0,
44288
44248
  visible: this.props.isOpen,
44289
- isTransitioning: false
44249
+ isTransitioning: false,
44250
+ cacheIsOpen: this.props.isOpen
44290
44251
  };
44291
44252
  this.foundation = new collapsible_foundation(this.adapter);
44292
44253
  }
@@ -44322,6 +44283,20 @@ class Collapsible extends BaseComponent {
44322
44283
  }
44323
44284
  });
44324
44285
  }
44286
+ static getDerivedStateFromProps(props, prevState) {
44287
+ const newState = {};
44288
+ const isOpenChanged = props.isOpen !== prevState.cacheIsOpen;
44289
+ if (isOpenChanged) {
44290
+ if (props.isOpen || !props.motion) {
44291
+ newState.visible = props.isOpen;
44292
+ }
44293
+ }
44294
+ if (props.motion && isOpenChanged) {
44295
+ newState.isTransitioning = true;
44296
+ }
44297
+ newState.cacheIsOpen = props.isOpen;
44298
+ return newState;
44299
+ }
44325
44300
  componentDidMount() {
44326
44301
  super.componentDidMount();
44327
44302
  this.resizeObserver = new ResizeObserver(this.handleResize);
@@ -44333,22 +44308,14 @@ class Collapsible extends BaseComponent {
44333
44308
  }
44334
44309
  }
44335
44310
  componentDidUpdate(prevProps, prevState, snapshot) {
44336
- const changedPropKeys = Object.keys(this.props).filter(key => !isEqual_default()(this.props[key], prevProps[key]));
44337
- const changedStateKeys = Object.keys(this.state).filter(key => !isEqual_default()(this.state[key], prevState[key]));
44311
+ const changedPropKeys = Object.keys(pick_default()(this.props, ['reCalcKey'])).filter(key => !isEqual_default()(this.props[key], prevProps[key]));
44312
+ const changedStateKeys = Object.keys(pick_default()(this.state, ['domInRenderTree'])).filter(key => !isEqual_default()(this.state[key], prevState[key]));
44338
44313
  if (changedPropKeys.includes("reCalcKey")) {
44339
44314
  this.foundation.updateDOMHeight(this.domRef.current.scrollHeight);
44340
44315
  }
44341
44316
  if (changedStateKeys.includes("domInRenderTree") && this.state.domInRenderTree) {
44342
44317
  this.foundation.updateDOMHeight(this.domRef.current.scrollHeight);
44343
44318
  }
44344
- if (changedPropKeys.includes("isOpen")) {
44345
- if (this.props.isOpen || !this.props.motion) {
44346
- this.foundation.updateVisible(this.props.isOpen);
44347
- }
44348
- }
44349
- if (this.props.motion && prevProps.isOpen !== this.props.isOpen) {
44350
- this.foundation.updateIsTransitioning(true);
44351
- }
44352
44319
  }
44353
44320
  componentWillUnmount() {
44354
44321
  super.componentWillUnmount();
@@ -53448,8 +53415,8 @@ class ScrollItem extends BaseComponent {
53448
53415
  key: prefixKey + index
53449
53416
  }, events, {
53450
53417
  className: cls,
53418
+ // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
53451
53419
  role: "option",
53452
- "aria-selected": selected,
53453
53420
  "aria-disabled": item.disabled
53454
53421
  }), text)
53455
53422
  );
@@ -57182,20 +57149,21 @@ class ModalContent extends BaseComponent {
57182
57149
  this.foundation.destroy();
57183
57150
  }
57184
57151
  render() {
57185
- const _a = this.props,
57152
+ var _a;
57153
+ const _b = this.props,
57186
57154
  {
57187
57155
  maskClosable,
57188
57156
  className,
57189
57157
  getPopupContainer,
57190
57158
  maskFixed,
57191
57159
  getContainerContext
57192
- } = _a,
57193
- rest = ModalContent_rest(_a, ["maskClosable", "className", "getPopupContainer", "maskFixed", "getContainerContext"]);
57160
+ } = _b,
57161
+ rest = ModalContent_rest(_b, ["maskClosable", "className", "getPopupContainer", "maskFixed", "getContainerContext"]);
57194
57162
  const {
57195
57163
  direction
57196
57164
  } = this.context;
57197
57165
  const classList = classnames_default()(className, {
57198
- [`${modal_constants_cssClasses.DIALOG}-popup`]: getPopupContainer && !maskFixed,
57166
+ [`${modal_constants_cssClasses.DIALOG}-popup`]: getPopupContainer && getPopupContainer() !== ((_a = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) === null || _a === void 0 ? void 0 : _a.body) && !maskFixed,
57199
57167
  [`${modal_constants_cssClasses.DIALOG}-fixed`]: maskFixed,
57200
57168
  [`${modal_constants_cssClasses.DIALOG}-rtl`]: direction === 'rtl'
57201
57169
  });
@@ -57596,7 +57564,8 @@ class Modal extends BaseComponent {
57596
57564
  // return <ModalContent {...restProps} footer={renderFooter} onClose={this.handleCancel}/>;
57597
57565
  // };
57598
57566
  this.renderDialog = () => {
57599
- let _a = this.props,
57567
+ var _a;
57568
+ let _b = this.props,
57600
57569
  {
57601
57570
  footer,
57602
57571
  className,
@@ -57607,15 +57576,15 @@ class Modal extends BaseComponent {
57607
57576
  zIndex,
57608
57577
  getPopupContainer,
57609
57578
  visible
57610
- } = _a,
57611
- restProps = Modal_rest(_a, ["footer", "className", "motion", "maskStyle", "keepDOM", "style", "zIndex", "getPopupContainer", "visible"]);
57579
+ } = _b,
57580
+ restProps = Modal_rest(_b, ["footer", "className", "motion", "maskStyle", "keepDOM", "style", "zIndex", "getPopupContainer", "visible"]);
57612
57581
  let style = styleFromProps;
57613
57582
  const maskStyle = maskStyleFromProps;
57614
57583
  const renderFooter = 'footer' in this.props ? footer : this.renderFooter();
57615
57584
  let wrapperStyle = {
57616
57585
  zIndex
57617
57586
  };
57618
- if (getPopupContainer) {
57587
+ if (getPopupContainer && getPopupContainer() !== ((_a = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) === null || _a === void 0 ? void 0 : _a.body)) {
57619
57588
  wrapperStyle = {
57620
57589
  zIndex,
57621
57590
  position: 'static'
@@ -57686,20 +57655,22 @@ class Modal extends BaseComponent {
57686
57655
  return Object.assign(Object.assign({}, super.adapter), {
57687
57656
  getProps: () => this.props,
57688
57657
  disabledBodyScroll: () => {
57658
+ var _a;
57689
57659
  const {
57690
57660
  getPopupContainer
57691
57661
  } = this.props;
57692
57662
  this.bodyOverflow = document.body.style.overflow || '';
57693
- if (!getPopupContainer && this.bodyOverflow !== 'hidden') {
57663
+ if ((!getPopupContainer || getPopupContainer() === ((_a = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) === null || _a === void 0 ? void 0 : _a.body)) && this.bodyOverflow !== 'hidden') {
57694
57664
  document.body.style.overflow = 'hidden';
57695
57665
  document.body.style.width = `calc(${this.originBodyWidth || '100%'} - ${this.scrollBarWidth}px)`;
57696
57666
  }
57697
57667
  },
57698
57668
  enabledBodyScroll: () => {
57669
+ var _a;
57699
57670
  const {
57700
57671
  getPopupContainer
57701
57672
  } = this.props;
57702
- if (!getPopupContainer && this.bodyOverflow !== 'hidden') {
57673
+ if ((!getPopupContainer || getPopupContainer() === ((_a = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) === null || _a === void 0 ? void 0 : _a.body)) && this.bodyOverflow !== null && this.bodyOverflow !== 'hidden') {
57703
57674
  document.body.style.overflow = this.bodyOverflow;
57704
57675
  document.body.style.width = this.originBodyWidth;
57705
57676
  }
@@ -58103,7 +58074,17 @@ class DropdownItem extends BaseComponent {
58103
58074
  const events = {};
58104
58075
  if (!disabled) {
58105
58076
  ['onClick', 'onMouseEnter', 'onMouseLeave', 'onContextMenu'].forEach(eventName => {
58106
- events[eventName] = this.props[eventName];
58077
+ const isInAnotherDropdown = this.context.level !== 1;
58078
+ if (isInAnotherDropdown && eventName === "onClick") {
58079
+ events["onMouseDown"] = e => {
58080
+ var _a, _b;
58081
+ if (e.button === 0) {
58082
+ (_b = (_a = this.props)[eventName]) === null || _b === void 0 ? void 0 : _b.call(_a, e);
58083
+ }
58084
+ };
58085
+ } else {
58086
+ events[eventName] = this.props[eventName];
58087
+ }
58107
58088
  });
58108
58089
  }
58109
58090
  let tick = null;
@@ -59926,7 +59907,7 @@ class TextArea extends BaseComponent {
59926
59907
  this._resizeListener && window.removeEventListener('resize', this._resizeListener);
59927
59908
  }
59928
59909
  componentDidUpdate(prevProps, prevState) {
59929
- if (this.props.value !== prevProps.value && this.props.autosize) {
59910
+ if ((this.props.value !== prevProps.value || this.props.placeholder !== prevProps.placeholder) && this.props.autosize) {
59930
59911
  this.foundation.resizeTextarea();
59931
59912
  }
59932
59913
  }
@@ -61495,7 +61476,9 @@ class SubNavFoundation extends foundation {
61495
61476
  // this.log('invoke SubNavFoundation init()');
61496
61477
  this._timer = null;
61497
61478
  }
61498
- destroy() {} // eslint-disable-line
61479
+ destroy() {
61480
+ this.clearDelayTimer();
61481
+ }
61499
61482
  clearDelayTimer() {
61500
61483
  if (this._timer) {
61501
61484
  clearTimeout(this._timer);
@@ -67913,7 +67896,8 @@ class option_Option extends external_root_React_commonjs2_react_commonjs_react_a
67913
67896
  value,
67914
67897
  label,
67915
67898
  children
67916
- }, rest), e)
67899
+ }, rest), e),
67900
+ className
67917
67901
  }, rest));
67918
67902
  }
67919
67903
  const config = {
@@ -78208,6 +78192,12 @@ class TableCell extends BaseComponent {
78208
78192
  expandIcon
78209
78193
  } = props;
78210
78194
  const cellInSelectionColumn = isSelectionColumn(column);
78195
+ const {
78196
+ shouldCellUpdate
78197
+ } = column;
78198
+ if (typeof shouldCellUpdate === 'function') {
78199
+ return shouldCellUpdate(nextProps, props);
78200
+ }
78211
78201
  // The expand button may be in a separate column or in the first data column
78212
78202
  const columnHasExpandIcon = isExpandedColumn(column) || expandIcon;
78213
78203
  if ((cellInSelectionColumn || columnHasExpandIcon) && !isEqual_default()(nextProps, this.props)) {
@@ -79631,7 +79621,7 @@ class Body extends BaseComponent {
79631
79621
  if (props.virtualized) {
79632
79622
  getVirtualizedListRef(this.listRef);
79633
79623
  } else {
79634
- console.warn('getVirtualizedListRef only works with virtualized. ' + 'See https://semi.design/zh-CN/show/table for more information.');
79624
+ console.warn('getVirtualizedListRef only works with virtualized. ' + 'See https://semi.design/en-US/show/table for more information.');
79635
79625
  }
79636
79626
  }
79637
79627
  this.foundation = new TableBodyFoundation(this.adapter);
@@ -87614,7 +87604,7 @@ class TreeSelect extends BaseComponent {
87614
87604
  } = item && treeNodeLabelProp in item ? renderSelectedItem(item, {
87615
87605
  index,
87616
87606
  onClose
87617
- }) : null;
87607
+ }) : {};
87618
87608
  if (isNull_default()(content) || isUndefined_default()(content)) {
87619
87609
  return;
87620
87610
  }
@@ -87912,7 +87902,7 @@ class TreeSelect extends BaseComponent {
87912
87902
  } = item && treeNodeLabelProp in item ? renderSelectedItem(item, {
87913
87903
  index: idx,
87914
87904
  onClose
87915
- }) : null;
87905
+ }) : {};
87916
87906
  if (isRenderInTag) {
87917
87907
  return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(Tag, Object.assign({}, tagProps), content);
87918
87908
  } else {