rsuite 6.0.1 → 6.1.0

package/CardGroup/styles/index.scss

@@ -0,0 +1,10 @@
+@use '../../internals/Box/styles/index' as box;
+
+.rs-card-group {
+  --rs-card-group-columns: 4;
+  --rs-card-group-spacing: 20px;
+
+  display: grid;
+  grid-template-columns: repeat(var(--rs-card-group-columns), 1fr);
+  grid-gap: var(--rs-card-group-spacing);
+}

package/Carousel/styles/index.scss

@@ -0,0 +1,204 @@
+@use '../../internals/Box/styles/index' as box;
+@use '../../styles/mixins/utilities' as utils;
+
+// Carousel
+// ----------------------
+
+.rs-carousel {
+  --rs-carousel-bar-active-width: 28px;
+  --rs-carousel-bar-height: 4px;
+  --rs-carousel-bar-width: 18px;
+  --rs-carousel-dot-side-length: 10px;
+  --rs-carousel-dot-wrapper-side-length: 1.2vw; // 1.2% of the screen width.
+  --rs-carousel-handler-margin: 3px;
+  --rs-carousel-dot-margin: calc(-1 * var(--rs-carousel-handler-margin));
+  --rs-carousel-animation-duration: 0.3s;
+  --rs-carousel-handler-transition: background var(--rs-carousel-animation-duration) linear;
+  --rs-carousel-toolbar-wrapper-margin: 17px;
+
+  position: relative;
+  height: 400px;
+  overflow: hidden;
+  background-color: var(--rs-carousel-bg);
+
+  &-content {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  &-slider {
+    position: relative;
+    inset-inline-start: 0;
+    height: 100%;
+    transition: transform var(--rs-carousel-animation-duration) ease;
+    will-change: transform;
+
+    &-item {
+      background-color: var(--rs-carousel-bg);
+      float: inline-start;
+      height: 100%;
+      width: 100%;
+    }
+  }
+
+  &-slider-after {
+    position: absolute;
+    inset-inline-start: 0;
+    height: 100%;
+    width: 100%;
+    background-color: var(--rs-carousel-bg);
+    top: 0;
+    animation: moveLeftHalf var(--rs-carousel-animation-duration) ease forwards;
+
+    &-vertical {
+      animation: moveLeftHalf-vertical var(--rs-carousel-animation-duration) ease forwards;
+    }
+  }
+
+  &-toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+
+    > ul {
+      display: flex;
+      flex-wrap: wrap;
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+  }
+
+  &-label-wrapper {
+    margin: var(--rs-carousel-handler-margin);
+
+    input {
+      width: 0;
+      height: 0;
+      position: absolute;
+      opacity: 0;
+    }
+
+    input:checked ~ label {
+      background-color: var(--rs-carousel-indicator-active);
+    }
+  }
+
+  &-label {
+    cursor: pointer;
+    display: block;
+    background-color: var(--rs-carousel-indicator);
+    transition: var(--rs-carousel-handler-transition);
+    transition-property: background, width, height;
+    position: relative;
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: var(--rs-carousel-dot-margin);
+      bottom: var(--rs-carousel-dot-margin);
+      inset-inline-end: var(--rs-carousel-dot-margin);
+      inset-inline-start: var(--rs-carousel-dot-margin);
+    }
+
+    &:hover {
+      background-color: var(--rs-carousel-indicator-hover);
+    }
+  }
+
+  // Handler Shape
+  &-shape-dot &-label {
+    width: var(--rs-carousel-dot-side-length);
+    height: var(--rs-carousel-dot-side-length);
+    border-radius: var(--rs-radius-full);
+  }
+
+  &-shape-bar &-label {
+    border-radius: var(--rs-radius-xs);
+  }
+
+  &-placement-top.rs-carousel-shape-bar &-label,
+  &-placement-bottom.rs-carousel-shape-bar &-label {
+    width: var(--rs-carousel-bar-width);
+    height: var(--rs-carousel-bar-height);
+
+    &-wrapper input:checked ~ label {
+      width: var(--rs-carousel-bar-active-width);
+    }
+  }
+
+  &-placement-left.rs-carousel-shape-bar &-label,
+  &-placement-right.rs-carousel-shape-bar &-label {
+    width: var(--rs-carousel-bar-height);
+    height: var(--rs-carousel-bar-width);
+
+    &-wrapper input:checked ~ label {
+      height: var(--rs-carousel-bar-active-width);
+    }
+  }
+
+  // Placement
+
+  &-placement-top &-toolbar,
+  &-placement-bottom &-toolbar {
+    inset-inline-start: 0;
+    width: 100%;
+
+    > ul {
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  &-placement-top &-toolbar {
+    top: var(--rs-carousel-toolbar-wrapper-margin);
+  }
+
+  &-placement-bottom &-toolbar {
+    bottom: var(--rs-carousel-toolbar-wrapper-margin);
+  }
+
+  &-placement-left &-toolbar,
+  &-placement-right &-toolbar {
+    top: 0;
+    width: var(--rs-carousel-dot-wrapper-side-length);
+    height: 100%;
+
+    > ul {
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+    }
+  }
+
+  &-placement-left &-toolbar {
+    inset-inline-start: var(--rs-carousel-toolbar-wrapper-margin);
+  }
+
+  &-placement-right &-toolbar {
+    inset-inline-end: var(--rs-carousel-toolbar-wrapper-margin);
+  }
+
+  @keyframes moveLeftHalf {
+    0% {
+      transform: none;
+    }
+
+    100% {
+      transform: translateX(-50%);
+    }
+  }
+
+  @keyframes moveLeftHalf-vertical {
+    0% {
+      transform: none;
+    }
+
+    100% {
+      transform: translateY(-50%);
+    }
+  }
+}

package/CascadeTree/styles/_search.scss

@@ -0,0 +1,39 @@
+@use '../../styles/mixins/listbox' as listbox;
+
+// Search panel
+.rs-cascade-search-view-panel {
+  --rs-cascader-search-panel-max-height: 300px;
+
+  max-height: var(--rs-cascader-search-panel-max-height);
+  margin-top: 6px;
+  overflow: auto;
+}
+
+.rs-cascade-search-view-row {
+  @include listbox.listbox-option(flex-start);
+
+  &:hover {
+    @include listbox.listbox-option-active;
+  }
+
+  &.rs-cascade-search-view-row-focus {
+    @include listbox.listbox-option-active;
+  }
+
+  &:disabled,
+  &.rs-cascade-search-view-row-disabled {
+    @include listbox.listbox-options-disabled;
+  }
+}
+
+.rs-cascade-search-view-col {
+  display: inline-block;
+
+  &::after {
+    content: '\00a0/\00a0'; //content:' / '
+  }
+
+  &:last-child::after {
+    display: none;
+  }
+}

package/CascadeTree/styles/index.scss

@@ -0,0 +1,83 @@
+@use '../../internals/Box/styles/index' as box;
+@use '../../styles/mixins/listbox' as listbox;
+@use '../../styles/mixins/combobox' as combobox;
+@use './search';
+
+// CascadeTree
+// ----------------------
+
+.rs-cascade-tree {
+  .rs-highlight-mark {
+    padding: 0;
+  }
+}
+
+// Menu Items
+.rs-cascade-tree-items {
+  padding: 6px 0;
+  display: flex;
+
+  ul,
+  li {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    font-size: var(--rs-font-size-sm);
+  }
+}
+
+// Column
+.rs-cascade-tree-column {
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  &-loading {
+    padding: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .rs-icon {
+      margin: 4px;
+    }
+  }
+}
+
+// Tree item
+.rs-cascade-tree-item {
+  @include listbox.listbox-option;
+
+  position: relative;
+  word-break: break-word;
+
+  &:hover,
+  &:focus,
+  &.rs-cascade-tree-item-focus {
+    @include listbox.listbox-option-active;
+  }
+
+  &.rs-cascade-tree-item-active {
+    @include listbox.listbox-option-selected;
+
+    .rs-cascade-tree-caret {
+      color: var(--rs-text-primary);
+    }
+  }
+
+  &:disabled,
+  &.rs-cascade-tree-item-disabled {
+    @include listbox.listbox-options-disabled;
+  }
+
+  &-label {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--rs-spacing);
+  }
+}
+
+.rs-cascade-tree-caret {
+  @include combobox.combobox-indicator-icon;
+
+  font-size: var(--rs-font-size-sm);
+}

package/Cascader/styles/index.scss

@@ -0,0 +1,5 @@
+@use '../../internals/Box/styles/index' as box;
+@use '../../styles/mixins/combobox';
+@use '../../styles/mixins/listbox';
+@use '../../CascadeTree/styles/index' as cascade-tree;
+@use '../../internals/Picker/styles/index' as picker;

package/Center/styles/index.scss

@@ -0,0 +1,11 @@
+@use '../../internals/Box/styles/index' as box;
+
+.rs-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &[data-inline] {
+    display: inline-flex;
+  }
+}

