@indico-data/design-system 2.54.0 → 2.55.0

package/lib/components/forms/date/inputDateTimePicker/SingleInputDateTimePicker.d.ts

@@ -0,0 +1,24 @@
+import type { IconName } from '../../../icons/types';
+export interface SingleInputDateTimePickerProps {
+    ariaLabel: string;
+    disableBeforeDate?: Date;
+    disableAfterDate?: Date;
+    isDisabled?: boolean;
+    captionLayout?: 'dropdown' | 'dropdown-months' | 'dropdown-years' | 'label';
+    id?: string;
+    label?: string;
+    onSelect: (selected: Date | undefined) => void;
+    initialMonth?: Date;
+    selected?: Date;
+    isOpen?: boolean;
+    clearOnClose?: boolean;
+    className?: string;
+    inputIconName?: IconName;
+    isClearable?: boolean;
+    inputPlaceholder?: string;
+    errorMessage?: string | undefined;
+    'data-testid'?: string;
+    timeValue?: string;
+    onTimeChange?: (time: string) => void;
+}
+export declare function SingleInputDateTimePicker(props: SingleInputDateTimePickerProps): import("react/jsx-runtime").JSX.Element;

package/lib/components/forms/date/inputDateTimePicker/SingleInputDateTimePicker.stories.d.ts

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

package/lib/components/forms/date/inputDateTimePicker/helpers.d.ts

@@ -0,0 +1 @@
+export declare const formatDateAsString: (date: Date) => string;

package/lib/components/forms/date/inputDateTimePicker/index.d.ts

@@ -0,0 +1 @@
+export { SingleInputDateTimePicker } from './SingleInputDateTimePicker';

package/lib/components/forms/subcomponents/DisplayFormError.d.ts

@@ -1,5 +1,6 @@
 interface DisplayFormErrorProps {
     message: string | undefined;
+    [key: string]: any;
 }
-export declare const DisplayFormError: ({ message }: DisplayFormErrorProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DisplayFormError: ({ message, ...rest }: DisplayFormErrorProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

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

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

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

package/lib/index.css

@@ -1851,51 +1851,6 @@ form {
   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);
 }
@@ -2325,51 +2280,6 @@ 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

@@ -400,9 +400,11 @@ declare const DatePicker: (props: DatePickerProps) => react_jsx_runtime.JSX.Elem
 interface TimePickerProps {
     timeValue?: string;
     label?: string;
+    name?: string;
+    hasHiddenLabel?: boolean;
     onTimeChange?: (time: string) => void;
 }
-declare const TimePicker: ({ timeValue, label, onTimeChange, }: TimePickerProps) => react_jsx_runtime.JSX.Element;
+declare const TimePicker: ({ timeValue, label, name, hasHiddenLabel, onTimeChange, }: TimePickerProps) => react_jsx_runtime.JSX.Element;
 
 interface Props$3 {
     mode?: Mode;

package/lib/index.esm.css

@@ -1851,51 +1851,6 @@ form {
   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);
 }
@@ -2325,51 +2280,6 @@ 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);