@instructure/ui-calendar 8.51.0 → 8.51.1-snapshot-6

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.51.1-snapshot-6](https://github.com/instructure/instructure-ui/compare/v8.51.0...v8.51.1-snapshot-6) (2024-01-19)
+
+
+### Features
+
+* **ui-calendar:** make easy and minimal configuration possible ([911ac1b](https://github.com/instructure/instructure-ui/commit/911ac1b3c4523455a1e49f0581575952dcfc8605))
+
+
+
+
+
 # [8.51.0](https://github.com/instructure/instructure-ui/compare/v8.50.0...v8.51.0) (2023-12-14)
 
 **Note:** Version bump only for package @instructure/ui-calendar

package/es/Calendar/__new-tests__/Calendar.test.js

@@ -0,0 +1,76 @@
+var _Calendar, _Calendar2, _Calendar3, _Calendar4;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import Calendar from '../index';
+describe('<Calendar />', () => {
+  describe('with minimal config', () => {
+    it('should render 44 buttons without config', async () => {
+      render(_Calendar || (_Calendar = /*#__PURE__*/React.createElement(Calendar, null)));
+      const buttons = document.getElementsByTagName('button');
+      expect(buttons.length).toEqual(44);
+    });
+    it('should render proper week names by default', async () => {
+      const _render = render(_Calendar2 || (_Calendar2 = /*#__PURE__*/React.createElement(Calendar, null))),
+        container = _render.container;
+      const thead = container.querySelector('thead');
+      expect(thead).toHaveTextContent('SundaySuMondayMoTuesdayTuWednesdayWeThursdayThFridayFrSaturdaySa');
+    });
+    it('should render proper week names if locale is set', async () => {
+      const _render2 = render(_Calendar3 || (_Calendar3 = /*#__PURE__*/React.createElement(Calendar, {
+          locale: "hu"
+        }))),
+        container = _render2.container;
+      const thead = container.querySelector('thead');
+      expect(thead).toHaveTextContent('hétfőhkeddkszerdaszecsütörtökcspéntekpszombatszovasárnapv');
+    });
+    it('should disable days properly', async () => {
+      const _render3 = render( /*#__PURE__*/React.createElement(Calendar, {
+          currentDate: "2023-12-15",
+          disabledDates: ['2023-12-22', '2023-12-12', '2023-12-11']
+        })),
+        container = _render3.container;
+      const buttons = container.querySelectorAll('button[disabled]');
+      const disabledTexts = ['11 December 202311', '12 December 202312', '22 December 202322'];
+      buttons.forEach((button, index) => {
+        expect(button).toHaveTextContent(disabledTexts[index]);
+      });
+    });
+    it('should indicate selected day', async () => {
+      var _screen$queryByText, _screen$queryByText$p;
+      render(_Calendar4 || (_Calendar4 = /*#__PURE__*/React.createElement(Calendar, {
+        currentDate: "2023-12-15",
+        selectedDate: "2023-12-22"
+      })));
+      const selectedDay = (_screen$queryByText = screen.queryByText('22 December 2023')) === null || _screen$queryByText === void 0 ? void 0 : (_screen$queryByText$p = _screen$queryByText.parentElement) === null || _screen$queryByText$p === void 0 ? void 0 : _screen$queryByText$p.parentElement;
+      expect(selectedDay).toBeDefined();
+      if (selectedDay) {
+        var _window$getComputedSt;
+        expect((_window$getComputedSt = window.getComputedStyle(selectedDay)) === null || _window$getComputedSt === void 0 ? void 0 : _window$getComputedSt.background).toBe('rgb(11, 135, 75)');
+      }
+    });
+  });
+});

package/es/Calendar/index.js

@@ -1,4 +1,4 @@
-var _dec, _dec2, _class, _class2;
+var _dec, _dec2, _class, _class2, _IconButton, _IconButton2;
 /*
  * The MIT License (MIT)
  *
@@ -30,22 +30,27 @@ import { safeCloneElement, callRenderProp, omitProps } from '@instructure/ui-rea
 import { createChainedFunction } from '@instructure/ui-utils';
 import { logError as error } from '@instructure/console';
 import { uid } from '@instructure/uid';
+import { AccessibleContent } from '@instructure/ui-a11y-content';
 import { testable } from '@instructure/ui-testable';
 import { withStyle, jsx } from '@instructure/emotion';
+import { Locale, DateTime, ApplyLocaleContext } from '@instructure/ui-i18n';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { Day } from './Day';
 import { propTypes, allowedProps } from './props';
+import { IconButton } from '@instructure/ui-buttons';
+import { IconArrowOpenStartSolid, IconArrowOpenEndSolid } from '@instructure/ui-icons';
+
 /**
 ---
 category: components
 ---
 **/
 let Calendar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_class2 = class Calendar extends Component {
-  constructor(...args) {
-    super(...args);
+  constructor(props) {
+    super(props);
     this.ref = null;
-    this._weekdayHeaderIds = this.props.renderWeekdayLabels.reduce((ids, _label, i) => {
+    this._weekdayHeaderIds = (this.props.renderWeekdayLabels || this.defaultWeekdays).reduce((ids, _label, i) => {
       return {
         ...ids,
         [i]: uid(`weekday-header-${i}`)
@@ -54,35 +59,107 @@ let Calendar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
     this.handleRef = el => {
       this.ref = el;
     };
+    this.calculateState = (locale, timezone, currentDate) => ({
+      renderedDate: currentDate ? DateTime.parse(currentDate, locale, timezone) : DateTime.now(locale, timezone),
+      today: currentDate ? DateTime.parse(currentDate, locale, timezone) : DateTime.now(locale, timezone)
+    });
+    this.renderMonthNavigationButtons = () => {
+      const _this$props = this.props,
+        renderNextMonthButton = _this$props.renderNextMonthButton,
+        renderPrevMonthButton = _this$props.renderPrevMonthButton;
+      return {
+        prevButton: renderPrevMonthButton ? callRenderProp(renderPrevMonthButton) : _IconButton || (_IconButton = jsx(IconButton, {
+          size: "small",
+          withBackground: false,
+          withBorder: false,
+          renderIcon: jsx(IconArrowOpenStartSolid, {
+            color: "primary"
+          }),
+          screenReaderLabel: "Previous month"
+        })),
+        nextButton: renderNextMonthButton ? callRenderProp(renderNextMonthButton) : _IconButton2 || (_IconButton2 = jsx(IconButton, {
+          size: "small",
+          withBackground: false,
+          withBorder: false,
+          renderIcon: jsx(IconArrowOpenEndSolid, {
+            color: "primary"
+          }),
+          screenReaderLabel: "Next month"
+        }))
+      };
+    };
+    this.handleMonthChange = direction => e => {
+      const _this$props2 = this.props,
+        onRequestRenderNextMonth = _this$props2.onRequestRenderNextMonth,
+        onRequestRenderPrevMonth = _this$props2.onRequestRenderPrevMonth;
+      const renderedDate = this.state.renderedDate;
+      const newDate = renderedDate.clone();
+      if (direction === 'prev') {
+        if (onRequestRenderPrevMonth) {
+          onRequestRenderPrevMonth(e);
+          return;
+        }
+        newDate.subtract({
+          months: 1
+        });
+      } else {
+        if (onRequestRenderNextMonth) {
+          onRequestRenderNextMonth(e);
+          return;
+        }
+        newDate.add({
+          months: 1
+        });
+      }
+      this.setState({
+        renderedDate: newDate
+      });
+    };
+    // date is returned es a ISO string, like 2021-09-14T22:00:00.000Z
+    this.handleDayClick = (event, {
+      date
+    }) => {
+      if (this.props.onDateSelected) {
+        const parsedDate = DateTime.parse(date, this.locale(), this.timezone());
+        this.props.onDateSelected(parsedDate.toISOString(), parsedDate, event);
+      }
+    };
+    this.state = this.calculateState(this.locale(), this.timezone(), props.currentDate);
   }
   componentDidMount() {
-    var _this$props$makeStyle, _this$props;
-    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+    var _this$props$makeStyle, _this$props3;
+    (_this$props$makeStyle = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props3);
   }
-  componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props2;
-    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+  componentDidUpdate(prevProps) {
+    var _this$props$makeStyle2, _this$props4;
+    (_this$props$makeStyle2 = (_this$props4 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props4);
+    const isUpdated = prevProps.locale !== this.props.locale || prevProps.timezone !== this.props.timezone;
+    if (isUpdated) {
+      this.setState(() => {
+        return {
+          ...this.calculateState(this.locale(), this.timezone(), this.props.currentDate)
+        };
+      });
+    }
   }
   get role() {
     return this.props.role === 'listbox' ? this.props.role : void 0;
   }
   renderHeader() {
-    const _this$props3 = this.props,
-      renderNextMonthButton = _this$props3.renderNextMonthButton,
-      renderPrevMonthButton = _this$props3.renderPrevMonthButton,
-      renderNavigationLabel = _this$props3.renderNavigationLabel,
-      onRequestRenderNextMonth = _this$props3.onRequestRenderNextMonth,
-      onRequestRenderPrevMonth = _this$props3.onRequestRenderPrevMonth,
-      styles = _this$props3.styles;
-    const nextButton = callRenderProp(renderNextMonthButton);
-    const prevButton = callRenderProp(renderPrevMonthButton);
+    const _this$props5 = this.props,
+      renderNavigationLabel = _this$props5.renderNavigationLabel,
+      styles = _this$props5.styles;
+    const renderedDate = this.state.renderedDate;
+    const _this$renderMonthNavi = this.renderMonthNavigationButtons(),
+      prevButton = _this$renderMonthNavi.prevButton,
+      nextButton = _this$renderMonthNavi.nextButton;
     const cloneButton = (button, onClick) => safeCloneElement(button, {
       onClick: createChainedFunction(button.props.onClick, onClick)
     });
     const style = [styles === null || styles === void 0 ? void 0 : styles.navigation, ...(prevButton || nextButton ? [styles === null || styles === void 0 ? void 0 : styles.navigationWithButtons] : [])];
     return jsx("div", {
       css: style
-    }, prevButton && cloneButton(prevButton, onRequestRenderPrevMonth), callRenderProp(renderNavigationLabel), nextButton && cloneButton(nextButton, onRequestRenderNextMonth));
+    }, prevButton && cloneButton(prevButton, this.handleMonthChange('prev')), renderNavigationLabel ? callRenderProp(renderNavigationLabel) : jsx("span", null, jsx("div", null, renderedDate.format('MMMM')), jsx("div", null, renderedDate.format('YYYY'))), nextButton && cloneButton(nextButton, this.handleMonthChange('next')));
   }
   renderBody() {
     return jsx("table", {
@@ -90,9 +167,8 @@ let Calendar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
     }, jsx("thead", null, this.renderWeekdayHeaders()), jsx("tbody", null, this.renderDays()));
   }
   renderWeekdayHeaders() {
-    const _this$props4 = this.props,
-      renderWeekdayLabels = _this$props4.renderWeekdayLabels,
-      styles = _this$props4.styles;
+    const styles = this.props.styles;
+    const renderWeekdayLabels = this.props.renderWeekdayLabels || this.defaultWeekdays;
     const length = renderWeekdayLabels.length;
     error(length === 7, `[Calendar] \`renderWeekdayLabels\` should be an array with 7 labels (one for each weekday). ${length} provided.`);
     return jsx("tr", null, renderWeekdayLabels.map((label, i) => {
@@ -104,12 +180,39 @@ let Calendar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
       }, callRenderProp(label));
     }));
   }
+  get defaultWeekdays() {
+    const shortDayNames = DateTime.getLocalDayNamesOfTheWeek(this.locale(), 'short');
+    const longDayNames = DateTime.getLocalDayNamesOfTheWeek(this.locale(), 'long');
+    return [jsx(AccessibleContent, {
+      key: 1,
+      alt: longDayNames[0]
+    }, shortDayNames[0]), jsx(AccessibleContent, {
+      key: 2,
+      alt: longDayNames[1]
+    }, shortDayNames[1]), jsx(AccessibleContent, {
+      key: 3,
+      alt: longDayNames[2]
+    }, shortDayNames[2]), jsx(AccessibleContent, {
+      key: 4,
+      alt: longDayNames[3]
+    }, shortDayNames[3]), jsx(AccessibleContent, {
+      key: 5,
+      alt: longDayNames[4]
+    }, shortDayNames[4]), jsx(AccessibleContent, {
+      key: 6,
+      alt: longDayNames[5]
+    }, shortDayNames[5]), jsx(AccessibleContent, {
+      key: 7,
+      alt: longDayNames[6]
+    }, shortDayNames[6])];
+  }
   renderDays() {
-    const children = Children.toArray(this.props.children);
-    const length = children.length;
+    const children = this.props.children;
+    const childrenArr = Children.toArray(children ? children : this.renderDefaultdays());
+    const length = childrenArr.length;
     const role = this.role === 'listbox' ? 'presentation' : void 0;
     error(length === Calendar.DAY_COUNT, `[Calendar] should have exactly ${Calendar.DAY_COUNT} children. ${length} provided.`);
-    return children.reduce((days, day, i) => {
+    return childrenArr.reduce((days, day, i) => {
       const index = Math.floor(i / 7);
       if (!days[index]) days.push([]);
       days[index].push(day);
@@ -124,6 +227,68 @@ let Calendar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
       'aria-describedby': this._weekdayHeaderIds[i]
     }) : day))));
   }
+  locale() {
+    if (this.props.locale) {
+      return this.props.locale;
+    } else if (this.context && this.context.locale) {
+      return this.context.locale;
+    }
+    return Locale.browserLocale();
+  }
+  timezone() {
+    if (this.props.timezone) {
+      return this.props.timezone;
+    } else if (this.context && this.context.timezone) {
+      return this.context.timezone;
+    }
+    return DateTime.browserTimeZone();
+  }
+  isDisabledDate(date) {
+    const disabledDates = this.props.disabledDates;
+    if (!disabledDates) {
+      return false;
+    }
+    if (Array.isArray(disabledDates)) {
+      for (const aDisabledDate of disabledDates) {
+        if (date.isSame(aDisabledDate, 'day')) {
+          return true;
+        }
+      }
+      return false;
+    }
+    return disabledDates(date.toISOString());
+  }
+  renderDefaultdays() {
+    const selectedDate = this.props.selectedDate;
+    const _this$state = this.state,
+      renderedDate = _this$state.renderedDate,
+      today = _this$state.today;
+    // Sets it to the first local day of the week counting back from the start of the month.
+    // Note that first day depends on the locale, e.g. it's Sunday in the US and
+    // Monday in most of the EU.
+    const currDate = DateTime.getFirstDayOfWeek(renderedDate.clone().startOf('month'));
+    const arr = [];
+    for (let i = 0; i < Calendar.DAY_COUNT; i++) {
+      arr.push(currDate.clone());
+      currDate.add({
+        days: 1
+      });
+    }
+    return arr.map(date => {
+      const dateStr = date.toISOString();
+      return jsx(Calendar.Day, {
+        key: dateStr,
+        date: dateStr,
+        isSelected: selectedDate ? date.isSame(selectedDate, 'day') : false,
+        isToday: date.isSame(today, 'day'),
+        isOutsideMonth: !date.isSame(renderedDate, 'month'),
+        label: date.format('D MMMM YYYY') // used by screen readers
+        ,
+        onClick: this.handleDayClick,
+        interaction: this.isDisabledDate(date) ? 'disabled' : 'enabled'
+      }, date.format('DD'));
+    });
+  }
   render() {
     const passthroughProps = View.omitViewProps(omitProps(this.props, Calendar.allowedProps), Calendar);
     return jsx(View, Object.assign({}, passthroughProps, {
@@ -134,7 +299,7 @@ let Calendar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
       elementRef: this.handleRef
     }), this.renderHeader(), this.renderBody());
   }
-}, _class2.displayName = "Calendar", _class2.componentId = 'Calendar', _class2.Day = Day, _class2.DAY_COUNT = 42, _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
+}, _class2.displayName = "Calendar", _class2.componentId = 'Calendar', _class2.contextType = ApplyLocaleContext, _class2.Day = Day, _class2.DAY_COUNT = 42, _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
   as: 'span',
   role: 'table'
 }, _class2)) || _class) || _class);

