rsuite 6.0.1 → 6.1.1

package/styles/components.scss

@@ -0,0 +1,114 @@
+// Import common styles
+@use './themes';
+@use './base';
+
+// Import component styles
+@use '../Accordion/styles/index' as accordion;
+@use '../Animation/styles/index' as animation;
+@use '../AutoComplete/styles/index' as auto-complete;
+@use '../Avatar/styles/index' as avatar;
+@use '../AvatarGroup/styles/index' as avatar-group;
+@use '../Badge/styles/index' as badge;
+@use '../Breadcrumb/styles/index' as breadcrumb;
+@use '../Button/styles/index' as button;
+@use '../ButtonGroup/styles/index' as button-group;
+@use '../ButtonToolbar/styles/index' as button-toolbar;
+@use '../Calendar/styles/index' as calendar;
+@use '../Container/styles/index' as container;
+@use '../Content/styles/index' as content;
+@use '../Card/styles/index' as card;
+@use '../CardGroup/styles/index' as card-group;
+@use '../Carousel/styles/index' as carousel;
+@use '../Cascader/styles/index' as cascader;
+@use '../CascadeTree/styles/index' as cascade-tree;
+@use '../Center/styles/index' as center;
+@use '../Checkbox/styles/index' as checkbox;
+@use '../CheckboxGroup/styles/index' as checkbox-group;
+@use '../CheckPicker/styles/index' as check-picker;
+@use '../CheckTree/styles/index' as check-tree;
+@use '../CheckTreePicker/styles/index' as check-tree-picker;
+@use '../DateInput/styles/index' as date-input;
+@use '../DatePicker/styles/index' as date-picker;
+@use '../DateRangePicker/styles/index' as date-range-picker;
+@use '../DateRangeInput/styles/index' as date-range-input;
+@use '../Divider/styles/index' as divider;
+@use '../Drawer/styles/index' as drawer;
+@use '../Dropdown/styles/index' as dropdown;
+@use '../FlexboxGrid/styles/index' as flexbox-grid;
+@use '../FormControl/styles/index' as form-control;
+@use '../FormControlLabel/styles/index' as form-control-label;
+@use '../FormErrorMessage/styles/index' as form-error-message;
+@use '../FormGroup/styles/index' as form-group;
+@use '../FormHelpText/styles/index' as form-help-text;
+@use '../FormStack/styles/index' as form-stack;
+@use '../Grid/styles/index' as grid;
+@use '../Header/styles/index' as header;
+@use '../HeadingGroup/styles/index' as heading-group;
+@use '../Heading/styles/index' as heading;
+@use '../Highlight/styles/index' as highlight;
+@use '../IconButton/styles/index' as icon-button;
+@use '../Image/styles/index' as image;
+@use '../InlineEdit/styles/index' as inline-edit;
+@use '../Kbd/styles/index' as kbd;
+@use '../List/styles/index' as list;
+@use '../Menu/styles/index' as menu;
+@use '../Message/styles/index' as message;
+@use '../Input/styles/index' as input;
+@use '../InputGroup/styles/index' as input-group;
+@use '../InputPicker/styles/index' as input-picker;
+@use '../Link/styles/index' as link;
+@use '../Loader/styles/index' as loader;
+@use '../Modal/styles/index' as modal;
+@use '../MultiCascader/styles/index' as multi-cascader;
+@use '../MultiCascadeTree/styles/index' as multi-cascade-tree;
+@use '../Nav/styles/index' as nav;
+@use '../Navbar/styles/index' as navbar;
+@use '../Notification/styles/index' as notification;
+@use '../NumberInput/styles/index' as number-input;
+@use '../Pagination/styles/index' as pagination;
+@use '../Panel/styles/index' as panel;
+@use '../PanelGroup/styles/index' as panel-group;
+@use '../PasswordInput/styles/index' as password-input;
+@use '../PasswordStrengthMeter/styles/index' as password-strength-meter;
+@use '../PinInput/styles/index' as pin-input;
+@use '../Placeholder/styles/index' as placeholder;
+@use '../Popover/styles/index' as popover;
+@use '../Progress/styles/index' as progress;
+@use '../ProgressCircle/styles/index' as progress-circle;
+@use '../Radio/styles/index' as radio;
+@use '../RadioGroup/styles/index' as radio-group;
+@use '../RadioTile/styles/index' as radio-tile;
+@use '../Rate/styles/index' as rate;
+@use '../SelectPicker/styles/index' as select-picker;
+@use '../SegmentedControl/styles/index' as segmented-control;
+@use '../Sidenav/styles/index' as sidenav;
+@use '../Sidebar/styles/index' as sidebar;
+@use '../Slider/styles/index' as slider;
+@use '../Stack/styles/index' as stack;
+@use '../Stat/styles/index' as stat;
+@use '../StatGroup/styles/index' as stat-group;
+@use '../Steps/styles/index' as steps;
+@use '../Table/styles/index' as table;
+@use '../Tabs/styles/index' as tabs;
+@use '../Tag/styles/index' as tag;
+@use '../TagGroup/styles/index' as tag-group;
+@use '../TagInput/styles/index' as tag-input;
+@use '../TagPicker/styles/index' as tag-picker;
+@use '../Text/styles/index' as text;
+@use '../Textarea/styles/index' as textarea;
+@use '../Timeline/styles/index' as timeline;
+@use '../Toggle/styles/index' as toggle;
+@use '../toaster/styles/index' as toaster;
+@use '../Tooltip/styles/index' as tooltip;
+@use '../Tree/styles/index' as tree;
+@use '../TreePicker/styles/index' as tree-picker;
+@use '../Uploader/styles/index' as uploader;
+@use '../VisuallyHidden/styles/index' as visually-hidden;
+
+// Internal Components
+@use '../internals/Burger/styles/index' as burger;
+@use '../internals/Box/styles/index' as box;
+@use '../internals/CloseButton/styles/index' as close-button;
+@use '../internals/Picker/styles/index' as picker;
+@use '../internals/SearchBox/styles/index' as search-box;
+@use '../internals/ScrollView/styles/index' as scroll-view;

