@indico-data/design-system 3.13.0 → 3.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "3.13.0",
+  "version": "3.14.0",
   "description": "",
   "author": "",
   "main": "lib/index.js",
@@ -40,16 +40,13 @@
     "@react-types/checkbox": "^3.8.1",
     "@react-types/radio": "^3.8.0",
     "@tanstack/react-table": "^8.21.2",
-    "@testing-library/react": "^16.0.0",
     "classnames": "^2.5.1",
     "date-fns": "^3.6.0",
     "focus-trap-react": "^10.2.3",
-    "html-webpack-plugin": "^5.6.0",
     "prop-types": "^15.8.1",
     "react-aria-components": "^1.2.1",
     "react-data-table-component": "^7.6.2",
     "react-day-picker": "9.1.3",
-    "react-docgen-typescript": "^2.4.0",
     "react-grid-system": "^8.2.0",
     "react-hook-form": "^7.52.1",
     "react-modal": "^3.16.1",
@@ -57,13 +54,8 @@
     "react-stately": "^3.31.0",
     "react-toastify": "^11.0.5",
     "react-tooltip": "5.28.0",
-    "svgo": "^3.2.2",
-    "ts-jest": "^29.3.1",
     "tslib": "^2.6.2",
     "uuid": "^9.0.1",
-    "webpack": "^5.98.0",
-    "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^5.2.1",
     "zod": "^3.23.8"
   },
   "devDependencies": {
@@ -101,7 +93,7 @@
     "@storybook/theming": "^8.0.8",
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^16.0.0",
+    "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/css-modules": "^1.0.5",
     "@types/identity-obj-proxy": "^3",
@@ -124,6 +116,7 @@
     "eslint": "^8.56.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "html-webpack-plugin": "^5.6.5",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
@@ -134,6 +127,7 @@
     "postcss-url": "^10.1.3",
     "prettier": "3.2.5",
     "react": "^18.2.0",
+    "react-docgen-typescript": "^2.4.0",
     "react-dom": "^18.2.0",
     "react-grid-system": "^8.2.0",
     "react-router-dom": "^6.22.1",
@@ -152,11 +146,16 @@
     "storybook-css-modules": "^1.0.8",
     "style-loader": "2.0.0",
     "styled-components": "^6.1.8",
+    "svgo": "^4.0.0",
+    "ts-jest": "^29.4.6",
     "ts-loader": "^9.5.1",
     "ts-node": "^10.9.2",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
     "typescript": "^5.3.3",
-    "webpack-bundle-analyzer": "^4.10.2"
+    "webpack": "^5.103.0",
+    "webpack-bundle-analyzer": "^4.10.2",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.2.2"
   },
   "resolutions": {
     "jackspeak": "2.1.1"

package/src/components/floatUI/FloatUI.tsx

@@ -29,6 +29,7 @@ export function FloatUI({
   floatingOptions = defaultOptions,
   className,
   hover = false,
+  onOpenChange,
 }: FloatUIProps) {
   const [internalIsOpen, setInternalIsOpen] = useState(false);
 
@@ -56,7 +57,10 @@ export function FloatUI({
   const { refs, floatingStyles, context } = useFloating({
     ...floatingOptions,
     open: isOpen,
-    onOpenChange: setIsOpen,
+    onOpenChange: (isOpen) => {
+      setIsOpen(isOpen);
+      onOpenChange?.(isOpen);
+    },
     elements: {
       reference: referenceElementRef.current,
     },
@@ -65,7 +69,9 @@ export function FloatUI({
   // 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]);
 

package/src/components/floatUI/__tests__/FloatUI.test.tsx

@@ -107,7 +107,7 @@ describe('FloatUI Component', () => {
     );
 
     fireEvent.click(screen.getByText('Toggle'));
-    expect(setIsOpen).toHaveBeenCalledWith(true, expect.any(Object), 'click');
+    expect(setIsOpen).toHaveBeenCalledWith(true);
   });
 
   it('displays the FloatUI content when the trigger is hovered in hover mode', async () => {

package/src/components/floatUI/types.ts

@@ -21,4 +21,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/src/components/table/components/HorizontalStickyHeader.tsx

@@ -45,7 +45,7 @@ const HorizontalStickyHeader = ({
         variant="link"
         size="sm"
         iconLeft="pin"
-        onClick={onPinColumn}
+        onClick={() => onPinColumn?.(`sticky-column-${position}`)}
         ariaLabel={isPinned ? 'Unpin column' : 'Pin column'}
         className={`table__column--${isPinned ? 'is-pinned' : 'is-not-pinned'} table__column__pin-action`}
       />