@indico-data/design-system 2.52.0 → 2.53.0

package/lib/components/forms/date/datePicker/types.d.ts

@@ -9,6 +9,8 @@ export interface DatePickerProps {
     month?: Date;
     defaultMonth?: Date;
     startMonth?: Date | undefined;
+    hasTimePicker?: boolean;
+    timeValue?: string;
     endMonth?: Date;
     components?: Partial<CustomComponents>;
     numberOfMonths?: number;
@@ -20,6 +22,7 @@ export interface DatePickerProps {
     isRequired?: any;
     min?: number;
     max?: number;
+    onTimeChange?: (time: string) => void;
     onMonthChange?: MonthChangeEventHandler;
     onNextClick?: MonthChangeEventHandler;
     onPrevClick?: MonthChangeEventHandler;

package/lib/components/forms/input/Input.d.ts

@@ -7,10 +7,11 @@ export interface BaseInputProps {
     placeholder?: string;
     isDisabled?: boolean;
     readonly?: boolean;
-    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
     onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
     errorMessage?: string | undefined;
+    maxLength?: number;
     helpText?: string;
     iconName?: IconName;
     isClearable?: boolean;

package/lib/components/forms/timePicker/TimePicker.d.ts

@@ -0,0 +1,7 @@
+interface TimePickerProps {
+    timeValue?: string;
+    label?: string;
+    onTimeChange?: (time: string) => void;
+}
+export declare const TimePicker: ({ timeValue, label, onTimeChange, }: TimePickerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/forms/timePicker/TimePicker.stories.d.ts

@@ -0,0 +1,6 @@
+import { TimePicker } from './TimePicker';
+import type { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta<typeof TimePicker>;
+export default meta;
+type Story = StoryObj<typeof TimePicker>;
+export declare const Default: Story;

package/lib/components/forms/timePicker/__tests__/TimePicker.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/components/forms/timePicker/constants.d.ts

@@ -0,0 +1,13 @@
+declare const hourOptions: {
+    label: string;
+    value: string;
+}[];
+declare const minuteOptions: {
+    label: string;
+    value: string;
+}[];
+declare const periodOptions: {
+    label: string;
+    value: string;
+}[];
+export { hourOptions, minuteOptions, periodOptions };

package/lib/components/forms/timePicker/helpers.d.ts

@@ -0,0 +1,5 @@
+export declare const parseTimeValue: (time: string) => {
+    hours: string;
+    minutes: string;
+    period: string;
+};

package/lib/components/forms/timePicker/index.d.ts

@@ -0,0 +1 @@
+export * from './TimePicker';

package/lib/index.css

@@ -1314,12 +1314,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 +1338,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 +1353,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 +1365,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 +1378,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 +1390,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 +1404,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 +1416,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 +1428,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 +1440,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 +1835,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 +2317,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);

package/lib/index.d.ts

@@ -305,10 +305,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;
@@ -407,6 +408,8 @@ interface DatePickerProps {
     month?: Date;
     defaultMonth?: Date;
     startMonth?: Date | undefined;
+    hasTimePicker?: boolean;
+    timeValue?: string;
     endMonth?: Date;
     components?: Partial<CustomComponents>;
     numberOfMonths?: number;
@@ -418,6 +421,7 @@ interface DatePickerProps {
     isRequired?: any;
     min?: number;
     max?: number;
+    onTimeChange?: (time: string) => void;
     onMonthChange?: MonthChangeEventHandler;
     onNextClick?: MonthChangeEventHandler;
     onPrevClick?: MonthChangeEventHandler;
@@ -426,6 +430,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;
@@ -600,4 +611,4 @@ declare function TanstackTable<T extends object>({ columns: defaultColumns, data
     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 };
+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, TimePicker, Toggle as ToggleInput, Tooltip, registerFontAwesomeIcons };

package/lib/index.esm.css

@@ -1314,12 +1314,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 +1338,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 +1353,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 +1365,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 +1378,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 +1390,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 +1404,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 +1416,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 +1428,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 +1440,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 +1835,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 +2317,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);