@superdispatch/dates 0.16.0-alpha.0 → 0.16.0-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@superdispatch/dates",
-  "version": "0.16.0-alpha.0",
+  "version": "0.16.0-alpha.1",
   "license": "MIT",
   "files": [
     "dist-*/",
@@ -13,7 +13,7 @@
     "url": "https://github.com/superdispatch/ui.git"
   },
   "dependencies": {
-    "@superdispatch/ui": "^0.16.0-alpha.0",
+    "@superdispatch/ui": "^0.16.0-alpha.1",
     "luxon": "^1.27.0",
     "react-day-picker": "7.4.10"
   },

package/dist-src/v5/base-date-picker/BaseDatePicker.js

@@ -1,123 +0,0 @@
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["id", "api", "onClear", "onClick", "onClose", "onKeyDown", "disabled", "children", "enableClearable", "inputRef", "InputProps"];
-import { mdiCalendarMonth } from '@mdi/js';
-import { Clear } from '@mui/icons-material';
-import { IconButton, InputAdornment, Popover, SvgIcon, TextField } from '@mui/material';
-import { useValueObserver } from '@superdispatch/hooks';
-import { v5 } from '@superdispatch/ui';
-import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var {
-  mergeRefs,
-  useUID
-} = v5;
-export var BaseDatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
-  var {
-    id,
-    api,
-    onClear,
-    onClick: _onClick,
-    onClose,
-    onKeyDown: _onKeyDown,
-    disabled,
-    children,
-    enableClearable,
-    inputRef: inputRefProp,
-    InputProps: inputProps
-  } = _ref,
-      textFieldProps = _objectWithoutProperties(_ref, _excluded);
-
-  var uid = useUID(id);
-  var labelID = "".concat(uid, "-label");
-  var clearIconID = "".concat(uid, "-clear-icon");
-  var inputRef = useRef(null);
-  var textFieldRef = useRef(null);
-  var [popoverAnchor, setPopoverAnchor] = useState(null);
-
-  function handleOpen() {
-    if (!disabled && textFieldRef.current) {
-      setPopoverAnchor(textFieldRef.current);
-    }
-  }
-
-  function handleClose() {
-    setPopoverAnchor(null);
-  }
-
-  useImperativeHandle(api, () => ({
-    close: handleClose
-  })); // We want to trigger close event only when UI will be ready after updates.
-
-  useValueObserver(popoverAnchor, () => {
-    if (!popoverAnchor) {
-      onClose === null || onClose === void 0 ? void 0 : onClose();
-    }
-  });
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Popover, {
-      open: !!popoverAnchor,
-      onClose: handleClose,
-      anchorEl: popoverAnchor,
-      anchorOrigin: {
-        vertical: 'bottom',
-        horizontal: 'left'
-      },
-      transformOrigin: {
-        vertical: 'top',
-        horizontal: 'left'
-      },
-      children: children
-    }), /*#__PURE__*/_jsx(TextField, _objectSpread(_objectSpread({}, textFieldProps), {}, {
-      id: uid,
-      ref: mergeRefs(ref, textFieldRef),
-      disabled: disabled,
-      inputRef: mergeRefs(inputRef, inputRefProp),
-      onClick: event => {
-        _onClick === null || _onClick === void 0 ? void 0 : _onClick(event);
-
-        if (!event.defaultPrevented) {
-          handleOpen();
-        }
-      },
-      onKeyDown: event => {
-        _onKeyDown === null || _onKeyDown === void 0 ? void 0 : _onKeyDown(event);
-
-        if (!event.defaultPrevented && (event.key === ' ' || event.key === 'Enter')) {
-          handleOpen();
-        }
-      },
-      inputProps: {
-        readOnly: true
-      },
-      InputProps: _objectSpread(_objectSpread({}, inputProps), {}, {
-        endAdornment: /*#__PURE__*/_jsx(InputAdornment, {
-          position: "end",
-          children: enableClearable ? /*#__PURE__*/_jsx(IconButton, {
-            disabled: disabled,
-            "aria-labelledby": "".concat(clearIconID, " ").concat(labelID),
-            onClick: event => {
-              // Do not bubble up clicks.
-              event.stopPropagation();
-              onClear === null || onClear === void 0 ? void 0 : onClear();
-            },
-            children: /*#__PURE__*/_jsx(Clear, {
-              id: clearIconID,
-              "aria-label": "clear"
-            })
-          }) : /*#__PURE__*/_jsx(IconButton, {
-            disabled: disabled,
-            children: /*#__PURE__*/_jsx(SvgIcon, {
-              children: /*#__PURE__*/_jsx("path", {
-                d: mdiCalendarMonth
-              })
-            })
-          })
-        })
-      })
-    }))]
-  });
-});
-if (process.env.NODE_ENV !== "production") BaseDatePicker.displayName = "BaseDatePicker";

