polaris-react-extended 13.10.3

package/build/esm/components/DataTable/components/Cell/Cell.js

@@ -0,0 +1,123 @@
+import React, { useRef } from 'react';
+import { SortDescendingIcon, SortAscendingIcon } from '@shopify/polaris-icons';
+import { classNames, variationName } from '../../../../utilities/css.js';
+import { headerCell } from '../../../shared.js';
+import styles from '../../DataTable.css.js';
+import { useI18n } from '../../../../utilities/i18n/hooks.js';
+import { Tooltip } from '../../../Tooltip/Tooltip.js';
+import { Icon } from '../../../Icon/Icon.js';
+
+function Cell({
+  content,
+  contentType,
+  nthColumn,
+  firstColumn,
+  truncate,
+  header,
+  total,
+  totalInFooter,
+  sorted,
+  sortable,
+  sortDirection,
+  inFixedNthColumn,
+  verticalAlign = 'top',
+  defaultSortDirection = 'ascending',
+  onSort,
+  colSpan,
+  setRef = () => {},
+  stickyHeadingCell = false,
+  stickyCellWidth,
+  hovered = false,
+  handleFocus = () => {},
+  hasFixedNthColumn = false,
+  fixedCellVisible = false,
+  firstColumnMinWidth,
+  style,
+  lastFixedFirstColumn
+}) {
+  const i18n = useI18n();
+  const numeric = contentType === 'numeric';
+  const className = classNames(styles.Cell, styles[`Cell-${variationName('verticalAlign', verticalAlign)}`], firstColumn && styles['Cell-firstColumn'], truncate && styles['Cell-truncated'], header && styles['Cell-header'], total && styles['Cell-total'], totalInFooter && styles['Cell-total-footer'], numeric && styles['Cell-numeric'], sortable && styles['Cell-sortable'], sorted && styles['Cell-sorted'], stickyHeadingCell && styles.StickyHeaderCell, hovered && styles['Cell-hovered'], lastFixedFirstColumn && inFixedNthColumn && fixedCellVisible && styles['Cell-separate'], nthColumn && inFixedNthColumn && stickyHeadingCell && styles.FixedFirstColumn);
+  const headerClassName = classNames(header && styles.Heading, header && contentType === 'text' && styles['Heading-left']);
+  const iconClassName = classNames(sortable && styles.Icon);
+  const direction = sorted && sortDirection ? sortDirection : defaultSortDirection;
+  const source = direction === 'descending' ? SortDescendingIcon : SortAscendingIcon;
+  const oppositeDirection = sortDirection === 'ascending' ? 'descending' : 'ascending';
+  const sortAccessibilityLabel = i18n.translate('Polaris.DataTable.sortAccessibilityLabel', {
+    direction: sorted ? oppositeDirection : direction
+  });
+  const iconMarkup = /*#__PURE__*/React.createElement("span", {
+    className: iconClassName
+  }, /*#__PURE__*/React.createElement(Icon, {
+    source: source,
+    accessibilityLabel: sortAccessibilityLabel
+  }));
+  const focusable = !(stickyHeadingCell && hasFixedNthColumn && nthColumn && !inFixedNthColumn);
+  const sortableHeadingContent = /*#__PURE__*/React.createElement("button", {
+    className: headerClassName,
+    onClick: onSort,
+    onFocus: handleFocus,
+    tabIndex: focusable ? 0 : -1
+  }, iconMarkup, content);
+  const columnHeadingContent = sortable ? sortableHeadingContent : content;
+  const colSpanProp = colSpan && colSpan > 1 ? {
+    colSpan
+  } : {};
+  const minWidthStyles = nthColumn && firstColumnMinWidth ? {
+    minWidth: firstColumnMinWidth
+  } : {
+    minWidth: stickyCellWidth
+  };
+  const stickyHeading = /*#__PURE__*/React.createElement("th", Object.assign({
+    ref: setRef
+  }, headerCell.props, colSpanProp, {
+    className: className,
+    "aria-sort": sortDirection,
+    style: {
+      ...style,
+      ...minWidthStyles
+    },
+    "data-index-table-sticky-heading": true
+  }), columnHeadingContent);
+  const headingMarkup = header ? /*#__PURE__*/React.createElement("th", Object.assign({}, headerCell.props, {
+    "aria-sort": sortDirection
+  }, colSpanProp, {
+    ref: setRef,
+    className: className,
+    scope: "col",
+    style: {
+      ...minWidthStyles
+    }
+  }), columnHeadingContent) : /*#__PURE__*/React.createElement("th", Object.assign({}, colSpanProp, {
+    ref: setRef,
+    className: className,
+    scope: "row",
+    style: {
+      ...minWidthStyles
+    }
+  }), truncate ? /*#__PURE__*/React.createElement(TruncatedText, {
+    className: styles.TooltipContent
+  }, content) : content);
+  const cellMarkup = header || firstColumn || nthColumn ? headingMarkup : /*#__PURE__*/React.createElement("td", Object.assign({
+    className: className
+  }, colSpanProp), content);
+  return stickyHeadingCell ? stickyHeading : cellMarkup;
+}
+const TruncatedText = ({
+  children,
+  className = ''
+}) => {
+  const textRef = useRef(null);
+  const {
+    current
+  } = textRef;
+  const text = /*#__PURE__*/React.createElement("span", {
+    ref: textRef,
+    className: className
+  }, children);
+  return current?.scrollWidth > current?.offsetWidth ? /*#__PURE__*/React.createElement(Tooltip, {
+    content: textRef.current.innerText
+  }, text) : text;
+};
+
+export { Cell };

