@superdispatch/dates 0.21.6 → 0.21.13

package/pkg/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@superdispatch/dates",
+  "version": "0.21.8",
+  "license": "MIT",
+  "files": [
+    "dist-*/",
+    "bin/"
+  ],
+  "pika": true,
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/superdispatch/ui.git"
+  },
+  "dependencies": {
+    "@superdispatch/ui": "^0.21.8",
+    "luxon": "^1.27.0",
+    "react-day-picker": "7.4.10"
+  },
+  "peerDependencies": {
+    "@babel/runtime": "^7.0.0",
+    "@material-ui/lab": "^4.0.0-alpha.40"
+  },
+  "publishConfig": {
+    "access": "public",
+    "directory": "pkg"
+  },
+  "esnext": "dist-src/index.js",
+  "module": "dist-web/index.js",
+  "main": "dist-node/index.js",
+  "types": "dist-types/index.d.ts"
+}

package/playroom.ts

@@ -0,0 +1,10 @@
+export {
+  Calendar,
+  CalendarQuickSelection,
+  CalendarQuickSelectionItem,
+  DateField,
+  DateRangeField,
+  FormattedDate,
+  FormattedRelativeTime,
+  TimeField,
+} from './src';

package/src/__tests__/index.spec.ts

@@ -0,0 +1,48 @@
+import * as api from '..';
+
+it('exposes public api', () => {
+  expect(api).toMatchInlineSnapshot(`
+    Object {
+      "Calendar": React.forwardRef(Calendar),
+      "CalendarQuickSelection": React.forwardRef(CalendarQuickSelection),
+      "CalendarQuickSelectionItem": React.forwardRef(CalendarQuickSelectionItem),
+      "DateConfigProvider": [Function],
+      "DateField": React.forwardRef(DateField),
+      "DateRangeField": React.forwardRef(DateRangeField),
+      "DateUtils": [Function],
+      "FormattedDate": [Function],
+      "FormattedRelativeTime": [Function],
+      "TimeField": React.forwardRef(TimeField),
+      "defaultDateConfig": Object {
+        "format": "DateTimeISO",
+      },
+      "formatDate": [Function],
+      "formatDateRange": [Function],
+      "formatRelativeTime": [Function],
+      "isDate": [Function],
+      "isDateLike": [Function],
+      "isDateRange": [Function],
+      "isDateRangeLike": [Function],
+      "isValidDate": [Function],
+      "isValidDateRange": [Function],
+      "parseDate": [Function],
+      "parseDateRange": [Function],
+      "setDefaultTimeZone": [Function],
+      "stringifyDate": [Function],
+      "stringifyDateRange": [Function],
+      "toDate": [Function],
+      "toDatePayload": [Function],
+      "toDateRange": [Function],
+      "toDateRangePayload": [Function],
+      "toPrimitiveDateInput": [Function],
+      "toPrimitiveDateRangeInput": [Function],
+      "useDateConfig": [Function],
+      "useDateTime": [Function],
+      "useDateTimeRange": [Function],
+      "useDateUtils": [Function],
+      "useDefaultTimeZone": [Function],
+      "useFormattedDate": [Function],
+      "useFormattedRelativeTime": [Function],
+    }
+  `);
+});

package/src/base-date-picker/BaseDatePicker.tsx