package/es/Calendar/props.js

@@ -26,15 +26,21 @@ import PropTypes from 'prop-types';
 import { Children as ChildrenPropTypes } from '@instructure/ui-prop-types';
 import { Day } from './Day';
 const propTypes = {
+  as: PropTypes.elementType,
   children: ChildrenPropTypes.oneOf([Day]),
-  renderNextMonthButton: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  renderPrevMonthButton: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  renderNavigationLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  renderWeekdayLabels: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.node, PropTypes.func])).isRequired,
+  currentDate: PropTypes.string,
+  disabledDates: PropTypes.oneOfType([PropTypes.array, PropTypes.func]),
+  locale: PropTypes.string,
+  onDateSelected: PropTypes.func,
   onRequestRenderNextMonth: PropTypes.func,
   onRequestRenderPrevMonth: PropTypes.func,
-  as: PropTypes.elementType,
-  role: PropTypes.oneOf(['table', 'listbox'])
+  renderNavigationLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  renderNextMonthButton: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  renderPrevMonthButton: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  renderWeekdayLabels: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.node, PropTypes.func])),
+  role: PropTypes.oneOf(['table', 'listbox']),
+  selectedDate: PropTypes.string,
+  timezone: PropTypes.string
 };
-const allowedProps = ['children', 'renderNextMonthButton', 'renderPrevMonthButton', 'renderNavigationLabel', 'renderWeekdayLabels', 'onRequestRenderNextMonth', 'onRequestRenderPrevMonth', 'as', 'role'];
+const allowedProps = ['as', 'children', 'currentDate', 'disabledDates', 'locale', 'onDateSelected', 'onRequestRenderNextMonth', 'onRequestRenderPrevMonth', 'renderNavigationLabel', 'renderNextMonthButton', 'renderPrevMonthButton', 'renderWeekdayLabels', 'role', 'selectedDate', 'timezone'];
 export { propTypes, allowedProps };

