rsuite 6.0.1 → 6.1.0

package/Drawer/styles/index.scss

@@ -0,0 +1,244 @@
+@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 '../../Modal/styles/animation';
+@use './mixin';
+@use './variables';
+
+// Container that the drawer scrolls within
+.rs-drawer {
+  display: none;
+  overflow: hidden;
+  position: fixed;
+  z-index: var(--rs-zindex-drawer);
+  box-shadow: var(--rs-drawer-shadow);
+  pointer-events: auto;
+  // Prevent Chrome on Windows from adding a focus outline. For details, see
+  // https://github.com/twbs/bootstrap/pull/10951.
+  outline: 0;
+
+  // Kill the scroll on the body
+  &-open.rs-drawer-has-backdrop {
+    overflow: hidden;
+  }
+
+  $sizes: lg, md, sm, xs;
+
+  // Drawer sizes
+  &-left,
+  &-right {
+    top: 0;
+    height: 100%;
+    width: var(--rs-drawer-inline-size);
+    max-width: 100%;
+
+    @each $size in $sizes {
+      &.rs-drawer-#{$size} {
+        --rs-drawer-inline-size: var(--rs-drawer-inline-size-#{$size});
+      }
+    }
+  }
+
+  &-top,
+  &-bottom {
+    width: 100%;
+    height: var(--rs-drawer-block-size);
+
+    @each $size in $sizes {
+      &.rs-drawer-#{$size} {
+        --rs-drawer-block-size: var(--rs-drawer-block-size-#{$size});
+      }
+    }
+  }
+
+  // Full page
+  &-full {
+    height: var(--rs-drawer-size-full);
+    width: var(--rs-drawer-size-full);
+  }
+
+  // Drawer directions
+  &-right {
+    inset-inline-end: 0;
+  }
+
+  &-left {
+    inset-inline-start: 0;
+  }
+
+  &-top {
+    top: 0;
+  }
+
+  &-bottom {
+    bottom: 0;
+  }
+}
+
+.rs-drawer-wrapper {
+  position: fixed;
+  z-index: var(--rs-zindex-drawer);
+  top: 0;
+  inset-inline-start: 0;
+  width: 100%;
+  height: 100%;
+
+  &.rs-drawer-no-backdrop {
+    pointer-events: none;
+  }
+}
+
+// Make sure drawer can be show in Safari.
+.rs-drawer-open .rs-drawer {
+  overflow: visible;
+}
+
+.rs-drawer-dialog {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-color: var(--rs-bg-overlay);
+
+  .rs-drawer-shake & {
+    animation: 0.3s linear shakeHead;
+  }
+
+  @include color-modes.high-contrast-mode {
+    background-color: var(--rs-drawer-bg);
+  }
+}
+
+.rs-drawer-backdrop {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  inset-inline-end: 0;
+  inset-inline-start: 0;
+  z-index: var(--rs-zindex-drawer);
+  background-color: var(--rs-bg-backdrop);
+
+  // Fade for backdrop
+  &.rs-anim-fade {
+    opacity: 0;
+    transition: opacity 0.3s ease-in;
+  }
+
+  &.rs-anim-in {
+    opacity: 1;
+  }
+}
+
+// Drawer header
+// Top section of the modal title.
+.rs-drawer-header {
+  @include utils.clearfix;
+
+  position: relative;
+  padding-block: 20px;
+  padding-inline: 60px 40px;
+  border-bottom: 1px solid var(--rs-border-primary);
+  display: flex;
+
+  .rs-drawer-header-close {
+    position: absolute;
+    inset-inline-start: 15px;
+    top: 23px;
+  }
+}
+
+.rs-drawer-title {
+  display: inline-flex;
+  align-items: center;
+  flex-grow: 1;
+  flex-shrink: 1;
+  margin: 0;
+  color: var(--rs-text-heading);
+  font-weight: normal;
+  font-size: var(--rs-drawer-title-font-size);
+  line-height: var(--rs-drawer-title-line-height);
+
+  @include utils.ellipsis-basic;
+}
+
+.rs-drawer-actions {
+  @include utils.clearfix; // clear it in case folks use .pull-* classes on buttons
+
+  flex-shrink: 0;
+  text-align: end; // right align buttons
+  border-top: none;
+  margin-inline-start: auto;
+
+  .rs-drawer-title ~ & {
+    margin-inline-start: 10px;
+  }
+
+  // Properly space out buttons
+  .rs-btn + .rs-btn {
+    margin-inline-start: 10px;
+    margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
+  }
+  // but override that for button groups
+  .rs-btn-group .rs-btn + .rs-btn {
+    margin-inline-start: -1px;
+  }
+  // and override it for block buttons as well
+  .rs-btn-block + .rs-btn-block {
+    margin-inline-start: 0;
+  }
+}
+
+// Drawer body
+.rs-drawer-body {
+  position: relative;
+  padding: var(--rs-drawer-body-padding);
+  height: 100%;
+  overflow: auto;
+
+  .rs-drawer-header + & {
+    height: calc(100% - 76px);
+  }
+
+  &-close {
+    position: absolute;
+    inset-inline-start: 15px;
+    top: 25px;
+
+    .rs-drawer-header ~ .rs-drawer-body & {
+      display: none;
+    }
+  }
+}
+
+// Measure scrollbar width for padding body during modal show/hide
+.rs-drawer-scrollbar-measure {
+  position: absolute;
+  top: -9999px;
+  width: 50px;
+  height: 50px;
+  overflow: scroll;
+}
+
+// Footer (for actions)
+// todo rs-drawer-footer has been deprecated, remove the styles once the component API is removed
+.rs-drawer-footer {
+  @include utils.clearfix; // clear it in case folks use .pull-* classes on buttons
+
+  text-align: end; // right align buttons
+  border-top: none;
+  margin: 0 var(--rs-drawer-footer-spacing) var(--rs-drawer-footer-spacing);
+
+  // Properly space out buttons
+  .rs-btn + .rs-btn {
+    margin-inline-start: 10px;
+    margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
+  }
+  // but override that for button groups
+  .rs-btn-group .rs-btn + .rs-btn {
+    margin-inline-start: -1px;
+  }
+  // and override it for block buttons as well
+  .rs-btn-block + .rs-btn-block {
+    margin-inline-start: 0;
+  }
+}

