amis 1.9.1-beta.28 → 1.9.1-beta.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "amis",
-  "version": "1.9.1-beta.28",
+  "version": "1.9.1-beta.29",
   "description": "一种MIS页面生成工具",
   "main": "lib/index.js",
   "scripts": {
@@ -61,7 +61,7 @@
     "immutability-helper": "^3.1.1",
     "jsbarcode": "^3.11.5",
     "keycode": "^2.2.1",
-    "lodash": "^4.17.15",
+    "lodash": "^4.17.21",
     "markdown-it": "^12.0.6",
     "markdown-it-html5-media": "^0.7.1",
     "match-sorter": "^6.3.1",
@@ -107,7 +107,7 @@
     "@types/hoist-non-react-statics": "^3.3.1",
     "@types/jest": "^27.0.2",
     "@types/json-schema": "^7.0.11",
-    "@types/lodash": "^4.14.175",
+    "@types/lodash": "^4.14.182",
     "@types/markdown-it": "^12.2.1",
     "@types/mkdirp": "^1.0.1",
     "@types/node": "^12.7.1",

package/schema.json

@@ -8641,6 +8641,10 @@
         "secondary": {
           "$ref": "#/definitions/SchemaTpl",
           "description": "次要说明"
+        },
+        "useCardLabel": {
+          "type": "boolean",
+          "description": "卡片内容区的表单项label是否使用Card内部的样式，默认为true"
         }
       },
       "required": [
@@ -9158,6 +9162,10 @@
                   "$ref": "#/definitions/SchemaTpl",
                   "description": "次要说明"
                 },
+                "useCardLabel": {
+                  "type": "boolean",
+                  "description": "卡片内容区的表单项label是否使用Card内部的样式，默认为true"
+                },
                 "className": {
                   "$ref": "#/definitions/SchemaClassName",
                   "description": "容器 css 类名"
@@ -10354,6 +10362,10 @@
                   "$ref": "#/definitions/SchemaTpl",
                   "description": "次要说明"
                 },
+                "useCardLabel": {
+                  "type": "boolean",
+                  "description": "卡片内容区的表单项label是否使用Card内部的样式，默认为true"
+                },
                 "className": {
                   "$ref": "#/definitions/SchemaClassName",
                   "description": "容器 css 类名"
@@ -63161,9 +63173,18 @@
           },
           "additionalProperties": false,
           "description": "自动转换值"
+        },
+        "inputControlClassName": {
+          "type": "string",
+          "description": "control节点的CSS类名"
+        },
+        "nativeInputClassName": {
+          "type": "string",
+          "description": "原生input标签的CSS类名"
         }
       },
       "required": [
+        "nativeInputClassName",
         "type"
       ],
       "additionalProperties": false,