package/build/esm/components/DataTable/components/Navigation/Navigation.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { ChevronLeftIcon, ChevronRightIcon } from '@shopify/polaris-icons';
+import { classNames } from '../../../../utilities/css.js';
+import styles from '../../DataTable.css.js';
+import { useI18n } from '../../../../utilities/i18n/hooks.js';
+import { Button } from '../../../Button/Button.js';
+
+function Navigation({
+  columnVisibilityData,
+  isScrolledFarthestLeft,
+  isScrolledFarthestRight,
+  navigateTableLeft,
+  navigateTableRight,
+  fixedFirstColumns,
+  setRef = () => {}
+}) {
+  const i18n = useI18n();
+  const pipMarkup = columnVisibilityData.map((column, index) => {
+    if (index < fixedFirstColumns) return;
+    const className = classNames(styles.Pip, column.isVisible && styles['Pip-visible']);
+    return /*#__PURE__*/React.createElement("div", {
+      className: className,
+      key: `pip-${index}`
+    });
+  });
+  const leftA11yLabel = i18n.translate('Polaris.DataTable.navAccessibilityLabel', {
+    direction: 'left'
+  });
+  const rightA11yLabel = i18n.translate('Polaris.DataTable.navAccessibilityLabel', {
+    direction: 'right'
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.Navigation,
+    ref: setRef
+  }, /*#__PURE__*/React.createElement(Button, {
+    variant: "tertiary",
+    icon: ChevronLeftIcon,
+    disabled: isScrolledFarthestLeft,
+    accessibilityLabel: leftA11yLabel,
+    onClick: navigateTableLeft
+  }), pipMarkup, /*#__PURE__*/React.createElement(Button, {
+    variant: "tertiary",
+    icon: ChevronRightIcon,
+    disabled: isScrolledFarthestRight,
+    accessibilityLabel: rightA11yLabel,
+    onClick: navigateTableRight
+  }));
+}
+
+export { Navigation };

package/build/esm/components/DataTable/utilities.js

@@ -0,0 +1,43 @@
+function measureColumn(tableData) {
+  return function (column, index) {
+    const {
+      firstVisibleColumnIndex,
+      tableLeftVisibleEdge: tableStart,
+      tableRightVisibleEdge: tableEnd
+    } = tableData;
+    const leftEdge = column.offsetLeft;
+    const rightEdge = leftEdge + column.offsetWidth;
+    const isVisibleLeft = isEdgeVisible(leftEdge, tableStart, tableEnd, 'left');
+    const isVisibleRight = isEdgeVisible(rightEdge, tableStart, tableEnd, 'right');
+    const isVisible = isVisibleLeft || isVisibleRight;
+    const width = column.offsetWidth;
+    if (isVisible) {
+      tableData.firstVisibleColumnIndex = Math.min(firstVisibleColumnIndex, index);
+    }
+    return {
+      leftEdge,
+      rightEdge,
+      isVisible,
+      width,
+      index
+    };
+  };
+}
+function isEdgeVisible(position, start, end, edgeType) {
+  const minVisiblePixels = 30;
+  return position >= start + (edgeType === 'left' ? 0 : minVisiblePixels) && position <= end - minVisiblePixels;
+}
+function getPrevAndCurrentColumns(tableData, columnData) {
+  const {
+    firstVisibleColumnIndex
+  } = tableData;
+  const previousColumnIndex = Math.max(firstVisibleColumnIndex - 1, 0);
+  const previousColumn = columnData[previousColumnIndex];
+  const currentColumn = columnData[firstVisibleColumnIndex];
+  return {
+    previousColumn,
+    currentColumn
+  };
+}
+
+export { getPrevAndCurrentColumns, isEdgeVisible, measureColumn };

