amis-ui 2.8.0 → 2.9.0

package/scss/components/_menu.scss

@@ -69,7 +69,8 @@
         color: var(--Menu-dark-ancestor-fontColor-onActive);
 
         .#{$ns}Nav-Menu-item-icon,
-        .#{$ns}Nav-Menu-item-label {
+        .#{$ns}Nav-Menu-item-label,
+        .#{$ns}Nav-Menu-submenu-arrow {
           color: var(--Menu-dark-ancestor-fontColor-onActive);
         }
       }
@@ -94,6 +95,7 @@
 }
 
 .#{$ns}Nav-Menu {
+  --Menu-width: var(--Layout-aside-width);
   --Menu-width--collapsed: var(--Layout-aside-width-collapsed);
   --Menu-fontSize: var(--Nav-item-fontSize);
   --Menu-fontSize--collapsed: var(--Nav-item-collapsed-fontSize);
@@ -396,8 +398,7 @@
         @include selected-indicator(var(--Menu-light-selectedIndicator-color));
 
         .#{$ns}Nav-Menu-item-icon,
-        .#{$ns}Nav-Menu-item-label,
-        .#{$ns}Nav-Menu-submenu-arrow {
+        .#{$ns}Nav-Menu-item-label {
           color: var(--Menu-light-fontColor-onActive) !important;
         }
       }
@@ -414,64 +415,6 @@
     }
   }
 
-  &-root.#{$ns}Nav-Menu-vertical {
-    > .#{$ns}Nav-Menu-item-selected {
-      background-color: var(--Menu-light-backgroundColor-onHover);
-      @include selected-indicator(var(--Menu-light-selectedIndicator-color));
-
-      .#{$ns}Nav-Menu-item-icon,
-      .#{$ns}Nav-Menu-item-label {
-        color: var(--Menu-light-fontColor-onActive);
-      }
-    }
-
-    &.#{$ns}Nav-Menu-dark {
-      > .#{$ns}Nav-Menu-item-selected {
-        background-color: var(--Menu-dark-backgroundColor-onHover);
-        @include selected-indicator(var(--Menu-dark-selectedIndicator-color));
-
-        .#{$ns}Nav-Menu-item-icon,
-        .#{$ns}Nav-Menu-item-label {
-          color: var(--Menu-dark-fontColor-onActive);
-        }
-      }
-
-      > .#{$ns}Nav-Menu-submenu-selected {
-        & > .#{$ns}Nav-Menu-submenu-title {
-          color: var(--Menu-dark-fontColor-onActive);
-        }
-
-        .#{$ns}Nav-Menu-item-icon,
-        .#{$ns}Nav-Menu-item-label {
-          color: var(--Menu-dark-fontColor-onActive);
-        }
-      }
-    }
-
-    &.#{$ns}Nav-Menu-light {
-      > .#{$ns}Nav-Menu-item-selected {
-        background-color: var(--Menu-light-backgroundColor-onHover);
-        @include selected-indicator(var(--Menu-light-selectedIndicator-color));
-
-        .#{$ns}Nav-Menu-item-icon,
-        .#{$ns}Nav-Menu-item-label {
-          color: var(--Menu-light-fontColor-onActive);
-        }
-      }
-
-      > .#{$ns}Nav-Menu-submenu-selected {
-        & > .#{$ns}Nav-Menu-submenu-title {
-          color: var(--Menu-dark-fontColor-onActive);
-        }
-
-        .#{$ns}Nav-Menu-item-icon,
-        .#{$ns}Nav-Menu-item-label {
-          color: var(--Menu-light-fontColor-onActive);
-        }
-      }
-    }
-  }
-
   .#{$ns}Nav-Menu-dark {
     .#{$ns}Nav-Menu-submenu-selected {
       background-color: transparent;
@@ -497,11 +440,6 @@
       & > .#{$ns}Nav-Menu-submenu-title {
         color: var(--Menu-light-ancestor-fontColor-onActive);
 
-        & > .#{$ns}Nav-Menu-item-label,
-        & > .#{$ns}Nav-Menu-item-icon {
-          color: var(--Menu-light-ancestor-fontColor-onActive);
-        }
-
         .#{$ns}Nav-Menu-item-label,
         .#{$ns}Nav-Menu-item-icon {
           color: var(--Menu-light-ancestor-fontColor-onActive);
@@ -514,40 +452,12 @@
     padding: 0;
   }
 
