@popsure/dirty-swan 0.63.1 → 0.64.0

package/src/lib/components/dateSelector/components/CalendarCaption.tsx

@@ -1,175 +0,0 @@
-import { useState, useRef, useCallback } from 'react';
-import classNames from 'classnames';
-
-import { useOnClickOutside } from '../../../hooks/useOnClickOutside';
-import styles from './calendarCaption.module.scss';
-
-interface CalendarCaptionProps {
-  date: Date;
-  months: string[];
-  yearBoundaries: { min: number; max: number };
-  onMonthChange: (date: Date) => void;
-  onPrevClick: () => void;
-  onNextClick: () => void;
-}
-
-export const CalendarCaption = ({
-  date,
-  months,
-  yearBoundaries,
-  onMonthChange,
-  onPrevClick,
-  onNextClick,
-}: CalendarCaptionProps) => {
-  const [openDropdown, setOpenDropdown] = useState<
-    'month' | 'year' | null
-  >(null);
-
-  const captionRef = useRef<HTMLDivElement | null>(null);
-
-  const closeDropdowns = useCallback(() => setOpenDropdown(null), []);
-
-  useOnClickOutside(captionRef, closeDropdowns);
-
-  const currentMonth = date.getMonth();
-  const currentYear = date.getFullYear();
-
-  const fromMonth = new Date(yearBoundaries.min, 0);
-  const toMonth = new Date(yearBoundaries.max, 11);
-
-  const isMonthDisabled = (monthIndex: number) => {
-    const candidate = new Date(currentYear, monthIndex);
-    return candidate < fromMonth || candidate > toMonth;
-  };
-
-  const years: number[] = [];
-  for (let y = yearBoundaries.min; y <= yearBoundaries.max; y++) {
-    years.push(y);
-  }
-
-  const handleMonthSelect = (monthIndex: number) => {
-    onMonthChange(new Date(currentYear, monthIndex));
-    setOpenDropdown(null);
-  };
-
-  const handleYearSelect = (year: number) => {
-    onMonthChange(new Date(year, currentMonth));
-    setOpenDropdown(null);
-  };
-
-  const toggleDropdown = (dropdown: 'month' | 'year') => {
-    setOpenDropdown((prev) => (prev === dropdown ? null : dropdown));
-  };
-
-  const isPrevDisabled =
-    currentYear === yearBoundaries.min && currentMonth === 0;
-  const isNextDisabled =
-    currentYear === yearBoundaries.max && currentMonth === 11;
-
-  return (
-    <div className={styles.caption} ref={captionRef}>
-      <button
-        type="button"
-        className={classNames(styles.navButton, styles.navButtonPrev)}
-        onClick={onPrevClick}
-        disabled={isPrevDisabled}
-        data-testid="calendar-nav-prev"
-      />
-
-      <div className={styles.dropdownContainer}>
-        <button
-          type="button"
-          className={styles.captionButton}
-          onClick={() => toggleDropdown('month')}
-          data-testid="calendar-caption-month"
-        >
-          {months[currentMonth]}
-          <span
-            className={classNames(styles.chevron, {
-              [styles.chevronOpen]: openDropdown === 'month',
-            })}
-          />
-        </button>
-
-        {openDropdown === 'month' && (
-          <div className={styles.dropdown} data-testid="month-dropdown">
-            <div className={styles.mobileHeader}>
-              <button
-                type="button"
-                className={styles.mobileCloseButton}
-                onClick={closeDropdowns}
-              >
-                ✕
-              </button>
-            </div>
-            {months.map((monthName, index) => (
-              <button
-                key={monthName}
-                type="button"
-                className={classNames(styles.dropdownItem, {
-                  [styles.dropdownItemSelected]: index === currentMonth,
-                })}
-                disabled={isMonthDisabled(index)}
-                onClick={() => handleMonthSelect(index)}
-              >
-                <span className={styles.radio} />
-                {monthName}
-              </button>
-            ))}
-          </div>
-        )}
-      </div>
-
-      <div className={styles.dropdownContainer}>
-        <button
-          type="button"
-          className={styles.captionButton}
-          onClick={() => toggleDropdown('year')}
-          data-testid="calendar-caption-year"
-        >
-          {currentYear}
-          <span
-            className={classNames(styles.chevron, {
-              [styles.chevronOpen]: openDropdown === 'year',
-            })}
-          />
-        </button>
-
-        {openDropdown === 'year' && (
-          <div className={styles.dropdown} data-testid="year-dropdown">
-            <div className={styles.mobileHeader}>
-              <button
-                type="button"
-                className={styles.mobileCloseButton}
-                onClick={closeDropdowns}
-              >
-                ✕
-              </button>
-            </div>
-            {years.map((year) => (
-              <button
-                key={year}
-                type="button"
-                className={classNames(styles.dropdownItem, {
-                  [styles.dropdownItemSelected]: year === currentYear,
-                })}
-                onClick={() => handleYearSelect(year)}
-              >
-                <span className={styles.radio} />
-                {year}
-              </button>
-            ))}
-          </div>
-        )}
-      </div>
-
-      <button
-        type="button"
-        className={classNames(styles.navButton, styles.navButtonNext)}
-        onClick={onNextClick}
-        disabled={isNextDisabled}
-        data-testid="calendar-nav-next"
-      />
-    </div>
-  );
-};