package/CheckPicker/styles/index.scss

@@ -0,0 +1,23 @@
+@use '../../internals/Box/styles/index' as box;
+@use '../../styles/colors/colors-base' as colors;
+@use '../../Checkbox/styles/index' as checkbox;
+@use '../../internals/Picker/styles/index' as picker;
+@use '../../internals/Picker/styles/mixin' as picker-mixin;
+
+// Check Picker
+// ----------------------
+
+// Menu Items
+.rs-picker-check-menu-items {
+  --rs-check-item-padding-inline: calc(var(--rs-spacing) * 3);
+  --rs-check-item-padding-block: calc(var(--rs-spacing) * 2);
+
+  @include picker-mixin.picker-listbox-reset;
+  @include picker-mixin.picker-menu-group-common('picker');
+  @include picker-mixin.picker-menu-group-title('picker');
+  @include picker-mixin.picker-menu-group-closed('picker');
+
+  .rs-check-item.rs-checkbox-checked .rs-checkbox-checker > label {
+    @include picker-mixin.picker-item-active;
+  }
+}

package/CheckTree/styles/_variables.scss

@@ -0,0 +1,5 @@
+:root {
+  --rs-check-item-padding-inline: 0;
+  --rs-check-item-padding-block: 1px;
+  --rs-check-tree-view-max-height: 360px;
+}

