@primer/components 0.0.0-202192602912 → 0.0.0-20219266052

package/lib/DatePicker/Day.js

@@ -1,174 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.BlankDay = exports.Day = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _Box = _interopRequireDefault(require("../Box"));
-
-var _Text = _interopRequireDefault(require("../Text"));
-
-var _constants = require("../constants");
-
-var _useDatePicker = _interopRequireDefault(require("./useDatePicker"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-const DayBaseComponent = (0, _styledComponents.default)(_Box.default).withConfig({
-  displayName: "Day__DayBaseComponent",
-  componentId: "sc-1japneh-0"
-})(["align-content:center;display:flex;justify-content:center;min-width:38px;min-height:38px;padding:", ";"], (0, _constants.get)('space.1'));
-const states = {
-  blocked: {
-    background: (0, _constants.get)('colors.neutral.subtle'),
-    borderRadius: (0, _constants.get)('radii.2'),
-    color: (0, _constants.get)('colors.fg.subtle')
-  },
-  disabled: {
-    background: (0, _constants.get)('colors.canvas.primary'),
-    borderRadius: (0, _constants.get)('radii.2'),
-    color: (0, _constants.get)('colors.fg.subtle')
-  },
-  selected: {
-    default: {
-      background: (0, _constants.get)('colors.accent.emphasis'),
-      borderRadius: (0, _constants.get)('radii.2'),
-      color: (0, _constants.get)('colors.fg.onEmphasis')
-    },
-    start: {
-      background: (0, _constants.get)('colors.accent.emphasis'),
-      borderRadius: '4px 0 0 4px',
-      color: (0, _constants.get)('colors.fg.onEmphasis')
-    },
-    middle: {
-      background: (0, _constants.get)('colors.accent.subtle'),
-      borderRadius: '0',
-      color: (0, _constants.get)('colors.fg.default')
-    },
-    end: {
-      background: (0, _constants.get)('colors.accent.emphasis'),
-      borderRadius: '0 4px 4px 0',
-      color: (0, _constants.get)('colors.fg.onEmphasis')
-    }
-  },
-  default: {
-    normal: {
-      background: (0, _constants.get)('colors.canvas.primary'),
-      borderRadius: (0, _constants.get)('radii.2'),
-      color: (0, _constants.get)('colors.fg.default')
-    },
-    hover: {
-      background: (0, _constants.get)('colors.neutral.muted'),
-      borderRadius: (0, _constants.get)('radii.2'),
-      color: (0, _constants.get)('colors.fg.default')
-    },
-    pressed: {
-      background: (0, _constants.get)('colors.neutral.emphasis'),
-      borderRadius: (0, _constants.get)('radii.2'),
-      color: (0, _constants.get)('colors.fg.onEmphasis')
-    }
-  }
-};
-
-const getStateStyles = (props, prop, state) => {
-  const {
-    blocked,
-    disabled,
-    selected
-  } = props;
-
-  if (blocked) {
-    return states.blocked[prop];
-  } else if (disabled) {
-    return states.disabled[prop];
-  } else if (selected) {
-    switch (selected) {
-      case 'start':
-        return states.selected.start[prop];
-
-      case 'middle':
-        return states.selected.middle[prop];
-
-      case 'end':
-        return states.selected.end[prop];
-
-      default:
-        return states.selected.default[prop];
-    }
-  } else {
-    return states.default[state][prop];
-  }
-};
-
-const DayComponent = (0, _styledComponents.default)(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.default, props => props.textColor, (0, _constants.get)('fonts.mono'), (0, _constants.get)('fontSizes.0'), props => props.backgroundHover, _Text.default, props => props.textColorHover, props => props.backgroundPressed, (0, _constants.get)('shadows.shadow.medium'), _Text.default, props => props.textColorPressed);
-
-const Day = ({
-  date,
-  onAction
-}) => {
-  const {
-    onDayFocus,
-    onDayBlur,
-    onSelection,
-    disabled,
-    blocked,
-    selected
-  } = (0, _useDatePicker.default)(date);
-  const keyPressHandler = (0, _react.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 = (0, _react.useCallback)(event => {
-    if (disabled) {
-      return;
-    }
-
-    onSelection(date);
-    onAction === null || onAction === void 0 ? void 0 : onAction(date, event);
-  }, [disabled, onSelection, date, onAction]);
-  return /*#__PURE__*/_react.default.createElement(DayComponent, {
-    role: "button",
-    blocked: blocked,
-    disabled: disabled,
-    selected: selected,
-    onClick: clickHandler,
-    onMouseEnter: () => onDayFocus(date),
-    onFocus: () => onDayFocus(date),
-    onBlur: () => onDayBlur(date),
-    onKeyPress: keyPressHandler
-  }, /*#__PURE__*/_react.default.createElement(_Text.default, null, date.getDate()));
-};
-
-exports.Day = Day;
-Day.displayName = "Day";
-const BlankDay = (0, _styledComponents.default)(DayBaseComponent).withConfig({
-  displayName: "Day__BlankDay",
-  componentId: "sc-1japneh-2"
-})(["background-color:", ";"], (0, _constants.get)('colors.canvas.primary'));
-exports.BlankDay = BlankDay;

package/lib/DatePicker/Month.d.ts

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

package/lib/DatePicker/Month.js

@@ -1,107 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Month = void 0;
-
-var _dateFns = require("date-fns");
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _Box = _interopRequireDefault(require("../Box"));
-
-var _Text = _interopRequireDefault(require("../Text"));
-
-var _constants = require("../constants");
-
-var _Day = require("./Day");
-
-var _useDatePicker = _interopRequireDefault(require("./useDatePicker"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-const MonthComponent = (0, _styledComponents.default)(_Box.default).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 = (0, _styledComponents.default)(_Text.default).withConfig({
-  displayName: "Month__MonthTitle",
-  componentId: "l6j7o0-1"
-})(["font-size:", ";font-weight:", ";grid-area:month;justify-self:center;"], (0, _constants.get)('fontSizes.1'), (0, _constants.get)('fontWeights.bold'));
-const WeekdayHeader = (0, _styledComponents.default)(_Text.default).withConfig({
-  displayName: "Month__WeekdayHeader",
-  componentId: "l6j7o0-2"
-})(["color:", ";font-family:", ";font-size:", ";justify-self:center;padding:", " 0 ", ";"], (0, _constants.get)('colors.fg.subtle'), (0, _constants.get)('fonts.mono'), (0, _constants.get)('fontSizes.0'), (0, _constants.get)('space.3'), (0, _constants.get)('space.2'));
-
-const Month = ({
-  month,
-  year
-}) => {
-  const {
-    configuration
-  } = (0, _useDatePicker.default)();
-  const [selectedDay, setSelectedDay] = (0, _react.useState)(null);
-  const getTitle = (0, _react.useMemo)(() => `${(0, _dateFns.format)(new Date(year, month), 'MMMM yyyy')}`, [month, year]);
-  const weekdayHeaders = (0, _react.useMemo)(() => {
-    const now = new Date(year, month);
-    const weekOptions = {
-      weekStartsOn: configuration.weekStartsOn === 'Sunday' ? 0 : 1
-    };
-    return (0, _dateFns.eachDayOfInterval)({
-      start: (0, _dateFns.startOfWeek)(now, weekOptions),
-      end: (0, _dateFns.endOfWeek)(now, weekOptions)
-    }).map(d => /*#__PURE__*/_react.default.createElement(WeekdayHeader, {
-      key: `weekday-${d}-header`
-    }, (0, _dateFns.format)(d, 'EEEEEE')));
-  }, [configuration.weekStartsOn, month, year]);
-
-  const dayAction = date => {
-    setSelectedDay(date);
-  };
-
-  const dayComponents = (0, _react.useMemo)(() => {
-    const components = [];
-    const firstDay = new Date(year, month, 1);
-    const preBlanks = configuration.weekStartsOn === 'Sunday' ? firstDay.getDay() : (firstDay.getDay() + 6) % 7;
-
-    for (let i = 0; i < preBlanks; i++) {
-      components.push( /*#__PURE__*/_react.default.createElement(_Day.BlankDay, {
-        key: `month-pre-blank-${i}`
-      }));
-    }
-
-    for (let i = 1; i <= (0, _dateFns.getDaysInMonth)(firstDay); i++) {
-      const date = new Date(year, month, i);
-      components.push( /*#__PURE__*/_react.default.createElement(_Day.Day, {
-        key: `day-component-${date.toString()}`,
-        date: date,
-        selected: selectedDay ? (0, _dateFns.isEqual)(date, selectedDay) : false,
-        onAction: dayAction
-      }));
-    }
-
-    const lastDay = (0, _dateFns.lastDayOfMonth)(firstDay);
-    const postBlanks = configuration.weekStartsOn === 'Sunday' ? lastDay.getDay() : (lastDay.getDay() + 6) % 7;
-
-    for (let i = 6; i > postBlanks; i--) {
-      components.push( /*#__PURE__*/_react.default.createElement(_Day.BlankDay, {
-        key: `month-post-blank-${i}`
-      }));
-    }
-
-    return components;
-  }, [configuration.weekStartsOn, month, selectedDay, year]);
-  return /*#__PURE__*/_react.default.createElement(MonthComponent, {
-    role: "grid"
-  }, /*#__PURE__*/_react.default.createElement(MonthTitle, null, getTitle), weekdayHeaders, dayComponents);
-};
-
-exports.Month = Month;
-Month.displayName = "Month";

package/lib/DatePicker/index.d.ts

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

package/lib/DatePicker/index.js

@@ -1,13 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "DatePicker", {
-  enumerable: true,
-  get: function () {
-    return _DatePicker.DatePicker;
-  }
-});
-
-var _DatePicker = require("./DatePicker");

package/lib/DatePicker/useDatePicker.d.ts

@@ -1,83 +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;
-    contiguousSelection?: boolean;
-    dateFormat?: DateFormat;
-    dimWeekends?: boolean;
-    iconPlacement?: 'start' | 'end' | 'none';
-    minDate?: Date;
-    maxDate?: 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;
-    onSelection: (date: Date) => void;
-    onDayFocus: (date: Date) => void;
-    onDayBlur: (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;
-    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;
-    onSelection: (date: Date) => void;
-    onDayFocus: (date: Date) => void;
-    onDayBlur: (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>;