package/styles/index.scss

@@ -0,0 +1,2 @@
+@use './css-reset';
+@use './components';

package/styles/mixins/_color-modes.scss

@@ -0,0 +1,20 @@
+@use '../variables' as vars;
+
+// Rules that take effect in dark mode.
+@mixin dark-mode {
+  @if (vars.$enable-dark-mode) {
+    [data-theme='dark'] &,
+    .rs-theme-dark & {
+      @content;
+    }
+  }
+}
+
+@mixin high-contrast-mode {
+  @if (vars.$enable-high-contrast) {
+    [data-theme='high-contrast'] &,
+    .rs-theme-high-contrast & {
+      @content;
+    }
+  }
+}

package/styles/mixins/_combobox.scss

@@ -0,0 +1,6 @@
+@mixin combobox-indicator-icon {
+  display: inline-flex;
+  align-items: center;
+  height: var(--rs-line-height-base);
+  font-size: var(--rs-font-size-sm);
+}

package/styles/mixins/_hacks.scss

@@ -0,0 +1,33 @@
+// All hacks syntax for all kinds of browsers
+
+
+// Safari
+// ---------------------
+@mixin safari-display($value) {
+  @media not all and (min-resolution: 0.001dpcm) {
+    & {
+      display: $value;
+    }
+  }
+}
+
+// Safari border-radius + overflow: hidden + CSS transform fix
+// @link https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b
+@mixin safari-border-radius-overflow-hidden {
+  @media not all and (min-resolution: 0.001dpcm) {
+    & {
+      /* stylelint-disable */
+      -webkit-mask-image: -webkit-radial-gradient(white, black);
+      mask-image: radial-gradient(white, black);
+      /* stylelint-enable */
+    }
+  }
+}
+
+@mixin safari-visibility($value) {
+  @media not all and (min-resolution: 0.001dpcm) {
+    & {
+      visibility: $value;
+    }
+  }
+}

package/styles/mixins/_input.scss

@@ -0,0 +1,30 @@
+// Radio and Checkbox common styles
+@mixin check-radio-base {
+  position: relative;
+  align-items: center;
+
+  // These classes are used on elements with <label> descendants
+  &[data-disabled='true'] {
+    label {
+      cursor: var(--rs-cursor-disabled);
+    }
+  }
+
+  label {
+    font-weight: normal;
+    cursor: pointer;
+  }
+
+  &-inner::before {
+    border-color: var(--rs-checkbox-checked-bg);
+  }
+
+  &[data-disabled='true'] label {
+    cursor: var(--rs-cursor-disabled);
+  }
+
+  // Disabled text styles.
+  &[data-disabled='true'] > &-checker > label {
+    color: var(--rs-text-disabled);
+  }
+}

package/styles/mixins/_listbox.scss

