rsuite 6.0.0 → 6.1.0

package/internals/Picker/styles/_mixin.scss

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

package/internals/Picker/styles/_variables.scss

@@ -0,0 +1,9 @@
+// Picker variables
+:root {
+  --rs-picker-transition: var(--rs-input-transition);
+  --rs-picker-select-menu-item-selected-font-weight: bold;
+  --rs-picker-group-select-menu-gap: 6px;
+  --rs-picker-menu-padding: 12px;
+  --rs-picker-item-content-padding-vertical: 8px;
+  --rs-picker-item-content-padding-horizontal: var(--rs-picker-menu-padding);
+}

package/internals/Picker/styles/index.scss

@@ -0,0 +1,476 @@
+@use '../../../styles/themes';
+@use '../../../Button/styles/mixin' as button;
+@use '../../../styles/mixins/listbox';
+@use '../../../styles/mixins/combobox';
+@use '../../../styles/mixins/utilities' as utils;
+@use '../../../styles/mixins/color-modes';
+@use '../../../Stack/styles/index' as stack;
+@use '../../../Loader/styles/index' as loader;
+@use '../../../Input/styles/index' as input;
+@use '../../../InputGroup/styles/index' as input-group;
+@use '../../../Highlight/styles/index' as highlight;
+@use '../../CloseButton/styles/index' as close-button;
+@use './mixin';
+@use './variables';
+
+//
+// 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;
+    @include utils.ellipsis-basic;
+  }
+
+  .rs-picker-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;
+  }
+
+  // Focus state for input/tag picker
+  &[data-focus='true'] {
+    border-color: var(--rs-input-focus-border);
+  }
+
+  &-toggle[data-active='true'],
+  &[data-focus='true'] {
+    --rs-picker-toggle-border-color: var(--rs-input-focus-border);
+    @include utils.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: var(--rs-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);
+  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);
+
+  @include color-modes.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(var(--rs-zindex-modal) + var(--rs-zindex-picker-toggle));
+  }
+
+  // Increase z-index when drawer opened.
+  .rs-drawer-open & {
+    --rs-picker-popup-z-index: calc(var(--rs-zindex-drawer) + var(--rs-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;
+
+  @include mixin.picker-default-toggle;
+  @include mixin.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;
+    align-items: center;
+  }
+
+  &-value {
+    display: block;
+    @include utils.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;
+
+    &:where([readonly]) {
+      opacity: 0;
+    }
+  }
+
+  &:where([data-size='lg']) &-textbox {
+    padding-inline-start: 14px;
+  }
+
+  &:where([data-size='sm']) &-textbox {
+    padding-inline-start: 8px;
+  }
+
+  &:where([data-size='xs']) &-textbox {
+    padding-inline-start: 6px;
+  }
+
+  .rs-picker[data-appearance='default'],
+  & {
+    transition: var(--rs-picker-transition);
+
+    @include color-modes.high-contrast-mode {
+      transition: none;
+    }
+  }
+
+  .rs-picker[data-appearance='default'] {
+    &:focus {
+      border-color: var(--rs-input-focus-border);
+    }
+  }
+
+  .rs-picker[data-appearance='subtle'] & {
+    color: var(--rs-btn-subtle-text);
+    background-color: transparent;
+
+    &:hover {
+      color: var(--rs-btn-subtle-hover-text);
+      background-color: var(--rs-btn-subtle-hover-bg);
+    }
+
+    transition: none;
+
+    &[data-active='true'] {
+      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;
+  align-items: center;
+  justify-content: flex-start;
+  padding-inline: calc(var(--rs-btn-padding-inline) - var(--rs-picker-toggle-border-width));
+
+  [data-block='true'] & {
+    display: flex;
+  }
+}
+
+.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
+    @include combobox.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-appearance='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 {
+  --rs-checkbox-display: block;
+
+  &:not(.rs-checkbox-disabled):hover,
+  &:focus,
+  &#{&}-focus {
+    @include listbox.listbox-option-active;
+
+    @include color-modes.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);
+
+      @include color-modes.high-contrast-mode {
+        transition: none;
+      }
+
+      &::before {
+        background-color: var(--rs-bg-overlay);
+
+        @include color-modes.high-contrast-mode {
+          background: none;
+        }
+      }
+
+      &[data-disabled='true'] {
+        cursor: not-allowed;
+      }
+    }
+  }
+}
+
+.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 {
+    @include utils.ellipsis-basic;
+  }
+}
+
+.rs-tree-virt-list {
+  // Use for single selection
+  .rs-tree-node-label {
+    @include utils.ellipsis-basic;
+  }
+}

package/internals/Ripple/styles/_mixins.scss

@@ -0,0 +1,10 @@
+@use '../../../styles/mixins/hacks';
+
+@mixin with-ripple {
+  & {
+    position: relative;
+    overflow: hidden;
+  }
+  
+  @include hacks.safari-border-radius-overflow-hidden;
+}