package/src/lib/components/dateSelector/components/calendarCaption.module.scss

@@ -1,168 +0,0 @@
-@use '../../../scss/public/grid' as *;
-@use '../../../scss/public/colors' as *;
-
-.caption {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  position: relative;
-}
-
-.navButton {
-  width: 48px;
-  height: 48px;
-  border: none;
-  background: none;
-  cursor: pointer;
-  background-position: center;
-  background-size: 50%;
-  background-repeat: no-repeat;
-  flex-shrink: 0;
-
-  &:hover:not(:disabled) {
-    border-radius: 50%;
-    background-color: $ds-orange-200;
-  }
-
-  &:disabled {
-    opacity: 0.3;
-    cursor: default;
-  }
-}
-
-.navButtonPrev {
-  background-image: url('../../icon/assets/chevron-left.svg');
-}
-
-.navButtonNext {
-  background-image: url('../../icon/assets/chevron-right.svg');
-}
-
-.captionButton {
-  background: none;
-  border: 1px solid $ds-neutral-300;
-  cursor: pointer;
-  font-weight: 700;
-  color: $ds-neutral-900;
-  padding: 8px 12px;
-  border-radius: 8px;
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-
-  &:hover {
-    background-color: $ds-orange-200;
-  }
-}
-
-.chevron {
-  display: inline-block;
-  width: 8px;
-  height: 8px;
-  border-right: 2px solid $ds-neutral-600;
-  border-bottom: 2px solid $ds-neutral-600;
-  transform: rotate(45deg);
-  margin-left: 2px;
-  margin-bottom: 2px;
-  transition: transform 0.2s;
-}
-
-.chevronOpen {
-  transform: rotate(-135deg);
-  margin-bottom: -2px;
-}
-
-.dropdownContainer {
-  position: relative;
-}
-
-.dropdown {
-  position: absolute;
-  top: calc(100% + 4px);
-  left: 50%;
-  transform: translateX(-50%);
-  background: white;
-  border: 1px solid $ds-neutral-300;
-  border-radius: 12px;
-  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
-  z-index: 200;
-  max-height: 240px;
-  overflow-y: auto;
-  min-width: 140px;
-  padding: 8px 0;
-
-  @include p-size-mobile {
-    position: fixed;
-    top: 16px;
-    left: 16px;
-    right: 16px;
-    bottom: 16px;
-    width: auto;
-    height: fit-content;
-    max-height: calc(100vh - 32px);
-    transform: none;
-    border-radius: 16px;
-    display: flex;
-    flex-direction: column;
-    padding: 16px 0;
-    min-width: unset;
-  }
-}
-
-.dropdownItem {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  width: 100%;
-  padding: 8px 16px;
-  background: none;
-  border: none;
-  cursor: pointer;
-  font-size: 16px;
-  text-align: left;
-  color: $ds-neutral-900;
-  white-space: nowrap;
-
-  &:hover:not(:disabled) {
-    background-color: $ds-orange-200;
-  }
-
-  &:disabled {
-    color: $ds-neutral-400;
-    cursor: not-allowed;
-  }
-
-  @include p-size-mobile {
-    padding: 16px 24px;
-    font-size: 18px;
-  }
-}
-
-.radio {
-  display: inline-block;
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  border: 2px solid $ds-neutral-400;
-  flex-shrink: 0;
-}
-
-.dropdownItemSelected {
-  font-weight: 700;
-  background-color: $ds-orange-100;
-
-  .radio {
-    border-color: $ds-neutral-900;
-    background-color: $ds-neutral-900;
-    box-shadow: inset 0 0 0 3px white;
-  }
-}
-
-.mobileHeader {
-  display: none;
-}
-
-.mobileCloseButton {
-  display: none;
-}