package/dist-src/v5/calendar/Calendar.js

@@ -1,403 +0,0 @@
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["footer", "classes", "direction", "quickSelection", "selectedDays", "disabledDays", "onDayClick", "onDayKeyDown", "onDayMouseEnter", "onDayMouseLeave", "onDayMouseDown", "onDayMouseUp", "onDayTouchEnd", "onDayTouchStart", "modifiers", "highlightedDays", "format", "initialTime", "initialMonth"];
-import { Divider, Grid, Hidden } from '@mui/material';
-import { makeStyles } from '@mui/styles';
-import { Color } from '@superdispatch/ui';
-import { DateTime } from 'luxon';
-import { forwardRef, useMemo } from 'react';
-import DayPicker from 'react-day-picker';
-import { useDateConfig } from "../date-config/DateConfig.js";
-import { stringifyDate } from "../date-time-utils/DateTimeUtils.js";
-import { useDateTime } from "../use-date-time/useDateTime.js";
-import { CalendarCaption, CalendarNavbar, CalendarWeekDay } from "./InternalCalendarComponents.js"; //
-// Styles
-//
-
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var useStyles = /*#__PURE__*/makeStyles(theme => ({
-  container: {
-    display: 'inline-block'
-  },
-  wrapper: {
-    userSelect: 'none',
-    position: 'relative',
-    flexDirection: 'row',
-    paddingBottom: theme.spacing(2),
-    '&:focus': {
-      outline: 'none'
-    }
-  },
-  interactionDisabled: {},
-  navBar: {},
-  navButtonPrev: {
-    position: 'absolute !important',
-    top: theme.spacing(1.5),
-    left: theme.spacing(1.5)
-  },
-  navButtonNext: {
-    position: 'absolute !important',
-    top: theme.spacing(1.5),
-    right: theme.spacing(1.5)
-  },
-  navButtonInteractionDisabled: {},
-  months: {
-    display: 'flex',
-    flexWrap: 'wrap',
-    justifyContent: 'center'
-  },
-  month: {
-    userSelect: 'none',
-    margin: theme.spacing(2, 2, 0, 2)
-  },
-  caption: {
-    textAlign: 'center',
-    display: 'table-caption',
-    marginBottom: theme.spacing(1),
-    padding: theme.spacing(0, 1)
-  },
-  weekdays: {
-    display: 'table-header-group'
-  },
-  weekdaysRow: {
-    display: 'flex',
-    margin: theme.spacing(1, 0)
-  },
-  weekday: {
-    margin: '1px',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    textDecoration: 'none',
-    color: Color.Dark300,
-    width: theme.spacing(5),
-    height: theme.spacing(5)
-  },
-  weekNumber: {},
-  body: {
-    display: 'flex',
-    flexDirection: 'column'
-  },
-  week: {
-    display: 'flex'
-  },
-  // Day modifiers.
-  today: {},
-  outside: {},
-  selected: {},
-  disabled: {},
-  firstDayOfMonth: {},
-  lastDayOfMonth: {},
-  blue: {},
-  green: {},
-  purple: {},
-  red: {},
-  teal: {},
-  yellow: {},
-  day: {
-    zIndex: 1,
-    margin: '1px',
-    width: theme.spacing(5),
-    height: theme.spacing(5),
-    borderRadius: theme.spacing(0.5),
-    position: 'relative',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    transition: theme.transitions.create(['color', 'background-color']),
-    '&:before': {
-      content: '""',
-      top: 0,
-      left: -1,
-      right: -1,
-      bottom: 0,
-      zIndex: -1,
-      position: 'absolute',
-      backgroundColor: Color.Transparent,
-      transition: theme.transitions.create('background-color')
-    },
-    '&:first-child, &$firstDayOfMonth': {
-      '&:before': {
-        borderRadius: theme.spacing(0.5, 0, 0, 0.5)
-      }
-    },
-    '&:last-child, &$lastDayOfMonth': {
-      '&:before': {
-        borderRadius: theme.spacing(0, 0.5, 0.5, 0)
-      }
-    },
-    '&:after': {
-      content: '""',
-      borderRadius: theme.spacing(0.5),
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      zIndex: -1,
-      position: 'absolute',
-      backgroundColor: Color.Transparent,
-      transition: theme.transitions.create('background-color')
-    },
-    '&:hover, &:focus': {
-      outline: 'none'
-    },
-    '&$disabled': {
-      color: Color.Dark100,
-      '&$selected:not($outside):after': {
-        backgroundColor: Color.Silver300
-      }
-    },
-    '&:not($outside):not($disabled)': {
-      cursor: 'pointer',
-      color: Color.Dark500,
-      '&:not($selected):not(:active)': {
-        '&$today': {
-          color: Color.Blue300
-        },
-        '&:hover, &:focus': {
-          backgroundColor: Color.Silver100
-        },
-        '&$blue': {
-          color: Color.Blue500,
-          '&': {
-            backgroundColor: Color.Blue50
-          }
-        },
-        '&$green': {
-          color: Color.Green500,
-          '&': {
-            backgroundColor: Color.Green50
-          }
-        },
-        '&$purple': {
-          color: Color.Purple500,
-          '&': {
-            backgroundColor: Color.Purple50
-          }
-        },
-        '&$red': {
-          color: Color.Red500,
-          '&': {
-            backgroundColor: Color.Red50
-          }
-        },
-        '&$teal': {
-          color: Color.Teal500,
-          '&': {
-            backgroundColor: Color.Teal50
-          }
-        },
-        '&$yellow': {
-          color: Color.Yellow500,
-          '&': {
-            backgroundColor: Color.Yellow50
-          }
-        }
-      },
-      '&:active, &$selected': {
-        color: Color.White,
-        '&:after': {
-          backgroundColor: Color.Blue300
-        }
-      }
-    }
-  },
-  footer: {
-    padding: theme.spacing(2)
-  },
-  todayButton: {}
-}), {
-  name: 'SD-Calendar'
-}); //
-// Utility Types
-//
-
-//
-// Internal Utils
-//
-function toDayPickerModifier(config, modifier) {
-  if (!modifier) {
-    return undefined;
-  }
-
-  return localDate => {
-    var dateValue = DateTime.fromObject({
-      year: localDate.getFullYear(),
-      month: localDate.getMonth() + 1,
-      day: localDate.getDate(),
-      hour: localDate.getHours(),
-      minute: localDate.getMinutes(),
-      second: localDate.getSeconds(),
-      millisecond: localDate.getMilliseconds()
-    });
-    return modifier({
-      config,
-      dateValue,
-      stringValue: stringifyDate(dateValue, config)
-    });
-  };
-}
-
-function toDayPickerHandler(config, classes, initialTime, handler) {
-  if (!handler) {
-    return undefined;
-  }
-
-  return (localDate, modifiers) => {
-    var dateValue = DateTime.fromObject({
-      year: localDate.getFullYear(),
-      month: localDate.getMonth() + 1,
-      day: localDate.getDate(),
-      hour: initialTime.hour,
-      minute: initialTime.minute,
-      second: initialTime.second,
-      millisecond: initialTime.millisecond
-    });
-    handler({
-      disabled: !!modifiers[classes.disabled],
-      selected: !!modifiers[classes.selected],
-      config,
-      dateValue,
-      stringValue: stringifyDate(dateValue, config)
-    });
-  };
-} //
-// Calendar
-//
-
-
-export var Calendar = /*#__PURE__*/forwardRef((_ref, ref) => {
-  var {
-    footer,
-    classes,
-    direction,
-    quickSelection,
-    selectedDays,
-    disabledDays,
-    onDayClick,
-    onDayKeyDown,
-    onDayMouseEnter,
-    onDayMouseLeave,
-    onDayMouseDown,
-    onDayMouseUp,
-    onDayTouchEnd,
-    onDayTouchStart,
-    modifiers,
-    highlightedDays,
-    format: formatProp,
-    initialTime: initialTimeInputProp,
-    initialMonth: initialMonthInputProp
-  } = _ref,
-      dayPickerProps = _objectWithoutProperties(_ref, _excluded);
-
-  var styles = useStyles({
-    classes
-  });
-  var config = useDateConfig({
-    format: formatProp
-  });
-  var initialTimeInput = useDateTime(initialTimeInputProp, config);
-  var initialMonthInput = useDateTime(initialMonthInputProp, config);
-  var [initialTime, initialMonth] = useMemo(() => {
-    var time = initialTimeInput;
-    var month = initialMonthInput;
-
-    if (!month.isValid) {
-      month = DateTime.local().startOf('month');
-    }
-
-    if (!time.isValid) {
-      time = month;
-    }
-
-    return [time, new Date(month.year, month.month - 1, month.day, month.hour, month.minute, month.second, month.millisecond)];
-  }, [initialTimeInput, initialMonthInput]);
-  var wrapModifier = toDayPickerModifier.bind(null, config);
-  var wrapHandler = toDayPickerHandler.bind(null, config, styles, initialTime);
-  var dayPickerModifiers = {
-    [styles.firstDayOfMonth]: wrapModifier(_ref2 => {
-      var {
-        dateValue
-      } = _ref2;
-      return dateValue.day === 1;
-    }),
-    [styles.lastDayOfMonth]: wrapModifier(_ref3 => {
-      var {
-        dateValue
-      } = _ref3;
-      return dateValue.day === dateValue.daysInMonth;
-    })
-  };
-
-  if (modifiers) {
-    for (var [key, modifier] of Object.entries(modifiers)) {
-      dayPickerModifiers[key] = wrapModifier(modifier);
-    }
-  }
-
-  if (highlightedDays) {
-    for (var [_key, _modifier] of Object.entries(highlightedDays)) {
-      dayPickerModifiers[styles[_key]] = wrapModifier(_modifier);
-    }
-  }
-
-  return /*#__PURE__*/_jsxs(Grid, {
-    ref: ref,
-    container: true,
-    direction: direction,
-    children: [!!quickSelection && /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(Grid, {
-        item: true,
-        xs: 12,
-        sm: "auto",
-        children: quickSelection
-      }), /*#__PURE__*/_jsx(Hidden, {
-        xsDown: true,
-        children: /*#__PURE__*/_jsx(Grid, {
-          item: true,
-          sm: "auto",
-          children: /*#__PURE__*/_jsx(Divider, {
-            orientation: "vertical"
-          })
-        })
-      }), /*#__PURE__*/_jsx(Hidden, {
-        smUp: true,
-        children: /*#__PURE__*/_jsx(Grid, {
-          item: true,
-          xs: 12,
-          children: /*#__PURE__*/_jsx(Divider, {
-            orientation: "horizontal"
-          })
-        })
-      })]
-    }), /*#__PURE__*/_jsxs(Grid, {
-      item: true,
-      xs: 12,
-      sm: "auto",
-      children: [/*#__PURE__*/_jsx(DayPicker, _objectSpread(_objectSpread({}, dayPickerProps), {}, {
-        classNames: styles,
-        navbarElement: CalendarNavbar,
-        captionElement: CalendarCaption,
-        weekdayElement: CalendarWeekDay,
-        initialMonth: initialMonth,
-        modifiers: dayPickerModifiers,
-        selectedDays: wrapModifier(selectedDays),
-        disabledDays: wrapModifier(disabledDays),
-        onDayClick: wrapHandler(onDayClick),
-        onDayKeyDown: wrapHandler(onDayKeyDown),
-        onDayMouseEnter: wrapHandler(onDayMouseEnter),
-        onDayMouseLeave: wrapHandler(onDayMouseLeave),
-        onDayMouseDown: wrapHandler(onDayMouseDown),
-        onDayMouseUp: wrapHandler(onDayMouseUp),
-        onDayTouchEnd: wrapHandler(onDayTouchEnd),
-        onDayTouchStart: wrapHandler(onDayTouchStart)
-      })), !!footer && /*#__PURE__*/_jsx("div", {
-        className: styles.footer,
-        children: footer
-      })]
-    })]
-  });
-});
-if (process.env.NODE_ENV !== "production") Calendar.displayName = "Calendar";

