rsuite 6.0.0-canary-20250507 → 6.0.0-canary-2025062016

package/internals/Picker/styles/index.less

@@ -1,477 +0,0 @@
-@import '../../../styles/common.less';
-@import '../../../Button/styles/index.less';
-@import '../../../styles/mixins/listbox.less';
-@import '../../../styles/mixins/combobox.less';
-@import '../../../Stack/styles/index.less';
-@import '../../../Loader/styles/index.less';
-@import '../../../Input/styles/index.less';
-@import '../../../InputGroup/styles/index.less';
-@import '../../../Highlight/styles/index.less';
-@import '../../CloseButton/styles/index.less';
-@import './mixin.less';
-
-//
-// Pickers
-// --------------------------------------------------
-
-// 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);
-  --rs-picker-toggle-border-color: var(--rs-border-primary);
-
-  display: inline-block;
-  vertical-align: middle;
-  max-width: 100%;
-
-  &[data-block='true'] {
-    display: block;
-    width: 100%;
-  }
-
-  &[data-disabled='true'] {
-    cursor: not-allowed;
-
-    .rs-picker-toggle-value,
-    .rs-picker-toggle-indicator,
-    .rs-picker-tag-list .rs-tag {
-      color: var(--rs-text-disabled) !important;
-    }
-
-    .rs-picker-value-count {
-      opacity: 0.5;
-    }
-
-    .rs-picker-toggle {
-      pointer-events: none;
-    }
-  }
-
-  &-toggle &-toggle-placeholder {
-    color: var(--rs-text-secondary);
-  }
-
-  &-has-value .rs-btn &-toggle-value,
-  &-has-value &-toggle &-toggle-value {
-    color: var(--rs-picker-value);
-  }
-
-  &-value-list {
-    flex: 0 1 auto;
-    .ellipsis-basic();
-  }
-
-  &-value-count {
-    margin-inline: var(--rs-picker-value-count-margin);
-    background-color: var(--rs-picker-count-bg);
-    color: var(--rs-picker-count-text);
-    flex-shrink: 0;
-  }
-
-  &-value-separator {
-    margin: 0 var(--rs-spacing) 0 0;
-  }
-
-  &.rs-picker-focused {
-    border-color: var(--rs-input-focus-border);
-  }
-
-  &-toggle-active,
-  &.rs-picker-focused {
-    --rs-picker-toggle-border-color: var(--rs-input-focus-border);
-    .focus-ring();
-  }
-
-  &-label.rs-input-group-addon {
-    color: var(--rs-text-primary);
-    padding-inline: calc(
-      var(--rs-input-group-inside-btn-padding) * 2 - var(--rs-picker-toggle-border-width)
-    );
-  }
-
-  &-loader {
-    width: var(--rs-picker-loader-size);
-    height: var(--rs-picker-loader-size);
-    display: flex;
-    align-items: center;
-  }
-
-  &-error > .rs-picker-input-group {
-    border-color: var(--rs-picker-state-error);
-
-    &:hover {
-      border-color: var(--rs-picker-state-error);
-    }
-
-    &:focus-within {
-      border-color: var(--rs-picker-state-error);
-      outline: var(--rs-picker-state-error-outline);
-    }
-  }
-}
-
-// 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);
-  --rs-picker-min-width: 0;
-
-  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);
-  min-width: var(--rs-picker-min-width);
-
-  .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-listbox {
-    max-height: var(--rs-picker-listbox-max-height);
-  }
-
-  // Responsive popup
-  &[data-breakpoint='xs'] {
-    min-width: unset;
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-
-    .rs-picker-listbox {
-      height: unset;
-      max-height: unset;
-    }
-
-    .rs-tree,
-    .rs-check-tree {
-      display: flex;
-      flex-direction: column;
-      &-view {
-        max-height: unset;
-        flex: 1 1 auto;
-      }
-    }
-
-    .rs-calendar-table {
-      width: 100%;
-    }
-
-    .rs-picker-box {
-      width: 100%;
-      height: 100%;
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-    }
-
-    &.rs-picker-popup-date,
-    .rs-picker-daterange-panel-only-time {
-      .rs-calendar {
-        height: 348px;
-      }
-    }
-  }
-}
-
-.rs-picker-toggle {
-  --rs-badge-one-char-size: 18px;
-
-  .picker-default-toggle();
-  .picker-subtle-toggle();
-
-  &-label {
-    color: var(--rs-text-secondary);
-  }
-
-  .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%;
-    inset-inline-start: 0;
-    top: 0;
-    border: 1px solid #0000;
-    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-inline-start: 14px;
-  }
-
-  &.rs-btn-sm &-textbox {
-    padding-inline-start: 8px;
-  }
-
-  &.rs-btn-xs &-textbox {
-    padding-inline-start: 6px;
-  }
-
-  &-read-only {
-    opacity: 0;
-  }
-
-  .rs-picker[data-variant='default'],
-  & {
-    transition: @picker-transition;
-
-    .high-contrast-mode({
-      transition: none;
-    });
-  }
-
-  .rs-picker[data-variant='default'] {
-    &:focus {
-      border-color: var(--rs-input-focus-border);
-    }
-  }
-
-  .rs-picker[data-variant='subtle'] & {
-    .rs-btn-subtle();
-
-    transition: none;
-
-    &-active {
-      background-color: var(--rs-btn-subtle-hover-bg);
-      color: var(--rs-btn-subtle-hover-text);
-    }
-  }
-
-  &[data-size='lg'] {
-    --rs-badge-one-char-size: 20px;
-    .rs-picker-clean {
-      .rs-icon {
-        width: 16px;
-        height: 16px;
-      }
-    }
-  }
-
-  &[data-size='md'] {
-    --rs-badge-one-char-size: 18px;
-  }
-
-  &[data-size='sm'] {
-    --rs-badge-one-char-size: 16px;
-    .rs-picker-clean {
-      height: 18px;
-    }
-  }
-
-  &[data-size='xs'] {
-    --rs-badge-one-char-size: 14px;
-    .rs-picker-clean {
-      height: 18px;
-      .rs-icon {
-        width: 12px;
-        height: 12px;
-      }
-    }
-  }
-
-  &[data-countable='true'] &-value {
-    display: flex;
-    align-items: center;
-  }
-}
-
-.rs-picker-toggle.rs-btn {
-  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 {
-    color: var(--rs-text-secondary);
-    transition: 0.2s color linear;
-    cursor: pointer;
-
-    &:hover {
-      color: var(--rs-text-primary);
-    }
-
-    &.rs-btn-close {
-      padding: 0;
-    }
-  }
-
-  // Picker toggle caret
-  .rs-picker-caret-icon {
-    // Extend  Dropdown toggle caret style
-    .combobox-indicator-icon();
-
-    font-size: var(--rs-font-size-md);
-    color: var(--rs-text-secondary);
-  }
-}
-
-// Make sure styles the same with <Input>
-.rs-picker[data-variant='default'],
-.rs-picker-input {
-  .rs-btn,
-  .rs-picker-toggle {
-    background-color: var(--rs-picker-toggle-bg);
-  }
-
-  &[data-disabled='true'] {
-    --rs-picker-toggle-bg: var(--rs-input-disabled-bg);
-
-    .rs-input-group {
-      pointer-events: none;
-    }
-  }
-}
-
-// Check Item
-.rs-check-item {
-  display: block;
-
-  &:not(.rs-checkbox-disabled):hover,
-  &:focus,
-  &&-focus {
-    .listbox-option-active();
-
-    .high-contrast-mode({
-      .rs-check-tree-node-text-wrapper {
-        text-decoration: underline;
-      }
-    });
-  }
-
-  .rs-checkbox-checker {
-    display: flex;
-
-    > label {
-      cursor: pointer;
-      width: 100%;
-      padding-inline: var(--rs-check-item-padding-inline);
-      padding-block: var(--rs-check-item-padding-block);
-
-      .high-contrast-mode({
-        transition: none;
-      });
-
-      &::before {
-        background-color: var(--rs-bg-overlay);
-
-        .high-contrast-mode({
-          background: none;
-        });
-      }
-
-      .rs-checkbox-disabled& {
-        cursor: not-allowed;
-      }
-
-      .grouped &,
-      .@{ckpns}-menu-group-children & {
-        padding-inline-start: @picker-check-item-content-padding-left +
-          @picker-children-check-item-padding-left;
-      }
-    }
-
-    .rs-checkbox-control {
-      .grouped &,
-      .@{ckpns}-menu-group-children & {
-        inset-inline-start: (
-          @picker-item-content-padding-horizontal + @picker-children-check-item-padding-left
-        );
-      }
-    }
-  }
-}
-
-.rs-picker-menu-group {
-  background-color: var(--rs-listbox-option-group-bg);
-  position: sticky;
-  top: -1px;
-  z-index: 1;
-}
-
-.rs-virt-list {
-  // Use for single selection
-  .rs-picker-select-menu-item,
-
-  // Use for multiple selection with Checkbox
-  .rs-check-item label {
-    .ellipsis-basic();
-  }
-}
-
-.rs-tree-virt-list {
-  // Use for single selection
-  .rs-tree-node-label {
-    .ellipsis-basic();
-  }
-}

