rsuite 6.0.0-canary-2025011413 → 6.0.0-canary-20250315

package/internals/Picker/styles/index.less

@@ -3,7 +3,6 @@
 @import '../../../styles/mixins/listbox.less';
 @import '../../../styles/mixins/combobox.less';
 @import '../../../Stack/styles/index.less';
-@import '../../../Form/styles/mixin.less';
 @import '../../../Loader/styles/index.less';
 @import '../../../Input/styles/index.less';
 @import '../../../InputGroup/styles/index.less';
@@ -18,6 +17,14 @@
 // Common styles
 // ----------------------
 .rs-picker {
+  --rs-picker-value-count-border-radius: var(--rs-radius-full);
+  --rs-picker-value-count-padding: calc(var(--rs-spacing) * 1.5);
+  --rs-picker-value-count-margin: var(--rs-spacing);
+  --rs-picker-size: 0.875rem;
+  --rs-picker-loader-size: 20px;
+  --rs-picker-toggle-border-width: 1px;
+  --rs-picker-toggle-bg: var(--rs-input-bg);
+
   &-toggle-wrapper {
     display: inline-block;
     // Clear whitespace.
@@ -25,14 +32,9 @@
     max-width: 100%;
   }
 
-  &-toggle.rs-btn {
-    .rs-ripple-pond {
-      display: none !important;
-    }
-  }
-
   &-block {
     display: block;
+    width: 100%;
   }
 
   &-disabled {
@@ -58,15 +60,9 @@
     color: var(--rs-picker-value);
   }
 
-  // empty listbox
-  &-none {
-    padding: @picker-none-padding;
-    color: var(--rs-text-secondary);
-    cursor: default;
-  }
-
   &-countable &-toggle-value {
     display: flex;
+    align-items: center;
   }
 
   &-value-list {
@@ -75,16 +71,13 @@
   }
 
   &-value-count {
-    margin: 0 @picker-value-count-margin;
+    margin-inline: var(--rs-picker-value-count-margin);
     background-color: var(--rs-picker-count-bg);
     color: var(--rs-picker-count-text);
-    border-radius: @picker-value-count-border-radius;
-    padding: 0 @picker-value-count-padding;
-    line-height: @line-height-computed;
   }
 
   &-value-separator {
-    margin: 0 4px 0 0;
+    margin: 0 var(--rs-spacing) 0 0;
   }
 
   &:not(.rs-picker-disabled):hover,
@@ -99,12 +92,12 @@
 
   &-label.rs-input-group-addon {
     color: var(--rs-text-primary);
-    padding-right: 4px !important;
+    padding-inline-end: 4px !important;
   }
 
   &-loader {
-    width: 14px;
-    height: 14px;
+    width: var(--rs-picker-loader-size);
+    height: var(--rs-picker-loader-size);
     display: flex;
     align-items: center;
   }
@@ -123,49 +116,114 @@
   }
 }
 
