@keenmate/web-daterangepicker 1.7.0-rc01 → 1.8.0

package/src/css/_header-navigation.css

@@ -0,0 +1,356 @@
+/* ==============================================================================
+   DATE RANGE PICKER - HEADER & NAVIGATION
+   ==============================================================================
+   Month/year header, navigation buttons, and rolling selector */
+
+/* ==============================================================================
+   CALENDAR HEADER
+   ============================================================================== */
+
+.drp-date-picker__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--drp-spacing-md);
+  gap: var(--drp-spacing-sm);
+}
+
+/* Static header (used in unified navigation mode) */
+.drp-date-picker__header--static {
+  justify-content: center;
+}
+
+.drp-date-picker__header--static .drp-date-picker__month-year {
+  cursor: default;
+}
+
+.drp-date-picker__header--static .drp-date-picker__month-year:hover {
+  background-color: transparent;
+}
+
+/* ==============================================================================
+   MONTH/YEAR DISPLAY (CLICKABLE TO OPEN ROLLING SELECTOR)
+   ============================================================================== */
+
+.drp-date-picker__month-year {
+  flex: 1;
+  text-align: center;
+  font-weight: var(--drp-font-weight-semibold);
+  font-size: var(--drp-font-size-base);
+  color: var(--drp-header-text-color);
+  padding: var(--drp-spacing-sm) var(--drp-spacing-md);
+  border-radius: var(--drp-border-radius);
+  cursor: pointer;
+}
+
+.drp-date-picker__month-year:hover {
+  background-color: var(--drp-header-bg-hover);
+}
+
+.drp-date-picker__month-year:active {
+  background-color: var(--drp-header-bg-active);
+}
+
+/* ==============================================================================
+   NAVIGATION BUTTONS (PREVIOUS/NEXT MONTH)
+   ============================================================================== */
+
+.drp-date-picker__nav {
+  width: var(--drp-nav-size);
+  height: var(--drp-nav-size);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: var(--drp-border-width-base) solid var(--drp-nav-border-color);
+  border-radius: var(--drp-border-radius);
+  background: transparent;
+  cursor: pointer;
+  font-size: var(--drp-font-size-lg);
+  color: var(--drp-nav-text-color);
+}
+
+.drp-date-picker__nav:hover {
+  background-color: var(--drp-nav-bg-hover);
+  border-color: var(--drp-nav-border-hover);
+}
+
+.drp-date-picker__nav:active {
+  background-color: var(--drp-nav-bg-active);
+}
+
+/* Disabled state */
+.drp-date-picker__nav--disabled,
+.drp-date-picker__nav[disabled] {
+  opacity: var(--drp-opacity-disabled);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.drp-date-picker__nav--disabled:hover,
+.drp-date-picker__nav[disabled]:hover {
+  background-color: transparent;
+  border-color: var(--drp-nav-border-color);
+}
+
+.drp-date-picker__nav--prev::before {
+  content: '‹';
+}
+
+.drp-date-picker__nav--next::before {
+  content: '›';
+}
+
+/* ==============================================================================
+   ROLLING SELECTOR VIEW (MONTH/YEAR SELECTION)
+   ============================================================================== */
+
+.drp-date-picker__rolling-selector {
+  /* Absolutely positioned to overlay calendar grid */
+  position: absolute;
+  inset: 0; /* Fill entire container from all edges */
+  display: none;
+  z-index: 10; /* Above calendar grid */
+  gap: var(--drp-spacing-xs);
+}
+
+.drp-date-picker__rolling-selector.drp-date-picker__rolling-selector--visible {
+  display: flex;
+}
+
+/* Hide calendar grid when rolling selector is visible */
+.drp-date-picker__rolling-selector.drp-date-picker__rolling-selector--visible ~ .drp-date-picker__weekdays,
+.drp-date-picker__rolling-selector.drp-date-picker__rolling-selector--visible ~ .drp-date-picker__days {
+  visibility: hidden; /* Keeps elements in layout flow (maintains container height) */
+}
+
+.drp-date-picker__rolling-list {
+  flex: 1;
+  min-width: 0; /* Allow flex child to shrink below content size (enables ellipsis on items) */
+  height: 100%; /* Fill parent height */
+  overflow-y: auto;
+  border: var(--drp-border-width-base) solid var(--drp-rolling-border-color);
+  border-radius: var(--drp-border-radius-lg);
+  /* Flex layout to control child item sizing */
+  display: flex;
+  flex-direction: column;
+  /* Smooth scrolling */
+  scroll-behavior: smooth;
+}
+
+/* Custom scrollbar */
+.drp-date-picker__rolling-list::-webkit-scrollbar {
+  width: var(--drp-rolling-scrollbar-width);
+}
+
+.drp-date-picker__rolling-list::-webkit-scrollbar-track {
+  background: var(--drp-rolling-bg);
+}
+
+.drp-date-picker__rolling-list::-webkit-scrollbar-thumb {
+  background: var(--drp-rolling-scrollbar-thumb);
+  border-radius: 3px;
+}
+
+.drp-date-picker__rolling-list::-webkit-scrollbar-thumb:hover {
+  background: var(--drp-rolling-scrollbar-thumb-hover);
+}
+
+.drp-date-picker__rolling-item {
+  padding: var(--drp-rolling-item-padding-v) var(--drp-rolling-item-padding-h);
+  cursor: pointer;
+  font-size: var(--drp-rolling-item-font-size);
+  min-height: var(--drp-rolling-item-min-height);
+  flex-shrink: 0;
+  /* Flexbox for vertical and horizontal centering */
+  display: flex;
+  align-items: center;
+  justify-content: var(--drp-rolling-item-justify-content);
+}
+
+.drp-date-picker__rolling-item:hover {
+  background-color: var(--drp-rolling-item-bg-hover);
+}
+
+.drp-date-picker__rolling-item--selected {
+  background-color: var(--drp-rolling-item-bg-selected);
+  color: var(--drp-rolling-item-color-selected);
+  font-weight: var(--drp-rolling-item-font-weight-selected);
+}
+
+.drp-date-picker__rolling-item--selected:hover {
+  background-color: var(--drp-rolling-item-bg-selected-hover);
+}
+
+/* Text wrapper for ellipsis support */
+.drp-date-picker__rolling-item-text {
+  /* Text overflow handling for long month names */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+  min-width: 0; /* Allow flex child to shrink below content size */
+}
+
+/* ==============================================================================
+   UNIFIED NAVIGATION (MULTI-MONTH CALENDARS)
+   ============================================================================== */
+
+/* Unified header - appears above all months */
+.drp-date-picker__unified-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--drp-spacing-lg);
+  gap: var(--drp-spacing-sm);
+  padding: 0 var(--drp-spacing-sm);
+}
+
+/* Date range display in unified header (e.g., "Jan 2025 - Jun 2025") */
+.drp-date-picker__unified-range {
+  flex: 1;
+  text-align: center;
+  font-weight: var(--drp-font-weight-semibold);
+  font-size: var(--drp-font-size-lg);
+  color: var(--drp-unified-range-text-color);
+  padding: var(--drp-spacing-sm) var(--drp-spacing-md);
+  border-radius: var(--drp-border-radius);
+  cursor: pointer;
+}
+
+.drp-date-picker__unified-range:hover {
+  background-color: var(--drp-unified-range-bg-hover);
+}
+
+.drp-date-picker__unified-range:active {
+  background-color: var(--drp-unified-range-bg-active);
+}
+
+/* Non-interactive state (when unifiedHeaderInteractive is false) */
+.drp-date-picker__unified-range--static {
+  cursor: default !important;
+}
+
+.drp-date-picker__unified-range--static:hover {
+  background-color: transparent;
+}
+
+.drp-date-picker__unified-range--static:active {
+  background-color: transparent;
+}
+
+/* Unified rolling selector - overlay for all months */
+.drp-date-picker__unified-rolling-selector {
+  position: absolute;
+  /* Position below unified header */
+  top: calc(var(--drp-spacing-lg) + var(--drp-spacing-lg) * 2);
+  /* Center horizontally */
+  left: 50%;
+  transform: translateX(-50%);
+  /* Size constraints (responsive but limited) */
+  width: min(90%, 450px); /* 90% of calendar width or 450px, whichever is smaller */
+  height: 350px;
+  max-height: 350px;
+  display: none;
+  z-index: 100; /* Above everything */
+  background: var(--drp-dropdown-background); /* White background to cover calendar below */
+  gap: var(--drp-spacing-xs); /* Match normal rolling selector gap */
+}
+
+.drp-date-picker__unified-rolling-selector--visible {
+  display: flex;
+}
+
+/* Apply rolling list styles to child lists in unified selector */
+.drp-date-picker__unified-rolling-selector .drp-date-picker__rolling-list {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  overflow-y: auto;
+  border: var(--drp-border-width-base) solid var(--drp-rolling-border-color);
+  border-radius: var(--drp-border-radius-lg);
+  display: flex;
+  flex-direction: column;
+  scroll-behavior: smooth;
+}
+
+/* Custom scrollbar for unified selector */
+.drp-date-picker__unified-rolling-selector .drp-date-picker__rolling-list::-webkit-scrollbar {
+  width: var(--drp-rolling-scrollbar-width);
+}
+
+.drp-date-picker__unified-rolling-selector .drp-date-picker__rolling-list::-webkit-scrollbar-track {
+  background: var(--drp-rolling-bg);
+}
+
+.drp-date-picker__unified-rolling-selector .drp-date-picker__rolling-list::-webkit-scrollbar-thumb {
+  background: var(--drp-rolling-scrollbar-thumb);
+  border-radius: 3px;
+}
+
+.drp-date-picker__unified-rolling-selector .drp-date-picker__rolling-list::-webkit-scrollbar-thumb:hover {
+  background: var(--drp-rolling-scrollbar-thumb-hover);
+}
+
+/* Apply rolling item styles to child items in unified selector */
+.drp-date-picker__unified-rolling-selector .drp-date-picker__rolling-item {
+  padding: var(--drp-rolling-item-padding-v) var(--drp-rolling-item-padding-h);
+  cursor: pointer;
+  font-size: var(--drp-rolling-item-font-size);
+  min-height: var(--drp-rolling-item-min-height);
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: var(--drp-rolling-item-justify-content);
+}
+
+.drp-date-picker__unified-rolling-selector .drp-date-picker__rolling-item:hover {
+  background-color: var(--drp-rolling-item-bg-hover);
+}
+
+.drp-date-picker__unified-rolling-selector .drp-date-picker__rolling-item--selected {
+  background-color: var(--drp-rolling-item-bg-selected);
+  color: var(--drp-rolling-item-color-selected);
+  font-weight: var(--drp-rolling-item-font-weight-selected);
+}
+
+.drp-date-picker__unified-rolling-selector .drp-date-picker__rolling-item--selected:hover {
+  background-color: var(--drp-rolling-item-bg-selected-hover);
+}
+
+.drp-date-picker__unified-rolling-selector .drp-date-picker__rolling-item--disabled {
+  color: var(--drp-unified-rolling-disabled-color);
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* Text wrapper for ellipsis support in unified selector */
+.drp-date-picker__unified-rolling-selector .drp-date-picker__rolling-item-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+  min-width: 0;
+}
+
+/* When unified navigation is enabled, hide individual month headers nav buttons
+   but keep the month/year text visible (it becomes static display, not clickable) */
+.drp-date-picker--unified-nav .drp-date-picker__month .drp-date-picker__header .drp-date-picker__nav {
+  display: none;
+}
+
+/* Make month/year display static (not clickable) */
+.drp-date-picker--unified-nav .drp-date-picker__month .drp-date-picker__header .drp-date-picker__month-year {
+  cursor: default;
+  font-size: var(--drp-font-size-base);
+  font-weight: var(--drp-font-weight-normal);
+  color: var(--drp-unified-month-color);
+}
+
+.drp-date-picker--unified-nav .drp-date-picker__month .drp-date-picker__header .drp-date-picker__month-year:hover {
+  background-color: transparent;
+}
+
+/* Hide individual month rolling selectors */
+.drp-date-picker--unified-nav .drp-date-picker__month .drp-date-picker__rolling-selector {
+  display: none !important;
+}

