@mackin.com/styleguide 9.11.4 → 9.12.0

package/index.d.ts

@@ -328,6 +328,8 @@ interface DateInputProps extends BaseProps$4 {
     max?: number;
     /** Whether to move the popover on collision with the parent's bounds.  Default is true. */
     reposition?: boolean;
+    /** If `true`, the paging buttons for the years will be shown.  Default is only the month pagers. */
+    pageYear?: boolean;
     onValueChange: (value: number | undefined) => void;
 }
 declare const DateInput: React.ForwardRefExoticComponent<DateInputProps & React.RefAttributes<HTMLInputElement>>;

package/index.esm.js

@@ -3,10 +3,10 @@ import React__default, { createContext, useContext, useEffect, useState, useRef,
 import { cx, css, keyframes, injectGlobal } from '@emotion/css';
 import { faCheckCircle, faCircle, faChevronDown, faChevronUp, faSquare, faTimesCircle } from '@fortawesome/pro-regular-svg-icons';
 import { faPlus, faTrashAlt, faSave, faCrow, faTimes, faSync, faCheckSquare } from '@fortawesome/pro-solid-svg-icons';
-import { faWifi, faWifiSlash, faBars, faSearch, faQuestionCircle, faNarwhal, faChevronRight, faChevronLeft, faCloudDownload, faCloudUpload, faCalendarAlt, faCopy, faPaste, faEyeSlash, faEye } from '@fortawesome/pro-light-svg-icons';
+import { faWifi, faWifiSlash, faBars, faSearch, faQuestionCircle, faNarwhal, faChevronRight, faChevronLeft, faCloudDownload, faCloudUpload, faChevronDoubleLeft, faChevronDoubleRight, faCalendarAlt, faCopy, faPaste, faEyeSlash, faEye } from '@fortawesome/pro-light-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { uniqueId, sumBy, orderBy, get } from 'lodash';
-import { getDaysInMonth, getDay, isSameMonth, isBefore, isAfter, isSameDay, format, endOfMonth, addMonths, startOfMonth, isExists } from 'date-fns';
+import { getDaysInMonth, getDay, isSameMonth, isBefore, isAfter, isSameDay, format, endOfYear, addYears, endOfMonth, addMonths, startOfMonth, startOfYear, isExists } from 'date-fns';
 import { createPortal } from 'react-dom';
 import { Popover as Popover$1, ArrowContainer } from 'react-tiny-popover';
 import { Link as Link$1 } from 'react-router-dom';
@@ -67,6 +67,8 @@ const ICONS = {
     unselected: faSquare,
     pagerLeft: faChevronLeft,
     pagerRight: faChevronRight,
+    pagerDoubleLeft: faChevronDoubleLeft,
+    pagerDoubleRight: faChevronDoubleRight,
     sortAsc: faChevronUp,
     sortDesc: faChevronDown,
     pickDate: faCalendarAlt,
@@ -2390,7 +2392,7 @@ const DateInput = React.forwardRef((props, ref) => {
         }
     }, [dateValue, showCalendar]);
     const popover = React.useRef(null);
-    const nativeProps = __rest(props, ["customError", "reposition", "onValueChange", "allowUpdateOnFocus"]);
+    const nativeProps = __rest(props, ["customError", "reposition", "onValueChange", "allowUpdateOnFocus", "pageYear"]);
     useIgnoreMount(() => {
         var _a;
         /*
@@ -2467,6 +2469,8 @@ const DateInput = React.forwardRef((props, ref) => {
                         justifyContent: 'space-between',
                         alignItems: 'center'
                     }) },
+                    props.pageYear && (React.createElement(Button, { disabled: !!props.min && isBefore(endOfYear(addYears(calendarDate, -1)), props.min), small: true, variant: "icon", onClick: () => setCalendarDate(addYears(calendarDate, -1)) },
+                        React.createElement(Icon, { id: "pagerDoubleLeft" }))),
                     React.createElement(Button, { disabled: !!props.min && isBefore(endOfMonth(addMonths(calendarDate, -1)), props.min), small: true, variant: "icon", onClick: () => setCalendarDate(addMonths(calendarDate, -1)) },
                         React.createElement(Icon, { id: "pagerLeft" })),
                     React.createElement(Text, { align: "center" },
@@ -2474,7 +2478,9 @@ const DateInput = React.forwardRef((props, ref) => {
                         " ",
                         calendarDate.getFullYear()),
                     React.createElement(Button, { disabled: !!props.max && isAfter(startOfMonth(addMonths(calendarDate, 1)), props.max), small: true, variant: "icon", onClick: () => setCalendarDate(addMonths(calendarDate, 1)) },
-                        React.createElement(Icon, { id: "pagerRight" }))), month: calendarDate.getMonth() + 1, year: calendarDate.getFullYear(), showCurrent: true, smallHeader: true, selectedValue: dateValue, cellSize: '2rem', min: props.min, max: props.max }))) }));
+                        React.createElement(Icon, { id: "pagerRight" })),
+                    props.pageYear && (React.createElement(Button, { disabled: !!props.max && isAfter(startOfYear(addYears(calendarDate, 1)), props.max), small: true, variant: "icon", onClick: () => setCalendarDate(addYears(calendarDate, 1)) },
+                        React.createElement(Icon, { id: "pagerDoubleRight" })))), month: calendarDate.getMonth() + 1, year: calendarDate.getFullYear(), showCurrent: true, smallHeader: true, selectedValue: dateValue, cellSize: '2rem', min: props.min, max: props.max }))) }));
 });
 const parseDateNumber = (rawValue) => {
     if (!rawValue) {

package/index.js

@@ -94,6 +94,8 @@ const ICONS = {
     unselected: proRegularSvgIcons.faSquare,
     pagerLeft: proLightSvgIcons.faChevronLeft,
     pagerRight: proLightSvgIcons.faChevronRight,
+    pagerDoubleLeft: proLightSvgIcons.faChevronDoubleLeft,
+    pagerDoubleRight: proLightSvgIcons.faChevronDoubleRight,
     sortAsc: proRegularSvgIcons.faChevronUp,
     sortDesc: proRegularSvgIcons.faChevronDown,
     pickDate: proLightSvgIcons.faCalendarAlt,
@@ -2417,7 +2419,7 @@ const DateInput = React__namespace.forwardRef((props, ref) => {
         }
     }, [dateValue, showCalendar]);
     const popover = React__namespace.useRef(null);
-    const nativeProps = __rest(props, ["customError", "reposition", "onValueChange", "allowUpdateOnFocus"]);
+    const nativeProps = __rest(props, ["customError", "reposition", "onValueChange", "allowUpdateOnFocus", "pageYear"]);
     useIgnoreMount(() => {
         var _a;
         /*
@@ -2494,6 +2496,8 @@ const DateInput = React__namespace.forwardRef((props, ref) => {
                         justifyContent: 'space-between',
                         alignItems: 'center'
                     }) },
+                    props.pageYear && (React__namespace.createElement(Button, { disabled: !!props.min && dateFns.isBefore(dateFns.endOfYear(dateFns.addYears(calendarDate, -1)), props.min), small: true, variant: "icon", onClick: () => setCalendarDate(dateFns.addYears(calendarDate, -1)) },
+                        React__namespace.createElement(Icon, { id: "pagerDoubleLeft" }))),
                     React__namespace.createElement(Button, { disabled: !!props.min && dateFns.isBefore(dateFns.endOfMonth(dateFns.addMonths(calendarDate, -1)), props.min), small: true, variant: "icon", onClick: () => setCalendarDate(dateFns.addMonths(calendarDate, -1)) },
                         React__namespace.createElement(Icon, { id: "pagerLeft" })),
                     React__namespace.createElement(Text, { align: "center" },
@@ -2501,7 +2505,9 @@ const DateInput = React__namespace.forwardRef((props, ref) => {
                         " ",
                         calendarDate.getFullYear()),
                     React__namespace.createElement(Button, { disabled: !!props.max && dateFns.isAfter(dateFns.startOfMonth(dateFns.addMonths(calendarDate, 1)), props.max), small: true, variant: "icon", onClick: () => setCalendarDate(dateFns.addMonths(calendarDate, 1)) },
-                        React__namespace.createElement(Icon, { id: "pagerRight" }))), month: calendarDate.getMonth() + 1, year: calendarDate.getFullYear(), showCurrent: true, smallHeader: true, selectedValue: dateValue, cellSize: '2rem', min: props.min, max: props.max }))) }));
+                        React__namespace.createElement(Icon, { id: "pagerRight" })),
+                    props.pageYear && (React__namespace.createElement(Button, { disabled: !!props.max && dateFns.isAfter(dateFns.startOfYear(dateFns.addYears(calendarDate, 1)), props.max), small: true, variant: "icon", onClick: () => setCalendarDate(dateFns.addYears(calendarDate, 1)) },
+                        React__namespace.createElement(Icon, { id: "pagerDoubleRight" })))), month: calendarDate.getMonth() + 1, year: calendarDate.getFullYear(), showCurrent: true, smallHeader: true, selectedValue: dateValue, cellSize: '2rem', min: props.min, max: props.max }))) }));
 });
 const parseDateNumber = (rawValue) => {
     if (!rawValue) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mackin.com/styleguide",
-    "version": "9.11.4",
+    "version": "9.12.0",
     "description": "",
     "main": "./index.js",
     "module": "./index.esm.js",