package/internals/Picker/styles/mixin.less

@@ -1,131 +0,0 @@
-@import '../../../styles/variables.less';
-@import '../../../styles/mixins/color-modes.less';
-@import '../../../Dropdown/styles/mixin.less';
-
-// Picker Menu items common styles
-.picker-listbox-reset() {
-  overflow-y: auto;
-
-  ul {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-}
-
-// Picker Menu group common styles
-.picker-menu-group-common(@prefix) {
-  // 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 var(--rs-divider-border);
-    padding-top: @picker-group-select-menu-gap;
-  }
-}
-
-// Group title common styles
-.picker-menu-group-title(@prefix) {
-  .rs-@{prefix}-menu-group-title {
-    padding: @picker-item-content-padding-vertical @picker-item-content-padding-horizontal;
-    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-inline-start: 2px;
-      position: absolute;
-      top: @padding-y;
-      inset-inline-end: @padding-x;
-      color: var(--rs-text-secondary);
-    }
-  }
-}
-
-// Group closed common styles
-.picker-menu-group-closed(@prefix) {
-  .rs-@{prefix}-menu-group.folded {
-    .rs-@{prefix}-menu-group-caret {
-      transform: rotate(90deg);
-    }
-  }
-}
-
-.picker-item-hover() {
-  color: var(--rs-text-primary);
-  background-color: var(--rs-state-hover-bg);
-}
-
-.picker-item-active() {
-  font-weight: @picker-select-menu-item-selected-font-weight;
-}
-
-.picker-calendar-cell-content() {
-  display: inline-block;
-  cursor: pointer;
-  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);
-  }
-}
-
-.picker-calendar-cell-content-selected() {
-  color: var(--rs-calendar-date-selected-text);
-  background-color: var(--rs-bg-active);
-  box-shadow: none;
-
-  .high-contrast-mode({
-    text-decoration: underline;
-  });
-}
-
-.picker-calendar-title-show() {
-  color: var(--rs-text-active);
-  background: transparent;
-}
-
-// Default picker toggle
-.picker-default-toggle() {
-  [data-variant='default'] & {
-    color: var(--rs-text-primary);
-    border-width: var(--rs-picker-toggle-border-width);
-    border-color: var(--rs-picker-toggle-border-color);
-    border-style: solid;
-  }
-
-  [data-disabled='true'] & {
-    cursor: @cursor-disabled;
-  }
-
-  [data-variant='default']:not([data-disabled='true']) {
-    &:focus {
-      border-color: var(--rs-input-focus-border);
-    }
-  }
-}
-
-// Subtle picker toggle
-.picker-subtle-toggle {
-  .rs-picker[data-variant='subtle'] & {
-    --rs-picker-toggle-border-width: 0px;
-    .dropdown-toggle();
-  }
-
-  .rs-picker[data-variant='subtle'][data-disabled='true'] & {
-    cursor: @cursor-disabled;
-
-    &:focus,
-    &:active {
-      background: none;
-
-      &::after {
-        display: none;
-      }
-    }
-  }
-}

