@conveyorhq/arrow-ds 1.40.1 → 1.43.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@conveyorhq/arrow-ds",
   "author": "Conveyor",
   "license": "MIT",
-  "version": "1.40.1",
+  "version": "1.43.0",
   "description": "Arrow Design System",
   "repository": "https://github.com/conveyor/arrow-ds",
   "publishConfig": {

package/public/components/DatePicker/DatePicker.js

@@ -42,10 +42,12 @@ exports.DatePickerInput = react_1.forwardRef((props, ref) => (react_1.default.cr
 const renderDayContents = (day) => {
     return (react_1.default.createElement(Text_1.Text, { as: "span", className: cn({ e: "day-text" }) }, day));
 };
+const CustomHeaderButtonNext = ({ onClick, disabled }) => (react_1.default.createElement(Button_1.Button, { className: "text-h5", icon: Icon_1.ICON_TYPE.CARET_RIGHT, variant: Button_1.BUTTON_VARIANT.MINIMAL, onClick: onClick, disabled: disabled }));
+const CustomHeaderButtonPrev = ({ onClick, disabled }) => (react_1.default.createElement(Button_1.Button, { className: "text-h5", icon: Icon_1.ICON_TYPE.CARET_LEFT, variant: Button_1.BUTTON_VARIANT.MINIMAL, onClick: onClick, disabled: disabled }));
 const CustomHeaderButtons = ({ decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled, }) => (react_1.default.createElement(Flex_1.Flex, { className: cn({ e: "month-btns-wrapper" }) },
-    react_1.default.createElement(Button_1.Button, { icon: Icon_1.ICON_TYPE.CHEVRON_LEFT, variant: Button_1.BUTTON_VARIANT.SECONDARY, onClick: decreaseMonth, disabled: prevMonthButtonDisabled }),
-    react_1.default.createElement(Button_1.Button, { icon: Icon_1.ICON_TYPE.CHEVRON_RIGHT, variant: Button_1.BUTTON_VARIANT.SECONDARY, onClick: increaseMonth, disabled: nextMonthButtonDisabled })));
-const CustomHeader = ({ date, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled, monthsShown, setHeaderProps, }) => {
+    react_1.default.createElement(CustomHeaderButtonPrev, { onClick: decreaseMonth, disabled: prevMonthButtonDisabled }),
+    react_1.default.createElement(CustomHeaderButtonNext, { onClick: increaseMonth, disabled: nextMonthButtonDisabled })));
+const CustomHeader = ({ date, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled, decreaseYear, increaseYear, prevYearButtonDisabled, nextYearButtonDisabled, monthsShown, setHeaderProps, showMonthYearPicker = false, }) => {
     react_1.useEffect(() => {
         if (monthsShown > 1) {
             setHeaderProps({
@@ -54,6 +56,10 @@ const CustomHeader = ({ date, decreaseMonth, increaseMonth, prevMonthButtonDisab
                 increaseMonth,
                 prevMonthButtonDisabled,
                 nextMonthButtonDisabled,
+                decreaseYear,
+                increaseYear,
+                prevYearButtonDisabled,
+                nextYearButtonDisabled,
             });
         }
     }, [
@@ -63,18 +69,39 @@ const CustomHeader = ({ date, decreaseMonth, increaseMonth, prevMonthButtonDisab
         increaseMonth,
         prevMonthButtonDisabled,
         nextMonthButtonDisabled,
+        decreaseYear,
+        increaseYear,
+        prevYearButtonDisabled,
+        nextYearButtonDisabled,
         setHeaderProps,
     ]);
     if (monthsShown > 1) {
         return null;
     }
     return (react_1.default.createElement(Flex_1.Flex, { className: cn({ e: "header" }) },
-        react_1.default.createElement(Heading_1.Heading.H4, { className: cn({ e: "heading" }) }, date_fns_1.format(date, MONTH_YEAR_FORMAT)),
-        react_1.default.createElement(CustomHeaderButtons, { decreaseMonth: decreaseMonth, prevMonthButtonDisabled: prevMonthButtonDisabled, increaseMonth: increaseMonth, nextMonthButtonDisabled: nextMonthButtonDisabled })));
+        react_1.default.createElement(CustomHeaderButtonPrev, { onClick: () => {
+                if (showMonthYearPicker) {
+                    decreaseYear();
+                }
+                else {
+                    decreaseMonth();
+                }
+            }, disabled: showMonthYearPicker ? prevYearButtonDisabled : prevMonthButtonDisabled }),
+        react_1.default.createElement(Heading_1.Heading.H4, { className: cn({ e: "heading" }) }, showMonthYearPicker
+            ? date_fns_1.format(date, "yyyy")
+            : date_fns_1.format(date, MONTH_YEAR_FORMAT)),
+        react_1.default.createElement(CustomHeaderButtonNext, { onClick: () => {
+                if (showMonthYearPicker) {
+                    increaseYear();
+                }
+                else {
+                    increaseMonth();
+                }
+            }, disabled: showMonthYearPicker ? nextYearButtonDisabled : nextMonthButtonDisabled })));
 };
-const generateCustomHeaderRenderer = ({ monthsShown, setHeaderProps, }) => {
+const generateCustomHeaderRenderer = ({ monthsShown, setHeaderProps, showMonthYearPicker = false, }) => {
     return (customHeaderProps) => {
-        return (react_1.default.createElement(CustomHeader, Object.assign({}, customHeaderProps, { monthsShown: monthsShown, setHeaderProps: setHeaderProps })));
+        return (react_1.default.createElement(CustomHeader, Object.assign({}, customHeaderProps, { monthsShown: monthsShown, setHeaderProps: setHeaderProps, showMonthYearPicker: showMonthYearPicker })));
     };
 };
 const checkHeaderPropsEquality = (prev, next) => {
@@ -86,6 +113,10 @@ const checkHeaderPropsEquality = (prev, next) => {
         return false;
     if (prev.nextMonthButtonDisabled !== next.nextMonthButtonDisabled)
         return false;
+    if (prev.prevYearButtonDisabled !== next.prevYearButtonDisabled)
+        return false;
+    if (prev.nextYearButtonDisabled !== next.nextYearButtonDisabled)
+        return false;
     return true;
 };
 const DAY_ABBREVIATIONS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
@@ -136,13 +167,14 @@ const getCalendarContainer = ({ inline, monthsShown, headerProps, calInstance, }
         });
     return ({ children, className }) => (react_1.default.createElement(PopoverMenu_1.PopoverMenu, { className: className }, children));
 };
-const UnwrappedDatePicker = ({ className, monthsShown = 1, calendarClassName, customInput = react_1.default.createElement(exports.DatePickerInput, null), onHeaderPropsUpdate, inline = false, popperModifiers, headerProps, rdpRef, ...rest }) => {
+const UnwrappedDatePicker = ({ className, monthsShown = 1, calendarClassName, customInput = react_1.default.createElement(exports.DatePickerInput, null), onHeaderPropsUpdate, inline = false, popperModifiers, headerProps, rdpRef, showMonthYearPicker, ...rest }) => {
     const isMultiMonth = monthsShown > 1;
     const calInstance = rdpRef.current;
     return (react_1.default.createElement(react_datepicker_1.default, Object.assign({ ref: rdpRef, className: classnames_1.default(cn(), className), calendarClassName: classnames_1.default(isMultiMonth && cn({ e: "calendar", m: "multi-month" }), calendarClassName), showPopperArrow: false, customInput: customInput, disabledKeyboardNavigation: true, renderDayContents: renderDayContents, renderCustomHeader: generateCustomHeaderRenderer({
             monthsShown,
             setHeaderProps: onHeaderPropsUpdate,
-        }), monthsShown: monthsShown, calendarContainer: getCalendarContainer({
+            showMonthYearPicker,
+        }), showMonthYearPicker: showMonthYearPicker, monthsShown: monthsShown, calendarContainer: getCalendarContainer({
             inline,
             monthsShown,
             headerProps,

package/public/components/Icon/Icon.js

@@ -133,6 +133,7 @@ const faThumbsDown_2 = require("@fortawesome/free-solid-svg-icons/faThumbsDown")
 const faThumbsUp_2 = require("@fortawesome/free-solid-svg-icons/faThumbsUp");
 const faTicketAlt_1 = require("@fortawesome/free-solid-svg-icons/faTicketAlt");
 const faTimes_1 = require("@fortawesome/free-solid-svg-icons/faTimes");
+const faTimesCircle_2 = require("@fortawesome/free-solid-svg-icons/faTimesCircle");
 const faTrash_1 = require("@fortawesome/free-solid-svg-icons/faTrash");
 const faUnlock_1 = require("@fortawesome/free-solid-svg-icons/faUnlock");
 const faUser_2 = require("@fortawesome/free-solid-svg-icons/faUser");
@@ -146,7 +147,7 @@ const status_1 = require("../../contexts/status");
 const types_1 = require("../../types");
 const utilities_1 = require("../../utilities");
 const cn = utilities_1.bemHOF("Icon");
-fontawesome_svg_core_1.library.add(faArchive_1.faArchive, faArrowDown_1.faArrowDown, faArrowLeft_1.faArrowLeft, faArrowRight_1.faArrowRight, faArrowUp_1.faArrowUp, faBackward_1.faBackward, faBan_1.faBan, faBatteryHalf_1.faBatteryHalf, faBed_1.faBed, faBell_1.faBell, faBolt_1.faBolt, faCalculator_1.faCalculator, faCalendar_1.faCalendar, faCaretDown_1.faCaretDown, faCaretLeft_1.faCaretLeft, faCaretRight_1.faCaretRight, faCaretUp_1.faCaretUp, faChartLine_1.faChartLine, faCheck_1.faCheck, faCheckCircle_2.faCheckCircle, faCheckCircle_1.faCheckCircle, faChevronDown_1.faChevronDown, faChevronLeft_1.faChevronLeft, faChevronRight_1.faChevronRight, faChevronUp_1.faChevronUp, faCircle_2.faCircle, faCircleNotch_1.faCircleNotch, faCircle_1.faCircle, faClipboard_1.faClipboard, faClock_1.faClock, faClock_2.faClock, faCog_1.faCog, faColumns_1.faColumns, faCommentAlt_1.faCommentAlt, faCompress_1.faCompress, faCrown_1.faCrown, faEllipsisH_1.faEllipsisH, faEllipsisV_1.faEllipsisV, faEnvelope_1.faEnvelope, faExclamationCircle_1.faExclamationCircle, faExclamationTriangle_1.faExclamationTriangle, faExpand_1.faExpand, faExternalLinkAlt_1.faExternalLinkAlt, faExternalLinkSquareAlt_1.faExternalLinkSquareAlt, faEye_1.faEye, faEyeSlash_1.faEyeSlash, faFastBackward_1.faFastBackward, faFastForward_1.faFastForward, faFileAlt_1.faFileAlt, faFileAlt_2.faFileAlt, faFileImport_1.faFileImport, faFileSignature_1.faFileSignature, faFilter_1.faFilter, faFlag_1.faFlag, faFolder_1.faFolder, faForward_1.faForward, faGripLines_1.faGripLines, faGripLinesVertical_1.faGripLinesVertical, faHashtag_1.faHashtag, faInfoCircle_1.faInfoCircle, faKey_1.faKey, faKeyboard_1.faKeyboard, faLayerGroup_1.faLayerGroup, faLevelUpAlt_1.faLevelUpAlt, faListUl_1.faListUl, faLock_1.faLock, faLongArrowAltRight_1.faLongArrowAltRight, faMagic_1.faMagic, faMapSigns_1.faMapSigns, faMinus_1.faMinus, faMousePointer_1.faMousePointer, faPaperclip_1.faPaperclip, faPause_1.faPause, faPen_1.faPen, faPlay_1.faPlay, faPlus_1.faPlus, faPlusCircle_1.faPlusCircle, faPooStorm_1.faPooStorm, faQuestion_1.faQuestion, faQuestionCircle_2.faQuestionCircle, faQuestionCircle_1.faQuestionCircle, faScroll_1.faScroll, faSearch_1.faSearch, faShareAlt_1.faShareAlt, faShieldAlt_1.faShieldAlt, faSignOutAlt_1.faSignOutAlt, faSignature_1.faSignature, faSlidersH_1.faSlidersH, faSort_1.faSort, faSortDown_1.faSortDown, faSortUp_1.faSortUp, faSpinner_1.faSpinner, faSquare_1.faSquare, faStar_1.faStar, faStar_2.faStar, faSync_1.faSync, faTasks_1.faTasks, faThLarge_1.faThLarge, faThumbsDown_1.faThumbsDown, faThumbsDown_2.faThumbsDown, faThumbsUp_1.faThumbsUp, faThumbsUp_2.faThumbsUp, faTicketAlt_1.faTicketAlt, faTimes_1.faTimes, faTimesCircle_1.faTimesCircle, faTrash_1.faTrash, faUnlock_1.faUnlock, faUser_2.faUser, faUserAstronaut_1.faUserAstronaut, faUserPlus_1.faUserPlus, faUser_1.faUser, faUsers_1.faUsers, faUserFriends_1.faUserFriends, faUserShield_1.faUserShield);
+fontawesome_svg_core_1.library.add(faArchive_1.faArchive, faArrowDown_1.faArrowDown, faArrowLeft_1.faArrowLeft, faArrowRight_1.faArrowRight, faArrowUp_1.faArrowUp, faBackward_1.faBackward, faBan_1.faBan, faBatteryHalf_1.faBatteryHalf, faBed_1.faBed, faBell_1.faBell, faBolt_1.faBolt, faCalculator_1.faCalculator, faCalendar_1.faCalendar, faCaretDown_1.faCaretDown, faCaretLeft_1.faCaretLeft, faCaretRight_1.faCaretRight, faCaretUp_1.faCaretUp, faChartLine_1.faChartLine, faCheck_1.faCheck, faCheckCircle_2.faCheckCircle, faCheckCircle_1.faCheckCircle, faChevronDown_1.faChevronDown, faChevronLeft_1.faChevronLeft, faChevronRight_1.faChevronRight, faChevronUp_1.faChevronUp, faCircle_2.faCircle, faCircleNotch_1.faCircleNotch, faCircle_1.faCircle, faClipboard_1.faClipboard, faClock_1.faClock, faClock_2.faClock, faCog_1.faCog, faColumns_1.faColumns, faCommentAlt_1.faCommentAlt, faCompress_1.faCompress, faCrown_1.faCrown, faEllipsisH_1.faEllipsisH, faEllipsisV_1.faEllipsisV, faEnvelope_1.faEnvelope, faExclamationCircle_1.faExclamationCircle, faExclamationTriangle_1.faExclamationTriangle, faExpand_1.faExpand, faExternalLinkAlt_1.faExternalLinkAlt, faExternalLinkSquareAlt_1.faExternalLinkSquareAlt, faEye_1.faEye, faEyeSlash_1.faEyeSlash, faFastBackward_1.faFastBackward, faFastForward_1.faFastForward, faFileAlt_1.faFileAlt, faFileAlt_2.faFileAlt, faFileImport_1.faFileImport, faFileSignature_1.faFileSignature, faFilter_1.faFilter, faFlag_1.faFlag, faFolder_1.faFolder, faForward_1.faForward, faGripLines_1.faGripLines, faGripLinesVertical_1.faGripLinesVertical, faHashtag_1.faHashtag, faInfoCircle_1.faInfoCircle, faKey_1.faKey, faKeyboard_1.faKeyboard, faLayerGroup_1.faLayerGroup, faLevelUpAlt_1.faLevelUpAlt, faListUl_1.faListUl, faLock_1.faLock, faLongArrowAltRight_1.faLongArrowAltRight, faMagic_1.faMagic, faMapSigns_1.faMapSigns, faMinus_1.faMinus, faMousePointer_1.faMousePointer, faPaperclip_1.faPaperclip, faPause_1.faPause, faPen_1.faPen, faPlay_1.faPlay, faPlus_1.faPlus, faPlusCircle_1.faPlusCircle, faPooStorm_1.faPooStorm, faQuestion_1.faQuestion, faQuestionCircle_2.faQuestionCircle, faQuestionCircle_1.faQuestionCircle, faScroll_1.faScroll, faSearch_1.faSearch, faShareAlt_1.faShareAlt, faShieldAlt_1.faShieldAlt, faSignOutAlt_1.faSignOutAlt, faSignature_1.faSignature, faSlidersH_1.faSlidersH, faSort_1.faSort, faSortDown_1.faSortDown, faSortUp_1.faSortUp, faSpinner_1.faSpinner, faSquare_1.faSquare, faStar_1.faStar, faStar_2.faStar, faSync_1.faSync, faTasks_1.faTasks, faThLarge_1.faThLarge, faThumbsDown_1.faThumbsDown, faThumbsDown_2.faThumbsDown, faThumbsUp_1.faThumbsUp, faThumbsUp_2.faThumbsUp, faTicketAlt_1.faTicketAlt, faTimes_1.faTimes, faTimesCircle_1.faTimesCircle, faTimesCircle_2.faTimesCircle, faTrash_1.faTrash, faUnlock_1.faUnlock, faUser_2.faUser, faUserAstronaut_1.faUserAstronaut, faUserPlus_1.faUserPlus, faUser_1.faUser, faUsers_1.faUsers, faUserFriends_1.faUserFriends, faUserShield_1.faUserShield);
 var CUSTOM_ICON_TYPE;
 (function (CUSTOM_ICON_TYPE) {
     CUSTOM_ICON_TYPE["ARROW_TO_BOTTOM"] = "arrow-to-bottom";

package/public/components/Modal/Modal.js

@@ -94,8 +94,12 @@ const Modal = (props) => {
     const { title, secondaryTitle, description, children, isOpen, onClose, autoFocus = false, disableOutsideClick = true, disableEscClose = false, hideCloseButton = false, size = MODAL_SIZE.DEFAULT, center = false, noHeader = false, className, ...rest } = props;
     const modalElement = react_1.useRef(null);
     const showHeader = title || secondaryTitle || !hideCloseButton;
+    const [esc, setEsc] = react_1.useState(disableEscClose);
+    react_1.useEffect(() => {
+        setEsc(disableEscClose);
+    }, [disableEscClose]);
     hooks_1.useKeyPress(types_1.KEY_CODE.ESC, () => {
-        if (!disableEscClose && onClose) {
+        if (!esc && onClose) {
             onClose();
         }
     });

package/public/components/Select/Select.d.ts

@@ -20,7 +20,7 @@ export declare type SelectBaseProps = ({
 } & SelectAsyncProps);
 declare const Select: {
     (props: SelectProps): JSX.Element;
-    Creatable: (props: SelectCreatableProps) => JSX.Element;
+    Creatable: ({ createOptionPosition, ...rest }: SelectCreatableProps) => JSX.Element;
     Async: (props: SelectAsyncProps) => JSX.Element;
 };
 export { Select };

package/public/components/Select/Select.js

@@ -126,15 +126,15 @@ const SelectBase = ({ variant: variantProp = types_1.STATUS_VARIANT.DEFAULT, id:
         return (react_1.default.createElement(async_1.default, Object.assign({ className: getClassNames(className, variant), id: id }, rest, hardcodedProps)));
     }
     if (rest.type === "creatable") {
-        return (react_1.default.createElement(creatable_1.default, Object.assign({ className: getClassNames(className, variant), id: id }, rest, hardcodedProps, { createOptionPosition: "first" })));
+        return (react_1.default.createElement(creatable_1.default, Object.assign({ className: getClassNames(className, variant), id: id }, rest, hardcodedProps)));
     }
     return (react_1.default.createElement(react_select_1.default, Object.assign({ className: getClassNames(className, variant), id: id }, rest, hardcodedProps)));
 };
 const SelectAsync = (props) => {
     return react_1.default.createElement(SelectBase, Object.assign({}, props, { type: "async" }));
 };
-const SelectCreatable = (props) => {
-    return react_1.default.createElement(SelectBase, Object.assign({}, props, { type: "creatable" }));
+const SelectCreatable = ({ createOptionPosition = "first", ...rest }) => {
+    return (react_1.default.createElement(SelectBase, Object.assign({ createOptionPosition: createOptionPosition }, rest, { type: "creatable" })));
 };
 const Select = (props) => {
     return react_1.default.createElement(SelectBase, Object.assign({}, props, { type: "default" }));

package/public/css/styles.css

@@ -3376,6 +3376,63 @@ override built-in Image component classes */
   margin: 8px;
 }
 
+.react-datepicker__month-container {
+  width: 288px;
+}
+
+.react-datepicker__monthPicker {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.react-datepicker__month-wrapper {
+  display: grid;
+  gap: 8px;
+
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.react-datepicker__month .react-datepicker__month-text {
+  margin: 0;
+  display: flex;
+  width: 80px;
+}
+
+.react-datepicker__month-text {
+  height: 36px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  --tw-bg-opacity: 1;
+  background-color: rgb(244 247 249 / var(--tw-bg-opacity));
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1;
+  --tw-text-opacity: 1;
+  color: rgb(71 104 125 / var(--tw-text-opacity));
+  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.react-datepicker__month-text.react-datepicker__month--disabled {
+  --tw-bg-opacity: 0.5;
+  --tw-text-opacity: 1;
+  color: rgb(134 163 181 / var(--tw-text-opacity));
+}
+
+.react-datepicker__month-text:hover, .react-datepicker__month-text:active, .react-datepicker__month-text:focus, .react-datepicker__month-text.react-datepicker__month--selected, .react-datepicker__month-text.react-datepicker__month--selected:hover, .react-datepicker__month-text.react-datepicker__month--selected:active, .react-datepicker__month-text.react-datepicker__month--selected:focus {
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(51 198 159 / var(--tw-border-opacity));
+  background-color: rgb(51 198 159 / .15);
+  --tw-text-opacity: 1;
+  color: rgb(32 65 86 / var(--tw-text-opacity));
+}
+
 .ads-DateRangePicker {
   display: inline-flex;
 }
@@ -8594,6 +8651,10 @@ override built-in Image component classes */
   font-size: 11px;
 }
 
+.text-h5 {
+  font-size: 12px;
+}
+
 .text-bodySm {
   font-size: 12px;
 }