@conveyorhq/arrow-ds 1.155.0 → 1.157.0

package/README.md

@@ -112,7 +112,7 @@ If you’d prefer to create a fork and run Storybook locally, there are instruct
 
 ## Publishing `@conveyorhq/arrow-ds` (npm)
 
-New releases of Arrow Design System are triggered automatically by [semantic-release](https://github.com/semantic-release/semantic-release). It uses the commit messages to determine the type of changes in the codebase. Following formalized conventions for commit messages, semantic-release automatically determines the next semantic version number, generates a changelog and publishes the release.
+New releases of Arrow Design System are triggered automatically by [semantic-release](https://github.com/semantic-release/semantic-release). It uses the commit messages to determine the type of changes in the codebase. Following formalized conventions for commit messages, semantic-release automatically determines the next semantic version number, generates a changelog and publishes the release. Release only happen if commit messages have relevant changes.
 
 **Note**: No version number is committed to `package.json`. Instead, semantic-release adds it automatically before publishing to npm.
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "@conveyorhq/arrow-ds",
   "author": "Conveyor",
   "license": "MIT",
-  "version": "1.155.0",
+  "version": "1.157.0",
   "description": "Arrow Design System",
   "repository": "https://github.com/conveyor/arrow-ds",
   "publishConfig": {
@@ -46,7 +46,7 @@
     "react-hot-toast": "^2.4.1",
     "react-markdown": "^4.3.1",
     "react-merge-refs": "^1.1.0",
-    "react-popper-2": "npm:react-popper@^2.3.0",
+    "react-popper": "^2.3.0",
     "react-remove-scroll": "^2.2.0",
     "react-select": "^4.0.2",
     "react-spring": "^8.0.27",

package/public/components/DateRangePicker/DateRangePicker.d.ts

@@ -10,12 +10,15 @@ export interface DateRangePickerPreset {
 }
 export type DateRangePickerValue = DateRangePickerValueWithDates | null | DateRangePickerPreset;
 export interface DateRangePickerProps {
-    value: DateRangePickerValue;
-    onChange: (newValue: DateRangePickerValue) => void;
+    value: DateRangePickerPreset;
+    onChange: (newValue: DateRangePickerPreset) => void;
     presets: DateRangePickerPreset[];
     align?: "left" | "right";
     minDate?: Date;
     maxDate?: Date;
     className?: string;
+    onCustomChange: () => void;
+    onSave: (newValue: DateRangePickerPreset) => void;
+    disabled?: boolean;
 }
 export declare const DateRangePicker: FC<DateRangePickerProps>;

package/public/components/DateRangePicker/DateRangePicker.js

@@ -38,7 +38,6 @@ const PopoverMenu_1 = require("../PopoverMenu");
 const Icon_1 = require("../Icon");
 const Flex_1 = require("../Flex");
 const Text_1 = require("../Text");
-const Heading_1 = require("../Heading");
 const CustomDateRangeInput_1 = require("./CustomDateRangeInput");
 const utilities_1 = require("../../utilities");
 const DatePicker_1 = require("../DatePicker");
@@ -46,15 +45,9 @@ const isValidDate_1 = require("../../utilities/isValidDate");
 const cn = (0, bem_1.bemHOF)("DateRangePicker");
 const RangePickerPreset = ({ isSelected, children, onClick, }) => {
     const classes = (0, classnames_1.default)(cn({ e: "preset" }), isSelected && cn({ e: "preset", m: "isSelected" }));
-    return (react_1.default.createElement("button", { type: "button", className: classes, onClick: onClick },
-        react_1.default.createElement(Heading_1.Heading.H4, null, children)));
+    return (react_1.default.createElement("button", { type: "button", className: classes, onClick: onClick }, children));
 };
 const CUSTOM_PRESET = "Custom";
-const getMatchingPreset = (value, presets) => {
-    if (!value || !("name" in value))
-        return null;
-    return presets.find((p) => p.name === value.name);
-};
 const focusInput = (ref) => {
     const input = ref.current;
     const { activeElement } = document;
@@ -62,9 +55,8 @@ const focusInput = (ref) => {
         input.focus();
     }
 };
-const DateRangePicker = ({ className, onChange, align = "left", presets, value, minDate, maxDate, ...rest }) => {
+const DateRangePicker = ({ className, onChange, align = "left", presets, value, minDate, maxDate, onCustomChange, onSave, disabled, ...rest }) => {
     const placement = align === "left" ? "bottom-start" : "bottom-end";
-    const [selectingCustomDate, setSelectingCustomDate] = (0, react_1.useState)(!getMatchingPreset(value, presets) && value !== null);
     const [customStartDateInputVal, setCustomStartDateInputVal,] = (0, react_1.useState)("");
     const [customStartDateError, setCustomStartDateError] = (0, react_1.useState)("");
     const [customEndDateInputVal, setCustomEndDateInputVal] = (0, react_1.useState)("");
@@ -74,18 +66,13 @@ const DateRangePicker = ({ className, onChange, align = "left", presets, value,
     const endInput = (0, react_1.useRef)(null);
     const handleClose = () => {
         setCustomStartDateError("");
-        if (selectingCustomDate && value && "name" in value) {
-            setSelectingCustomDate(false);
-        }
     };
-    const selectedPreset = (0, react_1.useMemo)(() => {
-        if (!value)
-            return null;
-        if (selectingCustomDate)
-            return CUSTOM_PRESET;
-        const matchingPreset = getMatchingPreset(value, presets);
-        return matchingPreset ? matchingPreset.name : CUSTOM_PRESET;
-    }, [presets, value, selectingCustomDate]);
+    const [presetName, setPresetName] = (0, react_1.useState)(value.name);
+    (0, react_1.useEffect)(() => {
+        setPresetName(value.name);
+        setCustomStartDateInputVal(value.startDate ? (0, date_fns_1.format)(value.startDate, utilities_1.DATE_FORMAT) : "");
+        setCustomEndDateInputVal(value.endDate ? (0, date_fns_1.format)(value.endDate, utilities_1.DATE_FORMAT) : "");
+    }, [value]);
     const customDateInputsValid = (0, react_1.useMemo)(() => {
         const parsedStart = (0, utilities_1.parseDate)(customStartDateInputVal);
         const parsedEnd = (0, utilities_1.parseDate)(customEndDateInputVal);
@@ -94,19 +81,14 @@ const DateRangePicker = ({ className, onChange, align = "left", presets, value,
     const displayText = (0, react_1.useMemo)(() => {
         if (!value)
             return "Select Date Range";
-        const matchingPreset = getMatchingPreset(value, presets);
-        if (selectingCustomDate && matchingPreset)
-            return CUSTOM_PRESET;
-        return selectedPreset === CUSTOM_PRESET
-            ? `${(0, date_fns_1.format)(value.startDate, utilities_1.DATE_FORMAT)} to ${(0, date_fns_1.format)(value.endDate, utilities_1.DATE_FORMAT)}`
-            : selectedPreset;
-    }, [selectedPreset, value, selectingCustomDate, presets]);
+        return presetName;
+    }, [presetName, value]);
     (0, react_1.useEffect)(() => {
-        if (!selectingCustomDate || customDateInputsValid)
+        if (customDateInputsValid)
             return;
         const inputToFocus = customSelectingWhichDate === "start" ? startInput : endInput;
         focusInput(inputToFocus);
-    }, [customSelectingWhichDate, selectingCustomDate, customDateInputsValid]);
+    }, [customSelectingWhichDate, customDateInputsValid]);
     const validDates = (0, react_1.useMemo)(() => {
         let start = null;
         let end = null;
@@ -161,7 +143,7 @@ const DateRangePicker = ({ className, onChange, align = "left", presets, value,
         !validDates.end ||
         !!customStartDateError ||
         !!customEndDateError;
-    return (react_1.default.createElement(MenuRenderer_1.MenuRenderer, { className: (0, classnames_1.default)(cn(), className), placement: placement, onClose: handleClose, hasPortal: true, trigger: (triggerProps) => (react_1.default.createElement(Button_1.Button, { variant: Button_1.BUTTON_VARIANT.SECONDARY, icon: Icon_1.ICON_TYPE.CARET_DOWN, iconPosition: Button_1.BUTTON_ICON_POSITION.RIGHT, className: cn({ e: "trigger" }), ...triggerProps },
+    return (react_1.default.createElement(MenuRenderer_1.MenuRenderer, { className: (0, classnames_1.default)(cn(), className), placement: placement, onClose: handleClose, hasPortal: true, trigger: (triggerProps) => (react_1.default.createElement(Button_1.Button, { variant: Button_1.BUTTON_VARIANT.SECONDARY, icon: Icon_1.ICON_TYPE.CARET_DOWN, iconPosition: Button_1.BUTTON_ICON_POSITION.RIGHT, className: cn({ e: "trigger" }), disabled: disabled, ...triggerProps },
             react_1.default.createElement(Flex_1.Flex, { className: cn({ e: "trigger-inner" }) },
                 react_1.default.createElement(Icon_1.Icon, { icon: Icon_1.ICON_TYPE.CALENDAR, className: cn({ e: "trigger-icon" }) }),
                 " ",
@@ -173,23 +155,29 @@ const DateRangePicker = ({ className, onChange, align = "left", presets, value,
             react_1.default.createElement(Flex_1.Flex, { className: cn({ e: "presets-wrapper" }) },
                 presets.map((p) => (react_1.default.createElement(RangePickerPreset, { key: p.name, onClick: () => {
                         onChange(p);
-                        if (onClose) {
-                            onClose();
-                        }
-                    }, isSelected: p.name === selectedPreset }, p.name))),
+                        setPresetName(p.name);
+                        setCustomStartDateInputVal((0, date_fns_1.format)(p.startDate, utilities_1.DATE_FORMAT));
+                        setCustomEndDateInputVal((0, date_fns_1.format)(p.endDate, utilities_1.DATE_FORMAT));
+                    }, isSelected: p.name === presetName }, p.name))),
                 react_1.default.createElement(RangePickerPreset, { onClick: () => {
-                        if (selectingCustomDate)
-                            return;
-                        setSelectingCustomDate(true);
-                    }, isSelected: selectedPreset === CUSTOM_PRESET }, "Custom")),
-            selectedPreset === CUSTOM_PRESET ? (react_1.default.createElement(Box_1.Box, { className: (0, classnames_1.default)(cn({ e: "custom-wrapper" }), cn({ e: "custom-wrapper", m: `${align}Aligned` })) },
+                        onCustomChange();
+                        setPresetName(CUSTOM_PRESET);
+                        setCustomStartDateInputVal("");
+                        setCustomEndDateInputVal("");
+                    }, isSelected: presetName === CUSTOM_PRESET }, "Custom")),
+            react_1.default.createElement(Box_1.Box, { className: (0, classnames_1.default)(cn({ e: "custom-wrapper" }), cn({ e: "custom-wrapper", m: `${align}Aligned` })) },
                 react_1.default.createElement(Flex_1.Flex, { className: cn({ e: "custom-date-inputs-wrapper" }) },
                     react_1.default.createElement(CustomDateRangeInput_1.CustomDateRangeInput, { ref: startInput, value: customStartDateInputVal, setValue: setCustomStartDateInputVal, error: customStartDateError, setError: setCustomStartDateError, ariaLabel: "Start Date", onFocus: () => setCustomSelectingWhichDate("start") }),
                     react_1.default.createElement(Text_1.Text, { as: "span", className: cn({ e: "custom-dates-to" }) }, "to"),
                     react_1.default.createElement(CustomDateRangeInput_1.CustomDateRangeInput, { ref: endInput, value: customEndDateInputVal, setValue: setCustomEndDateInputVal, error: customEndDateError, setError: setCustomEndDateError, ariaLabel: "End Date", onFocus: () => setCustomSelectingWhichDate("end") })),
                 react_1.default.createElement(Box_1.Box, { className: cn({ e: "custom-date-calendars-wrapper" }) },
-                    react_1.default.createElement(DatePicker_1.DatePicker, { monthsShown: 2, inline: true, onChange: handleDatePickerChange, onSelect: handleDatePickerSelect, selectsRange: true, selected: validDates.start, startDate: validDates.start, endDate: validDates.end, minDate: minDate, maxDate: maxDate })),
+                    react_1.default.createElement(DatePicker_1.DatePicker, { monthsShown: 2, inline: true, onChange: handleDatePickerChange, onSelect: handleDatePickerSelect, selectsRange: true, selected: validDates.start, startDate: validDates.start, endDate: validDates.end, minDate: minDate, maxDate: maxDate, openToDate: presetName === CUSTOM_PRESET ? new Date() : undefined })),
                 react_1.default.createElement(Flex_1.Flex, { className: cn({ e: "custom-date-footer" }) },
+                    react_1.default.createElement(Button_1.Button, { variant: Button_1.BUTTON_VARIANT.SECONDARY, onClick: () => {
+                            if (onClose) {
+                                onClose();
+                            }
+                        } }, "Cancel"),
                     react_1.default.createElement(Button_1.Button, { disabled: customApplyBtnDisabled, onClick: () => {
                             if (onClose) {
                                 onClose();
@@ -197,8 +185,8 @@ const DateRangePicker = ({ className, onChange, align = "left", presets, value,
                             const startDate = (0, utilities_1.parseDate)(customStartDateInputVal);
                             const endDate = (0, utilities_1.parseDate)(customEndDateInputVal);
                             if (startDate && endDate) {
-                                onChange({ startDate, endDate });
+                                onSave({ name: presetName, startDate, endDate });
                             }
-                        } }, "Apply")))) : null)))));
+                        } }, "Apply"))))))));
 };
 exports.DateRangePicker = DateRangePicker;

package/public/components/MenuRenderer/MenuRenderer.js

@@ -29,7 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuRenderer = void 0;
 const react_1 = __importStar(require("react"));
 const react_focus_lock_1 = __importDefault(require("react-focus-lock"));
-const react_popper_2_1 = require("react-popper-2");
+const react_popper_1 = require("react-popper");
 const web_1 = require("@react-spring/web");
 const d3_ease_1 = require("d3-ease");
 const hooks_1 = require("../../hooks");
@@ -63,7 +63,7 @@ const MenuRenderer = ({ children, className, placement = "bottom-start", positio
     const [minWidth, setMinWidth] = (0, react_1.useState)(0);
     const [referenceElement, setReferenceElement] = (0, react_1.useState)(null);
     const [popperElement, setPopperElement] = (0, react_1.useState)(null);
-    const { styles, attributes, update } = (0, react_popper_2_1.usePopper)(referenceElement, popperElement, {
+    const { styles, attributes, update } = (0, react_popper_1.usePopper)(referenceElement, popperElement, {
         placement,
         modifiers: [...defaultPopperModifiers, ...popperModifiers],
         strategy: position,

package/public/components/Popover/Popover.js

@@ -29,7 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Popover = void 0;
 const react_1 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-const react_popper_2_1 = require("react-popper-2");
+const react_popper_1 = require("react-popper");
 const Box_1 = require("../Box");
 const Portal_1 = require("../Portal");
 const bem_1 = require("../../utilities/bem");
@@ -66,13 +66,13 @@ const Popover = ({ removePadding = false, ...props }) => {
             },
         ];
         const propModifiers = popperModifiers || [];
-        return (react_1.default.createElement(react_popper_2_1.Manager, null,
-            isVisible && (react_1.default.createElement(react_popper_2_1.Popper, { placement: placement, modifiers: [...defaultPopperModifiers, ...propModifiers], strategy: strategy }, ({ ref, style, placement: popperPlacement, arrowProps, update, }) => (react_1.default.createElement(InlinePopover, { ref: ref, style: {
+        return (react_1.default.createElement(react_popper_1.Manager, null,
+            isVisible && (react_1.default.createElement(react_popper_1.Popper, { placement: placement, modifiers: [...defaultPopperModifiers, ...propModifiers], strategy: strategy }, ({ ref, style, placement: popperPlacement, arrowProps, update, }) => (react_1.default.createElement(InlinePopover, { ref: ref, style: {
                     ...style,
                     ...styleProp,
                 }, className: className, "data-placement": popperPlacement, hasPortal: true, removePadding: removePadding, ...rest },
                 react_1.default.createElement(ChildrenWithArrow, { popperPlacement: popperPlacement, arrowProps: arrowProps, update: update, showArrow: showArrow }, children))))),
-            react_1.default.createElement(react_popper_2_1.Reference, null, ({ ref }) => (0, react_1.cloneElement)(referenceElement, {
+            react_1.default.createElement(react_popper_1.Reference, null, ({ ref }) => (0, react_1.cloneElement)(referenceElement, {
                 ref,
             }))));
     }

package/public/components/SelectNew/hooks/useSelectLayout.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSelectLayout = void 0;
 const classnames_1 = __importDefault(require("classnames"));
 const react_1 = require("react");
-const react_popper_2_1 = require("react-popper-2");
+const react_popper_1 = require("react-popper");
 const types_1 = require("../../../types");
 const utilities_1 = require("../../../utilities");
 const FormGroupContext_1 = require("../../FormGroup/FormGroupContext");
@@ -58,7 +58,7 @@ function useSelectLayout({ isOpen, hasSearch, isDisabled, variantProp, getLabelP
     const [callbackElement, setCallbackElement] = (0, react_1.useState)(null);
     const isListRendered = callbackElement !== null;
     const inputRef = (0, react_1.useRef)(null);
-    const { styles, attributes, update } = (0, react_popper_2_1.usePopper)(referenceElement, popperRef.current, {
+    const { styles, attributes, update } = (0, react_popper_1.usePopper)(referenceElement, popperRef.current, {
         placement: initialPlacement,
         modifiers: popperModifiers,
     });

package/public/components/Table/FilterDropdown.js

@@ -30,7 +30,7 @@ exports.FilterDropdown = void 0;
 const react_1 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const react_focus_lock_1 = __importDefault(require("react-focus-lock"));
-const react_popper_2_1 = require("react-popper-2");
+const react_popper_1 = require("react-popper");
 const bem_1 = require("../../utilities/bem");
 const hooks_1 = require("../../hooks");
 const Icon_1 = require("../Icon");
@@ -93,9 +93,9 @@ const FilterDropdown = ({ isVisible = false, filterApplied = false, onSetVisible
     const getButtonElement = (buttonElement) => {
         buttonRef.current = buttonElement;
     };
-    return (react_1.default.createElement(react_popper_2_1.Manager, null,
+    return (react_1.default.createElement(react_popper_1.Manager, null,
         isVisible && (react_1.default.createElement(Portal_1.Portal, null,
-            react_1.default.createElement(react_popper_2_1.Popper, { placement: "bottom", innerRef: getPopperElement, modifiers: [
+            react_1.default.createElement(react_popper_1.Popper, { placement: "bottom", innerRef: getPopperElement, modifiers: [
                     {
                         name: "offset",
                         options: {
@@ -103,6 +103,6 @@ const FilterDropdown = ({ isVisible = false, filterApplied = false, onSetVisible
                         },
                     },
                 ] }, ({ ref, placement, style }) => (react_1.default.createElement(FilterMenu, { ref: ref, buttonRef: buttonRef, menuRef: menuRef, placement: placement, className: className, style: style, onSetVisible: onSetVisible, searchInputValue: searchInputValue, onFilterInputChange: onFilterInputChange, onFilterSelectAll: onFilterSelectAll, onFilterClear: onFilterClear, filterOptions: filterOptions, filterControl: filterControl, hideFilterSearch: hideFilterSearch }))))),
-        react_1.default.createElement(react_popper_2_1.Reference, { innerRef: getButtonElement }, ({ ref }) => (react_1.default.createElement(FilterToggleButton, { ref: ref, onSetVisible: onSetVisible, isVisible: isVisible, filterApplied: filterApplied })))));
+        react_1.default.createElement(react_popper_1.Reference, { innerRef: getButtonElement }, ({ ref }) => (react_1.default.createElement(FilterToggleButton, { ref: ref, onSetVisible: onSetVisible, isVisible: isVisible, filterApplied: filterApplied })))));
 };
 exports.FilterDropdown = FilterDropdown;

package/public/css/styles.css

@@ -3699,7 +3699,7 @@ override built-in Image component classes */
 }
 
 .ads-DateRangePicker-trigger {
-  width: 224px;
+  width: 144px;
 }
 
 .ads-DateRangePicker-trigger-inner {
@@ -3711,7 +3711,7 @@ override built-in Image component classes */
 }
 
 .ads-DateRangePicker-trigger-text {
-  width: 160px;
+  width: 80px;
   text-align: left;
 }
 
@@ -3731,6 +3731,8 @@ override built-in Image component classes */
   border-radius: 3px;
   padding: 8px;
   text-align: left;
+  font-size: 14px;
+  font-weight: 500;
 }
 
 .ads-DateRangePicker-preset:hover {
@@ -3738,12 +3740,12 @@ override built-in Image component classes */
   background-color: rgb(249 251 252 / var(--tw-bg-opacity));
 }
 
-.ads-DateRangePicker-preset--isSelected {
+button.ads-DateRangePicker-preset--isSelected {
   --tw-bg-opacity: 1;
   background-color: rgb(244 247 249 / var(--tw-bg-opacity));
 }
 
-.ads-DateRangePicker-preset--isSelected:hover {
+button.ads-DateRangePicker-preset--isSelected:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(237 243 247 / var(--tw-bg-opacity));
 }
@@ -3784,6 +3786,8 @@ override built-in Image component classes */
 
 .ads-DateRangePicker-custom-date-footer {
   justify-content: flex-end;
+  -webkit-column-gap: 8px;
+          column-gap: 8px;
   padding: 12px;
 }