-  &-horizontal.#{$ns}Nav-Menu-sub,
-  &-vertical.#{$ns}Nav-Menu-sub,
-  &-vertical-left.#{$ns}Nav-Menu-sub,
-  &-vertical-right.#{$ns}Nav-Menu-sub {
+  &-vertical.#{$ns}Nav-Menu-sub {
     min-width: 160px;
     margin-top: 0;
     border-radius: 2px;
     box-shadow: 0 4px 5px 0 rgba(21, 26, 38, 0.06),
       0 1px 10px 0 rgba(21, 26, 38, 0.05), 0 2px 4px -1px rgba(21, 26, 38, 0.04);
-
-    .#{$ns}Nav-Menu-item-selected {
-      .#{$ns}Nav-Menu-item-icon,
-      .#{$ns}Nav-Menu-item-label {
-        color: var(--Menu-light-fontColor-onActive);
-      }
-    }
-
-    .#{$ns}Nav-Menu-dark & {
-      .#{$ns}Nav-Menu-item-selected {
-        .#{$ns}Nav-Menu-item-icon,
-        .#{$ns}Nav-Menu-item-label {
-          color: var(--Menu-dark-fontColor-onActive);
-        }
-      }
-    }
-
-    .#{$ns}Nav-Menu-light & {
-      .#{$ns}Nav-Menu-item-selected {
-        .#{$ns}Nav-Menu-item-icon,
-        .#{$ns}Nav-Menu-item-label {
-          color: var(--Menu-light-fontColor-onActive);
-        }
-      }
-    }
   }
 
   &-item,
@@ -946,6 +856,18 @@
     .#{$ns}Nav-Menu-submenu-rtl & {
       direction: rtl;
     }
+
+    &.#{$ns}Nav-Menu-submenu-selected {
+      & > .#{$ns}Nav-Menu-submenu-title {
+        color: var(--Menu-light-fontColor-onActive);
+      }
+
+      .#{$ns}Nav-Menu-item-icon,
+      .#{$ns}Nav-Menu-item-label,
+      .#{$ns}Nav-Menu-submenu-arrow {
+        color: var(--Menu-light-fontColor-onActive);
+      }
+    }
   }
 
   &-sub.#{$ns}Nav-Menu-inline {
@@ -1129,10 +1051,6 @@
   }
 }
 
-.#{$ns}Nav-Menu-overflow-menu-dark {
-  @include popup-dark();
-}
-
 .#{$ns}Nav-Menu-item-tooltip {
   font-size: var(--Layout-tooltip-fontSize);
   color: var(--Layout-light-fontColor);

package/scss/components/_modal.scss

@@ -93,7 +93,6 @@
     border-bottom: var(--Modal-body-borderTop);
     border-top-left-radius: var(--Modal-content-borderRadius);
     border-top-right-radius: var(--Modal-content-borderRadius);
