@primer/components 0.0.0-2021104155617 → 0.0.0-2021104225742

package/lib-esm/DatePicker/Day.js

@@ -1,182 +0,0 @@
-import React, { useCallback, useEffect, useMemo, useRef } from 'react';
-import styled from 'styled-components';
-import Box from '../Box';
-import Text from '../Text';
-import { get } from '../constants';
-import useDatePicker from './useDatePicker';
-import { format } from 'date-fns';
-const DayBaseComponent = styled(Box).withConfig({
-  displayName: "Day__DayBaseComponent",
-  componentId: "sc-1japneh-0"
-})(["align-content:center;display:flex;justify-content:center;min-width:38px;min-height:38px;padding:", ";"], get('space.1'));
-const states = {
-  blocked: {
-    background: get('colors.neutral.subtle'),
-    borderRadius: get('radii.2'),
-    color: get('colors.fg.subtle')
-  },
-  disabled: {
-    background: get('colors.canvas.primary'),
-    borderRadius: get('radii.2'),
-    color: get('colors.fg.subtle')
-  },
-  selected: {
-    default: {
-      background: get('colors.accent.emphasis'),
-      borderRadius: get('radii.2'),
-      color: get('colors.fg.onEmphasis'),
-      todayColor: get('colors.fg.onEmphasis')
-    },
-    start: {
-      background: get('colors.accent.emphasis'),
-      borderRadius: '4px 0 0 4px',
-      color: get('colors.fg.onEmphasis'),
-      todayColor: get('colors.fg.onEmphasis')
-    },
-    middle: {
-      background: get('colors.accent.subtle'),
-      borderRadius: '0',
-      color: get('colors.fg.default'),
-      todayColor: get('colors.accent.fg')
-    },
-    end: {
-      background: get('colors.accent.emphasis'),
-      borderRadius: '0 4px 4px 0',
-      color: get('colors.fg.onEmphasis'),
-      todayColor: get('colors.fg.onEmphasis')
-    }
-  },
-  default: {
-    normal: {
-      background: get('colors.canvas.primary'),
-      borderRadius: get('radii.2'),
-      color: get('colors.fg.default'),
-      todayColor: get('colors.accent.fg')
-    },
-    hover: {
-      background: get('colors.neutral.muted'),
-      borderRadius: get('radii.2'),
-      color: get('colors.fg.default'),
-      todayColor: get('colors.accent.fg')
-    },
-    pressed: {
-      background: get('colors.neutral.emphasis'),
-      borderRadius: get('radii.2'),
-      color: get('colors.fg.onEmphasis'),
-      todayColor: get('colors.fg.onEmphasis')
-    }
-  }
-};
-
-const getStateStyles = (props, prop, state) => {
-  const {
-    blocked,
-    disabled,
-    selected,
-    today
-  } = props;
-
-  if (selected) {
-    switch (selected) {
-      case 'start':
-        return today && prop === 'color' ? states.selected.start['todayColor'] : states.selected.start[prop];
-
-      case 'middle':
-        return today && prop === 'color' ? states.selected.middle['todayColor'] : states.selected.middle[prop];
-
-      case 'end':
-        return today && prop === 'color' ? states.selected.end['todayColor'] : states.selected.end[prop];
-
-      default:
-        return today && prop === 'color' ? states.selected.default['todayColor'] : states.selected.default[prop];
-    }
-  } else if (blocked) {
-    return states.blocked[prop];
-  } else if (disabled) {
-    return states.disabled[prop];
-  } else {
-    return today && prop === 'color' ? states.default[state]['todayColor'] : states.default[state][prop];
-  }
-};
-
-const DayComponent = styled(DayBaseComponent).attrs(props => ({
-  background: getStateStyles(props, 'background', 'normal'),
-  borderRadius: getStateStyles(props, 'borderRadius', 'normal'),
-  textColor: getStateStyles(props, 'color', 'normal'),
-  backgroundHover: getStateStyles(props, 'background', 'hover'),
-  textColorHover: getStateStyles(props, 'color', 'hover'),
-  backgroundPressed: getStateStyles(props, 'background', 'pressed'),
-  textColorPressed: getStateStyles(props, 'color', 'pressed')
-})).withConfig({
-  displayName: "Day__DayComponent",
-  componentId: "sc-1japneh-1"
-})(["background-color:", ";border-radius:", ";cursor:", ";opacity:", ";transition:0.1s background-color ease;& ", "{align-self:center;color:", ";display:flex;font-family:", ";font-size:", ";justify-content:center;justify-self:center;padding:4px 0;position:relative;transition:0.1s color ease;user-select:none;width:16px;&:after{content:'';display:", ";position:absolute;bottom:0;background:", ";width:100%;height:2px;border-radius:1px;}}&:hover,&:focus{background-color:", ";transition:0.05s background-color ease;& ", "{color:", ";transition:0.1s color ease;}}&:active{background-color:", ";box-shadow:inset ", ";transition:0.1s background-color ease,0.1s box-shadow ease,0.1s color ease;& ", "{color:", ";transition:0.1s color ease;}}"], props => props.background, props => props.borderRadius, props => props.disabled ? 'default' : 'pointer', props => props.disabled ? 0.5 : 1, Text, props => props.textColor, get('fonts.mono'), get('fontSizes.0'), props => props.today ? 'block' : 'none', props => props.selected && props.selected !== 'middle' ? get('colors.fg.onEmphasis')(props) : get('colors.accent.emphasis')(props), props => props.backgroundHover, Text, props => props.textColorHover, props => props.backgroundPressed, get('shadows.shadow.medium'), Text, props => props.textColorPressed);
-export const Day = ({
-  date,
-  onAction
-}) => {
-  const {
-    onDayFocus,
-    onSelection,
-    disabled,
-    blocked,
-    focused,
-    selected,
-    today
-  } = useDatePicker(date);
-  const dayRef = useRef(null);
-  useEffect(() => {
-    if (focused) {
-      setTimeout(() => {
-        var _dayRef$current;
-
-        return (_dayRef$current = dayRef.current) === null || _dayRef$current === void 0 ? void 0 : _dayRef$current.focus();
-      }, 0);
-    }
-  }, [focused]);
-  const keyPressHandler = useCallback(event => {
-    if (disabled) {
-      return;
-    }
-
-    if ([' ', 'Enter'].includes(event.key)) {
-      onSelection(date);
-      onAction === null || onAction === void 0 ? void 0 : onAction(date, event);
-    }
-  }, [disabled, onSelection, onAction, date]);
-  const clickHandler = useCallback(event => {
-    if (disabled) {
-      return;
-    }
-
-    onSelection(date);
-    onAction === null || onAction === void 0 ? void 0 : onAction(date, event);
-  }, [disabled, onSelection, date, onAction]);
-  const todayStyles = useMemo(() => today ? {
-    fontWeight: 'bold'
-  } : {}, [today]);
-  return /*#__PURE__*/React.createElement(DayComponent, {
-    ref: dayRef,
-    role: "gridcell",
-    "aria-disabled": disabled,
-    "aria-selected": selected !== false,
-    blocked: blocked,
-    disabled: disabled,
-    focused: focused,
-    selected: selected,
-    today: today,
-    onClick: clickHandler,
-    onMouseEnter: () => onDayFocus(date),
-    onFocus: () => onDayFocus(date),
-    onKeyPress: keyPressHandler,
-    tabIndex: -1,
-    "data-date": format(date, 'MM/dd/yyyy')
-  }, /*#__PURE__*/React.createElement(Text, {
-    sx: todayStyles
-  }, date.getDate()));
-};
-Day.displayName = "Day";
-export const BlankDay = styled(DayBaseComponent).withConfig({
-  displayName: "Day__BlankDay",
-  componentId: "sc-1japneh-2"
-})(["background-color:", ";"], get('colors.canvas.primary'));

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