package/src/css/_loading.css

@@ -0,0 +1,36 @@
+/* ==============================================================================
+   DATE RANGE PICKER - LOADING
+   ==============================================================================
+   Loading overlay and spinner for async validation */
+
+.drp-date-picker__loading-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--drp-loading-overlay-background);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: var(--drp-z-index-dropdown);
+  border-radius: var(--drp-border-radius-lg);
+}
+
+.drp-date-picker__loading-spinner {
+  width: 40px;
+  height: 40px;
+  border: 4px solid var(--drp-loading-spinner-color);
+  border-top-color: var(--drp-loading-spinner-accent);
+  border-radius: 50%;
+  animation: drp-spin 0.8s linear infinite;
+}
+
+@keyframes drp-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/src/css/_modifiers.css

@@ -0,0 +1,41 @@
+/* ==============================================================================
+   DATE RANGE PICKER - MODIFIERS
+   ============================================================================== */
+
+/* ==============================================================================
+   TRANSITIONS (OPT-IN FOR PERFORMANCE)
+   ==============================================================================
+   By default, no transitions for maximum performance
+   Add enable-transitions attribute to enable smooth animations */
+
+.drp-date-picker.drp-transitions-enabled .drp-date-picker__badge-cell {
+  transition: transform var(--drp-transition-fast) var(--drp-easing-snappy);
+}
+
+.drp-date-picker.drp-transitions-enabled .drp-date-picker__nav {
+  transition: background-color var(--drp-transition-fast) var(--drp-easing-snappy),
+              border-color var(--drp-transition-fast) var(--drp-easing-snappy);
+}
+
+.drp-date-picker.drp-transitions-enabled .drp-date-picker__action-btn {
+  transition: background-color var(--drp-transition-fast) var(--drp-easing-snappy),
+              border-color var(--drp-transition-fast) var(--drp-easing-snappy);
+}
+
+.drp-date-picker.drp-transitions-enabled .drp-date-picker__month-year {
+  transition: background-color var(--drp-transition-fast) var(--drp-easing-snappy);
+}
+
+.drp-date-picker.drp-transitions-enabled .drp-date-picker__rolling-item {
+  transition: background-color var(--drp-transition-fast) var(--drp-easing-snappy);
+}
+
+/* ==============================================================================
+   INLINE MODE MODIFIER
+   ============================================================================== */
+
+.drp-date-picker--inline {
+  position: static;
+  display: block;
+  box-shadow: none;
+}