+// Picker Menu
+.rs-picker-popup {
+  --rs-picker-popup-none-padding: calc(var(--rs-spacing) * 3);
+  --rs-picker-popup-border-radius: var(--rs-radius-md);
+  --rs-picker-search-box-padding: calc(var(--rs-spacing) * 1.5) calc(var(--rs-spacing) * 3);
+  --rs-picker-popup-z-index: @zindex-picker-popup;
+  --rs-picker-popup-shadow: var(--rs-shadow-md);
+  --rs-picker-popup-position-x: var(--rs-position-x);
+  --rs-picker-popup-position-y: var(--rs-position-y);
+
+  position: absolute;
+  top: var(--rs-picker-popup-position-y);
+  left: var(--rs-picker-popup-position-x) /* rtl:ignore */;
+  text-align: start;
+  overflow: hidden;
+  transition: none;
+  display: flex;
+  flex-direction: column;
+  z-index: var(--rs-picker-popup-z-index);
+  border-radius: var(--rs-picker-popup-border-radius);
+  background-color: var(--rs-bg-overlay);
+  box-shadow: var(--rs-picker-popup-shadow);
+  padding-block: var(--rs-picker-popup-border-radius);
+
+  .high-contrast-mode({
+    border: 1px solid var(--rs-border-primary);
+  });
+
+  // Increase z-index when modal opened.
+  .rs-modal-open & {
+    --rs-picker-popup-z-index: calc(@zindex-modal + @zindex-picker-toggle);
+  }
+
+  // Increase z-index when drawer opened.
+  .rs-drawer-open & {
+    --rs-picker-popup-z-index: calc(@zindex-drawer + @zindex-picker-toggle);
+  }
+
+  &.rs-picker-inline {
+    position: relative;
+    box-shadow: none;
+  }
+
+  .rs-search-box {
+    padding: var(--rs-picker-search-box-padding);
+  }
+
+  .rs-highlight .rs-highlight-mark {
+    padding: 0;
+  }
+
+  // Empty listbox
+  .rs-picker-none {
+    padding: var(--rs-picker-popup-none-padding);
+    color: var(--rs-text-secondary);
+    cursor: default;
+  }
+}
+
 .rs-picker-toggle {
-  // TODO: Should inherit from <Input> styles?
-  .rs-btn();
+  .picker-default-toggle();
+  .picker-subtle-toggle();
 
-  .rs-picker-default & {
-    @padding-vertical: (@padding-y - @picker-default-toggle-border-width);
-    @padding-horizontal: (@padding-x - @picker-default-toggle-border-width);
+  &-label {
+    color: var(--rs-text-primary);
+  }
 
-    padding: @padding-vertical @padding-horizontal;
+  .rs-picker-toggle-stack {
+    flex: 1 1 auto;
+    gap: calc(var(--rs-spacing) * 2);
+    overflow: hidden;
+  }
+
+  &-value {
+    display: block;
+    .ellipsis();
   }
 
   &-textbox {
     position: absolute;
     width: 100%;
     height: 100%;
-    left: 0;
+    inset-inline-start: 0;
     top: 0;
     border: 1px solid #0000;
-    padding-left: 10px;
-    padding-right: 32px;
+    padding-inline-start: 10px;
+    padding-inline-end: 32px;
     color: var(--rs-text-primary);
     background-color: var(--rs-input-bg);
     outline: none;
   }
 
   &.rs-btn-lg &-textbox {
-    padding-left: 14px;
+    padding-inline-start: 14px;
   }
 
   &.rs-btn-sm &-textbox {
-    padding-left: 8px;
+    padding-inline-start: 8px;
   }
 
   &.rs-btn-xs &-textbox {
-    padding-left: 6px;
+    padding-inline-start: 6px;
   }
 
   &-read-only {
     opacity: 0;
   }
-}
 
-.rs-picker-toggle {
   .rs-picker-default & {
     transition: @picker-transition;
 
@@ -194,83 +252,22 @@
   }
 }
 
-/* stylelint-disable-next-line */ // Custom button sizes
 .rs-picker-toggle.rs-btn {
-  .picker-button-caret-md();
-  .picker-button-size(base);
-  .date-picker-button-caret-md();
-
-  &-lg {
-    .button-size-lg();
-    .picker-button-caret-lg();
-    .picker-button-size(large);
-    .picker-default-button-reset-padding-left(large);
-    .date-picker-button-caret-lg();
-
-    .rs-picker-value-count {
-      line-height: @line-height-large-computed;
-    }
-  }
-
-  &-md {
-    .picker-button-caret-md();
-    .picker-button-size(base);
-    .picker-default-button-reset-padding-left(base);
-    .date-picker-button-caret-md();
-  }
-
-  &-sm {
-    .button-size-sm();
-    .picker-button-caret-sm();
-    .picker-button-size(small);
-    .picker-default-button-reset-padding-left(small);
-    .date-picker-button-caret-sm();
-  }
-
-  &-xs {
-    .button-size-xs();
-    .picker-button-caret-xs();
-    .picker-button-size(extra-small);
-    .picker-default-button-reset-padding-left(extra-small);
-    .date-picker-button-caret-xs();
-  }
-}
-
-/* stylelint-disable-next-line */ // Custom button
-.rs-picker-toggle {
-  .picker-default-toggle();
-  .picker-subtle-toggle();
-
-  &.rs-btn {
-    width: 100%;
-    text-align: left;
-  }
-
-  .ellipsis();
-
-  &-label {
-    color: var(--rs-text-primary);
-
-    &::after {
-      content: ':';
-      margin: 0 4px 0 2px;
-    }
-  }
-
-  &-value {
-    display: block;
-    .ellipsis();
-  }
-
-  .rs-picker-cleanable.rs-picker-has-value & {
-    padding-right: (@dropdown-toggle-padding-right + @picker-toggle-clean-width);
-  }
+  text-align: start;
+  display: inline-flex;
+  width: 100%;
+  align-items: center;
+  justify-content: flex-start;
+  padding-inline: calc(var(--rs-btn-padding-inline) - var(--rs-picker-toggle-border-width));
 }
 
 .rs-picker-toggle-indicator {
+  display: inline-flex;
+  align-items: center;
+
   // Picker clear button
   .rs-picker-clean {
-    .combobox-indicator-icon(@picker-toggle-clean-right);
+    .combobox-indicator-icon();
 
     background: inherit;
     color: var(--rs-text-secondary);
@@ -278,12 +275,7 @@
     cursor: pointer;
 
     &.rs-btn-close {
-      padding: 4px 0;
-    }
-
-    .rs-@{date-picker-prefix} &,
-    .rs-@{date-range-picker-prefix} & {
-      right: (@picker-toggle-clean-right + @picker-item-content-padding-vertical);
+      padding: 0;
     }
   }
 
@@ -292,57 +284,9 @@
     // Extend  Dropdown toggle caret style
     .combobox-indicator-icon();
 
-    font-size: 16px;
+    font-size: var(--rs-font-size-md);
     color: var(--rs-text-secondary);
   }
-
-  .rs-picker-loader {
-    .combobox-indicator-icon();
-  }
-}
-
-// Picker Menu
-.rs-picker-popup {
-  position: absolute;
-  text-align: left;
-  z-index: @zindex-picker-popup;
-  border-radius: @border-radius;
-  background-color: var(--rs-bg-overlay);
-  box-shadow: var(--rs-shadow-overlay);
-  overflow: hidden;
-  // Remove transition
-  transition: none;
-  display: flex;
-  flex-direction: column;
-  padding: @border-radius 0;
-
-  .high-contrast-mode({
-    border: 1px solid var(--rs-border-primary);
-  });
-
-  // Increase z-index when modal opened.
-  .rs-modal-open & {
-    z-index: (@zindex-modal + @zindex-picker-toggle);
-  }
-
-  // Increase z-index when drawer opened.
-  .rs-drawer-open & {
-    z-index: (@zindex-drawer + @zindex-picker-toggle);
-  }
-
-  &.rs-picker-inline {
-    position: relative;
-    box-shadow: none;
-  }
-
-  .rs-search-box {
-    padding: (@picker-menu-padding - @border-radius) @picker-menu-padding
-      (@picker-menu-padding - @border-radius);
-  }
-
-  .rs-highlight .rs-highlight-mark {
-    padding: 0;
-  }
 }
 
 // Make sure styles the same with <Input>