package/build/esm/components/DatePicker/DatePicker.css.js

@@ -0,0 +1,23 @@
+var styles = {
+  "DatePicker": "Polaris-DatePicker",
+  "MonthLayout": "Polaris-DatePicker__MonthLayout",
+  "MonthContainer": "Polaris-DatePicker__MonthContainer",
+  "Month": "Polaris-DatePicker__Month",
+  "DayCell": "Polaris-DatePicker__DayCell",
+  "DayCell-inRange": "Polaris-DatePicker__DayCell--inRange",
+  "Day": "Polaris-DatePicker__Day",
+  "Day-inRange": "Polaris-DatePicker__Day--inRange",
+  "Day-selected": "Polaris-DatePicker__Day--selected",
+  "Day-disabled": "Polaris-DatePicker__Day--disabled",
+  "EmptyDayCell": "Polaris-DatePicker__EmptyDayCell",
+  "Weekday": "Polaris-DatePicker__Weekday",
+  "Header": "Polaris-DatePicker__Header",
+  "Title": "Polaris-DatePicker__Title",
+  "Day-firstInRange": "Polaris-DatePicker__Day--firstInRange",
+  "Day-hasRange": "Polaris-DatePicker__Day--hasRange",
+  "Day-hoverRight": "Polaris-DatePicker__Day--hoverRight",
+  "Day-lastInRange": "Polaris-DatePicker__Day--lastInRange",
+  "Week": "Polaris-DatePicker__Week"
+};
+
+export { styles as default };

package/build/esm/components/DatePicker/DatePicker.js