@@ -66851,7 +66872,7 @@
           "$ref": "#/definitions/CardSchema",
           "additionalProperties": false,
           "patternProperties": {
-            "^(type|className|$ref|disabled|disabledOn|hidden|hiddenOn|visible|visibleOn|id|onEvent|header|body|media|actions|toolbar|secondary|label|labelClassName|name|popOver|quickEdit|copyable)$": {}
+            "^(type|className|$ref|disabled|disabledOn|hidden|hiddenOn|visible|visibleOn|id|onEvent|header|body|media|actions|toolbar|secondary|useCardLabel|label|labelClassName|name|popOver|quickEdit|copyable)$": {}
           }
         },
         {
@@ -67561,7 +67582,7 @@
           "$ref": "#/definitions/TextControlSchema",
           "additionalProperties": false,
           "patternProperties": {
-            "^(className|$ref|disabled|disabledOn|hidden|hiddenOn|visible|visibleOn|id|onEvent|type|size|label|labelAlign|labelClassName|name|remark|labelRemark|hint|submitOnChange|readOnly|readOnlyOn|validateOnChange|description|desc|descriptionClassName|mode|horizontal|inline|inputClassName|placeholder|required|validationErrors|validations|value|clearValueOnHidden|validateApi|options|source|selectFirst|initFetchOn|initFetch|multiple|joinValues|delimiter|extractValue|clearable|resetValue|deferApi|addApi|addControls|creatable|createBtnLabel|editable|editApi|editControls|removable|deleteApi|deleteConfirmText|autoFill|addOn|trimContents|autoComplete|borderMode|maxLength|showCounter|prefix|suffix|transform|popOver|quickEdit|copyable)$": {}
+            "^(className|$ref|disabled|disabledOn|hidden|hiddenOn|visible|visibleOn|id|onEvent|type|size|label|labelAlign|labelClassName|name|remark|labelRemark|hint|submitOnChange|readOnly|readOnlyOn|validateOnChange|description|desc|descriptionClassName|mode|horizontal|inline|inputClassName|placeholder|required|validationErrors|validations|value|clearValueOnHidden|validateApi|options|source|selectFirst|initFetchOn|initFetch|multiple|joinValues|delimiter|extractValue|clearable|resetValue|deferApi|addApi|addControls|creatable|createBtnLabel|editable|editApi|editControls|removable|deleteApi|deleteConfirmText|autoFill|addOn|trimContents|autoComplete|borderMode|maxLength|showCounter|prefix|suffix|transform|inputControlClassName|nativeInputClassName|popOver|quickEdit|copyable)$": {}
           }
         },
         {
@@ -67687,7 +67708,7 @@
           "$ref": "#/definitions/CardSchema",
           "additionalProperties": false,
           "patternProperties": {
-            "^(type|className|$ref|disabled|disabledOn|hidden|hiddenOn|visible|visibleOn|id|onEvent|header|body|media|actions|toolbar|secondary|label|labelClassName|name|popOver|quickEdit|copyable)$": {}
+            "^(type|className|$ref|disabled|disabledOn|hidden|hiddenOn|visible|visibleOn|id|onEvent|header|body|media|actions|toolbar|secondary|useCardLabel|label|labelClassName|name|popOver|quickEdit|copyable)$": {}
           }
         },
         {
@@ -68397,7 +68418,7 @@
           "$ref": "#/definitions/TextControlSchema",
           "additionalProperties": false,
           "patternProperties": {
-            "^(className|$ref|disabled|disabledOn|hidden|hiddenOn|visible|visibleOn|id|onEvent|type|size|label|labelAlign|labelClassName|name|remark|labelRemark|hint|submitOnChange|readOnly|readOnlyOn|validateOnChange|description|desc|descriptionClassName|mode|horizontal|inline|inputClassName|placeholder|required|validationErrors|validations|value|clearValueOnHidden|validateApi|options|source|selectFirst|initFetchOn|initFetch|multiple|joinValues|delimiter|extractValue|clearable|resetValue|deferApi|addApi|addControls|creatable|createBtnLabel|editable|editApi|editControls|removable|deleteApi|deleteConfirmText|autoFill|addOn|trimContents|autoComplete|borderMode|maxLength|showCounter|prefix|suffix|transform|popOver|quickEdit|copyable)$": {}
+            "^(className|$ref|disabled|disabledOn|hidden|hiddenOn|visible|visibleOn|id|onEvent|type|size|label|labelAlign|labelClassName|name|remark|labelRemark|hint|submitOnChange|readOnly|readOnlyOn|validateOnChange|description|desc|descriptionClassName|mode|horizontal|inline|inputClassName|placeholder|required|validationErrors|validations|value|clearValueOnHidden|validateApi|options|source|selectFirst|initFetchOn|initFetch|multiple|joinValues|delimiter|extractValue|clearable|resetValue|deferApi|addApi|addControls|creatable|createBtnLabel|editable|editApi|editControls|removable|deleteApi|deleteConfirmText|autoFill|addOn|trimContents|autoComplete|borderMode|maxLength|showCounter|prefix|suffix|transform|inputControlClassName|nativeInputClassName|popOver|quickEdit|copyable)$": {}
           }
         },
         {
@@ -68523,7 +68544,7 @@
           "$ref": "#/definitions/CardSchema",
           "additionalProperties": false,
           "patternProperties": {
-            "^(type|className|$ref|disabled|disabledOn|hidden|hiddenOn|visible|visibleOn|id|onEvent|header|body|media|actions|toolbar|secondary|label|fixed|name|popOver|quickEdit|quickEditOnUpdate|copyable|sortable|searchable|toggled|width|align|classNameExpr|labelClassName|filterable|breakpoint|remark|value|unique)$": {}
+            "^(type|className|$ref|disabled|disabledOn|hidden|hiddenOn|visible|visibleOn|id|onEvent|header|body|media|actions|toolbar|secondary|useCardLabel|label|fixed|name|popOver|quickEdit|quickEditOnUpdate|copyable|sortable|searchable|toggled|width|align|classNameExpr|labelClassName|filterable|breakpoint|remark|value|unique)$": {}
           }
         },
         {
@@ -69233,7 +69254,7 @@
           "$ref": "#/definitions/TextControlSchema",
           "additionalProperties": false,
           "patternProperties": {
-            "^(className|$ref|disabled|disabledOn|hidden|hiddenOn|visible|visibleOn|id|onEvent|type|size|label|labelAlign|labelClassName|name|remark|labelRemark|hint|submitOnChange|readOnly|readOnlyOn|validateOnChange|description|desc|descriptionClassName|mode|horizontal|inline|inputClassName|placeholder|required|validationErrors|validations|value|clearValueOnHidden|validateApi|options|source|selectFirst|initFetchOn|initFetch|multiple|joinValues|delimiter|extractValue|clearable|resetValue|deferApi|addApi|addControls|creatable|createBtnLabel|editable|editApi|editControls|removable|deleteApi|deleteConfirmText|autoFill|addOn|trimContents|autoComplete|borderMode|maxLength|showCounter|prefix|suffix|transform|fixed|popOver|quickEdit|quickEditOnUpdate|copyable|sortable|searchable|toggled|width|align|classNameExpr|filterable|breakpoint|unique)$": {}
+            "^(className|$ref|disabled|disabledOn|hidden|hiddenOn|visible|visibleOn|id|onEvent|type|size|label|labelAlign|labelClassName|name|remark|labelRemark|hint|submitOnChange|readOnly|readOnlyOn|validateOnChange|description|desc|descriptionClassName|mode|horizontal|inline|inputClassName|placeholder|required|validationErrors|validations|value|clearValueOnHidden|validateApi|options|source|selectFirst|initFetchOn|initFetch|multiple|joinValues|delimiter|extractValue|clearable|resetValue|deferApi|addApi|addControls|creatable|createBtnLabel|editable|editApi|editControls|removable|deleteApi|deleteConfirmText|autoFill|addOn|trimContents|autoComplete|borderMode|maxLength|showCounter|prefix|suffix|transform|inputControlClassName|nativeInputClassName|fixed|popOver|quickEdit|quickEditOnUpdate|copyable|sortable|searchable|toggled|width|align|classNameExpr|filterable|breakpoint|unique)$": {}
           }
         },
         {
@@ -69359,7 +69380,7 @@
           "$ref": "#/definitions/CardSchema",
           "additionalProperties": false,
           "patternProperties": {
-            "^(type|className|$ref|disabled|disabledOn|hidden|hiddenOn|visible|visibleOn|id|onEvent|header|body|media|actions|toolbar|secondary|x|y|w|h|width|height|align|valign|gridClassName)$": {}
+            "^(type|className|$ref|disabled|disabledOn|hidden|hiddenOn|visible|visibleOn|id|onEvent|header|body|media|actions|toolbar|secondary|useCardLabel|x|y|w|h|width|height|align|valign|gridClassName)$": {}
           }
         },
         {
@@ -70069,7 +70090,7 @@
           "$ref": "#/definitions/TextControlSchema",
           "additionalProperties": false,
           "patternProperties": {
-            "^(className|$ref|disabled|disabledOn|hidden|hiddenOn|visible|visibleOn|id|onEvent|type|size|label|labelAlign|labelClassName|name|remark|labelRemark|hint|submitOnChange|readOnly|readOnlyOn|validateOnChange|description|desc|descriptionClassName|mode|horizontal|inline|inputClassName|placeholder|required|validationErrors|validations|value|clearValueOnHidden|validateApi|options|source|selectFirst|initFetchOn|initFetch|multiple|joinValues|delimiter|extractValue|clearable|resetValue|deferApi|addApi|addControls|creatable|createBtnLabel|editable|editApi|editControls|removable|deleteApi|deleteConfirmText|autoFill|addOn|trimContents|autoComplete|borderMode|maxLength|showCounter|prefix|suffix|transform|x|y|w|h|width|height|align|valign|gridClassName)$": {}
+            "^(className|$ref|disabled|disabledOn|hidden|hiddenOn|visible|visibleOn|id|onEvent|type|size|label|labelAlign|labelClassName|name|remark|labelRemark|hint|submitOnChange|readOnly|readOnlyOn|validateOnChange|description|desc|descriptionClassName|mode|horizontal|inline|inputClassName|placeholder|required|validationErrors|validations|value|clearValueOnHidden|validateApi|options|source|selectFirst|initFetchOn|initFetch|multiple|joinValues|delimiter|extractValue|clearable|resetValue|deferApi|addApi|addControls|creatable|createBtnLabel|editable|editApi|editControls|removable|deleteApi|deleteConfirmText|autoFill|addOn|trimContents|autoComplete|borderMode|maxLength|showCounter|prefix|suffix|transform|inputControlClassName|nativeInputClassName|x|y|w|h|width|height|align|valign|gridClassName)$": {}
           }
         },
         {
@@ -70195,7 +70216,7 @@
           "$ref": "#/definitions/CardSchema",
           "additionalProperties": false,
           "patternProperties": {
-            "^(type|className|$ref|disabled|disabledOn|hidden|hiddenOn|visible|visibleOn|id|onEvent|header|body|media|actions|toolbar|secondary|rowClassName|cellClassName)$": {}
+            "^(type|className|$ref|disabled|disabledOn|hidden|hiddenOn|visible|visibleOn|id|onEvent|header|body|media|actions|toolbar|secondary|useCardLabel|rowClassName|cellClassName)$": {}
           }
         },
         {
@@ -70905,7 +70926,7 @@
           "$ref": "#/definitions/TextControlSchema",
           "additionalProperties": false,
           "patternProperties": {
-            "^(className|$ref|disabled|disabledOn|hidden|hiddenOn|visible|visibleOn|id|onEvent|type|size|label|labelAlign|labelClassName|name|remark|labelRemark|hint|submitOnChange|readOnly|readOnlyOn|validateOnChange|description|desc|descriptionClassName|mode|horizontal|inline|inputClassName|placeholder|required|validationErrors|validations|value|clearValueOnHidden|validateApi|options|source|selectFirst|initFetchOn|initFetch|multiple|joinValues|delimiter|extractValue|clearable|resetValue|deferApi|addApi|addControls|creatable|createBtnLabel|editable|editApi|editControls|removable|deleteApi|deleteConfirmText|autoFill|addOn|trimContents|autoComplete|borderMode|maxLength|showCounter|prefix|suffix|transform|rowClassName|cellClassName)$": {}
+            "^(className|$ref|disabled|disabledOn|hidden|hiddenOn|visible|visibleOn|id|onEvent|type|size|label|labelAlign|labelClassName|name|remark|labelRemark|hint|submitOnChange|readOnly|readOnlyOn|validateOnChange|description|desc|descriptionClassName|mode|horizontal|inline|inputClassName|placeholder|required|validationErrors|validations|value|clearValueOnHidden|validateApi|options|source|selectFirst|initFetchOn|initFetch|multiple|joinValues|delimiter|extractValue|clearable|resetValue|deferApi|addApi|addControls|creatable|createBtnLabel|editable|editApi|editControls|removable|deleteApi|deleteConfirmText|autoFill|addOn|trimContents|autoComplete|borderMode|maxLength|showCounter|prefix|suffix|transform|inputControlClassName|nativeInputClassName|rowClassName|cellClassName)$": {}
           }
         },
         {
@@ -71031,7 +71052,7 @@
           "$ref": "#/definitions/CardSchema",
           "additionalProperties": false,
           "patternProperties": {
-            "^(type|className|$ref|disabled|disabledOn|hidden|hiddenOn|visible|visibleOn|id|onEvent|header|body|media|actions|toolbar|secondary|unique|columnClassName)$": {}
+            "^(type|className|$ref|disabled|disabledOn|hidden|hiddenOn|visible|visibleOn|id|onEvent|header|body|media|actions|toolbar|secondary|useCardLabel|unique|columnClassName)$": {}
           }
         },
         {
@@ -71741,7 +71762,7 @@
           "$ref": "#/definitions/TextControlSchema",
           "additionalProperties": false,
           "patternProperties": {
-            "^(className|$ref|disabled|disabledOn|hidden|hiddenOn|visible|visibleOn|id|onEvent|type|size|label|labelAlign|labelClassName|name|remark|labelRemark|hint|submitOnChange|readOnly|readOnlyOn|validateOnChange|description|desc|descriptionClassName|mode|horizontal|inline|inputClassName|placeholder|required|validationErrors|validations|value|clearValueOnHidden|validateApi|options|source|selectFirst|initFetchOn|initFetch|multiple|joinValues|delimiter|extractValue|clearable|resetValue|deferApi|addApi|addControls|creatable|createBtnLabel|editable|editApi|editControls|removable|deleteApi|deleteConfirmText|autoFill|addOn|trimContents|autoComplete|borderMode|maxLength|showCounter|prefix|suffix|transform|unique|columnClassName)$": {}
+            "^(className|$ref|disabled|disabledOn|hidden|hiddenOn|visible|visibleOn|id|onEvent|type|size|label|labelAlign|labelClassName|name|remark|labelRemark|hint|submitOnChange|readOnly|readOnlyOn|validateOnChange|description|desc|descriptionClassName|mode|horizontal|inline|inputClassName|placeholder|required|validationErrors|validations|value|clearValueOnHidden|validateApi|options|source|selectFirst|initFetchOn|initFetch|multiple|joinValues|delimiter|extractValue|clearable|resetValue|deferApi|addApi|addControls|creatable|createBtnLabel|editable|editApi|editControls|removable|deleteApi|deleteConfirmText|autoFill|addOn|trimContents|autoComplete|borderMode|maxLength|showCounter|prefix|suffix|transform|inputControlClassName|nativeInputClassName|unique|columnClassName)$": {}
           }
         },
         {
@@ -71867,7 +71888,7 @@
           "$ref": "#/definitions/CardSchema",
           "additionalProperties": false,
           "patternProperties": {
-            "^(type|className|$ref|disabled|disabledOn|hidden|hiddenOn|visible|visibleOn|id|onEvent|header|body|media|actions|toolbar|secondary|columnClassName|columnRatio)$": {}
+            "^(type|className|$ref|disabled|disabledOn|hidden|hiddenOn|visible|visibleOn|id|onEvent|header|body|media|actions|toolbar|secondary|useCardLabel|columnClassName|columnRatio)$": {}
           }
         },
         {
@@ -72577,7 +72598,7 @@
           "$ref": "#/definitions/TextControlSchema",
           "additionalProperties": false,
           "patternProperties": {
-            "^(className|$ref|disabled|disabledOn|hidden|hiddenOn|visible|visibleOn|id|onEvent|type|size|label|labelAlign|labelClassName|name|remark|labelRemark|hint|submitOnChange|readOnly|readOnlyOn|validateOnChange|description|desc|descriptionClassName|mode|horizontal|inline|inputClassName|placeholder|required|validationErrors|validations|value|clearValueOnHidden|validateApi|options|source|selectFirst|initFetchOn|initFetch|multiple|joinValues|delimiter|extractValue|clearable|resetValue|deferApi|addApi|addControls|creatable|createBtnLabel|editable|editApi|editControls|removable|deleteApi|deleteConfirmText|autoFill|addOn|trimContents|autoComplete|borderMode|maxLength|showCounter|prefix|suffix|transform|columnClassName|columnRatio)$": {}
+            "^(className|$ref|disabled|disabledOn|hidden|hiddenOn|visible|visibleOn|id|onEvent|type|size|label|labelAlign|labelClassName|name|remark|labelRemark|hint|submitOnChange|readOnly|readOnlyOn|validateOnChange|description|desc|descriptionClassName|mode|horizontal|inline|inputClassName|placeholder|required|validationErrors|validations|value|clearValueOnHidden|validateApi|options|source|selectFirst|initFetchOn|initFetch|multiple|joinValues|delimiter|extractValue|clearable|resetValue|deferApi|addApi|addControls|creatable|createBtnLabel|editable|editApi|editControls|removable|deleteApi|deleteConfirmText|autoFill|addOn|trimContents|autoComplete|borderMode|maxLength|showCounter|prefix|suffix|transform|inputControlClassName|nativeInputClassName|columnClassName|columnRatio)$": {}
           }
         },
         {

package/scss/_properties.scss

@@ -1709,4 +1709,9 @@
   --default-padding: 4px 12px; // 6px 12px
   --menu-min-width: 150px; // 一级子项最小宽度
   --menu-sub-min-width: 100px; // 二级子项最小宽度
+
+  --SearchBox-height: #{px2rem(30px)};
+  --SearchBox-width: #{px2rem(150px)};
+  --SearchBox-history-dropdown-maxWidth: calc(var(--SearchBox-width) * 2);
+  --SearchBox-history-dropdown-maxHeight: #{px2rem(200px)};
 }

