@indico-data/design-system 2.37.0 → 2.38.0

package/lib/index.d.ts

@@ -6,10 +6,10 @@ import React$1, { ChangeEvent, MouseEventHandler, ReactElement } from 'react';
 import { PermafrostComponent as PermafrostComponent$1, IconName as IconName$1, IconSizes as IconSizes$1, SemanticColor as SemanticColor$1 } from '@/types';
 import { AriaButtonProps } from '@react-types/button';
 import { AriaRadioProps, RadioGroupProps as RadioGroupProps$1, AriaRadioGroupProps } from '@react-types/radio';
-import { DateRange } from 'react-day-picker';
 import { ContainerProps, RowProps, ColProps } from 'react-grid-system';
 import { TableProps as TableProps$1, Direction as Direction$1, Alignment as Alignment$1 } from 'react-data-table-component';
-import { Props as Props$r } from 'react-select';
+import { Props as Props$q } from 'react-select';
+import { DateRange, OnSelectHandler, Mode, CustomComponents, Matcher, Formatters, MonthChangeEventHandler, DayEventHandler } from 'react-day-picker';
 
 declare const GlobalStyles: () => react_jsx_runtime.JSX.Element;
 
@@ -223,25 +223,25 @@ declare const allColors: {
     readonly backgroundColor: "#182432";
 };
 