-    z-index: 150; // 高于 Spinner 的 overlay
   }
 
   &-title {
@@ -108,6 +107,7 @@
     line-height: inherit;
     text-decoration: none;
     vertical-align: middle;
+    z-index: calc($zindex-spinner-overlay + 1);
 
     svg {
       width: var(--Modal-close-width);

package/scss/components/_spinner.scss

@@ -137,7 +137,7 @@
 
   &--overlay {
     position: absolute;
-    z-index: 11;
+    z-index: $zindex-spinner-overlay;
     top: 50%;
     left: 50%;
     transform: translate3d(-50%, -50%, 0);
@@ -146,7 +146,7 @@
 
 .#{$ns}Spinner-overlay {
   position: absolute;
-  z-index: 10;
+  z-index: calc($zindex-spinner-overlay - 1);
   top: 0;
   left: 0;
   right: 0;
@@ -168,7 +168,7 @@
 
   .#{$ns}Spinner {
     position: absolute;
-    z-index: 11;
+    z-index: $zindex-spinner-overlay;
     top: 50%;
     left: 50%;
     transform: translate3d(-50%, -50%, 0);

package/scss/components/_steps.scss

@@ -14,7 +14,7 @@
       &Icon {
         vertical-align: top;
         display: inline-block;
-        padding-right: px2rem(10px);
+        margin-right: px2rem(10px);
         .#{$ns}StepsItem-icon {
           display: inline-block;
           width: px2rem(30px);
@@ -26,7 +26,7 @@
           .icon {
             width: px2rem(9px);
             height: px2rem(9px);
-            position: relative; 
+            position: relative;
             top: 0;
           }
         }
@@ -77,7 +77,7 @@
             white-space: nowrap;
             position: relative;
             bottom: px2rem(20px);
-            >span {
+            > span {
               color: var(--Steps-description-title-color);
               font-size: var(--Steps-description-title-fontsize);
             }
@@ -102,15 +102,19 @@
       min-height: 75px;
       overflow: hidden !important;
       &-container {
-        &Icon:after {
-          content: '';
-          position: absolute;
-          right: 0;
-          top: px2rem(36px);
-          height: 9999px;
-          left: px2rem(11px);
-          width: 1px;
-          background-color: var(--Steps-line-bg);
+        &Icon {
+          position: relative;
+          &:after {
+            content: '';
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            right: 0;
+            top: px2rem(36px);
+            height: 9999px;
+            width: 1px;
+            background-color: var(--Steps-line-bg);
+          }
         }
         &Wrapper > .#{$ns}StepsItem-body > .#{$ns}StepsItem-title {
           &:after {
@@ -321,14 +325,14 @@
       border: 1px solid var(--Steps-bg);
     }
     .#{$ns}StepsItem-title,
-      .#{$ns}StepsItem-subTitle,
-      .#{$ns}StepsItem-description {
-        color: var(--Steps-status-wait);
-      }
+    .#{$ns}StepsItem-subTitle,
+    .#{$ns}StepsItem-description {
+      color: var(--Steps-status-wait);
+    }
   }
   .#{$ns}StepsItem.is-error {
     .#{$ns}StepsItem-icon {
-        background-color: var(--Steps-status-error);
+      background-color: var(--Steps-status-error);
       color: var(--white);
       border: 1px solid var(--Steps-status-error);
     }

package/scss/components/form/_date-range.scss

@@ -156,6 +156,7 @@
     @include input-clear();
     line-height: 1;
     svg {
+      top: 0;
       width: var(--inputDate-default-icon-size);
       height: var(--inputDate-default-icon-size);
     }

package/scss/components/form/_date.scss

@@ -145,6 +145,7 @@
     @include input-clear();
     line-height: 1;
     svg {
+      top: 0;
       width: var(--inputDate-default-icon-size);
       height: var(--inputDate-default-icon-size);
     }

package/scss/components/form/_icon-picker.scss

@@ -21,7 +21,7 @@
 
     > input {
       display: inline-block;
-      width: auto;
+      width: 100% !important;
       vertical-align: middle;
     }
   }
@@ -94,6 +94,7 @@
   }
 
   &-value {
+    position: absolute;
     user-select: none;
     line-height: calc(
       var(--Form-input-lineHeight) * var(--Form-input-fontSize)

package/scss/components/form/_location.scss

@@ -56,7 +56,9 @@
   &-toggler {
     cursor: pointer;
     color: var(--colors-neutral-text-5);
-
+    svg {
+      top: 0;
+    }
     &:hover {
       color: var(--colors-brand-5);
     }
@@ -66,6 +68,9 @@
     @include input-clear();
     line-height: 1;
     margin-right: var(--gap-xs);
+    svg {
+      top: 0;
+    }
   }
 }
 

package/scss/components/form/_number.scss

@@ -292,14 +292,6 @@
   &:not(.is-inline) > .#{$ns}Number {
     display: block;
   }
-
-  .#{$ns}Select {
-    min-width: var(--inputNumber-base-default-unit-width);
-    padding: var(--inputNumber-base-default-unit-paddingTop)
-      var(--inputNumber-base-default-unit-paddingRight)
-      var(--inputNumber-base-default-unit-paddingBottom)
-      var(--inputNumber-base-default-unit-paddingLeft);
-  }
 }
 
 .#{$ns}Number--borderHalf,
@@ -311,11 +303,64 @@
 
 .#{$ns}NumberControl--withUnit {
   display: flex;
+  &:hover {
+    .#{$ns}Number,
+    .#{$ns}NumberControl-unit {
+      border-width: var(--inputNumber-base-hover-top-border-width)
+        var(--inputNumber-base-hover-right-border-width)
+        var(--inputNumber-base-hover-bottom-border-width)
+        var(--inputNumber-base-hover-left-border-width);
+      border-style: var(--inputNumber-base-hover-top-border-style)
+        var(--inputNumber-base-hover-right-border-style)
+        var(--inputNumber-base-hover-bottom-border-style)
+        var(--inputNumber-base-hover-left-border-style);
+      border-color: var(--inputNumber-base-hover-top-border-color)
+        var(--inputNumber-base-hover-right-border-color)
+        var(--inputNumber-base-hover-bottom-border-color)
+        var(--inputNumber-base-hover-left-border-color);
+      border-radius: var(--inputNumber-base-hover-top-left-border-radius)
+        var(--inputNumber-base-hover-top-right-border-radius)
+        var(--inputNumber-base-hover-bottom-right-border-radius)
+        var(--inputNumber-base-hover-bottom-left-border-radius);
+    }
+  }
   .#{$ns}Number {
     flex-grow: 1;