package/dist-src/v5/calendar/CalendarQuickSelection.js

@@ -1,34 +0,0 @@
-import { List, ListItem, Typography } from '@mui/material';
-import { forwardRef } from 'react';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export var CalendarQuickSelectionItem = /*#__PURE__*/forwardRef((_ref, ref) => {
-  var {
-    onClick,
-    selected,
-    children
-  } = _ref;
-  return /*#__PURE__*/_jsx(ListItem, {
-    ref: ref,
-    button: true,
-    selected: selected,
-    onClick: onClick,
-    children: children
-  });
-});
-if (process.env.NODE_ENV !== "production") CalendarQuickSelectionItem.displayName = "CalendarQuickSelectionItem";
-export var CalendarQuickSelection = /*#__PURE__*/forwardRef((_ref2, ref) => {
-  var {
-    children
-  } = _ref2;
-  return /*#__PURE__*/_jsxs(List, {
-    ref: ref,
-    children: [/*#__PURE__*/_jsx(ListItem, {
-      children: /*#__PURE__*/_jsx(Typography, {
-        variant: "h4",
-        children: "Quick Selection"
-      })
-    }), children]
-  });
-});
-if (process.env.NODE_ENV !== "production") CalendarQuickSelection.displayName = "CalendarQuickSelection";