package/Dropdown/styles/_mixin.scss

@@ -0,0 +1,4 @@
+@mixin dropdown-toggle {
+  position: relative;
+  z-index: var(--rs-zindex-dropdown);
+}

package/Dropdown/styles/_variables.scss

@@ -0,0 +1,12 @@
+:root {
+  --rs-dropdown-divider-color: var(--rs-divider-border);
+  --rs-dropdown-shadow: var(--rs-shadow-md);
+  --rs-dropdown-caret-icon-padding-horizontal: 9px;
+  --rs-dropdown-item-padding-y: 8px;
+  --rs-dropdown-item-padding-x: 12px;
+  --rs-menu-padding: calc(var(--rs-spacing) * 1.5);
+  --rs-menuitem-padding-inline: calc(var(--rs-spacing) * 3);
+  --rs-menuitem-padding-block: calc(var(--rs-spacing) * 2);
+  --rs-menuitem-divider-margin-block: calc(var(--rs-spacing) * 1.5);
+  --rs-menuitem-spacing: calc(var(--rs-spacing) * 2);
+}

package/Dropdown/styles/index.scss

@@ -0,0 +1,334 @@
+@use 'sass:map';
+@use '../../internals/Box/styles/index' as box;
+@use '../../styles/mixins/utilities' as utils;
+@use '../../styles/mixins/color-modes' as color-modes;
+@use '../../styles/mixins/menu' as menu;
+@use '../../Button/styles/index' as button;
+@use './mixin' as *;
+@use './variables' as *;
+
+// The dropdown wrapper (div)
+.rs-dropdown {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle; // Make sure dropdown vertical alignment with button,button group and so on.
+
+  &[data-disabled='true'] &-toggle.rs-btn {
+    cursor: var(--rs-cursor-disabled) !important;
+    box-shadow: none;
+
+    &.rs-btn[data-appearance='subtle'] {
+      &,
+      &:focus,
+      &:active {
+        color: var(--rs-btn-subtle-disabled-text);
+        background: none;
+      }
+    }
+
+    &.rs-btn[data-appearance='primary'] {
+      &,
+      &:focus,
+      &:active {
+        opacity: 0.3;
+        background-color: var(--rs-btn-primary-bg);
+      }
+    }
+
+    &.rs-btn[data-appearance='link'] {
+      &,
+      &:focus,
+      &:active {
+        opacity: 0.3;
+        text-decoration: none;
+      }
+    }
+
+    &.rs-btn[data-appearance='ghost'] {
+      &,
+      &:focus,
+      &:active {
+        opacity: 0.3;
+      }
+    }
+
+    .rs-ripple-pond {
+      display: none !important;
+    }
+  }
+}
+
+// Dropdown Toggle
+.rs-dropdown-toggle {
+  &,
+  &.rs-btn {
+    // Force set style even if has `.btn`.
+    @include dropdown-toggle;
+    display: inline-flex;
+    align-items: center;
+    gap: calc(var(--rs-spacing) * 1.5);
+  }
+
+  &.rs-dropdown-toggle-no-caret {
+    padding-inline-end: var(--rs-padding-inline-md);
+  }
+}
+
+// The dropdown menu (ul)
+.rs-dropdown-menu {
+  margin: 0; // override default ul
+  list-style: none;
+  font-size: var(--rs-font-size-sm);
+  text-align: start; // Ensures proper alignment if parent has it changed (e.g., modal footer)
+  background-color: var(--rs-bg-overlay);
+  border-radius: var(--rs-radius-md);
+  padding: var(--rs-menu-padding);
+  outline: 0;
+
+  &:focus-visible {
+    @include utils.focus-ring();
+  }
+
+  .rs-dropdown & {
+    position: absolute;
+    // dropdown-menu zindex value is greater than dropdown-toggle
+    z-index: calc(var(--rs-zindex-dropdown) + 1);
+    float: inline-start;
+    box-shadow: var(--rs-dropdown-shadow);
+    outline: none;
+
+    @include color-modes.high-contrast-mode {
+      border: 1px solid var(--rs-border-secondary);
+    }
+  }
+
+  &[hidden] {
+    display: none;
+  }
+}
+
+// Links within the dropdown menu
+.rs-dropdown-item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: var(--rs-menuitem-spacing);
+  padding-inline: var(--rs-menuitem-padding-inline);
+  padding-block: var(--rs-menuitem-padding-block);
+  clear: both;
+  font-weight: normal;
+  line-height: var(--rs-line-height-md);
+  color: var(--rs-text-primary);
+  border-radius: var(--rs-radius-sm);
+  white-space: nowrap; // prevent links from randomly breaking onto new lines
+  cursor: pointer; //fixed link has not [href] style
+  text-decoration: none;
+
+  &:focus,
+  &:hover {
+    text-decoration: none;
+  }
+
+  &-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .rs-dropdown-item-shortcut {
+    border: none;
+    line-height: var(--rs-text-line-height-xs);
+  }
+
+  > .rs-icon {
+    width: var(--rs-font-size-base);
+    text-align: center;
+  }
+
+  &[data-active='true'] {
+    outline: 0;
+    font-weight: bold;
+
+    &,
+    &:hover,
+    &:focus {
+      color: var(--rs-menuitem-text-active);
+      background-color: var(--rs-menuitem-bg-active);
+
+      .rs-text {
+        color: var(--rs-menuitem-text-active);
+      }
+    }
+  }
+
+  // Hover/Focus state
+  &:focus-visible,
+  &[data-focus='true'] {
+    @include menu.menuitem-active;
+  }
+
+  &:focus {
+    outline: 0;
+  }
+
+  // Disabled state
+  &[data-disabled='true'] {
+    color: var(--rs-text-disabled);
+    cursor: var(--rs-cursor-disabled);
+
+    .rs-text {
+      color: var(--rs-text-disabled);
+    }
+
+    // Nuke hover/focus effects
+    &:hover,
+    &:focus {
+      text-decoration: none;
+      background-color: transparent;
+      background-image: none; // Remove CSS gradient
+    }
+  }
+}
+
+// Divider
+.rs-dropdown-item-divider {
+  height: 1px;
+  margin-block: var(--rs-menuitem-divider-margin-block);
+  overflow: hidden;
+  background-color: var(--rs-dropdown-divider-color);
+}
+
+// The dropdown submenu
+.rs-dropdown-item-submenu {
+  position: relative;
+
+  &:hover > .rs-dropdown-item-toggle {
+    @include menu.menuitem-active;
+  }
+
+  &.rs-dropdown-item {
+    position: relative;
+
+    > .rs-dropdown-item-toggle {
+      .rs-dropdown-menu-toggle-icon {
+        position: absolute;
+        top: 11px;
+        margin: 0;
+      }
+    }
+
+    > .rs-dropdown-menu {
+      position: absolute;
+      top: 0;
+    }
+  }
+
+  // Set submenu icon
+  &.rs-dropdown-item {
+    padding: 0;
+
+    .rs-dropdown-item-toggle {
+      padding-inline-end: 26px;
+    }
+
+    .rs-dropdown-menu-toggle-icon {
+      inset-inline-end: var(--rs-dropdown-caret-icon-padding-horizontal);
+    }
+  }
+
+  .rs-dropdown-menu {
+    inset-inline-start: 100%;
+
+    &[data-direction='start'] {
+      inset-inline-start: unset;
+      inset-inline-end: 100%;
+    }
+  }
+
+  // Open
+  &[data-open='true'] > .rs-dropdown-menu {
+    //use display table to fix-content
+    display: table;
+    animation-name: slideUpIn;
+    animation-play-state: running;
+  }
+}
+
+// Active state
+.rs-dropdown-menu > .rs-dropdown-menu-item[data-focus='true'] {
+  outline: 0;
+  background-color: var(--rs-menuitem-bg-active);
+
+  &:hover,
+  &:focus {
+    @include menu.menuitem-active;
+  }
+}
+
+// Open state for the dropdown
+.rs-dropdown:where([data-open='true']) {
+  > .rs-dropdown-menu {
+    animation-play-state: running;
+  }
+
+  // Remove the outline when :focus is triggered
+  > a {
+    outline: 0;
+  }
+
+  // Vertical placements
+  @mixin placement-vertical($position, $value) {
+    &[data-placement='#{$position}-start'],
+    &[data-placement='#{$position}-end'] {
+      > .rs-dropdown-menu {
+        #{$value}: 100%;
+      }
+    }
+  }
+
+  // Horizontal alignments
+  @mixin placement-align($start, $end, $value) {
+    &[data-placement='#{$start}'],
+    &[data-placement='#{$end}'] {
+      > .rs-dropdown-menu {
+        #{$value}: 0;
+      }
+    }
+  }
+
+  // Apply placements
+  @include placement-vertical(top, bottom);
+  @include placement-vertical(bottom, top);
+  @include placement-vertical(left, inset-inline-end);
+  @include placement-vertical(right, inset-inline-start);
+
+  // Apply alignments
+  @include placement-align(top-start, bottom-start, inset-inline-start);
+  @include placement-align(top-end, bottom-end, inset-inline-end);
+  @include placement-align(left-start, right-start, top);
+  @include placement-align(left-end, right-end, bottom);
+}
+
+// Dropdown section headers
+.rs-dropdown-header {
+  display: block;
+  padding: var(--rs-dropdown-item-padding-y) var(--rs-dropdown-item-padding-x);
+  line-height: var(--rs-line-height-md);
+  color: var(--rs-dropdown-header-text);
+  border-bottom: 1px solid var(--rs-dropdown-divider-color);
+  white-space: nowrap; // as with > li > a
+  margin-bottom: 2px;
+}
+
+// Opacity not working in Safari,so remove .
+@keyframes slideUpIn {
+  0% {
+    transform-origin: 0% 0%;
+    transform: scaleY(0.8);
+  }
+
+  100% {
+    transform-origin: 0% 0%;
+    transform: scaleY(1);
+  }
+}

