@indico-data/design-system 2.46.0 → 2.47.1

package/lib/components/index.d.ts

@@ -18,4 +18,5 @@ export { DatePicker } from './forms/date/datePicker/DatePicker';
 export { IconTriggerDatePicker } from './forms/date/iconTriggerDatePicker';
 export { SingleInputDatePicker } from './forms/date/inputDatePicker';
 export { InputDateRangePicker } from './forms/date/inputDateRangePicker';
+export { Modal } from './modal';
 export { Badge } from './badge';

package/lib/components/modal/Modal.d.ts

@@ -0,0 +1,2 @@
+import { ModalProps } from './types';
+export declare const Modal: ({ className, children, isOpen, onRequestClose, portalClassName, overlayClassName, appElement, shouldCloseOnOverlayClick, shouldCloseOnEsc, testId, contentElement, overlayElement, position, parentSelector, ...rest }: ModalProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/modal/Modal.stories.d.ts

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

package/lib/components/modal/__tests__/Modal.test.d.ts

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

package/lib/components/modal/index.d.ts

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

package/lib/components/modal/types.d.ts

@@ -0,0 +1,16 @@
+export interface ModalProps {
+    className?: string;
+    children?: React.ReactNode;
+    isOpen: boolean;
+    onRequestClose?: () => void;
+    portalClassName?: string;
+    overlayClassName?: string;
+    appElement?: HTMLElement;
+    shouldCloseOnOverlayClick?: boolean;
+    shouldCloseOnEsc?: boolean;
+    testId?: string;
+    contentElement?: (props: any, children: React.ReactNode) => React.ReactElement;
+    overlayElement?: (props: any, contentElement: React.ReactElement) => React.ReactElement;
+    position?: 'top' | 'center';
+    parentSelector?: () => HTMLElement;
+}

package/lib/index.css

@@ -1822,6 +1822,93 @@ form {
   font-size: var(--pf-font-size-h1);
 }
 
+:root {
+  --pf-modal-rounded: var(--pf-rounded-lg);
+}
+
+:root [data-theme=light] {
+  --pf-modal-background-color: var(--pf-white-color);
+  --pf-modal-border-color: var(--pf-border-color);
+}
+
+:root [data-theme=dark],
+:root {
+  --pf-modal-background-color: var(--pf-primary-color-600);
+  --pf-modal-border-color: var(--pf-border-color);
+}
+
+.ReactModal__Overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ReactModal__Overlay {
+  opacity: 0;
+  transition: opacity 100ms ease-in-out;
+}
+
+.ReactModal__Overlay--after-open {
+  opacity: 1;
+}
+
+.ReactModal__Overlay--before-close {
+  opacity: 0;
+}
+
+.modal {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--pf-background-color);
+  border-radius: var(--pf-modal-rounded);
+  outline: none;
+}
+.modal--center {
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+.modal--top {
+  top: 50px;
+}
+.modal .modal-content {
+  background-color: var(--pf-modal-background-color);
+  border: var(--pf-border-sm) solid var(--pf-modal-border-color);
+  border-radius: var(--pf-modal-rounded);
+}
+.modal .modal-content .modal-body {
+  padding: var(--pf-padding-8);
+  padding-top: 0;
+}
+.modal .modal-content .modal-body h2 {
+  font-size: var(--pf-font-size-h1);
+}
+.modal .modal-content .modal-body h1,
+.modal .modal-content .modal-body h2,
+.modal .modal-content .modal-body h3,
+.modal .modal-content .modal-body h4,
+.modal .modal-content .modal-body h5,
+.modal .modal-content .modal-body h6 {
+  margin-bottom: var(--pf-margin-4);
+}
+.modal .modal-content .modal-body p {
+  margin-bottom: var(--pf-margin-4);
+}
+.modal .modal-content .modal-body hr {
+  margin-top: var(--pf-margin-8);
+  margin-bottom: var(--pf-margin-8);
+  border: var(--pf-border-sm) solid var(--pf-border-color);
+}
+.modal .modal-content .modal-close {
+  text-align: right;
+}
+
 :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

@@ -5,7 +5,7 @@ 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 { TableProps as TableProps$1, Direction as Direction$1, Alignment as Alignment$1 } from 'react-data-table-component';
-import { Props as Props$8 } from 'react-select';
+import { Props as Props$7 } from 'react-select';
 import { DateRange, OnSelectHandler, Mode, CustomComponents, Matcher, Formatters, MonthChangeEventHandler, DayEventHandler } from 'react-day-picker';
 
 declare const registerFontAwesomeIcons: (...icons: IconDefinition[]) => void;
@@ -211,65 +211,26 @@ type PermafrostComponent = {
 
 type SemanticColor = 'primary' | 'secondary' | 'warning' | 'error' | 'success' | 'info';
 
-type Props$7 = PermafrostComponent & {
+type Props$6 = PermafrostComponent & {
     ariaLabel?: string;
     size?: IconSizes;
     style?: React$1.CSSProperties;
     fill?: string;
 };
-declare function CircleSpinner(props: Props$7): React$1.ReactElement;
+declare function CircleSpinner(props: Props$6): React$1.ReactElement;
 
-type Props$6 = PermafrostComponent & {
+type Props$5 = PermafrostComponent & {
     width?: string;
 };
-declare function BarSpinner(props: Props$6): React$1.ReactElement;
+declare function BarSpinner(props: Props$5): React$1.ReactElement;
 
-type Props$5 = PermafrostComponent & {
+type Props$4 = PermafrostComponent & {
     color?: string;
     overallSize?: string | number;
     rippleSize?: string | number;
     showRandomMessage?: boolean;
 };
-declare function CirclePulse(props: Props$5): React$1.ReactElement;
-
-type ModalBaseProps = PermafrostComponent & {
-    children: React$1.ReactNode | React$1.ReactNode[];
-    clickToDismiss?(): void;
-    describedBy?: string;
-    node?: string;
-    open: boolean;
-    preventEscDismiss?: boolean;
-    preventReturnFocus?: boolean;
-    maxWidth?: string;
-} & ({
-    labelElement: string;
-} | {
-    labelText: string;
-});
-/**
- * Base modal component, powered by [react-modal](http://reactcommunity.org/react-modal/#usage)
- *
- * (Also see `ModalAdapter` in the styles file)
- *
- * Accessible element label must be included either as a string passed to `labelText`, or
- * the id of one of the children passed to `labelElement`. If a description is available,
- * pass that element’s id to the `describedBy` prop.
- */
-declare function ModalBase(props: ModalBaseProps): react_jsx_runtime.JSX.Element;
-
-type Props$4 = PermafrostComponent & Pick<ModalBaseProps, 'open'> & {
-    describedBy?: string;
-    clickOutsideHandler(e?: React$1.SyntheticEvent): void;
-    confirmText?: string;
-    message?: string | React$1.ReactNode;
-    modalNode?: string;
-    processing?: boolean;
-    rejectText?: string;
-    responseHandler(response: boolean, event: React$1.SyntheticEvent): void;
-    title?: string | React$1.ReactNode;
-    width?: number;
-};
-declare function ConfirmModal(props: Props$4): react_jsx_runtime.JSX.Element;
+declare function CirclePulse(props: Props$4): React$1.ReactElement;
 
 type Props$3 = PermafrostComponent & {
     questionMark?: boolean;
@@ -418,7 +379,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$7<OptionType> {
     options: OptionType[];
 }
 declare const Select: <OptionType extends SelectOption>({ classNamePrefix, className, components: customComponents, ...props }: SelectProps<OptionType>) => react_jsx_runtime.JSX.Element;
@@ -558,4 +519,23 @@ interface BadgeProps {
 
 declare const Badge: ({ className, children, size, string, ...rest }: BadgeProps) => react_jsx_runtime.JSX.Element;
 
-export { Badge, BarSpinner, Button, Card, Checkbox, CirclePulse, CircleSpinner, Col, ConfirmModal, Container, DatePicker, FloatUI, Form, Icon, IconTriggerDatePicker, LabeledInput as Input, Menu, ModalBase, LabeledPasswordInput as PasswordInput, Pill, Radio as RadioInput, Row, Select as SelectInput, SingleInputDatePicker, Skeleton, Table, LabeledTextarea as Textarea, Toggle as ToggleInput, Tooltip, registerFontAwesomeIcons };
+interface ModalProps {
+    className?: string;
+    children?: React.ReactNode;
+    isOpen: boolean;
+    onRequestClose?: () => void;
+    portalClassName?: string;
+    overlayClassName?: string;
+    appElement?: HTMLElement;
+    shouldCloseOnOverlayClick?: boolean;
+    shouldCloseOnEsc?: boolean;
+    testId?: string;
+    contentElement?: (props: any, children: React.ReactNode) => React.ReactElement;
+    overlayElement?: (props: any, contentElement: React.ReactElement) => React.ReactElement;
+    position?: 'top' | 'center';
+    parentSelector?: () => HTMLElement;
+}
+
+declare const Modal: ({ className, children, isOpen, onRequestClose, portalClassName, overlayClassName, appElement, shouldCloseOnOverlayClick, shouldCloseOnEsc, testId, contentElement, overlayElement, position, parentSelector, ...rest }: ModalProps) => 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, LabeledTextarea as Textarea, Toggle as ToggleInput, Tooltip, registerFontAwesomeIcons };

package/lib/index.esm.css

@@ -1822,6 +1822,93 @@ form {
   font-size: var(--pf-font-size-h1);
 }
 
+:root {
+  --pf-modal-rounded: var(--pf-rounded-lg);
+}
+
+:root [data-theme=light] {
+  --pf-modal-background-color: var(--pf-white-color);
+  --pf-modal-border-color: var(--pf-border-color);
+}
+
+:root [data-theme=dark],
+:root {
+  --pf-modal-background-color: var(--pf-primary-color-600);
+  --pf-modal-border-color: var(--pf-border-color);
+}
+
+.ReactModal__Overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ReactModal__Overlay {
+  opacity: 0;
+  transition: opacity 100ms ease-in-out;
+}
+
+.ReactModal__Overlay--after-open {
+  opacity: 1;
+}
+
+.ReactModal__Overlay--before-close {
+  opacity: 0;
+}
+
+.modal {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--pf-background-color);
+  border-radius: var(--pf-modal-rounded);
+  outline: none;
+}
+.modal--center {
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+.modal--top {
+  top: 50px;
+}
+.modal .modal-content {
+  background-color: var(--pf-modal-background-color);
+  border: var(--pf-border-sm) solid var(--pf-modal-border-color);
+  border-radius: var(--pf-modal-rounded);
+}
+.modal .modal-content .modal-body {
+  padding: var(--pf-padding-8);
+  padding-top: 0;
+}
+.modal .modal-content .modal-body h2 {
+  font-size: var(--pf-font-size-h1);
+}
+.modal .modal-content .modal-body h1,
+.modal .modal-content .modal-body h2,
+.modal .modal-content .modal-body h3,
+.modal .modal-content .modal-body h4,
+.modal .modal-content .modal-body h5,
+.modal .modal-content .modal-body h6 {
+  margin-bottom: var(--pf-margin-4);
+}
+.modal .modal-content .modal-body p {
+  margin-bottom: var(--pf-margin-4);
+}
+.modal .modal-content .modal-body hr {
+  margin-top: var(--pf-margin-8);
+  margin-bottom: var(--pf-margin-8);
+  border: var(--pf-border-sm) solid var(--pf-border-color);
+}
+.modal .modal-content .modal-close {
+  text-align: right;
+}
+
 :root [data-theme=light] {
   --pf-pill-primary-background-color: var(--pf-primary-color);
   --pf-pill-primary-font-color: var(--pf-white-color);