package/CheckTree/styles/index.scss

@@ -0,0 +1,121 @@
+@use '../../internals/Box/styles/index' as box;
+@use '../../internals/Picker/styles/index' as picker;
+@use '../../internals/Picker/styles/mixin' as picker-mixin;
+@use '../../styles/colors/colors-base' as colors;
+@use '../../styles/mixins/utilities' as utils;
+@use '../../styles/mixins/color-modes' as color-modes;
+@use '../../Checkbox/styles/index' as checkbox;
+@use '../../Tree/styles/toggle' as tree-toggle;
+@use '../../Tree/styles/indent-line' as tree-indent-line;
+@use './variables';
+
+// Check Tree
+// ----------------------
+
+.rs-check-tree {
+  height: 100%;
+  flex: 1 1 auto;
+
+  .rs-check-tree-node-content {
+    .rs-check-item .rs-checkbox-checker {
+      .rs-checkbox-label {
+        padding: var(--rs-spacing);
+        width: auto;
+      }
+    }
+
+    &:focus-visible {
+      .rs-checkbox-label {
+        @include utils.focus-ring;
+      }
+    }
+  }
+
+  .rs-check-tree-empty {
+    padding-inline: calc(var(--rs-spacing) * 2);
+    padding-block: var(--rs-spacing);
+    color: var(--rs-text-secondary);
+  }
+
+  &-view {
+    max-height: var(--rs-tree-view-height, var(--rs-check-tree-view-max-height));
+    overflow-y: auto;
+  }
+
+  &.rs-tree-virtualized &-view {
+    overflow: hidden;
+  }
+
+  .rs-highlight-mark {
+    padding: 0;
+  }
+}
+
+// Only has the first level
+.rs-check-tree-without-children {
+  .rs-tree-node-toggle-placeholder {
+    display: none;
+  }
+}
+
+.rs-check-tree-group {
+  padding-inline-start: 20px;
+}
+
+.rs-check-tree-node {
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  .rs-check-item {
+    display: inline-block;
+
+    &:hover,
+    &:focus,
+    &.rs-check-item-focus {
+      background-color: transparent !important;
+
+      .rs-checkbox-label {
+        background-color: var(--rs-listbox-option-hover-bg);
+        color: var(--rs-listbox-option-hover-text);
+        border-radius: var(--rs-radius-md);
+      }
+    }
+
+    &[data-disabled='true'] {
+      .rs-checkbox-label {
+        color: var(--rs-text-disabled);
+        background: none;
+      }
+    }
+  }
+
+  &:focus .rs-check-item .rs-checkbox-checker > label {
+    @include picker-mixin.picker-item-hover;
+  }
+
+  .rs-check-item.rs-checkbox-checked .rs-checkbox-checker > label {
+    @include picker-mixin.picker-item-active;
+  }
+}
+
+// node children
+.rs-check-tree-node-children {
+  > .rs-check-tree-group {
+    position: relative;
+    display: none;
+  }
+
+  &.rs-check-tree-node-expanded > .rs-check-tree-group {
+    display: block;
+  }
+}
+
+.rs-check-tree {
+  &-node > .rs-check-tree-node-content .rs-checkbox-label {
+    @include utils.ellipsis;
+
+    display: inline-block;
+    vertical-align: top;
+  }
+}