package/internals/Ripple/styles/index.less

@@ -1,36 +0,0 @@
-@import '../../../styles/common';
-
-.rs-ripple {
-  position: absolute;
-  display: block;
-  border-radius: var(--rs-radius-full);
-  background-color: @ripple-bg;
-  transform: scale(0);
-  transition: 0s;
-
-  &-rippling {
-    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1),
-      opacity 1s cubic-bezier(0.4, 0, 0.2, 1);
-    transform: scale(1);
-    opacity: 0;
-  }
-
-  &-pond {
-    content: '';
-    display: block;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    inset-inline-start: 0;
-    pointer-events: none;
-
-    & when (@enable-ripple-effect = false) {
-      display: none !important;
-    }
-
-    .high-contrast-mode({
-      display: none !important;
-    });
-  }
-}

package/internals/Ripple/styles/mixins.less

@@ -1,6 +0,0 @@
-.with-ripple() {
-  overflow: hidden;
-  position: relative;
-
-  .safari-border-radius-overflow-hidden();
-}

package/internals/ScrollView/styles/index.less

@@ -1,69 +0,0 @@
-.rs-scroll-view {
-  &&-shadow {
-    overflow: auto;
-    padding: 0px;
-
-    &::before,
-    &::after {
-      content: '';
-      position: sticky;
-      width: 100%;
-      height: 2px;
-      visibility: hidden;
-      display: block;
-      z-index: 1;
-    }
-
-    &::before {
-      top: -2px;
-      box-shadow: 3px 0 5px var(--rs-scroll-view-shadow-color);
-    }
-
-    &::after {
-      bottom: -2px;
-      box-shadow: -3px 0 5px var(--rs-scroll-view-shadow-color);
-    }
-
-    &.rs-scroll-view-thumb-middle {
-      &::before,
-      &::after {
-        visibility: visible;
-      }
-    }
-
-    &.rs-scroll-view-thumb-top {
-      &::after {
-        visibility: visible;
-      }
-    }
-
-    &.rs-scroll-view-thumb-bottom {
-      &::before {
-        visibility: visible;
-      }
-    }
-  }
-
-  // https://css-tricks.com/custom-scrollbars-in-webkit/
-  &&-custom-scrollbar {
-    scrollbar-width: thin;
-    scrollbar-color: var(--rs-scrollbar-thumb-bg) var(--rs-scrollbar-bg);
-
-    &::-webkit-scrollbar {
-      width: 12px;
-    }
-    &::-webkit-scrollbar-track {
-      background: var(--rs-scrollbar-bg);
-      border-radius: var(--rs-radius-lg);
-    }
-    &::-webkit-scrollbar-thumb {
-      background-color: var(--rs-scrollbar-thumb-bg);
-      border-radius: var(--rs-radius-md);
-      border: 3px solid var(--rs-scrollbar-bg);
-
-      &:hover {
-        background-color: var(--rs-scrollbar-thumb-hover-bg);
-      }
-    }
-  }
-}