@indico-data/design-system 2.52.0 → 2.54.0

package/lib/index.d.ts

@@ -1,18 +1,25 @@
 import { IconDefinition, IconName as IconName$1 } from '@fortawesome/fontawesome-svg-core';
 import { UseFloatingOptions } from '@floating-ui/react-dom';
 export * from '@floating-ui/react-dom';
-import React$1, { CSSProperties, MouseEventHandler, ReactElement } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ContainerProps, RowProps, ColProps } from 'react-grid-system';
+import React$1, { CSSProperties, MouseEventHandler, ReactElement } from 'react';
 import { IDataTableProps, Direction as Direction$1, TableColumn as TableColumn$1 } from 'react-data-table-component';
 import { CSSObject } from 'styled-components';
-import { Props as Props$8 } from 'react-select';
+import { Props as Props$4 } from 'react-select';
 import { DateRange, OnSelectHandler, Mode, CustomComponents, Matcher, Formatters, MonthChangeEventHandler, DayEventHandler } from 'react-day-picker';
 import { ColumnDef, Row as Row$1 } from '@tanstack/react-table';
 export { ColumnDef, Row as TanstackTableRowType, Table as TanstackTableType } from '@tanstack/react-table';
+import { PlacesType } from 'react-tooltip';
 
 declare const registerFontAwesomeIcons: (...icons: IconDefinition[]) => void;
 