package/lib/Calendar/__new-tests__/Calendar.test.js

@@ -0,0 +1,79 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+var _index = _interopRequireDefault(require("../index"));
+var _Calendar, _Calendar2, _Calendar3, _Calendar4;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+describe('<Calendar />', () => {
+  describe('with minimal config', () => {
+    it('should render 44 buttons without config', async () => {
+      (0, _react2.render)(_Calendar || (_Calendar = /*#__PURE__*/_react.default.createElement(_index.default, null)));
+      const buttons = document.getElementsByTagName('button');
+      expect(buttons.length).toEqual(44);
+    });
+    it('should render proper week names by default', async () => {
+      const _render = (0, _react2.render)(_Calendar2 || (_Calendar2 = /*#__PURE__*/_react.default.createElement(_index.default, null))),
+        container = _render.container;
+      const thead = container.querySelector('thead');
+      expect(thead).toHaveTextContent('SundaySuMondayMoTuesdayTuWednesdayWeThursdayThFridayFrSaturdaySa');
+    });
+    it('should render proper week names if locale is set', async () => {
+      const _render2 = (0, _react2.render)(_Calendar3 || (_Calendar3 = /*#__PURE__*/_react.default.createElement(_index.default, {
+          locale: "hu"
+        }))),
+        container = _render2.container;
+      const thead = container.querySelector('thead');
+      expect(thead).toHaveTextContent('hétfőhkeddkszerdaszecsütörtökcspéntekpszombatszovasárnapv');
+    });
+    it('should disable days properly', async () => {
+      const _render3 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
+          currentDate: "2023-12-15",
+          disabledDates: ['2023-12-22', '2023-12-12', '2023-12-11']
+        })),
+        container = _render3.container;
+      const buttons = container.querySelectorAll('button[disabled]');
+      const disabledTexts = ['11 December 202311', '12 December 202312', '22 December 202322'];
+      buttons.forEach((button, index) => {
+        expect(button).toHaveTextContent(disabledTexts[index]);
+      });
+    });
+    it('should indicate selected day', async () => {
+      var _screen$queryByText, _screen$queryByText$p;
+      (0, _react2.render)(_Calendar4 || (_Calendar4 = /*#__PURE__*/_react.default.createElement(_index.default, {
+        currentDate: "2023-12-15",
+        selectedDate: "2023-12-22"
+      })));
+      const selectedDay = (_screen$queryByText = _react2.screen.queryByText('22 December 2023')) === null || _screen$queryByText === void 0 ? void 0 : (_screen$queryByText$p = _screen$queryByText.parentElement) === null || _screen$queryByText$p === void 0 ? void 0 : _screen$queryByText$p.parentElement;
+      expect(selectedDay).toBeDefined();
+      if (selectedDay) {
+        var _window$getComputedSt;
+        expect((_window$getComputedSt = window.getComputedStyle(selectedDay)) === null || _window$getComputedSt === void 0 ? void 0 : _window$getComputedSt.background).toBe('rgb(11, 135, 75)');
+      }
+    });
+  });
+});