package/scss/components/_anchor-nav.scss

@@ -106,6 +106,7 @@
     overflow: auto;
     scroll-behavior: smooth;
     background: var(--Tabs-content-bg);
+    position: relative;
 
     > .#{$ns}AnchorNav-section {
       display: block;

package/scss/components/_calendar.scss

@@ -1,4 +1,3 @@
-
 .#{$ns}ScheduleCalendar {
   &-icon {
     position: absolute;
@@ -30,9 +29,9 @@
   }
 
   &-text-overflow {
-    white-space:nowrap;
-    overflow:hidden;
-    text-overflow:ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
     position: absolute;
     width: 100%;
   }
@@ -45,7 +44,7 @@
         background: transparent !important;
       }
     }
-    td.rdtActive:hover{
+    td.rdtActive:hover {
       background: var(--Calendar-cell-onHover-bg);
     }
   }
@@ -108,6 +107,11 @@
     border-radius: px2rem(16px) px2rem(16px) 0 0;
     overflow: hidden;
     border-width: 0;
+
+    &--time {
+      height: fit-content;
+      max-height: 90vh;
+    }
   }
 
   &-wrap {
@@ -189,13 +193,15 @@
       border-spacing: 0 px2rem(4px);
     }
 
-    .rdt .rdtPicker td.rdtActive, .rdt .rdtPicker td.rdtActive:hover {
+    .rdt .rdtPicker td.rdtActive,
+    .rdt .rdtPicker td.rdtActive:hover {
       background: transparent;
       color: var(--Calendar-color);
       text-shadow: none;
     }
 
-    .rdt .rdtPicker tr td.rdtDisabled, .rdt .rdtPicker tr td.rdtDisabled:hover {
+    .rdt .rdtPicker tr td.rdtDisabled,
+    .rdt .rdtPicker tr td.rdtDisabled:hover {
       color: #999;
     }
 
@@ -257,7 +263,7 @@
     }
     &-ranges {
       background: #fff;
-      box-shadow: 0 0 2px 2px rgba(0,0,0,0.02);
+      box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.02);
       border-radius: 24px;
       overflow-x: auto;
       position: relative;
@@ -281,8 +287,8 @@
   }
 
   & &-calendar-wrap &-calendar .rdtPicker {
-      width: 100%;
-      padding: 0;
+    width: 100%;
+    padding: 0;
     .rdtOld {
       visibility: hidden;
     }
@@ -309,18 +315,30 @@
 
     .rdtRangeHasEnd,
     .rdtRangeHasEnd:hover {
-      background: linear-gradient(to right, transparent 0%, transparent 50%, var(--Calendar-cell-onBetween-bg) 51%, var(--Calendar-cell-onBetween-bg) 100%) !important;
+      background: linear-gradient(
+        to right,
+        transparent 0%,
+        transparent 50%,
+        var(--Calendar-cell-onBetween-bg) 51%,
+        var(--Calendar-cell-onBetween-bg) 100%
+      ) !important;
     }
 
     .rdtRangeEnd,
     .rdtRangeEnd:hover {
-      background: linear-gradient(to right, var(--Calendar-cell-onBetween-bg) 0%, var(--Calendar-cell-onBetween-bg) 50%, transparent 51%, transparent 100%) !important;
+      background: linear-gradient(
+        to right,
+        var(--Calendar-cell-onBetween-bg) 0%,
+        var(--Calendar-cell-onBetween-bg) 50%,
+        transparent 51%,
+        transparent 100%
+      ) !important;
     }
 
     .rdtToday {
       border: none;
       .calendar-wrap {
-        border: 1px solid #2468F2;
+        border: 1px solid #2468f2;
       }
     }
   }
