@indico-data/design-system 1.0.53 → 1.0.54

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "1.0.53",
+  "version": "1.0.54",
   "description": "",
   "author": "",
   "main": "lib/index.js",

package/src/components/Icon/Icon.tsx

@@ -20,6 +20,7 @@ type Props = PermafrostComponent & {
   size?: [string | number] | [string | number, string | number];
   style?: any;
   onClick?(): void;
+  ref?: React.Ref<SVGSVGElement>;
 };
 
 type IconComponentProps = {
@@ -53,6 +54,7 @@ export function Icon({ style = {}, ...props }: Props): React.ReactElement | null
       {...iconComponentProps}
       {...ariaLabel}
       {...dimensions}
+      ref={props.ref}
       role="img"
       className={props.className}
       data-cy={props['data-cy']}

package/src/components/inputs/NoInputDatePicker/NoInputDatePicker.stories.tsx

@@ -29,6 +29,7 @@ export const Single: Story = {
     value: today,
     triggerIcon: 'calendar',
     triggerIconSize: [20],
+    clearOnClose: true,
     onChange: (date: Date | DateRange | undefined) => {
       // eslint-disable-next-line no-console
       console.log(date);

package/src/components/inputs/NoInputDatePicker/NoInputDatePicker.tsx

@@ -1,5 +1,5 @@
 // TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { format } from 'date-fns';
 import FocusTrap from 'focus-trap-react';
 import {
@@ -25,21 +25,29 @@ 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;
 };
 
 function CustomCaption(props: CaptionProps) {
   const { goToMonth, nextMonth, previousMonth } = useNavigation();
+
   return (
     <div className="custom__caption">
       <button
         className="custom__caption__action__button"
         disabled={!previousMonth}
-        onClick={() => previousMonth && goToMonth(previousMonth)}
+        onClick={(event) => {
+          event.preventDefault();
+          if (previousMonth) {
+            goToMonth(previousMonth);
+          }
+        }}
       >
         <Icon size={[10]} ariaLabel="Previous Month" name="chevron-left" />
       </button>
@@ -47,7 +55,12 @@ function CustomCaption(props: CaptionProps) {
       <button
         className="custom__caption__action__button"
         disabled={!nextMonth}
-        onClick={() => nextMonth && goToMonth(nextMonth)}
+        onClick={(event) => {
+          event.preventDefault();
+          if (nextMonth) {
+            goToMonth(nextMonth);
+          }
+        }}
       >
         <Icon size={[10]} ariaLabel="Next Month" name="chevron-right" />
       </button>
@@ -68,11 +81,15 @@ export const NoInputDatePicker = (props: Props) => {
     triggerIcon,
     triggerIconSize,
     isRangePicker,
+    selectedRange,
     isOpen,
+    clearOnClose,
   } = props;
 
   const [localSelected, setLocalSelected] = useState<Date | undefined>(selected || undefined);
-  const [range, setRange] = useState<DateRange | undefined>(undefined);
+  const [localSelectedRange, setLocalSelectedRange] = useState<DateRange | undefined>(
+    selectedRange || undefined,
+  );
   const [isPopperOpen, setIsPopperOpen] = useState(isOpen || false);
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
   const popperRef = useRef<HTMLDivElement>(null);
@@ -90,17 +107,40 @@ export const NoInputDatePicker = (props: Props) => {
 
   const [isTrapActive, setIsTrapActive] = useState(false);
 
+  const datePickerRef = useRef<HTMLDivElement | null>(null);
+
+  // Addresses clickout side bug when implementing in an application
   useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      // 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);
   };
 
@@ -115,7 +155,7 @@ export const NoInputDatePicker = (props: Props) => {
   };
 
   const handleRangeSelect: SelectRangeEventHandler = (range: DateRange | undefined) => {
-    setRange(range);
+    setLocalSelectedRange(range);
     if (range?.from && range?.to) {
       onChange(range);
       closePopper();
@@ -131,6 +171,7 @@ export const NoInputDatePicker = (props: Props) => {
       data-cy={props['data-cy']}
       data-testid={props['data-testid']}
       id={id}
+      ref={datePickerRef}
     >
       {label ? (
         <div id={`picker-label--${id}`} className="visually-hidden">
@@ -155,6 +196,7 @@ export const NoInputDatePicker = (props: Props) => {
             allowOutsideClick: true,
             clickOutsideDeactivates: true,
             onDeactivate: closePopper,
+            fallbackFocus: popperRef.current || undefined,
           }}
         >
           <div
@@ -175,7 +217,7 @@ export const NoInputDatePicker = (props: Props) => {
                 disabled={disabled}
                 mode={'range'}
                 defaultMonth={localSelected}
-                selected={range}
+                selected={localSelectedRange}
                 onSelect={handleRangeSelect}
                 fromDate={disableBeforeDate}
                 toDate={disableAfterDate}