rsuite 5.56.0 → 5.58.0

package/Accordion/styles/index.css

@@ -89,6 +89,36 @@
   left: 20px;
   right: 20px;
 }
+.rs-heading {
+  font-family: inherit;
+  font-weight: bolder;
+  color: inherit;
+  margin: 0;
+}
+.rs-heading.h1 {
+  font-size: 46px;
+  line-height: 62px;
+}
+.rs-heading.h2 {
+  font-size: 36px;
+  line-height: 50px;
+}
+.rs-heading.h3 {
+  font-size: 28px;
+  line-height: 42px;
+}
+.rs-heading.h4 {
+  font-size: 22px;
+  line-height: 34px;
+}
+.rs-heading.h5 {
+  font-size: 18px;
+  line-height: 24px;
+}
+.rs-heading.h6 {
+  font-size: 16px;
+  line-height: 22px;
+}
 .rs-panel {
   border-radius: 6px;
   overflow: hidden;

package/AutoComplete/styles/index.css

@@ -2500,31 +2500,6 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-picker-default .rs-picker-toggle.rs-btn .rs-picker-toggle-indicator .rs-picker-clean {
   top: 7px;
 }
-.rs-picker-input:not(.rs-picker-tag) .rs-picker-toggle.rs-btn ~ .rs-picker-textbox .rs-picker-search-input {
-  padding: 7px 12px;
-  font-size: 14px;
-  line-height: 1.42857143;
-}
-.rs-picker-tag .rs-picker-toggle.rs-btn ~ .rs-picker-textbox {
-  padding-bottom: 5px;
-}
-.rs-picker-tag .rs-picker-toggle.rs-btn ~ .rs-picker-textbox .rs-tag {
-  margin-top: 5px;
-}
-.rs-picker-tag .rs-picker-toggle.rs-btn ~ .rs-picker-textbox .rs-picker-search-input {
-  padding-left: 12px;
-  margin-top: 5px;
-  font-size: 14px;
-}
-.rs-picker-tag .rs-picker-toggle.rs-btn ~ .rs-picker-textbox input {
-  height: 18px;
-}
-.rs-picker-input.rs-picker-tag .rs-picker-toggle.rs-btn {
-  padding-top: 7px;
-  padding-bottom: 7px;
-  -webkit-box-shadow: none;
-          box-shadow: none;
-}
 .rs-picker-date .rs-picker-toggle.rs-btn,
 .rs-picker-daterange .rs-picker-toggle.rs-btn {
   padding-right: 36px;
@@ -2569,31 +2544,6 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-picker-default .rs-picker-toggle.rs-btn-lg {
   padding-left: 15px;
 }
-.rs-picker-input:not(.rs-picker-tag) .rs-picker-toggle.rs-btn-lg ~ .rs-picker-textbox .rs-picker-search-input {
-  padding: 8px 16px;
-  font-size: 16px;
-  line-height: 1.375;
-}
-.rs-picker-tag .rs-picker-toggle.rs-btn-lg ~ .rs-picker-textbox {
-  padding-bottom: 6px;
-}
-.rs-picker-tag .rs-picker-toggle.rs-btn-lg ~ .rs-picker-textbox .rs-tag {
-  margin-top: 6px;
-}
-.rs-picker-tag .rs-picker-toggle.rs-btn-lg ~ .rs-picker-textbox .rs-picker-search-input {
-  padding-left: 16px;
-  margin-top: 6px;
-  font-size: 16px;
-}
-.rs-picker-tag .rs-picker-toggle.rs-btn-lg ~ .rs-picker-textbox input {
-  height: 20px;
-}
-.rs-picker-input.rs-picker-tag .rs-picker-toggle.rs-btn-lg {
-  padding-top: 8px;
-  padding-bottom: 8px;
-  -webkit-box-shadow: none;
-          box-shadow: none;
-}
 .rs-picker-date .rs-picker-toggle.rs-btn-lg,
 .rs-picker-daterange .rs-picker-toggle.rs-btn-lg {
   padding-right: 42px;
@@ -2670,31 +2620,6 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-picker-default .rs-picker-toggle.rs-btn-md {
   padding-left: 11px;
 }
-.rs-picker-input:not(.rs-picker-tag) .rs-picker-toggle.rs-btn-md ~ .rs-picker-textbox .rs-picker-search-input {
-  padding: 7px 12px;
-  font-size: 14px;
-  line-height: 1.42857143;
-}
-.rs-picker-tag .rs-picker-toggle.rs-btn-md ~ .rs-picker-textbox {
-  padding-bottom: 5px;
-}
-.rs-picker-tag .rs-picker-toggle.rs-btn-md ~ .rs-picker-textbox .rs-tag {
-  margin-top: 5px;
-}
-.rs-picker-tag .rs-picker-toggle.rs-btn-md ~ .rs-picker-textbox .rs-picker-search-input {
-  padding-left: 12px;
-  margin-top: 5px;
-  font-size: 14px;
-}
-.rs-picker-tag .rs-picker-toggle.rs-btn-md ~ .rs-picker-textbox input {
-  height: 18px;
-}
-.rs-picker-input.rs-picker-tag .rs-picker-toggle.rs-btn-md {
-  padding-top: 7px;
-  padding-bottom: 7px;
-  -webkit-box-shadow: none;
-          box-shadow: none;
-}
 .rs-picker-date .rs-picker-toggle.rs-btn-md,
 .rs-picker-daterange .rs-picker-toggle.rs-btn-md {
   padding-right: 36px;
@@ -2773,31 +2698,6 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-picker-default .rs-picker-toggle.rs-btn-sm {
   padding-left: 9px;
 }
-.rs-picker-input:not(.rs-picker-tag) .rs-picker-toggle.rs-btn-sm ~ .rs-picker-textbox .rs-picker-search-input {
-  padding: 4px 10px;
-  font-size: 14px;
-  line-height: 1.42857143;
-}
-.rs-picker-tag .rs-picker-toggle.rs-btn-sm ~ .rs-picker-textbox {
-  padding-bottom: 2px;
-}
-.rs-picker-tag .rs-picker-toggle.rs-btn-sm ~ .rs-picker-textbox .rs-tag {
-  margin-top: 2px;
-}
-.rs-picker-tag .rs-picker-toggle.rs-btn-sm ~ .rs-picker-textbox .rs-picker-search-input {
-  padding-left: 10px;
-  margin-top: 2px;
-  font-size: 14px;
-}
-.rs-picker-tag .rs-picker-toggle.rs-btn-sm ~ .rs-picker-textbox input {
-  height: 18px;
-}
-.rs-picker-input.rs-picker-tag .rs-picker-toggle.rs-btn-sm {
-  padding-top: 4px;
-  padding-bottom: 4px;
-  -webkit-box-shadow: none;
-          box-shadow: none;
-}
 .rs-picker-date .rs-picker-toggle.rs-btn-sm,
 .rs-picker-daterange .rs-picker-toggle.rs-btn-sm {
   padding-right: 34px;
@@ -2823,8 +2723,6 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
   font-size: 12px;
   line-height: 20px;
   padding: 2px 8px;
-  /* stylelint-disable */
-  /* stylelint-enable */
 }
 .rs-btn-ghost.rs-picker-toggle.rs-btn-xs {
   padding: 1px 7px;
@@ -2878,41 +2776,6 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-picker-default .rs-picker-toggle.rs-btn-xs {
   padding-left: 7px;
 }
-.rs-picker-input:not(.rs-picker-tag) .rs-picker-toggle.rs-btn-xs ~ .rs-picker-textbox .rs-picker-search-input {
-  padding: 1px 8px;
-  font-size: 12px;
-  line-height: 1.66666667;
-}
-.rs-picker-tag .rs-picker-toggle.rs-btn-xs ~ .rs-picker-textbox {
-  padding-bottom: -1px;
-}
-.rs-picker-tag .rs-picker-toggle.rs-btn-xs ~ .rs-picker-textbox .rs-tag {
-  margin-top: -1px;
-}
-.rs-picker-tag .rs-picker-toggle.rs-btn-xs ~ .rs-picker-textbox .rs-picker-search-input {
-  padding-left: 8px;
-  margin-top: -1px;
-  font-size: 12px;
-}
-.rs-picker-tag .rs-picker-toggle.rs-btn-xs ~ .rs-picker-textbox input {
-  height: 18px;
-}
-.rs-picker-input.rs-picker-tag .rs-picker-toggle.rs-btn-xs {
-  padding-top: 1px;
-  padding-bottom: 1px;
-  -webkit-box-shadow: none;
-          box-shadow: none;
-}
-.rs-picker-input.rs-picker-tag .rs-picker-toggle.rs-btn-xs ~ .rs-picker-textbox {
-  padding-bottom: 1px;
-}
-.rs-picker-input.rs-picker-tag .rs-picker-toggle.rs-btn-xs ~ .rs-picker-textbox .rs-tag {
-  margin-top: 1px;
-}
-.rs-picker-input.rs-picker-tag .rs-picker-toggle.rs-btn-xs ~ .rs-picker-textbox .rs-picker-search-input {
-  padding-top: 1px;
-  padding-bottom: 1px;
-}
 .rs-picker-date .rs-picker-toggle.rs-btn-xs,
 .rs-picker-daterange .rs-picker-toggle.rs-btn-xs {
   padding-right: 30px;

package/CHANGELOG.md

@@ -1,3 +1,35 @@
+# [5.58.0](https://github.com/rsuite/rsuite/compare/v5.57.0...v5.58.0) (2024-03-28)
+
+
+### Bug Fixes
+
+* **TagPicker:** fix TagPicker size issue ([#3702](https://github.com/rsuite/rsuite/issues/3702)) ([3319e12](https://github.com/rsuite/rsuite/commit/3319e127f00ea84150c2a08f6eb0a7a042ce32f1))
+
+
+### Features
+
+* **Dropdown:** add support for `shortcut` on `<Dropdown.Item>` ([#3704](https://github.com/rsuite/rsuite/issues/3704)) ([2edac54](https://github.com/rsuite/rsuite/commit/2edac546c50a0bff2c827c9d3e2bab2e757bedc7))
+* Picker's onOpen & onClose should decouple with onEnter & onExit ([#3228](https://github.com/rsuite/rsuite/issues/3228)) ([09db561](https://github.com/rsuite/rsuite/commit/09db5610aa5c6d9051a35fd3e980f248459c4870))
+* **Typography:** add support for Heading and Text ([#3693](https://github.com/rsuite/rsuite/issues/3693)) ([b278b4e](https://github.com/rsuite/rsuite/commit/b278b4e2f76c40966b58cfeb11a1e165c547a3a1))
+
+
+
+# [5.57.0](https://github.com/rsuite/rsuite/compare/v5.56.0...v5.57.0) (2024-03-22)
+
+
+### Bug Fixes
+
+* **InlineEdit:** fix type conflict for defined `children` ([#3685](https://github.com/rsuite/rsuite/issues/3685)) ([619c455](https://github.com/rsuite/rsuite/commit/619c4551329f3e83be8f862c4cc02bb15245d0de))
+* **Loader:** set correct ARIA properties for Loader ([#3691](https://github.com/rsuite/rsuite/issues/3691)) ([92505e2](https://github.com/rsuite/rsuite/commit/92505e258303e9be52d8771e2eedcd147e79406c))
+* fix the problem that useToaster cannot be imported on demand and update the docs directory ([#3689](https://github.com/rsuite/rsuite/issues/3689)) ([1e4f4e3](https://github.com/rsuite/rsuite/commit/1e4f4e3ea37c20442faced375a697169a659ba56))
+
+
+### Features
+
+* add support for CascadeTree and MultiCascadeTree ([#3563](https://github.com/rsuite/rsuite/issues/3563)) ([524fc7a](https://github.com/rsuite/rsuite/commit/524fc7ac4810fd8128b7dea0b72b525f55d70401))
+
+
+
 # [5.56.0](https://github.com/rsuite/rsuite/compare/v5.55.1...v5.56.0) (2024-03-15)
 
 

package/CascadeTree/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "rsuite/CascadeTree",
+  "private": true,
+  "main": "../cjs/CascadeTree/index.js",
+  "module": "../esm/CascadeTree/index.js",
+  "types": "../esm/CascadeTree/index.d.ts"
+}

package/CascadeTree/styles/index.css

@@ -0,0 +1,273 @@
+:root,
+.rs-theme-light {
+  --rs-gray-0: #fff;
+  --rs-gray-50: #f7f7fa;
+  --rs-gray-400: #c5c6c7;
+  --rs-gray-500: #a6a6a6;
+  --rs-gray-600: #8e8e93;
+  --rs-gray-800: #575757;
+  --rs-primary-50: #f2faff;
+  --rs-primary-100: #cce9ff;
+  --rs-primary-500: #3498ff;
+  --rs-primary-700: #1675e0;
+  --rs-primary-900: #004299;
+  --rs-text-primary: var(--rs-gray-800);
+  --rs-color-focus-ring: rgb(from var(--rs-primary-500) r g b / 25%);
+  --rs-listbox-option-hover-bg: rgb(from var(--rs-primary-100) r g b / 50%);
+  --rs-listbox-option-hover-text: var(--rs-primary-700);
+  --rs-listbox-option-selected-text: var(--rs-primary-700);
+  --rs-listbox-option-selected-bg: var(--rs-primary-50);
+  --rs-listbox-option-disabled-text: var(--rs-gray-400);
+}
+@supports not (color: rgb(from white r g b)) {
+  :root,
+  .rs-theme-light {
+    --rs-color-focus-ring: rgba(52, 152, 255, 0.25);
+    --rs-listbox-option-hover-bg: rgba(204, 233, 255, 0.5);
+  }
+}
+.rs-theme-dark {
+  --rs-gray-0: #fff;
+  --rs-gray-50: #e9ebf0;
+  --rs-gray-400: #6a6f76;
+  --rs-gray-500: #5c6066;
+  --rs-gray-600: #3c3f43;
+  --rs-gray-800: #1a1d24;
+  --rs-primary-50: #f2fcff;
+  --rs-primary-100: #ccf3ff;
+  --rs-primary-500: #34c3ff;
+  --rs-primary-700: #169de0;
+  --rs-primary-900: #006199;
+  --rs-text-primary: var(--rs-gray-50);
+  --rs-color-focus-ring: 0 0 0 3px rgb(from var(--rs-gray-500) r g b / 25%);
+  --rs-listbox-option-hover-bg: var(--rs-gray-600);
+  --rs-listbox-option-hover-text: currentColor;
+  --rs-listbox-option-selected-text: var(--rs-primary-500);
+  --rs-listbox-option-selected-bg: rgb(from var(--rs-primary-900) r g b / 20%);
+  --rs-listbox-option-disabled-text: var(--rs-gray-500);
+}
+@supports not (color: rgb(from white r g b)) {
+  .rs-theme-dark {
+    --rs-color-focus-ring: 0 0 0 3px rgba(52, 195, 255, 0.25);
+    --rs-listbox-option-selected-bg: rgba(0, 97, 153, 0.2);
+  }
+}
+.rs-theme-high-contrast {
+  --rs-gray-0: #fff;
+  --rs-gray-50: #e9ebf0;
+  --rs-gray-400: #6a6f76;
+  --rs-gray-500: #5c6066;
+  --rs-gray-600: #3c3f43;
+  --rs-gray-800: #1a1d24;
+  --rs-primary-50: #fffef2;
+  --rs-primary-100: #fffbc2;
+  --rs-primary-500: #ffff00;
+  --rs-primary-700: #d9e000;
+  --rs-primary-900: #8f9900;
+  --rs-text-primary: var(--rs-gray-50);
+  --rs-color-focus-ring: var(--rs-gray-0);
+  --rs-listbox-option-hover-bg: transparent;
+  --rs-listbox-option-hover-text: var(--rs-primary-500);
+  --rs-listbox-option-selected-text: var(--rs-primary-500);
+  --rs-listbox-option-selected-bg: transparent;
+  --rs-listbox-option-disabled-text: var(--rs-gray-500);
+}
+/* stylelint-disable */
+*[class*='rs-'] {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+*[class*='rs-']::before,
+*[class*='rs-']::after {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+.rs-cascade-search-view-panel {
+  max-height: 300px;
+  margin-top: 6px;
+  overflow: auto;
+}
+.rs-cascade-search-view-row {
+  display: block;
+  padding: 8px 12px;
+  clear: both;
+  font-weight: normal;
+  line-height: 1.42857143;
+  color: #575757;
+  color: var(--rs-text-primary);
+  cursor: pointer;
+  text-decoration: none;
+  width: 100%;
+}
+.rs-cascade-search-view-row:hover {
+  background-color: rgb(from #cce9ff r g b / 50%);
+  background-color: var(--rs-listbox-option-hover-bg);
+  color: #1675e0;
+  color: var(--rs-listbox-option-hover-text);
+}
+.rs-theme-high-contrast .rs-cascade-search-view-row:hover {
+  outline: 3px solid rgb(from #3498ff r g b / 25%);
+  outline: 3px solid var(--rs-color-focus-ring);
+  outline-offset: -3px;
+  outline-width: 2px;
+  color: #1675e0;
+  color: var(--rs-listbox-option-hover-text);
+  text-decoration: underline;
+}
+.rs-theme-high-contrast .rs-theme-high-contrast .rs-cascade-search-view-row:hover {
+  outline-offset: 2px;
+}
+.rs-cascade-search-view-row.rs-cascade-search-view-row-focus {
+  background-color: rgb(from #cce9ff r g b / 50%);
+  background-color: var(--rs-listbox-option-hover-bg);
+  color: #1675e0;
+  color: var(--rs-listbox-option-hover-text);
+}
+.rs-theme-high-contrast .rs-cascade-search-view-row.rs-cascade-search-view-row-focus {
+  outline: 3px solid rgb(from #3498ff r g b / 25%);
+  outline: 3px solid var(--rs-color-focus-ring);
+  outline-offset: -3px;
+  outline-width: 2px;
+  color: #1675e0;
+  color: var(--rs-listbox-option-hover-text);
+  text-decoration: underline;
+}
+.rs-theme-high-contrast .rs-theme-high-contrast .rs-cascade-search-view-row.rs-cascade-search-view-row-focus {
+  outline-offset: 2px;
+}
+.rs-cascade-search-view-row:disabled,
+.rs-cascade-search-view-row.rs-cascade-search-view-row-disabled {
+  color: #c5c6c7;
+  color: var(--rs-listbox-option-disabled-text);
+  background: none;
+  cursor: not-allowed;
+}
+.rs-cascade-search-view-row:disabled .rs-cascade-search-view-match,
+.rs-cascade-search-view-row.rs-cascade-search-view-row-disabled .rs-cascade-search-view-match {
+  opacity: 0.7;
+  font-weight: normal;
+}
+.rs-cascade-search-view-col {
+  display: inline-block;
+}
+.rs-cascade-search-view-col::after {
+  content: '\00a0/\00a0';
+}
+.rs-cascade-search-view-col:last-child::after {
+  display: none;
+}
+.rs-cascade-search-view-match {
+  color: #3498ff;
+  color: var(--rs-primary-500);
+  font-weight: bold;
+}
+.rs-cascade-tree-items {
+  padding: 6px 0;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.rs-cascade-tree-items ul,
+.rs-cascade-tree-items li {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-size: 14px;
+}
+.rs-cascade-tree-column {
+  overflow-y: auto;
+}
+.rs-cascade-tree-column-loading {
+  padding: 4px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+}
+.rs-cascade-tree-column-loading .rs-icon {
+  margin: 4px;
+}
+.rs-cascade-tree-item {
+  display: block;
+  padding: 8px 12px;
+  clear: both;
+  font-weight: normal;
+  line-height: 1.42857143;
+  color: #575757;
+  color: var(--rs-text-primary);
+  cursor: pointer;
+  text-decoration: none;
+  width: 100%;
+  position: relative;
+  padding: 8px 28px 8px 12px;
+  word-break: break-word;
+}
+.rs-cascade-tree-items-has-children .rs-cascade-tree-item {
+  padding-right: 32px;
+}
+.rs-cascade-tree-item:hover,
+.rs-cascade-tree-item:focus,
+.rs-cascade-tree-item.rs-cascade-tree-item-focus {
+  background-color: rgb(from #cce9ff r g b / 50%);
+  background-color: var(--rs-listbox-option-hover-bg);
+  color: #1675e0;
+  color: var(--rs-listbox-option-hover-text);
+}
+.rs-theme-high-contrast .rs-cascade-tree-item:hover,
+.rs-theme-high-contrast .rs-cascade-tree-item:focus,
+.rs-theme-high-contrast .rs-cascade-tree-item.rs-cascade-tree-item-focus {
+  outline: 3px solid rgb(from #3498ff r g b / 25%);
+  outline: 3px solid var(--rs-color-focus-ring);
+  outline-offset: -3px;
+  outline-width: 2px;
+  color: #1675e0;
+  color: var(--rs-listbox-option-hover-text);
+  text-decoration: underline;
+}
+.rs-theme-high-contrast .rs-theme-high-contrast .rs-cascade-tree-item:hover,
+.rs-theme-high-contrast .rs-theme-high-contrast .rs-cascade-tree-item:focus,
+.rs-theme-high-contrast .rs-theme-high-contrast .rs-cascade-tree-item.rs-cascade-tree-item-focus {
+  outline-offset: 2px;
+}
+.rs-cascade-tree-item.rs-cascade-tree-item-active {
+  background-color: #f2faff;
+  background-color: var(--rs-listbox-option-selected-bg);
+  font-weight: bold;
+  color: #1675e0;
+  color: var(--rs-listbox-option-selected-text);
+}
+.rs-theme-high-contrast .rs-cascade-tree-item.rs-cascade-tree-item-active {
+  text-decoration: underline;
+}
+.rs-cascade-tree-item.rs-cascade-tree-item-active .rs-cascade-tree-caret {
+  color: #575757;
+  color: var(--rs-text-primary);
+}
+.rs-cascade-tree-item:disabled,
+.rs-cascade-tree-item.rs-cascade-tree-item-disabled {
+  color: #c5c6c7;
+  color: var(--rs-listbox-option-disabled-text);
+  background: none;
+  cursor: not-allowed;
+}
+.rs-cascade-tree-caret {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  margin-left: 2px;
+  position: absolute;
+  top: 8px;
+  right: 12px;
+  height: 20px;
+  font-size: 12px;
+}
+
+/*# sourceMappingURL=index.css.map */

package/CascadeTree/styles/index.less

@@ -0,0 +1,77 @@
+@import '../../styles/common.less';
+@import '../../styles/mixins/listbox.less';
+@import '../../styles/mixins/combobox.less';
+@import './search.less';
+
+// CascadeTree
+// ----------------------
+
+// Menu Items
+.rs-cascade-tree-items {
+  padding: @border-radius 0;
+  display: flex;
+
+  ul,
+  li {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    font-size: @font-size-base;
+  }
+}
+
+// Column
+.rs-cascade-tree-column {
+  overflow-y: auto;
+
+  &-loading {
+    padding: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .rs-icon {
+      margin: 4px;
+    }
+  }
+}
+
+// Tree item
+.rs-cascade-tree-item {
+  .listbox-option();
+
+  @padding-right: (16px + @picker-item-content-padding-horizontal);
+
+  position: relative;
+  padding: @picker-item-content-padding-vertical @padding-right
+    @picker-item-content-padding-vertical @picker-item-content-padding-horizontal;
+  word-break: break-word;
+
+  // Has children
+  &s-has-children & {
+    padding-right: @dropdown-toggle-padding-right;
+  }
+
+  &:hover,
+  &:focus,
+  &&-focus {
+    .listbox-option-active();
+  }
+
+  &&-active {
+    .listbox-option-selected();
+
+    .rs-cascade-tree-caret {
+      color: var(--rs-text-primary);
+    }
+  }
+
+  &:disabled,
+  &&-disabled {
+    .listbox-options-disabled();
+  }
+}
+
+.rs-cascade-tree-caret {
+  .combobox-indicator-icon();
+}

package/CascadeTree/styles/search.less

@@ -0,0 +1,45 @@
+// Search panel
+.rs-cascade-search-view-panel {
+  max-height: @cascader-search-panel-max-height;
+  margin-top: 6px;
+  overflow: auto;
+}
+
+.rs-cascade-search-view-row {
+  .listbox-option();
+
+  &:hover {
+    .listbox-option-active();
+  }
+
+  &&-focus {
+    .listbox-option-active();
+  }
+
+  &:disabled,
+  &&-disabled {
+    .listbox-options-disabled();
+
+    .rs-cascade-search-view-match {
+      opacity: 0.7;
+      font-weight: normal;
+    }
+  }
+}
+
+.rs-cascade-search-view-col {
+  display: inline-block;
+
+  &::after {
+    content: '\00a0/\00a0'; //content:' / '
+  }
+
+  &:last-child::after {
+    display: none;
+  }
+}
+
+.rs-cascade-search-view-match {
+  color: var(--rs-primary-500);
+  font-weight: bold;
+}