@@ -363,7 +381,7 @@
     transform: translate(-50%, -50%);
     width: px2rem(136px);
     height: px2rem(36px);
-    background: rgba(0, 0, 0, .9);
+    background: rgba(0, 0, 0, 0.9);
     border-radius: 4px;
     color: #fff;
     display: flex;

package/scss/components/_search-box.scss

@@ -24,7 +24,7 @@
   &.is-active {
     background: var(--Form-input-bg);
     border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor);
-    width: 150px;
+    width: var(--SearchBox-width);
     > input {
       flex-grow: 1;
     }
@@ -39,17 +39,10 @@
   }
 
   &-searchBtn {
-    display: flex;
-    width: var(--SearchBox-height);
-    align-items: center;
-    justify-content: center;
-
-    .icon {
-      top: 0;
-    }
+    display: inline-block;
+    padding: #{px2rem(5px)} #{px2rem(10px)};
   }
 
-
   &-activeBtn,
   &-cancelBtn {
     margin-right: 8px;
@@ -136,3 +129,116 @@
     color: var(--SearchBox-enhonce-disabled-search-color);
   }
 }
+
+.#{$ns}SearchBox-history {
+  & > .is-history {
+    width: 100%;
+  }
+
+  .#{$ns}SearchBox-history-dropdown {
+    position: absolute;
+    left: 0;
+    z-index: 998;
+    padding: var(--gap-sm) 0;
+    width: 100%;
+    max-width: var(--SearchBox-history-dropdown-maxWidth);
+    min-height: #{px2rem(72px)};
+    max-height: var(--SearchBox-history-dropdown-maxHeight);
+    background: var(--white);
+    border: var(--borderWidth) solid var(--borderColor);
+    border-top: none;
+    border-radius: var(--borderRadius);
+    box-shadow: var(--boxShadow);
+    display: none;
+
+    &.is-active {
+      display: block;
+    }
+
+    header {
+      display: flex;
+      flex-flow: row nowrap;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 var(--gap-md);
+      margin-bottom: #{px2rem(10px)};
+
+      h4 {
+        font-size: var(--fontSizeBase);
+        height: #{px2rem(24px)};
+        line-height: #{px2rem(24px)};
+        font-weight: bold;
+        margin: 0;
+      }
+
+      a {
+        display: inline-block;
+        font-size: var(--fontSizeSm);
+        cursor: pointer;
+        padding: 0;
+      }
+    }
+  }
+
+  .#{$ns}SearchBox-history-content {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: flex-start;
+    align-items: center;
+    padding: 0 var(--gap-md);
+    overflow-x: hidden;
+    overflow-y: auto;
+    max-height: calc(
+      var(--SearchBox-history-dropdown-maxHeight) - 38px - var(--gap-sm) * 2
+    );
+  }
+
+  .#{$ns}SearchBox-history-tag {
+    display: inlin-flex;
+    height: var(--Tag-height);
+    padding: 0 var(--gap-sm);
+    flex-flow: row nowrap;
+    justify-content: center;
+    align-items: center;
+    font-size: var(--Tag-content-fontSize);
+    max-width: 160px;
+    border-radius: var(--Tag-borderRadius);
+    background-color: var(--Tag-default-color);
+    color: var(--Tag-fontColor);
+    margin-bottom: var(--gap-sm);
+    margin-right: var(--gap-sm);
+    max-width: 96px;
+    cursor: pointer;
+
+    &-text {
+      display: inline-block;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      line-height: 24px;
+    }
+
+    &-close {
+      margin-left: var(--gap-sm);
+      margin-right: var(--gap-xs);
+      cursor: pointer;
+
+      i {
+        font-size: #{px2rem(8px)};
+      }
+
+      .icon {
+        width: #{px2rem(8px)};
+        height: #{px2rem(8px)};
+        position: inherit;
+      }
+
+      &:hover {
+        opacity: 0.7;
+      }
+      &:active {
+        opacity: 0.3;
+      }
+    }
+  }
+}

package/scss/components/_tag.scss

@@ -2,17 +2,24 @@
   display: inline-flex;
   height: var(--Tag-height);
   padding: 0 var(--gap-sm);
+  flex-flow: row nowrap;
   justify-content: center;
   align-items: center;
   font-size: var(--Tag-content-fontSize);
   max-width: 160px;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
   transition: all 0.3;
   border-radius: var(--Tag-borderRadius);
   background-color: var(--Tag-default-color);
   color: var(--Tag-fontColor);
+
+  &-text {
+    display: inline-block;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    line-height: var(--Tag-height);
+  }
+
   &:not(:last-child) {
     margin-right: var(--gap-sm);
   }
@@ -47,6 +54,8 @@
     border-radius: calc((var(--Tag-height) + 2px) / 2);
     border: 1px solid var(--Tag-default-color);
     color: var(--Tag-default-color);
+    line-height: 22px;
+
     &--inactive {
       border-color: var(--Tag-inactive-color);
       color: var(--Tag-inactive-color);

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

@@ -116,7 +116,7 @@
   margin: 0;
   padding-left: px2rem(10px);
   list-style: none;
-  background: #F7F7F9;
+  background: #f7f7f9;
   line-height: px2rem(32px);
 }