package/dist-src/v5/calendar/InternalCalendarComponents.js

@@ -1,71 +0,0 @@
-import { ChevronLeft, ChevronRight } from '@mui/icons-material';
-import { IconButton, Typography } from '@mui/material';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export function CalendarCaption(_ref) {
-  var {
-    date,
-    localeUtils,
-    classNames,
-    onClick
-  } = _ref;
-  return /*#__PURE__*/_jsx(Typography, {
-    variant: "h4",
-    onClick: onClick,
-    className: classNames.caption,
-    children: localeUtils.formatMonthTitle(date)
-  });
-}
-export function CalendarNavbar(_ref2) {
-  var {
-    labels,
-    classNames,
-    onNextClick,
-    onPreviousClick,
-    showNextButton,
-    showPreviousButton
-  } = _ref2;
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(IconButton, {
-      size: "small",
-      color: "primary",
-      disabled: !showPreviousButton,
-      onClick: () => {
-        onPreviousClick();
-      },
-      "aria-label": labels.previousMonth,
-      className: classNames.navButtonPrev,
-      children: /*#__PURE__*/_jsx(ChevronLeft, {
-        color: "action"
-      })
-    }), /*#__PURE__*/_jsx(IconButton, {
-      size: "small",
-      color: "primary",
-      disabled: !showNextButton,
-      onClick: () => {
-        onNextClick();
-      },
-      "aria-label": labels.nextMonth,
-      className: classNames.navButtonNext,
-      children: /*#__PURE__*/_jsx(ChevronRight, {
-        color: "action"
-      })
-    })]
-  });
-}
-var SHORT_WEEKDAYS = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
-export function CalendarWeekDay(_ref3) {
-  var {
-    weekday,
-    className,
-    localeUtils
-  } = _ref3;
-  return /*#__PURE__*/_jsx(Typography, {
-    variant: "h5",
-    component: "abbr",
-    className: className,
-    title: localeUtils.formatWeekdayLong(weekday),
-    children: SHORT_WEEKDAYS[weekday]
-  });
-}