@@ -0,0 +1,145 @@
+import {
+  BaseTextFieldProps,
+  IconButton,
+  InputAdornment,
+  InputProps,
+  Popover,
+  SvgIcon,
+  TextField,
+} from '@material-ui/core';
+import { Clear } from '@material-ui/icons';
+import { mdiCalendarMonth } from '@mdi/js';
+import { useValueObserver } from '@superdispatch/hooks';
+import { mergeRefs, useUID } from '@superdispatch/ui';
+import { forwardRef, Ref, useImperativeHandle, useRef, useState } from 'react';
+
+export interface InternalBaseDateFieldAPI {
+  close: () => void;
+}
+
+export interface BaseDatePickerProps
+  extends Omit<BaseTextFieldProps, 'variant'> {
+  api?: Ref<InternalBaseDateFieldAPI>;
+  onClear?: () => void;
+  onClose?: () => void;
+  enableClearable?: boolean;
+  InputProps?: InputProps;
+}
+
+export const BaseDatePicker = forwardRef<HTMLDivElement, BaseDatePickerProps>(
+  (
+    {
+      id,
+      api,
+      onClear,
+      onClick,
+      onClose,
+      onKeyDown,
+
+      disabled,
+      children,
+      enableClearable,
+
+      inputRef: inputRefProp,
+      InputProps: inputProps,
+
+      ...textFieldProps
+    },
+    ref,
+  ) => {
+    const uid = useUID(id);
+    const labelID = `${uid}-label`;
+    const clearIconID = `${uid}-clear-icon`;
+
+    const inputRef = useRef<HTMLInputElement>(null);
+    const textFieldRef = useRef<HTMLDivElement>(null);
+    const [popoverAnchor, setPopoverAnchor] = useState<null | HTMLElement>(
+      null,
+    );
+
+    function handleOpen(): void {
+      if (!disabled && textFieldRef.current) {
+        setPopoverAnchor(textFieldRef.current);
+      }
+    }
+
+    function handleClose(): void {
+      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?.();
+      }
+    });
+
+    return (
+      <>
+        <Popover
+          open={!!popoverAnchor}
+          onClose={handleClose}
+          anchorEl={popoverAnchor}
+          anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+          transformOrigin={{ vertical: 'top', horizontal: 'left' }}
+        >
+          {children}
+        </Popover>
+
+        <TextField
+          {...textFieldProps}
+          id={uid}
+          ref={mergeRefs(ref, textFieldRef)}
+          disabled={disabled}
+          inputRef={mergeRefs(inputRef, inputRefProp)}
+          onClick={(event) => {
+            onClick?.(event);
+            if (!event.defaultPrevented) {
+              handleOpen();
+            }
+          }}
+          onKeyDown={(event) => {
+            onKeyDown?.(event);
+
+            if (
+              !event.defaultPrevented &&
+              (event.key === ' ' || event.key === 'Enter')
+            ) {
+              handleOpen();
+            }
+          }}
+          inputProps={{ readOnly: true }}
+          InputProps={{
+            ...inputProps,
+            endAdornment: (
+              <InputAdornment position="end">
+                {enableClearable ? (
+                  <IconButton
+                    disabled={disabled}
+                    aria-labelledby={`${clearIconID} ${labelID}`}
+                    onClick={(event) => {
+                      // Do not bubble up clicks.
+                      event.stopPropagation();
+
+                      onClear?.();
+                    }}
+                  >
+                    <Clear id={clearIconID} aria-label="clear" />
+                  </IconButton>
+                ) : (
+                  <IconButton disabled={disabled}>
+                    <SvgIcon>
+                      <path d={mdiCalendarMonth} />
+                    </SvgIcon>
+                  </IconButton>
+                )}
+              </InputAdornment>
+            ),
+          }}
+        />
+      </>
+    );
+  },
+);

package/src/calendar/Calendar.playroom.tsx

@@ -0,0 +1,28 @@
+import { forwardRef, useState } from 'react';
+import { NullableDateInput } from '../date-time-utils/DateTimeUtils';
+import { Calendar as SDCalendar, CalendarProps } from './Calendar';
+
+export const Calendar = forwardRef<HTMLDivElement, CalendarProps>(
+  ({ onDayClick, selectedDays, ...props }, ref) => {
+    const [value, setValue] = useState<NullableDateInput>();
+
+    return (
+      <SDCalendar
+        {...props}
+        ref={ref}
+        selectedDays={selectedDays || ((event) => value === event.stringValue)}
+        onDayClick={(event) => {
+          onDayClick?.(event);
+
+          if (!event.disabled) {
+            if (!event.selected) {
+              setValue(event.stringValue);
+            } else {
+              setValue(undefined);
+            }
+          }
+        }}
+      />
+    );
+  },
+);