@@ -1,8 +0,0 @@
-import React from 'react';
-import { FontSizeProps } from 'styled-system';
-import { SystemCommonProps, SystemLayoutProps } from '../constants';
-import { SxProp } from '../sx';
-export interface MonthProps extends FontSizeProps, SystemCommonProps, SxProp, SystemLayoutProps {
-    date: Date;
-}
-export declare const Month: React.FC<MonthProps>;

package/lib-esm/DatePicker/Month.js

@@ -1,98 +0,0 @@
-import { format, isEqual, lastDayOfMonth, getDaysInMonth, eachDayOfInterval, startOfWeek, endOfWeek } from 'date-fns';
-import React, { useMemo, useState } from 'react';
-import styled from 'styled-components';
-import Box from '../Box';
-import Text from '../Text';
-import { get } from '../constants';
-import { BlankDay, Day } from './Day';
-import useDatePicker from './useDatePicker';
-const weekdayEnum = {
-  Sunday: 0,
-  Monday: 1,
-  Tuesday: 2,
-  Wednesday: 3,
-  Thursday: 4,
-  Friday: 5,
-  Saturday: 6
-};
-const MonthComponent = styled(Box).withConfig({
-  displayName: "Month__MonthComponent",
-  componentId: "l6j7o0-0"
-})(["display:grid;grid-auto-rows:min-content;grid-template-columns:repeat(1fr,7);grid-template-rows:1fr;gap:0px 0px;grid-template-areas:'month month month month month month month' 'sunday monday tuesday wednesday thursday friday saturday';justify-items:stretch;align-items:stretch;"]);
-const MonthTitle = styled(Text).withConfig({
-  displayName: "Month__MonthTitle",
-  componentId: "l6j7o0-1"
-})(["font-size:", ";font-weight:", ";grid-area:month;height:", ";justify-self:center;"], get('fontSizes.1'), get('fontWeights.bold'), get('space.4'));
-const WeekdayHeader = styled(Text).withConfig({
-  displayName: "Month__WeekdayHeader",
-  componentId: "l6j7o0-2"
-})(["color:", ";font-family:", ";font-size:", ";justify-self:center;padding:", " 0 ", ";"], get('colors.fg.subtle'), get('fonts.mono'), get('fontSizes.0'), get('space.3'), get('space.2'));
-export const Month = ({
-  date
-}) => {
-  const {
-    configuration
-  } = useDatePicker();
-  const [selectedDay, setSelectedDay] = useState(null);
-  const getTitle = useMemo(() => `${format(new Date(date), 'MMMM yyyy')}`, [date]);
-  const weekdayHeaders = useMemo(() => {
-    var _configuration$weekSt;
-
-    const now = new Date(date);
-    const weekOptions = {
-      weekStartsOn: weekdayEnum[(_configuration$weekSt = configuration.weekStartsOn) !== null && _configuration$weekSt !== void 0 ? _configuration$weekSt : 'Sunday']
-    };
-    return eachDayOfInterval({
-      start: startOfWeek(now, weekOptions),
-      end: endOfWeek(now, weekOptions)
-    }).map(d => /*#__PURE__*/React.createElement(WeekdayHeader, {
-      key: `weekday-${d}-header`
-    }, format(d, 'EEEEEE')));
-  }, [configuration.weekStartsOn, date]);
-
-  const dayAction = day => {
-    setSelectedDay(day);
-  };
-
-  const dayComponents = useMemo(() => {
-    var _configuration$weekSt2, _configuration$weekSt3;
-
-    const components = [];
-    const firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
-    const preBlanks = (firstDay.getDay() + (7 - weekdayEnum[(_configuration$weekSt2 = configuration.weekStartsOn) !== null && _configuration$weekSt2 !== void 0 ? _configuration$weekSt2 : 'Sunday'])) % 7;
-
-    for (let i = 0; i < preBlanks; i++) {
-      components.push( /*#__PURE__*/React.createElement(BlankDay, {
-        key: `month-pre-blank-${i}`
-      }));
-    }
-
-    for (let i = 1; i <= getDaysInMonth(firstDay); i++) {
-      const day = new Date(date.getFullYear(), date.getMonth(), i);
-      components.push( /*#__PURE__*/React.createElement(Day, {
-        key: `day-component-${day.toString()}`,
-        date: day,
-        selected: selectedDay ? isEqual(day, selectedDay) : false,
-        onAction: dayAction
-      }));
-    }
-
-    const lastDay = lastDayOfMonth(firstDay);
-    const postBlanks = (lastDay.getDay() + (7 - weekdayEnum[(_configuration$weekSt3 = configuration.weekStartsOn) !== null && _configuration$weekSt3 !== void 0 ? _configuration$weekSt3 : 'Sunday'])) % 7;
-
-    for (let i = 6; i > postBlanks; i--) {
-      components.push( /*#__PURE__*/React.createElement(BlankDay, {
-        key: `month-post-blank-${i}`
-      }));
-    }
-
-    return components;
-  }, [configuration.weekStartsOn, date, selectedDay]);
-  return /*#__PURE__*/React.createElement(MonthComponent, {
-    role: "grid",
-    "aria-labelledby": `${date.getMonth()} ${date.getFullYear()}`
-  }, /*#__PURE__*/React.createElement(MonthTitle, {
-    "aria-live": "polite"
-  }, !configuration.compressedHeader ? getTitle : ''), weekdayHeaders, dayComponents);
-};
-Month.displayName = "Month";

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