package/dist-src/v5/date-config/DateConfig.js

@@ -1,47 +0,0 @@
-import { FixedOffsetZone, Settings } from 'luxon';
-import { createContext, useContext, useMemo } from 'react';
-import { jsx as _jsx } from "react/jsx-runtime";
-export function setDefaultTimeZone(offset) {
-  if (offset === 'local') {
-    Settings.defaultZoneName = offset;
-  } else {
-    var zone = FixedOffsetZone.instance(offset);
-
-    if (zone.isValid) {
-      Settings.defaultZoneName = zone.name;
-    }
-  }
-
-  return Settings.defaultZoneName;
-}
-export function useDefaultTimeZone(offset) {
-  return useMemo(() => setDefaultTimeZone(offset), [offset]);
-}
-export var defaultDateConfig = {
-  format: 'DateTimeISO'
-};
-var Context = /*#__PURE__*/createContext(defaultDateConfig);
-export function useDateConfig() {
-  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var config = useContext(Context);
-  var {
-    format = config.format
-  } = options;
-  return useMemo(() => ({
-    format
-  }), [format]);
-}
-export function DateConfigProvider(_ref) {
-  var {
-    format,
-    children
-  } = _ref;
-  var prev = useDateConfig();
-  var ctx = useMemo(() => ({
-    format: format || prev.format
-  }), [format, prev.format]);
-  return /*#__PURE__*/_jsx(Context.Provider, {
-    value: ctx,
-    children: children
-  });
-}