@@ -0,0 +1,187 @@
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import { ArrowLeftIcon, ArrowRightIcon } from '@shopify/polaris-icons';
+import { classNames } from '../../utilities/css.js';
+import { isDateBefore, isDateDisabled, isDateAfter, getNextDisplayYear, getNextDisplayMonth, getPreviousDisplayYear, getPreviousDisplayMonth } from '../../utilities/dates.js';
+import { monthName } from './utilities.js';
+import styles from './DatePicker.css.js';
+import { Month } from './components/Month/Month.js';
+import { useI18n } from '../../utilities/i18n/hooks.js';
+import { Button } from '../Button/Button.js';
+
+function DatePicker({
+  id,
+  selected,
+  month,
+  year,
+  allowRange,
+  multiMonth,
+  disableDatesBefore,
+  disableDatesAfter,
+  disableSpecificDates,
+  weekStartsOn = 0,
+  dayAccessibilityLabelPrefix,
+  onMonthChange,
+  onChange = noop
+}) {
+  const i18n = useI18n();
+  const [hoverDate, setHoverDate] = useState(undefined);
+  const [focusDate, setFocusDate] = useState(undefined);
+  useEffect(() => {
+    setFocusDate(undefined);
+  }, [selected]);
+  const handleFocus = useCallback(date => {
+    setFocusDate(date);
+  }, []);
+  const setFocusDateAndHandleMonthChange = useCallback(date => {
+    if (onMonthChange) {
+      onMonthChange(date.getMonth(), date.getFullYear());
+    }
+    setHoverDate(date);
+    setFocusDate(date);
+  }, [onMonthChange]);
+  const handleDateSelection = useCallback(range => {
+    const {
+      end
+    } = range;
+    setHoverDate(end);
+    setFocusDate(new Date(end));
+    onChange(range);
+  }, [onChange]);
+  const handleMonthChangeClick = useCallback((month, year) => {
+    if (!onMonthChange) {
+      return;
+    }
+    setFocusDate(undefined);
+    onMonthChange(month, year);
+  }, [onMonthChange]);
+  const handleHover = useCallback(date => {
+    setHoverDate(date);
+  }, []);
+  const handleKeyUp = useCallback(event => {
+    const {
+      key
+    } = event;
+    const range = deriveRange(selected);
+    const focusedDate = focusDate || range && range.start;
+    if (focusedDate == null) {
+      return;
+    }
+    if (key === 'ArrowUp') {
+      const previousWeek = new Date(focusedDate);
+      previousWeek.setDate(focusedDate.getDate() - 7);
+      if (!(disableDatesBefore && isDateBefore(previousWeek, disableDatesBefore) || disableSpecificDates && isDateDisabled(previousWeek, disableSpecificDates))) {
+        setFocusDateAndHandleMonthChange(previousWeek);
+      }
+    }
+    if (key === 'ArrowDown') {
+      const nextWeek = new Date(focusedDate);
+      nextWeek.setDate(focusedDate.getDate() + 7);
+      if (!(disableDatesAfter && isDateAfter(nextWeek, disableDatesAfter) || disableSpecificDates && isDateDisabled(nextWeek, disableSpecificDates))) {
+        setFocusDateAndHandleMonthChange(nextWeek);
+      }
+    }
+    if (key === 'ArrowRight') {
+      const tomorrow = new Date(focusedDate);
+      tomorrow.setDate(focusedDate.getDate() + 1);
+      if (!(disableDatesAfter && isDateAfter(tomorrow, disableDatesAfter) || disableSpecificDates && isDateDisabled(tomorrow, disableSpecificDates))) {
+        setFocusDateAndHandleMonthChange(tomorrow);
+      }
+    }
+    if (key === 'ArrowLeft') {
+      const yesterday = new Date(focusedDate);
+      yesterday.setDate(focusedDate.getDate() - 1);
+      if (!(disableDatesBefore && isDateBefore(yesterday, disableDatesBefore) || disableSpecificDates && isDateDisabled(yesterday, disableSpecificDates))) {
+        setFocusDateAndHandleMonthChange(yesterday);
+      }
+    }
+  }, [disableDatesAfter, disableDatesBefore, disableSpecificDates, focusDate, selected, setFocusDateAndHandleMonthChange]);
+  const showNextYear = getNextDisplayYear(month, year);
+  const showNextMonth = getNextDisplayMonth(month);
+  const showNextToNextYear = getNextDisplayYear(showNextMonth, showNextYear);
+  const showNextToNextMonth = getNextDisplayMonth(showNextMonth);
+  const showPreviousYear = getPreviousDisplayYear(month, year);
+  const showPreviousMonth = getPreviousDisplayMonth(month);
+  const previousMonthName = i18n.translate(`Polaris.DatePicker.months.${monthName(showPreviousMonth)}`);
+  const nextMonth = multiMonth ? i18n.translate(`Polaris.DatePicker.months.${monthName(showNextToNextMonth)}`) : i18n.translate(`Polaris.DatePicker.months.${monthName(showNextMonth)}`);
+  const nextYear = multiMonth ? showNextToNextYear : showNextYear;
+  const monthIsSelected = useMemo(() => deriveRange(selected), [selected]);
+  const firstDatePickerAccessibilityLabelPrefix = allowRange ? i18n.translate(`Polaris.DatePicker.start`) : dayAccessibilityLabelPrefix;
+  const secondDatePickerAccessibilityLabelPrefix = i18n.translate(`Polaris.DatePicker.end`);
+  const accessibilityLabelPrefixes = [firstDatePickerAccessibilityLabelPrefix, secondDatePickerAccessibilityLabelPrefix];
+  const secondDatePicker = multiMonth ? /*#__PURE__*/React.createElement(Month, {
+    onFocus: handleFocus,
+    focusedDate: focusDate,
+    month: showNextMonth,
+    year: showNextYear,
+    selected: monthIsSelected,
+    hoverDate: hoverDate,
+    onChange: handleDateSelection,
+    onHover: handleHover,
+    disableDatesBefore: disableDatesBefore,
+    disableDatesAfter: disableDatesAfter,
+    disableSpecificDates: disableSpecificDates,
+    allowRange: allowRange,
+    weekStartsOn: weekStartsOn,
+    accessibilityLabelPrefixes: accessibilityLabelPrefixes
+  }) : null;
+  const datePickerClassName = classNames(styles.DatePicker);
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: datePickerClassName,
+    onKeyDown: handleKeyDown,
+    onKeyUp: handleKeyUp
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.Header
+  }, /*#__PURE__*/React.createElement(Button, {
+    variant: "tertiary",
+    icon: ArrowLeftIcon,
+    accessibilityLabel: i18n.translate('Polaris.DatePicker.previousMonth', {
+      previousMonthName,
+      showPreviousYear
+    }),
+    onClick: () => handleMonthChangeClick(showPreviousMonth, showPreviousYear)
+  }), /*#__PURE__*/React.createElement(Button, {
+    variant: "tertiary",
+    icon: ArrowRightIcon,
+    accessibilityLabel: i18n.translate('Polaris.DatePicker.nextMonth', {
+      nextMonth,
+      nextYear
+    }),
+    onClick: () => handleMonthChangeClick(showNextMonth, showNextYear)
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles.MonthLayout
+  }, /*#__PURE__*/React.createElement(Month, {
+    onFocus: handleFocus,
+    focusedDate: focusDate,
+    month: month,
+    year: year,
+    selected: deriveRange(selected),
+    hoverDate: hoverDate,
+    onChange: handleDateSelection,
+    onHover: handleHover,
+    disableDatesBefore: disableDatesBefore,
+    disableDatesAfter: disableDatesAfter,
+    disableSpecificDates: disableSpecificDates,
+    allowRange: allowRange,
+    weekStartsOn: weekStartsOn,
+    accessibilityLabelPrefixes: accessibilityLabelPrefixes
+  }), secondDatePicker));
+}
+function noop() {}
+function handleKeyDown(event) {
+  const {
+    key
+  } = event;
+  if (key === 'ArrowUp' || key === 'ArrowDown' || key === 'ArrowLeft' || key === 'ArrowRight') {
+    event.preventDefault();
+    event.stopPropagation();
+  }
+}
+function deriveRange(selected) {
+  return selected instanceof Date ? {
+    start: selected,
+    end: selected
+  } : selected;
+}
+
+export { DatePicker };