package/src/css/_summary-actions.css

@@ -0,0 +1,99 @@
+/* ==============================================================================
+   DATE RANGE PICKER - SUMMARY & ACTIONS
+   ==============================================================================
+   Selection summary (days/nights count) and action buttons (Today, Clear, Apply) */
+
+/* ==============================================================================
+   SELECTION SUMMARY (DAYS/NIGHTS COUNT)
+   ============================================================================== */
+
+.drp-date-picker__summary {
+  text-align: center;
+  padding: var(--drp-spacing-md);
+  border-top: var(--drp-border-width-base) solid var(--drp-summary-border-color);
+  font-size: var(--drp-font-size-sm);
+  color: var(--drp-summary-text-color);
+}
+
+.drp-date-picker__summary--visible {
+  display: block;
+}
+
+.drp-date-picker__summary--hidden {
+  display: none;
+}
+
+.drp-date-picker__summary-count {
+  font-weight: var(--drp-font-weight-semibold);
+  color: var(--drp-summary-count-color);
+  font-size: var(--drp-font-size-base);
+}
+
+/* ==============================================================================
+   ACTION BUTTONS
+   ============================================================================== */
+
+.drp-date-picker__actions {
+  display: flex;
+  gap: var(--drp-spacing-sm);
+  justify-content: space-between;
+  padding-top: var(--drp-spacing-sm);
+  border-top: var(--drp-border-width-base) solid var(--drp-summary-border-color);
+}
+
+.drp-date-picker__button {
+  flex: 1;
+  padding: var(--drp-spacing-sm) var(--drp-spacing-md);
+  border: var(--drp-border-width-base) solid var(--drp-button-border-color);
+  border-radius: var(--drp-border-radius);
+  background: transparent;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: var(--drp-font-size-sm);
+  font-weight: var(--drp-font-weight-medium);
+}
+
+.drp-date-picker__button:hover {
+  background-color: var(--drp-button-bg-hover);
+  border-color: var(--drp-button-border-hover);
+}
+
+/* Disabled state */
+.drp-date-picker__button:disabled,
+.drp-date-picker__button[disabled] {
+  opacity: var(--drp-opacity-disabled);
+  cursor: not-allowed;
+  pointer-events: none;  /* Critical - prevents all mouse interactions */
+}
+
+.drp-date-picker__button:disabled:hover,
+.drp-date-picker__button[disabled]:hover {
+  background-color: transparent;
+  border-color: var(--drp-button-border-color);
+}
+
+/* Today Button */
+.drp-date-picker__button--today {
+  color: var(--drp-button-today-color);
+}
+
+/* Clear Button */
+.drp-date-picker__button--clear {
+  color: var(--drp-button-clear-color);
+}
+
+/* Apply Button (primary action) */
+.drp-date-picker__button--apply {
+  background-color: var(--drp-button-apply-bg);
+  color: var(--drp-button-apply-color);
+  border-color: var(--drp-button-apply-border);
+}
+
+.drp-date-picker__button--apply:hover {
+  background-color: var(--drp-button-apply-bg-hover);
+}
+
+/* Cancel Button */
+.drp-date-picker__button--cancel {
+  color: var(--drp-button-cancel-color);
+}

