@primer/components 0.0.0-2021927173554 → 0.0.0-2021927175656

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { FontSizeProps } from 'styled-system';
+import { SystemCommonProps, SystemLayoutProps } from '../constants';
+import { SxProp } from '../sx';
+import { DaySelection } from './useDatePicker';
+export declare type DayProps = {
+    blocked?: boolean;
+    disabled?: boolean;
+    onAction?: (date: Date, event?: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;
+    selected?: DaySelection;
+    date: Date;
+} & FontSizeProps & SystemCommonProps & SxProp & SystemLayoutProps;
+export declare const Day: React.FC<DayProps>;
+export declare const BlankDay: import("styled-components").StyledComponent<"div", any, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").GridProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & SxProp, never>;

package/lib-esm/DatePicker/Day.js

@@ -0,0 +1,169 @@
+import React, { useCallback, useMemo } from 'react';
+import styled from 'styled-components';
+import Box from '../Box';
+import Text from '../Text';
+import { get } from '../constants';
+import useDatePicker from './useDatePicker';
+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.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.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 (blocked) {
+    return states.blocked[prop];
+  } else if (disabled) {
+    return states.disabled[prop];
+  } else 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 {
+    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:", ";transition:0.1s background-color ease;& ", "{align-self:center;color:", ";display:flex;font-family:", ";font-size:", ";justify-self:center;user-select:none;transition:0.1s color ease;}&:hover{background-color:", ";cursor:pointer;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, Text, props => props.textColor, get('fonts.mono'), get('fontSizes.0'), 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,
+    onDayBlur,
+    onSelection,
+    disabled,
+    blocked,
+    selected,
+    today
+  } = useDatePicker(date);
+  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 ? {
+    border: '2px solid',
+    padding: '4px 6px',
+    borderRadius: '16px',
+    fontWeight: 'bold'
+  } : {}, [today]);
+  return /*#__PURE__*/React.createElement(DayComponent, {
+    role: "button",
+    blocked: blocked,
+    disabled: disabled,
+    selected: selected,
+    today: today,
+    onClick: clickHandler,
+    onMouseEnter: () => onDayFocus(date),
+    onFocus: () => onDayFocus(date),
+    onBlur: () => onDayBlur(date),
+    onKeyPress: keyPressHandler
+  }, /*#__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

@@ -0,0 +1,9 @@
+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 {
+    month: number;
+    year: number;
+}
+export declare const Month: React.FC<MonthProps>;

package/lib-esm/DatePicker/Month.js

@@ -0,0 +1,96 @@
+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;justify-self:center;"], get('fontSizes.1'), get('fontWeights.bold'));
+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 = ({
+  month,
+  year
+}) => {
+  const {
+    configuration
+  } = useDatePicker();
+  const [selectedDay, setSelectedDay] = useState(null);
+  const getTitle = useMemo(() => `${format(new Date(year, month), 'MMMM yyyy')}`, [month, year]);
+  const weekdayHeaders = useMemo(() => {
+    var _configuration$weekSt;
+
+    const now = new Date(year, month);
+    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, month, year]);
+
+  const dayAction = date => {
+    setSelectedDay(date);
+  };
+
+  const dayComponents = useMemo(() => {
+    var _configuration$weekSt2, _configuration$weekSt3;
+
+    const components = [];
+    const firstDay = new Date(year, month, 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 date = new Date(year, month, i);
+      components.push( /*#__PURE__*/React.createElement(Day, {
+        key: `day-component-${date.toString()}`,
+        date: date,
+        selected: selectedDay ? isEqual(date, 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, month, selectedDay, year]);
+  return /*#__PURE__*/React.createElement(MonthComponent, {
+    role: "grid"
+  }, /*#__PURE__*/React.createElement(MonthTitle, null, getTitle), weekdayHeaders, dayComponents);
+};
+Month.displayName = "Month";

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

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

package/lib-esm/DatePicker/index.js

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

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

@@ -0,0 +1,88 @@
+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;
+    contiguousSelection?: boolean;
+    dateFormat?: DateFormat;
+    dimWeekends?: boolean;
+    iconPlacement?: 'start' | 'end' | 'none';
+    maxDate?: Date;
+    maxSelections?: number;
+    maxRange?: number;
+    minDate?: Date;
+    placeholder?: string;
+    rangeIncrement?: number;
+    selection?: 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;
+    goToMonth: (date: Date) => void;
+    hoverRange?: RangeSelection | null;
+    selection?: Selection;
+    softSelection?: Partial<RangeSelection> | null;
+    selectionActive?: boolean;
+    formattedDate: string;
+    nextMonth: () => void;
+    onDateInput: (updatedSelection: Selection) => void;
+    onDayFocus: (date: Date) => void;
+    onDayBlur: (date: Date) => void;
+    onSelection: (date: Date) => void;
+    previousMonth: () => void;
+    revertValue: () => void;
+    saveValue: (selection?: Selection) => void;
+}
+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;
+    selected: DaySelection;
+    today: boolean;
+    configuration: DatePickerConfiguration;
+    currentViewingDate: Date;
+    goToMonth: (date: Date) => void;
+    hoverRange?: RangeSelection | null | undefined;
+    selection?: Selection | undefined;
+    softSelection?: Partial<RangeSelection> | null | undefined;
+    selectionActive?: boolean | undefined;
+    formattedDate: string;
+    nextMonth: () => void;
+    onDateInput: (updatedSelection: Selection) => void;
+    onDayFocus: (date: Date) => void;
+    onDayBlur: (date: Date) => void;
+    onSelection: (date: Date) => void;
+    previousMonth: () => void;
+    revertValue: () => void;
+    saveValue: (selection?: Selection | undefined) => void;
+};
+export default useDatePicker;
+export interface DatePickerProviderProps {
+    closePicker?: () => void;
+    configuration?: DatePickerConfiguration;
+    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 DatePickerProvider: React.FC<DatePickerProviderProps>;