+declare const Container: ({ ref: _ref, ...rest }: ContainerProps) => react_jsx_runtime.JSX.Element;
+
+declare const Row: ({ ref: _ref, ...rest }: RowProps) => react_jsx_runtime.JSX.Element;
+
+declare const Col: ({ ref: _ref, ...rest }: ColProps) => react_jsx_runtime.JSX.Element;
+
 declare const indicons: {
     'indico-o-white': react_jsx_runtime.JSX.Element;
     account: react_jsx_runtime.JSX.Element;
@@ -224,46 +231,6 @@ type PermafrostComponent = {
 
 type SemanticColor = 'primary' | 'secondary' | 'warning' | 'error' | 'success' | 'info' | 'pending';
 
-type Props$7 = PermafrostComponent & {
-    ariaLabel?: string;
-    size?: IconSizes;
-    style?: React$1.CSSProperties;
-    fill?: string;
-};
-declare function CircleSpinner(props: Props$7): React$1.ReactElement;
-
-type Props$6 = PermafrostComponent & {
-    width?: string;
-};
-declare function BarSpinner(props: Props$6): React$1.ReactElement;
-
-type Props$5 = PermafrostComponent & {
-    color?: string;
-    overallSize?: string | number;
-    rippleSize?: string | number;
-    showRandomMessage?: boolean;
-};
-declare function CirclePulse(props: Props$5): React$1.ReactElement;
-
-type Props$4 = PermafrostComponent & {
-    questionMark?: boolean;
-    for?: string | null;
-    place?: string;
-    clickToShow?: boolean;
-    delayShow?: number;
-    delayHide?: number;
-    questionMarkClassName?: string;
-    children: React$1.ReactNode;
-    block?: boolean;
-};
-declare const Tooltip: (props: Props$4) => react_jsx_runtime.JSX.Element;
-
-declare const Container: ({ ref: _ref, ...rest }: ContainerProps) => react_jsx_runtime.JSX.Element;
-
-declare const Row: ({ ref: _ref, ...rest }: RowProps) => react_jsx_runtime.JSX.Element;
-
-declare const Col: ({ ref: _ref, ...rest }: ColProps) => react_jsx_runtime.JSX.Element;
-
 type ButtonVariants = 'solid' | 'outline' | 'link' | 'action' | 'destructive' | 'soft';
 type ButtonSizes = 'xs' | 'sm' | 'md' | 'lg';
 type ButtonTypes = 'button' | 'submit' | 'reset';
@@ -305,10 +272,11 @@ interface BaseInputProps {
     placeholder?: string;
     isDisabled?: boolean;
     readonly?: boolean;
-    onChange: (e: React$1.ChangeEvent<HTMLInputElement>) => void;
+    onChange?: (e: React$1.ChangeEvent<HTMLInputElement>) => void;
     onBlur?: (e: React$1.FocusEvent<HTMLInputElement>) => void;
     onKeyDown?: (e: React$1.KeyboardEvent<HTMLInputElement>) => void;
     errorMessage?: string | undefined;
+    maxLength?: number;
     helpText?: string;
     iconName?: IconName;
     isClearable?: boolean;
@@ -392,7 +360,7 @@ 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$8<OptionType> {
+interface SelectProps<OptionType extends SelectOption> extends Props$4<OptionType> {
     options: OptionType[];
 }
 declare const Select: <OptionType extends SelectOption>({ classNamePrefix, className, components: customComponents, ...props }: SelectProps<OptionType>) => react_jsx_runtime.JSX.Element;
@@ -407,6 +375,8 @@ interface DatePickerProps {
     month?: Date;
     defaultMonth?: Date;
     startMonth?: Date | undefined;
+    hasTimePicker?: boolean;
+    timeValue?: string;
     endMonth?: Date;
     components?: Partial<CustomComponents>;
     numberOfMonths?: number;
@@ -418,6 +388,7 @@ interface DatePickerProps {
     isRequired?: any;
     min?: number;
     max?: number;
+    onTimeChange?: (time: string) => void;
     onMonthChange?: MonthChangeEventHandler;
     onNextClick?: MonthChangeEventHandler;
     onPrevClick?: MonthChangeEventHandler;
@@ -426,6 +397,13 @@ interface DatePickerProps {
 
 declare const DatePicker: (props: DatePickerProps) => react_jsx_runtime.JSX.Element;
 
+interface TimePickerProps {
+    timeValue?: string;
+    label?: string;
+    onTimeChange?: (time: string) => void;
+}
+declare const TimePicker: ({ timeValue, label, onTimeChange, }: TimePickerProps) => react_jsx_runtime.JSX.Element;
+
 interface Props$3 {
     mode?: Mode;
     ariaLabel: string;
@@ -567,7 +545,7 @@ type WithoutPaginationProps = {
     totalEntriesText?: string;
     showPagination?: false;
 };
-type PaginationProps = WithPaginationProps | WithoutPaginationProps;
+type PaginationProps$1 = WithPaginationProps | WithoutPaginationProps;
 type Props<T extends object> = {
     data: T[];
     columns: ColumnDef<T & {
@@ -594,10 +572,47 @@ type Props<T extends object> = {
     rowSelection?: Record<string, boolean>;
     onRowSelectionChange?: (updater: Record<string, boolean>) => void;
     onSelectAllChange?: (isSelected: boolean) => void;
-} & PaginationProps;
+} & PaginationProps$1;
 
 declare function TanstackTable<T extends object>({ columns: defaultColumns, data, className, currentPage, rowCount, rowsPerPage, onChangePage, totalEntriesText, TableActions, error, enableRowSelection, clearFilters, hasFilters, showPagination, isLoading, defaultPinnedColumns, onRowClick, activeRows, actionBarClassName, ...rest }: Props<T & {
     id: string;
 }>): react_jsx_runtime.JSX.Element;
 
-export { Badge, BarSpinner, Button, Card, Checkbox, CirclePulse, CircleSpinner, Col, Container, DatePicker, FloatUI, Form, Icon, IconTriggerDatePicker, LabeledInput as Input, Menu, Modal, LabeledPasswordInput as PasswordInput, Pill, Radio as RadioInput, Row, Select as SelectInput, SingleInputDatePicker, Skeleton, Table, TanstackTable, LabeledTextarea as Textarea, Toggle as ToggleInput, Tooltip, registerFontAwesomeIcons };
+interface TooltipProps {
+    id: string;
+    clickToShow?: boolean;
+    delayShow?: number;
+    delayHide?: number;
+    children: React.ReactNode;
+    zIndex?: number;
+    place?: PlacesType;
+    [key: string]: any;
+}
+declare const Tooltip: ({ id, clickToShow, delayShow, delayHide, children, zIndex, place, ...rest }: TooltipProps) => react_jsx_runtime.JSX.Element;
+
+interface PaginationProps {
+    totalPages: number;
+    currentPage?: number;
+    className?: string;
+    onChange?: (value: number) => void;
+}
+
+declare const Pagination: ({ totalPages, currentPage, onChange, className, ...rest }: PaginationProps) => react_jsx_runtime.JSX.Element;
+
+interface CirclePulseProps {
+    size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+    className?: string;
+    [key: string]: any;
+}
+declare function CirclePulse({ size, className, ...rest }: CirclePulseProps): react_jsx_runtime.JSX.Element;
+
+declare function BarSpinner({ width, id, height, className, ...rest }: {
+    'data-testid'?: string;
+    width?: number;
+    id?: string;
+    height?: number;
+    className?: string;
+    [key: string]: any;
+}): react_jsx_runtime.JSX.Element;
+
+export { Badge, BarSpinner, Button, Card, Checkbox, CirclePulse, Col, Container, DatePicker, FloatUI, Form, Icon, IconTriggerDatePicker, LabeledInput as Input, Menu, Modal, Pagination, LabeledPasswordInput as PasswordInput, Pill, Radio as RadioInput, Row, Select as SelectInput, SingleInputDatePicker, Skeleton, Table, TanstackTable, LabeledTextarea as Textarea, TimePicker, Toggle as ToggleInput, Tooltip, registerFontAwesomeIcons };

package/lib/index.esm.css

@@ -438,6 +438,14 @@ a:hover,
   background-color: var(--pf-background-color);
 }
 
+.react-tooltip {
+  z-index: 5;
+  background-color: var(--pf-tooltip-background-color);
+  border: var(--pf-border-sm) solid var(--pf-border-color);
+  opacity: 1 !important;
+  text-wrap: wrap;
+}
+
 :root,
 :root [data-theme=light],
 :root [data-theme=dark] {
@@ -1314,12 +1322,15 @@ form {
   --pf-form-input-disabled-color: var(--pf-tertiary-color-950);
 }
 
+.time-input-wrapper input,
 .input-wrapper input,
 .number-input-wrapper input,
 .password-input-wrapper input,
 .textarea-wrapper input {
   height: var(--pf-size-9);
 }
+.time-input-wrapper input,
+.time-input-wrapper textarea,
 .input-wrapper input,
 .input-wrapper textarea,
 .number-input-wrapper input,
@@ -1335,9 +1346,11 @@ form {
   width: 100%;
   box-sizing: border-box;
 }
-.input-wrapper input::-moz-placeholder, .input-wrapper textarea::-moz-placeholder, .number-input-wrapper input::-moz-placeholder, .number-input-wrapper textarea::-moz-placeholder, .password-input-wrapper input::-moz-placeholder, .password-input-wrapper textarea::-moz-placeholder, .textarea-wrapper input::-moz-placeholder, .textarea-wrapper textarea::-moz-placeholder {
+.time-input-wrapper input::-moz-placeholder, .time-input-wrapper textarea::-moz-placeholder, .input-wrapper input::-moz-placeholder, .input-wrapper textarea::-moz-placeholder, .number-input-wrapper input::-moz-placeholder, .number-input-wrapper textarea::-moz-placeholder, .password-input-wrapper input::-moz-placeholder, .password-input-wrapper textarea::-moz-placeholder, .textarea-wrapper input::-moz-placeholder, .textarea-wrapper textarea::-moz-placeholder {
   color: var(--pf-form-input-placeholder-color);
 }
+.time-input-wrapper input::placeholder,
+.time-input-wrapper textarea::placeholder,
 .input-wrapper input::placeholder,
 .input-wrapper textarea::placeholder,
 .number-input-wrapper input::placeholder,
@@ -1348,6 +1361,8 @@ form {
 .textarea-wrapper textarea::placeholder {
   color: var(--pf-form-input-placeholder-color);
 }
+.time-input-wrapper input:hover,
+.time-input-wrapper textarea:hover,
 .input-wrapper input:hover,
 .input-wrapper textarea:hover,
 .number-input-wrapper input:hover,
@@ -1358,6 +1373,8 @@ form {
 .textarea-wrapper textarea:hover {
   background-color: var(--pf-form-input-hover-background-color);
 }
+.time-input-wrapper input:focus,
+.time-input-wrapper textarea:focus,
 .input-wrapper input:focus,
 .input-wrapper textarea:focus,
 .number-input-wrapper input:focus,
@@ -1369,6 +1386,8 @@ form {
   border-color: var(--pf-form-input-focus-border-color);
   background-color: var(--pf-form-input-focus-background-color);
 }
+.time-input-wrapper input:focus-visible,
+.time-input-wrapper textarea:focus-visible,
 .input-wrapper input:focus-visible,
 .input-wrapper textarea:focus-visible,
 .number-input-wrapper input:focus-visible,
@@ -1379,6 +1398,8 @@ form {
 .textarea-wrapper textarea:focus-visible {
   outline: 1px solid var(--pf-form-input-focus-outline-color);
 }
+.time-input-wrapper input:disabled,
+.time-input-wrapper textarea:disabled,
 .input-wrapper input:disabled,
 .input-wrapper textarea:disabled,
 .number-input-wrapper input:disabled,
@@ -1391,6 +1412,8 @@ form {
   border-color: var(--pf-form-input-disabled-border-color);
   color: var(--pf-form-input-disabled-color);
 }
+.time-input-wrapper input.error,
+.time-input-wrapper textarea.error,
 .input-wrapper input.error,
 .input-wrapper textarea.error,
 .number-input-wrapper input.error,
@@ -1401,6 +1424,8 @@ form {
 .textarea-wrapper textarea.error {
   border-color: var(--pf-error-color);
 }
+.time-input-wrapper input.success,
+.time-input-wrapper textarea.success,
 .input-wrapper input.success,
 .input-wrapper textarea.success,
 .number-input-wrapper input.success,
@@ -1411,6 +1436,8 @@ form {
 .textarea-wrapper textarea.success {
   border-color: var(--pf-success-color);
 }
+.time-input-wrapper input.warning,
+.time-input-wrapper textarea.warning,
 .input-wrapper input.warning,
 .input-wrapper textarea.warning,
 .number-input-wrapper input.warning,
@@ -1421,6 +1448,8 @@ form {
 .textarea-wrapper textarea.warning {
   border-color: var(--pf-warning-color);
 }
+.time-input-wrapper input.info,
+.time-input-wrapper textarea.info,
 .input-wrapper input.info,
 .input-wrapper textarea.info,
 .number-input-wrapper input.info,
@@ -1814,6 +1843,59 @@ form {
   background-color: transparent;
 }
 
+.time-picker-wrapper {
+  margin-bottom: var(--pf-margin-3);
+  width: 348px;
+}
+.time-picker-wrapper .form-control {
+  margin-bottom: 0;
+}
+
+.time-picker-input {
+  cursor: pointer;
+}
+
+.time-picker-row {
+  width: 150px;
+}
+.time-picker-row .select__value-container {
+  text-align: center;
+  cursor: pointer;
+}
+.time-picker-row .select-wrapper {
+  width: 50px;
+}
+.time-picker-row .select-wrapper .select__items {
+  justify-content: center;
+}
+.time-picker-row .select-wrapper .select__menu {
+  height: 230px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+}
+.time-picker-row .select__menu-list {
+  max-height: 100%;
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+  overflow-y: scroll;
+}
+.time-picker-row .select__menu-list::-webkit-scrollbar {
+  display: none; /* Chrome, Safari and Opera */
+}
+.time-picker-row .hour-menu .select__menu {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.time-picker-row .minute-menu .select__menu {
+  border-radius: 0;
+  border-right: none;
+  border-left: none;
+}
+.time-picker-row .period-menu .select__menu {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
 :root {
   --pf-badge-rounded: var(--pf-rounded);
 }
@@ -2243,6 +2325,51 @@ form {
   display: block;
 }
 
+.time-picker-input {
+  cursor: pointer;
+}
+
+.time-picker-row {
+  width: 150px;
+}
+.time-picker-row .select__value-container {
+  text-align: center;
+  cursor: pointer;
+}
+.time-picker-row .select-wrapper {
+  width: 50px;
+}
+.time-picker-row .select-wrapper .select__items {
+  justify-content: center;
+}
+.time-picker-row .select-wrapper .select__menu {
+  height: 230px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+}
+.time-picker-row .select__menu-list {
+  max-height: 100%;
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+  overflow-y: scroll;
+}
+.time-picker-row .select__menu-list::-webkit-scrollbar {
+  display: none; /* Chrome, Safari and Opera */
+}
+.time-picker-row .hour-menu .select__menu {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.time-picker-row .minute-menu .select__menu {
+  border-radius: 0;
+  border-right: none;
+  border-left: none;
+}
+.time-picker-row .period-menu .select__menu {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
 :root [data-theme=light] {
   --pf-pill-primary-background-color: var(--pf-primary-color);
   --pf-pill-primary-font-color: var(--pf-white-color);
@@ -2358,6 +2485,147 @@ form {
   border-color: var(--pf-pill-pending-border-color);
 }
 
+:root [data-theme=light] {
+  --pf-tooltip-background-color: var(--pf-white-color);
+}
+
+:root [data-theme=dark],
+:root {
+  --pf-tooltip-background-color: var(--pf-primary-color-900);
+}
+
+@keyframes moveBg {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(46px);
+  }
+}
+.bar-spinner {
+  display: inline-block;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-height: 14px;
+  border-radius: 25px;
+  background-color: var(--pf-primary-color-800);
+}
+.bar-spinner > span {
+  display: block;
+  height: 100%;
+  width: 100%;
+  border-radius: 25px;
+  position: relative;
+  overflow: hidden;
+}
+.bar-spinner > span:after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -46px;
+  bottom: 0;
+  right: 0;
+  background: repeating-linear-gradient(-55deg, transparent 1px, rgba(255, 255, 255, 0.25) 2px, rgba(255, 255, 255, 0.25) 11px, transparent 12px, transparent 20px);
+  animation-name: moveBg;
+  animation-duration: 1s;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  border-radius: 20px;
+  overflow: hidden;
+}
+
+:root {
+  --circle-pulse-animation-speed: 1.4s;
+  --circle-pulse-border-width: var(--pf-border-xl);
+}
+
+.circle-pulse-xxs {
+  --circle-pulse-size: 20px;
+  --circle-pulse-ripple-size: calc(20px * 1.7);
+}
+
+.circle-pulse-xs {
+  --circle-pulse-size: 40px;
+  --circle-pulse-ripple-size: calc(40px * 1.7);
+}
+
+.circle-pulse-sm {
+  --circle-pulse-size: 60px;
+  --circle-pulse-ripple-size: calc(60px * 1.7);
+}
+
+.circle-pulse-md {
+  --circle-pulse-size: 80px;
+  --circle-pulse-ripple-size: calc(80px * 1.7);
+}
+
+.circle-pulse-lg {
+  --circle-pulse-size: 100px;
+  --circle-pulse-ripple-size: calc(100px * 1.7);
+}
+
+.circle-pulse-xl {
+  --circle-pulse-size: 120px;
+  --circle-pulse-ripple-size: calc(120px * 1.7);
+}
+
+.circle-pulse-xxl {
+  --circle-pulse-size: 140px;
+  --circle-pulse-ripple-size: calc(140px * 1.7);
+}
+
+@keyframes ripple {
+  0% {
+    transform: translate(-50%, -50%) scale(0);
+    opacity: 0;
+  }
+  20% {
+    opacity: 1;
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 0;
+  }
+}
+.circle-pulse {
+  display: grid;
+  place-items: center;
+  position: relative;
+  width: var(--circle-pulse-size);
+  height: var(--circle-pulse-size);
+  margin-left: auto;
+  margin-right: auto;
+}
+.circle-pulse:before, .circle-pulse:after {
+  content: "";
+  position: absolute;
+  border: var(--circle-pulse-border-width) solid var(--pf-primary-color-300);
+  border-radius: 50%;
+  /* Set initial dimensions */
+  width: var(--circle-pulse-ripple-size);
+  height: var(--circle-pulse-ripple-size);
+  /* Position at center */
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(0);
+  transform-origin: center;
+  animation: ripple var(--circle-pulse-animation-speed) cubic-bezier(0, 0.2, 0.8, 1) infinite;
+}
+@media (prefers-reduced-motion) {
+  .circle-pulse:before, .circle-pulse:after {
+    animation-duration: calc(var(--circle-pulse-animation-speed) * 2);
+  }
+}
+.circle-pulse:after {
+  animation-delay: calc(var(--circle-pulse-animation-speed) * -0.5);
+}
+@media (prefers-reduced-motion) {
+  .circle-pulse:after {
+    animation-delay: calc(var(--circle-pulse-animation-speed) * -1);
+  }
+}
+
 :root [data-theme=light] {
   --sheets-background-color: var(--pf-gray-color-100);
 }