@indico-data/design-system 3.0.8 → 3.0.10

package/package.json

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

package/src/components/floatUI/FloatUI.tsx

@@ -26,6 +26,7 @@ export function FloatUI({
   isPortal = false,
   portalOptions = {},
   floatingOptions = defaultOptions,
+  className,
 }: FloatUIProps) {
   const [internalIsOpen, setInternalIsOpen] = useState(false);
 
@@ -71,7 +72,7 @@ export function FloatUI({
       style={floatingStyles}
       role="dialog"
       aria-label={ariaLabel}
-      className="floatui-container"
+      className={`floatui-container ${className}`}
     >
       <div ref={floatUIContentRef} className="floatui-content">
         {content}

package/src/components/floatUI/types.ts

@@ -6,6 +6,7 @@ export type FloatUIProps = {
   ariaLabel: string;
   floatingOptions?: UseFloatingOptions;
   isOpen?: boolean;
+  className?: string;
   isPortal?: boolean;
   portalOptions?: {
     rootId?: string;

package/src/components/forms/date/datePicker/DatePicker.tsx

@@ -34,6 +34,10 @@ export const DatePicker = (props: DatePickerProps) => {
     onNextClick,
     onPrevClick,
     onDayClick,
+    isReadOnly,
+    ref,
+    timeTabIndex,
+    dateTabIndex,
     ...rest
   } = props;
 
@@ -90,7 +94,13 @@ export const DatePicker = (props: DatePickerProps) => {
               <p className="ma-0">Select Time</p>
             </Col>
             <Col>
-              <TimePicker timeValue={timeValue ?? ''} onTimeChange={handleTimeChange} />
+              <TimePicker
+                ref={ref}
+                timeValue={timeValue ?? ''}
+                onTimeChange={handleTimeChange}
+                readonly={isReadOnly}
+                tabIndex={timeTabIndex}
+              />
             </Col>
           </Row>
         </div>

package/src/components/forms/date/datePicker/styles/DatePicker.scss

@@ -89,3 +89,13 @@
   margin-bottom: var(--pf-margin-3);
   width: 348px;
 }
+
+.time-validation-error {
+  background-color: var(--pf-tooltip-background-color);
+  color: var(--pf-tooltip-font-color);
+  padding: var(--pf-padding-2);
+  border-radius: var(--pf-rounded);
+  width: 200px;
+  box-shadow: var(--pf-dropshadow);
+  font-size: var(--pf-font-size-overline);
+}

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

@@ -10,6 +10,7 @@ import {
 } from 'react-day-picker';
 
 export interface DatePickerProps {
+  ref?: React.LegacyRef<HTMLInputElement>;
   selected?: Date | DateRange | undefined;
   onSelect?: OnSelectHandler<Date> | OnSelectHandler<DateRange>;
   mode?: Mode;
@@ -37,6 +38,9 @@ export interface DatePickerProps {
   onNextClick?: MonthChangeEventHandler;
   onPrevClick?: MonthChangeEventHandler;
   onDayClick?: DayEventHandler<React.MouseEvent>;
+  isReadOnly?: boolean;
+  timeTabIndex?: number;
+  dateTabIndex?: number;
 }
 
 export interface CommonProps {
@@ -60,3 +64,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,6 +14,36 @@ const meta: Meta<typeof IconTriggerDatePicker> = {
     ),
   ],
   argTypes: {
+    isPortal: {
+      control: 'boolean',
+      description: 'Whether the date picker is a portal.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean',
+        },
+      },
+    },
+    portalOptions: {
+      control: false,
+      description: 'The portal options for the date picker. Follows floating-ui options.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: '{ rootId?: string }',
+        },
+      },
+    },
+    floatingOptions: {
+      control: false,
+      description: 'The floating options for the date picker. Follows floating-ui options.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: '{ placement?: Placement; middleware?: Middleware[] }',
+        },
+      },
+    },
     ariaLabel: {
       control: 'text',
       description: 'A label for assistive technologies.',

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

@@ -4,6 +4,8 @@ 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 {
   mode?: Mode;
   ariaLabel: string;
@@ -21,6 +23,9 @@ interface Props {
   className?: string;
   initialMonth?: Date;
   'data-testid'?: string;
+  portalOptions?: PortalOptions;
+  isPortal?: boolean;
+  floatingOptions?: UseFloatingOptions;
 }
 
 export const IconTriggerDatePicker = (props: Props) => {
@@ -40,6 +45,9 @@ export const IconTriggerDatePicker = (props: Props) => {
     isOpen,
     clearOnClose,
     initialMonth,
+    portalOptions,
+    floatingOptions,
+    isPortal,
     ...rest
   } = props;
 
@@ -61,7 +69,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,6 +13,57 @@ const meta: Meta<typeof SingleInputDatePicker> = {
     ),
   ],
   argTypes: {
+    isPortal: {
+      control: 'boolean',
+      description: 'Whether the date picker is a portal.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean',
+        },
+      },
+    },
+    portalOptions: {
+      control: false,
+      description: 'The portal options for the date picker. Follows floating-ui options.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: '{ rootId?: string }',
+        },
+      },
+    },
+    floatingOptions: {
+      control: false,
+      description: 'The floating options for the date picker. Follows floating-ui options.',
+      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.',

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

@@ -5,7 +5,8 @@ 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 {
   ariaLabel: string;
   disableBeforeDate?: Date;
@@ -26,6 +27,12 @@ export interface SingleInputDatePickerProps {
   errorMessage?: string | undefined;
   hasHiddenLabel?: boolean;
   'data-testid'?: string;
+  ref?: React.LegacyRef<HTMLInputElement>;
+  isReadOnly?: boolean;
+  tabIndex?: number;
+  portalOptions?: PortalOptions;
+  floatingOptions?: UseFloatingOptions;
+  isPortal?: boolean;
 }
 
 export function SingleInputDatePicker(props: SingleInputDatePickerProps) {
@@ -48,6 +55,12 @@ export function SingleInputDatePicker(props: SingleInputDatePickerProps) {
     errorMessage,
     onSelect,
     hasHiddenLabel,
+    ref,
+    isReadOnly,
+    tabIndex,
+    portalOptions,
+    floatingOptions,
+    isPortal,
     ...rest
   } = props;
 
@@ -93,7 +106,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}
@@ -105,7 +124,10 @@ export function SingleInputDatePicker(props: SingleInputDatePickerProps) {
         onChange={handleInputChange}
         errorMessage={errorMessage}
         label={'Single Date Picker'}
+        tabIndex={tabIndex}
         name={'Date Picker'}
+        ref={ref}
+        readonly={isReadOnly}
       />
       <DatePicker
         captionLayout={captionLayout}

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

@@ -15,6 +15,64 @@ const meta: Meta<typeof InputDateRangePicker> = {
     ),
   ],
   argTypes: {
+    isPortal: {
+      control: 'boolean',
+      description: 'Whether the date picker is a portal.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean',
+        },
+      },
+    },
+    portalOptions: {
+      control: false,
+      description: 'The portal options for the date picker. Follows floating-ui options.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: '{ rootId?: string }',
+        },
+      },
+    },
+    floatingOptions: {
+      control: false,
+      description: 'The floating options for the date picker. Follows floating-ui options.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: '{ placement?: Placement; middleware?: Middleware[] }',
+        },
+      },
+    },
+    fromTabIndex: {
+      control: 'number',
+      description: 'The tab index of the from input field.',
+      table: {
+        category: 'Props',
+      },
+    },
+    ref: {
+      control: false,
+      description: 'The ref of the input field.',
+      table: {
+        category: 'Props',
+      },
+    },
+    isFromReadOnly: {
+      control: 'boolean',
+      description: 'Whether the from input is read only.',
+      table: {
+        category: 'Props',
+      },
+    },
+    isToReadOnly: {
+      control: 'boolean',
+      description: 'Whether the to input is read only.',
+      table: {
+        category: 'Props',
+      },
+    },
     hasHiddenLabel: {
       control: 'boolean',
       description: 'Whether the label is hidden.',

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

@@ -8,7 +8,8 @@ import { FloatUI } from '../../../floatUI';
 import { Col, Row } from '../../../grid';
 import { formatDateAsString } from '../inputDatePicker/helpers';
 import { Button } from '../../../button';
-
+import { UseFloatingOptions } from '@floating-ui/react-dom';
+import { PortalOptions } from '../datePicker/types';
 interface InputDateRangePickerProps {
   ariaLabel: string;
   disableBeforeDate?: Date;
@@ -33,6 +34,14 @@ interface InputDateRangePickerProps {
   closeOnSelect?: boolean;
   clearOnClose?: boolean;
   hasHiddenLabel?: boolean;
+  ref?: React.LegacyRef<HTMLInputElement>;
+  isFromReadOnly?: boolean;
+  isToReadOnly?: boolean;
+  toTabIndex?: number;
+  fromTabIndex?: number;
+  portalOptions?: PortalOptions;
+  floatingOptions?: UseFloatingOptions;
+  isPortal?: boolean;
 }
 
 export function InputDateRangePicker(props: InputDateRangePickerProps) {
@@ -59,6 +68,14 @@ export function InputDateRangePicker(props: InputDateRangePickerProps) {
     closeOnSelect,
     clearOnClose,
     hasHiddenLabel,
+    ref,
+    isFromReadOnly,
+    isToReadOnly,
+    toTabIndex,
+    fromTabIndex,
+    portalOptions,
+    floatingOptions,
+    isPortal,
     ...rest
   } = props;
 
@@ -139,7 +156,13 @@ export function InputDateRangePicker(props: InputDateRangePickerProps) {
   };
 
   return (
-    <FloatUI isOpen={isOpen} setIsOpen={setIsOpen} ariaLabel={ariaLabel}>
+    <FloatUI
+      isOpen={isOpen}
+      setIsOpen={setIsOpen}
+      ariaLabel={ariaLabel}
+      portalOptions={portalOptions}
+      floatingOptions={floatingOptions}
+    >
       <Row gutterWidth={gutterWidth}>
         <Col>
           <Input
@@ -154,6 +177,9 @@ export function InputDateRangePicker(props: InputDateRangePickerProps) {
             name={'From Date'}
             data-testid="date-picker-from"
             hasHiddenLabel={hasHiddenLabel}
+            ref={ref}
+            readonly={isFromReadOnly}
+            tabIndex={fromTabIndex}
           />
         </Col>
         <Col>
@@ -169,6 +195,9 @@ export function InputDateRangePicker(props: InputDateRangePickerProps) {
             name={'To Date'}
             data-testid="date-picker-to"
             hasHiddenLabel={hasHiddenLabel}
+            ref={ref}
+            readonly={isToReadOnly}
+            tabIndex={toTabIndex}
           />
         </Col>
       </Row>

package/src/components/forms/date/inputDateTimePicker/SingleInputDateTimePicker.stories.tsx

@@ -20,6 +20,65 @@ const meta: Meta<typeof SingleInputDateTimePicker> = {
     ),
   ],
   argTypes: {
+    isPortal: {
+      control: 'boolean',
+      description: 'Whether the date picker is a portal.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean',
+        },
+      },
+    },
+    portalOptions: {
+      control: false,
+      description: 'The portal options for the date picker. Follows floating-ui options.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: '{ rootId?: string }',
+        },
+      },
+    },
+    floatingOptions: {
+      control: false,
+      description: 'The floating options for the date picker. Follows floating-ui options.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: '{ placement?: Placement; middleware?: Middleware[] }',
+        },
+      },
+    },
+    timeTabIndex: {
+      control: 'number',
+      description: 'The tab index of the time input field.',
+      table: {
+        category: 'Props',
+      },
+    },
+    ref: {
+      control: false,
+      description: 'The ref of the input field.',
+      table: {
+        category: 'Props',
+      },
+    },
+    timePickerRef: {
+      control: false,
+      description: 'The ref of the time picker 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.',

package/src/components/forms/date/inputDateTimePicker/SingleInputDateTimePicker.tsx

@@ -7,6 +7,8 @@ import { FloatUI } from '../../../floatUI';
 import { formatDateAsString } from './helpers';
 import { TimePicker } from '../../timePicker/TimePicker';
 import { Row, Col } from '../../../grid';
+import { UseFloatingOptions } from '@floating-ui/react-dom';
+import { PortalOptions } from '../datePicker/types';
 
 export interface SingleInputDateTimePickerProps {
   ariaLabel: string;
@@ -30,6 +32,14 @@ export interface SingleInputDateTimePickerProps {
   hasHiddenLabel?: boolean;
   timeValue?: string;
   onTimeChange?: (time: string) => void;
+  isReadOnly?: boolean;
+  ref?: React.LegacyRef<HTMLInputElement>;
+  timePickerRef?: React.LegacyRef<HTMLInputElement>;
+  dateTabIndex?: number;
+  timeTabIndex?: number;
+  portalOptions?: PortalOptions;
+  floatingOptions?: UseFloatingOptions;
+  isPortal?: boolean;
 }
 
 export function SingleInputDateTimePicker(props: SingleInputDateTimePickerProps) {
@@ -54,6 +64,14 @@ export function SingleInputDateTimePicker(props: SingleInputDateTimePickerProps)
     timeValue,
     onTimeChange,
     hasHiddenLabel,
+    isReadOnly,
+    timePickerRef,
+    dateTabIndex,
+    timeTabIndex,
+    ref,
+    portalOptions,
+    floatingOptions,
+    isPortal,
     ...rest
   } = props;
 
@@ -103,14 +121,24 @@ export function SingleInputDateTimePicker(props: SingleInputDateTimePickerProps)
   };
 
   return (
-    <Row>
-      <Col>
-        <FloatUI isOpen={isOpen} ariaLabel={ariaLabel}>
+    <Row className="date-time-picker-row">
+      <Col className="date-picker-col">
+        <FloatUI
+          className="date-picker-float-ui"
+          isOpen={isOpen}
+          ariaLabel={ariaLabel}
+          isPortal={isPortal}
+          portalOptions={portalOptions}
+          floatingOptions={floatingOptions}
+        >
           <Input
+            ref={ref}
+            className={`date-picker-input`}
             id={inputId}
             value={localTextValue}
             placeholder={inputPlaceholder}
-            isDisabled={isDisabled}
+            isDisabled={isReadOnly || isDisabled}
+            readonly={isReadOnly}
             iconName={inputIconName}
             isClearable={isClearable}
             onChange={handleInputChange}
@@ -118,6 +146,7 @@ export function SingleInputDateTimePicker(props: SingleInputDateTimePickerProps)
             hasHiddenLabel={hasHiddenLabel}
             label={'Single Date Picker'}
             name={`${id}-date-picker`}
+            tabIndex={dateTabIndex}
           />
           <DatePicker
             captionLayout={captionLayout}
@@ -126,16 +155,22 @@ export function SingleInputDateTimePicker(props: SingleInputDateTimePickerProps)
             onSelect={handleDayPickerSelect}
             month={localMonth}
             onMonthChange={setLocalMonth}
+            isReadOnly={isReadOnly}
             {...rest}
           />
         </FloatUI>
       </Col>
-      <Col xs="content">
+      <Col xs="content" className="time-picker-col">
         <TimePicker
+          ref={timePickerRef}
+          className={`time-picker-input`}
           timeValue={timeValue}
           name={`${id}-time-picker`}
           hasHiddenLabel
           onTimeChange={handleTimeChange}
+          isReadOnly={isReadOnly}
+          isDisabled={isDisabled}
+          tabIndex={timeTabIndex}
         />
       </Col>
     </Row>

package/src/components/forms/input/Input.tsx

@@ -22,6 +22,7 @@ export interface BaseInputProps {
   isClearable?: boolean;
   className?: string;
   defaultValue?: string;
+  tabIndex?: number;
 }
 
 export interface InputProps extends BaseInputProps, LabelProps {}
@@ -40,6 +41,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       helpText,
       maxLength,
       iconName,
+      tabIndex,
       onChange,
       onBlur,
       onKeyDown,
@@ -71,6 +73,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
           )}
           <input
             ref={ref}
+            tabIndex={tabIndex}
             id={id}
             data-testid={`form-input-${name}`}
             name={name}

package/src/components/forms/textarea/Textarea.tsx

@@ -21,6 +21,7 @@ export interface TextareaProps extends LabelProps {
   maxLength?: number;
   autofocus?: boolean;
   defaultValue?: string;
+  tabIndex?: number;
 }
 const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   (
@@ -44,6 +45,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       maxLength,
       autofocus,
       defaultValue,
+      tabIndex,
       ...rest
     },
     ref,
@@ -76,6 +78,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
             aria-required={isRequired}
             value={value}
             defaultValue={defaultValue}
+            tabIndex={tabIndex}
             {...rest}
           />
         </div>