@indico-data/design-system 1.0.53 → 1.0.54

package/lib/components/Icon/Icon.d.ts

@@ -7,6 +7,7 @@ type Props = PermafrostComponent & {
     size?: [string | number] | [string | number, string | number];
     style?: any;
     onClick?(): void;
+    ref?: React.Ref<SVGSVGElement>;
 };
 /**
  * Generic icon component, hidden from Assistive Technology by default.

package/lib/components/Icon/Icon.stories.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { StoryObj } from '@storybook/react';
 import { Icon } from './Icon';
 declare const meta: {
@@ -30,6 +31,7 @@ declare const meta: {
         size?: [string | number] | [string | number, string | number] | undefined;
         style?: any;
         onClick?: (() => void) | undefined;
+        ref?: React.Ref<SVGSVGElement> | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];
 };
 export default meta;

package/lib/components/inputs/NoInputDatePicker/NoInputDatePicker.d.ts

@@ -9,11 +9,13 @@ type Props = PermafrostComponent & {
     label?: string;
     onChange: (value: Date | DateRange | undefined) => void;
     selected?: Date | undefined;
+    selectedRange?: DateRange | undefined;
     value: Date | undefined;
     triggerIcon: IconName;
     triggerIconSize: [string | number];
     isRangePicker?: boolean;
     isOpen?: boolean;
+    clearOnClose?: boolean;
 };
 export declare const NoInputDatePicker: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/index.d.ts

@@ -660,6 +660,7 @@ type Props$j = PermafrostComponent & {
     size?: [string | number] | [string | number, string | number];
     style?: any;
     onClick?(): void;
+    ref?: React__default.Ref<SVGSVGElement>;
 };
 /**
  * Generic icon component, hidden from Assistive Technology by default.
@@ -811,11 +812,13 @@ type Props$c = PermafrostComponent & {
     label?: string;
     onChange: (value: Date | DateRange | undefined) => void;
     selected?: Date | undefined;
+    selectedRange?: DateRange | undefined;
     value: Date | undefined;
     triggerIcon: IconName;
     triggerIconSize: [string | number];
     isRangePicker?: boolean;
     isOpen?: boolean;
+    clearOnClose?: boolean;
 };
 declare const NoInputDatePicker: (props: Props$c) => react_jsx_runtime.JSX.Element;
 

package/lib/index.esm.js

@@ -1594,7 +1594,7 @@ function Icon(_a) {
         console.error(`${props.name} is not a valid icon name.`);
         return null;
     }
-    return (jsx("svg", Object.assign({}, iconComponentProps, ariaLabel, dimensions, { role: "img", className: props.className, "data-cy": props['data-cy'], "data-testid": props['data-testid'], fill: props.fill || 'currentColor', id: props.id, style: style, onClick: props.onClick })));
+    return (jsx("svg", Object.assign({}, iconComponentProps, ariaLabel, dimensions, { ref: props.ref, role: "img", className: props.className, "data-cy": props['data-cy'], "data-testid": props['data-testid'], fill: props.fill || 'currentColor', id: props.id, style: style, onClick: props.onClick })));
 }
 function returnDimensions(sizeProp) {
     if (sizeProp.length > 1) {
@@ -23090,12 +23090,22 @@ const StyledNoInputDatePicker = styled.div `
 
 function CustomCaption(props) {
     const { goToMonth, nextMonth, previousMonth } = useNavigation();
-    return (jsxs("div", { className: "custom__caption", children: [jsx("button", { className: "custom__caption__action__button", disabled: !previousMonth, onClick: () => previousMonth && goToMonth(previousMonth), children: jsx(Icon, { size: [10], ariaLabel: "Previous Month", name: "chevron-left" }) }), jsx("h2", { className: "custom__caption__text", children: format(props.displayMonth, 'MMM yyyy') }), jsx("button", { className: "custom__caption__action__button", disabled: !nextMonth, onClick: () => nextMonth && goToMonth(nextMonth), children: jsx(Icon, { size: [10], ariaLabel: "Next Month", name: "chevron-right" }) })] }));
+    return (jsxs("div", { className: "custom__caption", children: [jsx("button", { className: "custom__caption__action__button", disabled: !previousMonth, onClick: (event) => {
+                    event.preventDefault();
+                    if (previousMonth) {
+                        goToMonth(previousMonth);
+                    }
+                }, children: jsx(Icon, { size: [10], ariaLabel: "Previous Month", name: "chevron-left" }) }), jsx("h2", { className: "custom__caption__text", children: format(props.displayMonth, 'MMM yyyy') }), jsx("button", { className: "custom__caption__action__button", disabled: !nextMonth, onClick: (event) => {
+                    event.preventDefault();
+                    if (nextMonth) {
+                        goToMonth(nextMonth);
+                    }
+                }, children: jsx(Icon, { size: [10], ariaLabel: "Next Month", name: "chevron-right" }) })] }));
 }
 const NoInputDatePicker = (props) => {
-    const { ariaLabel, className, disabled, disableBeforeDate, disableAfterDate, id, label, onChange, selected, triggerIcon, triggerIconSize, isRangePicker, isOpen, } = props;
+    const { ariaLabel, className, disabled, disableBeforeDate, disableAfterDate, id, label, onChange, selected, triggerIcon, triggerIconSize, isRangePicker, selectedRange, isOpen, clearOnClose, } = props;
     const [localSelected, setLocalSelected] = useState(selected || undefined);
-    const [range, setRange] = useState(undefined);
+    const [localSelectedRange, setLocalSelectedRange] = useState(selectedRange || undefined);
     const [isPopperOpen, setIsPopperOpen] = useState(isOpen || false);
     const [popperElement, setPopperElement] = useState(null);
     const popperRef = useRef(null);
@@ -23111,17 +23121,34 @@ const NoInputDatePicker = (props) => {
         ],
     });
     const [isTrapActive, setIsTrapActive] = useState(false);
+    const datePickerRef = useRef(null);
+    // Addresses clickout side bug when implementing in an application
     useEffect(() => {
+        const handleClickOutside = (event) => {
+            // Close the date picker only when clicked outside
+            if (datePickerRef.current &&
+                event.target instanceof Node &&
+                !datePickerRef.current.contains(event.target)) {
+                closePopper();
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, []);
+    // Allow datepicker to load before setting active trap
+    useLayoutEffect(() => {
         if (isOpen) {
-            // Delay the activation of the FocusTrap to allow the DayPicker to render
-            const timeoutId = setTimeout(() => setIsTrapActive(true), 0);
-            return () => clearTimeout(timeoutId);
+            setIsTrapActive(true);
         }
         else {
             setIsTrapActive(false);
         }
     }, [isOpen]);
     const closePopper = () => {
+        clearOnClose && setLocalSelected(undefined);
+        clearOnClose && setLocalSelectedRange(undefined);
         setIsPopperOpen(false);
     };
     const handleDaySelect = (date) => {
@@ -23135,7 +23162,7 @@ const NoInputDatePicker = (props) => {
         }
     };
     const handleRangeSelect = (range) => {
-        setRange(range);
+        setLocalSelectedRange(range);
         if ((range === null || range === void 0 ? void 0 : range.from) && (range === null || range === void 0 ? void 0 : range.to)) {
             onChange(range);
             closePopper();
@@ -23144,14 +23171,15 @@ const NoInputDatePicker = (props) => {
             onChange(range);
         }
     };
-    return (jsxs(StyledNoInputDatePicker, { className: className, "aria-label": ariaLabel || 'date select', "aria-describedby": `picker-label--${id}`, "data-cy": props['data-cy'], "data-testid": props['data-testid'], id: id, children: [label ? (jsx("div", { id: `picker-label--${id}`, className: "visually-hidden", children: label })) : null, jsx("div", { ref: popperRef, className: "no__input__date__picker-inputParent", children: jsx(Icon, { "aria-label": "Open date picker", name: triggerIcon, size: triggerIconSize, className: "date__picker__trigger", "data-testid": `datepicker-trigger-for-${id}`, onClick: () => setIsPopperOpen(!isPopperOpen) }) }), isPopperOpen && (jsx(FocusTrap$1, { active: isTrapActive, focusTrapOptions: {
+    return (jsxs(StyledNoInputDatePicker, { className: className, "aria-label": ariaLabel || 'date select', "aria-describedby": `picker-label--${id}`, "data-cy": props['data-cy'], "data-testid": props['data-testid'], id: id, ref: datePickerRef, children: [label ? (jsx("div", { id: `picker-label--${id}`, className: "visually-hidden", children: label })) : null, jsx("div", { ref: popperRef, className: "no__input__date__picker-inputParent", children: jsx(Icon, { "aria-label": "Open date picker", name: triggerIcon, size: triggerIconSize, className: "date__picker__trigger", "data-testid": `datepicker-trigger-for-${id}`, onClick: () => setIsPopperOpen(!isPopperOpen) }) }), isPopperOpen && (jsx(FocusTrap$1, { active: isTrapActive, focusTrapOptions: {
                     initialFocus: false,
                     allowOutsideClick: true,
                     clickOutsideDeactivates: true,
                     onDeactivate: closePopper,
+                    fallbackFocus: popperRef.current || undefined,
                 }, children: jsx("div", Object.assign({ tabIndex: -1, style: popper.styles.popper, className: "DayPickerInput-Overlay" }, popper.attributes.popper, { ref: setPopperElement, role: "dialog", "aria-label": "DayPicker calendar", "data-testid": "datepicker-dialog", children: isRangePicker ? (jsx(DayPicker, { components: {
                             Caption: CustomCaption,
-                        }, disabled: disabled, mode: 'range', defaultMonth: localSelected, selected: range, onSelect: handleRangeSelect, fromDate: disableBeforeDate, toDate: disableAfterDate, "data-testid": "range-datepicker" })) : (jsx(DayPicker, { components: {
+                        }, disabled: disabled, mode: 'range', defaultMonth: localSelected, selected: localSelectedRange, onSelect: handleRangeSelect, fromDate: disableBeforeDate, toDate: disableAfterDate, "data-testid": "range-datepicker" })) : (jsx(DayPicker, { components: {
                             Caption: CustomCaption,
                         }, disabled: disabled, mode: 'single', defaultMonth: localSelected, selected: localSelected, onSelect: handleDaySelect, fromDate: disableBeforeDate, toDate: disableAfterDate, "data-testid": "single-datepicker" })) })) }))] }));
 };