@indico-data/design-system 3.0.7 → 3.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "3.0.7",
+  "version": "3.0.9",
   "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/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 {

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

@@ -13,6 +13,34 @@ const meta: Meta<typeof SingleInputDatePicker> = {
     ),
   ],
   argTypes: {
+    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.',

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

@@ -24,7 +24,11 @@ export interface SingleInputDatePickerProps {
   isClearable?: boolean;
   inputPlaceholder?: string;
   errorMessage?: string | undefined;
+  hasHiddenLabel?: boolean;
   'data-testid'?: string;
+  ref?: React.LegacyRef<HTMLInputElement>;
+  isReadOnly?: boolean;
+  tabIndex?: number;
 }
 
 export function SingleInputDatePicker(props: SingleInputDatePickerProps) {
@@ -46,6 +50,10 @@ export function SingleInputDatePicker(props: SingleInputDatePickerProps) {
     isClearable,
     errorMessage,
     onSelect,
+    hasHiddenLabel,
+    ref,
+    isReadOnly,
+    tabIndex,
     ...rest
   } = props;
 
@@ -97,12 +105,16 @@ export function SingleInputDatePicker(props: SingleInputDatePickerProps) {
         value={localTextValue}
         placeholder={inputPlaceholder}
         isDisabled={isDisabled}
+        hasHiddenLabel={hasHiddenLabel}
         iconName={inputIconName}
         isClearable={isClearable}
         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,62 @@ const meta: Meta<typeof InputDateRangePicker> = {
     ),
   ],
   argTypes: {
+    toTabIndex: {
+      control: 'number',
+      description: 'The tab index of the to input field.',
+      table: {
+        category: 'Props',
+      },
+    },
+    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.',
+      table: {
+        category: 'Props',
+      },
+    },
+    gutterWidth: {
+      control: 'number',
+      description: 'The gutter width for the date picker.',
+      table: {
+        category: 'Props',
+      },
+    },
+    setIsOpen: {
+      control: 'boolean',
+      description: 'Whether the date picker is open.',
+      table: {
+        category: 'Props',
+      },
+    },
     ariaLabel: {
       control: 'text',
       description: 'A label for assistive technologies.',

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

@@ -32,6 +32,12 @@ interface InputDateRangePickerProps {
   toLabel?: string;
   closeOnSelect?: boolean;
   clearOnClose?: boolean;
+  hasHiddenLabel?: boolean;
+  ref?: React.LegacyRef<HTMLInputElement>;
+  isFromReadOnly?: boolean;
+  isToReadOnly?: boolean;
+  toTabIndex?: number;
+  fromTabIndex?: number;
 }
 
 export function InputDateRangePicker(props: InputDateRangePickerProps) {
@@ -57,6 +63,12 @@ export function InputDateRangePicker(props: InputDateRangePickerProps) {
     toLabel,
     closeOnSelect,
     clearOnClose,
+    hasHiddenLabel,
+    ref,
+    isFromReadOnly,
+    isToReadOnly,
+    toTabIndex,
+    fromTabIndex,
     ...rest
   } = props;
 
@@ -151,6 +163,10 @@ export function InputDateRangePicker(props: InputDateRangePickerProps) {
             label={fromLabel}
             name={'From Date'}
             data-testid="date-picker-from"
+            hasHiddenLabel={hasHiddenLabel}
+            ref={ref}
+            readonly={isFromReadOnly}
+            tabIndex={fromTabIndex}
           />
         </Col>
         <Col>
@@ -165,6 +181,10 @@ export function InputDateRangePicker(props: InputDateRangePickerProps) {
             label={toLabel}
             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,50 @@ const meta: Meta<typeof SingleInputDateTimePicker> = {
     ),
   ],
   argTypes: {
+    dateTabIndex: {
+      control: 'number',
+      description: 'The tab index of the date input field.',
+      table: {
+        category: 'Props',
+      },
+    },
+    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.',
+      table: {
+        category: 'Props',
+      },
+    },
+
     timeValue: {
       control: 'text',
       description: 'The time value to display.',

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

@@ -27,8 +27,14 @@ export interface SingleInputDateTimePickerProps {
   inputPlaceholder?: string;
   errorMessage?: string | undefined;
   'data-testid'?: string;
+  hasHiddenLabel?: boolean;
   timeValue?: string;
   onTimeChange?: (time: string) => void;
+  isReadOnly?: boolean;
+  ref?: React.LegacyRef<HTMLInputElement>;
+  timePickerRef?: React.LegacyRef<HTMLInputElement>;
+  dateTabIndex?: number;
+  timeTabIndex?: number;
 }
 
 export function SingleInputDateTimePicker(props: SingleInputDateTimePickerProps) {
@@ -52,6 +58,12 @@ export function SingleInputDateTimePicker(props: SingleInputDateTimePickerProps)
     onSelect,
     timeValue,
     onTimeChange,
+    hasHiddenLabel,
+    isReadOnly,
+    timePickerRef,
+    dateTabIndex,
+    timeTabIndex,
+    ref,
     ...rest
   } = props;
 
@@ -101,21 +113,25 @@ 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}>
           <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}
             errorMessage={errorMessage}
-            hasHiddenLabel
+            hasHiddenLabel={hasHiddenLabel}
             label={'Single Date Picker'}
             name={`${id}-date-picker`}
+            tabIndex={dateTabIndex}
           />
           <DatePicker
             captionLayout={captionLayout}
@@ -124,16 +140,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>

package/src/components/forms/timePicker/TimePicker.tsx

@@ -3,19 +3,31 @@ import { Input } from '../input/Input';
 import { formatTimeValue, validateInputValue } from './helpers';
 
 interface TimePickerProps {
+  ref?: React.LegacyRef<HTMLInputElement>;
   timeValue?: string;
   label?: string;
   name?: string;
   hasHiddenLabel?: boolean;
   onTimeChange?: (time: string) => void;
+  className?: string;
+  isReadOnly?: boolean;
+  isDisabled?: boolean;
+  tabIndex?: number;
+  [key: string]: unknown;
 }
 
 export const TimePicker = ({
+  ref,
   timeValue = '',
   label = 'Time Picker',
   name = 'time-picker',
   hasHiddenLabel = false,
   onTimeChange,
+  className,
+  isDisabled,
+  isReadOnly,
+  tabIndex,
+  ...rest
 }: TimePickerProps) => {
   const [validationError, setValidationError] = useState('');
   const [inputValue, setInputValue] = useState(timeValue);
@@ -46,6 +58,9 @@ export const TimePicker = ({
   return (
     <div className="time-input-wrapper">
       <Input
+        ref={ref}
+        tabIndex={tabIndex}
+        className={className}
         data-testid={`${name}-input`}
         label={label}
         hasHiddenLabel={hasHiddenLabel}
@@ -55,6 +70,9 @@ export const TimePicker = ({
         onBlur={handleBlur}
         name={name}
         errorMessage={validationError}
+        readonly={isReadOnly}
+        isDisabled={isDisabled}
+        {...rest}
       />
     </div>
   );

package/src/index.ts

@@ -20,6 +20,7 @@ export { TimePicker } from './components/forms/timePicker';
 export { IconTriggerDatePicker } from './components/forms/date/iconTriggerDatePicker';
 export { SingleInputDatePicker } from './components/forms/date/inputDatePicker';
 export { InputDateRangePicker } from './components/forms/date/inputDateRangePicker';
+export { SingleInputDateTimePicker } from './components/forms/date/inputDateTimePicker';
 export { Form } from './components/forms/form';
 export { Skeleton } from './components/skeleton';
 export { Card } from './components/card';

package/src/storybook/formArgTypes.ts

@@ -49,6 +49,13 @@ const labelArgTypes: ArgTypes = {
 };
 
 const baseInputArgTypes: ArgTypes = {
+  readonly: {
+    control: 'boolean',
+    description: 'Whether the input is read only.',
+    table: {
+      category: 'Props',
+    },
+  },
   onChange: {
     control: false,
     description: 'onChange event handler',
@@ -148,6 +155,13 @@ const baseInputArgTypes: ArgTypes = {
 
 const inputArgTypes: ArgTypes = {
   ...baseInputArgTypes,
+  tabIndex: {
+    control: 'number',
+    description: 'The tab index of the input field.',
+    table: {
+      category: 'Props',
+    },
+  },
   iconName: {
     control: 'select',
     options: iconNames,