@indico-data/design-system 2.18.0 → 2.20.0

package/lib/index.css

@@ -982,17 +982,6 @@
   color: var(--pf-input-text-color);
   cursor: pointer;
 }
-.form-control .is-visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
 .form-control .form-label {
   margin-bottom: var(--pf-margin-2);
 }
@@ -1252,17 +1241,6 @@
   color: var(--pf-textarea-help-text-color);
   font-size: var(--pf-font-size-subtitle2);
 }
-.form-control .is-visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
 .form-control .form-label {
   margin-bottom: var(--pf-margin-2);
 }
@@ -1361,17 +1339,6 @@
   color: var(--pf-password-input-text-color);
   cursor: pointer;
 }
-.form-control .is-visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
 .form-control .form-label {
   margin-bottom: var(--pf-margin-2);
 }
@@ -1642,6 +1609,61 @@ form {
   box-shadow: var(--pf-dropshadow);
 }
 
+:root,
+:root [data-theme=light],
+:root [data-theme=dark] {
+  --pf-menu-rounded: var(--pf-rounded);
+  --pf-menu-item-hover-color: var(--pf-primary-color-100);
+  --pf-menu-item-background-color: var(--pf-white-color);
+  --pf-menu-item-color: var(--pf-gray-color);
+}
+
+:root [data-theme=dark] {
+  --pf-menu-item-hover-color: var(--pf-primary-color-300);
+  --pf-menu-item-background-color: var(--pf-primary-color-600);
+  --pf-menu-item-color: var(--pf-gray-color-100);
+}
+
+.menu {
+  border-radius: var(--pf-menu-rounded);
+}
+.menu .menu-item {
+  width: 100%;
+  background: var(--pf-menu-item-background-color);
+  color: var(--pf-menu-item-color);
+  display: block;
+  width: 100%;
+  text-align: left;
+  border: none;
+}
+.menu .menu-item:hover {
+  background: var(--pf-menu-item-hover-color);
+}
+
+:root,
+:root [data-theme=light],
+:root [data-theme=dark] {
+  --pf-popper-background-color: var(--pf-white-color);
+  --pf-popper-border-color: var(--pf-gray-color-900);
+  --pf-popper-border-radius: var(--pf-rounded);
+  --pf-popper-padding: var(--pf-padding-2);
+}
+
+:root [data-theme=dark] {
+  --pf-popper-background-color: var(--pf-primary-color-600);
+  --pf-popper-border-color: var(--pf-gray-color);
+}
+
+.popper-container {
+  z-index: 99;
+}
+
+.popper-content {
+  border-radius: var(--pf-popper-border-radius);
+  border: 1px solid var(--pf-popper-border-color);
+  background: var(--pf-popper-background-color);
+}
+
 .rdp {
   --rdp-cell-size: 40px;
   --rdp-accent-color: #6833d0;

package/lib/index.d.ts

@@ -8,6 +8,7 @@ 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 { Placement } from '@floating-ui/react-dom';
 
 declare const GlobalStyles: () => react_jsx_runtime.JSX.Element;
 
@@ -919,23 +920,28 @@ declare const Icon: ({ name, size, className, ariaLabel, ...props }: IconProps)
 
 declare const Table: <T>(props: TableProps<T>) => react_jsx_runtime.JSX.Element;
 
-interface InputProps {
+interface LabelProps {
     label: string;
     name: string;
+    isRequired?: boolean;
+}
+interface WithLabelProps extends LabelProps {
+    hasHiddenLabel?: boolean;
+}
+
+interface InputProps extends WithLabelProps {
     value?: string | undefined;
-    placeholder: string;
+    placeholder?: string;
     onChange: (e: React$1.ChangeEvent<HTMLInputElement>) => void;
-    isRequired?: boolean;
     isDisabled?: boolean;
     errorMessage?: string | undefined;
     helpText?: string;
-    hasHiddenLabel?: boolean;
     iconName?: IconName$1;
     isClearable?: boolean;
     className?: string;
     defaultValue?: string;
 }
-declare const Input: React$1.ForwardRefExoticComponent<InputProps & React$1.RefAttributes<HTMLInputElement>>;
+declare const LabeledInput: React$1.ForwardRefExoticComponent<Omit<InputProps & React$1.RefAttributes<HTMLInputElement> & WithLabelProps, "ref"> & React$1.RefAttributes<any>>;
 
 interface RadioProps {
     ref?: React$1.LegacyRef<HTMLInputElement>;
@@ -975,18 +981,14 @@ interface ToggleProps {
 }
 declare const Toggle: React$1.ForwardRefExoticComponent<Omit<ToggleProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
 
-interface TextareaProps {
+interface TextareaProps extends WithLabelProps {
     ref?: React$1.LegacyRef<HTMLTextAreaElement>;
-    label: string;
-    name: string;
-    placeholder: string;
+    placeholder?: string;
     value?: string | undefined;
     onChange: (e: React$1.ChangeEvent<HTMLTextAreaElement>) => void;
-    isRequired?: boolean;
     isDisabled?: boolean;
     errorMessage?: string | undefined;
     helpText?: string;
-    hasHiddenLabel?: boolean;
     rows?: number;
     cols?: number;
     readonly?: boolean;
@@ -996,24 +998,20 @@ interface TextareaProps {
     autofocus?: boolean;
     defaultValue?: string;
 }
-declare const Textarea: React$1.ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & React$1.RefAttributes<HTMLTextAreaElement>>;
+declare const LabeledTextarea: React$1.ForwardRefExoticComponent<Omit<Omit<TextareaProps, "ref"> & React$1.RefAttributes<HTMLTextAreaElement> & WithLabelProps, "ref"> & React$1.RefAttributes<any>>;
 
-interface PasswordInputProps {
+interface PasswordInputProps extends WithLabelProps {
     ref?: React$1.LegacyRef<HTMLInputElement>;
-    label: string;
     value?: string | undefined;
-    name: string;
-    placeholder: string;
+    placeholder?: string;
     onChange: (e: React$1.ChangeEvent<HTMLInputElement>) => void;
-    isRequired?: boolean;
     isDisabled?: boolean;
     errorMessage?: string | undefined;
     helpText?: string;
-    hasHiddenLabel?: boolean;
     hasShowPassword?: boolean;
     defaultValue?: string;
 }
-declare const PasswordInput: React$1.ForwardRefExoticComponent<Omit<PasswordInputProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
+declare const LabeledPasswordInput: React$1.ForwardRefExoticComponent<Omit<Omit<PasswordInputProps, "ref"> & React$1.RefAttributes<HTMLInputElement> & WithLabelProps, "ref"> & React$1.RefAttributes<any>>;
 
 interface SelectProps<OptionType extends SelectOption> extends Props$r<OptionType> {
     options: OptionType[];
@@ -1052,4 +1050,20 @@ type Props = {
 };
 declare const Card: React$1.FC<Props>;
 
-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, Form, GlobalStyles, Icon, IconButton, Input, Button$1 as LegacyButton, ListTable, LoadingAwareContainer, LoadingList, margin as MARGINS, MATH, mediaQueries as MEDIA_QUERIES, ModalBase, MultiCombobox, NoInputDatePicker, NumberInput, padding as PADDINGS, Pagination, PasswordInput, PercentageRing, 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, Textarea, Toggle$1 as Toggle, Toggle as ToggleInput, Tooltip, color as colorUtils, number as numberUtils, string as stringUtils };
+type PopperProps = {
+    children: React$1.ReactNode;
+    referenceElement: HTMLElement | null;
+    isOpen: boolean;
+    onClose: () => void;
+    ariaLabel: string;
+    placement?: Placement;
+    offsetValue?: number;
+};
+declare function Popper({ children, referenceElement, isOpen, onClose, ariaLabel, placement, offsetValue, }: PopperProps): react_jsx_runtime.JSX.Element | null;
+
+type MenuProps = {
+    children: React$1.ReactNode;
+};
+declare function Menu({ children }: MenuProps): 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, 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, Popper, 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 };

package/lib/index.esm.css

@@ -982,17 +982,6 @@
   color: var(--pf-input-text-color);
   cursor: pointer;
 }
-.form-control .is-visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
 .form-control .form-label {
   margin-bottom: var(--pf-margin-2);
 }
@@ -1252,17 +1241,6 @@
   color: var(--pf-textarea-help-text-color);
   font-size: var(--pf-font-size-subtitle2);
 }
-.form-control .is-visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
 .form-control .form-label {
   margin-bottom: var(--pf-margin-2);
 }
@@ -1361,17 +1339,6 @@
   color: var(--pf-password-input-text-color);
   cursor: pointer;
 }
-.form-control .is-visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
 .form-control .form-label {
   margin-bottom: var(--pf-margin-2);
 }
@@ -1642,6 +1609,61 @@ form {
   box-shadow: var(--pf-dropshadow);
 }
 
+:root,
+:root [data-theme=light],
+:root [data-theme=dark] {
+  --pf-menu-rounded: var(--pf-rounded);
+  --pf-menu-item-hover-color: var(--pf-primary-color-100);
+  --pf-menu-item-background-color: var(--pf-white-color);
+  --pf-menu-item-color: var(--pf-gray-color);
+}
+
+:root [data-theme=dark] {
+  --pf-menu-item-hover-color: var(--pf-primary-color-300);
+  --pf-menu-item-background-color: var(--pf-primary-color-600);
+  --pf-menu-item-color: var(--pf-gray-color-100);
+}
+
+.menu {
+  border-radius: var(--pf-menu-rounded);
+}
+.menu .menu-item {
+  width: 100%;
+  background: var(--pf-menu-item-background-color);
+  color: var(--pf-menu-item-color);
+  display: block;
+  width: 100%;
+  text-align: left;
+  border: none;
+}
+.menu .menu-item:hover {
+  background: var(--pf-menu-item-hover-color);
+}
+
+:root,
+:root [data-theme=light],
+:root [data-theme=dark] {
+  --pf-popper-background-color: var(--pf-white-color);
+  --pf-popper-border-color: var(--pf-gray-color-900);
+  --pf-popper-border-radius: var(--pf-rounded);
+  --pf-popper-padding: var(--pf-padding-2);
+}
+
+:root [data-theme=dark] {
+  --pf-popper-background-color: var(--pf-primary-color-600);
+  --pf-popper-border-color: var(--pf-gray-color);
+}
+
+.popper-container {
+  z-index: 99;
+}
+
+.popper-content {
+  border-radius: var(--pf-popper-border-radius);
+  border: 1px solid var(--pf-popper-border-color);
+  background: var(--pf-popper-background-color);
+}
+
 .rdp {
   --rdp-cell-size: 40px;
   --rdp-accent-color: #6833d0;