@indico-data/design-system 2.19.0 → 2.21.0

package/lib/index.css

@@ -14,7 +14,7 @@
   --pf-font-size-subtitle: var(--pf-font-size-base);
   --pf-font-size-subtitle2: calc(0.875 * var(--pf-font-size-base));
   --pf-font-size-button: var(--pf-font-size-base);
-  --pf-font-size-overine: calc(0.75 * var(--pf-font-size-base));
+  --pf-font-size-overline: calc(0.75 * var(--pf-font-size-base));
   --pf-font-weight-thin: 100;
   --pf-font-weight-light: 300;
   --pf-font-weight-regular: 400;
@@ -1609,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;
@@ -2052,7 +2107,7 @@ form {
   --pf-font-size-subtitle: var(--pf-font-size-base);
   --pf-font-size-subtitle2: calc(0.875 * var(--pf-font-size-base));
   --pf-font-size-button: var(--pf-font-size-base);
-  --pf-font-size-overine: calc(0.75 * var(--pf-font-size-base));
+  --pf-font-size-overline: calc(0.75 * var(--pf-font-size-base));
   --pf-font-weight-thin: 100;
   --pf-font-weight-light: 300;
   --pf-font-weight-regular: 400;
@@ -2140,7 +2195,7 @@ p,
 }
 
 .text-overline {
-  font-size: var(--pf-font-size-overine);
+  font-size: var(--pf-font-size-overline);
 }
 
 .text-capitalize {

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;
 
@@ -1049,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, LabeledInput as Input, Button$1 as LegacyButton, ListTable, LoadingAwareContainer, LoadingList, margin as MARGINS, MATH, mediaQueries as MEDIA_QUERIES, ModalBase, MultiCombobox, NoInputDatePicker, NumberInput, padding as PADDINGS, Pagination, LabeledPasswordInput as 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, LabeledTextarea as 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

@@ -14,7 +14,7 @@
   --pf-font-size-subtitle: var(--pf-font-size-base);
   --pf-font-size-subtitle2: calc(0.875 * var(--pf-font-size-base));
   --pf-font-size-button: var(--pf-font-size-base);
-  --pf-font-size-overine: calc(0.75 * var(--pf-font-size-base));
+  --pf-font-size-overline: calc(0.75 * var(--pf-font-size-base));
   --pf-font-weight-thin: 100;
   --pf-font-weight-light: 300;
   --pf-font-weight-regular: 400;
@@ -1609,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;
@@ -2052,7 +2107,7 @@ form {
   --pf-font-size-subtitle: var(--pf-font-size-base);
   --pf-font-size-subtitle2: calc(0.875 * var(--pf-font-size-base));
   --pf-font-size-button: var(--pf-font-size-base);
-  --pf-font-size-overine: calc(0.75 * var(--pf-font-size-base));
+  --pf-font-size-overline: calc(0.75 * var(--pf-font-size-base));
   --pf-font-weight-thin: 100;
   --pf-font-weight-light: 300;
   --pf-font-weight-regular: 400;
@@ -2140,7 +2195,7 @@ p,
 }
 
 .text-overline {
-  font-size: var(--pf-font-size-overine);
+  font-size: var(--pf-font-size-overline);
 }
 
 .text-capitalize {