@@ -1,12 +0,0 @@
-import { AnchorVariant, Selection, SelectionVariant } from './useDatePicker';
-export declare const parseDate: (dateString: string, variant?: SelectionVariant) => Selection;
-declare type FormatDateOptions = {
-    selection?: Selection;
-    anchorVariant?: AnchorVariant;
-    dateFormat?: string;
-    placeholder?: string;
-    rawFormat?: boolean;
-    variant?: SelectionVariant;
-};
-export declare const formatDate: ({ selection, dateFormat, placeholder, rawFormat, variant }: FormatDateOptions) => string;
-export {};

package/lib-esm/DatePicker/dateParser.js

@@ -1,179 +0,0 @@
-import { eachDayOfInterval, format, isBefore } from 'date-fns';
-import { isRangeSelection } from './useDatePicker';
-const INVALID_DATE = 'Invalid Date';
-const DATE_REGEX = new RegExp(/(\d{1,2}[-/.]\d{1,2}[-/.](?:\d{2}){1,2})(?:\s?-\s?)?(\d{1,2}[-/.]\d{1,2}[-/.](?:\d{2}){1,2})?/g);
-
-const sanitizeDate = dateString => {
-  return dateString.replaceAll('.', '/').replaceAll('-', '/');
-};
-
-export const parseDate = (dateString, variant = 'single') => {
-  const dateItems = dateString.matchAll(DATE_REGEX);
-  const parsedDateItems = []; // Determine Format
-
-  for (const d of dateItems) {
-    const tempD1 = new Date(sanitizeDate(d[1]));
-    const tempD2 = d[2] ? new Date(sanitizeDate(d[2])) : null;
-
-    if (tempD2) {
-      // Range
-      if (tempD1.toString() !== INVALID_DATE && tempD2.toString() !== INVALID_DATE) {
-        parsedDateItems.push(isBefore(tempD1, tempD2) ? {
-          from: tempD1,
-          to: tempD2
-        } : {
-          from: tempD2,
-          to: tempD1
-        });
-      } else if (tempD1.toString() !== INVALID_DATE) {
-        parsedDateItems.push(tempD1);
-      } else if (tempD2.toString() !== INVALID_DATE) {
-        parsedDateItems.push(tempD2);
-      }
-    } else {
-      if (tempD1.toString() !== INVALID_DATE) {
-        parsedDateItems.push(tempD1);
-      }
-    }
-  }
-
-  if (parsedDateItems.length === 0) {
-    // No Valid Dates
-    return null;
-  } // Cast Format based on variant
-
-
-  switch (variant) {
-    case 'single':
-      {
-        return parsedDateItems[0];
-      }
-
-    case 'multi':
-      {
-        const expandedParsedItems = [];
-
-        for (const item of parsedDateItems) {
-          if (isRangeSelection(item)) {
-            if (item.to) {
-              eachDayOfInterval({
-                start: item.from,
-                end: item.to
-              }).map(d => expandedParsedItems.push(d));
-            } else {
-              expandedParsedItems.push(item.from);
-            }
-          } else {
-            if (item) {
-              if (Array.isArray(item)) {
-                item.map(d => expandedParsedItems.push(d));
-              } else {
-                expandedParsedItems.push(item);
-              }
-            }
-          }
-        }
-
-        return expandedParsedItems;
-      }
-
-    case 'range':
-      {
-        return parsedDateItems.filter(d => isRangeSelection(d))[0];
-      }
-
-    default:
-      {
-        return parsedDateItems[0];
-      }
-  }
-};
-export const formatDate = ({
-  selection,
-  dateFormat = 'short',
-  placeholder = 'Choose Date',
-  rawFormat = false,
-  variant = 'single'
-}) => {
-  if (!selection) {
-    if (rawFormat) return '';
-    return placeholder;
-  }
-
-  let template = 'MMM d';
-
-  if (!rawFormat && dateFormat) {
-    switch (dateFormat) {
-      case 'short':
-        template = 'MMM d';
-        break;
-
-      case 'long':
-        template = 'MMM d, yyyy';
-        break;
-
-      default:
-        template = dateFormat;
-        break;
-    }
-  } else {
-    template = 'MM/dd/yyyy';
-  }
-
-  switch (variant) {
-    case 'single':
-      {
-        if (selection instanceof Date) {
-          return format(selection, template);
-        } else if (Array.isArray(selection)) {
-          return format(selection[0], template);
-        } else if (isRangeSelection(selection)) {
-          return format(selection.from, template);
-        } else {
-          return 'Invalid Selection';
-        }
-      }
-
-    case 'multi':
-      {
-        if (Array.isArray(selection)) {
-          if (selection.length > 3 && !rawFormat) return `${selection.length} Selected`;
-          if (selection.length === 0 && !rawFormat) return placeholder;
-          const formatted = selection.map(d => format(d, template)).join(', ');
-          return formatted;
-        } else if (selection instanceof Date) {
-          return [selection].map(d => format(d, template)).join(', ');
-        } else if (isRangeSelection(selection)) {
-          return [selection.to, selection.from].map(d => d ? format(d, template) : '').join(', ');
-        } else {
-          return 'Invalid Selection';
-        }
-      }
-
-    case 'range':
-      {
-        if (isRangeSelection(selection)) {
-          return Object.entries(selection).map(([_, date]) => date ? format(date, template) : '').join(' - ');
-        } else if (selection instanceof Date) {
-          return Object.entries({
-            from: selection,
-            to: null
-          }).map(([_, date]) => date ? format(date, template) : '').join(' - ');
-        } else if (Array.isArray(selection)) {
-          return Object.entries({
-            from: selection[0],
-            to: selection[1]
-          }) // to date can still be null
-          // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-          .map(([_, date]) => date ? format(date, template) : '').join(' - ');
-        } else {
-          return 'Invalid Selection';
-        }
-      }
-
-    default:
-      {
-        return 'Invalid Configuration';
-      }
-  }
-};

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