package/src/css/_tooltips.css

@@ -0,0 +1,37 @@
+/* ==============================================================================
+   DATE RANGE PICKER - TOOLTIPS
+   ==============================================================================
+   Floating UI tooltips for badge hover information */
+
+/* ==============================================================================
+   FLOATING UI TOOLTIPS
+   ============================================================================== */
+
+.drp-date-picker__tooltip {
+  position: absolute;
+  z-index: var(--drp-z-index-tooltip);
+  background-color: var(--drp-tooltip-background);
+  color: var(--drp-tooltip-text-color);
+  padding: var(--drp-spacing-xs) var(--drp-spacing-sm);
+  border-radius: var(--drp-border-radius-sm);
+  font-size: var(--drp-font-size-xs);
+  line-height: var(--drp-tooltip-line-height);
+  max-width: var(--drp-tooltip-max-width);
+  word-wrap: break-word;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity var(--drp-transition-fast) var(--drp-easing-snappy);
+}
+
+.drp-date-picker__tooltip--visible {
+  opacity: 1;
+}
+
+/* Tooltip arrow */
+.drp-date-picker__tooltip-arrow {
+  position: absolute;
+  background-color: var(--drp-tooltip-background);
+  width: var(--drp-tooltip-arrow-size);
+  height: var(--drp-tooltip-arrow-size);
+  transform: rotate(45deg);
+}