@@ -350,12 +294,11 @@
 .rs-picker-input {
   .rs-btn,
   .rs-picker-toggle {
-    background-color: var(--rs-input-bg) !important;
+    background-color: var(--rs-picker-toggle-bg);
   }
 
-  &.rs-picker-disabled .rs-picker-toggle,
-  &.rs-picker-disabled .rs-btn {
-    background-color: var(--rs-input-disabled-bg) !important;
+  &.rs-picker-disabled {
+    --rs-picker-toggle-bg: var(--rs-input-disabled-bg);
   }
 
   &.rs-picker-disabled .rs-input-group {
@@ -380,15 +323,13 @@
   }
 
   .rs-checkbox-checker {
-    padding: 0;
+    display: flex;
 
     > label {
-      position: relative;
       cursor: pointer;
-      display: block;
-      padding: @picker-item-content-padding-vertical @picker-item-content-padding-horizontal
-        @picker-item-content-padding-vertical @picker-check-item-content-padding-left;
-      line-height: @line-height-computed;
+      width: 100%;
+      padding-inline: var(--rs-check-item-padding-inline);
+      padding-block: var(--rs-check-item-padding-block);
 
       .high-contrast-mode({
         transition: none;
@@ -408,17 +349,17 @@
 
       .grouped &,
       .@{ckpns}-menu-group-children & {
-        padding-left: @picker-check-item-content-padding-left +
+        padding-inline-start: @picker-check-item-content-padding-left +
           @picker-children-check-item-padding-left;
       }
     }
 
     .rs-checkbox-control {
-      left: @picker-item-content-padding-horizontal;
-
       .grouped &,
       .@{ckpns}-menu-group-children & {
-        left: (@picker-item-content-padding-horizontal + @picker-children-check-item-padding-left);
+        inset-inline-start: (
+          @picker-item-content-padding-horizontal + @picker-children-check-item-padding-left
+        );
       }
     }
   }

package/internals/Picker/styles/mixin.less

@@ -18,7 +18,7 @@
   // Set border & padding to menu group if  it isn't the first.
   .rs-@{prefix}-menu-group:not(:first-child) {
     margin-top: @picker-group-select-menu-gap;
-    border-top: 1px solid @picker-group-select-menu-lin-color;
+    border-top: 1px solid var(--rs-divider-border);
     padding-top: @picker-group-select-menu-gap;
   }
 }
@@ -27,17 +27,17 @@
 .picker-menu-group-title(@prefix) {
   .rs-@{prefix}-menu-group-title {
     padding: @picker-item-content-padding-vertical @picker-item-content-padding-horizontal;
-    padding-right: (@padding-x + @dropdown-caret-width + @dropdown-caret-padding);
+    padding-inline-end: (@padding-x + @dropdown-caret-width + @dropdown-caret-padding);
     position: relative;
     cursor: pointer;
     color: var(--rs-text-heading);
 
     .rs-@{prefix}-menu-group-caret {
       display: inline-block;
-      margin-left: 2px;
+      margin-inline-start: 2px;
       position: absolute;
       top: @padding-y;
-      right: @padding-x;
+      inset-inline-end: @padding-x;
       color: var(--rs-text-secondary);
     }
   }
@@ -63,11 +63,11 @@
 
 .picker-calendar-cell-content() {
   display: inline-block;
-  font-size: @calendar-table-cell-content-font-size;
-  line-height: @calendar-table-cell-content-line-height;
-  padding: @calendar-table-cell-content-padding;
   cursor: pointer;
-  border-radius: @border-radius;
+  font-size: var(--rs-calendar-cell-font-size);
+  line-height: var(--rs-calendar-cell-line-height);
+  padding: var(--rs-calendar-cell-padding);
+  border-radius: var(--rs-calendar-border-radius);
 
   &:hover {
     background-color: var(--rs-state-hover-bg);
@@ -89,171 +89,11 @@
   background: transparent;
 }
 
-.picker-custom-button-caret-size(@padding-horizontal,@padding-vertical,@clean-btn-margin:2px) {
-  @clean-btn-width: @dropdown-caret-width;
-
-  .rs-picker-toggle-wrapper & {
-    padding-right: (@padding-horizontal + @dropdown-caret-width + @dropdown-caret-padding);
-  }
-
-  .rs-picker-has-value.rs-picker-cleanable & {
-    padding-right: (@padding-horizontal + @dropdown-caret-width + @dropdown-caret-padding);
-  }
-
-  .rs-picker-toggle-indicator {
-    .rs-picker-caret-icon,
-    .rs-picker-clean {
-      top: @padding-vertical;
-      right: @padding-horizontal;
-
-      .rs-picker-default & {
-        top: @padding-vertical - @picker-default-toggle-border-width;
-      }
-    }
-
-    .rs-picker-loader{
-      top: @padding-vertical;
-      right: @padding-horizontal;
-    }
-  }
-}
-
-.picker-button-caret-lg() {
-  .picker-custom-button-caret-size(
-    @padding-x-lg,
-    @padding-y-lg,
-    @clean-btn-margin:4px
-  );
-}
-
-.picker-button-caret-md() {
-  .picker-custom-button-caret-size(@padding-x, @padding-y);
-}
-
-.picker-button-caret-sm() {
-  .picker-custom-button-caret-size(@padding-x-sm, @padding-y-sm);
-}
-
-.picker-button-caret-xs() {
-  .picker-custom-button-caret-size(
-    @padding-x-xs,
-    @padding-y-xs,
-    @clean-btn-margin:2px
-  );
-}
-
-.daterange-picker-custom-toggle(@calendar-caret-width: 14px,@padding-horizontal, @top, @clean-btn-margin:2px) {
-  @toggle-clean-padding: 4px;
-  @clean-btn-width: @dropdown-caret-width;
-
-  padding-right: (@padding-horizontal + @calendar-caret-width + @dropdown-caret-padding);
-
-  .rs-picker-toggle-indicator {
-    .rs-picker-clean,
-    .rs-picker-caret-icon {
-      top: @top;
-      right: @padding-horizontal;
-
-      .rs-picker-subtle & {
-        top: @top - @picker-default-toggle-border-width;
-      }
-    }
-  }
-}
-
-.date-picker-button-caret-lg() {
-  .rs-picker-date &,
-  .rs-picker-daterange & {
-    .daterange-picker-custom-toggle(
-      @calendar-caret-width: @font-size-large,
-      @padding-x-lg,
-      @top: 10px,
-      @clean-btn-margin: 4px
-    );
-  }
-}
-
-.date-picker-button-caret-md() {
-  .rs-picker-date &,
-  .rs-picker-daterange & {
-    .daterange-picker-custom-toggle(
-      @calendar-caret-width: @font-size-base,
-      @padding-x,
-      @top: 8px
-    );
-  }
-}
-
-.date-picker-button-caret-sm() {
-  .rs-picker-date &,
-  .rs-picker-daterange & {
-    .daterange-picker-custom-toggle(
-      @calendar-caret-width: @font-size-base,
-      @padding-x-sm,
-      @top: 4px
-    );
-  }
-}
-
-.date-picker-button-caret-xs() {
-  .rs-picker-date &,
-  .rs-picker-daterange & {
-    .daterange-picker-custom-toggle(
-      @calendar-caret-width: @font-size-extra-small,
-      @padding-x-xs,
-      @top: 2px
-    );
-  }
-}
-
-.picker-button-size(@size) {
-  .map-size(@size);
-
-  @padding-name: 'padding-y@{suffix}';
-  @padding-vertical: @@padding-name;
-
-  .rs-picker-default & {
-    .padding-vertical(@padding-vertical - @picker-default-toggle-border-width);
-  }
-}
-
-.picker-default-button-reset-padding-left(@size) {
-  .map-size(@size);
-  @padding-name: 'padding-x@{suffix}';
-  @padding-horizontal: @@padding-name;
-
-  .rs-picker-default & {
-    padding-left: @padding-horizontal - @picker-default-toggle-border-width;
-  }
-}
-
-.input-picker-input-sizes() {
-  @border-width: 2 * @picker-default-toggle-border-width;
-
-  .rs-picker-toggle.rs-btn-lg {
-    height: (@line-height-large-computed + @padding-y-lg*2 - @border-width);
-  }
-
-  .rs-picker-toggle.rs-btn-md {
-    height: (@line-height-computed + @padding-y*2 - @border-width);
-  }
-
-  .rs-picker-toggle.rs-btn-sm {
-    height: (@line-height-computed + @padding-y-sm*2 - @border-width);
-  }
-
-  .rs-picker-toggle.rs-btn-xs {
-    height: (@line-height-computed + @padding-y-xs*2 - @border-width);
-  }
-}
-
 // Default picker toggle
 .picker-default-toggle() {
   .rs-picker-default & {
-    .dropdown-toggle();
-
     color: var(--rs-text-primary);
-    border: @picker-default-toggle-border-width solid var(--rs-border-primary);
+    border: var(--rs-picker-toggle-border-width) solid var(--rs-border-primary);
   }
 
   .rs-picker-disabled & {
@@ -271,6 +111,7 @@
 // Subtle picker toggle
 .picker-subtle-toggle {
   .rs-picker-subtle & {
+    --rs-picker-toggle-border-width: 0px;
     .dropdown-toggle();
   }
 

package/internals/Ripple/styles/index.less

@@ -3,7 +3,7 @@
 .rs-ripple {
   position: absolute;
   display: block;
-  border-radius: 50%;
+  border-radius: var(--rs-radius-full);
   background-color: @ripple-bg;
   transform: scale(0);
   transition: 0s;
@@ -22,7 +22,7 @@
     width: 100%;
     height: 100%;
     top: 0;
-    left: 0;
+    inset-inline-start: 0;
     pointer-events: none;
 
     & when (@enable-ripple-effect = false) {

package/internals/ScrollView/styles/index.less

@@ -54,11 +54,11 @@
     }
     &::-webkit-scrollbar-track {
       background: var(--rs-scrollbar-bg);
-      border-radius: 10px;
+      border-radius: var(--rs-radius-lg);
     }
     &::-webkit-scrollbar-thumb {
       background-color: var(--rs-scrollbar-thumb-bg);
-      border-radius: 6px;
+      border-radius: var(--rs-radius-md);
       border: 3px solid var(--rs-scrollbar-bg);
 
       &:hover {

package/locales/pl_PL/package.json

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