@@ -1,2 +0,0 @@
-export { DatePicker } from './DatePicker';
-export type { DatePickerProps } from './DatePicker';

package/lib-esm/DatePicker/index.js

@@ -1 +0,0 @@
-export { DatePicker } from './DatePicker';

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

@@ -1,107 +0,0 @@
-import React from 'react';
-export declare type AnchorVariant = 'input' | 'button' | 'icon-only';
-export declare type DateFormat = 'short' | 'long' | string;
-export declare type SelectionVariant = 'single' | 'multi' | 'range';
-export interface DatePickerConfiguration {
-    anchorVariant?: AnchorVariant;
-    blockedDates?: Array<Date>;
-    confirmation?: boolean;
-    confirmUnsavedClose?: boolean;
-    compressedHeader?: boolean;
-    dateFormat?: DateFormat;
-    disableWeekends?: boolean;
-    iconPlacement?: 'start' | 'end' | 'none';
-    maxDate?: Date | null;
-    maxSelections?: number;
-    maxRangeSize?: number;
-    minDate?: Date | null;
-    placeholder?: string;
-    rangeIncrement?: number;
-    showInputPrompt?: boolean;
-    variant?: SelectionVariant;
-    view?: '1-month' | '2-month';
-    weekStartsOn?: 'Sunday' | 'Monday' | 'Tuesday' | 'Wednesday' | 'Thursday' | 'Friday' | 'Saturday';
-}
-export declare type RangeSelection = {
-    from: Date;
-    to: Date | null;
-};
-export declare type StringRangeSelection = {
-    from: string;
-    to: string;
-};
-export interface DatePickerContext {
-    disabled?: boolean;
-    configuration: DatePickerConfiguration;
-    currentViewingDate: Date;
-    dialogOpen: boolean;
-    focusDate: Date;
-    formattedDate: string;
-    goToMonth: (date: Date) => void;
-    inputDate: string;
-    hoverRange?: RangeSelection | null;
-    nextMonth: () => void;
-    onClose: () => void;
-    onDateInput: (updatedSelection: Selection) => void;
-    onDayFocus: (date: Date) => void;
-    onSelection: (date: Date) => void;
-    previousMonth: () => void;
-    revertValue: () => void;
-    saveValue: (selection?: Selection) => void;
-    selection?: Selection;
-    selectionActive?: boolean;
-    setFocusDate: React.Dispatch<React.SetStateAction<Date>>;
-    setHoverRange: React.Dispatch<React.SetStateAction<RangeSelection | null>>;
-    softSelection?: Partial<RangeSelection> | null;
-    setDialogOpen: React.Dispatch<React.SetStateAction<boolean>>;
-    viewMode: '1-month' | '2-month';
-}
-export declare type Selection = Date | Array<Date> | RangeSelection | null;
-export declare type StringSelection = string | Array<string> | {
-    to: string;
-    from: string;
-} | null;
-export declare type DaySelection = boolean | 'start' | 'middle' | 'end';
-declare const useDatePicker: (date?: Date | undefined) => {
-    blocked: boolean | undefined;
-    disabled: boolean;
-    focused: boolean;
-    selected: DaySelection;
-    today: boolean;
-    configuration: DatePickerConfiguration;
-    currentViewingDate: Date;
-    dialogOpen: boolean;
-    focusDate: Date;
-    formattedDate: string;
-    goToMonth: (date: Date) => void;
-    inputDate: string;
-    hoverRange?: RangeSelection | null | undefined;
-    nextMonth: () => void;
-    onClose: () => void;
-    onDateInput: (updatedSelection: Selection) => void;
-    onDayFocus: (date: Date) => void;
-    onSelection: (date: Date) => void;
-    previousMonth: () => void;
-    revertValue: () => void;
-    saveValue: (selection?: Selection | undefined) => void;
-    selection?: Selection | undefined;
-    selectionActive?: boolean | undefined;
-    setFocusDate: React.Dispatch<React.SetStateAction<Date>>;
-    setHoverRange: React.Dispatch<React.SetStateAction<RangeSelection | null>>;
-    softSelection?: Partial<RangeSelection> | null | undefined;
-    setDialogOpen: React.Dispatch<React.SetStateAction<boolean>>;
-    viewMode: '1-month' | '2-month';
-};
-export default useDatePicker;
-export interface DatePickerProviderProps {
-    closePicker?: () => void;
-    configuration?: DatePickerConfiguration;
-    isOpen?: boolean;
-    value?: Selection | StringSelection;
-}
-export declare function isSingleSelection(selection: Selection): selection is Date;
-export declare function isMultiSelection(selection: Selection | StringSelection): selection is Array<Date> | Array<string>;
-export declare function isRangeSelection(selection: Selection | StringSelection): selection is RangeSelection | StringRangeSelection;
-export declare function isStringRangeSelection(selection: StringSelection): selection is StringRangeSelection;
-export declare const normalizeDate: (date: Date | string) => Date;
-export declare const DatePickerProvider: React.FC<DatePickerProviderProps>;