+    border-top-right-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+    border-right: none !important;
+  }
+
+  .#{$ns}Number-focused + .#{$ns}NumberControl-unit {
+    border-width: var(--inputNumber-base-active-top-border-width)
+      var(--inputNumber-base-active-right-border-width)
+      var(--inputNumber-base-active-bottom-border-width)
+      var(--inputNumber-base-active-left-border-width);
+    border-style: var(--inputNumber-base-active-top-border-style)
+      var(--inputNumber-base-active-right-border-style)
+      var(--inputNumber-base-active-bottom-border-style)
+      var(--inputNumber-base-active-left-border-style);
+    border-color: var(--inputNumber-base-active-top-border-color)
+      var(--inputNumber-base-active-right-border-color)
+      var(--inputNumber-base-active-bottom-border-color)
+      var(--inputNumber-base-active-left-border-color);
+    border-radius: var(--inputNumber-base-active-top-left-border-radius)
+      var(--inputNumber-base-active-top-right-border-radius)
+      var(--inputNumber-base-active-bottom-right-border-radius)
+      var(--inputNumber-base-active-bottom-left-border-radius);
+  }
+
+  & .#{$ns}NumberControl-unit {
+    border-top-left-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
+    min-width: var(--inputNumber-base-default-unit-width);
+    padding: var(--inputNumber-base-default-unit-paddingTop)
+      var(--inputNumber-base-default-unit-paddingRight)
+      var(--inputNumber-base-default-unit-paddingBottom)
+      var(--inputNumber-base-default-unit-paddingLeft);
   }
-  .#{$ns}Select {
-    border-left: 0;
+  .#{$ns}NumberControl-single-unit {
+    cursor: default;
   }
 }
 .#{$ns}Number--enhance {

package/scss/components/form/_picker.scss

@@ -88,6 +88,9 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    svg {
+      top: 0;
+    }
 
     &:hover {
       color: var(--Picker-onHover-iconColor);
@@ -98,6 +101,9 @@
     @include input-clear();
     line-height: 1;
     margin-right: var(--gap-xs);
+    svg {
+      top: 0;
+    }
   }
 }
 

package/scss/components/form/_select.scss

@@ -433,7 +433,7 @@
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
-      display: inline-block;
+      // display: inline-block;
       max-width: 100%;
     }
   }
@@ -497,10 +497,8 @@
       height: var(--Form-input-clearBtn-size);
       top: 0;
 
-      &:hover > path {
-        &:first-of-type {
-          fill: var(--Form-select-valueIcon-color);
-        }
+      &:hover {
+        fill: var(--Form-input-clearBtn-color-onHover);
       }
     }
   }

package/scss/components/form/_selection.scss

@@ -270,11 +270,13 @@
   display: flex;
   flex-direction: row;
   min-height: 100%;
+  flex-wrap: wrap;
 
   &-col {
     position: relative;
     flex-grow: 1;
     min-width: 150px;
+    width: 0;
   }
 
   &-col:not(:last-child) {
@@ -287,6 +289,10 @@
     color: var(--text--muted-color);
   }
 