package/build/esm/components/DatePicker/components/Day/Day.js

@@ -0,0 +1,70 @@
+import React, { memo, useRef, useEffect } from 'react';
+import { classNames } from '../../../../utilities/css.js';
+import { isSameDay } from '../../../../utilities/dates.js';
+import { monthName } from '../../utilities.js';
+import styles from '../../DatePicker.css.js';
+import { useI18n } from '../../../../utilities/i18n/hooks.js';
+import { Text } from '../../../Text/Text.js';
+
+const Day = /*#__PURE__*/memo(function Day({
+  day,
+  focused,
+  onClick,
+  onHover = noop,
+  onFocus = noop,
+  selected,
+  inRange,
+  inHoveringRange,
+  disabled,
+  lastDayOfMonth,
+  isLastSelectedDay,
+  isFirstSelectedDay,
+  isHoveringRight,
+  rangeIsDifferent,
+  weekday,
+  selectedAccessibilityLabelPrefix
+}) {
+  const i18n = useI18n();
+  const dayNode = useRef(null);
+  const hoverValue = lastDayOfMonth || day;
+  useEffect(() => {
+    if (focused && dayNode.current) {
+      dayNode.current.focus();
+    }
+  }, [focused]);
+  if (!day) {
+    return /*#__PURE__*/React.createElement("td", {
+      className: styles.EmptyDayCell,
+      onMouseOver: () => onHover(hoverValue)
+    });
+  }
+  const handleClick = onClick && !disabled ? onClick.bind(null, day) : noop;
+  const today = isSameDay(new Date(), day);
+  const dayCellClassName = classNames(styles.DayCell, selected && styles['DayCell-selected'], (inRange || inHoveringRange) && !disabled && styles['DayCell-inRange'], isLastSelectedDay && styles['DayCell-lastInRange'], isFirstSelectedDay && styles['DayCell-firstInRange'], isHoveringRight && styles['DayCell-hoverRight'], rangeIsDifferent && styles['DayCell-hasRange']);
+  const dayClassName = classNames(styles.Day, selected && styles['Day-selected'], disabled && styles['Day-disabled'], (inRange || inHoveringRange) && !disabled && styles['Day-inRange'], isLastSelectedDay && styles['Day-lastInRange'], isFirstSelectedDay && styles['Day-firstInRange'], isHoveringRight && styles['Day-hoverRight'], rangeIsDifferent && styles['Day-hasRange']);
+  const date = day.getDate();
+  const tabIndex = (focused || selected || today || date === 1) && !disabled ? 0 : -1;
+  const ariaLabel = [selected && selectedAccessibilityLabelPrefix ? `${selectedAccessibilityLabelPrefix} ` : '', `${today ? i18n.translate('Polaris.DatePicker.today') : ''}`, `${weekday ? weekday : ''} `, `${i18n.translate(`Polaris.DatePicker.months.${monthName(day.getMonth())}`)} `, `${date} `, `${day.getFullYear()}`].join('');
+  return /*#__PURE__*/React.createElement("td", {
+    className: dayCellClassName
+  }, /*#__PURE__*/React.createElement("button", {
+    onFocus: () => onFocus(day),
+    type: "button",
+    ref: dayNode,
+    tabIndex: tabIndex,
+    className: dayClassName,
+    onMouseOver: () => onHover(hoverValue),
+    onClick: handleClick,
+    "aria-label": ariaLabel,
+    "aria-disabled": disabled,
+    "aria-pressed": selected
+  }, /*#__PURE__*/React.createElement(Text, {
+    as: "span",
+    variant: "bodySm",
+    alignment: "center",
+    fontWeight: today ? 'bold' : 'regular'
+  }, date)));
+});
+function noop() {}
+
+export { Day };

