rsuite 5.56.0 → 5.57.0

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+# [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;
+}