package/FlexboxGrid/styles/index.scss

@@ -0,0 +1,82 @@
+@use '../../internals/Box/styles/index' as box;
+@use '../../styles/colors/colors-base' as colors;
+@use '../../styles/mixins/utilities' as utils;
+@use 'sass:math';
+
+// Flex-box grid wrapper
+.rs-flex-box-grid {
+  display: flex;
+  flex-flow: row wrap;
+
+  // Flex-box grid item
+  &-item {
+    width: 100%;
+    max-width: 100%;
+  }
+
+  //##==== Alignment (Y-Axis).
+
+  // At the top of the alignment.
+  &-top {
+    align-items: flex-start;
+  }
+
+  // Align center.
+  &-middle {
+    align-items: center;
+  }
+
+  // At the bottom of the alignment.
+  &-bottom {
+    align-items: flex-end;
+  }
+
+  //##==== Layout (X-Axis).
+
+  // Pack items from the start.
+  &-start {
+    justify-content: flex-start;
+  }
+
+  // Pack items around the center.
+  &-center {
+    justify-content: center;
+  }
+
+  // Pack items from the end.
+  &-end {
+    justify-content: flex-end;
+  }
+
+  // Distribute items evenly.
+  // The first item is flush with the start, the last is flush with the end.
+  &-space-between {
+    justify-content: space-between;
+  }
+
+  // Distribute items evenly.
+  // Items have a half-size space on either end.
+  &-space-around {
+    justify-content: space-around;
+  }
+}
+
+// Generate the flex grid.
+// Loop to generate flex grid.
+@for $value from 1 through 24 {
+  // Generate columns styles.
+  .rs-flex-box-grid-item-#{$value} {
+    flex: 0 0 auto;
+    // Provide positioning for child elements.
+    position: relative;
+    display: block;
+    // To prevent the collapse when column is empty.
+    min-height: 1px;
+    width: math.percentage(math.div($value, 24));
+  }
+
+  // Generate order styles.
+  .rs-flex-box-grid-item-order-#{$value} {
+    order: $value;
+  }
+}

package/Footer/styles/index.scss

@@ -0,0 +1,5 @@
+@use '../../internals/Box/styles/index' as box;
+
+.rs-footer {
+  flex: 0 0 auto;
+}

package/Form/styles/index.scss

@@ -0,0 +1,3 @@
+@use '../../internals/Box/styles/index' as box;
+
+// Form styles

package/FormControl/styles/_variables.scss

@@ -0,0 +1,4 @@
+// FormControl variables
+:root {
+  --rs-form-control-width: 300px;
+}