@spothero/ui 17.0.3-beta.0 → 17.1.0-beta.0

package/dist/components/Datepicker/DatepickerContainer.js

@@ -0,0 +1,114 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _react2 = require("@chakra-ui/react");
+
+var _propTypes = require("./utils/propTypes");
+
+var _DatepickerContext = require("./DatepickerContext");
+
+var _DatepickerDays = _interopRequireDefault(require("./components/DatepickerDays"));
+
+var _DatepickerHeader = _interopRequireDefault(require("./components/DatepickerHeader"));
+
+var _DatepickerControl = _interopRequireDefault(require("./components/DatepickerControl"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var popoverContentStyleProps = {
+  width: {
+    base: 304,
+    tablet: 384
+  },
+  padding: {
+    base: 3,
+    tablet: 4
+  },
+  maxWidth: 'none',
+  borderRadius: 'lg',
+  boxShadow: 'lg'
+};
+var popoverBodyStyleProps = {
+  width: {
+    base: 280,
+    tablet: 352
+  },
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center'
+};
+
+var DatepickerContainer = function DatepickerContainer(_ref) {
+  var _datepickerOverrides$, _datepickerOverrides$2, _datepickerOverrides$3;
+
+  var onDateChange = _ref.onDateChange,
+      useInputIcons = _ref.useInputIcons,
+      dateInputLabelText = _ref.dateInputLabelText,
+      dateInputPlaceholderText = _ref.dateInputPlaceholderText,
+      dateInputErrorText = _ref.dateInputErrorText,
+      datepickerOverrides = _ref.datepickerOverrides;
+
+  var _useDatepicker = (0, _DatepickerContext.useDatepicker)(),
+      _useDatepicker$select = (0, _slicedToArray2.default)(_useDatepicker.selectedDate, 1),
+      selectedDate = _useDatepicker$select[0],
+      isInvalid = _useDatepicker.isInvalid,
+      _useDatepicker$disclo = _useDatepicker.disclosure,
+      isOpen = _useDatepicker$disclo.isOpen,
+      onClose = _useDatepicker$disclo.onClose;
+
+  (0, _react.useEffect)(function () {
+    onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange({
+      selectedDate: selectedDate
+    }); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedDate]);
+  return /*#__PURE__*/_react.default.createElement(_react2.Popover, (0, _extends2.default)({
+    isOpen: isOpen,
+    onClose: onClose,
+    closeOnBlur: true,
+    returnFocusOnClose: false,
+    isLazy: true,
+    placement: "bottom-start"
+  }, datepickerOverrides === null || datepickerOverrides === void 0 ? void 0 : datepickerOverrides.popover), /*#__PURE__*/_react.default.createElement(_DatepickerControl.default, {
+    value: selectedDate,
+    useInputIcons: useInputIcons,
+    isInputInvalid: isInvalid,
+    inputLabelText: dateInputLabelText,
+    inputPlaceholderText: dateInputPlaceholderText,
+    errorText: dateInputErrorText,
+    inputComponentOverrides: datepickerOverrides === null || datepickerOverrides === void 0 ? void 0 : datepickerOverrides.inputComponentOverrides
+  }), /*#__PURE__*/_react.default.createElement(_react2.Portal, datepickerOverrides === null || datepickerOverrides === void 0 ? void 0 : datepickerOverrides.portal, /*#__PURE__*/_react.default.createElement(_react2.PopoverContent, (0, _extends2.default)({
+    role: "dialog",
+    "aria-modal": "true",
+    "aria-label": "Choose Date",
+    "data-testid": "PopoverContent"
+  }, popoverContentStyleProps, datepickerOverrides === null || datepickerOverrides === void 0 ? void 0 : datepickerOverrides.popoverContent), /*#__PURE__*/_react.default.createElement(_react2.PopoverBody, (0, _extends2.default)({
+    "data-testid": "PopoverBody"
+  }, popoverBodyStyleProps, datepickerOverrides === null || datepickerOverrides === void 0 ? void 0 : (_datepickerOverrides$ = datepickerOverrides.datepickerBodyOverrides) === null || _datepickerOverrides$ === void 0 ? void 0 : _datepickerOverrides$.popoverBody), /*#__PURE__*/_react.default.createElement(_DatepickerHeader.default, {
+    datepickerHeaderOverrides: datepickerOverrides === null || datepickerOverrides === void 0 ? void 0 : (_datepickerOverrides$2 = datepickerOverrides.datepickerBodyOverrides) === null || _datepickerOverrides$2 === void 0 ? void 0 : _datepickerOverrides$2.datepickerHeaderOverrides
+  }), /*#__PURE__*/_react.default.createElement(_DatepickerDays.default, {
+    datepickerDaysOverrides: datepickerOverrides === null || datepickerOverrides === void 0 ? void 0 : (_datepickerOverrides$3 = datepickerOverrides.datepickerBodyOverrides) === null || _datepickerOverrides$3 === void 0 ? void 0 : _datepickerOverrides$3.datepickerDaysOverrides
+  })))));
+};
+
+var _default = DatepickerContainer;
+exports.default = _default;

package/dist/components/Datepicker/DatepickerContext.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDatepicker = exports.DatepickerProvider = exports.DatepickerContext = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _react2 = require("@chakra-ui/react");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var DatepickerContext = /*#__PURE__*/(0, _react.createContext)({});
+exports.DatepickerContext = DatepickerContext;
+
+var useDatepicker = function useDatepicker() {
+  return (0, _react.useContext)(DatepickerContext);
+};
+
+exports.useDatepicker = useDatepicker;
+
+var DatepickerProvider = function DatepickerProvider(_ref) {
+  var _ref$initialValue = _ref.initialValue,
+      initialValue = _ref$initialValue === void 0 ? null : _ref$initialValue,
+      _ref$disableBefore = _ref.disableBefore,
+      disableBefore = _ref$disableBefore === void 0 ? null : _ref$disableBefore,
+      _ref$disableAfter = _ref.disableAfter,
+      disableAfter = _ref$disableAfter === void 0 ? null : _ref$disableAfter,
+      isInvalid = _ref.isInvalid,
+      children = _ref.children;
+  // Today
+  var today = (0, _react.useState)(new Date()); // Date used to keep track of what Month is in view
+
+  var date = (0, _react.useState)(initialValue ? new Date(initialValue) : new Date()); // Currently selected date
+
+  var selectedDate = (0, _react.useState)(initialValue ? new Date(initialValue) : null); // The date where days in the past should be disabled
+
+  var disableBeforeDate = (0, _react.useState)(disableBefore ? new Date(disableBefore) : null); // The date where days in the future should be disabled
+
+  var disableAfterDate = (0, _react.useState)(disableAfter ? new Date(disableAfter) : null); // Chakra's Disclosure values
+
+  var disclosure = (0, _react2.useDisclosure)();
+  return /*#__PURE__*/_react.default.createElement(DatepickerContext.Provider, {
+    value: {
+      today: today,
+      date: date,
+      selectedDate: selectedDate,
+      disableBeforeDate: disableBeforeDate,
+      disableAfterDate: disableAfterDate,
+      isInvalid: isInvalid,
+      disclosure: disclosure
+    }
+  }, children);
+};
+
+exports.DatepickerProvider = DatepickerProvider;

package/dist/components/Datepicker/DatepickerSingle.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("./utils/propTypes"));
+
+var _DatepickerContext = require("./DatepickerContext");
+
+var _DatepickerContainer = _interopRequireDefault(require("./DatepickerContainer"));
+
+var DatepickerSingle = function DatepickerSingle(_ref) {
+  var initialValue = _ref.initialValue,
+      disableBefore = _ref.disableBefore,
+      disableAfter = _ref.disableAfter,
+      onDateChange = _ref.onDateChange,
+      isInvalid = _ref.isInvalid,
+      useInputIcons = _ref.useInputIcons,
+      dateInputLabelText = _ref.dateInputLabelText,
+      dateInputPlaceholderText = _ref.dateInputPlaceholderText,
+      dateInputErrorText = _ref.dateInputErrorText,
+      datepickerOverrides = _ref.datepickerOverrides;
+  return /*#__PURE__*/_react.default.createElement(_DatepickerContext.DatepickerProvider, {
+    initialValue: initialValue,
+    disableBefore: disableBefore,
+    disableAfter: disableAfter,
+    isInvalid: isInvalid
+  }, /*#__PURE__*/_react.default.createElement(_DatepickerContainer.default, {
+    onDateChange: onDateChange,
+    useInputIcons: useInputIcons,
+    dateInputLabelText: dateInputLabelText,
+    dateInputPlaceholderText: dateInputPlaceholderText,
+    dateInputErrorText: dateInputErrorText,
+    datepickerOverrides: datepickerOverrides
+  }));
+};
+
+DatepickerSingle.defaultProps = {
+  useInputIcons: true,
+  isInvalid: false,
+  dateInputLabelText: 'Select a Date',
+  dateInputPlaceholderText: 'Today'
+};
+var _default = DatepickerSingle;
+exports.default = _default;

package/dist/components/Datepicker/components/DateRow.js

@@ -0,0 +1,145 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@chakra-ui/react");
+
+var _DatepickerContext = require("../DatepickerContext");
+
+var _propTypes = require("../utils/propTypes");
+
+var _dateRowArithmentic = require("../utils/dateRowArithmentic");
+
+var _generalCalculations = require("../utils/generalCalculations");
+
+var calendarDateContainerStyleProps = {
+  marginTop: 0,
+  padding: 0,
+  width: {
+    base: 10,
+    tablet: 12
+  },
+  height: {
+    base: 10,
+    tablet: 12
+  },
+  _disabled: {
+    cursor: 'not-allowed',
+    backgroundColor: 'transparent',
+    border: 'none',
+    _hover: {
+      backgroundColor: 'transparent',
+      border: 'none'
+    }
+  }
+};
+
+var getCalendarDateStyleProps = function getCalendarDateStyleProps(today, date, calendarDate, selectedDate, disableBeforeDate, disableAfterDate) {
+  return {
+    padding: 0,
+    width: {
+      base: 10,
+      tablet: 12
+    },
+    height: {
+      base: 10,
+      tablet: 12
+    },
+    borderRadius: 'full',
+    animation: 'ease-in-out',
+    _active: {
+      backgroundColor: 'gray.light',
+      borderColor: 'white',
+      color: 'text.secondary.light'
+    },
+    borderColor: (0, _dateRowArithmentic.selected)(calendarDate, selectedDate) ? 'white' : 'transparent',
+    fontWeight: (0, _dateRowArithmentic.selected)(calendarDate, selectedDate) ? 'semibold' : (0, _dateRowArithmentic.isToday)(calendarDate, today) ? 'bold' : 'base',
+    zIndex: (0, _dateRowArithmentic.selected)(calendarDate, selectedDate) ? '1200' : '1100',
+    backgroundColor: (0, _dateRowArithmentic.selected)(calendarDate, selectedDate) ? 'primary.default' : 'transparent',
+    color: (0, _dateRowArithmentic.selected)(calendarDate, selectedDate) ? 'text.primary.dark' : (0, _dateRowArithmentic.outOfMonth)(calendarDate, date) || (0, _dateRowArithmentic.isBeforeDisabledDate)(calendarDate, disableBeforeDate) || (0, _dateRowArithmentic.isAfterDisabledDate)(calendarDate, disableAfterDate) ? 'text.secondary.light' : 'text.primary.light',
+    _hover: {
+      borderWidth: '1px',
+      borderColor: (0, _dateRowArithmentic.selected)(calendarDate, selectedDate) ? 'white' : 'primary.default',
+      backgroundColor: (0, _dateRowArithmentic.selected)(calendarDate, selectedDate) ? 'primary.600' : 'transparent'
+    },
+    _disabled: {
+      cursor: 'not-allowed',
+      backgroundColor: 'transparent',
+      border: 'none',
+      borderColor: 'white',
+      _hover: {
+        backgroundColor: 'transparent',
+        border: 'none',
+        borderColor: 'white'
+      }
+    }
+  };
+};
+
+var DateRow = function DateRow(_ref) {
+  var dates = _ref.dates,
+      dateRowOverrides = _ref.dateRowOverrides;
+
+  var _useDatepicker = (0, _DatepickerContext.useDatepicker)(),
+      _useDatepicker$today = (0, _slicedToArray2.default)(_useDatepicker.today, 1),
+      today = _useDatepicker$today[0],
+      _useDatepicker$date = (0, _slicedToArray2.default)(_useDatepicker.date, 2),
+      date = _useDatepicker$date[0],
+      setDate = _useDatepicker$date[1],
+      _useDatepicker$select = (0, _slicedToArray2.default)(_useDatepicker.selectedDate, 2),
+      selectedDate = _useDatepicker$select[0],
+      setSelectedDate = _useDatepicker$select[1],
+      _useDatepicker$disabl = (0, _slicedToArray2.default)(_useDatepicker.disableBeforeDate, 1),
+      disableBeforeDate = _useDatepicker$disabl[0],
+      _useDatepicker$disabl2 = (0, _slicedToArray2.default)(_useDatepicker.disableAfterDate, 1),
+      disableAfterDate = _useDatepicker$disabl2[0],
+      onClose = _useDatepicker.disclosure.onClose;
+
+  var handleSelect = function handleSelect(providedDate) {
+    return function () {
+      setSelectedDate(new Date(providedDate));
+      setDate(new Date(providedDate));
+      onClose();
+    };
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react2.Tbody, (0, _extends2.default)({
+    "data-testid": "calendarDatesContainer"
+  }, dateRowOverrides === null || dateRowOverrides === void 0 ? void 0 : dateRowOverrides.tbody), (0, _map.default)(dates).call(dates, function (week, index) {
+    return /*#__PURE__*/_react.default.createElement(_react2.Tr, (0, _extends2.default)({
+      key: index,
+      border: "none",
+      "data-testid": "calendarRow"
+    }, dateRowOverrides === null || dateRowOverrides === void 0 ? void 0 : dateRowOverrides.tr), (0, _map.default)(week).call(week, function (calendarDate, idx) {
+      return /*#__PURE__*/_react.default.createElement(_react2.Td, (0, _extends2.default)({
+        key: idx,
+        "data-date": (0, _generalCalculations.formatForDataDate)(calendarDate)
+      }, calendarDateContainerStyleProps, {
+        disabled: (0, _dateRowArithmentic.isBeforeDisabledDate)(calendarDate, disableBeforeDate) || (0, _dateRowArithmentic.isAfterDisabledDate)(calendarDate, disableAfterDate)
+      }, dateRowOverrides === null || dateRowOverrides === void 0 ? void 0 : dateRowOverrides.td), /*#__PURE__*/_react.default.createElement(_react2.Button, (0, _extends2.default)({
+        value: calendarDate,
+        onClick: handleSelect(calendarDate),
+        role: "gridcell",
+        "data-testid": "dateColumn-calendarDate"
+      }, getCalendarDateStyleProps(today, date, calendarDate, selectedDate, disableBeforeDate, disableAfterDate), {
+        disabled: (0, _dateRowArithmentic.isBeforeDisabledDate)(calendarDate, disableBeforeDate) || (0, _dateRowArithmentic.isAfterDisabledDate)(calendarDate, disableAfterDate)
+      }, dateRowOverrides === null || dateRowOverrides === void 0 ? void 0 : dateRowOverrides.button), (0, _dateRowArithmentic.getButtonText)(calendarDate)));
+    }));
+  }));
+};
+
+var _default = DateRow;
+exports.default = _default;

package/dist/components/Datepicker/components/DatepickerControl.js

@@ -0,0 +1,83 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@chakra-ui/react");
+
+var _calendar = _interopRequireDefault(require("@spothero/icons/calendar"));
+
+var _DatepickerContext = require("../DatepickerContext");
+
+var _propTypes = require("../utils/propTypes");
+
+var _generalCalculations = require("../utils/generalCalculations");
+
+var formLabelStyleProps = {
+  as: 'label',
+  fontSize: 'sm',
+  fontWeight: 'semibold',
+  color: 'text.secondary.light',
+  marginBottom: 1
+};
+var formErrorMessageStyleProps = {
+  color: 'error',
+  fontSize: 'xs',
+  marginTop: 1
+};
+
+var DatepickerControl = function DatepickerControl(_ref) {
+  var value = _ref.value,
+      useInputIcons = _ref.useInputIcons,
+      isInputInvalid = _ref.isInputInvalid,
+      inputLabelText = _ref.inputLabelText,
+      inputPlaceholderText = _ref.inputPlaceholderText,
+      errorText = _ref.errorText,
+      inputComponentOverrides = _ref.inputComponentOverrides;
+
+  var _useDatepicker = (0, _DatepickerContext.useDatepicker)(),
+      _useDatepicker$disclo = _useDatepicker.disclosure,
+      onOpen = _useDatepicker$disclo.onOpen,
+      onClose = _useDatepicker$disclo.onClose;
+
+  var handleKeyboardControls = function handleKeyboardControls(evt) {
+    var keyCode = evt.code;
+
+    if (keyCode === 'Enter' || keyCode === 'Space') {
+      onOpen();
+    } else if (keyCode === 'Escape') {
+      onClose();
+    }
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react2.FormControl, (0, _extends2.default)({
+    isInvalid: isInputInvalid
+  }, inputComponentOverrides === null || inputComponentOverrides === void 0 ? void 0 : inputComponentOverrides.formControl), inputLabelText && /*#__PURE__*/_react.default.createElement(_react2.FormLabel, (0, _extends2.default)({}, formLabelStyleProps, inputComponentOverrides === null || inputComponentOverrides === void 0 ? void 0 : inputComponentOverrides.formLabel), inputLabelText), /*#__PURE__*/_react.default.createElement(_react2.PopoverTrigger, {
+    "data-testid": "PopoverTrigger"
+  }, /*#__PURE__*/_react.default.createElement(_react2.InputGroup, inputComponentOverrides === null || inputComponentOverrides === void 0 ? void 0 : inputComponentOverrides.inputGroup, /*#__PURE__*/_react.default.createElement(_react2.Input, (0, _extends2.default)({
+    name: "DatepickerInput",
+    value: (0, _generalCalculations.formatValueForInputDisplay)(value),
+    placeholder: inputPlaceholderText,
+    onClick: onOpen,
+    onKeyDown: handleKeyboardControls,
+    isReadOnly: true
+  }, inputComponentOverrides === null || inputComponentOverrides === void 0 ? void 0 : inputComponentOverrides.input)), useInputIcons && /*#__PURE__*/_react.default.createElement(_react2.InputRightElement, (0, _extends2.default)({
+    color: isInputInvalid ? 'error' : 'gray.dark'
+  }, inputComponentOverrides === null || inputComponentOverrides === void 0 ? void 0 : inputComponentOverrides.inputRightElement), /*#__PURE__*/_react.default.createElement(_react2.Icon, {
+    as: _calendar.default,
+    color: "inherit",
+    height: 5,
+    width: 5
+  })))), /*#__PURE__*/_react.default.createElement(_react2.FormErrorMessage, (0, _extends2.default)({}, formErrorMessageStyleProps, inputComponentOverrides === null || inputComponentOverrides === void 0 ? void 0 : inputComponentOverrides.formErrorMessage), errorText));
+};
+
+var _default = DatepickerControl;
+exports.default = _default;

package/dist/components/Datepicker/components/DatepickerDays.js

@@ -0,0 +1,108 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _react2 = require("@chakra-ui/react");
+
+var _DatepickerContext = require("../DatepickerContext");
+
+var _constants = require("../constants");
+
+var _getWeeksOfMonth = require("../utils/getWeeksOfMonth");
+
+var _propTypes = require("../utils/propTypes");
+
+var _generalCalculations = require("../utils/generalCalculations");
+
+var _DateRow = _interopRequireDefault(require("./DateRow"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var datepickerCalendarTableStyleProps = {
+  border: 'none',
+  boxShadow: 'none',
+  padding: 0,
+  margin: 0,
+  width: {
+    base: '17.5rem',
+    tablet: '21rem'
+  }
+};
+var datepickerTheadStyleProps = {
+  height: {
+    base: 10,
+    tablet: 12
+  },
+  border: 'none'
+};
+
+var getDatepickerCalendarThStyleProps = function getDatepickerCalendarThStyleProps(today, weeks, index) {
+  return {
+    width: {
+      base: 10,
+      tablet: 12
+    },
+    padding: 0,
+    fontSize: 'base',
+    textAlign: 'center',
+    color: 'text.secondary.light',
+    fontWeight: (0, _generalCalculations.isCurrentMonthAndYearInView)(today, weeks) && today.getDay() === index ? 'bold' : 'normal'
+  };
+};
+
+var DatepickerDays = function DatepickerDays(_ref) {
+  var datepickerDaysOverrides = _ref.datepickerDaysOverrides;
+
+  var _useDatepicker = (0, _DatepickerContext.useDatepicker)(),
+      _useDatepicker$today = (0, _slicedToArray2.default)(_useDatepicker.today, 1),
+      today = _useDatepicker$today[0],
+      _useDatepicker$date = (0, _slicedToArray2.default)(_useDatepicker.date, 1),
+      date = _useDatepicker$date[0];
+
+  var _useState = (0, _react.useState)(),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      weeks = _useState2[0],
+      setWeeks = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    setWeeks((0, _getWeeksOfMonth.getWeeksOfMonth)(date || new Date()));
+  }, [date]);
+  return /*#__PURE__*/_react.default.createElement(_react2.Table, (0, _extends2.default)({
+    role: "grid",
+    "aria-labelledby": "id-grid-label"
+  }, datepickerCalendarTableStyleProps, datepickerDaysOverrides === null || datepickerDaysOverrides === void 0 ? void 0 : datepickerDaysOverrides.table), /*#__PURE__*/_react.default.createElement(_react2.Thead, (0, _extends2.default)({}, datepickerTheadStyleProps, datepickerDaysOverrides === null || datepickerDaysOverrides === void 0 ? void 0 : datepickerDaysOverrides.thead), /*#__PURE__*/_react.default.createElement(_react2.Tr, null, (0, _map.default)(_constants.DAY_NAMES).call(_constants.DAY_NAMES, function (day, index) {
+    return /*#__PURE__*/_react.default.createElement(_react2.Th, (0, _extends2.default)({
+      key: index,
+      scope: "col",
+      abbr: day.full,
+      "data-testid": "daysOfWeek-title"
+    }, getDatepickerCalendarThStyleProps(today, weeks, index), datepickerDaysOverrides === null || datepickerDaysOverrides === void 0 ? void 0 : datepickerDaysOverrides.th), day.abbv);
+  }))), /*#__PURE__*/_react.default.createElement(_DateRow.default, {
+    dates: weeks !== null && weeks !== void 0 ? weeks : [],
+    dateRowOverrides: datepickerDaysOverrides === null || datepickerDaysOverrides === void 0 ? void 0 : datepickerDaysOverrides.dateRow
+  }));
+};
+
+var _default = DatepickerDays;
+exports.default = _default;