package/src/lib/components/dateSelector/components/datepicker.scss

@@ -1,356 +0,0 @@
-@use '../../../scss/public/grid' as *;
-@use '../../../scss/public/colors' as *;
-
-.DayPickerInput {
-  cursor: pointer;
-  position: relative;
-  background-color: white;
-  display: flex;
-  align-items: center;
-  height: 40px;
-  min-width: 180px;
-  padding-left: 8px;
-  line-height: 40px;
-  border-radius: 4px;
-  text-align: left;
-  border: 1px solid $ds-neutral-600;
-}
-
-.DayPickerInput input {
-  cursor: pointer;
-  border: none;
-  background-color: transparent;
-  height: 100%;
-  color: $ds-neutral-800;
-  font-size: 16px;
-}
-
-.DayPickerInput::before {
-  content: '';
-  display: inline-block;
-  position: absolute;
-  right: 8px;
-  top: 50%;
-  transform: translateY(-50%);
-  border-left: 9px solid transparent;
-  border-right: 9px solid transparent;
-  border-top: 12px solid $ds-neutral-600;
-}
-
-.DayPickerInput:hover::before {
-  border-top: 12px solid $ds-neutral-800;
-}
-
-.DayPickerInput:hover {
-  border-color: $ds-neutral-800;
-}
-
-.DayPicker {
-  position: absolute;
-  left: -9px;
-  top: 8px;
-  z-index: 100;
-  border-radius: 4px;
-  box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
-  background-color: white;
-  display: inline-block;
-  font-size: 1rem;
-}
-
-.DayPicker-wrapper {
-  position: relative;
-
-  flex-direction: row;
-  padding-bottom: 1em;
-
-  user-select: none;
-}
-
-.DayPicker-Months {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-}
-
-.DayPicker-Month {
-  display: table;
-  margin: 0 1em;
-  margin-top: 1em;
-  border-spacing: 0;
-  border-collapse: collapse;
-
-  user-select: none;
-
-  font: 16px;
-}
-
-.DayPicker-NavButton {
-  position: absolute;
-  top: 1em;
-  right: 1.5em;
-  left: auto;
-  display: inline-block;
-  margin-top: 2px;
-  width: 1.25em;
-  height: 1.25em;
-  background-position: center;
-  background-size: 50%;
-  background-repeat: no-repeat;
-  color: #8b9898;
-  cursor: pointer;
-}
-
-.DayPicker-NavButton:hover {
-  opacity: 0.8;
-}
-
-.DayPicker-NavButton--prev {
-  margin-right: 1.5em;
-  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAwCAYAAAB5R9gVAAAABGdBTUEAALGPC/xhBQAAAVVJREFUWAnN2G0KgjAYwPHpGfRkaZeqvgQaK+hY3SUHrk1YzNLay/OiEFp92I+/Mp2F2Mh2lLISWnflFjzH263RQjzMZ19wgs73ez0o1WmtW+dgA01VxrE3p6l2GLsnBy1VYQOtVSEH/atCCgqpQgKKqYIOiq2CBkqtggLKqQIKgqgCBjpJ2Y5CdJ+zrT9A7HHSTA1dxUdHgzCqJIEwq0SDsKsEg6iqBIEoq/wEcVRZBXFV+QJxV5mBtlDFB5VjYTaGZ2sf4R9PM7U9ZU+lLuaetPP/5Die3ToO1+u+MKtHs06qODB2zBnI/jBd4MPQm1VkY79Tb18gB+C62FdBFsZR6yeIo1YQiLJWMIiqVjQIu1YSCLNWFgijVjYIuhYYCKoWKAiiFgoopxYaKLUWOii2FgkophYp6F3r42W5A9s9OcgNvva8xQaysKXlFytoqdYmQH6tF3toSUo0INq9AAAAAElFTkSuQmCC');
-}
-
-.DayPicker-NavButton--next {
-  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAwCAYAAAB5R9gVAAAABGdBTUEAALGPC/xhBQAAAXRJREFUWAnN119ugjAcwPHWzJ1gnmxzB/BBE0n24m4xfNkTaOL7wOtsl3AXMMb+Vjaa1BG00N8fSEibPpAP3xAKKs2yjzTPH9RAjhEo9WzPr/Vm8zgE0+gXATAxxuxtqeJ9t5tIwv5AtQAApsfT6TPdbp+kUBcgVwvO51KqVhMkXKsVJFXrOkigVhCIs1Y4iKlWZxB1rX4gwlpRIIpa8SDkWmggrFq4IIRaJKCYWnSgnrXIQV1r8YD+1Vrn+bReagysIFfLABRt31v8oBu1xEBttfRbltmfjgEcWh9snUS2kNdBK6WN1vrOWxObWsz+fjxevsxmB1GQDfINWiev83nhaoiB/CoOU438oPrhXS0WpQ9xc1ZQWxWHqUYe0I0qrKCQKjygDlXIQV2r0IF6ViEBxVTBBSFUQQNhVYkHIVeJAtkNsbQ7c1LtzP6FsObhb2rCKv7NBIGoq4SDmKoEgTirXAcJVGkFSVVpgoSrXICGUMUH/QBZNSUy5XWUhwAAAABJRU5ErkJggg==');
-}
-
-.DayPicker-NavButton--interactionDisabled {
-  visibility: hidden;
-}
-
-.DayPicker-Caption {
-  display: table-caption;
-  margin-bottom: 0.5em;
-  padding: 0 0.5em;
-  text-align: left;
-}
-
-.DayPicker-Caption > div {
-  font-weight: 500;
-  font-size: 1.15em;
-}
-
-.DayPicker-Weekdays {
-  display: table-header-group;
-  margin-top: 1em;
-}
-
-.DayPicker-WeekdaysRow {
-  display: table-row;
-}
-
-.DayPicker-Weekday {
-  display: table-cell;
-  padding: 0.5em;
-  color: #8b9898;
-  text-align: center;
-  font-size: 0.875em;
-}
-
-.DayPicker-Weekday abbr[title] {
-  border-bottom: none;
-  text-decoration: none;
-}
-
-.DayPicker-Body {
-  display: table-row-group;
-}
-
-.DayPicker-Week {
-  display: table-row;
-}
-
-.DayPicker-Day {
-  min-width: 40px;
-  height: 40px;
-}
-
-.DayPicker-WeekNumber {
-  display: table-cell;
-  padding: 0.5em;
-  min-width: 1em;
-  border-right: 1px solid #eaecec;
-  color: #8b9898;
-  vertical-align: middle;
-  text-align: right;
-  font-size: 0.75em;
-  cursor: pointer;
-}
-
-.DayPicker--interactionDisabled .DayPicker-Day {
-  cursor: default;
-}
-
-.DayPicker-Footer {
-  padding-top: 0.5em;
-}
-
-.DayPicker-TodayButton {
-  border: none;
-  background-color: transparent;
-  background-image: none;
-  box-shadow: none;
-  color: #4a90e2;
-  font-size: 0.875em;
-  cursor: pointer;
-}
-
-.DayPicker-Day--sunday {
-  background-color: #f7f8f8;
-}
-
-.DayPicker-Day--sunday:not(.DayPicker-Day--today) {
-  color: #dce0e0;
-}
-
-.DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) {
-  position: relative;
-
-  background-color: $ds-orange-500;
-  color: $ds-neutral-900;
-}
-
-.DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside):hover {
-  background-color: $ds-orange-500;
-}
-
-.DayPicker:not(.DayPicker--interactionDisabled)
-  .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside):hover {
-  background-color: white;
-  outline: 2px solid $ds-orange-600;
-  outline-offset: -2px;
-  border-radius: 50%;
-}
-
-.DayPickerInput {
-  display: inline-block;
-}
-
-.DayPickerInput-OverlayWrapper {
-  position: relative;
-}
-
-.DayPickerInput-Overlay {
-  position: absolute;
-  left: 0;
-  z-index: 1;
-
-  background: white;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
-}
-
-.DayPicker {
-  position: absolute;
-  left: 40px;
-  top: -112px;
-  z-index: 100;
-  background-color: white;
-  box-shadow: 0px 0px 32px rgba(210, 210, 216, 0.25);
-  border-radius: 16px;
-  display: inline-block;
-  color: $ds-neutral-900;
-
-  @include p-size-mobile {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    margin: auto;
-    width: fit-content;
-    height: fit-content;
-  }
-}
-
-.DayPicker-wrapper {
-  padding: 0 16px 24px 16px;
-}
-
-.DayPicker-NavBar {
-  display: none;
-}
-
-
-.DayPicker-Months {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  margin-top: 14px;
-}
-
-.DayPicker-Month {
-  display: block;
-  margin: 0;
-  user-select: none;
-  font: 16px;
-  width: 308px;
-}
-
-.DayPicker-Caption {
-  display: block;
-  margin: 0 0 16px 0;
-  padding: unset;
-}
-
-.DayPicker-Weekdays,
-.DayPicker-Body {
-  display: table;
-  width: 100%;
-  border-spacing: 0;
-  border-collapse: collapse;
-}
-
-.DayPicker-WeekdaysRow {
-  display: table-row;
-}
-
-.DayPicker-Weekday {
-  display: table-cell;
-  padding: 0.5em;
-  color: #8b9898;
-  text-align: center;
-  font-size: 0.875em;
-}
-
-.DayPicker-Weekday abbr[title] {
-  border-bottom: none;
-  text-decoration: none;
-}
-
-.DayPicker-Week {
-  display: table-row;
-}
-
-.DayPicker-Day {
-  display: table-cell;
-  width: 44px;
-  height: 44px;
-  padding: 0;
-  border-radius: 50%;
-  vertical-align: middle;
-  text-align: center;
-  cursor: pointer;
-
-  font: normal 16px Lato;
-}
-
-.DayPicker--interactionDisabled .DayPicker-Day {
-  cursor: default;
-}
-
-.DayPicker-Day--outside {
-  color: $ds-neutral-400;
-  cursor: pointer;
-
-  &:hover {
-    background: white;
-    outline: 2px solid $ds-orange-600;
-    outline-offset: -2px;
-    border-radius: 50%;
-  }
-}
-
-.DayPicker-Day--disabled {
-  color: $ds-neutral-400;
-  background-color: transparent;
-  pointer-events: none;
-}