@primer/components 0.0.0-202110322927 → 0.0.0-2021103235619

package/lib-esm/DatePicker/DatePicker.d.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+import { OverlayProps } from '../Overlay';
+import { FocusTrapHookSettings } from '../hooks/useFocusTrap';
+import { FocusZoneHookSettings } from '../hooks/useFocusZone';
+import { DatePickerConfiguration, Selection } from './useDatePicker';
+declare type OpenGesture = 'anchor-click' | 'anchor-key-press';
+declare type CloseGesture = 'anchor-click' | 'click-outside' | 'escape';
+export interface DatePickerProps extends DatePickerConfiguration {
+    /**
+     * An override to the internal ref that will be spread on to the renderAnchor
+     */
+    anchorRef?: React.RefObject<HTMLElement>;
+    /**
+     * Settings to apply to the Focus Zone on the internal `Overlay` component.
+     */
+    focusTrapSettings?: Partial<FocusTrapHookSettings>;
+    /**
+     * Settings to apply to the Focus Zone on the internal `Overlay` component.
+     */
+    focusZoneSettings?: Partial<FocusZoneHookSettings>;
+    initialValue?: 'today' | Date | string | null;
+    iconOnly?: boolean;
+    placeholder?: string;
+    /**
+     * Determines whether the overlay portion of the component should be shown or not
+     */
+    open?: boolean;
+    /**
+     * A callback which is called whenever the overlay is currently closed and an "open gesture" is detected.
+     */
+    onOpen?: (gesture: OpenGesture) => unknown;
+    /**
+     * A callback which is called whenever the overlay is currently open and a "close gesture" is detected.
+     */
+    onClose?: (gesture: CloseGesture) => unknown;
+    /**
+     * Props to be spread on the internal `Overlay` component.
+     */
+    overlayProps?: Partial<OverlayProps>;
+    /**
+     * A custom function component used to render the anchor element.
+     * Will receive the selected text as `children` prop when an item is activated.
+     */
+    renderAnchor?: <T extends React.HTMLAttributes<HTMLElement>>(props: T) => JSX.Element;
+    value?: Selection;
+    /**
+     * Minimum date to select
+     */
+    minDate?: Date | null;
+}
+export declare const DatePicker: React.FC<DatePickerProps>;
+export {};

package/lib-esm/DatePicker/DatePicker.js