+  &-checkAll {
+    width: 100%;
+  }
+
   &-item {
     display: flex;
     // height: var(--Form-input-height);
@@ -326,6 +332,9 @@
 
   &-itemLabel {
     flex-grow: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 
     span {
       margin-left: px2rem(10px);

package/scss/components/form/_text.scss

@@ -12,7 +12,6 @@
   .#{$ns}TextControl-clear svg {
     font-size: var(--input-clearable-icon-size);
     fill: var(--input-clearable-default-color);
-    color: var(--input-clearable-default-color);
     width: var(--input-clearable-icon-size);
     height: var(--input-clearable-icon-size);
     &:hover {

package/esm/node_modules/rc-overflow/es/hooks/useBatchFrameState.js

@@ -1,51 +0,0 @@
-/**
- * amis-ui v2.8.0
- * Copyright 2018-2023 fex
- */
-
-import _slicedToArray from '../../../@babel/runtime/helpers/esm/slicedToArray.js';
-import { useRef } from 'react';
-import wrapperRaf from '../../../rc-util/es/raf.js';
-import useSafeState from '../../../rc-util/es/hooks/useState.js';
-
-/**
- * State generate. Return a `setState` but it will flush all state with one render to save perf.
- * This is not a realization of `unstable_batchedUpdates`.
- */
-
-function useBatchFrameState() {
-  var _useState = useSafeState({}),
-      _useState2 = _slicedToArray(_useState, 2),
-      forceUpdate = _useState2[1];
-
-  var statesRef = useRef([]);
-  var walkingIndex = 0;
-  var beforeFrameId = 0;
-
-  function createState(defaultValue) {
-    var myIndex = walkingIndex;
-    walkingIndex += 1; // Fill value if not exist yet
-
-    if (statesRef.current.length < myIndex + 1) {
-      statesRef.current[myIndex] = defaultValue;
-    } // Return filled as `setState`
-
-
-    var value = statesRef.current[myIndex];
-
-    function setValue(val) {
-      statesRef.current[myIndex] = typeof val === 'function' ? val(statesRef.current[myIndex]) : val;
-      wrapperRaf.cancel(beforeFrameId); // Flush with batch
-
-      beforeFrameId = wrapperRaf(function () {
-        forceUpdate({}, true);
-      });
-    }
-
-    return [value, setValue];
-  }
-
-  return createState;
-}
-
-export { useBatchFrameState };

package/esm/node_modules/rc-util/es/hooks/useState.js

@@ -1,35 +0,0 @@
-/**
- * amis-ui v2.8.0
- * Copyright 2018-2023 fex
- */
-
-import _slicedToArray from '../../../@babel/runtime/helpers/esm/slicedToArray.js';
-import * as React from 'react';
-
-/**
- * Same as React.useState but `setState` accept `ignoreDestroy` param to not to setState after destroyed.
- * We do not make this auto is to avoid real memory leak.
- * Developer should confirm it's safe to ignore themselves.
- */
-function useSafeState(defaultValue) {
-  var destroyRef = React.useRef(false);
-  var _React$useState = React.useState(defaultValue),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    value = _React$useState2[0],
-    setValue = _React$useState2[1];
-  React.useEffect(function () {
-    destroyRef.current = false;
-    return function () {
-      destroyRef.current = true;
-    };
-  }, []);
-  function safeSetState(updater, ignoreDestroy) {
-    if (ignoreDestroy && destroyRef.current) {
-      return;
-    }
-    setValue(updater);
-  }
-  return [value, safeSetState];
-}
-
-export { useSafeState as default };

package/lib/node_modules/rc-overflow/es/hooks/useBatchFrameState.js

@@ -1,55 +0,0 @@
-/**
- * amis-ui v2.8.0
- * Copyright 2018-2023 fex
- */
-
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var slicedToArray = require('../../../@babel/runtime/helpers/esm/slicedToArray.js');
-var React = require('react');
-var raf = require('../../../rc-util/es/raf.js');
-var useState = require('../../../rc-util/es/hooks/useState.js');
-
-/**
- * State generate. Return a `setState` but it will flush all state with one render to save perf.
- * This is not a realization of `unstable_batchedUpdates`.
- */
-
-function useBatchFrameState() {
-  var _useState = useState["default"]({}),
-      _useState2 = slicedToArray["default"](_useState, 2),
-      forceUpdate = _useState2[1];
-
-  var statesRef = React.useRef([]);
-  var walkingIndex = 0;
-  var beforeFrameId = 0;
-
-  function createState(defaultValue) {
-    var myIndex = walkingIndex;
-    walkingIndex += 1; // Fill value if not exist yet
-
-    if (statesRef.current.length < myIndex + 1) {
-      statesRef.current[myIndex] = defaultValue;
-    } // Return filled as `setState`
-
-
-    var value = statesRef.current[myIndex];
-
-    function setValue(val) {
-      statesRef.current[myIndex] = typeof val === 'function' ? val(statesRef.current[myIndex]) : val;
-      raf["default"].cancel(beforeFrameId); // Flush with batch
-
-      beforeFrameId = raf["default"](function () {
-        forceUpdate({}, true);
-      });
-    }
-
-    return [value, setValue];
-  }
-
-  return createState;
-}
-
-exports.useBatchFrameState = useBatchFrameState;