@@ -0,0 +1,70 @@
+// ARIA Listboxes and Options
+// used in picker menus, e.g. SelectPicker, CheckPicker, Cascader etc
+//
+// Common usage: (note the orders of different states)
+//
+// .item {
+//   @include listbox-option;
+//
+//   &:hover,
+//   &:focus {
+//     @include listbox-option-active;
+//   }
+//
+//   &-selected {
+//     @include listbox-option-selected;
+//   }
+//
+//   &-disabled {
+//     @include listbox-options-disabled;
+//   }
+// }
+@use './color-modes' as color-modes;
+@use './utilities' as utils;
+
+@mixin listbox {
+  list-style: none;
+}
+
+@mixin listbox-option($justify: space-between) {
+  display: flex;
+  justify-content: $justify;
+  padding-inline: var(--rs-picker-item-content-padding-horizontal);
+  padding-block: var(--rs-picker-item-content-padding-vertical);
+  clear: both;
+  font-weight: normal;
+  line-height: var(--rs-line-height-md);
+  color: var(--rs-text-primary);
+  cursor: pointer;
+  text-decoration: none;
+  width: 100%;
+}
+
+// "-active" for aria-activedescendant
+@mixin listbox-option-active {
+  background-color: var(--rs-listbox-option-hover-bg);
+  color: var(--rs-listbox-option-hover-text);
+
+  @include color-modes.high-contrast-mode {
+    @include utils.focus-ring-slim-inset;
+
+    color: var(--rs-listbox-option-hover-text);
+    text-decoration: underline;
+  }
+}
+
+@mixin listbox-option-selected {
+  background-color: var(--rs-listbox-option-selected-bg);
+  font-weight: bold;
+  color: var(--rs-listbox-option-selected-text);
+
+  @include color-modes.high-contrast-mode {
+    text-decoration: underline;
+  }
+}
+
+@mixin listbox-options-disabled {
+  color: var(--rs-listbox-option-disabled-text);
+  background: none;
+  cursor: not-allowed;
+}

package/styles/mixins/_menu.scss

@@ -0,0 +1,12 @@
+@use './color-modes' as color-modes;
+
+// "-active" for `aria-activedescendant`
+@mixin menuitem-active {
+  background-color: var(--rs-menuitem-active-bg);
+  color: var(--rs-menuitem-active-text);
+
+  @include color-modes.high-contrast-mode {
+    text-decoration: underline;
+    box-shadow: inset 0 0 0 2px #fff;
+  }
+}

package/styles/mixins/_utilities.scss