package/build/esm/components/DatePicker/components/Month/Month.js

@@ -0,0 +1,129 @@
+import React, { useMemo, useCallback } from 'react';
+import { getWeeksForMonth, getOrderedWeekdays, getNewRange, isDateBefore, isDateAfter, isDateDisabled, isSameDay, dateIsSelected, dateIsInRange } from '../../../../utilities/dates.js';
+import styles from '../../DatePicker.css.js';
+import { weekdayName, monthName } from '../../utilities.js';
+import { Weekday } from '../Weekday/Weekday.js';
+import { Day } from '../Day/Day.js';
+import { useI18n } from '../../../../utilities/i18n/hooks.js';
+import { Text } from '../../../Text/Text.js';
+
+function Month({
+  focusedDate,
+  selected,
+  hoverDate,
+  disableDatesBefore,
+  disableDatesAfter,
+  disableSpecificDates,
+  allowRange,
+  onChange = noop,
+  onHover = noop,
+  onFocus = noop,
+  month,
+  year,
+  weekStartsOn,
+  accessibilityLabelPrefixes
+}) {
+  const i18n = useI18n();
+  const isInHoveringRange = allowRange ? hoveringDateIsInRange : () => false;
+  const now = new Date();
+  const current = now.getMonth() === month && now.getFullYear() === year;
+  const weeks = useMemo(() => getWeeksForMonth(month, year, weekStartsOn), [month, weekStartsOn, year]);
+  const weekdays = getOrderedWeekdays(weekStartsOn).map(weekday => /*#__PURE__*/React.createElement(Weekday, {
+    key: weekday,
+    title: i18n.translate(`Polaris.DatePicker.daysAbbreviated.${weekdayName(weekday)}`),
+    label: weekdayLabel(weekday),
+    current: current && new Date().getDay() === weekday
+  }));
+  const handleDateClick = useCallback(selectedDate => {
+    onChange(getNewRange(allowRange ? selected : undefined, selectedDate));
+  }, [allowRange, onChange, selected]);
+  const lastDayOfMonth = useMemo(() => new Date(year, month + 1, 0), [month, year]);
+  function renderWeek(day, dayIndex) {
+    if (day == null) {
+      return /*#__PURE__*/React.createElement(Day, {
+        key: dayIndex,
+        onHover: onHover,
+        lastDayOfMonth: lastDayOfMonth
+      });
+    }
+    const disabled = disableDatesBefore && isDateBefore(day, disableDatesBefore) || disableDatesAfter && isDateAfter(day, disableDatesAfter) || disableSpecificDates && isDateDisabled(day, disableSpecificDates);
+    const isFirstSelectedDay = allowRange && selected && isDateStart(day, selected);
+    const isLastSelectedDay = allowRange && selected && (!isSameDay(selected.start, selected.end) && isDateEnd(day, selected) || hoverDate && isSameDay(selected.start, selected.end) && isDateAfter(hoverDate, selected.start) && isSameDay(day, hoverDate) && !isFirstSelectedDay);
+    const rangeIsDifferent = !(selected && isSameDay(selected.start, selected.end));
+    const isHoveringRight = hoverDate && isDateBefore(day, hoverDate);
+    const [firstAccessibilityLabelPrefix, lastAccessibilityLabelPrefix] = accessibilityLabelPrefixes;
+    let accessibilityLabelPrefix;
+    if (allowRange && isFirstSelectedDay || !allowRange && firstAccessibilityLabelPrefix) {
+      accessibilityLabelPrefix = firstAccessibilityLabelPrefix;
+    } else if (allowRange && isLastSelectedDay) {
+      accessibilityLabelPrefix = lastAccessibilityLabelPrefix;
+    }
+    return /*#__PURE__*/React.createElement(Day, {
+      selectedAccessibilityLabelPrefix: accessibilityLabelPrefix,
+      weekday: weekdayLabel(dayIndex),
+      focused: focusedDate != null && isSameDay(day, focusedDate),
+      day: day,
+      key: dayIndex,
+      onFocus: onFocus,
+      onClick: handleDateClick,
+      onHover: onHover,
+      selected: selected != null && dateIsSelected(day, selected),
+      inRange: selected != null && dateIsInRange(day, selected),
+      disabled: disabled,
+      inHoveringRange: selected != null && hoverDate != null && isInHoveringRange(day, selected, hoverDate),
+      isLastSelectedDay: isLastSelectedDay,
+      isFirstSelectedDay: isFirstSelectedDay,
+      isHoveringRight: isHoveringRight,
+      rangeIsDifferent: rangeIsDifferent
+    });
+  }
+  const weeksMarkup = weeks.map((week, index) => /*#__PURE__*/React.createElement("tr", {
+    className: styles.Week,
+    key: index
+  }, week.map(renderWeek)));
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.MonthContainer
+  }, /*#__PURE__*/React.createElement("table", {
+    role: "grid",
+    className: styles.Month
+  }, /*#__PURE__*/React.createElement("caption", {
+    className: styles.Title
+  }, /*#__PURE__*/React.createElement(Text, {
+    as: "span",
+    variant: "bodyMd",
+    alignment: "center",
+    fontWeight: current ? 'bold' : 'medium'
+  }, i18n.translate(`Polaris.DatePicker.months.${monthName(month)}`), ' ', year)), /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", {
+    className: styles.WeekHeadings
+  }, weekdays)), /*#__PURE__*/React.createElement("tbody", null, weeksMarkup)));
+  function weekdayLabel(weekday) {
+    return i18n.translate(`Polaris.DatePicker.days.${weekdayName(weekday)}`);
+  }
+}
+function noop() {}
+function hoveringDateIsInRange(day, range, hoverEndDate) {
+  if (day == null) {
+    return false;
+  }
+  const {
+    start,
+    end
+  } = range;
+  return Boolean(isSameDay(start, end) && day > start && day <= hoverEndDate);
+}
+function isDateEnd(day, range) {
+  if (day == null) return false;
+  const {
+    end
+  } = range;
+  return Boolean(end && isSameDay(end, day));
+}
+function isDateStart(day, range) {
+  if (day == null) return false;
+  const {
+    start
+  } = range;
+  return Boolean(start && isSameDay(start, day));
+}
+
+export { Month };

package/build/esm/components/DatePicker/components/Weekday/Weekday.js

@@ -0,0 +1,23 @@
+import React, { memo } from 'react';
+import styles from '../../DatePicker.css.js';
+import { Text } from '../../../Text/Text.js';
+
+const Weekday = /*#__PURE__*/memo(function Weekday({
+  label,
+  title,
+  current
+}) {
+  return /*#__PURE__*/React.createElement("th", {
+    "aria-label": label,
+    scope: "col",
+    className: styles.Weekday
+  }, /*#__PURE__*/React.createElement(Text, {
+    as: "span",
+    variant: "bodySm",
+    alignment: "center",
+    fontWeight: current ? 'bold' : 'regular',
+    tone: !current ? 'subdued' : undefined
+  }, title));
+});
+
+export { Weekday };