@indico-data/design-system 2.60.8 → 2.60.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "2.60.8",
+  "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: {
@@ -159,6 +159,26 @@ const meta: Meta<typeof InputDateRangePicker> = {
         },
       },
     },
+    fromLabel: {
+      control: 'text',
+      description: 'The label for the `from` input.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    toLabel: {
+      control: 'text',
+      description: 'The label for the `to` input.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
     month: {
       control: 'date',
       description: 'The currently displayed month.',
@@ -169,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,
@@ -190,16 +230,34 @@ export const RangeInput: Story = {
     toErrorMessage: '',
     fromErrorMessage: '',
     ariaLabel: 'Date Picker',
+    fromLabel: 'From Date',
+    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,12 +20,18 @@ interface InputDateRangePickerProps {
   month?: Date;
   selected?: DateRange | undefined;
   isOpen?: boolean;
+  setIsOpen?: React.Dispatch<React.SetStateAction<boolean>>;
   className?: string;
   inputIconName?: IconName;
   inputPlaceholder?: string;
   toErrorMessage?: string | undefined;
   fromErrorMessage?: string | undefined;
   'data-testid'?: string;
+  gutterWidth?: number;
+  fromLabel?: string;
+  toLabel?: string;
+  closeOnSelect?: boolean;
+  clearOnClose?: boolean;
 }
 
 export function InputDateRangePicker(props: InputDateRangePickerProps) {
@@ -40,10 +47,16 @@ export function InputDateRangePicker(props: InputDateRangePickerProps) {
     onSelect,
     selected,
     isOpen,
+    setIsOpen,
     inputPlaceholder,
     inputIconName,
     toErrorMessage,
     fromErrorMessage,
+    gutterWidth,
+    fromLabel,
+    toLabel,
+    closeOnSelect,
+    clearOnClose,
     ...rest
   } = props;
 
@@ -69,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);
+      }
     }
   };
 
@@ -98,16 +122,23 @@ 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}>
-      <Row>
+    <FloatUI isOpen={isOpen} setIsOpen={setIsOpen} ariaLabel={ariaLabel}>
+      <Row gutterWidth={gutterWidth}>
         <Col>
           <Input
             id={`${inputId}-from`}
@@ -117,7 +148,7 @@ export function InputDateRangePicker(props: InputDateRangePickerProps) {
             iconName={inputIconName}
             onChange={(e) => handleInputChange(e, 'from')}
             errorMessage={fromErrorMessage}
-            label={'From Date'}
+            label={fromLabel}
             name={'From Date'}
             data-testid="date-picker-from"
           />
@@ -131,7 +162,7 @@ export function InputDateRangePicker(props: InputDateRangePickerProps) {
             iconName={inputIconName}
             onChange={(e) => handleInputChange(e, 'to')}
             errorMessage={toErrorMessage}
-            label={'To Date'}
+            label={toLabel}
             name={'To Date'}
             data-testid="date-picker-to"
           />

package/src/components/forms/select/Select.stories.tsx

@@ -1,11 +1,45 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { Select, SelectProps } from './Select';
 import { SelectOption } from './types';
+import { LabelProps } from '../subcomponents/Label';
 
-const meta: Meta<SelectProps<SelectOption>> = {
+const meta: Meta<SelectProps<SelectOption> & LabelProps> = {
   title: 'Forms/Select',
   component: Select,
   argTypes: {
+    name: {
+      control: 'text',
+      description: 'The name of the select component',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+      defaultValue: { summary: '' },
+    },
+    hasHiddenLabel: {
+      control: 'boolean',
+      description: 'Toggles the visibility of the label',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean',
+        },
+      },
+      defaultValue: { summary: 'false' },
+    },
+    label: {
+      control: 'text',
+      description: 'The label for the select component',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+      defaultValue: { summary: '' },
+    },
     options: {
       control: 'object',
       description: 'Options for the select component',
@@ -126,6 +160,9 @@ export const Default: Story = {
     isSearchable: true,
     isDisabled: false,
     isLoading: false,
+    hasHiddenLabel: false,
+    label: 'Select an option...',
+    name: 'select',
   },
   decorators: [
     (Story) => (

package/src/components/forms/select/Select.tsx

@@ -2,9 +2,13 @@ import React from 'react';
 import classNames from 'classnames';
 import ReactSelect, { Props as ReactSelectProps, components, OptionProps } from 'react-select';
 import { SelectOption } from './types';
+import { withLabel } from '../subcomponents/Label';
 
 export interface SelectProps<OptionType extends SelectOption> extends ReactSelectProps<OptionType> {
   options: OptionType[];
+  label?: string;
+  name?: string;
+  hasHiddenLabel?: boolean;
 }
 
 const OptionComponent = <OptionType extends SelectOption>({
@@ -20,10 +24,13 @@ const OptionComponent = <OptionType extends SelectOption>({
   );
 };
 
-export const Select = <OptionType extends SelectOption>({
+const Select = <OptionType extends SelectOption>({
   classNamePrefix = 'select',
   className,
   components: customComponents,
+  label,
+  hasHiddenLabel,
+  name,
   ...props
 }: SelectProps<OptionType>) => {
   const defaultComponents = {
@@ -41,3 +48,7 @@ export const Select = <OptionType extends SelectOption>({
     />
   );
 };
+
+const LabeledSelect = withLabel(Select);
+
+export { LabeledSelect as Select };

package/src/components/forms/subcomponents/Label.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 
 export interface LabelProps {
-  label: string;
+  label?: string;
   name: string;
   isRequired?: boolean;
   hasHiddenLabel?: boolean;

package/src/index.ts

@@ -47,3 +47,5 @@ export type {
   Row as TanstackTableRowType,
   Table as TanstackTableType,
 } from '@tanstack/react-table';
+export type { DateRange } from 'react-day-picker';
+export type { SelectOption } from './components/forms/select/types';