@@ -0,0 +1,92 @@
+import React, { useRef, useState } from 'react';
+import { DatePickerAnchor } from './DatePickerAnchor';
+import { DatePickerProvider } from './useDatePicker';
+import { DatePickerOverlay } from './DatePickerOverlay';
+export const DatePicker = ({
+  anchorVariant,
+  anchorRef: externalAnchorRef,
+  confirmation,
+  confirmUnsavedClose,
+  compressedHeader,
+  dateFormat,
+  disableWeekends,
+  focusTrapSettings,
+  focusZoneSettings,
+  iconPlacement,
+  maxDate,
+  maxRangeSize,
+  maxSelections,
+  minDate,
+  onOpen: onOpenExternal,
+  onClose: onCloseExternal,
+  open,
+  overlayProps,
+  placeholder,
+  renderAnchor = null,
+  showInputPrompt,
+  value,
+  variant,
+  view,
+  weekStartsOn
+}) => {
+  const anchorRef = useRef(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const datePickerConfiguration = {
+    anchorVariant,
+    confirmation,
+    confirmUnsavedClose,
+    compressedHeader,
+    dateFormat,
+    disableWeekends,
+    iconPlacement,
+    maxDate: maxDate ? new Date(new Date(maxDate).toDateString()) : maxDate,
+    maxRangeSize,
+    maxSelections,
+    minDate: minDate ? new Date(new Date(minDate).toDateString()) : minDate,
+    placeholder,
+    showInputPrompt,
+    variant,
+    view,
+    weekStartsOn
+  };
+
+  const onOpen = gesture => {
+    setIsOpen(true);
+    onOpenExternal === null || onOpenExternal === void 0 ? void 0 : onOpenExternal(gesture);
+  };
+
+  const onClose = gesture => {
+    setIsOpen(false);
+    onCloseExternal === null || onCloseExternal === void 0 ? void 0 : onCloseExternal(gesture);
+  };
+
+  const toggleIsOpen = () => {
+    if (isOpen) {
+      setIsOpen(false);
+      onCloseExternal === null || onCloseExternal === void 0 ? void 0 : onCloseExternal('anchor-click');
+    } else {
+      setIsOpen(true);
+      onCloseExternal === null || onCloseExternal === void 0 ? void 0 : onCloseExternal('anchor-click');
+    }
+  };
+
+  return /*#__PURE__*/React.createElement(DatePickerProvider, {
+    configuration: datePickerConfiguration,
+    isOpen: isOpen,
+    value: value,
+    closePicker: () => setIsOpen(false)
+  }, /*#__PURE__*/React.createElement(DatePickerAnchor, {
+    ref: anchorRef,
+    onAction: toggleIsOpen
+  }), /*#__PURE__*/React.createElement(DatePickerOverlay, {
+    anchorRef: externalAnchorRef !== null && externalAnchorRef !== void 0 ? externalAnchorRef : anchorRef,
+    renderAnchor: renderAnchor,
+    open: open !== null && open !== void 0 ? open : isOpen,
+    onOpen: onOpen,
+    onClose: onClose,
+    overlayProps: overlayProps,
+    focusTrapSettings: focusTrapSettings,
+    focusZoneSettings: focusZoneSettings
+  }));
+};
+DatePicker.displayName = "DatePicker";

package/lib-esm/DatePicker/DatePickerAnchor.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export interface DatePickerAnchorProps {
+    onAction?: (event?: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;
+}
+export declare const DatePickerAnchor: React.ForwardRefExoticComponent<DatePickerAnchorProps & React.RefAttributes<HTMLDivElement>>;

package/lib-esm/DatePicker/DatePickerAnchor.js

@@ -0,0 +1,174 @@
+import { AlertIcon, CalendarIcon, CheckIcon } from '@primer/octicons-react';
+import styled from 'styled-components';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import Button, { ButtonInvisible } from '../Button';
+import Text from '../Text';
+import { get } from '../constants';
+import StyledOcticon from '../StyledOcticon';
+import useDatePicker from './useDatePicker';
+import TextInput from '../TextInput';
+import Box from '../Box';
+import { parseDate } from './dateParser';
+import { Tooltip } from '..';
+const DatePickerAnchorButton = styled(Button).withConfig({
+  displayName: "DatePickerAnchor__DatePickerAnchorButton",
+  componentId: "sc-8gpb9d-0"
+})(["align-items:center;display:flex;flex-direction:row;justify-content:space-between;max-width:350px;overflow:hidden;& ", " ~ svg{margin-left:", ";}& svg ~ ", "{margin-left:", ";}"], Text, get('space.2'), Text, get('space.2'));
+export const DatePickerAnchor = /*#__PURE__*/React.forwardRef(({
+  onAction
+}, ref) => {
+  const {
+    configuration: {
+      anchorVariant,
+      iconPlacement,
+      placeholder,
+      variant
+    },
+    disabled,
+    formattedDate,
+    inputDate,
+    onDateInput
+  } = useDatePicker();
+  const [inputValue, setInputValue] = useState(formattedDate);
+  const inputRef = useRef(null);
+  const [inputValid, setInputValid] = useState(true);
+  const [inputFocused, setInputFocused] = useState(false);
+  const keyPressHandler = useCallback(event => {
+    if (disabled) {
+      return;
+    }
+
+    if ([' ', 'Enter'].includes(event.key)) {
+      onAction === null || onAction === void 0 ? void 0 : onAction(event);
+    }
+  }, [disabled, onAction]);
+  const clickHandler = useCallback(event => {
+    if (disabled) {
+      return;
+    }
+
+    onAction === null || onAction === void 0 ? void 0 : onAction(event);
+  }, [disabled, onAction]);
+  useEffect(() => {
+    if (document.activeElement !== inputRef.current) {
+      setInputValue(formattedDate);
+    }
+  }, [formattedDate]);
+  const onInputChangeHandler = useCallback(e => {
+    const value = e.currentTarget.value;
+    setInputValue(value);
+
+    if (!value) {
+      return;
+    }
+
+    const parsedDate = parseDate(value, variant);
+    setInputValid(!!parsedDate);
+
+    if (parsedDate) {
+      onDateInput(parsedDate);
+    }
+  }, [onDateInput, variant]);
+
+  const onFocusHandler = () => {
+    setInputValue(inputDate);
+    setInputFocused(true);
+  };
+
+  const onBlurHandler = () => {
+    setInputValue(formattedDate);
+    setInputValid(true);
+    setInputFocused(false);
+  };
+
+  const inputSx = useMemo(() => {
+    let sxObject = {};
+
+    if (iconPlacement === 'start') {
+      sxObject = { ...sxObject,
+        pl: 5,
+        pr: 2
+      };
+    } else if (iconPlacement === 'end') {
+      sxObject = { ...sxObject,
+        pl: 2,
+        pr: 5
+      };
+    }
+
+    return sxObject;
+  }, [iconPlacement]);
+
+  if (anchorVariant === 'input') {
+    const calendarButton = side => /*#__PURE__*/React.createElement(ButtonInvisible, {
+      onClick: clickHandler,
+      sx: {
+        width: '32px',
+        px: '6px',
+        position: 'absolute',
+        [side]: '1px',
+        top: '1px',
+        bottom: '1px'
+      }
+    }, /*#__PURE__*/React.createElement(StyledOcticon, {
+      icon: CalendarIcon
+    }));
+
+    const iconSx = () => ({
+      position: 'absolute',
+      top: 0,
+      bottom: 0,
+      right: iconPlacement === 'end' ? '36px' : '10px',
+      display: 'flex',
+      alignItems: 'center'
+    });
+
+    return /*#__PURE__*/React.createElement(Box, {
+      ref: ref,
+      sx: {
+        position: 'relative',
+        display: 'flex'
+      }
+    }, iconPlacement === 'start' && calendarButton('left'), /*#__PURE__*/React.createElement(TextInput, {
+      ref: inputRef,
+      placeholder: placeholder,
+      value: inputValue,
+      onChange: onInputChangeHandler,
+      sx: inputSx,
+      onBlur: onBlurHandler,
+      onFocus: onFocusHandler
+    }), /*#__PURE__*/React.createElement(Box, {
+      sx: iconSx()
+    }, inputValid && inputFocused && /*#__PURE__*/React.createElement(StyledOcticon, {
+      icon: CheckIcon,
+      color: "success.emphasis"
+    }), !inputValid && /*#__PURE__*/React.createElement(Tooltip, {
+      direction: "s",
+      text: "Invalid entry. Please make sure you use the 'MM/DD/YYYY' format."
+    }, /*#__PURE__*/React.createElement(StyledOcticon, {
+      icon: AlertIcon,
+      color: "attention.emphasis"
+    }))), iconPlacement === 'end' && calendarButton('right'));
+  }
+
+  const calendarIcon = () => /*#__PURE__*/React.createElement(StyledOcticon, {
+    icon: CalendarIcon,
+    color: "fg.muted",
+    sx: {
+      my: '2px'
+    }
+  });
+
+  return /*#__PURE__*/React.createElement(Box, {
+    ref: ref
+  }, /*#__PURE__*/React.createElement(DatePickerAnchorButton, {
+    onClick: clickHandler,
+    onKeyPress: keyPressHandler,
+    "aria-label": formattedDate
+  }, iconPlacement === 'start' && calendarIcon(), anchorVariant !== 'icon-only' && /*#__PURE__*/React.createElement(Text, {
+    sx: {
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
+    }
+  }, formattedDate), iconPlacement === 'end' && calendarIcon()));
+});

package/lib-esm/DatePicker/DatePickerOverlay.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { AnchoredOverlayProps } from '../AnchoredOverlay';
+export declare const DatePickerOverlay: React.FC<AnchoredOverlayProps>;

package/lib-esm/DatePicker/DatePickerOverlay.js

@@ -0,0 +1,40 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from 'react';
+import useDatePicker from './useDatePicker';
+import { AnchoredOverlay } from '../AnchoredOverlay';
+import { DatePickerPanel } from './DatePickerPanel';
+export const DatePickerOverlay = ({
+  onClose,
+  ...rest
+}) => {
+  const {
+    dialogOpen,
+    onClose: onDatePickerClose,
+    setDialogOpen,
+    currentViewingDate
+  } = useDatePicker();
+
+  const onOverlayClose = async gesture => {
+    if (!dialogOpen) {
+      setDialogOpen(true);
+      await onDatePickerClose();
+      setDialogOpen(false);
+      onClose === null || onClose === void 0 ? void 0 : onClose(gesture);
+    }
+  };
+
+  return /*#__PURE__*/React.createElement(AnchoredOverlay, _extends({}, rest, {
+    onClose: onOverlayClose,
+    focusTrapSettings: {
+      restoreFocusOnCleanUp: true
+    },
+    focusZoneSettings: {
+      disabled: true
+    },
+    "aria-modal": "true",
+    "aria-labelledby": `${currentViewingDate.getMonth()} ${currentViewingDate.getFullYear()}`,
+    "aria-live": "polite"
+  }), /*#__PURE__*/React.createElement(DatePickerPanel, null));
+};
+DatePickerOverlay.displayName = "DatePickerOverlay";

package/lib-esm/DatePicker/DatePickerPanel.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const DatePickerPanel: () => JSX.Element;