@neo4j-ndl/react 4.16.7 → 4.16.9

package/lib/esm/color-picker/stories/color-picker-dialog.story.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+import { ColorPicker, Dialog, FilledButton } from '@neo4j-ndl/react';
+import { useState } from 'react';
+const Component = () => {
+    const [isOpen, setIsOpen] = useState(false);
+    const handleClick = () => setIsOpen((prev) => !prev);
+    const handleClose = () => setIsOpen(false);
+    const [color, setColor] = useState({
+        a: 1,
+        b: 0,
+        g: 0,
+        r: 0,
+    });
+    return (_jsxs("div", { className: "n-flex n-items-center n-justify-centern-w-full", children: [_jsx(FilledButton, { onClick: handleClick, htmlAttributes: { 'aria-haspopup': 'dialog' }, children: "Open Dialog" }), _jsxs(Dialog, { onClose: handleClose, isOpen: isOpen, children: [_jsx(Dialog.Header, { children: "Header" }), _jsx(Dialog.Content, { className: "n-max-h-96 n-overflow-y-auto", children: _jsx(ColorPicker, { color: color, onChange: (newColor) => setColor(newColor.rgb), floatingStrategy: "fixed" }) })] })] }));
+};
+export default Component;
+//# sourceMappingURL=color-picker-dialog.story.js.map

