@indico-data/design-system 2.60.9 → 2.60.10

package/package.json

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

package/src/components/forms/date/inputDateRangePicker/InputDateRangePicker.stories.tsx

@@ -89,7 +89,7 @@ const meta: Meta<typeof InputDateRangePicker> = {
       },
     },
     isOpen: {
-      control: false,
+      control: 'boolean',
       description:
         'Whether the floatingUI component wrapped around the date picker is opened or closed.',
       table: {
@@ -189,6 +189,26 @@ const meta: Meta<typeof InputDateRangePicker> = {
         },
       },
     },
+    closeOnSelect: {
+      control: 'boolean',
+      description: 'Whether to close the date picker when a complete range is selected.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean',
+        },
+      },
+    },
+    clearOnClose: {
+      control: 'boolean',
+      description: 'Whether to clear the selected dates when the picker is closed.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean',
+        },
+      },
+    },
     'data-testid': {
       table: {
         disable: true,
@@ -214,15 +234,30 @@ export const RangeInput: Story = {
     toLabel: 'To Date',
     gutterWidth: 2,
     isOpen: false,
+    closeOnSelect: true,
+    clearOnClose: false,
     selected: { from: new Date(), to: new Date(new Date().getTime() + 5 * 24 * 60 * 60 * 1000) },
   },
   render: (args) => {
-    const [{ selected }, updateArgs] = useArgs();
+    const [{ selected, isOpen }, updateArgs] = useArgs();
 
     const handleSelect = (date: DateRange | undefined) => {
       updateArgs({ selected: date });
     };
 
-    return <InputDateRangePicker {...args} selected={selected} onSelect={handleSelect} />;
+    const handleSetIsOpen = (value: React.SetStateAction<boolean>) => {
+      const newIsOpen = typeof value === 'function' ? value(isOpen) : value;
+      updateArgs({ isOpen: newIsOpen });
+    };
+
+    return (
+      <InputDateRangePicker
+        {...args}
+        selected={selected}
+        onSelect={handleSelect}
+        isOpen={isOpen}
+        setIsOpen={handleSetIsOpen}
+      />
+    );
   },
 };

package/src/components/forms/date/inputDateRangePicker/InputDateRangePicker.tsx

@@ -7,6 +7,7 @@ import { DateRange } from 'react-day-picker';
 import { FloatUI } from '../../../floatUI';
 import { Col, Row } from '../../../grid';
 import { formatDateAsString } from '../inputDatePicker/helpers';
+import { Button } from '../../../button';
 
 interface InputDateRangePickerProps {
   ariaLabel: string;
@@ -19,6 +20,7 @@ interface InputDateRangePickerProps {
   month?: Date;
   selected?: DateRange | undefined;
   isOpen?: boolean;
+  setIsOpen?: React.Dispatch<React.SetStateAction<boolean>>;
   className?: string;
   inputIconName?: IconName;
   inputPlaceholder?: string;
@@ -28,6 +30,8 @@ interface InputDateRangePickerProps {
   gutterWidth?: number;
   fromLabel?: string;
   toLabel?: string;
+  closeOnSelect?: boolean;
+  clearOnClose?: boolean;
 }
 
 export function InputDateRangePicker(props: InputDateRangePickerProps) {
@@ -43,6 +47,7 @@ export function InputDateRangePicker(props: InputDateRangePickerProps) {
     onSelect,
     selected,
     isOpen,
+    setIsOpen,
     inputPlaceholder,
     inputIconName,
     toErrorMessage,
@@ -50,6 +55,8 @@ export function InputDateRangePicker(props: InputDateRangePickerProps) {
     gutterWidth,
     fromLabel,
     toLabel,
+    closeOnSelect,
+    clearOnClose,
     ...rest
   } = props;
 
@@ -75,6 +82,17 @@ export function InputDateRangePicker(props: InputDateRangePickerProps) {
       setLocalTextValueFrom(date.from ? formatDateAsString(date.from) : '');
       setLocalTextValueTo(date.to ? formatDateAsString(date.to) : '');
       onSelect(date);
+
+      // Close the picker ONLY when a complete range is selected (from and to are different dates)
+      if (
+        closeOnSelect &&
+        date.from &&
+        date.to &&
+        setIsOpen &&
+        date.from.getTime() !== date.to.getTime() // Ensure from and to are different dates
+      ) {
+        setIsOpen(false);
+      }
     }
   };
 
@@ -104,15 +122,22 @@ export function InputDateRangePicker(props: InputDateRangePickerProps) {
 
   // clear selection if clear on close is true
   useEffect(() => {
-    if (!isOpen) {
+    if (!isOpen && clearOnClose) {
       onSelect(undefined);
       setLocalTextValueFrom('');
       setLocalTextValueTo('');
     }
-  }, [isOpen]);
+  }, [isOpen, clearOnClose]);
+
+  // Handle set date button click
+  const handleSetDate = () => {
+    if (setIsOpen) {
+      setIsOpen(false);
+    }
+  };
 
   return (
-    <FloatUI isOpen={isOpen} ariaLabel={ariaLabel}>
+    <FloatUI isOpen={isOpen} setIsOpen={setIsOpen} ariaLabel={ariaLabel}>
       <Row gutterWidth={gutterWidth}>
         <Col>
           <Input