@neo4j-ndl/react 4.23.5 → 4.24.1

package/lib/types/popover/Popover.d.ts

@@ -56,6 +56,12 @@ type PopoverProps = {
     role?: 'tooltip' | 'dialog' | 'alertdialog' | 'menu' | 'listbox' | 'grid' | 'tree';
     /** If the popover should close when the user clicks outside of it */
     closeOnClickOutside?: boolean;
+    /**
+     * If the popover should close when focus moves outside of it, for example when tabbing away or focusing another element.
+     * Defaults to the value of `closeOnClickOutside`.
+     * Has no effect when `shouldCaptureFocus` is true, since focus cannot leave the popover.
+     */
+    shouldCloseOnFocusOut?: boolean;
     /** The strategy of the popover. Fixed should be used when the popover is inside a Dialog. */
     strategy?: 'fixed' | 'absolute';
     /** Whether the content is rendered in a portal */
@@ -81,7 +87,7 @@ type PopoverContentProps = {
     className?: string;
     style?: React.CSSProperties;
 };
-declare const Popover: (({ children, anchorElement, placement, isOpen, offset, anchorPosition, hasAnchorPortal: hasAnchorPortalProp, shouldCaptureFocus, initialFocus, onOpenChange, role, closeOnClickOutside, isPortaled: isPortaledProp, strategy: strategyProp, shouldConstrainSize, }: PopoverProps) => import("react/jsx-runtime").JSX.Element) & {
+declare const Popover: (({ children, anchorElement, placement, isOpen, offset, anchorPosition, hasAnchorPortal: hasAnchorPortalProp, shouldCaptureFocus, initialFocus, onOpenChange, role, closeOnClickOutside, shouldCloseOnFocusOut, isPortaled: isPortaledProp, strategy: strategyProp, shouldConstrainSize, }: PopoverProps) => import("react/jsx-runtime").JSX.Element) & {
     Anchor: ({ children, ref, ...props }: CommonProps<"div", PopoverAnchorProps>) => import("react/jsx-runtime").JSX.Element;
     Content: <T extends React.ElementType = "div">({ as, className, style, children, htmlAttributes, ref, ...restProps }: PolymorphicCommonProps<T, PopoverContentProps>) => import("react/jsx-runtime").JSX.Element | null;
     Trigger: ({ children, hasButtonWrapper, ref, ...props }: CommonProps<"button", PopoverTriggerProps>) => import("react/jsx-runtime").JSX.Element;

package/lib/types/popover/Popover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/popover/Popover.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAGL,KAAK,aAAa,EAClB,KAAK,SAAS,EAEf,MAAM,oBAAoB,CAAC;AAE5B,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EACL,KAAK,WAAW,EAChB,KAAK,sBAAsB,EAC5B,MAAM,kBAAkB,CAAC;AAO1B,KAAK,gBAAgB,GACjB,oBAAoB,GACpB,wBAAwB,GACxB,0BAA0B,GAC1B,oBAAoB,GACpB,wBAAwB,GACxB,0BAA0B,GAC1B,yBAAyB,GACzB,mBAAmB,GACnB,yBAAyB,GACzB,yBAAyB,GACzB,mBAAmB,GACnB,yBAAyB,CAAC;AAE9B,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,gBAAgB,EAAE,SAAS,CAapE,CAAC;AACF,KAAK,YAAY,GAAG;IAClB,6BAA6B;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC/B,0EAA0E;IAC1E,cAAc,CAAC,EAAE;QAGf,CAAC,EAAE,MAAM,CAAC;QAGV,CAAC,EAAE,MAAM,CAAC;KACX,CAAC;IACF,gTAAgT;IAChT,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,yHAAyH;IACzH,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,sKAAsK;IACtK,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IACxD,yHAAyH;IACzH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,8EAA8E;IAC9E,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,wCAAwC;IACxC,YAAY,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAE5D;;OAEG;IACH,IAAI,CAAC,EACD,SAAS,GACT,QAAQ,GACR,aAAa,GACb,MAAM,GACN,SAAS,GACT,MAAM,GACN,MAAM,CAAC;IACX,qEAAqE;IAGrE,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,6FAA6F;IAC7F,QAAQ,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAChC,kDAAkD;IAClD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;SAGK;IACL,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B,CAAC;AAMF,eAAO,MAAM,iBAAiB,gDAQ7B,CAAC;AAiDF,KAAK,mBAAmB,GAAG;IACzB,iCAAiC;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,iGAAiG;IACjG,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,CAAC;AA0CF,KAAK,kBAAkB,GAAG;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAmCF,KAAK,mBAAmB,GAAG;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAqEF,QAAA,MAAM,OAAO,uQA5LV,YAAY;0CAyFZ,WAAW,CAAC,KAAK,EAAE,kBAAkB,CAAC;cAgCjB,CAAC,SAAS,KAAK,CAAC,WAAW,iFAQhD,sBAAsB,CAAC,CAAC,EAAE,mBAAmB,CAAC;6DAtF9C,WAAW,CAAC,QAAQ,EAAE,mBAAmB,CAAC;CAqJ3C,CAAC;AAEH,OAAO,EAAE,OAAO,EAAE,CAAC"}
+{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/popover/Popover.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAGL,KAAK,aAAa,EAClB,KAAK,SAAS,EAEf,MAAM,oBAAoB,CAAC;AAE5B,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EACL,KAAK,WAAW,EAChB,KAAK,sBAAsB,EAC5B,MAAM,kBAAkB,CAAC;AAO1B,KAAK,gBAAgB,GACjB,oBAAoB,GACpB,wBAAwB,GACxB,0BAA0B,GAC1B,oBAAoB,GACpB,wBAAwB,GACxB,0BAA0B,GAC1B,yBAAyB,GACzB,mBAAmB,GACnB,yBAAyB,GACzB,yBAAyB,GACzB,mBAAmB,GACnB,yBAAyB,CAAC;AAE9B,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,gBAAgB,EAAE,SAAS,CAapE,CAAC;AACF,KAAK,YAAY,GAAG;IAClB,6BAA6B;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC/B,0EAA0E;IAC1E,cAAc,CAAC,EAAE;QAGf,CAAC,EAAE,MAAM,CAAC;QAGV,CAAC,EAAE,MAAM,CAAC;KACX,CAAC;IACF,gTAAgT;IAChT,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,yHAAyH;IACzH,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,sKAAsK;IACtK,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IACxD,yHAAyH;IACzH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,8EAA8E;IAC9E,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,wCAAwC;IACxC,YAAY,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAE5D;;OAEG;IACH,IAAI,CAAC,EACD,SAAS,GACT,QAAQ,GACR,aAAa,GACb,MAAM,GACN,SAAS,GACT,MAAM,GACN,MAAM,CAAC;IACX,qEAAqE;IAGrE,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,6FAA6F;IAC7F,QAAQ,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAChC,kDAAkD;IAClD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;SAGK;IACL,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B,CAAC;AAMF,eAAO,MAAM,iBAAiB,gDAQ7B,CAAC;AAmDF,KAAK,mBAAmB,GAAG;IACzB,iCAAiC;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,iGAAiG;IACjG,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,CAAC;AA0CF,KAAK,kBAAkB,GAAG;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAmCF,KAAK,mBAAmB,GAAG;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAsEF,QAAA,MAAM,OAAO,8RA9LV,YAAY;0CA0FZ,WAAW,CAAC,KAAK,EAAE,kBAAkB,CAAC;cAgCjB,CAAC,SAAS,KAAK,CAAC,WAAW,iFAQhD,sBAAsB,CAAC,CAAC,EAAE,mBAAmB,CAAC;6DAtF9C,WAAW,CAAC,QAAQ,EAAE,mBAAmB,CAAC;CAsJ3C,CAAC;AAEH,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/lib/types/popover/use-popover.d.ts

@@ -36,6 +36,7 @@ export interface PopoverOptions {
     role?: 'tooltip' | 'dialog' | 'alertdialog' | 'menu' | 'listbox' | 'grid' | 'tree';
     closeOnClickOutside?: boolean;
     closeOnReferencePress?: boolean;
+    shouldCloseOnFocusOut?: boolean;
     returnFocus?: FloatingFocusManagerProps['returnFocus'];
     strategy?: 'fixed' | 'absolute';
     isPortaled?: boolean;
@@ -50,9 +51,10 @@ export interface UsePopoverReturn extends UseInteractionsReturn, ReturnType<type
     setDescriptionId: (descriptionId: string | undefined) => void;
     anchorElementAsPortalAnchor: boolean | undefined;
     shouldCaptureFocus: boolean | undefined;
+    shouldCloseOnFocusOut: boolean | undefined;
     initialFocus: number | React.RefObject<HTMLElement | null> | undefined;
     isPortaled: boolean;
     returnFocus: FloatingFocusManagerProps['returnFocus'];
 }
-export declare function usePopover({ isInitialOpen, placement, isOpen: controlledOpen, onOpenChange: setControlledOpen, offsetOption, anchorElement, anchorPosition, anchorElementAsPortalAnchor, shouldCaptureFocus, initialFocus, role: roleProp, closeOnClickOutside, closeOnReferencePress, returnFocus, strategy, isPortaled, shouldConstrainSize, }?: PopoverOptions): UsePopoverReturn;
+export declare function usePopover({ isInitialOpen, placement, isOpen: controlledOpen, onOpenChange: setControlledOpen, offsetOption, anchorElement, anchorPosition, anchorElementAsPortalAnchor, shouldCaptureFocus, initialFocus, role: roleProp, closeOnClickOutside, closeOnReferencePress, shouldCloseOnFocusOut, returnFocus, strategy, isPortaled, shouldConstrainSize, }?: PopoverOptions): UsePopoverReturn;
 //# sourceMappingURL=use-popover.d.ts.map

package/lib/types/popover/use-popover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-popover.d.ts","sourceRoot":"","sources":["../../../src/popover/use-popover.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAGL,KAAK,yBAAyB,EAE9B,KAAK,aAAa,EAClB,KAAK,SAAS,EAMd,WAAW,EAEX,KAAK,qBAAqB,EAG3B,MAAM,oBAAoB,CAAC;AAI5B,MAAM,WAAW,cAAc;IAC7B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IACtD,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,aAAa,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC/B,cAAc,CAAC,EAAE;QAGf,CAAC,EAAE,MAAM,CAAC;QAGV,CAAC,EAAE,MAAM,CAAC;KACX,CAAC;IAGF,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC5D,IAAI,CAAC,EACD,SAAS,GACT,QAAQ,GACR,aAAa,GACb,MAAM,GACN,SAAS,GACT,MAAM,GACN,MAAM,CAAC;IAGX,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAG9B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,WAAW,CAAC,EAAE,yBAAyB,CAAC,aAAa,CAAC,CAAC;IACvD,QAAQ,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAChC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,MAAM,WAAW,gBACf,SAAQ,qBAAqB,EAAE,UAAU,CAAC,OAAO,WAAW,CAAC;IAC7D,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,aAAa,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,gBAAgB,EAAE,KAAK,CAAC,aAAa,CAAC;IACtC,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAClD,gBAAgB,EAAE,CAAC,aAAa,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAG9D,2BAA2B,EAAE,OAAO,GAAG,SAAS,CAAC;IACjD,kBAAkB,EAAE,OAAO,GAAG,SAAS,CAAC;IACxC,YAAY,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,SAAS,CAAC;IACvE,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,yBAAyB,CAAC,aAAa,CAAC,CAAC;CACvD;AAED,wBAAgB,UAAU,CAAC,EACzB,aAAqB,EACrB,SAAoB,EACpB,MAAM,EAAE,cAAc,EACtB,YAAY,EAAE,iBAAiB,EAC/B,YAAiB,EACjB,aAAa,EACb,cAAc,EACd,2BAA2B,EAC3B,kBAAkB,EAClB,YAAY,EACZ,IAAI,EAAE,QAAQ,EACd,mBAAmB,EACnB,qBAAqB,EACrB,WAAW,EACX,QAAqB,EACrB,UAAiB,EACjB,mBAA2B,GAC5B,GAAE,cAAmB,GAAG,gBAAgB,CA4GxC"}
+{"version":3,"file":"use-popover.d.ts","sourceRoot":"","sources":["../../../src/popover/use-popover.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAGL,KAAK,yBAAyB,EAE9B,KAAK,aAAa,EAClB,KAAK,SAAS,EAMd,WAAW,EAEX,KAAK,qBAAqB,EAG3B,MAAM,oBAAoB,CAAC;AAI5B,MAAM,WAAW,cAAc;IAC7B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IACtD,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,aAAa,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC/B,cAAc,CAAC,EAAE;QAGf,CAAC,EAAE,MAAM,CAAC;QAGV,CAAC,EAAE,MAAM,CAAC;KACX,CAAC;IAGF,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC5D,IAAI,CAAC,EACD,SAAS,GACT,QAAQ,GACR,aAAa,GACb,MAAM,GACN,SAAS,GACT,MAAM,GACN,MAAM,CAAC;IAGX,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAG9B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,WAAW,CAAC,EAAE,yBAAyB,CAAC,aAAa,CAAC,CAAC;IACvD,QAAQ,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAChC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,MAAM,WAAW,gBACf,SAAQ,qBAAqB,EAAE,UAAU,CAAC,OAAO,WAAW,CAAC;IAC7D,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,aAAa,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,gBAAgB,EAAE,KAAK,CAAC,aAAa,CAAC;IACtC,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAClD,gBAAgB,EAAE,CAAC,aAAa,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAG9D,2BAA2B,EAAE,OAAO,GAAG,SAAS,CAAC;IACjD,kBAAkB,EAAE,OAAO,GAAG,SAAS,CAAC;IACxC,qBAAqB,EAAE,OAAO,GAAG,SAAS,CAAC;IAC3C,YAAY,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,SAAS,CAAC;IACvE,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,yBAAyB,CAAC,aAAa,CAAC,CAAC;CACvD;AAED,wBAAgB,UAAU,CAAC,EACzB,aAAqB,EACrB,SAAoB,EACpB,MAAM,EAAE,cAAc,EACtB,YAAY,EAAE,iBAAiB,EAC/B,YAAiB,EACjB,aAAa,EACb,cAAc,EACd,2BAA2B,EAC3B,kBAAkB,EAClB,YAAY,EACZ,IAAI,EAAE,QAAQ,EACd,mBAAmB,EACnB,qBAAqB,EACrB,qBAAqB,EACrB,WAAW,EACX,QAAqB,EACrB,UAAiB,EACjB,mBAA2B,GAC5B,GAAE,cAAmB,GAAG,gBAAgB,CA8GxC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-ndl/react",
-  "version": "4.23.5",
+  "version": "4.24.1",
   "sideEffects": false,
   "description": "React implementation of Neo4j Design System",
   "keywords": [
@@ -32,6 +32,11 @@
       "require": "./lib/cjs/ai/index.js",
       "import": "./lib/esm/ai/index.js"
     },
+    "./announcement-banner": {
+      "types": "./lib/types/announcement-banner/index.d.ts",
+      "require": "./lib/cjs/announcement-banner/index.js",
+      "import": "./lib/esm/announcement-banner/index.js"
+    },
     "./avatar": {
       "types": "./lib/types/avatar/index.d.ts",
       "require": "./lib/cjs/avatar/index.js",
@@ -404,7 +409,7 @@
     "@tanstack/react-table": "8.21.3",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
-    "@neo4j-ndl/base": "^4.22.4"
+    "@neo4j-ndl/base": "^4.23.0"
   },
   "dependencies": {
     "@dnd-kit/core": "6.3.1",

package/skills/ndl-react/SKILL.md

@@ -2,7 +2,7 @@
 name: ndl-react
 metadata:
   package: '@neo4j-ndl/react'
-  version: '4.23.5'
+  version: '4.24.1'
 description: >-
   Build and edit UI with the Neo4j Needle React design system
   (@neo4j-ndl/react). Use when adding, composing, or modifying Needle components
@@ -15,7 +15,7 @@ description: >-
 
 # Neo4j Needle (@neo4j-ndl/react)
 
-> 📌 Shipped with `@neo4j-ndl/react` v4.23.5. Once installed into your repo (e.g. via
+> 📌 Shipped with `@neo4j-ndl/react` v4.24.1. Once installed into your repo (e.g. via
 > `npx skills add`) this folder is detached from the package — the installed
 > package (TypeScript types in `node_modules/@neo4j-ndl/react`) is the source of
 > truth.
@@ -134,6 +134,7 @@ Import from `@neo4j-ndl/react`.
 | Component | Docs | Accessibility | Examples |
 |-----------|------|---------------|----------|
 | `Accordion` | [components/accordion.md](components/accordion.md) | ✅ | 6 |
+| `AnnouncementBanner` | [components/announcement-banner.md](components/announcement-banner.md) | ✅ | 9 |
 | `Avatar` | [components/avatar.md](components/avatar.md) | ✅ | 7 |
 | `Banner` | [components/banner.md](components/banner.md) | ✅ | 6 |
 | `Box` | [components/box.md](components/box.md) |  | 1 |

package/skills/ndl-react/components/announcement-banner.md

@@ -0,0 +1,468 @@
+[//]: # (This file is auto-generated by the docs:generate-skills script, do not edit it manually)
+
+# AnnouncementBanner
+
+Import: `import { AnnouncementBanner } from '@neo4j-ndl/react'`
+
+## Props
+
+### AnnouncementBanner
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `as` | `ElementType<any, keyof IntrinsicElements>` |  |  | An override of the default HTML tag of the root of the component. Can also be another React component. |
+| `children` | `ReactNode` |  |  | Content to be shown in the announcement banner. |
+| `hasIcon` | `boolean` |  | `false` | Shows a status icon. The icon is based on the value of the `variant` prop |
+| `icon` | `ReactNode` |  |  | Decorative icon shown when `hasIcon` is true. Only used for `discovery` and `neutral`; those variants fall back to Sparkles and Bolt. `info`, `warning`, and `danger` always use their status icons. |
+| `isCloseable` | `boolean` |  | `false` | If the banner is closeable. Renders an icon button on the right |
+| `liveRegion` | `'alert' \| 'status'` |  |  | Announces the header when the banner appears or its header changes. `status` announces politely, while `alert` interrupts the user. Leave this unset for banners that are present during the page's initial render. This is independent of the visual `variant`. |
+| `onClose` | `((error?: MouseEvent<HTMLElement, MouseEvent> \| KeyboardEvent<HTMLElement>) => void)` |  |  | Event handler for when the close icon is clicked |
+| `ref` | `any` |  |  | A ref to apply to the root element. |
+| `variant` | `'danger' \| 'discovery' \| 'info' \| 'neutral' \| 'warning'` |  | `info` | The variant of the announcement banner |
+
+### AnnouncementBanner.Actions
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `children` | `ReactNode` | ✅ |  |  |
+| `ref` | `Ref<HTMLDivElement>` |  |  | A ref to apply to the root element. |
+
+### AnnouncementBanner.Header
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `children` | `ReactNode` | ✅ |  |  |
+| `ref` | `Ref<HTMLSpanElement>` |  |  | A ref to apply to the root element. |
+
+## Accessibility
+
+## Implementation guidelines
+
+Place `AnnouncementBanner` as the first child of its parent so content below is shifted down by the banner’s height. The banner stays in normal document flow (not sticky or fixed), so it does not overlay content underneath and does not obscure focused content (WCAG 2.2 SC 2.4.11 Focus Not Obscured).
+
+### Content and meaning
+
+- Put the announcement meaning in text. Status icons are decorative (`aria-hidden` on the icon wrapper) and reinforce the `variant` visually; do not rely on color or the icon alone to convey severity (WCAG 2.2 SC 1.4.1 Use of Color). Prefer wording such as “Warning: …” or “Error: …”.
+- `info`, `warning`, and `danger` always use the built-in status icons. For `discovery` and `neutral`, pass `icon` to replace Sparkles or Bolt; custom icons stay decorative through the same wrapper.
+
+### Live region semantics
+
+The time at which a banner appears and its urgency are separate concerns:
+
+- `variant` communicates visual meaning and never enables a live region.
+- `liveRegion` controls whether a new or updated header is announced (WCAG 2.2 SC 4.1.3 Status Messages).
+
+Use `liveRegion` only when a banner appears or changes after the page is ready and the user may already be interacting with it. Omit it for banners that are part of the initial page or shell render, including important `warning` and `danger` banners. Data that resolves as part of normal initial page loading does not necessarily make a banner a live update.
+
+| `liveRegion` | Behavior | Use when |
+| --- | --- | --- |
+| `"status"` | Uses `role="status"` (`aria-live="polite"`) | New information is useful but can wait until the screen reader reaches a natural pause. |
+| `"alert"` | Uses `role="alert"` (`aria-live="assertive"`) | New information is sufficiently urgent that interrupting the user is justified. |
+| omitted | No live region | The banner is present during initial rendering, regardless of its visual severity. |
+
+| Scenario | Recommended semantics |
+| --- | --- |
+| A deprecation, license, payment, or service warning is present during initial rendering | Omit `liveRegion`; choose an appropriate `variant` |
+| A campaign or informational message appears later from polling or an event | `liveRegion="status"` |
+| A connection loss, session expiry, or other urgent message appears later | `liveRegion="alert"` |
+
+For reliable announcements across screen readers, the component mounts an empty, visually hidden live region before adding the message after a short delay. Only the text in `AnnouncementBanner.Header` is copied into that region; action and close controls remain available through normal keyboard and screen reader navigation without being duplicated in the announcement. `aria-atomic="true"` is set explicitly for interoperability. Do not add a redundant `aria-live` attribute, because combining it with `role="alert"` can cause duplicate announcements in VoiceOver on iOS.
+
+### Interactive controls
+
+- When `isCloseable` is `true`, the close control is a keyboard-operable button labeled “Close”.
+- Action buttons passed into `AnnouncementBanner.Actions` must have accessible names (visible text or `aria-label`).
+
+### Reflow and target size
+
+- Narrow widths are supported without horizontal scrolling (WCAG 2.2 SC 1.4.10 Reflow): below `512px` of banner width the message and actions stack, and long or unbreakable strings (such as URLs) wrap, so the banner reflows down to a 320px viewport / 400% zoom without a horizontal scrollbar.
+- Close and action controls meet the 24×24 CSS pixel minimum target size (WCAG 2.2 SC 2.5.8 Target Size Minimum).
+
+## Examples
+
+### Default
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { AnnouncementBanner } from '@neo4j-ndl/react';
+
+const Component = () => {
+  return (
+    <AnnouncementBanner variant="info" hasIcon={true}>
+      <AnnouncementBanner.Header>
+        Scheduled maintenance starts tonight at 22:00 UTC.
+      </AnnouncementBanner.Header>
+    </AnnouncementBanner>
+  );
+};
+
+export default Component;
+```
+
+### Closeable
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { AnnouncementBanner } from '@neo4j-ndl/react';
+
+const Component = () => {
+  return (
+    <AnnouncementBanner
+      isCloseable={true}
+      onClose={() => alert('Announcement banner closed')}
+    >
+      <AnnouncementBanner.Header>
+        This announcement can be dismissed.
+      </AnnouncementBanner.Header>
+    </AnnouncementBanner>
+  );
+};
+
+export default Component;
+```
+
+### Custom Icons
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { AnnouncementBanner } from '@neo4j-ndl/react';
+import { GiftIconSolid, RocketLaunchIconSolid } from '@neo4j-ndl/react/icons';
+
+const Component = () => {
+  return (
+    <div className="n-flex n-flex-col n-gap-token-8 n-w-full">
+      <AnnouncementBanner variant="discovery" hasIcon={true}>
+        <AnnouncementBanner.Header>
+          Discovery with the default Sparkles icon
+        </AnnouncementBanner.Header>
+      </AnnouncementBanner>
+      <AnnouncementBanner
+        variant="discovery"
+        hasIcon={true}
+        icon={<GiftIconSolid />}
+      >
+        <AnnouncementBanner.Header>
+          Discovery with a custom gift icon
+        </AnnouncementBanner.Header>
+      </AnnouncementBanner>
+      <AnnouncementBanner variant="neutral" hasIcon={true}>
+        <AnnouncementBanner.Header>
+          Neutral with the default Bolt icon
+        </AnnouncementBanner.Header>
+      </AnnouncementBanner>
+      <AnnouncementBanner
+        variant="neutral"
+        hasIcon={true}
+        icon={<RocketLaunchIconSolid />}
+      >
+        <AnnouncementBanner.Header>
+          Neutral with a custom rocket icon
+        </AnnouncementBanner.Header>
+      </AnnouncementBanner>
+    </div>
+  );
+};
+
+export default Component;
+```
+
+### Injected Non Urgent
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import {
+  AnnouncementBanner,
+  OutlinedButton,
+  Typography,
+} from '@neo4j-ndl/react';
+import { useState } from 'react';
+
+const Component = () => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  return (
+    <div className="n-flex n-flex-col n-w-full">
+      {isVisible && (
+        <AnnouncementBanner
+          variant="discovery"
+          hasIcon={true}
+          liveRegion="status"
+          isCloseable={true}
+          onClose={() => setIsVisible(false)}
+        >
+          <AnnouncementBanner.Header>
+            New Aura features are available for your organization.
+          </AnnouncementBanner.Header>
+        </AnnouncementBanner>
+      )}
+      <div className="n-flex n-flex-col n-gap-token-16 n-p-token-24 n-bg-neutral-bg-default">
+        <OutlinedButton onClick={() => setIsVisible((visible) => !visible)}>
+          {isVisible ? 'Hide announcement' : 'Show announcement'}
+        </OutlinedButton>
+        <Typography variant="body-medium">
+          The page is already loaded. Toggle the announcement in to simulate a
+          later campaign or poll. <code>liveRegion=&quot;status&quot;</code>{' '}
+          announces politely without interrupting.
+        </Typography>
+      </div>
+    </div>
+  );
+};
+
+export default Component;
+```
+
+### Injected Urgent
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import {
+  AnnouncementBanner,
+  OutlinedButton,
+  Typography,
+} from '@neo4j-ndl/react';
+import { useState } from 'react';
+
+const Component = () => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  return (
+    <div className="n-flex n-flex-col n-w-full">
+      {isVisible && (
+        <AnnouncementBanner variant="danger" hasIcon={true} liveRegion="alert">
+          <AnnouncementBanner.Header>
+            Error: connection to the database was lost. Reconnecting…
+          </AnnouncementBanner.Header>
+        </AnnouncementBanner>
+      )}
+      <div className="n-flex n-flex-col n-gap-token-16 n-p-token-24 n-bg-neutral-bg-default">
+        <OutlinedButton onClick={() => setIsVisible((visible) => !visible)}>
+          {isVisible ? 'Hide announcement' : 'Show announcement'}
+        </OutlinedButton>
+        <Typography variant="body-medium">
+          The page is already loaded. Toggle the announcement in to simulate a
+          connection loss or session expiry.{' '}
+          <code>liveRegion=&quot;alert&quot;</code> interrupts the screen reader
+          because the message is time-sensitive.
+        </Typography>
+      </div>
+    </div>
+  );
+};
+
+export default Component;
+```
+
+### Present At Page Render
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { AnnouncementBanner, Typography } from '@neo4j-ndl/react';
+
+const Component = () => {
+  return (
+    <div className="n-flex n-flex-col n-w-full">
+      <AnnouncementBanner variant="danger" hasIcon={true}>
+        <AnnouncementBanner.Header>
+          Warning: your marketplace subscription will be deprecated on September
+          19, 2026.
+        </AnnouncementBanner.Header>
+      </AnnouncementBanner>
+      <div className="n-p-token-24 n-bg-neutral-bg-default">
+        <Typography variant="body-medium">
+          This banner is part of the initial page render, so `liveRegion` is
+          omitted. Screen reader users hear it when they reach it in the page,
+          not as an interruption.
+        </Typography>
+      </div>
+    </div>
+  );
+};
+
+export default Component;
+```
+
+### Variants
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { AnnouncementBanner } from '@neo4j-ndl/react';
+
+const Component = () => {
+  return (
+    <div className="n-flex n-flex-col n-gap-token-8 n-w-full">
+      <AnnouncementBanner variant="info" hasIcon={true}>
+        <AnnouncementBanner.Header>Info announcement</AnnouncementBanner.Header>
+      </AnnouncementBanner>
+      <AnnouncementBanner variant="warning" hasIcon={true}>
+        <AnnouncementBanner.Header>
+          Warning announcement
+        </AnnouncementBanner.Header>
+      </AnnouncementBanner>
+      <AnnouncementBanner variant="danger" hasIcon={true}>
+        <AnnouncementBanner.Header>
+          Danger announcement
+        </AnnouncementBanner.Header>
+      </AnnouncementBanner>
+      <AnnouncementBanner variant="discovery" hasIcon={true}>
+        <AnnouncementBanner.Header>
+          Discovery announcement
+        </AnnouncementBanner.Header>
+      </AnnouncementBanner>
+      <AnnouncementBanner variant="neutral" hasIcon={true}>
+        <AnnouncementBanner.Header>
+          Neutral announcement
+        </AnnouncementBanner.Header>
+      </AnnouncementBanner>
+    </div>
+  );
+};
+
+export default Component;
+```
+
+### With Actions
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import {
+  AnnouncementBanner,
+  OutlinedButton,
+  TextButton,
+} from '@neo4j-ndl/react';
+
+const Component = () => {
+  return (
+    <AnnouncementBanner hasIcon={true} variant="warning">
+      <AnnouncementBanner.Header>
+        Your trial ends in 3 days.
+      </AnnouncementBanner.Header>
+      <AnnouncementBanner.Actions>
+        <OutlinedButton>Upgrade</OutlinedButton>
+        <TextButton>Learn more</TextButton>
+      </AnnouncementBanner.Actions>
+    </AnnouncementBanner>
+  );
+};
+
+export default Component;
+```
+
+### With Page Content
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import {
+  AnnouncementBanner,
+  OutlinedButton,
+  TextButton,
+  Typography,
+} from '@neo4j-ndl/react';
+import { useState } from 'react';
+
+const Component = () => {
+  const [isVisible, setIsVisible] = useState(true);
+
+  return (
+    <div className="n-flex n-flex-col n-max-w-[768px] n-h-52">
+      {isVisible && (
+        <AnnouncementBanner
+          variant="warning"
+          hasIcon={true}
+          isCloseable={true}
+          onClose={() => setIsVisible(false)}
+        >
+          <AnnouncementBanner.Header>
+            Scheduled maintenance starts tonight at 22:00 UTC.
+          </AnnouncementBanner.Header>
+          <AnnouncementBanner.Actions>
+            <OutlinedButton>Learn more</OutlinedButton>
+          </AnnouncementBanner.Actions>
+        </AnnouncementBanner>
+      )}
+      <div className="n-flex n-flex-col n-gap-token-16 n-p-token-24 n-bg-neutral-bg-default n-flex-1 n-min-h-0 n-overflow-y-auto">
+        {!isVisible && (
+          <div>
+            <TextButton onClick={() => setIsVisible(true)}>
+              Show announcement again
+            </TextButton>
+          </div>
+        )}
+        <Typography variant="title-2">Page title</Typography>
+        <OutlinedButton>Can focus</OutlinedButton>
+        <Typography variant="body-medium">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
+          tempus, quam non molestie faucibus, orci nibh bibendum urna, ut
+          lacinia orci dui a augue. Nullam at risus quam. Fusce pulvinar, metus
+          vitae finibus dapibus, nisi ipsum venenatis sapien, at facilisis eros
+          massa ac nunc. Aliquam sed odio orci. Vivamus condimentum sit amet
+          ipsum bibendum sollicitudin. Etiam eget vehicula urna, et ullamcorper
+          libero. Interdum et malesuada fames ac ante ipsum primis in faucibus.
+          Proin sodales euismod sem, posuere maximus libero interdum semper.
+          Nunc mollis posuere arcu non elementum. Vivamus sed laoreet mauris.
+          Etiam fringilla arcu convallis erat vehicula iaculis. Pellentesque
+          dictum aliquam cursus.
+        </Typography>
+        <Typography variant="body-medium">
+          Integer vehicula turpis quis risus aliquet congue. Vivamus
+          pellentesque nibh ac blandit varius. Fusce placerat lacus ut mauris
+          porta, nec facilisis risus pulvinar. Nullam elementum nulla ut laoreet
+          imperdiet. Maecenas eget erat erat. Phasellus in turpis placerat,
+          imperdiet ante nec, tincidunt nisl. Donec a lacus neque. Nullam
+          iaculis ante molestie ultrices semper. Sed non lorem ullamcorper
+          ligula elementum convallis. Aenean egestas risus quis tortor cursus
+          dapibus. Nulla hendrerit at orci ut scelerisque. Nullam vel bibendum
+          tellus. Praesent efficitur ultrices lectus at posuere. Maecenas
+          facilisis lacus ac turpis malesuada, sit amet imperdiet ipsum
+          condimentum. Donec et nibh eget justo luctus ornare. Maecenas suscipit
+          nulla at ullamcorper congue.
+        </Typography>
+        <Typography variant="body-medium">
+          Vestibulum vehicula nibh mi, ultrices condimentum massa venenatis sit
+          amet. Pellentesque accumsan mollis ex, id lobortis lacus venenatis id.
+          Proin sem dui, mollis id gravida ac, vulputate et lacus. In pharetra
+          nunc odio, in fermentum elit dignissim at. Nunc ut justo elit. Proin
+          ligula orci, faucibus vitae vehicula nec, faucibus sit amet erat.
+          Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque
+          pharetra venenatis rutrum. Sed pharetra turpis id arcu maximus,
+          interdum rhoncus eros mollis. Donec vitae sapien et odio interdum
+          bibendum. Quisque eleifend, sem ut ornare mollis, orci nunc dapibus
+          odio, aliquam fringilla augue nulla id magna. Phasellus consectetur,
+          velit egestas sodales ultricies, odio nunc facilisis libero, vel
+          vehicula nisi quam quis nisl. Proin vel massa libero.
+        </Typography>
+        <Typography variant="body-medium">
+          Sed mollis lacinia tincidunt. Curabitur blandit pellentesque
+          consequat. Maecenas mollis pharetra dolor in ornare. Cras vel nibh eu
+          nisi venenatis convallis id vel nisl. Curabitur et viverra nisl.
+          Phasellus et finibus turpis. Praesent scelerisque vel lectus at
+          imperdiet. Curabitur porta egestas magna ullamcorper hendrerit.
+        </Typography>
+        <Typography variant="body-medium">
+          Curabitur hendrerit egestas mi, ut venenatis turpis sagittis nec.
+          Proin consectetur, nisi et vehicula placerat, tellus augue luctus
+          odio, in commodo mauris urna nec libero. Maecenas eu placerat sapien,
+          in aliquam tellus. Sed pharetra nunc id urna iaculis tincidunt. In hac
+          habitasse platea dictumst. Donec tincidunt risus vitae congue congue.
+          Fusce consequat ut justo ut tristique. Nunc ut urna quis neque
+          consequat venenatis. Praesent nec feugiat orci. Vestibulum rutrum dui
+          lacus, sit amet vulputate dolor finibus ut. Donec placerat urna eu
+          fringilla convallis. Praesent sollicitudin felis at lacus semper, vel
+          convallis magna scelerisque.
+        </Typography>
+      </div>
+    </div>
+  );
+};
+
+export default Component;
+```

package/skills/ndl-react/components/popover.md

@@ -23,6 +23,7 @@ Import: `import { Popover } from '@neo4j-ndl/react'`
 | `placement` | `'bottom-end-bottom-start' \| 'bottom-end-top-end' \| 'bottom-middle-top-middle' \| 'bottom-start-bottom-end' \| 'bottom-start-top-start' \| 'middle-end-middle-start' \| 'middle-start-middle-end' \| 'top-end-bottom-end' \| 'top-end-top-start' \| 'top-middle-bottom-middle' \| 'top-start-bottom-start' \| 'top-start-top-end'` |  |  | The placement of the floating element is determined by two sets of words. The first set of words specifies the point on the anchor element where the floating element will be attached. The second set of coordinates specifies the point on the floating element that will attach to the anchor element. |
 | `role` | `'alertdialog' \| 'dialog' \| 'grid' \| 'listbox' \| 'menu' \| 'tooltip' \| 'tree'` |  |  | The role of the popover. @deprecated - This prop will be removed in v5. |
 | `shouldCaptureFocus` | `boolean` |  | `false` | If the popover should constrain the focus inside the popover while open |
+| `shouldCloseOnFocusOut` | `boolean` |  |  | If the popover should close when focus moves outside of it, for example when tabbing away or focusing another element. Defaults to the value of `closeOnClickOutside`. Has no effect when `shouldCaptureFocus` is true, since focus cannot leave the popover. |
 | `shouldConstrainSize` | `boolean` |  |  | When true, limits the popover's max-height and max-width to the available viewport space. The consumer is responsible for adding overflow handling (e.g. overflow-y: auto) to the content. |
 | `strategy` | `'absolute' \| 'fixed'` |  |  | The strategy of the popover. Fixed should be used when the popover is inside a Dialog. |
 
@@ -55,6 +56,8 @@ Import: `import { Popover } from '@neo4j-ndl/react'`
 
 When used with a toggle button, the button should have aria-expanded (true when open, false when closed), aria-haspopup set to the role of the popover, and aria-controls set to the id of the popover.
 
+By default, a popover that doesn't capture focus closes when focus moves outside of it. Setting `closeOnClickOutside` or `shouldCloseOnFocusOut` to false keeps it open while keyboard users tab through the rest of the page. Make sure it doesn't hide the focused element (WCAG 2.4.11), and give users a way to close it, for example with the Escape key or a close button.
+
 ## Examples
 
 ### Default