@@ -0,0 +1,130 @@
+// WebKit-style focus
+@mixin tab-focus {
+  outline: 0;
+}
+
+@mixin reset-link-text-decoration($text-decoration: none) {
+  & {
+    text-decoration: $text-decoration;
+  }
+
+  &:hover,
+  &:focus,
+  &:active {
+    text-decoration: $text-decoration;
+  }
+}
+
+@mixin text-emphasis-variant($color) {
+  color: $color;
+
+  a&:hover,
+  a&:focus {
+    color: darken($color, 10%);
+  }
+}
+
+// Text overflow
+// Requires inline-block or block for proper styling
+
+@mixin ellipsis-basic {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@mixin ellipsis($substract: 0) {
+  @include ellipsis-basic;
+  width: 100% - $substract;
+}
+
+// Drop shadow
+@mixin drop-shadow($shadow) {
+  filter: drop-shadow($shadow);
+}
+
+@mixin set-translate-transition($translateX: 0, $translateY: 0) {
+  transform: translate(0, 0);
+
+  &.rs-anim-in {
+    transform: translate($translateX, $translateY);
+  }
+}
+
+@mixin icon-bolder($width: 2px) {
+  stroke: currentColor;
+  stroke-width: $width;
+  stroke-linecap: round;
+}
+
+// Useful when adding focus ring to an element
+@mixin with-focus-ring {
+  &:focus-visible {
+    @include focus-ring;
+  }
+}
+
+// Useful when appending the ring into an existing :focus rule
+@mixin focus-ring {
+  outline: 2px solid var(--rs-focus-ring-color);
+  outline-offset: -1px;
+}
+
+@mixin focus-ring-slim {
+  @include focus-ring;
+  outline-width: 2px;
+  outline-offset: 0;
+}
+
+@mixin focus-ring-inset {
+  @include focus-ring;
+  outline-offset: -3px;
+}
+
+@mixin focus-ring-slim-inset {
+  @include focus-ring-inset;
+  outline-width: 2px;
+}
+
+@mixin focus-ring-outline {
+  outline: var(--rs-state-focus-outline);
+}
+
+// Border radius helpers
+@mixin border-top-radius($radius) {
+  border-start-end-radius: $radius;
+  border-start-start-radius: $radius;
+}
+
+@mixin border-right-radius($radius) {
+  border-end-end-radius: $radius;
+  border-start-end-radius: $radius;
+}
+
+@mixin border-bottom-radius($radius) {
+  border-end-end-radius: $radius;
+  border-end-start-radius: $radius;
+}
+
+@mixin border-left-radius($radius) {
+  border-end-start-radius: $radius;
+  border-start-start-radius: $radius;
+}
+
+// Make sure events pass through
+@mixin pointer-event-none {
+  pointer-events: none;
+}
+
+// Clearfix
+@mixin clearfix {
+  &::before,
+  &::after {
+    content: ' ';
+    display: table;
+  }
+
+  &::after {
+    clear: both;
+  }
+}

package/toaster/styles/animation.scss

@@ -0,0 +1,54 @@
+@keyframes notificationMoveIn {
+  0% {
+    opacity: 0;
+    transform-origin: 0% 0%;
+    transform: scaleY(0.8);
+  }
+
+  100% {
+    opacity: 1;
+    transform-origin: 0% 0%;
+    transform: scaleY(1);
+  }
+}
+
+@keyframes notificationMoveInLeft {
+  from {
+    opacity: 0;
+    transform: translate3d(-100%, 0, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes notificationMoveInRight {
+  from {
+    opacity: 0;
+    transform: translate3d(100%, 0, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes notificationMoveOut {
+  0% {
+    opacity: 1;
+    transform-origin: 0% 0%;
+    transform: scaleY(1);
+    max-height: 100px;
+  }
+
+  100% {
+    opacity: 0;
+    transform-origin: 0% 0%;
+    transform: scaleY(0.8);
+    max-height: 0;
+    overflow: hidden;
+  }
+}

package/toaster/styles/index.scss

@@ -0,0 +1,109 @@
+@use './animation';
+
+//
+// toaster
+// --------------------------------------------------
+
+.rs-toast {
+  --rs-toast-shadow: var(--rs-shadow-md);
+
+  // Reset pointer events ,to overwrite line:16
+  pointer-events: auto;
+}
+
+.rs-toast-container {
+  --rs-toast-spacing: 1.5rem;
+
+  position: fixed;
+  z-index: var(--rs-zindex-notification);
+  // Make sure the mouse can penetrate through the gap area.
+  pointer-events: none;
+  display: flex;
+  flex-direction: column;
+
+  // Notification has box-shadow on rs-notification-content
+  .rs-toast:not(.rs-notification) {
+    box-shadow: var(--rs-toast-shadow);
+  }
+
+  &-top-center,
+  &-bottom-center {
+    align-items: center;
+    width: 100%;
+
+    .rs-toast-fade-entered {
+      animation-name: notificationMoveIn;
+    }
+  }
+
+  &-bottom-start,
+  &-top-start {
+    align-items: flex-start;
+    inset-inline-start: var(--rs-toast-spacing);
+
+    .rs-toast-fade-entered {
+      animation-name: notificationMoveInLeft;
+
+      [dir='rtl'] & {
+        animation-name: notificationMoveInRight;
+      }
+    }
+  }
+
+  &-bottom-end,
+  &-top-end {
+    align-items: flex-end;
+    inset-inline-end: var(--rs-toast-spacing);
+
+    .rs-toast-fade-entered {
+      margin-inline-start: auto;
+      animation-name: notificationMoveInRight;
+
+      [dir='rtl'] & {
+        animation-name: notificationMoveInLeft;
+      }
+    }
+  }
+
+  &-top-center,
+  &-top-start,
+  &-top-end {
+    top: var(--rs-toast-spacing);
+  }
+
+  &-bottom-center,
+  &-bottom-start,
+  &-bottom-end {
+    bottom: var(--rs-toast-spacing);
+  }
+}
+
+// Animations
+.rs-toast-fade-entered,
+.rs-toast-fade-exiting {
+  animation-fill-mode: forwards;
+}
+
+.rs-toast-fade-entered {
+  animation-duration: 0.4s;
+  animation-timing-function: cubic-bezier(0.99, 0.44, 0.44, 1.35);
+}
+
+.rs-toast-fade-exited,
+.rs-toast-fade-entering {
+  opacity: 0;
+}
+
+// The same to @keyframe notificationMoveOut  100%.
+.rs-toast-fade-exited {
+  transform-origin: 0 0;
+  transform: scaleY(0.8);
+  max-height: 0;
+  overflow: hidden;
+}
+
+.rs-toast-fade-exiting {
+  animation-duration: 0.3s;
+  animation-timing-function: cubic-bezier(0.64, 0.65, 0.57, 1.13);
+  animation-name: notificationMoveOut;
+}

package/useToaster/styles/index.scss

@@ -0,0 +1 @@
+@use '../../toaster/styles/index';