package/CheckTreePicker/styles/index.scss

@@ -0,0 +1,20 @@
+@use '../../internals/Box/styles/index' as box;
+@use '../../internals/Picker/styles/index' as picker;
+@use '../../styles/colors/colors-base' as colors;
+@use '../../CheckTree/styles/index' as check-tree;
+
+// Check Tree Picker
+// ----------------------
+
+.rs-picker-popup {
+  display: flex;
+  flex-direction: column;
+
+  &.rs-check-tree-menu {
+    padding-top: var(--rs-picker-menu-padding);
+  }
+
+  .rs-check-tree-view {
+    padding: 2px 4px;
+  }
+}

package/Checkbox/styles/_mixin.scss

@@ -0,0 +1,5 @@
+@mixin checkbox-inner-wrap($border-color) {
+  border: 1px solid $border-color;
+  background-color: transparent;
+  border-radius: var(--rs-radius-sm);
+}

package/Checkbox/styles/_variables.scss

@@ -0,0 +1,4 @@
+:root {
+  --rs-checkbox-size: 16px;
+  --rs-checkbox-display: inline-flex;
+}

package/Checkbox/styles/index.scss

@@ -0,0 +1,158 @@
+@use '../../internals/Box/styles/index' as box;
+@use '../../styles/colors/colors-base' as colors;
+@use '../../styles/mixins/utilities' as utils;
+@use '../../styles/mixins/color-modes' as color-modes;
+@use '../../styles/mixins/input' as input;
+@use './variables';
+@use './mixin';
+
+.rs-checkbox {
+  display: var(--rs-checkbox-display);
+
+  @include input.check-radio-base;
+
+  [type='checkbox']:focus-visible ~ .rs-checkbox-inner::before {
+    @include utils.focus-ring;
+  }
+}
+
+.rs-checkbox-checker {
+  position: relative;
+  display: inline-flex;
+
+  > label {
+    display: inline-flex;
+    align-items: center;
+    gap: calc(var(--rs-spacing) * 2);
+  }
+}
+
+.rs-checkbox-control {
+  &::before,
+  .rs-checkbox-inner::before,
+  .rs-checkbox-inner::after {
+    content: '';
+    position: absolute;
+    inset-inline-start: 0;
+    top: 0;
+    display: block;
+  }
+
+  // Check mark
+  .rs-checkbox-inner::after {
+    opacity: 0;
+    transform: rotate(45deg) scale(0);
+    transition:
+      opacity 0.2s ease-in,
+      transform 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46);
+
+    @include color-modes.high-contrast-mode {
+      transition: none;
+    }
+
+    .rs-checkbox[data-checked='true'] &,
+    .rs-checkbox[data-checked='mixed'] & {
+      border: solid var(--rs-checkbox-icon);
+      width: 6px;
+      height: 9px;
+      margin-top: 2px;
+      margin-inline-start: 5px;
+      opacity: 1;
+    }
+
+    .rs-checkbox[data-checked='true'] & {
+      border-width: 0 2px 2px 0;
+      transform: rotate(45deg) scale(1);
+    }
+
+    .rs-checkbox[data-checked='mixed'] & {
+      border-width: 0 0 2px;
+      transform: rotate(0deg) scale(1);
+      width: 10px;
+      margin-top: 0;
+      margin-inline-start: 3px;
+    }
+  }
+}
+
+.rs-checkbox-control {
+  position: relative;
+  display: inline-flex;
+
+  [type='checkbox'] {
+    opacity: 0;
+    width: var(--rs-checkbox-size);
+    height: var(--rs-checkbox-size);
+    z-index: 1;
+  }
+
+  &::before,
+  .rs-checkbox-inner::before,
+  .rs-checkbox-inner::after {
+    width: var(--rs-checkbox-size);
+    height: var(--rs-checkbox-size);
+  }
+
+  // Ripple effect area
+  &::before {
+    @include mixin.checkbox-inner-wrap(var(--rs-checkbox-checked-bg));
+
+    transform: scale(1);
+    opacity: 0.7;
+    visibility: hidden;
+    transition:
+      transform 0.2s linear,
+      opacity 0.2s linear;
+
+    @include color-modes.high-contrast-mode {
+      transition: none;
+    }
+
+    .rs-checkbox[data-checked='true'] & {
+      transform: scale(1.5);
+      opacity: 0;
+      visibility: visible;
+    }
+  }
+
+  // Out border
+  .rs-checkbox-inner::before {
+    @include mixin.checkbox-inner-wrap(var(--rs-checkbox-border));
+
+    transition:
+      background 0.2s linear,
+      border 0.2s linear,
+      box-shadow 0.2s linear;
+
+    @include color-modes.high-contrast-mode {
+      transition: none;
+    }
+
+    label:hover & {
+      border-color: var(--rs-checkbox-checked-bg);
+    }
+
+    .rs-checkbox[data-disabled='true'][data-checked='false'] & {
+      border-color: var(--rs-checkbox-disabled-bg);
+      background-color: var(--rs-checkbox-disabled-bg);
+    }
+
+    .rs-checkbox[data-checked='true'] &,
+    .rs-checkbox[data-checked='mixed'] & {
+      border-color: var(--rs-checkbox-checked-bg);
+      background-color: var(--rs-checkbox-checked-bg);
+    }
+
+    .rs-checkbox[data-disabled='true'][data-checked='true'] &,
+    .rs-checkbox[data-disabled='true'][data-checked='mixed'] & {
+      opacity: 0.5;
+    }
+  }
+}
+
+@each $color in colors.$spectrum {
+  .rs-checkbox[data-color='#{$color}'] {
+    --rs-checkbox-checked-bg: var(--rs-#{'' + $color}-500);
+    --rs-checkbox-border: var(--rs-#{'' + $color}-500);
+  }
+}