@indico-data/design-system 3.0.9 → 3.1.0

package/src/components/forms/date/datePicker/types.ts

@@ -11,16 +11,23 @@ import {
 
 export interface DatePickerProps {
   ref?: React.LegacyRef<HTMLInputElement>;
+  /** The selected day(s). */
   selected?: Date | DateRange | undefined;
+  /** Event handler when a day is selected. */
   onSelect?: OnSelectHandler<Date> | OnSelectHandler<DateRange>;
+  /** Allows you to select a single day, a range of days, or multiple days. */
   mode?: Mode;
+  /** Accepts a CSS class name */
   className?: string;
+  /** The layout of the caption. Enables you to add or remove the dropdown navigation for months/years */
   captionLayout?: 'dropdown' | 'dropdown-months' | 'dropdown-years' | 'label';
   id?: string;
   month?: Date;
   defaultMonth?: Date;
   startMonth?: Date | undefined;
+  /** Whether to show the time picker. */
   hasTimePicker?: boolean;
+  /** The time value to display in the date picker. */
   timeValue?: string;
   endMonth?: Date;
   components?: Partial<CustomComponents>;
@@ -31,8 +38,11 @@ export interface DatePickerProps {
   firstWeekContainsDate?: 1 | 4;
   today?: Date;
   isRequired?: any;
+  /** The minimum date that can be selected. */
   min?: number;
+  /** The maximum date that can be selected. */
   max?: number;
+  /** Callback when the time changes. */
   onTimeChange?: (time: string) => void;
   onMonthChange?: MonthChangeEventHandler;
   onNextClick?: MonthChangeEventHandler;
@@ -64,3 +74,7 @@ export interface CommonProps {
   onPrevClick?: MonthChangeEventHandler;
   onDayClick?: DayEventHandler<React.MouseEvent>;
 }
+
+export interface PortalOptions {
+  rootId?: string;
+}

package/src/components/forms/date/iconTriggerDatePicker/IconTriggerDatePicker.stories.tsx

@@ -14,9 +14,35 @@ const meta: Meta<typeof IconTriggerDatePicker> = {
     ),
   ],
   argTypes: {
+    isPortal: {
+      control: 'boolean',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean',
+        },
+      },
+    },
+    portalOptions: {
+      control: false,
+      table: {
+        category: 'Props',
+        type: {
+          summary: '{ rootId?: string }',
+        },
+      },
+    },
+    floatingOptions: {
+      control: false,
+      table: {
+        category: 'Props',
+        type: {
+          summary: '{ placement?: Placement; middleware?: Middleware[] }',
+        },
+      },
+    },
     ariaLabel: {
       control: 'text',
-      description: 'A label for assistive technologies.',
       table: {
         category: 'Props',
         type: {
@@ -26,7 +52,6 @@ const meta: Meta<typeof IconTriggerDatePicker> = {
     },
     className: {
       control: false,
-      description: 'Accepts a CSS class name',
       table: {
         category: 'Props',
         type: {
@@ -36,7 +61,6 @@ const meta: Meta<typeof IconTriggerDatePicker> = {
     },
     id: {
       control: 'text',
-      description: 'The id of the input field.',
       table: {
         category: 'Props',
         type: {
@@ -46,7 +70,6 @@ const meta: Meta<typeof IconTriggerDatePicker> = {
     },
     label: {
       control: 'text',
-      description: 'The label for the input field.',
       table: {
         category: 'Props',
         type: {
@@ -56,7 +79,6 @@ const meta: Meta<typeof IconTriggerDatePicker> = {
     },
     triggerIcon: {
       control: 'text',
-      description: 'The icon to use as a trigger.',
       table: {
         category: 'Props',
         type: {
@@ -67,17 +89,15 @@ const meta: Meta<typeof IconTriggerDatePicker> = {
     triggerIconSize: {
       control: 'select',
       options: ['sm', 'md', 'lg'],
-      description: 'The size of the trigger icon.',
       table: {
         category: 'Props',
         type: {
-          summary: 'IconSizes',
+          summary: 'sm | md | lg',
         },
       },
     },
     isOpen: {
-      control: false,
-      description: 'Whether the date picker is open.',
+      control: 'boolean',
       table: {
         category: 'Props',
         type: {
@@ -87,18 +107,16 @@ const meta: Meta<typeof IconTriggerDatePicker> = {
     },
     selected: {
       control: 'date',
-      description: 'The selected day(s).',
       table: {
         category: 'Props',
         type: {
-          summary: 'Date | Date[] | DateRange | undefined',
+          summary: 'Date | DateRange | undefined',
         },
       },
     },
     mode: {
       control: 'select',
       options: ['single', 'range', 'multiple'],
-      description: 'Allows you to select a single day, a range of days, or multiple days.',
       table: {
         category: 'Props',
         type: {
@@ -108,7 +126,6 @@ const meta: Meta<typeof IconTriggerDatePicker> = {
     },
     clearOnClose: {
       control: 'boolean',
-      description: 'Clear the selected date(s) when the date picker closes.',
       table: {
         category: 'Props',
         type: {
@@ -118,7 +135,6 @@ const meta: Meta<typeof IconTriggerDatePicker> = {
     },
     disableAfterDate: {
       control: 'date',
-      description: 'Disable dates after this date.',
       table: {
         category: 'Props',
         type: {
@@ -128,7 +144,6 @@ const meta: Meta<typeof IconTriggerDatePicker> = {
     },
     disableBeforeDate: {
       control: 'date',
-      description: 'Disable dates before this date.',
       table: {
         category: 'Props',
         type: {
@@ -138,7 +153,6 @@ const meta: Meta<typeof IconTriggerDatePicker> = {
     },
     isDisabled: {
       control: 'boolean',
-      description: 'Disable the date picker.',
       table: {
         category: 'Props',
         type: {
@@ -153,11 +167,10 @@ const meta: Meta<typeof IconTriggerDatePicker> = {
     },
     onSelect: {
       control: false,
-      description: 'Event handler when a day is selected.',
       table: {
-        category: 'Callbacks',
+        category: 'Events',
         type: {
-          summary: 'OnSelectHandler<Date> | OnSelectHandler<DateRange>',
+          summary: '(selected: Date | DateRange | undefined) => void',
         },
       },
       action: 'onSelect',

package/src/components/forms/date/iconTriggerDatePicker/IconTriggerDatePicker.tsx

@@ -4,23 +4,44 @@ import { IconName, IconSizes } from '../../../icons/types';
 import { FloatUI } from '../../../floatUI';
 import { DatePicker } from '../datePicker/DatePicker';
 import { Icon } from '../../../icons/Icon';
+import { UseFloatingOptions } from '@floating-ui/react-dom';
+import { PortalOptions } from '../datePicker/types';
 interface Props {
+  /** Allows you to select a single day, a range of days, or multiple days. */
   mode?: Mode;
+  /** A label for assistive technologies. */
   ariaLabel: string;
+  /** Disable dates before this date. */
   disableBeforeDate?: Date;
+  /** Disable dates after this date. */
   disableAfterDate?: Date;
+  /** Disable the date picker. */
   isDisabled?: boolean;
+  /** The id of the input field. */
   id: string;
+  /** The label for the input field. */
   label?: string;
+  /** Event handler when a day is selected. */
   onSelect?: (selected: Date | DateRange | undefined) => void;
   selected?: Date | DateRange | undefined;
+  /** The icon to use as a trigger. */
   triggerIcon: IconName;
+  /** The size of the trigger icon. */
   triggerIconSize: IconSizes;
+  /** Whether the date picker is open. */
   isOpen?: boolean;
+  /** Clear the selected date(s) when the date picker closes. */
   clearOnClose?: boolean;
+  /** Accepts a CSS class name */
   className?: string;
   initialMonth?: Date;
   'data-testid'?: string;
+  /** The portal options for the date picker. Follows floating-ui options. */
+  portalOptions?: PortalOptions;
+  /** Whether the date picker is a portal. */
+  isPortal?: boolean;
+  /** The floating options for the date picker. Follows floating-ui options. */
+  floatingOptions?: UseFloatingOptions;
 }
 
 export const IconTriggerDatePicker = (props: Props) => {
@@ -40,6 +61,9 @@ export const IconTriggerDatePicker = (props: Props) => {
     isOpen,
     clearOnClose,
     initialMonth,
+    portalOptions,
+    floatingOptions,
+    isPortal,
     ...rest
   } = props;
 
@@ -61,7 +85,13 @@ export const IconTriggerDatePicker = (props: Props) => {
   }, [isOpen, clearOnClose]);
 
   return (
-    <FloatUI isOpen={isOpen} ariaLabel={ariaLabel}>
+    <FloatUI
+      isOpen={isOpen}
+      ariaLabel={ariaLabel}
+      isPortal={isPortal}
+      portalOptions={portalOptions}
+      floatingOptions={floatingOptions}
+    >
       <Icon
         aria-label="Open date picker"
         name={triggerIcon}

package/src/components/forms/date/inputDatePicker/SingleInputDatePicker.stories.tsx

@@ -13,37 +13,59 @@ const meta: Meta<typeof SingleInputDatePicker> = {
     ),
   ],
   argTypes: {
+    isPortal: {
+      control: 'boolean',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean',
+        },
+      },
+    },
+    portalOptions: {
+      control: false,
+      table: {
+        category: 'Props',
+        type: {
+          summary: '{ rootId?: string }',
+        },
+      },
+    },
+    floatingOptions: {
+      control: false,
+      table: {
+        category: 'Props',
+        type: {
+          summary: '{ placement?: Placement; middleware?: Middleware[] }',
+        },
+      },
+    },
     tabIndex: {
       control: 'number',
-      description: 'The tab index of the input field.',
       table: {
         category: 'Props',
       },
     },
     ref: {
       control: false,
-      description: 'The ref of the input field.',
       table: {
         category: 'Props',
       },
     },
     isReadOnly: {
       control: 'boolean',
-      description: 'Whether the date picker is read only.',
       table: {
         category: 'Props',
       },
     },
     hasHiddenLabel: {
       control: 'boolean',
-      description: 'Whether the label is hidden.',
       table: {
         category: 'Props',
       },
     },
     ariaLabel: {
       control: 'text',
-      description: 'A label for assistive technologies.',
       table: {
         category: 'Props',
         type: {
@@ -54,8 +76,6 @@ const meta: Meta<typeof SingleInputDatePicker> = {
     captionLayout: {
       control: 'select',
       options: ['dropdown', 'dropdown-months', 'dropdown-years', 'label'],
-      description:
-        'The layout of the caption. Enables you to add or remove the dropdown navigation for months/years',
       table: {
         category: 'Props',
         type: {
@@ -65,7 +85,6 @@ const meta: Meta<typeof SingleInputDatePicker> = {
     },
     className: {
       control: false,
-      description: 'Accepts a CSS class name',
       table: {
         category: 'Props',
         type: {
@@ -75,7 +94,6 @@ const meta: Meta<typeof SingleInputDatePicker> = {
     },
     id: {
       control: 'text',
-      description: 'The id of the input field.',
       table: {
         category: 'Props',
         type: {
@@ -85,7 +103,6 @@ const meta: Meta<typeof SingleInputDatePicker> = {
     },
     label: {
       control: 'text',
-      description: 'The label for the input field.',
       table: {
         category: 'Props',
         type: {
@@ -95,7 +112,6 @@ const meta: Meta<typeof SingleInputDatePicker> = {
     },
     onSelect: {
       action: 'selected',
-      description: 'Callback function that is called when a date is selected.',
       table: {
         category: 'Events',
         type: {
@@ -105,7 +121,6 @@ const meta: Meta<typeof SingleInputDatePicker> = {
     },
     selected: {
       control: 'date',
-      description: 'The selected date.',
       table: {
         category: 'Props',
         type: {
@@ -115,7 +130,6 @@ const meta: Meta<typeof SingleInputDatePicker> = {
     },
     inputPlaceholder: {
       control: 'text',
-      description: 'The placeholder text for the input field.',
       table: {
         category: 'Props',
         type: {
@@ -125,7 +139,6 @@ const meta: Meta<typeof SingleInputDatePicker> = {
     },
     inputIconName: {
       control: 'text',
-      description: 'The icon to display in the input field.',
       table: {
         category: 'Props',
         type: {
@@ -135,7 +148,6 @@ const meta: Meta<typeof SingleInputDatePicker> = {
     },
     isClearable: {
       control: 'boolean',
-      description: 'Whether the input field should be clearable.',
       table: {
         category: 'Props',
         type: {
@@ -145,7 +157,6 @@ const meta: Meta<typeof SingleInputDatePicker> = {
     },
     isOpen: {
       control: false,
-      description: 'Whether the date picker is open.',
       table: {
         category: 'Props',
         type: {
@@ -155,7 +166,6 @@ const meta: Meta<typeof SingleInputDatePicker> = {
     },
     clearOnClose: {
       control: 'boolean',
-      description: 'Whether the input field should be cleared when the date picker is closed.',
       table: {
         category: 'Props',
         type: {
@@ -165,7 +175,6 @@ const meta: Meta<typeof SingleInputDatePicker> = {
     },
     errorMessage: {
       control: 'text',
-      description: 'An error message to display.',
       table: {
         category: 'Props',
         type: {
@@ -175,7 +184,6 @@ const meta: Meta<typeof SingleInputDatePicker> = {
     },
     disableAfterDate: {
       control: 'date',
-      description: 'Disable dates after this date.',
       table: {
         category: 'Props',
         type: {
@@ -185,7 +193,6 @@ const meta: Meta<typeof SingleInputDatePicker> = {
     },
     disableBeforeDate: {
       control: 'date',
-      description: 'Disable dates before this date.',
       table: {
         category: 'Props',
         type: {
@@ -195,7 +202,6 @@ const meta: Meta<typeof SingleInputDatePicker> = {
     },
     isDisabled: {
       control: 'boolean',
-      description: 'Disable the date picker.',
       table: {
         category: 'Props',
         type: {
@@ -205,7 +211,6 @@ const meta: Meta<typeof SingleInputDatePicker> = {
     },
     initialMonth: {
       control: 'date',
-      description: 'The month to display.',
       table: {
         category: 'Props',
         type: {

package/src/components/forms/date/inputDatePicker/SingleInputDatePicker.tsx

@@ -5,12 +5,15 @@ import { Input } from '../../input';
 import type { IconName } from '../../../icons/types';
 import { FloatUI } from '../../../floatUI';
 import { formatDateAsString } from './helpers';
-
+import { UseFloatingOptions } from '@floating-ui/react-dom';
+import { PortalOptions } from '../datePicker/types';
 export interface SingleInputDatePickerProps {
+  /** A label for assistive technologies. */
   ariaLabel: string;
   disableBeforeDate?: Date;
   disableAfterDate?: Date;
   isDisabled?: boolean;
+  /** The layout of the caption. Enables you to add or remove the dropdown navigation for months/years */
   captionLayout?: 'dropdown' | 'dropdown-months' | 'dropdown-years' | 'label';
   id?: string;
   label?: string;
@@ -19,16 +22,25 @@ export interface SingleInputDatePickerProps {
   selected?: Date;
   isOpen?: boolean;
   clearOnClose?: boolean;
+  /** Accepts a CSS class name */
   className?: string;
   inputIconName?: IconName;
   isClearable?: boolean;
   inputPlaceholder?: string;
   errorMessage?: string | undefined;
+  /** Whether the label is hidden. */
   hasHiddenLabel?: boolean;
   'data-testid'?: string;
+  /** The ref of the input field. */
   ref?: React.LegacyRef<HTMLInputElement>;
+  /** Whether the date picker is read only. */
   isReadOnly?: boolean;
+  /** The tab index of the input field. */
   tabIndex?: number;
+  portalOptions?: PortalOptions;
+  floatingOptions?: UseFloatingOptions;
+  /** Whether the date picker is a portal. */
+  isPortal?: boolean;
 }
 
 export function SingleInputDatePicker(props: SingleInputDatePickerProps) {
@@ -54,6 +66,9 @@ export function SingleInputDatePicker(props: SingleInputDatePickerProps) {
     ref,
     isReadOnly,
     tabIndex,
+    portalOptions,
+    floatingOptions,
+    isPortal,
     ...rest
   } = props;
 
@@ -99,7 +114,13 @@ export function SingleInputDatePicker(props: SingleInputDatePickerProps) {
   }, [isOpen, clearOnClose]);
 
   return (
-    <FloatUI isOpen={isOpen} ariaLabel={ariaLabel}>
+    <FloatUI
+      isOpen={isOpen}
+      ariaLabel={ariaLabel}
+      isPortal={isPortal}
+      portalOptions={portalOptions}
+      floatingOptions={floatingOptions}
+    >
       <Input
         id={inputId}
         value={localTextValue}