@indico-data/design-system 3.13.1 → 3.14.1

package/lib/components/floatUI/FloatUI.d.ts

@@ -1,2 +1,2 @@
 import { FloatUIProps } from './types';
-export declare function FloatUI({ children, ariaLabel, isOpen: controlledIsOpen, setIsOpen: controlledSetIsOpen, isPortal, portalOptions, floatingOptions, className, hover, }: FloatUIProps): import("react/jsx-runtime").JSX.Element;
+export declare function FloatUI({ children, ariaLabel, isOpen: controlledIsOpen, setIsOpen: controlledSetIsOpen, isPortal, portalOptions, floatingOptions, className, hover, onOpenChange, }: FloatUIProps): import("react/jsx-runtime").JSX.Element;

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

@@ -20,4 +20,6 @@ export type FloatUIProps = {
     setIsOpen?: React.Dispatch<React.SetStateAction<boolean>>;
     /** If true, opens on hover instead of click. Defaults to false. */
     hover?: boolean;
+    /** Callback function to be called when the FloatUI is opened or closed. */
+    onOpenChange?: (isOpen: boolean) => void;
 };

package/lib/index.css

@@ -6030,6 +6030,9 @@ body div[class*=select__single-value] {
 .tanstack-table__outer-container .tanstack-table__column--is-not-pinned {
   opacity: 0.5;
 }
+.tanstack-table__outer-container .tanstack-table__thead__th {
+  border-top: none;
+}
 .tanstack-table__outer-container .tanstack-table__container {
   height: calc(100vh - 70px);
   grid-template-rows: auto 1fr auto;
@@ -6041,29 +6044,7 @@ body div[class*=select__single-value] {
   overflow-y: auto;
   background-color: var(--pf-semantic-page-background);
   border-radius: var(--pf-border-radius-md);
-  border-left: var(--pf-border-sm) solid var(--pf-semantic-border-secondary);
-  border-right: var(--pf-border-sm) solid var(--pf-semantic-border-secondary);
-  border-bottom: var(--pf-border-sm) solid var(--pf-semantic-border-secondary);
-  scrollbar-width: thin;
-  scrollbar-color: var(--pf-semantic-border-secondary) var(--pf-semantic-page-background);
-}
-.tanstack-table__outer-container .tanstack-table__container::-webkit-scrollbar {
-  width: var(--pf-spacing-sm);
-  height: var(--pf-spacing-sm);
-  cursor: pointer;
-}
-.tanstack-table__outer-container .tanstack-table__container::-webkit-scrollbar-track {
-  background: var(--pf-semantic-page-background);
-  border-radius: var(--pf-border-radius-xs);
-  cursor: pointer;
-}
-.tanstack-table__outer-container .tanstack-table__container::-webkit-scrollbar-thumb {
-  background: var(--pf-semantic-border-secondary);
-  border-radius: var(--pf-border-radius-xs);
-  cursor: pointer;
-}
-.tanstack-table__outer-container .tanstack-table__container::-webkit-scrollbar-thumb:hover {
-  background: var(--pf-semantic-background-brand-hover);
+  border: var(--pf-border-sm) solid var(--pf-semantic-border-secondary);
 }
 
 .tanstack-table {

package/lib/index.d.ts

@@ -760,9 +760,11 @@ type FloatUIProps = {
     setIsOpen?: React.Dispatch<React.SetStateAction<boolean>>;
     /** If true, opens on hover instead of click. Defaults to false. */
     hover?: boolean;
+    /** Callback function to be called when the FloatUI is opened or closed. */
+    onOpenChange?: (isOpen: boolean) => void;
 };
 
-declare function FloatUI({ children, ariaLabel, isOpen: controlledIsOpen, setIsOpen: controlledSetIsOpen, isPortal, portalOptions, floatingOptions, className, hover, }: FloatUIProps): react_jsx_runtime.JSX.Element;
+declare function FloatUI({ children, ariaLabel, isOpen: controlledIsOpen, setIsOpen: controlledSetIsOpen, isPortal, portalOptions, floatingOptions, className, hover, onOpenChange, }: FloatUIProps): react_jsx_runtime.JSX.Element;
 
 type MenuProps = {
     children: React$1.ReactNode;

package/lib/index.esm.css

@@ -6030,6 +6030,9 @@ body div[class*=select__single-value] {
 .tanstack-table__outer-container .tanstack-table__column--is-not-pinned {
   opacity: 0.5;
 }
+.tanstack-table__outer-container .tanstack-table__thead__th {
+  border-top: none;
+}
 .tanstack-table__outer-container .tanstack-table__container {
   height: calc(100vh - 70px);
   grid-template-rows: auto 1fr auto;
@@ -6041,29 +6044,7 @@ body div[class*=select__single-value] {
   overflow-y: auto;
   background-color: var(--pf-semantic-page-background);
   border-radius: var(--pf-border-radius-md);
-  border-left: var(--pf-border-sm) solid var(--pf-semantic-border-secondary);
-  border-right: var(--pf-border-sm) solid var(--pf-semantic-border-secondary);
-  border-bottom: var(--pf-border-sm) solid var(--pf-semantic-border-secondary);
-  scrollbar-width: thin;
-  scrollbar-color: var(--pf-semantic-border-secondary) var(--pf-semantic-page-background);
-}
-.tanstack-table__outer-container .tanstack-table__container::-webkit-scrollbar {
-  width: var(--pf-spacing-sm);
-  height: var(--pf-spacing-sm);
-  cursor: pointer;
-}
-.tanstack-table__outer-container .tanstack-table__container::-webkit-scrollbar-track {
-  background: var(--pf-semantic-page-background);
-  border-radius: var(--pf-border-radius-xs);
-  cursor: pointer;
-}
-.tanstack-table__outer-container .tanstack-table__container::-webkit-scrollbar-thumb {
-  background: var(--pf-semantic-border-secondary);
-  border-radius: var(--pf-border-radius-xs);
-  cursor: pointer;
-}
-.tanstack-table__outer-container .tanstack-table__container::-webkit-scrollbar-thumb:hover {
-  background: var(--pf-semantic-background-brand-hover);
+  border: var(--pf-border-sm) solid var(--pf-semantic-border-secondary);
 }
 
 .tanstack-table {

package/lib/index.esm.js

@@ -13826,7 +13826,7 @@ const defaultOptions$1 = {
     placement: 'bottom-start',
     middleware: [offset$2(5), flip$2(), shift$2()],
 };
-function FloatUI({ children, ariaLabel, isOpen: controlledIsOpen, setIsOpen: controlledSetIsOpen, isPortal = false, portalOptions = {}, floatingOptions = defaultOptions$1, className, hover = false, }) {
+function FloatUI({ children, ariaLabel, isOpen: controlledIsOpen, setIsOpen: controlledSetIsOpen, isPortal = false, portalOptions = {}, floatingOptions = defaultOptions$1, className, hover = false, onOpenChange, }) {
     const [internalIsOpen, setInternalIsOpen] = useState(false);
     // Determine whether the component is controlled or uncontrolled
     const isControlled = controlledIsOpen !== undefined && controlledSetIsOpen !== undefined;
@@ -13842,13 +13842,18 @@ function FloatUI({ children, ariaLabel, isOpen: controlledIsOpen, setIsOpen: con
     if (!isValidElement(trigger) || !isValidElement(content)) {
         throw new Error('Both children of FloatUI must be valid React elements.');
     }
-    const { refs, floatingStyles, context } = useFloating(Object.assign(Object.assign({}, floatingOptions), { open: isOpen, onOpenChange: setIsOpen, elements: {
+    const { refs, floatingStyles, context } = useFloating(Object.assign(Object.assign({}, floatingOptions), { open: isOpen, onOpenChange: (isOpen) => {
+            setIsOpen(isOpen);
+            onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(isOpen);
+        }, elements: {
             reference: referenceElementRef.current,
         } }));
     // Can't call hooks conditionally so this enabled option is needed.
     const click = useClick(context, { enabled: !hover });
     const hoverHook = useHover(context, { enabled: hover });
-    const dismiss = useDismiss(context);
+    const dismiss = useDismiss(context, {
+        bubbles: true,
+    });
     const { getReferenceProps, getFloatingProps } = useInteractions([click, hoverHook, dismiss]);
     const tooltipContent = (jsx("div", Object.assign({ ref: refs.setFloating }, getFloatingProps(), { style: floatingStyles, role: "dialog", "aria-label": ariaLabel, className: `floatui-container ${className}`, children: jsx("div", { ref: floatUIContentRef, className: "floatui-content", children: content }) })));
     return (jsxs(Fragment, { children: [jsx("div", Object.assign({ ref: refs.setReference }, getReferenceProps(), { children: trigger })), isOpen &&