package/lib/esm/color-picker/stories/color-picker-dialog.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker-dialog.story.js","sourceRoot":"","sources":["../../../../src/color-picker/stories/color-picker-dialog.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IACrD,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;IACrD,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAE3C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC;QACjC,CAAC,EAAE,CAAC;QACJ,CAAC,EAAE,CAAC;QACJ,CAAC,EAAE,CAAC;QACJ,CAAC,EAAE,CAAC;KACL,CAAC,CAAC;IAEH,OAAO,CACL,eAAK,SAAS,EAAC,gDAAgD,aAC7D,KAAC,YAAY,IACX,OAAO,EAAE,WAAW,EACpB,cAAc,EAAE,EAAE,eAAe,EAAE,QAAQ,EAAE,4BAGhC,EACf,MAAC,MAAM,IAAC,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,aAC1C,KAAC,MAAM,CAAC,MAAM,yBAAuB,EACrC,KAAC,MAAM,CAAC,OAAO,IAAC,SAAS,EAAC,8BAA8B,YACtD,KAAC,WAAW,IACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,EAC9C,gBAAgB,EAAC,OAAO,GACxB,GACa,IACV,IACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { ColorPicker, Dialog, FilledButton } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst Component = () => {\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n  const handleClick = () => setIsOpen((prev) => !prev);\n  const handleClose = () => setIsOpen(false);\n\n  const [color, setColor] = useState({\n    a: 1,\n    b: 0,\n    g: 0,\n    r: 0,\n  });\n\n  return (\n    <div className=\"n-flex n-items-center n-justify-centern-w-full\">\n      <FilledButton\n        onClick={handleClick}\n        htmlAttributes={{ 'aria-haspopup': 'dialog' }}\n      >\n        Open Dialog\n      </FilledButton>\n      <Dialog onClose={handleClose} isOpen={isOpen}>\n        <Dialog.Header>Header</Dialog.Header>\n        <Dialog.Content className=\"n-max-h-96 n-overflow-y-auto\">\n          <ColorPicker\n            color={color}\n            onChange={(newColor) => setColor(newColor.rgb)}\n            floatingStrategy=\"fixed\"\n          />\n        </Dialog.Content>\n      </Dialog>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/esm/color-picker/stories/color-picker-popover.story.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+import { ColorPicker, FilledButton, Popover } from '@neo4j-ndl/react';
+const Component = () => {
+    return (_jsxs(Popover, { children: [_jsx(Popover.Trigger, { hasButtonWrapper: true, children: _jsx(FilledButton, { children: "Open Popover" }) }), _jsxs(Popover.Content, { className: "n-overflow-y-auto n-overflow-x-hidden n-p-4 n-max-h-64", children: ["Popover content", _jsx(ColorPicker, { color: "#ff0000", onChange: () => {
+                            console.info('color changed');
+                        }, floatingStrategy: "fixed", portalTarget: document.body })] })] }));
+};
+export default Component;
+//# sourceMappingURL=color-picker-popover.story.js.map

package/lib/esm/color-picker/stories/color-picker-popover.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker-popover.story.js","sourceRoot":"","sources":["../../../../src/color-picker/stories/color-picker-popover.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAEtE,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,MAAC,OAAO,eACN,KAAC,OAAO,CAAC,OAAO,IAAC,gBAAgB,kBAC/B,KAAC,YAAY,+BAA4B,GACzB,EAClB,MAAC,OAAO,CAAC,OAAO,IAAC,SAAS,EAAC,wDAAwD,gCAEjF,KAAC,WAAW,IACV,KAAK,EAAC,SAAS,EACf,QAAQ,EAAE,GAAG,EAAE;4BACb,OAAO,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;wBAChC,CAAC,EACD,gBAAgB,EAAC,OAAO,EACxB,YAAY,EAAE,QAAQ,CAAC,IAAI,GAC3B,IACc,IACV,CACX,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { ColorPicker, FilledButton, Popover } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  return (\n    <Popover>\n      <Popover.Trigger hasButtonWrapper>\n        <FilledButton>Open Popover</FilledButton>\n      </Popover.Trigger>\n      <Popover.Content className=\"n-overflow-y-auto n-overflow-x-hidden n-p-4 n-max-h-64\">\n        Popover content\n        <ColorPicker\n          color=\"#ff0000\"\n          onChange={() => {\n            console.info('color changed');\n          }}\n          floatingStrategy=\"fixed\"\n          portalTarget={document.body}\n        />\n      </Popover.Content>\n    </Popover>\n  );\n};\n\nexport default Component;\n"]}

package/lib/esm/color-picker/stories/index.js

@@ -21,11 +21,17 @@
 export { default as ColorPickerDefault } from './color-picker-default.story';
 export { default as ColorPickerWithoutEyeDropper } from './color-picker-without-eyedropper.story';
 export { default as ColorPickerCustomSwatches } from './color-picker-custom-swatches.story';
+export { default as ColorPickerDialog } from './color-picker-dialog.story';
+export { default as ColorPickerPopover } from './color-picker-popover.story';
 import { removeLicenseHeader } from '../../_common/export-stories-utils';
 import ColorPickerCustomSwatchesSourceRaw from './color-picker-custom-swatches.story.tsx?raw';
 import ColorPickerDefaultSourceRaw from './color-picker-default.story.tsx?raw';
+import ColorPickerDialogSourceRaw from './color-picker-dialog.story.tsx?raw';
+import ColorPickerPopoverSourceRaw from './color-picker-popover.story.tsx?raw';
 import ColorPickerWithoutEyeDropperSourceRaw from './color-picker-without-eyedropper.story.tsx?raw';
 export const ColorPickerDefaultSource = removeLicenseHeader(ColorPickerDefaultSourceRaw);
 export const ColorPickerWithoutEyeDropperSource = removeLicenseHeader(ColorPickerWithoutEyeDropperSourceRaw);
 export const ColorPickerCustomSwatchesSource = removeLicenseHeader(ColorPickerCustomSwatchesSourceRaw);
+export const ColorPickerDialogSource = removeLicenseHeader(ColorPickerDialogSourceRaw);
+export const ColorPickerPopoverSource = removeLicenseHeader(ColorPickerPopoverSourceRaw);
 //# sourceMappingURL=index.js.map

package/lib/esm/color-picker/stories/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/color-picker/stories/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,4BAA4B,EAAE,MAAM,yCAAyC,CAAC;AAClG,OAAO,EAAE,OAAO,IAAI,yBAAyB,EAAE,MAAM,sCAAsC,CAAC;AAE5F,OAAO,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AACzE,OAAO,kCAAkC,MAAM,8CAA8C,CAAC;AAC9F,OAAO,2BAA2B,MAAM,sCAAsC,CAAC;AAC/E,OAAO,qCAAqC,MAAM,iDAAiD,CAAC;AAEpG,MAAM,CAAC,MAAM,wBAAwB,GAAG,mBAAmB,CACzD,2BAA2B,CAC5B,CAAC;AACF,MAAM,CAAC,MAAM,kCAAkC,GAAG,mBAAmB,CACnE,qCAAqC,CACtC,CAAC;AACF,MAAM,CAAC,MAAM,+BAA+B,GAAG,mBAAmB,CAChE,kCAAkC,CACnC,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nexport { default as ColorPickerDefault } from './color-picker-default.story';\nexport { default as ColorPickerWithoutEyeDropper } from './color-picker-without-eyedropper.story';\nexport { default as ColorPickerCustomSwatches } from './color-picker-custom-swatches.story';\n\nimport { removeLicenseHeader } from '../../_common/export-stories-utils';\nimport ColorPickerCustomSwatchesSourceRaw from './color-picker-custom-swatches.story.tsx?raw';\nimport ColorPickerDefaultSourceRaw from './color-picker-default.story.tsx?raw';\nimport ColorPickerWithoutEyeDropperSourceRaw from './color-picker-without-eyedropper.story.tsx?raw';\n\nexport const ColorPickerDefaultSource = removeLicenseHeader(\n  ColorPickerDefaultSourceRaw,\n);\nexport const ColorPickerWithoutEyeDropperSource = removeLicenseHeader(\n  ColorPickerWithoutEyeDropperSourceRaw,\n);\nexport const ColorPickerCustomSwatchesSource = removeLicenseHeader(\n  ColorPickerCustomSwatchesSourceRaw,\n);\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/color-picker/stories/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,4BAA4B,EAAE,MAAM,yCAAyC,CAAC;AAClG,OAAO,EAAE,OAAO,IAAI,yBAAyB,EAAE,MAAM,sCAAsC,CAAC;AAC5F,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AAE7E,OAAO,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AACzE,OAAO,kCAAkC,MAAM,8CAA8C,CAAC;AAC9F,OAAO,2BAA2B,MAAM,sCAAsC,CAAC;AAC/E,OAAO,0BAA0B,MAAM,qCAAqC,CAAC;AAC7E,OAAO,2BAA2B,MAAM,sCAAsC,CAAC;AAC/E,OAAO,qCAAqC,MAAM,iDAAiD,CAAC;AAEpG,MAAM,CAAC,MAAM,wBAAwB,GAAG,mBAAmB,CACzD,2BAA2B,CAC5B,CAAC;AACF,MAAM,CAAC,MAAM,kCAAkC,GAAG,mBAAmB,CACnE,qCAAqC,CACtC,CAAC;AACF,MAAM,CAAC,MAAM,+BAA+B,GAAG,mBAAmB,CAChE,kCAAkC,CACnC,CAAC;AACF,MAAM,CAAC,MAAM,uBAAuB,GAAG,mBAAmB,CACxD,0BAA0B,CAC3B,CAAC;AACF,MAAM,CAAC,MAAM,wBAAwB,GAAG,mBAAmB,CACzD,2BAA2B,CAC5B,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nexport { default as ColorPickerDefault } from './color-picker-default.story';\nexport { default as ColorPickerWithoutEyeDropper } from './color-picker-without-eyedropper.story';\nexport { default as ColorPickerCustomSwatches } from './color-picker-custom-swatches.story';\nexport { default as ColorPickerDialog } from './color-picker-dialog.story';\nexport { default as ColorPickerPopover } from './color-picker-popover.story';\n\nimport { removeLicenseHeader } from '../../_common/export-stories-utils';\nimport ColorPickerCustomSwatchesSourceRaw from './color-picker-custom-swatches.story.tsx?raw';\nimport ColorPickerDefaultSourceRaw from './color-picker-default.story.tsx?raw';\nimport ColorPickerDialogSourceRaw from './color-picker-dialog.story.tsx?raw';\nimport ColorPickerPopoverSourceRaw from './color-picker-popover.story.tsx?raw';\nimport ColorPickerWithoutEyeDropperSourceRaw from './color-picker-without-eyedropper.story.tsx?raw';\n\nexport const ColorPickerDefaultSource = removeLicenseHeader(\n  ColorPickerDefaultSourceRaw,\n);\nexport const ColorPickerWithoutEyeDropperSource = removeLicenseHeader(\n  ColorPickerWithoutEyeDropperSourceRaw,\n);\nexport const ColorPickerCustomSwatchesSource = removeLicenseHeader(\n  ColorPickerCustomSwatchesSourceRaw,\n);\nexport const ColorPickerDialogSource = removeLicenseHeader(\n  ColorPickerDialogSourceRaw,\n);\nexport const ColorPickerPopoverSource = removeLicenseHeader(\n  ColorPickerPopoverSourceRaw,\n);\n"]}

package/lib/esm/popover/use-popover.js

@@ -41,6 +41,7 @@ export function usePopover({ isInitialOpen = false, placement = 'bottom', isOpen
                 fallbackAxisSideDirection: 'end',
                 padding: 5,
             }),
+            shift(),
             ...(shouldConstrainSize
                 ? [
                     size({
@@ -54,7 +55,6 @@ export function usePopover({ isInitialOpen = false, placement = 'bottom', isOpen
                     }),
                 ]
                 : []),
-            shift(),
         ],
         // Floating UI calls this when interactions (useClick, useDismiss, etc.)
         // trigger an open/close. We always sync internal state so uncontrolled

package/lib/esm/popover/use-popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-popover.js","sourceRoot":"","sources":["../../../src/popover/use-popover.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport {\n  autoUpdate,\n  flip,\n  type FloatingFocusManagerProps,\n  offset,\n  type OffsetOptions,\n  type Placement,\n  shift,\n  size,\n  useClick,\n  useClientPoint,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  type UseInteractionsReturn,\n  useRole,\n  useTransitionStyles,\n} from '@floating-ui/react';\nimport { tokens } from '@neo4j-ndl/base';\nimport { useMemo, useState } from 'react';\n\nexport interface PopoverOptions {\n  isInitialOpen?: boolean;\n  placement?: Placement;\n  isOpen?: boolean;\n  onOpenChange?: (open: boolean, event?: Event) => void;\n  offsetOption?: OffsetOptions;\n  anchorElement?: Element | null;\n  anchorPosition?: {\n    x: number;\n    y: number;\n  };\n  anchorElementAsPortalAnchor?: boolean;\n  shouldCaptureFocus?: boolean;\n  initialFocus?: number | React.RefObject<HTMLElement | null>;\n  role?:\n    | 'tooltip'\n    | 'dialog'\n    | 'alertdialog'\n    | 'menu'\n    | 'listbox'\n    | 'grid'\n    | 'tree';\n  closeOnClickOutside?: boolean;\n  closeOnReferencePress?: boolean;\n  returnFocus?: FloatingFocusManagerProps['returnFocus'];\n  strategy?: 'fixed' | 'absolute';\n  isPortaled?: boolean;\n  shouldConstrainSize?: boolean;\n}\n\nexport interface UsePopoverReturn\n  extends UseInteractionsReturn, ReturnType<typeof useFloating> {\n  isOpen: boolean;\n  labelId: string | undefined;\n  descriptionId: string | undefined;\n  transitionStyles: React.CSSProperties;\n  setLabelId: (labelId: string | undefined) => void;\n  setDescriptionId: (descriptionId: string | undefined) => void;\n  anchorElementAsPortalAnchor: boolean | undefined;\n  shouldCaptureFocus: boolean | undefined;\n  initialFocus: number | React.RefObject<HTMLElement | null> | undefined;\n  isPortaled: boolean;\n  returnFocus: FloatingFocusManagerProps['returnFocus'];\n}\n\nexport function usePopover({\n  isInitialOpen = false,\n  placement = 'bottom',\n  isOpen: controlledOpen,\n  onOpenChange: setControlledOpen,\n  offsetOption = 10,\n  anchorElement,\n  anchorPosition,\n  anchorElementAsPortalAnchor,\n  shouldCaptureFocus,\n  initialFocus,\n  role: roleProp,\n  closeOnClickOutside,\n  closeOnReferencePress,\n  returnFocus,\n  strategy = 'absolute',\n  isPortaled = true,\n  shouldConstrainSize = false,\n}: PopoverOptions = {}): UsePopoverReturn {\n  // Internal state for uncontrolled mode (no `isOpen` prop provided).\n  const [isOpenUncontrolled, setIsOpenUncontrolled] = useState(isInitialOpen);\n  const [labelId, setLabelId] = useState<string | undefined>();\n  const [descriptionId, setDescriptionId] = useState<string | undefined>();\n\n  // Controlled/uncontrolled pattern: prefer the consumer-provided `isOpen`,\n  // falling back to internal state when not provided.\n  const isOpen = controlledOpen ?? isOpenUncontrolled;\n\n  const data = useFloating({\n    elements: {\n      reference: anchorElement,\n    },\n    middleware: [\n      offset(offsetOption),\n      flip({\n        crossAxis: placement.includes('-'),\n        fallbackAxisSideDirection: 'end',\n        padding: 5,\n      }),\n      ...(shouldConstrainSize\n        ? [\n            size({\n              apply({ availableHeight, availableWidth, elements }) {\n                Object.assign(elements.floating.style, {\n                  maxHeight: `${availableHeight}px`,\n                  maxWidth: `${availableWidth}px`,\n                });\n              },\n              padding: 5,\n            }),\n          ]\n        : []),\n      shift(),\n    ],\n    // Floating UI calls this when interactions (useClick, useDismiss, etc.)\n    // trigger an open/close. We always sync internal state so uncontrolled\n    // mode works, and notify the consumer callback exactly once if provided.\n    onOpenChange: (open, event) => {\n      setIsOpenUncontrolled(open);\n      setControlledOpen?.(open, event);\n    },\n    open: isOpen,\n    placement: placement,\n    strategy,\n    whileElementsMounted: autoUpdate,\n  });\n  const context = data.context;\n\n  // Only enable built-in click-to-toggle in uncontrolled mode. In controlled\n  // mode the consumer owns the open state and wires up their own trigger.\n  const click = useClick(context, {\n    enabled: controlledOpen === undefined,\n  });\n\n  const dismiss = useDismiss(context, {\n    outsidePress: closeOnClickOutside,\n    referencePress: closeOnReferencePress,\n  });\n  const role = useRole(context, {\n    role: roleProp,\n  });\n\n  const clientPoint = useClientPoint(context, {\n    enabled: anchorPosition !== undefined,\n    x: anchorPosition?.x,\n    y: anchorPosition?.y,\n  });\n\n  const interactions = useInteractions([click, dismiss, role, clientPoint]);\n\n  const { styles: transitionStyles } = useTransitionStyles(context, {\n    duration: Number.parseInt(tokens.motion.duration.quick) ?? 0,\n  });\n\n  return useMemo(\n    () => ({\n      ...data,\n      ...interactions,\n      anchorElementAsPortalAnchor,\n      descriptionId,\n      initialFocus,\n      isOpen,\n      isPortaled,\n      labelId,\n      returnFocus,\n      setDescriptionId,\n      setLabelId,\n      shouldCaptureFocus,\n      transitionStyles,\n    }),\n    [\n      isOpen,\n      interactions,\n      data,\n      transitionStyles,\n      labelId,\n      descriptionId,\n      anchorElementAsPortalAnchor,\n      shouldCaptureFocus,\n      initialFocus,\n      isPortaled,\n      returnFocus,\n    ],\n  );\n}\n"]}
+{"version":3,"file":"use-popover.js","sourceRoot":"","sources":["../../../src/popover/use-popover.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EACL,UAAU,EACV,IAAI,EAEJ,MAAM,EAGN,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,cAAc,EACd,UAAU,EACV,WAAW,EACX,eAAe,EAEf,OAAO,EACP,mBAAmB,GACpB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AA+C1C,MAAM,UAAU,UAAU,CAAC,EACzB,aAAa,GAAG,KAAK,EACrB,SAAS,GAAG,QAAQ,EACpB,MAAM,EAAE,cAAc,EACtB,YAAY,EAAE,iBAAiB,EAC/B,YAAY,GAAG,EAAE,EACjB,aAAa,EACb,cAAc,EACd,2BAA2B,EAC3B,kBAAkB,EAClB,YAAY,EACZ,IAAI,EAAE,QAAQ,EACd,mBAAmB,EACnB,qBAAqB,EACrB,WAAW,EACX,QAAQ,GAAG,UAAU,EACrB,UAAU,GAAG,IAAI,EACjB,mBAAmB,GAAG,KAAK,MACT,EAAE;;IACpB,oEAAoE;IACpE,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC;IAC5E,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,EAAsB,CAAC;IAC7D,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,EAAsB,CAAC;IAEzE,0EAA0E;IAC1E,oDAAoD;IACpD,MAAM,MAAM,GAAG,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,kBAAkB,CAAC;IAEpD,MAAM,IAAI,GAAG,WAAW,CAAC;QACvB,QAAQ,EAAE;YACR,SAAS,EAAE,aAAa;SACzB;QACD,UAAU,EAAE;YACV,MAAM,CAAC,YAAY,CAAC;YACpB,IAAI,CAAC;gBACH,SAAS,EAAE,SAAS,CAAC,QAAQ,CAAC,GAAG,CAAC;gBAClC,yBAAyB,EAAE,KAAK;gBAChC,OAAO,EAAE,CAAC;aACX,CAAC;YACF,KAAK,EAAE;YACP,GAAG,CAAC,mBAAmB;gBACrB,CAAC,CAAC;oBACE,IAAI,CAAC;wBACH,KAAK,CAAC,EAAE,eAAe,EAAE,cAAc,EAAE,QAAQ,EAAE;4BACjD,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAAK,EAAE;gCACrC,SAAS,EAAE,GAAG,eAAe,IAAI;gCACjC,QAAQ,EAAE,GAAG,cAAc,IAAI;6BAChC,CAAC,CAAC;wBACL,CAAC;wBACD,OAAO,EAAE,CAAC;qBACX,CAAC;iBACH;gBACH,CAAC,CAAC,EAAE,CAAC;SACR;QACD,wEAAwE;QACxE,uEAAuE;QACvE,yEAAyE;QACzE,YAAY,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YAC5B,qBAAqB,CAAC,IAAI,CAAC,CAAC;YAC5B,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAG,IAAI,EAAE,KAAK,CAAC,CAAC;QACnC,CAAC;QACD,IAAI,EAAE,MAAM;QACZ,SAAS,EAAE,SAAS;QACpB,QAAQ;QACR,oBAAoB,EAAE,UAAU;KACjC,CAAC,CAAC;IACH,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;IAE7B,2EAA2E;IAC3E,wEAAwE;IACxE,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,EAAE;QAC9B,OAAO,EAAE,cAAc,KAAK,SAAS;KACtC,CAAC,CAAC;IAEH,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,EAAE;QAClC,YAAY,EAAE,mBAAmB;QACjC,cAAc,EAAE,qBAAqB;KACtC,CAAC,CAAC;IACH,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,EAAE;QAC5B,IAAI,EAAE,QAAQ;KACf,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,cAAc,CAAC,OAAO,EAAE;QAC1C,OAAO,EAAE,cAAc,KAAK,SAAS;QACrC,CAAC,EAAE,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,CAAC;QACpB,CAAC,EAAE,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,CAAC;KACrB,CAAC,CAAC;IAEH,MAAM,YAAY,GAAG,eAAe,CAAC,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC;IAE1E,MAAM,EAAE,MAAM,EAAE,gBAAgB,EAAE,GAAG,mBAAmB,CAAC,OAAO,EAAE;QAChE,QAAQ,EAAE,MAAA,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,mCAAI,CAAC;KAC7D,CAAC,CAAC;IAEH,OAAO,OAAO,CACZ,GAAG,EAAE,CAAC,+CACD,IAAI,GACJ,YAAY,KACf,2BAA2B;QAC3B,aAAa;QACb,YAAY;QACZ,MAAM;QACN,UAAU;QACV,OAAO;QACP,WAAW;QACX,gBAAgB;QAChB,UAAU;QACV,kBAAkB;QAClB,gBAAgB,IAChB,EACF;QACE,MAAM;QACN,YAAY;QACZ,IAAI;QACJ,gBAAgB;QAChB,OAAO;QACP,aAAa;QACb,2BAA2B;QAC3B,kBAAkB;QAClB,YAAY;QACZ,UAAU;QACV,WAAW;KACZ,CACF,CAAC;AACJ,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport {\n  autoUpdate,\n  flip,\n  type FloatingFocusManagerProps,\n  offset,\n  type OffsetOptions,\n  type Placement,\n  shift,\n  size,\n  useClick,\n  useClientPoint,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  type UseInteractionsReturn,\n  useRole,\n  useTransitionStyles,\n} from '@floating-ui/react';\nimport { tokens } from '@neo4j-ndl/base';\nimport { useMemo, useState } from 'react';\n\nexport interface PopoverOptions {\n  isInitialOpen?: boolean;\n  placement?: Placement;\n  isOpen?: boolean;\n  onOpenChange?: (open: boolean, event?: Event) => void;\n  offsetOption?: OffsetOptions;\n  anchorElement?: Element | null;\n  anchorPosition?: {\n    x: number;\n    y: number;\n  };\n  anchorElementAsPortalAnchor?: boolean;\n  shouldCaptureFocus?: boolean;\n  initialFocus?: number | React.RefObject<HTMLElement | null>;\n  role?:\n    | 'tooltip'\n    | 'dialog'\n    | 'alertdialog'\n    | 'menu'\n    | 'listbox'\n    | 'grid'\n    | 'tree';\n  closeOnClickOutside?: boolean;\n  closeOnReferencePress?: boolean;\n  returnFocus?: FloatingFocusManagerProps['returnFocus'];\n  strategy?: 'fixed' | 'absolute';\n  isPortaled?: boolean;\n  shouldConstrainSize?: boolean;\n}\n\nexport interface UsePopoverReturn\n  extends UseInteractionsReturn, ReturnType<typeof useFloating> {\n  isOpen: boolean;\n  labelId: string | undefined;\n  descriptionId: string | undefined;\n  transitionStyles: React.CSSProperties;\n  setLabelId: (labelId: string | undefined) => void;\n  setDescriptionId: (descriptionId: string | undefined) => void;\n  anchorElementAsPortalAnchor: boolean | undefined;\n  shouldCaptureFocus: boolean | undefined;\n  initialFocus: number | React.RefObject<HTMLElement | null> | undefined;\n  isPortaled: boolean;\n  returnFocus: FloatingFocusManagerProps['returnFocus'];\n}\n\nexport function usePopover({\n  isInitialOpen = false,\n  placement = 'bottom',\n  isOpen: controlledOpen,\n  onOpenChange: setControlledOpen,\n  offsetOption = 10,\n  anchorElement,\n  anchorPosition,\n  anchorElementAsPortalAnchor,\n  shouldCaptureFocus,\n  initialFocus,\n  role: roleProp,\n  closeOnClickOutside,\n  closeOnReferencePress,\n  returnFocus,\n  strategy = 'absolute',\n  isPortaled = true,\n  shouldConstrainSize = false,\n}: PopoverOptions = {}): UsePopoverReturn {\n  // Internal state for uncontrolled mode (no `isOpen` prop provided).\n  const [isOpenUncontrolled, setIsOpenUncontrolled] = useState(isInitialOpen);\n  const [labelId, setLabelId] = useState<string | undefined>();\n  const [descriptionId, setDescriptionId] = useState<string | undefined>();\n\n  // Controlled/uncontrolled pattern: prefer the consumer-provided `isOpen`,\n  // falling back to internal state when not provided.\n  const isOpen = controlledOpen ?? isOpenUncontrolled;\n\n  const data = useFloating({\n    elements: {\n      reference: anchorElement,\n    },\n    middleware: [\n      offset(offsetOption),\n      flip({\n        crossAxis: placement.includes('-'),\n        fallbackAxisSideDirection: 'end',\n        padding: 5,\n      }),\n      shift(),\n      ...(shouldConstrainSize\n        ? [\n            size({\n              apply({ availableHeight, availableWidth, elements }) {\n                Object.assign(elements.floating.style, {\n                  maxHeight: `${availableHeight}px`,\n                  maxWidth: `${availableWidth}px`,\n                });\n              },\n              padding: 5,\n            }),\n          ]\n        : []),\n    ],\n    // Floating UI calls this when interactions (useClick, useDismiss, etc.)\n    // trigger an open/close. We always sync internal state so uncontrolled\n    // mode works, and notify the consumer callback exactly once if provided.\n    onOpenChange: (open, event) => {\n      setIsOpenUncontrolled(open);\n      setControlledOpen?.(open, event);\n    },\n    open: isOpen,\n    placement: placement,\n    strategy,\n    whileElementsMounted: autoUpdate,\n  });\n  const context = data.context;\n\n  // Only enable built-in click-to-toggle in uncontrolled mode. In controlled\n  // mode the consumer owns the open state and wires up their own trigger.\n  const click = useClick(context, {\n    enabled: controlledOpen === undefined,\n  });\n\n  const dismiss = useDismiss(context, {\n    outsidePress: closeOnClickOutside,\n    referencePress: closeOnReferencePress,\n  });\n  const role = useRole(context, {\n    role: roleProp,\n  });\n\n  const clientPoint = useClientPoint(context, {\n    enabled: anchorPosition !== undefined,\n    x: anchorPosition?.x,\n    y: anchorPosition?.y,\n  });\n\n  const interactions = useInteractions([click, dismiss, role, clientPoint]);\n\n  const { styles: transitionStyles } = useTransitionStyles(context, {\n    duration: Number.parseInt(tokens.motion.duration.quick) ?? 0,\n  });\n\n  return useMemo(\n    () => ({\n      ...data,\n      ...interactions,\n      anchorElementAsPortalAnchor,\n      descriptionId,\n      initialFocus,\n      isOpen,\n      isPortaled,\n      labelId,\n      returnFocus,\n      setDescriptionId,\n      setLabelId,\n      shouldCaptureFocus,\n      transitionStyles,\n    }),\n    [\n      isOpen,\n      interactions,\n      data,\n      transitionStyles,\n      labelId,\n      descriptionId,\n      anchorElementAsPortalAnchor,\n      shouldCaptureFocus,\n      initialFocus,\n      isPortaled,\n      returnFocus,\n    ],\n  );\n}\n"]}

package/lib/esm/select/Select.js

@@ -30,6 +30,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *  You should have received a copy of the GNU General Public License
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
+import { tokens } from '@neo4j-ndl/base';
 import classNames from 'classnames';
 import { useEffect, useId, useMemo, useState } from 'react';
 import ReactSelect from 'react-select';
@@ -79,6 +80,7 @@ const customStyles = () => {
             maxHeight: provided.maxHeight,
             minHeight: provided.minHeight,
         }),
+        menuPortal: (provided) => (Object.assign(Object.assign({}, provided), { zIndex: tokens.zIndex.popover })),
         option: () => ({}),
         placeholder: () => ({}),
         singleValue: () => ({}),

package/lib/esm/select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/select/Select.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport classNames from 'classnames';\nimport type React from 'react';\nimport { useEffect, useId, useMemo, useState } from 'react';\nimport ReactSelect, { type GroupBase } from 'react-select';\nimport AsyncSelect from 'react-select/async';\n/** Different types of select components */\nimport Creatable from 'react-select/creatable';\n\nimport { type PolymorphicCommonProps } from '../_common/types';\nimport { needleWarningMessage } from '../_common/utils';\nimport { useIsInsideDialog } from '../dialog/dialog-context';\nimport { ExclamationCircleIconSolid } from '../icons/generated/heroIcons/ExclamationCircleIconSolid';\nimport { Typography } from '../typography';\nimport {\n  CustomClearIndication,\n  CustomControl,\n  CustomIndicatorsContainer,\n  CustomInput,\n  CustomMenu,\n  CustomMenuList,\n  CustomMenuPortal,\n  CustomMultiValue,\n  CustomOption,\n  CustomPlaceholder,\n  CustomSingleValue,\n  CustomValueContainer,\n  DropdownIndicatorCurrying,\n} from './Overrides';\nimport { type SelectOverrideCustomProps, type SelectProps } from './types';\n\n/**\n *\n *\n * Helpers\n *\n *\n */\n\nconst overrideComponents = <\n  OptionType,\n  IsMulti extends boolean = false,\n  GroupType extends GroupBase<OptionType> = GroupBase<OptionType>,\n>(\n  props: SelectOverrideCustomProps<OptionType, IsMulti, GroupType>,\n) =>\n  ({\n    ClearIndicator: CustomClearIndication(props),\n    Control: CustomControl(props),\n    DropdownIndicator: DropdownIndicatorCurrying(props),\n    IndicatorSeparator: null,\n    IndicatorsContainer: CustomIndicatorsContainer(props),\n    Input: CustomInput(props),\n    Menu: CustomMenu(props),\n    MenuList: CustomMenuList(props),\n    MenuPortal: CustomMenuPortal(props),\n    MultiValue: CustomMultiValue(props),\n    Option: CustomOption(props),\n    Placeholder: CustomPlaceholder(props),\n    SingleValue: CustomSingleValue(props),\n    ValueContainer: CustomValueContainer(props),\n  }) as SelectProps<\n    OptionType,\n    IsMulti,\n    GroupType\n  >['selectProps']['components'];\n\nconst customStyles = <\n  OptionType,\n  IsMulti extends boolean = false,\n  GroupType extends GroupBase<OptionType> = GroupBase<OptionType>,\n>() => {\n  return {\n    clearIndicator: () => ({}),\n    control: () => ({}),\n    dropdownIndicator: () => ({}),\n    indicatorsContainer: () => ({}),\n    input: () => ({}),\n    menu: (provided) => ({\n      bottom: provided.bottom,\n      top: provided.top,\n    }),\n    menuList: (provided) => ({\n      maxHeight: provided.maxHeight,\n      minHeight: provided.minHeight,\n    }),\n    option: () => ({}),\n    placeholder: () => ({}),\n    singleValue: () => ({}),\n    valueContainer: (provided) => ({\n      ...provided,\n      padding: '0',\n    }),\n  } as SelectProps<OptionType, IsMulti, GroupType>['selectProps']['styles'];\n};\n\nexport const Select = <\n  OptionType,\n  IsMulti extends boolean = false,\n  GroupType extends GroupBase<OptionType> = GroupBase<OptionType>,\n  T extends React.ElementType = 'div',\n>({\n  as,\n  label,\n  helpText,\n  errorText,\n  isFluid = true,\n  size = 'medium',\n  type = 'select',\n  ariaLabel,\n  selectProps = {},\n  isClean = false,\n  isDisabled,\n  htmlAttributes,\n  className,\n  style,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, SelectProps<OptionType, IsMulti, GroupType>>) => {\n  const isInsideDialog = useIsInsideDialog();\n  const menuPosition = isInsideDialog ? 'fixed' : 'absolute';\n  const identifier = useId();\n  const helpTextId = useId();\n  const errorTextId = useId();\n  const [isMenuOpen, setIsMenuOpen] = useState(false);\n\n  const handleMenuOpen = () => {\n    setIsMenuOpen(true);\n    if (selectProps.onMenuOpen) {\n      selectProps.onMenuOpen();\n    }\n  };\n\n  const handleMenuClose = () => {\n    setIsMenuOpen(false);\n    if (selectProps.onMenuClose) {\n      selectProps.onMenuClose();\n    }\n  };\n\n  // Handle Escape and Enter key to prevent it from bubbling up to dialog\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (\n      (event.key === 'Escape' && isMenuOpen) ||\n      (event.key === 'Enter' && isMenuOpen)\n    ) {\n      event.stopPropagation();\n    }\n\n    if (selectProps.onKeyDown) {\n      selectProps.onKeyDown(event);\n    }\n  };\n\n  const Component: React.ElementType = as ?? 'div';\n\n  const ComponentOverrides = useMemo(\n    () =>\n      overrideComponents<OptionType, IsMulti, GroupType>({\n        errorText,\n        errorTextId,\n        helpText,\n        helpTextId,\n        isClean,\n        size,\n      }),\n    [errorText, errorTextId, helpText, helpTextId, size, isClean],\n  );\n\n  const StyleOverrides = useMemo(\n    () => customStyles<OptionType, IsMulti, GroupType>(),\n    [],\n  );\n\n  useEffect(() => {\n    if (label === undefined && ariaLabel === undefined) {\n      needleWarningMessage(\n        'A Select needs to have a label or an aria label to be accessible. link: https://dequeuniversity.com/rules/axe/4.2/label?application=axeAPI',\n      );\n    }\n  }, [label, ariaLabel]);\n\n  let SelectElement: React.JSX.Element;\n  switch (type) {\n    case 'async': {\n      SelectElement = (\n        <AsyncSelect\n          name={identifier}\n          inputId={identifier}\n          isDisabled={Boolean(isDisabled) || selectProps.isDisabled}\n          menuPlacement=\"auto\"\n          aria-label={ariaLabel}\n          aria-invalid={Boolean(errorText)}\n          {...selectProps}\n          onKeyDown={handleKeyDown}\n          onMenuOpen={handleMenuOpen}\n          onMenuClose={handleMenuClose}\n          menuPosition={selectProps.menuPosition ?? menuPosition}\n          hideSelectedOptions={false}\n          closeMenuOnSelect={Boolean(selectProps.isMulti) === false}\n          styles={{ ...StyleOverrides, ...selectProps.styles }}\n          components={{ ...ComponentOverrides, ...selectProps.components }}\n        />\n      );\n      break;\n    }\n    case 'creatable':\n      SelectElement = (\n        <Creatable\n          name={identifier}\n          inputId={identifier}\n          isDisabled={Boolean(isDisabled) || selectProps.isDisabled}\n          menuPlacement=\"auto\"\n          {...selectProps}\n          aria-label={ariaLabel}\n          aria-invalid={Boolean(errorText)}\n          onKeyDown={handleKeyDown}\n          onMenuOpen={handleMenuOpen}\n          onMenuClose={handleMenuClose}\n          menuPosition={selectProps.menuPosition ?? menuPosition}\n          hideSelectedOptions={false}\n          closeMenuOnSelect={Boolean(selectProps.isMulti) === false}\n          styles={{ ...StyleOverrides, ...selectProps.styles }}\n          components={{ ...ComponentOverrides, ...selectProps.components }}\n        />\n      );\n      break;\n    default:\n      SelectElement = (\n        <ReactSelect\n          name={identifier}\n          inputId={identifier}\n          isDisabled={Boolean(isDisabled) || selectProps.isDisabled}\n          menuPlacement=\"auto\"\n          {...selectProps}\n          aria-label={ariaLabel}\n          aria-invalid={Boolean(errorText)}\n          onKeyDown={handleKeyDown}\n          onMenuOpen={handleMenuOpen}\n          onMenuClose={handleMenuClose}\n          menuPosition={selectProps.menuPosition ?? menuPosition}\n          hideSelectedOptions={false}\n          closeMenuOnSelect={Boolean(selectProps.isMulti) === false}\n          styles={{ ...StyleOverrides, ...selectProps.styles }}\n          components={{ ...ComponentOverrides, ...selectProps.components }}\n        />\n      );\n  }\n\n  const classes = classNames('ndl-select', className, {\n    'ndl-creatable': type === 'creatable',\n    'ndl-disabled': selectProps.isDisabled,\n    'ndl-fluid': isFluid,\n    'ndl-has-error': Boolean(errorText),\n    'ndl-large': size === 'large',\n    'ndl-medium': size === 'medium',\n    'ndl-multi': selectProps.isMulti,\n    'ndl-small': size === 'small',\n  });\n\n  return (\n    <Component\n      ref={ref}\n      className={classes}\n      style={style}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {Boolean(label) && <label htmlFor={identifier}>{label}</label>}\n      {SelectElement}\n      {Boolean(helpText) && Boolean(errorText) === false && (\n        <Typography\n          variant={size === 'large' ? 'body-medium' : 'body-small'}\n          className=\"ndl-sub-text\"\n          htmlAttributes={{ id: helpTextId }}\n        >\n          {helpText}\n        </Typography>\n      )}\n      {Boolean(errorText) && (\n        <div className=\"n-flex n-flex-row n-gap-token-4 n-items-center\">\n          <ExclamationCircleIconSolid\n            className=\"ndl-error-icon\"\n            htmlAttributes={{ role: 'img', type: 'solid' }}\n          />\n          <span id={errorTextId} className=\"ndl-sub-text ndl-error-text\">\n            {errorText}\n          </span>\n        </div>\n      )}\n    </Component>\n  );\n};\n"]}
+{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/select/Select.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport { tokens } from '@neo4j-ndl/base';\nimport classNames from 'classnames';\nimport type React from 'react';\nimport { useEffect, useId, useMemo, useState } from 'react';\nimport ReactSelect, { type GroupBase } from 'react-select';\nimport AsyncSelect from 'react-select/async';\n/** Different types of select components */\nimport Creatable from 'react-select/creatable';\n\nimport { type PolymorphicCommonProps } from '../_common/types';\nimport { needleWarningMessage } from '../_common/utils';\nimport { useIsInsideDialog } from '../dialog/dialog-context';\nimport { ExclamationCircleIconSolid } from '../icons/generated/heroIcons/ExclamationCircleIconSolid';\nimport { Typography } from '../typography';\nimport {\n  CustomClearIndication,\n  CustomControl,\n  CustomIndicatorsContainer,\n  CustomInput,\n  CustomMenu,\n  CustomMenuList,\n  CustomMenuPortal,\n  CustomMultiValue,\n  CustomOption,\n  CustomPlaceholder,\n  CustomSingleValue,\n  CustomValueContainer,\n  DropdownIndicatorCurrying,\n} from './Overrides';\nimport { type SelectOverrideCustomProps, type SelectProps } from './types';\n\n/**\n *\n *\n * Helpers\n *\n *\n */\n\nconst overrideComponents = <\n  OptionType,\n  IsMulti extends boolean = false,\n  GroupType extends GroupBase<OptionType> = GroupBase<OptionType>,\n>(\n  props: SelectOverrideCustomProps<OptionType, IsMulti, GroupType>,\n) =>\n  ({\n    ClearIndicator: CustomClearIndication(props),\n    Control: CustomControl(props),\n    DropdownIndicator: DropdownIndicatorCurrying(props),\n    IndicatorSeparator: null,\n    IndicatorsContainer: CustomIndicatorsContainer(props),\n    Input: CustomInput(props),\n    Menu: CustomMenu(props),\n    MenuList: CustomMenuList(props),\n    MenuPortal: CustomMenuPortal(props),\n    MultiValue: CustomMultiValue(props),\n    Option: CustomOption(props),\n    Placeholder: CustomPlaceholder(props),\n    SingleValue: CustomSingleValue(props),\n    ValueContainer: CustomValueContainer(props),\n  }) as SelectProps<\n    OptionType,\n    IsMulti,\n    GroupType\n  >['selectProps']['components'];\n\nconst customStyles = <\n  OptionType,\n  IsMulti extends boolean = false,\n  GroupType extends GroupBase<OptionType> = GroupBase<OptionType>,\n>() => {\n  return {\n    clearIndicator: () => ({}),\n    control: () => ({}),\n    dropdownIndicator: () => ({}),\n    indicatorsContainer: () => ({}),\n    input: () => ({}),\n    menu: (provided) => ({\n      bottom: provided.bottom,\n      top: provided.top,\n    }),\n    menuList: (provided) => ({\n      maxHeight: provided.maxHeight,\n      minHeight: provided.minHeight,\n    }),\n    menuPortal: (provided) => ({\n      ...provided,\n      zIndex: tokens.zIndex.popover,\n    }),\n    option: () => ({}),\n    placeholder: () => ({}),\n    singleValue: () => ({}),\n    valueContainer: (provided) => ({\n      ...provided,\n      padding: '0',\n    }),\n  } as SelectProps<OptionType, IsMulti, GroupType>['selectProps']['styles'];\n};\n\nexport const Select = <\n  OptionType,\n  IsMulti extends boolean = false,\n  GroupType extends GroupBase<OptionType> = GroupBase<OptionType>,\n  T extends React.ElementType = 'div',\n>({\n  as,\n  label,\n  helpText,\n  errorText,\n  isFluid = true,\n  size = 'medium',\n  type = 'select',\n  ariaLabel,\n  selectProps = {},\n  isClean = false,\n  isDisabled,\n  htmlAttributes,\n  className,\n  style,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, SelectProps<OptionType, IsMulti, GroupType>>) => {\n  const isInsideDialog = useIsInsideDialog();\n  const menuPosition = isInsideDialog ? 'fixed' : 'absolute';\n  const identifier = useId();\n  const helpTextId = useId();\n  const errorTextId = useId();\n  const [isMenuOpen, setIsMenuOpen] = useState(false);\n\n  const handleMenuOpen = () => {\n    setIsMenuOpen(true);\n    if (selectProps.onMenuOpen) {\n      selectProps.onMenuOpen();\n    }\n  };\n\n  const handleMenuClose = () => {\n    setIsMenuOpen(false);\n    if (selectProps.onMenuClose) {\n      selectProps.onMenuClose();\n    }\n  };\n\n  // Handle Escape and Enter key to prevent it from bubbling up to dialog\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (\n      (event.key === 'Escape' && isMenuOpen) ||\n      (event.key === 'Enter' && isMenuOpen)\n    ) {\n      event.stopPropagation();\n    }\n\n    if (selectProps.onKeyDown) {\n      selectProps.onKeyDown(event);\n    }\n  };\n\n  const Component: React.ElementType = as ?? 'div';\n\n  const ComponentOverrides = useMemo(\n    () =>\n      overrideComponents<OptionType, IsMulti, GroupType>({\n        errorText,\n        errorTextId,\n        helpText,\n        helpTextId,\n        isClean,\n        size,\n      }),\n    [errorText, errorTextId, helpText, helpTextId, size, isClean],\n  );\n\n  const StyleOverrides = useMemo(\n    () => customStyles<OptionType, IsMulti, GroupType>(),\n    [],\n  );\n\n  useEffect(() => {\n    if (label === undefined && ariaLabel === undefined) {\n      needleWarningMessage(\n        'A Select needs to have a label or an aria label to be accessible. link: https://dequeuniversity.com/rules/axe/4.2/label?application=axeAPI',\n      );\n    }\n  }, [label, ariaLabel]);\n\n  let SelectElement: React.JSX.Element;\n  switch (type) {\n    case 'async': {\n      SelectElement = (\n        <AsyncSelect\n          name={identifier}\n          inputId={identifier}\n          isDisabled={Boolean(isDisabled) || selectProps.isDisabled}\n          menuPlacement=\"auto\"\n          aria-label={ariaLabel}\n          aria-invalid={Boolean(errorText)}\n          {...selectProps}\n          onKeyDown={handleKeyDown}\n          onMenuOpen={handleMenuOpen}\n          onMenuClose={handleMenuClose}\n          menuPosition={selectProps.menuPosition ?? menuPosition}\n          hideSelectedOptions={false}\n          closeMenuOnSelect={Boolean(selectProps.isMulti) === false}\n          styles={{ ...StyleOverrides, ...selectProps.styles }}\n          components={{ ...ComponentOverrides, ...selectProps.components }}\n        />\n      );\n      break;\n    }\n    case 'creatable':\n      SelectElement = (\n        <Creatable\n          name={identifier}\n          inputId={identifier}\n          isDisabled={Boolean(isDisabled) || selectProps.isDisabled}\n          menuPlacement=\"auto\"\n          {...selectProps}\n          aria-label={ariaLabel}\n          aria-invalid={Boolean(errorText)}\n          onKeyDown={handleKeyDown}\n          onMenuOpen={handleMenuOpen}\n          onMenuClose={handleMenuClose}\n          menuPosition={selectProps.menuPosition ?? menuPosition}\n          hideSelectedOptions={false}\n          closeMenuOnSelect={Boolean(selectProps.isMulti) === false}\n          styles={{ ...StyleOverrides, ...selectProps.styles }}\n          components={{ ...ComponentOverrides, ...selectProps.components }}\n        />\n      );\n      break;\n    default:\n      SelectElement = (\n        <ReactSelect\n          name={identifier}\n          inputId={identifier}\n          isDisabled={Boolean(isDisabled) || selectProps.isDisabled}\n          menuPlacement=\"auto\"\n          {...selectProps}\n          aria-label={ariaLabel}\n          aria-invalid={Boolean(errorText)}\n          onKeyDown={handleKeyDown}\n          onMenuOpen={handleMenuOpen}\n          onMenuClose={handleMenuClose}\n          menuPosition={selectProps.menuPosition ?? menuPosition}\n          hideSelectedOptions={false}\n          closeMenuOnSelect={Boolean(selectProps.isMulti) === false}\n          styles={{ ...StyleOverrides, ...selectProps.styles }}\n          components={{ ...ComponentOverrides, ...selectProps.components }}\n        />\n      );\n  }\n\n  const classes = classNames('ndl-select', className, {\n    'ndl-creatable': type === 'creatable',\n    'ndl-disabled': selectProps.isDisabled,\n    'ndl-fluid': isFluid,\n    'ndl-has-error': Boolean(errorText),\n    'ndl-large': size === 'large',\n    'ndl-medium': size === 'medium',\n    'ndl-multi': selectProps.isMulti,\n    'ndl-small': size === 'small',\n  });\n\n  return (\n    <Component\n      ref={ref}\n      className={classes}\n      style={style}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {Boolean(label) && <label htmlFor={identifier}>{label}</label>}\n      {SelectElement}\n      {Boolean(helpText) && Boolean(errorText) === false && (\n        <Typography\n          variant={size === 'large' ? 'body-medium' : 'body-small'}\n          className=\"ndl-sub-text\"\n          htmlAttributes={{ id: helpTextId }}\n        >\n          {helpText}\n        </Typography>\n      )}\n      {Boolean(errorText) && (\n        <div className=\"n-flex n-flex-row n-gap-token-4 n-items-center\">\n          <ExclamationCircleIconSolid\n            className=\"ndl-error-icon\"\n            htmlAttributes={{ role: 'img', type: 'solid' }}\n          />\n          <span id={errorTextId} className=\"ndl-sub-text ndl-error-text\">\n            {errorText}\n          </span>\n        </div>\n      )}\n    </Component>\n  );\n};\n"]}

package/lib/types/color-picker/ColorPicker.d.ts

@@ -50,6 +50,10 @@ type ColorPickerProps = {
     className?: string;
     /** Additional inline styles to apply to the root color picker container. */
     style?: React.CSSProperties;
+    /** The target element to portal the menu to. If not provided, the menu will not be portaled. */
+    portalTarget?: HTMLElement | null;
+    /** The floating strategy to use for the menu. If not provided, the menu will be positioned absolutely. */
+    floatingStrategy?: 'absolute' | 'fixed';
 };
 export declare const ColorPicker: import("react").ForwardRefExoticComponent<ColorPickerProps & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/lib/types/color-picker/ColorPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../src/color-picker/ColorPicker.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,qBAAqB,CAAC;AAG7B,OAAO,EACL,KAAK,QAAQ,EAEb,KAAK,SAAS,EAKd,KAAK,SAAS,EAKf,MAAM,kBAAkB,CAAC;AAS1B;;;;;;;;;;;;GAYG;AACH,KAAK,gBAAgB,GAAG;IACtB,iJAAiJ;IACjJ,KAAK,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;IACxC,wHAAwH;IACxH,QAAQ,CAAC,EAAE,CAAC,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC,EAAE,CAAC;IAChD,8GAA8G;IAC9G,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,mKAAmK;IACnK,QAAQ,EAAE,CAAC,QAAQ,EAAE;QACnB,GAAG,EAAE,QAAQ,CAAC;QACd,GAAG,EAAE,SAAS,CAAC;QACf,IAAI,EAAE,SAAS,CAAC;KACjB,KAAK,IAAI,CAAC;IACX,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4EAA4E;IAC5E,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,WAAW,6GAoLvB,CAAC"}
+{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../src/color-picker/ColorPicker.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,qBAAqB,CAAC;AAG7B,OAAO,EACL,KAAK,QAAQ,EAEb,KAAK,SAAS,EAKd,KAAK,SAAS,EAKf,MAAM,kBAAkB,CAAC;AAS1B;;;;;;;;;;;;GAYG;AACH,KAAK,gBAAgB,GAAG;IACtB,iJAAiJ;IACjJ,KAAK,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;IACxC,wHAAwH;IACxH,QAAQ,CAAC,EAAE,CAAC,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC,EAAE,CAAC;IAChD,8GAA8G;IAC9G,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,mKAAmK;IACnK,QAAQ,EAAE,CAAC,QAAQ,EAAE;QACnB,GAAG,EAAE,QAAQ,CAAC;QACd,GAAG,EAAE,SAAS,CAAC;QACf,IAAI,EAAE,SAAS,CAAC;KACjB,KAAK,IAAI,CAAC;IACX,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4EAA4E;IAC5E,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAE5B,gGAAgG;IAChG,YAAY,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAClC,0GAA0G;IAC1G,gBAAgB,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;CACzC,CAAC;AAEF,eAAO,MAAM,WAAW,6GAwLvB,CAAC"}

package/lib/types/color-picker/stories/color-picker-dialog.story.d.ts

@@ -0,0 +1,24 @@
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+declare const Component: () => import("react/jsx-runtime").JSX.Element;
+export default Component;
+//# sourceMappingURL=color-picker-dialog.story.d.ts.map

package/lib/types/color-picker/stories/color-picker-dialog.story.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker-dialog.story.d.ts","sourceRoot":"","sources":["../../../../src/color-picker/stories/color-picker-dialog.story.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAKjD,QAAA,MAAM,SAAS,+CAgCd,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/types/color-picker/stories/color-picker-popover.story.d.ts

@@ -0,0 +1,24 @@
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+declare const Component: () => import("react/jsx-runtime").JSX.Element;
+export default Component;
+//# sourceMappingURL=color-picker-popover.story.d.ts.map

package/lib/types/color-picker/stories/color-picker-popover.story.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker-popover.story.d.ts","sourceRoot":"","sources":["../../../../src/color-picker/stories/color-picker-popover.story.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAIjD,QAAA,MAAM,SAAS,+CAmBd,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/types/color-picker/stories/index.d.ts

@@ -21,7 +21,11 @@
 export { default as ColorPickerDefault } from './color-picker-default.story';
 export { default as ColorPickerWithoutEyeDropper } from './color-picker-without-eyedropper.story';
 export { default as ColorPickerCustomSwatches } from './color-picker-custom-swatches.story';
+export { default as ColorPickerDialog } from './color-picker-dialog.story';
+export { default as ColorPickerPopover } from './color-picker-popover.story';
 export declare const ColorPickerDefaultSource: string;
 export declare const ColorPickerWithoutEyeDropperSource: string;
 export declare const ColorPickerCustomSwatchesSource: string;
+export declare const ColorPickerDialogSource: string;
+export declare const ColorPickerPopoverSource: string;
 //# sourceMappingURL=index.d.ts.map

package/lib/types/color-picker/stories/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/color-picker/stories/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,4BAA4B,EAAE,MAAM,yCAAyC,CAAC;AAClG,OAAO,EAAE,OAAO,IAAI,yBAAyB,EAAE,MAAM,sCAAsC,CAAC;AAO5F,eAAO,MAAM,wBAAwB,QAEpC,CAAC;AACF,eAAO,MAAM,kCAAkC,QAE9C,CAAC;AACF,eAAO,MAAM,+BAA+B,QAE3C,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/color-picker/stories/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,4BAA4B,EAAE,MAAM,yCAAyC,CAAC;AAClG,OAAO,EAAE,OAAO,IAAI,yBAAyB,EAAE,MAAM,sCAAsC,CAAC;AAC5F,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AAS7E,eAAO,MAAM,wBAAwB,QAEpC,CAAC;AACF,eAAO,MAAM,kCAAkC,QAE9C,CAAC;AACF,eAAO,MAAM,+BAA+B,QAE3C,CAAC;AACF,eAAO,MAAM,uBAAuB,QAEnC,CAAC;AACF,eAAO,MAAM,wBAAwB,QAEpC,CAAC"}

package/lib/types/select/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/select/Select.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAoB,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAK3D,OAAO,EAAE,KAAK,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAoB/D,OAAO,EAAkC,KAAK,WAAW,EAAE,MAAM,SAAS,CAAC;AAmE3E,eAAO,MAAM,MAAM,GACjB,UAAU,EACV,OAAO,SAAS,OAAO,GAAG,KAAK,EAC/B,SAAS,SAAS,SAAS,CAAC,UAAU,CAAC,GAAG,SAAS,CAAC,UAAU,CAAC,EAC/D,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,EACnC,2JAiBC,sBAAsB,CAAC,CAAC,EAAE,WAAW,CAAC,UAAU,EAAE,OAAO,EAAE,SAAS,CAAC,CAAC,4CA8KxE,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/select/Select.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAoB,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAK3D,OAAO,EAAE,KAAK,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAoB/D,OAAO,EAAkC,KAAK,WAAW,EAAE,MAAM,SAAS,CAAC;AAuE3E,eAAO,MAAM,MAAM,GACjB,UAAU,EACV,OAAO,SAAS,OAAO,GAAG,KAAK,EAC/B,SAAS,SAAS,SAAS,CAAC,UAAU,CAAC,GAAG,SAAS,CAAC,UAAU,CAAC,EAC/D,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,EACnC,2JAiBC,sBAAsB,CAAC,CAAC,EAAE,WAAW,CAAC,UAAU,EAAE,OAAO,EAAE,SAAS,CAAC,CAAC,4CA8KxE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-ndl/react",
-  "version": "4.16.7",
+  "version": "4.16.9",
   "sideEffects": false,
   "description": "React implementation of Neo4j Design System",
   "keywords": [
@@ -354,7 +354,8 @@
   },
   "files": [
     "lib",
-    "icons"
+    "icons",
+    "skills"
   ],
   "publishConfig": {
     "access": "public"
@@ -427,6 +428,8 @@
   "scripts": {
     "generate-component": "node ./scripts/component-generator.js",
     "docs:generate": "pnpm --dir ../.. run docs:generate -- --package react",
+    "docs:generate-skills": "pnpm --dir ../.. run docs:generate-skills -- --package react",
+    "docs:generate-all": "pnpm run docs:generate && pnpm run docs:generate-skills",
     "generate:exports": "node ./scripts/generate-exports.js",
     "check:exports": "node ./scripts/generate-exports.js --check",
     "pretest": "pnpm run lint && pnpm run check:exports",

package/skills/ndl-react/SKILL.md

@@ -0,0 +1,152 @@
+---
+name: ndl-react
+description: >-
+  Build and edit UI with the Neo4j Needle React design system
+  (@neo4j-ndl/react). Use when adding, composing, or modifying Needle components
+  in a React app. Provides per-component props, accessibility requirements, and
+  runnable usage examples. Works with any agent that supports skills (Cursor,
+  Claude, etc.).
+---
+
+# Neo4j Needle (@neo4j-ndl/react)
+
+> 📌 Shipped with `@neo4j-ndl/react`. 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.
+
+Use Neo4j Needle components instead of hand-rolling equivalent UI.
+
+## Setup
+
+- Import the base stylesheet once at the app root (if not already wired):
+  `import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';`
+- Import components from `@neo4j-ndl/react`; some live under the
+  `@neo4j-ndl/react/next` and `@neo4j-ndl/react/ai` subpaths (see the catalog).
+- Prefer icons exported from `@neo4j-ndl/react/icons` (e.g.
+  `MagnifyingGlassIconOutline`) for design-system parity.
+
+## Rules
+
+- **Never hallucinate props.** Before using any prop — including common-sounding
+  ones like `size`, `tone`, or `shadow` — confirm it appears in the component's
+  doc here or in the package's TypeScript types. Do not assume APIs from other
+  libraries (MUI, Radix, Chakra). If something is unclear, ask the user — or when
+  running unattended, prefer the TypeScript types and omit the uncertain prop
+  rather than guessing.
+- These docs are the primary source for props, accessibility, and examples. The
+  package's `.d.ts` type contract is authoritative: if the types disagree with
+  these docs, the **types win**. Do not reverse-engineer behavior from the
+  compiled implementation source in `node_modules`.
+- Pass native HTML attributes, `aria-*`, and `data-*` via the `htmlAttributes`
+  prop, only where the component's doc says so.
+- Compound components are exposed as subcomponents (e.g. `Tooltip.Trigger`,
+  `Tooltip.Content`). Follow each component's own doc — don't assume one
+  component's compound shape matches another's.
+- Follow the accessibility guidance in each component's doc; don't strip built-in
+  roles or keyboard behavior.
+
+## How to use this skill
+
+1. Find the component in the catalog below to get its docs file and import path.
+2. Read `components/<file>` for that component's props, accessibility
+   requirements, and runnable examples; prefer those examples.
+
+## Components
+
+Import from `@neo4j-ndl/react`.
+
+| Component | Docs | Accessibility | Examples |
+|-----------|------|---------------|----------|
+| `Accordion` | [components/accordion.md](components/accordion.md) | ✅ | 6 |
+| `Avatar` | [components/avatar.md](components/avatar.md) | ✅ | 7 |
+| `Banner` | [components/banner.md](components/banner.md) | ✅ | 6 |
+| `Box` | [components/box.md](components/box.md) |  | 1 |
+| `Breadcrumbs` | [components/breadcrumbs.md](components/breadcrumbs.md) | ✅ | 4 |
+| `Checkbox` | [components/checkbox.md](components/checkbox.md) | ✅ | 9 |
+| `CleanIconButton` | [components/clean-icon-button.md](components/clean-icon-button.md) | ✅ | 8 |
+| `ClipboardButton` | [components/clipboard-button.md](components/clipboard-button.md) |  | 7 |
+| `Code` | [components/code.md](components/code.md) | ✅ | 2 |
+| `CodeBlock` | [components/code-block.md](components/code-block.md) |  | 8 |
+| `ColorPicker` | [components/color-picker.md](components/color-picker.md) |  | 3 |
+| `ConditionalWrap` | [components/conditional-wrap.md](components/conditional-wrap.md) |  | 1 |
+| `DataGrid` | [components/data-grid.md](components/data-grid.md) |  | 20 |
+| `DatePicker` | [components/date-picker.md](components/date-picker.md) | ✅ | 14 |
+| `Dialog` | [components/dialog.md](components/dialog.md) | ✅ | 7 |
+| `DismissibleTag` | [components/dismissible-tag.md](components/dismissible-tag.md) |  | 4 |
+| `Divider` | [components/divider.md](components/divider.md) |  | 3 |
+| `Drawer` | [components/drawer.md](components/drawer.md) | ✅ | 8 |
+| `DropdownButton` | [components/dropdown-button.md](components/dropdown-button.md) |  | 7 |
+| `Dropzone` | [components/dropzone.md](components/dropzone.md) |  | 6 |
+| `FilledButton` | [components/filled-button.md](components/filled-button.md) |  | 0 |
+| `Flex` | [components/flex.md](components/flex.md) |  | 1 |
+| `GraphLabel` | [components/graph-label.md](components/graph-label.md) |  | 7 |
+| `IconButton` | [components/icon-button.md](components/icon-button.md) | ✅ | 7 |
+| `IconButtonArrayComponent` | [components/icon-button-array.md](components/icon-button-array.md) |  | 5 |
+| `InlineEdit` | [components/inline-edit.md](components/inline-edit.md) | ✅ | 9 |
+| `Kbd` | [components/kbd.md](components/kbd.md) | ✅ | 2 |
+| `LoadingBar` | [components/loading-bar.md](components/loading-bar.md) |  | 2 |
+| `LoadingSpinner` | [components/loading-spinner.md](components/loading-spinner.md) | ✅ | 2 |
+| `Logo` | [components/logo.md](components/logo.md) |  | 3 |
+| `Menu` | [components/menu.md](components/menu.md) | ✅ | 13 |
+| `Modal` | [components/modal.md](components/modal.md) | ✅ | 0 |
+| `OutlinedButton` | [components/outlined-button.md](components/outlined-button.md) |  | 0 |
+| `Popover` | [components/popover.md](components/popover.md) | ✅ | 6 |
+| `ProgressBar` | [components/progress-bar.md](components/progress-bar.md) | ✅ | 3 |
+| `Radio` | [components/radio.md](components/radio.md) | ✅ | 7 |
+| `ReadOnlyTag` | [components/read-only-tag.md](components/read-only-tag.md) |  | 4 |
+| `SegmentedControl` | [components/segmented-control.md](components/segmented-control.md) | ✅ | 5 |
+| `Select` | [components/select.md](components/select.md) |  | 13 |
+| `SelectIconButton` | [components/select-icon-button.md](components/select-icon-button.md) |  | 4 |
+| `SelectableTag` | [components/selectable-tag.md](components/selectable-tag.md) |  | 6 |
+| `SideNavigation` | [components/side-navigation.md](components/side-navigation.md) |  | 4 |
+| `Skeleton` | [components/skeleton.md](components/skeleton.md) |  | 5 |
+| `Slider` | [components/slider.md](components/slider.md) | ✅ | 8 |
+| `Spotlight` | [components/spotlight.md](components/spotlight.md) | ✅ | 9 |
+| `StatusIndicator` | [components/status-indicator.md](components/status-indicator.md) | ✅ | 1 |
+| `StatusLabel` | [components/status-label.md](components/status-label.md) |  | 4 |
+| `Switch` | [components/switch.md](components/switch.md) | ✅ | 7 |
+| `Tabs` | [components/tabs.md](components/tabs.md) | ✅ | 7 |
+| `Tag` | [components/tag.md](components/tag.md) |  | 2 |
+| `TextArea` | [components/text-area.md](components/text-area.md) | ✅ | 8 |
+| `TextButton` | [components/text-button.md](components/text-button.md) |  | 0 |
+| `TextInput` | [components/text-input.md](components/text-input.md) | ✅ | 16 |
+| `TextLink` | [components/text-link.md](components/text-link.md) | ✅ | 5 |
+| `TimePicker` | [components/time-picker.md](components/time-picker.md) |  | 4 |
+| `TimeZonePicker` | [components/timezone-picker.md](components/timezone-picker.md) |  | 9 |
+| `Tooltip` | [components/tooltip.md](components/tooltip.md) | ✅ | 13 |
+| `TreeView` | [components/tree-view.md](components/tree-view.md) |  | 3 |
+| `Typography` | [components/typography.md](components/typography.md) |  | 3 |
+| `Wizard` | [components/wizard.md](components/wizard.md) |  | 5 |
+
+## Next components
+
+Import from `@neo4j-ndl/react/next`.
+
+Next-generation components, imported from the `@neo4j-ndl/react/next` subpath. A `next` component may share a name with a stable one (e.g. `TreeView`) but is a **distinct** implementation with its own API — import it from this subpath, and do not mix it with the same-named default component.
+
+| Component | Docs | Accessibility | Examples |
+|-----------|------|---------------|----------|
+| `TreeView` | [components/next/tree-view.md](components/next/tree-view.md) | ✅ | 8 |
+
+## AI components
+
+Import from `@neo4j-ndl/react/ai`.
+
+Building blocks for AI chat / agent UIs, imported from the `@neo4j-ndl/react/ai` subpath.
+
+| Component | Docs | Accessibility | Examples |
+|-----------|------|---------------|----------|
+| `CodePreview` | [components/ai/code-preview.md](components/ai/code-preview.md) |  | 4 |
+| `FileTag` | [components/ai/file-tag.md](components/ai/file-tag.md) |  | 3 |
+| `ImageTag` | [components/ai/image-tag.md](components/ai/image-tag.md) |  | 3 |
+| `MoreFilesComponent` | [components/ai/more-files.md](components/ai/more-files.md) |  | 1 |
+| `Presence` | [components/ai/presence.md](components/ai/presence.md) |  | 2 |
+| `Preview` | [components/ai/preview.md](components/ai/preview.md) |  | 9 |
+| `Prompt` | [components/ai/prompt.md](components/ai/prompt.md) |  | 6 |
+| `Reasoning` | [components/ai/reasoning.md](components/ai/reasoning.md) |  | 1 |
+| `Response` | [components/ai/response.md](components/ai/response.md) |  | 7 |
+| `Suggestion` | [components/ai/suggestion.md](components/ai/suggestion.md) |  | 4 |
+| `Thinking` | [components/ai/thinking.md](components/ai/thinking.md) |  | 2 |
+| `ToolCall` | [components/ai/tool-call.md](components/ai/tool-call.md) |  | 2 |
+| `UserBubbleComponent` | [components/ai/user-bubble.md](components/ai/user-bubble.md) |  | 4 |