-type Props$q = PermafrostComponent$1 & {
+type Props$p = PermafrostComponent$1 & {
     content: React$1.ReactNode;
     header?: React$1.ReactNode | string;
     open?: boolean;
 };
-declare const Accordion: (props: Props$q) => react_jsx_runtime.JSX.Element;
+declare const Accordion: (props: Props$p) => react_jsx_runtime.JSX.Element;
 
-type Props$p = PermafrostComponent$1 & {
+type Props$o = PermafrostComponent$1 & {
     style?: object;
     children: React$1.ReactNode;
 };
-declare const Section: (props: Props$p) => react_jsx_runtime.JSX.Element;
+declare const Section: (props: Props$o) => react_jsx_runtime.JSX.Element;
 
-type Props$o = PermafrostComponent$1 & {
+type Props$n = PermafrostComponent$1 & {
     title?: string;
     style?: object;
     children: React$1.ReactNode;
 };
-declare const SectionBlock: (props: Props$o) => react_jsx_runtime.JSX.Element;
+declare const SectionBlock: (props: Props$n) => react_jsx_runtime.JSX.Element;
 
 type SectionBodyProps = PermafrostComponent$1 & {
     style?: object;
@@ -249,11 +249,11 @@ type SectionBodyProps = PermafrostComponent$1 & {
 };
 declare const SectionBody: (props: SectionBodyProps) => react_jsx_runtime.JSX.Element;
 
-type Props$n = PermafrostComponent$1 & {
+type Props$m = PermafrostComponent$1 & {
     style?: object;
     children?: React$1.ReactNode;
 };
-declare const SectionHeader: (props: Props$n) => react_jsx_runtime.JSX.Element;
+declare const SectionHeader: (props: Props$m) => react_jsx_runtime.JSX.Element;
 
 declare const SectionTable: (props: any) => react_jsx_runtime.JSX.Element;
 
@@ -280,7 +280,7 @@ declare function Button$1(props: ButtonProps$1): React$1.ReactElement;
 type IconButtonVariant = 'default' | 'primary' | 'destructive' | 'outline';
 type ButtonSize = 'normal' | 'large';
 
-type Props$m = PermafrostComponent$1 & {
+type Props$l = PermafrostComponent$1 & {
     /**
      * Adjusts vertical alignment of the text label, in relation to the icon
      */
@@ -306,9 +306,9 @@ type Props$m = PermafrostComponent$1 & {
  *
  * @see {@link https://react-spectrum.adobe.com/blog/building-a-button-part-1.html}
  */
-declare function IconButton(props: Props$m): react_jsx_runtime.JSX.Element;
+declare function IconButton(props: Props$l): react_jsx_runtime.JSX.Element;
 
-type Props$l = PermafrostComponent$1 & {
+type Props$k = PermafrostComponent$1 & {
     defaultValue?: string;
     disabled?: boolean;
     horizontal?: boolean;
@@ -323,7 +323,7 @@ type Props$l = PermafrostComponent$1 & {
     value?: string | number;
     validationErrors?: string[];
 };
-declare const BorderSelect: (props: Props$l) => react_jsx_runtime.JSX.Element;
+declare const BorderSelect: (props: Props$k) => react_jsx_runtime.JSX.Element;
 
 type ComboboxProps = {
     'aria-label'?: string;
@@ -371,7 +371,7 @@ type ComboboxOption = {
 type ComboboxSize = 'small' | 'medium';
 type ComboboxVariant = 'default' | 'light';
 
-type Props$k = PermafrostComponent$1 & {
+type Props$j = PermafrostComponent$1 & {
     disabled?: boolean;
     initialText?: string;
     options: {
@@ -385,7 +385,7 @@ type Props$k = PermafrostComponent$1 & {
     onChange(e: React$1.ChangeEvent<HTMLSelectElement>): void;
     onClick?(e: React$1.MouseEvent<HTMLDivElement, MouseEvent>): void;
 };
-declare const Select$1: (props: Props$k) => react_jsx_runtime.JSX.Element;
+declare const Select$1: (props: Props$j) => react_jsx_runtime.JSX.Element;
 
 /**
  * Multiselect combobox component. If selections are not bound to outside state
@@ -426,7 +426,7 @@ declare const SingleCombobox: React$1.ForwardRefExoticComponent<PermafrostCompon
     onChange: (selectedOption: ComboboxOption) => void;
 } & React$1.RefAttributes<unknown>>;
 
-type Props$j = PermafrostComponent$1 & {
+type Props$i = PermafrostComponent$1 & {
     children: React$1.ReactNode | string;
     minLength?: number;
     onUpdate?(newValue: string): void;
@@ -435,9 +435,9 @@ type Props$j = PermafrostComponent$1 & {
  * Wrapper component which enables text editing in place directly on a child component,
  * element, or plain text.
  */
-declare function EditableInput(props: Props$j): react_jsx_runtime.JSX.Element;
+declare function EditableInput(props: Props$i): react_jsx_runtime.JSX.Element;
 
-type Props$i = PermafrostComponent$1 & {
+type Props$h = PermafrostComponent$1 & {
     autoFocus?: boolean;
     decrement?(): void;
     disabled?: boolean;
@@ -457,9 +457,9 @@ type Props$i = PermafrostComponent$1 & {
  * Basic numeric input field. A label is required, but may be visually hidden
  * using the `hiddenLabel` property.
  */
-declare function NumberInput(props: Props$i): React$1.ReactElement;
+declare function NumberInput(props: Props$h): React$1.ReactElement;
 
-type Props$h = PermafrostComponent$1 & {
+type Props$g = PermafrostComponent$1 & {
     inputBorder?: boolean;
     showClearInputIcon?: boolean;
     showSearchIcon?: boolean;
@@ -472,9 +472,9 @@ type Props$h = PermafrostComponent$1 & {
     placeholder?: string;
     value?: string;
 };
-declare const SearchInput: (props: Props$h) => react_jsx_runtime.JSX.Element;
+declare const SearchInput: (props: Props$g) => react_jsx_runtime.JSX.Element;
 
-type Props$g = PermafrostComponent$1 & {
+type Props$f = PermafrostComponent$1 & {
     autoComplete?: 'email' | 'current-password' | 'new-password' | string;
     autoFocus?: boolean;
     defaultValue?: string;
@@ -495,9 +495,9 @@ type Props$g = PermafrostComponent$1 & {
     value?: string;
     readOnly?: boolean;
 };
-declare function TextInput(props: Props$g): React$1.ReactElement;
+declare function TextInput(props: Props$f): React$1.ReactElement;
 
-type Props$f = {
+type Props$e = {
     ['aria-label']: string;
     children?: React$1.ReactNode;
     hideFocusRing: boolean;
@@ -513,7 +513,7 @@ type Props$f = {
  * A group label must be included: either pass a string or markup into the
  * `label` prop, or include an `aria-label` or `aria-labelledby` attribute.
  */
-declare function RadioGroup$1({ children, ...props }: Props$f): react_jsx_runtime.JSX.Element;
+declare function RadioGroup$1({ children, ...props }: Props$e): react_jsx_runtime.JSX.Element;
 /**
  * A single radio button and its label.
  */
@@ -542,63 +542,30 @@ declare function Radio$1(props: AriaRadioProps & {
     isVisuallySelected?: (selectedValue: string) => void;
 }): react_jsx_runtime.JSX.Element;
 
-type Props$e = PermafrostComponent$1 & {
-    ariaLabel?: string;
-    disableBeforeDate?: Date;
-    disableAfterDate?: Date;
-    disabled?: boolean;
-    id: string;
-    label?: string;
-    onChange: (value: Date | undefined) => void;
-    placeholder?: string;
-    selected?: Date | undefined;
-    value: Date | undefined;
-};
-declare const DatePicker: (props: Props$e) => react_jsx_runtime.JSX.Element;
-
 type Props$d = PermafrostComponent$1 & {
-    ariaLabel?: string;
-    disableBeforeDate?: Date;
-    disableAfterDate?: Date;
-    disabled?: boolean;
-    id: string;
-    label?: string;
-    onChange: (value: Date | DateRange | undefined) => void;
-    selected?: Date | undefined;
-    selectedRange?: DateRange | undefined;
-    value: Date | undefined;
-    triggerIcon: IconName$1;
-    triggerIconSize: IconSizes$1;
-    isRangePicker?: boolean;
-    isOpen?: boolean;
-    clearOnClose?: boolean;
-};
-declare const NoInputDatePicker: (props: Props$d) => react_jsx_runtime.JSX.Element;
-
-type Props$c = PermafrostComponent$1 & {
     ariaLabel?: string;
     size?: IconSizes$1;
     style?: React$1.CSSProperties;
     fill?: string;
 };
-declare function CircleSpinner(props: Props$c): React$1.ReactElement;
+declare function CircleSpinner(props: Props$d): React$1.ReactElement;
 
-type Props$b = PermafrostComponent$1 & {
+type Props$c = PermafrostComponent$1 & {
     width?: string;
 };
-declare function BarSpinner(props: Props$b): React$1.ReactElement;
+declare function BarSpinner(props: Props$c): React$1.ReactElement;
 
-type Props$a = PermafrostComponent$1 & {
+type Props$b = PermafrostComponent$1 & {
     color?: string;
     overallSize?: string | number;
     rippleSize?: string | number;
     showRandomMessage?: boolean;
 };
-declare function CirclePulse(props: Props$a): React$1.ReactElement;
+declare function CirclePulse(props: Props$b): React$1.ReactElement;
 
 declare const RandomLoadingMessage: () => react_jsx_runtime.JSX.Element;
 
-type Props$9 = PermafrostComponent$1 & {
+type Props$a = PermafrostComponent$1 & {
     backgroundColor?: string;
     foregroundColor?: string;
     ringRadius?: number;
@@ -607,11 +574,11 @@ type Props$9 = PermafrostComponent$1 & {
     value: number;
     valueFontSize?: number;
 };
-declare function PercentageRing(props: Props$9): react_jsx_runtime.JSX.Element;
+declare function PercentageRing(props: Props$a): react_jsx_runtime.JSX.Element;
 
 declare const LoadingList: () => react_jsx_runtime.JSX.Element;
 
-type Props$8 = PermafrostComponent$1 & {
+type Props$9 = PermafrostComponent$1 & {
     accordion?: boolean;
     accordionDefaultOpen?: boolean;
     emptyListMessage?: string;
@@ -648,9 +615,9 @@ type Props$8 = PermafrostComponent$1 & {
     title: string;
     totalCount?: number;
 };
-declare const ListTable: (props: Props$8) => react_jsx_runtime.JSX.Element;
+declare const ListTable: (props: Props$9) => react_jsx_runtime.JSX.Element;
 
-type Props$7 = PermafrostComponent$1 & {
+type Props$8 = PermafrostComponent$1 & {
     currentPage: number;
     limit: number;
     pageInfo: {
@@ -665,9 +632,9 @@ type Props$7 = PermafrostComponent$1 & {
     getNextPage(cursor: number): void;
     getPreviousPage(cursor: number): void;
 };
-declare function Pagination(props: Props$7): react_jsx_runtime.JSX.Element;
+declare function Pagination(props: Props$8): react_jsx_runtime.JSX.Element;
 
-type Props$6 = PermafrostComponent$1 & {
+type Props$7 = PermafrostComponent$1 & {
     actionLink?: string;
     actionText?: string;
     buttonAction?(): void;
@@ -677,7 +644,7 @@ type Props$6 = PermafrostComponent$1 & {
         'data-cy': string;
     };
 };
-declare function Shrug(props: Props$6): React$1.ReactElement;
+declare function Shrug(props: Props$7): React$1.ReactElement;
 
 type ModalBaseProps = PermafrostComponent$1 & {
     children: React$1.ReactNode | React$1.ReactNode[];
@@ -704,7 +671,7 @@ type ModalBaseProps = PermafrostComponent$1 & {
  */
 declare function ModalBase(props: ModalBaseProps): react_jsx_runtime.JSX.Element;
 
-type Props$5 = PermafrostComponent$1 & Pick<ModalBaseProps, 'open'> & {
+type Props$6 = PermafrostComponent$1 & Pick<ModalBaseProps, 'open'> & {
     describedBy?: string;
     clickOutsideHandler(e?: React$1.SyntheticEvent): void;
     confirmText?: string;
@@ -716,9 +683,9 @@ type Props$5 = PermafrostComponent$1 & Pick<ModalBaseProps, 'open'> & {
     title?: string | React$1.ReactNode;
     width?: number;
 };
-declare function ConfirmModal(props: Props$5): react_jsx_runtime.JSX.Element;
+declare function ConfirmModal(props: Props$6): react_jsx_runtime.JSX.Element;
 
-type Props$4 = {
+type Props$5 = {
     children: React$1.ReactNode | React$1.ReactNode[];
     className?: string;
     isLoading?: boolean;
@@ -730,7 +697,7 @@ type Props$4 = {
  *
  * todo: this is an extremely simple version of this component; as I get more familiar with LoadingIndicator use cases, this will be refactored. - jm 9/1/2020
  */
-declare function LoadingAwareContainer(props: Props$4): React$1.ReactElement;
+declare function LoadingAwareContainer(props: Props$5): React$1.ReactElement;
 
 interface TextTruncateProps {
     string: string;
@@ -740,7 +707,7 @@ interface TextTruncateProps {
 }
 declare function TextTruncate({ string, maxChars, children, noTitle }: TextTruncateProps): react_jsx_runtime.JSX.Element;
 
-type Props$3 = {
+type Props$4 = {
     disabled: boolean;
     onChange: any;
     value: boolean;
@@ -749,9 +716,9 @@ type Props$3 = {
     checkedIconName?: IconName$1;
     notCheckedIconName?: IconName$1;
 } & PermafrostComponent$1;
-declare const Toggle$1: (props: Props$3) => react_jsx_runtime.JSX.Element;
+declare const Toggle$1: (props: Props$4) => react_jsx_runtime.JSX.Element;
 
-type Props$2 = PermafrostComponent$1 & {
+type Props$3 = PermafrostComponent$1 & {
     questionMark?: boolean;
     for?: string | null;
     place?: string;
@@ -762,7 +729,7 @@ type Props$2 = PermafrostComponent$1 & {
     children: React$1.ReactNode;
     block?: boolean;
 };
-declare const Tooltip: (props: Props$2) => react_jsx_runtime.JSX.Element;
+declare const Tooltip: (props: Props$3) => react_jsx_runtime.JSX.Element;
 
 declare const mix: (color_1: string, color_2: string, weight: number) => string;
 declare const shade: (color: string, percentage: number) => string;
@@ -938,6 +905,7 @@ interface LabelProps {
 }
 
 interface BaseInputProps {
+    id?: string;
     value?: string | undefined;
     placeholder?: string;
     isDisabled?: boolean;
@@ -1027,11 +995,81 @@ interface PasswordInputProps extends LabelProps {
 }
 declare const LabeledPasswordInput: React$1.ForwardRefExoticComponent<Omit<Omit<PasswordInputProps, "ref"> & React$1.RefAttributes<HTMLInputElement> & LabelProps, "ref"> & React$1.RefAttributes<any>>;
 
-interface SelectProps<OptionType extends SelectOption> extends Props$r<OptionType> {
+interface SelectProps<OptionType extends SelectOption> extends Props$q<OptionType> {
     options: OptionType[];
 }
 declare const Select: <OptionType extends SelectOption>({ classNamePrefix, className, components: customComponents, ...props }: SelectProps<OptionType>) => react_jsx_runtime.JSX.Element;
 
+interface DatePickerProps {
+    selected?: Date | DateRange | undefined;
+    onSelect?: OnSelectHandler<Date> | OnSelectHandler<DateRange>;
+    mode?: Mode;
+    className?: string;
+    captionLayout?: 'dropdown' | 'dropdown-months' | 'dropdown-years' | 'label';
+    id?: string;
+    month?: Date;
+    defaultMonth?: Date;
+    startMonth?: Date | undefined;
+    endMonth?: Date;
+    components?: Partial<CustomComponents>;
+    numberOfMonths?: number;
+    isDisabled?: Matcher | Matcher[] | undefined;
+    formatters?: Partial<Formatters>;
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined;
+    firstWeekContainsDate?: 1 | 4;
+    today?: Date;
+    isRequired?: any;
+    min?: number;
+    max?: number;
+    onMonthChange?: MonthChangeEventHandler;
+    onNextClick?: MonthChangeEventHandler;
+    onPrevClick?: MonthChangeEventHandler;
+    onDayClick?: DayEventHandler<React.MouseEvent>;
+}
+
+declare const DatePicker: React$1.ForwardRefExoticComponent<DatePickerProps & React$1.RefAttributes<HTMLInputElement>>;
+
+interface Props$2 {
+    mode?: Mode;
+    ariaLabel: string;
+    disableBeforeDate?: Date;
+    disableAfterDate?: Date;
+    isDisabled?: boolean;
+    id: string;
+    label?: string;
+    onSelect?: (selected: Date | DateRange | Date[] | undefined) => void;
+    month?: Date;
+    selected?: Date | DateRange | Date[] | undefined;
+    triggerIcon: IconName$1;
+    triggerIconSize: IconSizes$1;
+    isOpen?: boolean;
+    clearOnClose?: boolean;
+    className?: string;
+    'data-testid'?: string;
+}
+declare const IconTriggerDatePicker: (props: Props$2) => react_jsx_runtime.JSX.Element;
+
+interface SingleInputDatePickerProps {
+    ariaLabel: string;
+    disableBeforeDate?: Date;
+    disableAfterDate?: Date;
+    isDisabled?: boolean;
+    id?: string;
+    label?: string;
+    onSelect?: (selected: Date | undefined) => void;
+    month?: Date;
+    selected?: Date | DateRange | Date[] | undefined;
+    isOpen?: boolean;
+    clearOnClose?: boolean;
+    className?: string;
+    inputIconName?: IconName$1;
+    isClearable?: boolean;
+    inputPlaceholder?: string;
+    errorMessage?: string | undefined;
+    'data-testid'?: string;
+}
+declare function SingleInputDatePicker(props: SingleInputDatePickerProps): react_jsx_runtime.JSX.Element;
+
 interface FormProps {
     children: React$1.ReactNode;
     className?: string;
@@ -1085,4 +1123,4 @@ declare function Menu({ children }: MenuProps): react_jsx_runtime.JSX.Element;
 
 declare const Pill: ({ children, className, color, size, ...rest }: PillProps) => react_jsx_runtime.JSX.Element;
 
-export { animation as ANIMATION, Radio$1 as AbstractRadio, RadioGroup as AbstractRadioGroup, Accordion, breakpoints as BREAKPOINT, BarSpinner, BorderSelect, Button, allColors as COLORS, Card, Checkbox, CirclePulse, CircleSpinner, Col, ConfirmModal, Container, DatePicker, EditableInput, FloatUI, Form, GlobalStyles, Icon, IconButton, LabeledInput as Input, Button$1 as LegacyButton, ListTable, LoadingAwareContainer, LoadingList, margin as MARGINS, MATH, mediaQueries as MEDIA_QUERIES, Menu, ModalBase, MultiCombobox, NoInputDatePicker, NumberInput, padding as PADDINGS, Pagination, LabeledPasswordInput as PasswordInput, PercentageRing, Pill, Radio$2 as Radio, RadioGroup$1 as RadioGroup, Radio as RadioInput, RandomLoadingMessage, Row, spacings as SPACING, SearchInput, Section, SectionBlock, SectionBody, SectionHeader, SectionTable, Select$1 as Select, Select as SelectInput, Shrug, SingleCombobox, Skeleton, typography as TYPOGRAPHY, Table, TextInput, TextTruncate, LabeledTextarea as Textarea, Toggle$1 as Toggle, Toggle as ToggleInput, Tooltip, color as colorUtils, number as numberUtils, string as stringUtils };
+export { animation as ANIMATION, Radio$1 as AbstractRadio, RadioGroup as AbstractRadioGroup, Accordion, breakpoints as BREAKPOINT, BarSpinner, BorderSelect, Button, allColors as COLORS, Card, Checkbox, CirclePulse, CircleSpinner, Col, ConfirmModal, Container, DatePicker, EditableInput, FloatUI, Form, GlobalStyles, Icon, IconButton, IconTriggerDatePicker, LabeledInput as Input, Button$1 as LegacyButton, ListTable, LoadingAwareContainer, LoadingList, margin as MARGINS, MATH, mediaQueries as MEDIA_QUERIES, Menu, ModalBase, MultiCombobox, NumberInput, padding as PADDINGS, Pagination, LabeledPasswordInput as PasswordInput, PercentageRing, Pill, Radio$2 as Radio, RadioGroup$1 as RadioGroup, Radio as RadioInput, RandomLoadingMessage, Row, spacings as SPACING, SearchInput, Section, SectionBlock, SectionBody, SectionHeader, SectionTable, Select$1 as Select, Select as SelectInput, Shrug, SingleCombobox, SingleInputDatePicker, Skeleton, typography as TYPOGRAPHY, Table, TextInput, TextTruncate, LabeledTextarea as Textarea, Toggle$1 as Toggle, Toggle as ToggleInput, Tooltip, color as colorUtils, number as numberUtils, string as stringUtils };