@indico-data/design-system 2.51.1 → 2.52.0

package/lib/components/index.d.ts

@@ -21,3 +21,4 @@ export { InputDateRangePicker } from './forms/date/inputDateRangePicker';
 export { Modal } from './modal';
 export { Badge } from './badge';
 export { Pagination } from './pagination';
+export { TanstackTable } from './tanstackTable';

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

@@ -1,2 +1,2 @@
-export type { ColumnDef } from '@tanstack/react-table';
+export type { ColumnDef, Row, Table } from '@tanstack/react-table';
 export { TanstackTable } from './TanstakTable';

package/lib/index.css

@@ -1871,6 +1871,14 @@ form {
 
 :root {
   --pf-modal-rounded: var(--pf-rounded-lg);
+  --pf-modal-close-button-top: var(--pf-margin-2);
+  --pf-modal-close-button-right: var(--pf-margin-2);
+  --pf-modal-close-button-padding: var(--pf-padding-3) var(--pf-padding-4);
+  --pf-modal-close-button-font-size: var(--pf-font-size-caption);
+  --pf-modal-close-button-icon-size: var(--pf-font-size-caption);
+  --pf-modal-overlay-background: rgba(0, 0, 0, 0.5);
+  --pf-modal-overlay-transition: opacity 100ms ease-in-out;
+  --pf-modal-content-padding: var(--pf-padding-10);
 }
 
 :root [data-theme=light] {
@@ -1890,7 +1898,7 @@ form {
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: var(--pf-modal-overlay-background);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1898,7 +1906,7 @@ form {
 
 .ReactModal__Overlay {
   opacity: 0;
-  transition: opacity 100ms ease-in-out;
+  transition: var(--pf-modal-overlay-transition);
 }
 
 .ReactModal__Overlay--after-open {
@@ -1924,14 +1932,28 @@ form {
 .modal--top {
   top: 50px;
 }
+.modal .modal-close-button {
+  position: absolute;
+  top: var(--pf-modal-close-button-top);
+  right: var(--pf-modal-close-button-right);
+  padding: var(--pf-modal-close-button-padding);
+  font-size: var(--pf-modal-close-button-font-size);
+  line-height: 1;
+}
+.modal .modal-close-button.btn .icon {
+  width: var(--pf-modal-close-button-icon-size) !important;
+  height: var(--pf-modal-close-button-icon-size);
+}
+.modal .modal-close-button.btn .icon svg {
+  width: 100%;
+  height: 100%;
+}
 .modal .modal-content {
+  position: relative;
   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;
+  padding: var(--pf-modal-content-padding);
 }
 .modal .modal-content .modal-body h2 {
   font-size: var(--pf-font-size-h1);
@@ -1941,9 +1963,6 @@ form {
   margin-bottom: var(--pf-margin-8);
   border: var(--pf-border-sm) solid var(--pf-border-color);
 }
-.modal .modal-content .modal-close {
-  text-align: right;
-}
 
 .pagination .form-control {
   margin-bottom: 0;

package/lib/index.d.ts

@@ -9,6 +9,7 @@ import { CSSObject } from 'styled-components';
 import { Props as Props$8 } from 'react-select';
 import { DateRange, OnSelectHandler, Mode, CustomComponents, Matcher, Formatters, MonthChangeEventHandler, DayEventHandler } from 'react-day-picker';
 import { ColumnDef, Row as Row$1 } from '@tanstack/react-table';
+export { ColumnDef, Row as TanstackTableRowType, Table as TanstackTableType } from '@tanstack/react-table';
 
 declare const registerFontAwesomeIcons: (...icons: IconDefinition[]) => void;
 

package/lib/index.esm.css

@@ -1871,6 +1871,14 @@ form {
 
 :root {
   --pf-modal-rounded: var(--pf-rounded-lg);
+  --pf-modal-close-button-top: var(--pf-margin-2);
+  --pf-modal-close-button-right: var(--pf-margin-2);
+  --pf-modal-close-button-padding: var(--pf-padding-3) var(--pf-padding-4);
+  --pf-modal-close-button-font-size: var(--pf-font-size-caption);
+  --pf-modal-close-button-icon-size: var(--pf-font-size-caption);
+  --pf-modal-overlay-background: rgba(0, 0, 0, 0.5);
+  --pf-modal-overlay-transition: opacity 100ms ease-in-out;
+  --pf-modal-content-padding: var(--pf-padding-10);
 }
 
 :root [data-theme=light] {
@@ -1890,7 +1898,7 @@ form {
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: var(--pf-modal-overlay-background);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1898,7 +1906,7 @@ form {
 
 .ReactModal__Overlay {
   opacity: 0;
-  transition: opacity 100ms ease-in-out;
+  transition: var(--pf-modal-overlay-transition);
 }
 
 .ReactModal__Overlay--after-open {
@@ -1924,14 +1932,28 @@ form {
 .modal--top {
   top: 50px;
 }
+.modal .modal-close-button {
+  position: absolute;
+  top: var(--pf-modal-close-button-top);
+  right: var(--pf-modal-close-button-right);
+  padding: var(--pf-modal-close-button-padding);
+  font-size: var(--pf-modal-close-button-font-size);
+  line-height: 1;
+}
+.modal .modal-close-button.btn .icon {
+  width: var(--pf-modal-close-button-icon-size) !important;
+  height: var(--pf-modal-close-button-icon-size);
+}
+.modal .modal-close-button.btn .icon svg {
+  width: 100%;
+  height: 100%;
+}
 .modal .modal-content {
+  position: relative;
   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;
+  padding: var(--pf-modal-content-padding);
 }
 .modal .modal-content .modal-body h2 {
   font-size: var(--pf-font-size-h1);
@@ -1941,9 +1963,6 @@ form {
   margin-bottom: var(--pf-margin-8);
   border: var(--pf-border-sm) solid var(--pf-border-color);
 }
-.modal .modal-content .modal-close {
-  text-align: right;
-}
 
 .pagination .form-control {
   margin-bottom: 0;

package/lib/index.esm.js

@@ -22626,10 +22626,12 @@ var libExports = lib.exports;
 var ReactModal = /*@__PURE__*/getDefaultExportFromCjs(libExports);
 
 const Modal = (_a) => {
-    var { className = '', children, isOpen, onRequestClose, portalClassName, overlayClassName, appElement, shouldCloseOnOverlayClick, shouldCloseOnEsc, testId, contentElement, overlayElement, position = 'center', parentSelector } = _a, rest = __rest(_a, ["className", "children", "isOpen", "onRequestClose", "portalClassName", "overlayClassName", "appElement", "shouldCloseOnOverlayClick", "shouldCloseOnEsc", "testId", "contentElement", "overlayElement", "position", "parentSelector"]);
+    var { className = '', children, isOpen, onRequestClose, portalClassName, overlayClassName, appElement = document.getElementById('theme-root') ||
+        document.getElementById('root') ||
+        document.body, shouldCloseOnOverlayClick, shouldCloseOnEsc, testId, contentElement, overlayElement, position = 'center', parentSelector } = _a, rest = __rest(_a, ["className", "children", "isOpen", "onRequestClose", "portalClassName", "overlayClassName", "appElement", "shouldCloseOnOverlayClick", "shouldCloseOnEsc", "testId", "contentElement", "overlayElement", "position", "parentSelector"]);
     const modalClasses = classNames('modal', `modal--${position}`, className);
     const overlayClasses = classNames('modal-overlay', overlayClassName);
-    return (jsx(ReactModal, Object.assign({ style: {}, className: modalClasses, overlayClassName: overlayClasses, testId: testId, isOpen: isOpen, onRequestClose: onRequestClose, portalClassName: portalClassName, appElement: appElement, parentSelector: parentSelector, shouldCloseOnOverlayClick: shouldCloseOnOverlayClick, shouldCloseOnEsc: shouldCloseOnEsc, contentElement: contentElement, overlayElement: overlayElement }, rest, { children: jsxs("div", { className: "modal-content", children: [jsx("div", { className: "modal-header", children: jsx(Row, { nogutter: true, children: jsx(Col, { xs: 12, className: "modal-close", children: jsx(Button$1, { className: "modal-close-button", onClick: onRequestClose, variant: "link", size: "md", iconLeft: "fa-xmark", ariaLabel: "Close" }) }) }) }), jsx("div", { className: "modal-body", children: children })] }) })));
+    return (jsx(ReactModal, Object.assign({ style: {}, className: modalClasses, overlayClassName: overlayClasses, testId: testId, isOpen: isOpen, onRequestClose: onRequestClose, portalClassName: portalClassName, appElement: appElement, parentSelector: parentSelector, shouldCloseOnOverlayClick: shouldCloseOnOverlayClick, shouldCloseOnEsc: shouldCloseOnEsc, contentElement: contentElement, overlayElement: overlayElement }, rest, { children: jsxs("div", { className: "modal-content", children: [jsx(Button$1, { className: "modal-close-button", onClick: onRequestClose, variant: "link", size: "md", iconLeft: "x-close", ariaLabel: "Close" }), jsx("div", { className: "modal-body", children: children })] }) })));
 };
 
 /**