npm - @neo4j-ndl/react - Versions diffs - 4.25.8 → 5.0.0-alpha.0.3d763f7 - Mend

@neo4j-ndl/react 4.25.8 → 5.0.0-alpha.0.3d763f7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1176) hide show

package/lib/cjs/code-block/stories/code-with-actions.story.js CHANGED Viewed

@@ -28,13 +28,13 @@ const example_code_snippets_1 = require("./example-code-snippets");
 const Component = () => {
     return ((0, jsx_runtime_1.jsx)(react_1.CodeBlock, { code: example_code_snippets_1.SHORT_CODE_EXAMPLE, language: "typescript", maxHeight: 320, actions: [
             {
-                children: ((0, jsx_runtime_1.jsx)(icons_1.Square2StackIconOutline, { className: "n-text-neutral-text-icon" })),
+                children: ((0, jsx_runtime_1.jsx)(icons_1.Square2StackIconOutline, { className: "text-neutral-text-icon" })),
                 description: 'copy',
                 htmlAttributes: { title: 'copy' },
                 onClick: () => alert('Code copied to clipboard!'),
             },
             {
-                children: (0, jsx_runtime_1.jsx)(icons_1.PlayCircleIconOutline, { className: "n-text-primary-icon" }),
+                children: (0, jsx_runtime_1.jsx)(icons_1.PlayCircleIconOutline, { className: "text-primary-icon" }),
                 description: 'run',
                 htmlAttributes: { title: 'run' },
                 onClick: () => alert('Running code...'),

package/lib/cjs/code-block/stories/code-with-actions.story.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"code-with-actions.story.js","sourceRoot":"","sources":["../../../../src/code-block/stories/code-with-actions.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA6C;AAC7C,kDAGgC;AAEhC,mEAA6D;AAE7D,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,uBAAC,iBAAS,IACR,IAAI,EAAE,0CAAkB,EACxB,QAAQ,EAAC,YAAY,EACrB,SAAS,EAAE,GAAG,EACd,OAAO,EAAE;YACP;gBACE,QAAQ,EAAE,CACR,uBAAC,+BAAuB,IAAC,SAAS,EAAC,~~0BAA0B~~,GAAG,~~CACjE~~;gBACD,WAAW,EAAE,MAAM;gBACnB,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;gBACjC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,2BAA2B,CAAC;aAClD;YACD;gBACE,QAAQ,EAAE,uBAAC,6BAAqB,IAAC,SAAS,EAAC,~~qBAAqB~~,GAAG;~~gBACnE~~,WAAW,EAAE,KAAK;gBAClB,cAAc,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE;gBAChC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC;aACxC;SACF,GACD,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,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 { CodeBlock } from '@neo4j-ndl/react';\nimport {\n PlayCircleIconOutline,\n Square2StackIconOutline,\n} from '@neo4j-ndl/react/icons';\n\nimport { SHORT_CODE_EXAMPLE } from './example-code-snippets';\n\nconst Component = () => {\n return (\n <CodeBlock\n code={SHORT_CODE_EXAMPLE}\n language=\"typescript\"\n maxHeight={320}\n actions={[\n {\n children: (\n <Square2StackIconOutline className=\"n-text-neutral-text-icon\" />\n ),\n description: 'copy',\n htmlAttributes: { title: 'copy' },\n onClick: () => alert('Code copied to clipboard!'),\n },\n {\n children: <PlayCircleIconOutline className=\"n-text-primary-icon\" />,\n description: 'run',\n htmlAttributes: { title: 'run' },\n onClick: () => alert('Running code...'),\n },\n ]}\n />\n );\n};\n\nexport default Component;\n"]}
1	+ {"version":3,"file":"code-with-actions.story.js","sourceRoot":"","sources":["../../../../src/code-block/stories/code-with-actions.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA6C;AAC7C,kDAGgC;AAEhC,mEAA6D;AAE7D,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,uBAAC,iBAAS,IACR,IAAI,EAAE,0CAAkB,EACxB,QAAQ,EAAC,YAAY,EACrB,SAAS,EAAE,GAAG,EACd,OAAO,EAAE;YACP;gBACE,QAAQ,EAAE,CACR,uBAAC,+BAAuB,IAAC,SAAS,EAAC,wBAAwB,GAAG,CAC/D;gBACD,WAAW,EAAE,MAAM;gBACnB,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;gBACjC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,2BAA2B,CAAC;aAClD;YACD;gBACE,QAAQ,EAAE,uBAAC,6BAAqB,IAAC,SAAS,EAAC,mBAAmB,GAAG;gBACjE,WAAW,EAAE,KAAK;gBAClB,cAAc,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE;gBAChC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC;aACxC;SACF,GACD,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,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 { CodeBlock } from '@neo4j-ndl/react';\nimport {\n PlayCircleIconOutline,\n Square2StackIconOutline,\n} from '@neo4j-ndl/react/icons';\n\nimport { SHORT_CODE_EXAMPLE } from './example-code-snippets';\n\nconst Component = () => {\n return (\n <CodeBlock\n code={SHORT_CODE_EXAMPLE}\n language=\"typescript\"\n maxHeight={320}\n actions={[\n {\n children: (\n <Square2StackIconOutline className=\"text-neutral-text-icon\" />\n ),\n description: 'copy',\n htmlAttributes: { title: 'copy' },\n onClick: () => alert('Code copied to clipboard!'),\n },\n {\n children: <PlayCircleIconOutline className=\"text-primary-icon\" />,\n description: 'run',\n htmlAttributes: { title: 'run' },\n onClick: () => alert('Running code...'),\n },\n ]}\n />\n );\n};\n\nexport default Component;\n"]}

package/lib/cjs/color-picker/ColorPicker.js CHANGED Viewed

@@ -82,9 +82,6 @@ exports.ColorPicker = (0, react_1.forwardRef)(function ColorPicker({ color, onCh
                     handleChange(newColor);
                 } }), (0, jsx_runtime_1.jsxs)("div", { className: "ndl-color-picker-hue-container", children: [isEyeDropperActive && ((0, jsx_runtime_1.jsx)(clean_icon_button_1.CleanIconButton, { size: "small", isActive: isEyeDropperActiveState, onClick: () => {
                             setIsEyeDropperActiveState(true);
-                            // TODO: Remove the any casting when polyfiller is not needed anymore. https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper
-                            // Type assertion to handle the unknown type
-                            // oxlint-disable-next-line @typescript-eslint/no-explicit-any
                             const eyeDropper = new window.EyeDropper();
                             eyeDropper
                                 .open()

package/lib/cjs/color-picker/ColorPicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorPicker.js","sourceRoot":"","sources":["../../../src/color-picker/ColorPicker.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 'eyedropper-polyfill';\n\nimport { tokens } from '@neo4j-ndl/base';\nimport {\n type HexColor,\n hexToHsva,\n type HsvaColor,\n hsvaToHex,\n hsvaToRgba,\n Hue,\n type PointerProps,\n type RgbaColor,\n rgbaToHex,\n rgbaToHsva,\n Saturation,\n validHex,\n} from '@uiw/react-color';\nimport classNames from 'classnames';\nimport { forwardRef, useEffect, useMemo, useState } from 'react';\n\nimport { CleanIconButton } from '../clean-icon-button';\nimport { EyeDropperIconOutline } from '../icons/generated/heroIcons/EyeDropperIconOutline';\nimport { Select } from '../select';\nimport { TextInput } from '../text-input';\n\n/\n @remarks\n * By default the `swatches` prop is set to the available graph colors (`tokens.graph`) from `@neo4j-ndl/base`.\n \n @remarks\n * Where `HsvaColor`, `RgbaColor`, and `HexColor` types are from `@uiw/react-color`, and represent different color formats:\n \n - `HexColor`: A string in the format `#RRGGBB` (e.g., `#ff0000`).\n * - `RgbaColor`: An object with numeric properties `{ r, g, b, a }` for red, green, blue (0–255), and alpha (0–1).\n * - `HsvaColor`: An object with numeric properties `{ h, s, v, a }` for hue (0–360), saturation (0–100), value (0–100), and alpha (0–1).\n \n Visit [react-color](https://uiwjs.github.io/react-color/#/) for more information.\n /\ntype ColorPickerProps = {\n /* The current color value. Can be provided in HSVA, RGBA, or Hex format. The component will automatically convert between formats as needed. /\n color: HsvaColor \| RgbaColor \| HexColor;\n /* Optional array of predefined color swatches for quick selection. Each swatch can be in HSVA, RGBA, or Hex format. /\n swatches?: (HsvaColor \| RgbaColor \| HexColor)[];\n /* Whether to display the eye dropper tool that allows users to sample colors from anywhere on the screen. /\n shouldShowEyeDropper?: boolean;\n /* Callback function triggered when the color value changes. Receives an object containing the new color in all three formats (hex, rgb, hsva) for convenience. /\n onChange: (newColor: {\n hex: HexColor;\n rgb: RgbaColor;\n hsva: HsvaColor;\n }) => void;\n /* Additional class name to apply to the root color picker container. /\n className?: string;\n /* Additional inline styles to apply to the root color picker container. /\n style?: React.CSSProperties;\n\n /* The target element to portal the menu to. If not provided, the menu will not be portaled. /\n portalTarget?: HTMLElement \| null;\n /* The floating strategy to use for the menu. If not provided, the menu will be positioned absolutely. */\n floatingStrategy?: 'absolute' \| 'fixed';\n};\n\nexport const ColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(\n function ColorPicker(\n {\n color,\n onChange,\n swatches = Object.values(tokens.graph).filter(validHex),\n shouldShowEyeDropper = true,\n className,\n style,\n portalTarget,\n floatingStrategy = 'absolute',\n },\n ref,\n ) {\n const [isEyeDropperActiveState, setIsEyeDropperActiveState] =\n useState(false);\n\n const derivedHsva = useMemo(() => {\n if (typeof color === 'string') {\n return hexToHsva(color);\n }\n if (typeof color === 'object' && 'r' in color) {\n return rgbaToHsva(color);\n }\n return { h: 0, s: 0, v: 0, ...(color as object), a: 1 } as HsvaColor; // oxlint-disable-line id-length\n }, [color]);\n\n const [hsva, setHsva] = useState<HsvaColor>(derivedHsva);\n\n const [format, setFormat] = useState<{\n label: string;\n value: string;\n }>({\n label: 'Hex',\n value: 'hex',\n });\n\n const isEyeDropperActive = 'EyeDropper' in window && shouldShowEyeDropper;\n\n const handleChange = (hsva: HsvaColor) => {\n setHsva(hsva);\n const hex = hsvaToHex(hsva);\n const rgb = hsvaToRgba(hsva);\n onChange({\n // used since typescript cannot infer the type of the color\n hex: `#${hex.split('#')[1]}`,\n hsva,\n rgb,\n });\n };\n\n return (\n <div\n ref={ref}\n className={classNames('ndl-color-picker', className)}\n style={style}\n >\n <Saturation\n hsva={hsva}\n className=\"ndl-color-picker-saturation\"\n onChange={(newColor) => {\n handleChange({ ...hsva, ...newColor, a: hsva.a }); // oxlint-disable-line id-length\n }}\n pointer={({ left, top, ...props }) => (\n <Pointer\n left={left?.toString()}\n top={top?.toString()}\n {...props}\n hsva={hsva}\n />\n )}\n radius={tokens.borderRadius['lg']}\n />\n <Swatch\n colors={swatches}\n hsva={hsva}\n onChange={(newColor) => {\n handleChange(newColor);\n }}\n />\n\n <div className=\"ndl-color-picker-hue-container\">\n {isEyeDropperActive && (\n <CleanIconButton\n size=\"small\"\n isActive={isEyeDropperActiveState}\n onClick={() => {\n setIsEyeDropperActiveState(true);\n // TODO: Remove the any casting when polyfiller is not needed anymore. https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper\n // Type assertion to handle the unknown type\n // oxlint-disable-next-line @typescript-eslint/no-explicit-any\n const eyeDropper = new (window as any).EyeDropper();\n eyeDropper\n .open()\n .then((result: { sRGBHex: string }) => {\n handleChange(hexToHsva(result.sRGBHex));\n })\n .catch((err: Error) => {\n console.error(err);\n })\n .finally(() => {\n setIsEyeDropperActiveState(false);\n });\n }}\n description=\"Pick color from the screen with eye dropper tool\"\n >\n <EyeDropperIconOutline />\n </CleanIconButton>\n )}\n <Hue\n className=\"ndl-color-picker-hue\"\n hue={hsva.h}\n onChange={(newHue) => {\n handleChange({ ...hsva, h: newHue.h }); // oxlint-disable-line id-length\n }}\n radius={tokens.borderRadius['lg']}\n pointer={(props) => (\n <Pointer\n {...props}\n hsva={{\n a: 1, // oxlint-disable-line id-length\n h: hsva.h, // oxlint-disable-line id-length\n s: 100, // oxlint-disable-line id-length\n v: 100, // oxlint-disable-line id-length\n }}\n />\n )}\n />\n </div>\n\n <div className=\"ndl-color-picker-inputs\">\n <Select\n size=\"small\"\n type=\"select\"\n ariaLabel=\"Color format\"\n style={{\n flexShrink: 0,\n }}\n selectProps={{\n isSearchable: false,\n menuPortalTarget: portalTarget,\n menuPosition: floatingStrategy,\n onChange: (newFormat) => {\n if (!newFormat) {\n return;\n }\n setFormat({\n label: newFormat.label,\n value: newFormat.value,\n });\n },\n options: [\n {\n label: 'Hex',\n value: 'hex',\n },\n {\n label: 'RGB',\n value: 'rgb',\n },\n ],\n value: { label: format.label, value: format.value },\n }}\n />\n {format.value === 'hex' && (\n <HexInput\n hsva={hsva}\n onChange={(newColor) => {\n handleChange(hexToHsva(newColor));\n }}\n />\n )}\n {format.value === 'rgb' && (\n <RgbInput\n hsva={hsva}\n onChange={(newColor) => {\n handleChange(hexToHsva(newColor));\n }}\n />\n )}\n </div>\n </div>\n );\n },\n);\n\nconst removeHashPrefix = (hex: string): string => hex.replace('#', '');\n\nconst HexInput = ({\n hsva,\n onChange,\n}: {\n hsva: HsvaColor;\n onChange: (newColor: string) => void;\n}) => {\n const [inputValue, setInputValue] = useState<string>(() =>\n removeHashPrefix(hsvaToHex(hsva)),\n );\n\n // Update input value when hsva changes from outside\n useEffect(() => {\n setInputValue(removeHashPrefix(hsvaToHex(hsva)));\n }, [hsva]);\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n const value = removeHashPrefix(event.target.value);\n\n // Always update the input value for immediate feedback\n setInputValue(value);\n\n // Check if the input is a valid hex color (only 6 characters)\n const isValidHex = /^[0-9A-Fa-f]{6}$/.test(value);\n\n if (isValidHex) {\n onChange(`#${value}`);\n }\n };\n\n const hexValue = hsvaToHex(hsva);\n\n return (\n <TextInput\n size=\"small\"\n value={inputValue}\n leadingElement={\n <div className=\"ndl-color-picker-hex-input-prefix\">#</div>\n }\n onChange={handleChange}\n isFluid\n htmlAttributes={{\n 'aria-label': 'Hex color code',\n maxLength: 6,\n onCopy: (event) => {\n event.preventDefault();\n navigator.clipboard.writeText(hexValue);\n },\n }}\n />\n );\n};\n\nconst RgbInput = ({\n hsva,\n onChange,\n}: {\n hsva: HsvaColor;\n onChange: (newColor: string) => void;\n}) => {\n const rgba = hsvaToRgba(hsva);\n const [rgbValues, setRgbValues] = useState({\n b: rgba.b, // oxlint-disable-line id-length\n g: rgba.g, // oxlint-disable-line id-length\n r: rgba.r, // oxlint-disable-line id-length\n });\n\n // Update input values when hsva changes from outside\n useEffect(() => {\n const newRgba = hsvaToRgba(hsva);\n setRgbValues({\n b: newRgba.b, // oxlint-disable-line id-length\n g: newRgba.g, // oxlint-disable-line id-length\n r: newRgba.r, // oxlint-disable-line id-length\n });\n }, [hsva]);\n\n const handleChange = (\n channel: 'r' \| 'g' \| 'b',\n event: React.ChangeEvent<HTMLInputElement>,\n ) => {\n const value = parseInt(event.target.value, 10);\n\n // Validate the input is a number between 0-255\n const validValue = isNaN(value) ? 0 : Math.max(0, Math.min(255, value));\n\n const newRgbValues = {\n ...rgbValues,\n [channel]: validValue,\n };\n\n setRgbValues(newRgbValues);\n\n // Convert RGB to hex and call onChange\n const hexColor = `#${newRgbValues.r.toString(16).padStart(2, '0')}${newRgbValues.g.toString(16).padStart(2, '0')}${newRgbValues.b.toString(16).padStart(2, '0')}`;\n onChange(hexColor);\n };\n\n return (\n <div className=\"ndl-color-picker-rgb-inputs\">\n <TextInput\n size=\"small\"\n className=\"ndl-color-picker-rgb-input\"\n value={rgbValues.r.toString()}\n onChange={(event) => handleChange('r', event)}\n htmlAttributes={{\n 'aria-label': 'Red',\n max: '255',\n min: '0',\n type: 'number',\n }}\n />\n <TextInput\n size=\"small\"\n className=\"ndl-color-picker-rgb-input\"\n value={rgbValues.g.toString()}\n onChange={(event) => handleChange('g', event)}\n htmlAttributes={{\n 'aria-label': 'Green',\n max: '255',\n min: '0',\n type: 'number',\n }}\n />\n <TextInput\n size=\"small\"\n className=\"ndl-color-picker-rgb-input\"\n value={rgbValues.b.toString()}\n onChange={(event) => handleChange('b', event)}\n htmlAttributes={{\n 'aria-label': 'Blue',\n max: '255',\n min: '0',\n type: 'number',\n }}\n />\n </div>\n );\n};\n\nconst Swatch = ({\n colors,\n onChange,\n hsva,\n}: {\n colors: (HsvaColor \| RgbaColor \| HexColor)[];\n hsva: HsvaColor;\n onChange: (newColor: HsvaColor) => void;\n}) => {\n return (\n <div className=\"ndl-color-picker-swatch\">\n {colors.map((color) => {\n const hexColor =\n typeof color === 'string'\n ? color\n : typeof color === 'object' && 'r' in color\n ? rgbaToHex(color)\n : hsvaToHex(color);\n const hsvaColor =\n typeof color === 'string'\n ? hexToHsva(color)\n : 'r' in color\n ? rgbaToHsva(color)\n : color;\n\n const isActive =\n hsva.h === hsvaColor.h &&\n hsva.s === hsvaColor.s &&\n hsva.v === hsvaColor.v;\n\n return (\n <button\n type=\"button\"\n key={hexColor}\n aria-label={hexColor}\n className={classNames('ndl-color-picker-swatch-color', {\n 'ndl-color-picker-swatch-color-active': isActive,\n })}\n style={{ backgroundColor: hsvaToHex(hsvaColor) }}\n onClick={() => onChange(hsvaColor)}\n />\n );\n })}\n </div>\n );\n};\nconst Pointer = ({\n prefixCls,\n left,\n top,\n hsva,\n}: PointerProps & { hsva: HsvaColor }) => {\n const rgba = hsvaToRgba(hsva);\n return (\n <div\n style={{\n backgroundColor: `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`,\n left,\n top,\n }}\n className={classNames(prefixCls, 'ndl-color-picker-pointer')}\n />\n );\n};\n"]}
1	+ {"version":3,"file":"ColorPicker.js","sourceRoot":"","sources":["../../../src/color-picker/ColorPicker.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 'eyedropper-polyfill';\n\nimport { tokens } from '@neo4j-ndl/base';\nimport {\n type HexColor,\n hexToHsva,\n type HsvaColor,\n hsvaToHex,\n hsvaToRgba,\n Hue,\n type PointerProps,\n type RgbaColor,\n rgbaToHex,\n rgbaToHsva,\n Saturation,\n validHex,\n} from '@uiw/react-color';\nimport classNames from 'classnames';\nimport { forwardRef, useEffect, useMemo, useState } from 'react';\n\nimport { CleanIconButton } from '../clean-icon-button';\nimport { EyeDropperIconOutline } from '../icons/generated/heroIcons/EyeDropperIconOutline';\nimport { Select } from '../select';\nimport { TextInput } from '../text-input';\n\n/\n @remarks\n * By default the `swatches` prop is set to the available graph colors (`tokens.graph`) from `@neo4j-ndl/base`.\n \n @remarks\n * Where `HsvaColor`, `RgbaColor`, and `HexColor` types are from `@uiw/react-color`, and represent different color formats:\n \n - `HexColor`: A string in the format `#RRGGBB` (e.g., `#ff0000`).\n * - `RgbaColor`: An object with numeric properties `{ r, g, b, a }` for red, green, blue (0–255), and alpha (0–1).\n * - `HsvaColor`: An object with numeric properties `{ h, s, v, a }` for hue (0–360), saturation (0–100), value (0–100), and alpha (0–1).\n \n Visit [react-color](https://uiwjs.github.io/react-color/#/) for more information.\n /\ntype ColorPickerProps = {\n /* The current color value. Can be provided in HSVA, RGBA, or Hex format. The component will automatically convert between formats as needed. /\n color: HsvaColor \| RgbaColor \| HexColor;\n /* Optional array of predefined color swatches for quick selection. Each swatch can be in HSVA, RGBA, or Hex format. /\n swatches?: (HsvaColor \| RgbaColor \| HexColor)[];\n /* Whether to display the eye dropper tool that allows users to sample colors from anywhere on the screen. /\n shouldShowEyeDropper?: boolean;\n /* Callback function triggered when the color value changes. Receives an object containing the new color in all three formats (hex, rgb, hsva) for convenience. /\n onChange: (newColor: {\n hex: HexColor;\n rgb: RgbaColor;\n hsva: HsvaColor;\n }) => void;\n /* Additional class name to apply to the root color picker container. /\n className?: string;\n /* Additional inline styles to apply to the root color picker container. /\n style?: React.CSSProperties;\n\n /* The target element to portal the menu to. If not provided, the menu will not be portaled. /\n portalTarget?: HTMLElement \| null;\n /* The floating strategy to use for the menu. If not provided, the menu will be positioned absolutely. */\n floatingStrategy?: 'absolute' \| 'fixed';\n};\n\nexport const ColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(\n function ColorPicker(\n {\n color,\n onChange,\n swatches = Object.values(tokens.graph).filter(validHex),\n shouldShowEyeDropper = true,\n className,\n style,\n portalTarget,\n floatingStrategy = 'absolute',\n },\n ref,\n ) {\n const [isEyeDropperActiveState, setIsEyeDropperActiveState] =\n useState(false);\n\n const derivedHsva = useMemo(() => {\n if (typeof color === 'string') {\n return hexToHsva(color);\n }\n if (typeof color === 'object' && 'r' in color) {\n return rgbaToHsva(color);\n }\n return { h: 0, s: 0, v: 0, ...(color as object), a: 1 } as HsvaColor; // oxlint-disable-line id-length\n }, [color]);\n\n const [hsva, setHsva] = useState<HsvaColor>(derivedHsva);\n\n const [format, setFormat] = useState<{\n label: string;\n value: string;\n }>({\n label: 'Hex',\n value: 'hex',\n });\n\n const isEyeDropperActive = 'EyeDropper' in window && shouldShowEyeDropper;\n\n const handleChange = (hsva: HsvaColor) => {\n setHsva(hsva);\n const hex = hsvaToHex(hsva);\n const rgb = hsvaToRgba(hsva);\n onChange({\n // used since typescript cannot infer the type of the color\n hex: `#${hex.split('#')[1]}`,\n hsva,\n rgb,\n });\n };\n\n return (\n <div\n ref={ref}\n className={classNames('ndl-color-picker', className)}\n style={style}\n >\n <Saturation\n hsva={hsva}\n className=\"ndl-color-picker-saturation\"\n onChange={(newColor) => {\n handleChange({ ...hsva, ...newColor, a: hsva.a }); // oxlint-disable-line id-length\n }}\n pointer={({ left, top, ...props }) => (\n <Pointer\n left={left?.toString()}\n top={top?.toString()}\n {...props}\n hsva={hsva}\n />\n )}\n radius={tokens.borderRadius['lg']}\n />\n <Swatch\n colors={swatches}\n hsva={hsva}\n onChange={(newColor) => {\n handleChange(newColor);\n }}\n />\n\n <div className=\"ndl-color-picker-hue-container\">\n {isEyeDropperActive && (\n <CleanIconButton\n size=\"small\"\n isActive={isEyeDropperActiveState}\n onClick={() => {\n setIsEyeDropperActiveState(true);\n const eyeDropper = new window.EyeDropper();\n eyeDropper\n .open()\n .then((result: { sRGBHex: string }) => {\n handleChange(hexToHsva(result.sRGBHex));\n })\n .catch((err: Error) => {\n console.error(err);\n })\n .finally(() => {\n setIsEyeDropperActiveState(false);\n });\n }}\n description=\"Pick color from the screen with eye dropper tool\"\n >\n <EyeDropperIconOutline />\n </CleanIconButton>\n )}\n <Hue\n className=\"ndl-color-picker-hue\"\n hue={hsva.h}\n onChange={(newHue) => {\n handleChange({ ...hsva, h: newHue.h }); // oxlint-disable-line id-length\n }}\n radius={tokens.borderRadius['lg']}\n pointer={(props) => (\n <Pointer\n {...props}\n hsva={{\n a: 1, // oxlint-disable-line id-length\n h: hsva.h, // oxlint-disable-line id-length\n s: 100, // oxlint-disable-line id-length\n v: 100, // oxlint-disable-line id-length\n }}\n />\n )}\n />\n </div>\n\n <div className=\"ndl-color-picker-inputs\">\n <Select\n size=\"small\"\n type=\"select\"\n ariaLabel=\"Color format\"\n style={{\n flexShrink: 0,\n }}\n selectProps={{\n isSearchable: false,\n menuPortalTarget: portalTarget,\n menuPosition: floatingStrategy,\n onChange: (newFormat) => {\n if (!newFormat) {\n return;\n }\n setFormat({\n label: newFormat.label,\n value: newFormat.value,\n });\n },\n options: [\n {\n label: 'Hex',\n value: 'hex',\n },\n {\n label: 'RGB',\n value: 'rgb',\n },\n ],\n value: { label: format.label, value: format.value },\n }}\n />\n {format.value === 'hex' && (\n <HexInput\n hsva={hsva}\n onChange={(newColor) => {\n handleChange(hexToHsva(newColor));\n }}\n />\n )}\n {format.value === 'rgb' && (\n <RgbInput\n hsva={hsva}\n onChange={(newColor) => {\n handleChange(hexToHsva(newColor));\n }}\n />\n )}\n </div>\n </div>\n );\n },\n);\n\nconst removeHashPrefix = (hex: string): string => hex.replace('#', '');\n\nconst HexInput = ({\n hsva,\n onChange,\n}: {\n hsva: HsvaColor;\n onChange: (newColor: string) => void;\n}) => {\n const [inputValue, setInputValue] = useState<string>(() =>\n removeHashPrefix(hsvaToHex(hsva)),\n );\n\n // Update input value when hsva changes from outside\n useEffect(() => {\n setInputValue(removeHashPrefix(hsvaToHex(hsva)));\n }, [hsva]);\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n const value = removeHashPrefix(event.target.value);\n\n // Always update the input value for immediate feedback\n setInputValue(value);\n\n // Check if the input is a valid hex color (only 6 characters)\n const isValidHex = /^[0-9A-Fa-f]{6}$/.test(value);\n\n if (isValidHex) {\n onChange(`#${value}`);\n }\n };\n\n const hexValue = hsvaToHex(hsva);\n\n return (\n <TextInput\n size=\"small\"\n value={inputValue}\n leadingElement={\n <div className=\"ndl-color-picker-hex-input-prefix\">#</div>\n }\n onChange={handleChange}\n isFluid\n htmlAttributes={{\n 'aria-label': 'Hex color code',\n maxLength: 6,\n onCopy: (event) => {\n event.preventDefault();\n navigator.clipboard.writeText(hexValue);\n },\n }}\n />\n );\n};\n\nconst RgbInput = ({\n hsva,\n onChange,\n}: {\n hsva: HsvaColor;\n onChange: (newColor: string) => void;\n}) => {\n const rgba = hsvaToRgba(hsva);\n const [rgbValues, setRgbValues] = useState({\n b: rgba.b, // oxlint-disable-line id-length\n g: rgba.g, // oxlint-disable-line id-length\n r: rgba.r, // oxlint-disable-line id-length\n });\n\n // Update input values when hsva changes from outside\n useEffect(() => {\n const newRgba = hsvaToRgba(hsva);\n setRgbValues({\n b: newRgba.b, // oxlint-disable-line id-length\n g: newRgba.g, // oxlint-disable-line id-length\n r: newRgba.r, // oxlint-disable-line id-length\n });\n }, [hsva]);\n\n const handleChange = (\n channel: 'r' \| 'g' \| 'b',\n event: React.ChangeEvent<HTMLInputElement>,\n ) => {\n const value = parseInt(event.target.value, 10);\n\n // Validate the input is a number between 0-255\n const validValue = isNaN(value) ? 0 : Math.max(0, Math.min(255, value));\n\n const newRgbValues = {\n ...rgbValues,\n [channel]: validValue,\n };\n\n setRgbValues(newRgbValues);\n\n // Convert RGB to hex and call onChange\n const hexColor = `#${newRgbValues.r.toString(16).padStart(2, '0')}${newRgbValues.g.toString(16).padStart(2, '0')}${newRgbValues.b.toString(16).padStart(2, '0')}`;\n onChange(hexColor);\n };\n\n return (\n <div className=\"ndl-color-picker-rgb-inputs\">\n <TextInput\n size=\"small\"\n className=\"ndl-color-picker-rgb-input\"\n value={rgbValues.r.toString()}\n onChange={(event) => handleChange('r', event)}\n htmlAttributes={{\n 'aria-label': 'Red',\n max: '255',\n min: '0',\n type: 'number',\n }}\n />\n <TextInput\n size=\"small\"\n className=\"ndl-color-picker-rgb-input\"\n value={rgbValues.g.toString()}\n onChange={(event) => handleChange('g', event)}\n htmlAttributes={{\n 'aria-label': 'Green',\n max: '255',\n min: '0',\n type: 'number',\n }}\n />\n <TextInput\n size=\"small\"\n className=\"ndl-color-picker-rgb-input\"\n value={rgbValues.b.toString()}\n onChange={(event) => handleChange('b', event)}\n htmlAttributes={{\n 'aria-label': 'Blue',\n max: '255',\n min: '0',\n type: 'number',\n }}\n />\n </div>\n );\n};\n\nconst Swatch = ({\n colors,\n onChange,\n hsva,\n}: {\n colors: (HsvaColor \| RgbaColor \| HexColor)[];\n hsva: HsvaColor;\n onChange: (newColor: HsvaColor) => void;\n}) => {\n return (\n <div className=\"ndl-color-picker-swatch\">\n {colors.map((color) => {\n const hexColor =\n typeof color === 'string'\n ? color\n : typeof color === 'object' && 'r' in color\n ? rgbaToHex(color)\n : hsvaToHex(color);\n const hsvaColor =\n typeof color === 'string'\n ? hexToHsva(color)\n : 'r' in color\n ? rgbaToHsva(color)\n : color;\n\n const isActive =\n hsva.h === hsvaColor.h &&\n hsva.s === hsvaColor.s &&\n hsva.v === hsvaColor.v;\n\n return (\n <button\n type=\"button\"\n key={hexColor}\n aria-label={hexColor}\n className={classNames('ndl-color-picker-swatch-color', {\n 'ndl-color-picker-swatch-color-active': isActive,\n })}\n style={{ backgroundColor: hsvaToHex(hsvaColor) }}\n onClick={() => onChange(hsvaColor)}\n />\n );\n })}\n </div>\n );\n};\nconst Pointer = ({\n prefixCls,\n left,\n top,\n hsva,\n}: PointerProps & { hsva: HsvaColor }) => {\n const rgba = hsvaToRgba(hsva);\n return (\n <div\n style={{\n backgroundColor: `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`,\n left,\n top,\n }}\n className={classNames(prefixCls, 'ndl-color-picker-pointer')}\n />\n );\n};\n"]}

package/lib/cjs/color-picker/stories/color-picker-dialog.story.js CHANGED Viewed

@@ -34,7 +34,7 @@ const Component = () => {
         g: 0, // oxlint-disable-line id-length
         r: 0, // oxlint-disable-line id-length
     });
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-items-center n-justify-centern-w-full", children: [(0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: handleClick, htmlAttributes: { 'aria-haspopup': 'dialog' }, children: "Open Dialog" }), (0, jsx_runtime_1.jsxs)(react_1.Dialog, { onClose: handleClose, isOpen: isOpen, children: [(0, jsx_runtime_1.jsx)(react_1.Dialog.Header, { children: "Header" }), (0, jsx_runtime_1.jsx)(react_1.Dialog.Content, { className: "n-max-h-96 n-overflow-y-auto", children: (0, jsx_runtime_1.jsx)(react_1.ColorPicker, { color: color, onChange: (newColor) => setColor(newColor.rgb), floatingStrategy: "fixed" }) })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-centern-w-full", children: [(0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: handleClick, htmlAttributes: { 'aria-haspopup': 'dialog' }, children: "Open Dialog" }), (0, jsx_runtime_1.jsxs)(react_1.Dialog, { onClose: handleClose, isOpen: isOpen, children: [(0, jsx_runtime_1.jsx)(react_1.Dialog.Header, { children: "Header" }), (0, jsx_runtime_1.jsx)(react_1.Dialog.Content, { className: "max-h-96 overflow-y-auto", children: (0, jsx_runtime_1.jsx)(react_1.ColorPicker, { color: color, onChange: (newColor) => setColor(newColor.rgb), floatingStrategy: "fixed" }) })] })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=color-picker-dialog.story.js.map

package/lib/cjs/color-picker/stories/color-picker-dialog.story.js.map CHANGED Viewed

	@@ -1 +1 @@
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,mDAAiD;AAEjD,4CAAqE;AACrE,iCAAiC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAU,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,IAAA,gBAAQ,EAAC;QACjC,CAAC,EAAE,CAAC,EAAE,gCAAgC;QACtC,CAAC,EAAE,CAAC,EAAE,gCAAgC;QACtC,CAAC,EAAE,CAAC,EAAE,gCAAgC;QACtC,CAAC,EAAE,CAAC,EAAE,gCAAgC;KACvC,CAAC,CAAC;IAEH,OAAO,CACL,iCAAK,SAAS,EAAC,~~gDAAgD~~,~~aAC7D~~,uBAAC,oBAAY,IACX,OAAO,EAAE,WAAW,EACpB,cAAc,EAAE,EAAE,eAAe,EAAE,QAAQ,EAAE,4BAGhC,EACf,wBAAC,cAAM,IAAC,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,aAC1C,uBAAC,cAAM,CAAC,MAAM,yBAAuB,EACrC,uBAAC,cAAM,CAAC,OAAO,IAAC,SAAS,EAAC,~~8BAA8B~~,~~YACtD~~,uBAAC,mBAAW,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,kBAAe,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, // oxlint-disable-line id-length\n b: 0, // oxlint-disable-line id-length\n g: 0, // oxlint-disable-line id-length\n r: 0, // oxlint-disable-line id-length\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"]}
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,mDAAiD;AAEjD,4CAAqE;AACrE,iCAAiC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAU,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,IAAA,gBAAQ,EAAC;QACjC,CAAC,EAAE,CAAC,EAAE,gCAAgC;QACtC,CAAC,EAAE,CAAC,EAAE,gCAAgC;QACtC,CAAC,EAAE,CAAC,EAAE,gCAAgC;QACtC,CAAC,EAAE,CAAC,EAAE,gCAAgC;KACvC,CAAC,CAAC;IAEH,OAAO,CACL,iCAAK,SAAS,EAAC,0CAA0C,aACvD,uBAAC,oBAAY,IACX,OAAO,EAAE,WAAW,EACpB,cAAc,EAAE,EAAE,eAAe,EAAE,QAAQ,EAAE,4BAGhC,EACf,wBAAC,cAAM,IAAC,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,aAC1C,uBAAC,cAAM,CAAC,MAAM,yBAAuB,EACrC,uBAAC,cAAM,CAAC,OAAO,IAAC,SAAS,EAAC,0BAA0B,YAClD,uBAAC,mBAAW,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,kBAAe,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, // oxlint-disable-line id-length\n b: 0, // oxlint-disable-line id-length\n g: 0, // oxlint-disable-line id-length\n r: 0, // oxlint-disable-line id-length\n });\n\n return (\n <div className=\"flex items-center 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=\"max-h-96 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/cjs/color-picker/stories/color-picker-popover.story.js CHANGED Viewed

@@ -24,7 +24,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
 const react_1 = require("@neo4j-ndl/react");
 const Component = () => {
-    return ((0, jsx_runtime_1.jsxs)(react_1.Popover, { children: [(0, jsx_runtime_1.jsx)(react_1.Popover.Trigger, { hasButtonWrapper: true, children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { children: "Open Popover" }) }), (0, jsx_runtime_1.jsxs)(react_1.Popover.Content, { className: "n-overflow-y-auto n-overflow-x-hidden n-p-4 n-max-h-64", children: ["Popover content", (0, jsx_runtime_1.jsx)(react_1.ColorPicker, { color: "#ff0000", onChange: () => {
+    return ((0, jsx_runtime_1.jsxs)(react_1.Popover, { children: [(0, jsx_runtime_1.jsx)(react_1.Popover.Trigger, { hasButtonWrapper: true, children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { children: "Open Popover" }) }), (0, jsx_runtime_1.jsxs)(react_1.Popover.Content, { className: "overflow-y-auto overflow-x-hidden p-4 max-h-64", children: ["Popover content", (0, jsx_runtime_1.jsx)(react_1.ColorPicker, { color: "#ff0000", onChange: () => {
                             console.info('color changed');
                         }, floatingStrategy: "fixed", portalTarget: document.body })] })] }));
 };

package/lib/cjs/color-picker/stories/color-picker-popover.story.js.map CHANGED Viewed

	@@ -1 +1 @@
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,mDAAiD;AAEjD,4CAAsE;AAEtE,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,wBAAC,eAAO,eACN,uBAAC,eAAO,CAAC,OAAO,IAAC,gBAAgB,kBAC/B,uBAAC,oBAAY,+BAA4B,GACzB,EAClB,wBAAC,eAAO,CAAC,OAAO,IAAC,SAAS,EAAC,~~wDAAwD~~,~~gCAEjF~~,uBAAC,mBAAW,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,kBAAe,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"]}
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,mDAAiD;AAEjD,4CAAsE;AAEtE,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,wBAAC,eAAO,eACN,uBAAC,eAAO,CAAC,OAAO,IAAC,gBAAgB,kBAC/B,uBAAC,oBAAY,+BAA4B,GACzB,EAClB,wBAAC,eAAO,CAAC,OAAO,IAAC,SAAS,EAAC,gDAAgD,gCAEzE,uBAAC,mBAAW,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,kBAAe,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=\"overflow-y-auto overflow-x-hidden p-4 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/cjs/combobox/stories/combobox-action-on-select.story.js CHANGED Viewed

@@ -57,7 +57,7 @@ const Component = () => {
     const [terminalValue, setTerminalValue] = (0, react_2.useState)('');
     const [searchValue, setSearchValue] = (0, react_2.useState)('');
     const textAreaRef = (0, react_2.useRef)(null);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-gap-token-2 n-items-center", children: [(0, jsx_runtime_1.jsx)(react_1.TextArea, { ref: textAreaRef, label: "Command input", value: terminalValue, htmlAttributes: {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex gap-token-2 items-center", children: [(0, jsx_runtime_1.jsx)(react_1.TextArea, { ref: textAreaRef, label: "Command input", value: terminalValue, htmlAttributes: {
                     onChange: (event) => setTerminalValue(event.target.value),
                     rows: 5,
                 }, helpText: "Use the button below to search for a command." }), (0, jsx_runtime_1.jsx)(react_1.Combobox, { label: "Insert command", options: commands, searchPlaceholder: "Search commands", searchValue: searchValue, onSearchChange: setSearchValue,

package/lib/cjs/combobox/stories/combobox-action-on-select.story.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"combobox-action-on-select.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-action-on-select.story.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAkE;AAClE,kDAAgE;AAChE,iCAAyC;AAEzC,MAAM,QAAQ,GAAG;IACf;QACE,WAAW,EAAE,gCAAgC;QAC7C,KAAK,EAAE,aAAa;QACpB,KAAK,EAAE,6BAA6B;KACrC;IACD;QACE,WAAW,EAAE,mDAAmD;QAChE,KAAK,EAAE,kBAAkB;QACzB,KAAK,EAAE,gCAAgC;KACxC;IACD;QACE,WAAW,EAAE,gDAAgD;QAC7D,KAAK,EAAE,cAAc;QACrB,KAAK,EAAE,cAAc;KACtB;CACF,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,IAAA,gBAAQ,EAAC,EAAE,CAAC,CAAC;IACvD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,IAAA,gBAAQ,EAAC,EAAE,CAAC,CAAC;IACnD,MAAM,WAAW,GAAG,IAAA,cAAM,EAAsB,IAAI,CAAC,CAAC;IACtD,OAAO,CACL,iCAAK,SAAS,EAAC,~~qCAAqC~~,~~aAClD,~~uBAAC,gBAAQ,IACP,GAAG,EAAE,WAAW,EAChB,KAAK,EAAC,eAAe,EACrB,KAAK,EAAE,aAAa,EACpB,cAAc,EAAE;oBACd,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,gBAAgB,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;oBACzD,IAAI,EAAE,CAAC;iBACR,EACD,QAAQ,EAAC,+CAA+C,GACxD,EACF,uBAAC,gBAAQ,IACP,KAAK,EAAC,gBAAgB,EACtB,OAAO,EAAE,QAAQ,EACjB,iBAAiB,EAAC,iBAAiB,EACnC,WAAW,EAAE,WAAW,EACxB,cAAc,EAAE,cAAc;gBAC9B,kEAAkE;gBAClE,yEAAyE;gBACzE,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,CAAC,OAAO,EAAE,EAAE;;oBACpB,IAAI,OAAO,KAAK,IAAI,EAAE,CAAC;wBACrB,OAAO;oBACT,CAAC;oBAED,gBAAgB,CAAC,CAAC,YAAY,EAAE,EAAE,CAChC,YAAY,KAAK,EAAE;wBACjB,CAAC,CAAC,OAAO,CAAC,KAAK;wBACf,CAAC,CAAC,GAAG,YAAY,KAAK,OAAO,CAAC,KAAK,EAAE,CACxC,CAAC;oBACF,cAAc,CAAC,EAAE,CAAC,CAAC;oBACnB,MAAA,WAAW,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;gBAC/B,CAAC,EACD,aAAa,EAAE,CAAC,EAAwB,EAAE,EAAE;wBAA5B,EAAE,GAAG,OAAmB,EAAd,YAAY,cAAtB,OAAwB,CAAF;oBAAO,OAAA,CAC3C,uBAAC,kBAAU,IACT,GAAG,EAAE,GAAmC,EACxC,WAAW,EAAC,gBAAgB,EAC5B,cAAc,EAAE,YAAY,YAE5B,uBAAC,8BAAsB,KAAG,GACf,CACd,CAAA;iBAAA,GACD,IACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,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 { Combobox, IconButton, TextArea } from '@neo4j-ndl/react';\nimport { CommandLineIconOutline } from '@neo4j-ndl/react/icons';\nimport { useRef, useState } from 'react';\n\nconst commands = [\n {\n description: 'Return a small sample of nodes',\n label: 'Match nodes',\n value: 'MATCH (n) RETURN n LIMIT 25',\n },\n {\n description: 'Show the labels and relationships in the database',\n label: 'Visualize schema',\n value: 'CALL db.schema.visualization()',\n },\n {\n description: 'List the indexes available to the current user',\n label: 'Show indexes',\n value: 'SHOW INDEXES',\n },\n];\n\nconst Component = () => {\n const [terminalValue, setTerminalValue] = useState('');\n const [searchValue, setSearchValue] = useState('');\n const textAreaRef = useRef<HTMLTextAreaElement>(null);\n return (\n <div className=\"n-flex n-gap-token-2 n-items-center\">\n <TextArea\n ref={textAreaRef}\n label=\"Command input\"\n value={terminalValue}\n htmlAttributes={{\n onChange: (event) => setTerminalValue(event.target.value),\n rows: 5,\n }}\n helpText=\"Use the button below to search for a command.\"\n />\n <Combobox\n label=\"Insert command\"\n options={commands}\n searchPlaceholder=\"Search commands\"\n searchValue={searchValue}\n onSearchChange={setSearchValue}\n // The picker activates an option but never keeps it as its value.\n // Keeping the controlled value empty avoids a persistent selected state.\n value={null}\n onChange={(command) => {\n if (command === null) {\n return;\n }\n\n setTerminalValue((currentValue) =>\n currentValue === ''\n ? command.value\n : `${currentValue}\\n${command.value}`,\n );\n setSearchValue('');\n textAreaRef.current?.focus();\n }}\n renderTrigger={({ ref, ...triggerProps }) => (\n <IconButton\n ref={ref as React.Ref<HTMLButtonElement>}\n description=\"Insert command\"\n htmlAttributes={triggerProps}\n >\n <CommandLineIconOutline />\n </IconButton>\n )}\n />\n </div>\n );\n};\n\nexport default Component;\n"]}
1	+ {"version":3,"file":"combobox-action-on-select.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-action-on-select.story.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAkE;AAClE,kDAAgE;AAChE,iCAAyC;AAEzC,MAAM,QAAQ,GAAG;IACf;QACE,WAAW,EAAE,gCAAgC;QAC7C,KAAK,EAAE,aAAa;QACpB,KAAK,EAAE,6BAA6B;KACrC;IACD;QACE,WAAW,EAAE,mDAAmD;QAChE,KAAK,EAAE,kBAAkB;QACzB,KAAK,EAAE,gCAAgC;KACxC;IACD;QACE,WAAW,EAAE,gDAAgD;QAC7D,KAAK,EAAE,cAAc;QACrB,KAAK,EAAE,cAAc;KACtB;CACF,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,IAAA,gBAAQ,EAAC,EAAE,CAAC,CAAC;IACvD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,IAAA,gBAAQ,EAAC,EAAE,CAAC,CAAC;IACnD,MAAM,WAAW,GAAG,IAAA,cAAM,EAAsB,IAAI,CAAC,CAAC;IACtD,OAAO,CACL,iCAAK,SAAS,EAAC,+BAA+B,aAC5C,uBAAC,gBAAQ,IACP,GAAG,EAAE,WAAW,EAChB,KAAK,EAAC,eAAe,EACrB,KAAK,EAAE,aAAa,EACpB,cAAc,EAAE;oBACd,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,gBAAgB,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;oBACzD,IAAI,EAAE,CAAC;iBACR,EACD,QAAQ,EAAC,+CAA+C,GACxD,EACF,uBAAC,gBAAQ,IACP,KAAK,EAAC,gBAAgB,EACtB,OAAO,EAAE,QAAQ,EACjB,iBAAiB,EAAC,iBAAiB,EACnC,WAAW,EAAE,WAAW,EACxB,cAAc,EAAE,cAAc;gBAC9B,kEAAkE;gBAClE,yEAAyE;gBACzE,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,CAAC,OAAO,EAAE,EAAE;;oBACpB,IAAI,OAAO,KAAK,IAAI,EAAE,CAAC;wBACrB,OAAO;oBACT,CAAC;oBAED,gBAAgB,CAAC,CAAC,YAAY,EAAE,EAAE,CAChC,YAAY,KAAK,EAAE;wBACjB,CAAC,CAAC,OAAO,CAAC,KAAK;wBACf,CAAC,CAAC,GAAG,YAAY,KAAK,OAAO,CAAC,KAAK,EAAE,CACxC,CAAC;oBACF,cAAc,CAAC,EAAE,CAAC,CAAC;oBACnB,MAAA,WAAW,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;gBAC/B,CAAC,EACD,aAAa,EAAE,CAAC,EAAwB,EAAE,EAAE;wBAA5B,EAAE,GAAG,OAAmB,EAAd,YAAY,cAAtB,OAAwB,CAAF;oBAAO,OAAA,CAC3C,uBAAC,kBAAU,IACT,GAAG,EAAE,GAAmC,EACxC,WAAW,EAAC,gBAAgB,EAC5B,cAAc,EAAE,YAAY,YAE5B,uBAAC,8BAAsB,KAAG,GACf,CACd,CAAA;iBAAA,GACD,IACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,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 { Combobox, IconButton, TextArea } from '@neo4j-ndl/react';\nimport { CommandLineIconOutline } from '@neo4j-ndl/react/icons';\nimport { useRef, useState } from 'react';\n\nconst commands = [\n {\n description: 'Return a small sample of nodes',\n label: 'Match nodes',\n value: 'MATCH (n) RETURN n LIMIT 25',\n },\n {\n description: 'Show the labels and relationships in the database',\n label: 'Visualize schema',\n value: 'CALL db.schema.visualization()',\n },\n {\n description: 'List the indexes available to the current user',\n label: 'Show indexes',\n value: 'SHOW INDEXES',\n },\n];\n\nconst Component = () => {\n const [terminalValue, setTerminalValue] = useState('');\n const [searchValue, setSearchValue] = useState('');\n const textAreaRef = useRef<HTMLTextAreaElement>(null);\n return (\n <div className=\"flex gap-token-2 items-center\">\n <TextArea\n ref={textAreaRef}\n label=\"Command input\"\n value={terminalValue}\n htmlAttributes={{\n onChange: (event) => setTerminalValue(event.target.value),\n rows: 5,\n }}\n helpText=\"Use the button below to search for a command.\"\n />\n <Combobox\n label=\"Insert command\"\n options={commands}\n searchPlaceholder=\"Search commands\"\n searchValue={searchValue}\n onSearchChange={setSearchValue}\n // The picker activates an option but never keeps it as its value.\n // Keeping the controlled value empty avoids a persistent selected state.\n value={null}\n onChange={(command) => {\n if (command === null) {\n return;\n }\n\n setTerminalValue((currentValue) =>\n currentValue === ''\n ? command.value\n : `${currentValue}\\n${command.value}`,\n );\n setSearchValue('');\n textAreaRef.current?.focus();\n }}\n renderTrigger={({ ref, ...triggerProps }) => (\n <IconButton\n ref={ref as React.Ref<HTMLButtonElement>}\n description=\"Insert command\"\n htmlAttributes={triggerProps}\n >\n <CommandLineIconOutline />\n </IconButton>\n )}\n />\n </div>\n );\n};\n\nexport default Component;\n"]}

package/lib/cjs/combobox/stories/combobox-actions.story.js CHANGED Viewed

@@ -52,7 +52,7 @@ const options = [
     { label: 'Digital twin', value: 'digital-twin' },
 ];
 const Component = () => {
-    return ((0, jsx_runtime_1.jsx)("div", { className: "n-flex n-flex-col n-gap-token-4", children: (0, jsx_runtime_1.jsx)(react_1.Combobox, { label: "Project", placeholder: "Select project", searchPlaceholder: "Search projects", options: options,
+    return ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-token-4", children: (0, jsx_runtime_1.jsx)(react_1.Combobox, { label: "Project", placeholder: "Select project", searchPlaceholder: "Search projects", options: options,
             // An action never becomes part of the value. It runs, the panel closes,
             // and the selection is left as it was, which is what makes it usable for
             // leaving the combobox entirely.

package/lib/cjs/combobox/stories/combobox-actions.story.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"combobox-actions.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-actions.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA4C;AAC5C,kDAAyD;AAEzD,MAAM,OAAO,GAAG;IACd,EAAE,KAAK,EAAE,uBAAuB,EAAE,KAAK,EAAE,uBAAuB,EAAE;IAClE,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,EAAE;IACtD,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,cAAc,EAAE;IAChD,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,cAAc,EAAE;IAChD,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,EAAE;IACtD,EAAE,KAAK,EAAE,kBAAkB,EAAE,KAAK,EAAE,kBAAkB,EAAE;IACxD,EAAE,KAAK,EAAE,qBAAqB,EAAE,KAAK,EAAE,qBAAqB,EAAE;IAC9D,EAAE,KAAK,EAAE,wBAAwB,EAAE,KAAK,EAAE,wBAAwB,EAAE;IACpE,EAAE,KAAK,EAAE,yBAAyB,EAAE,KAAK,EAAE,yBAAyB,EAAE;IACtE,EAAE,KAAK,EAAE,oBAAoB,EAAE,KAAK,EAAE,oBAAoB,EAAE;IAC5D,EAAE,KAAK,EAAE,uBAAuB,EAAE,KAAK,EAAE,uBAAuB,EAAE;IAClE,EAAE,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAE,gBAAgB,EAAE;IACpD,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,cAAc,EAAE;IAChD,EAAE,KAAK,EAAE,mBAAmB,EAAE,KAAK,EAAE,mBAAmB,EAAE;IAC1D,EAAE,KAAK,EAAE,mBAAmB,EAAE,KAAK,EAAE,mBAAmB,EAAE;IAC1D,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,EAAE;IACtD,EAAE,KAAK,EAAE,uBAAuB,EAAE,KAAK,EAAE,uBAAuB,EAAE;IAClE,EAAE,KAAK,EAAE,oBAAoB,EAAE,KAAK,EAAE,oBAAoB,EAAE;IAC5D,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,EAAE;IACtD,EAAE,KAAK,EAAE,yBAAyB,EAAE,KAAK,EAAE,yBAAyB,EAAE;IACtE,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,EAAE;IACtD,EAAE,KAAK,EAAE,kBAAkB,EAAE,KAAK,EAAE,kBAAkB,EAAE;IACxD,EAAE,KAAK,EAAE,oBAAoB,EAAE,KAAK,EAAE,oBAAoB,EAAE;IAC5D,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,EAAE;IACtD,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,cAAc,EAAE;CACjD,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,gCAAK,SAAS,EAAC,~~iCAAiC~~,~~YAC9C~~,uBAAC,gBAAQ,IACP,KAAK,EAAC,SAAS,EACf,WAAW,EAAC,gBAAgB,EAC5B,iBAAiB,EAAC,iBAAiB,EACnC,OAAO,EAAE,OAAO;YAChB,wEAAwE;YACxE,yEAAyE;YACzE,iCAAiC;YACjC,OAAO,EAAE;gBACP;oBACE,KAAK,EAAE,cAAc;oBACrB,QAAQ,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,cAAc,CAAC;iBAC7C;gBACD;oBACE,kEAAkE;oBAClE,kEAAkE;oBAClE,+CAA+C;oBAC/C,UAAU,EAAE,IAAI;oBAChB,KAAK,EAAE,gBAAgB;oBACvB,aAAa,EAAE,uBAAC,uBAAe,KAAG;oBAClC,kEAAkE;oBAClE,gCAAgC;oBAChC,QAAQ,EAAE,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAC5B,OAAO,CAAC,IAAI,CAAC,kCAAkC,EAAE,WAAW,CAAC;iBAChE;aACF,EACD,QAAQ,EAAC,gFAAgF,GACzF,GACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,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 { Combobox } from '@neo4j-ndl/react';\nimport { PlusIconOutline } from '@neo4j-ndl/react/icons';\n\nconst options = [\n { label: 'Movie recommendations', value: 'movie-recommendations' },\n { label: 'Fraud detection', value: 'fraud-detection' },\n { label: 'Supply chain', value: 'supply-chain' },\n { label: 'Customer 360', value: 'customer-360' },\n { label: 'Knowledge graph', value: 'knowledge-graph' },\n { label: 'Network topology', value: 'network-topology' },\n { label: 'Identity resolution', value: 'identity-resolution' },\n { label: 'Master data management', value: 'master-data-management' },\n { label: 'Social network analysis', value: 'social-network-analysis' },\n { label: 'Route optimization', value: 'route-optimization' },\n { label: 'Recommendation engine', value: 'recommendation-engine' },\n { label: 'Access control', value: 'access-control' },\n { label: 'Data lineage', value: 'data-lineage' },\n { label: 'Entity resolution', value: 'entity-resolution' },\n { label: 'Bill of materials', value: 'bill-of-materials' },\n { label: 'Impact analysis', value: 'impact-analysis' },\n { label: 'Anti money laundering', value: 'anti-money-laundering' },\n { label: 'Dependency mapping', value: 'dependency-mapping' },\n { label: 'Patient journey', value: 'patient-journey' },\n { label: 'Content personalization', value: 'content-personalization' },\n { label: 'Risk assessment', value: 'risk-assessment' },\n { label: 'Churn prediction', value: 'churn-prediction' },\n { label: 'Inventory tracking', value: 'inventory-tracking' },\n { label: 'Semantic search', value: 'semantic-search' },\n { label: 'Digital twin', value: 'digital-twin' },\n];\n\nconst Component = () => {\n return (\n <div className=\"n-flex n-flex-col n-gap-token-4\">\n <Combobox\n label=\"Project\"\n placeholder=\"Select project\"\n searchPlaceholder=\"Search projects\"\n options={options}\n // An action never becomes part of the value. It runs, the panel closes,\n // and the selection is left as it was, which is what makes it usable for\n // leaving the combobox entirely.\n actions={[\n {\n label: 'All projects',\n onSelect: () => console.info('all projects'),\n },\n {\n // A divider above the action separates it from the actions before\n // it. The first action never needs one: it already sits below the\n // divider that separates actions from options.\n hasDivider: true,\n label: 'Create project',\n leadingVisual: <PlusIconOutline />,\n // The search value comes along, so an unmatched query can prefill\n // the flow the action leads to.\n onSelect: ({ searchValue }) =>\n console.info('create project with search value', searchValue),\n },\n ]}\n helpText=\"actions stay pinned below the scrolling options, and are exempt from searching\"\n />\n </div>\n );\n};\n\nexport default Component;\n"]}
1	+ {"version":3,"file":"combobox-actions.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-actions.story.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 */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Combobox } from '@neo4j-ndl/react';\nimport { PlusIconOutline } from '@neo4j-ndl/react/icons';\n\nconst options = [\n { label: 'Movie recommendations', value: 'movie-recommendations' },\n { label: 'Fraud detection', value: 'fraud-detection' },\n { label: 'Supply chain', value: 'supply-chain' },\n { label: 'Customer 360', value: 'customer-360' },\n { label: 'Knowledge graph', value: 'knowledge-graph' },\n { label: 'Network topology', value: 'network-topology' },\n { label: 'Identity resolution', value: 'identity-resolution' },\n { label: 'Master data management', value: 'master-data-management' },\n { label: 'Social network analysis', value: 'social-network-analysis' },\n { label: 'Route optimization', value: 'route-optimization' },\n { label: 'Recommendation engine', value: 'recommendation-engine' },\n { label: 'Access control', value: 'access-control' },\n { label: 'Data lineage', value: 'data-lineage' },\n { label: 'Entity resolution', value: 'entity-resolution' },\n { label: 'Bill of materials', value: 'bill-of-materials' },\n { label: 'Impact analysis', value: 'impact-analysis' },\n { label: 'Anti money laundering', value: 'anti-money-laundering' },\n { label: 'Dependency mapping', value: 'dependency-mapping' },\n { label: 'Patient journey', value: 'patient-journey' },\n { label: 'Content personalization', value: 'content-personalization' },\n { label: 'Risk assessment', value: 'risk-assessment' },\n { label: 'Churn prediction', value: 'churn-prediction' },\n { label: 'Inventory tracking', value: 'inventory-tracking' },\n { label: 'Semantic search', value: 'semantic-search' },\n { label: 'Digital twin', value: 'digital-twin' },\n];\n\nconst Component = () => {\n return (\n <div className=\"flex flex-col gap-token-4\">\n <Combobox\n label=\"Project\"\n placeholder=\"Select project\"\n searchPlaceholder=\"Search projects\"\n options={options}\n // An action never becomes part of the value. It runs, the panel closes,\n // and the selection is left as it was, which is what makes it usable for\n // leaving the combobox entirely.\n actions={[\n {\n label: 'All projects',\n onSelect: () => console.info('all projects'),\n },\n {\n // A divider above the action separates it from the actions before\n // it. The first action never needs one: it already sits below the\n // divider that separates actions from options.\n hasDivider: true,\n label: 'Create project',\n leadingVisual: <PlusIconOutline />,\n // The search value comes along, so an unmatched query can prefill\n // the flow the action leads to.\n onSelect: ({ searchValue }) =>\n console.info('create project with search value', searchValue),\n },\n ]}\n helpText=\"actions stay pinned below the scrolling options, and are exempt from searching\"\n />\n </div>\n );\n};\n\nexport default Component;\n"]}

package/lib/cjs/combobox/stories/combobox-async.story.js CHANGED Viewed

@@ -61,7 +61,7 @@ const Component = () => {
             window.clearTimeout(timeoutId);
         };
     }, [hasOpened, searchValue]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-token-4", children: [(0, jsx_runtime_1.jsx)(react_1.Combobox, { label: "Products",
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-token-4", children: [(0, jsx_runtime_1.jsx)(react_1.Combobox, { label: "Products",
                 // The consumer supplies already-filtered options, so internal
                 // filtering must be disabled.
                 filterOption: false, searchValue: searchValue, onSearchChange: setSearchValue, onOpenChange: (isOpen) => {
@@ -69,7 +69,7 @@ const Component = () => {
                         setIsLoading(true);
                         setHasOpened(true);
                     }
-                }, options: options, isLoading: isLoading, searchPlaceholder: "Search products" }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-small", className: "n-text-neutral-text-weak", children: "The consumer clears, fetches, and filters options after a short delay. The loading state is shown while each request is in flight." })] }));
+                }, options: options, isLoading: isLoading, searchPlaceholder: "Search products" }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-small", className: "text-neutral-text-weak", children: "The consumer clears, fetches, and filters options after a short delay. The loading state is shown while each request is in flight." })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=combobox-async.story.js.map

package/lib/cjs/combobox/stories/combobox-async.story.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"combobox-async.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-async.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAwD;AACxD,iCAA4C;AAE5C,MAAM,OAAO,GAAG;IACd,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;IAChC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;IACtC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;IACpC,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,eAAe,EAAE;IAClD,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;CACvC,CAAC;AAEF,MAAM,eAAe,GAAG,GAAG,CAAC;AAE5B,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,IAAA,gBAAQ,EAAC,EAAE,CAAC,CAAC;IACnD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAiB,EAAE,CAAC,CAAC;IAC3D,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAClD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAElD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,CAAC,SAAS,EAAE,CAAC;YACf,OAAO;QACT,CAAC;QAED,IAAI,WAAW,GAAG,KAAK,CAAC;QACxB,MAAM,KAAK,GAAG,WAAW,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC;QAE/C,YAAY,CAAC,IAAI,CAAC,CAAC;QACnB,UAAU,CAAC,EAAE,CAAC,CAAC;QAEf,MAAM,SAAS,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;YACvC,IAAI,WAAW,EAAE,CAAC;gBAChB,OAAO;YACT,CAAC;YAED,UAAU,CACR,KAAK,KAAK,EAAE;gBACV,CAAC,CAAC,OAAO;gBACT,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE,CACxB,MAAM,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,CAC3C,CACN,CAAC;YACF,YAAY,CAAC,KAAK,CAAC,CAAC;QACtB,CAAC,EAAE,eAAe,CAAC,CAAC;QAEpB,OAAO,GAAG,EAAE;YACV,WAAW,GAAG,IAAI,CAAC;YACnB,MAAM,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;QACjC,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC;IAE7B,OAAO,CACL,iCAAK,SAAS,EAAC,~~iCAAiC~~,~~aAC9C~~,uBAAC,gBAAQ,IACP,KAAK,EAAC,UAAU;gBAChB,8DAA8D;gBAC9D,8BAA8B;gBAC9B,YAAY,EAAE,KAAK,EACnB,WAAW,EAAE,WAAW,EACxB,cAAc,EAAE,cAAc,EAC9B,YAAY,EAAE,CAAC,MAAM,EAAE,EAAE;oBACvB,IAAI,MAAM,EAAE,CAAC;wBACX,YAAY,CAAC,IAAI,CAAC,CAAC;wBACnB,YAAY,CAAC,IAAI,CAAC,CAAC;oBACrB,CAAC;gBACH,CAAC,EACD,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,iBAAiB,EAAC,iBAAiB,GACnC,EACF,uBAAC,kBAAU,IAAC,OAAO,EAAC,YAAY,EAAC,SAAS,EAAC,~~0BAA0B~~,~~mJAGxD~~,IACT,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,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 { Combobox, Typography } from '@neo4j-ndl/react';\nimport { useEffect, useState } from 'react';\n\nconst catalog = [\n { label: 'Neo4j', value: 'neo4j' },\n { label: 'Aura', value: 'aura' },\n { label: 'Bloom', value: 'bloom' },\n { label: 'Browser', value: 'browser' },\n { label: 'Cypher', value: 'cypher' },\n { label: 'Data Importer', value: 'data-importer' },\n { label: 'GraphQL', value: 'graphql' },\n];\n\nconst SEARCH_DELAY_MS = 600;\n\nconst Component = () => {\n const [searchValue, setSearchValue] = useState('');\n const [options, setOptions] = useState<typeof catalog>([]);\n const [isLoading, setIsLoading] = useState(false);\n const [hasOpened, setHasOpened] = useState(false);\n\n useEffect(() => {\n if (!hasOpened) {\n return;\n }\n\n let isCancelled = false;\n const query = searchValue.trim().toLowerCase();\n\n setIsLoading(true);\n setOptions([]);\n\n const timeoutId = window.setTimeout(() => {\n if (isCancelled) {\n return;\n }\n\n setOptions(\n query === ''\n ? catalog\n : catalog.filter((option) =>\n option.label.toLowerCase().includes(query),\n ),\n );\n setIsLoading(false);\n }, SEARCH_DELAY_MS);\n\n return () => {\n isCancelled = true;\n window.clearTimeout(timeoutId);\n };\n }, [hasOpened, searchValue]);\n\n return (\n <div className=\"n-flex n-flex-col n-gap-token-4\">\n <Combobox\n label=\"Products\"\n // The consumer supplies already-filtered options, so internal\n // filtering must be disabled.\n filterOption={false}\n searchValue={searchValue}\n onSearchChange={setSearchValue}\n onOpenChange={(isOpen) => {\n if (isOpen) {\n setIsLoading(true);\n setHasOpened(true);\n }\n }}\n options={options}\n isLoading={isLoading}\n searchPlaceholder=\"Search products\"\n />\n <Typography variant=\"body-small\" className=\"n-text-neutral-text-weak\">\n The consumer clears, fetches, and filters options after a short delay.\n The loading state is shown while each request is in flight.\n </Typography>\n </div>\n );\n};\n\nexport default Component;\n"]}
1	+ {"version":3,"file":"combobox-async.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-async.story.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 */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Combobox, Typography } from '@neo4j-ndl/react';\nimport { useEffect, useState } from 'react';\n\nconst catalog = [\n { label: 'Neo4j', value: 'neo4j' },\n { label: 'Aura', value: 'aura' },\n { label: 'Bloom', value: 'bloom' },\n { label: 'Browser', value: 'browser' },\n { label: 'Cypher', value: 'cypher' },\n { label: 'Data Importer', value: 'data-importer' },\n { label: 'GraphQL', value: 'graphql' },\n];\n\nconst SEARCH_DELAY_MS = 600;\n\nconst Component = () => {\n const [searchValue, setSearchValue] = useState('');\n const [options, setOptions] = useState<typeof catalog>([]);\n const [isLoading, setIsLoading] = useState(false);\n const [hasOpened, setHasOpened] = useState(false);\n\n useEffect(() => {\n if (!hasOpened) {\n return;\n }\n\n let isCancelled = false;\n const query = searchValue.trim().toLowerCase();\n\n setIsLoading(true);\n setOptions([]);\n\n const timeoutId = window.setTimeout(() => {\n if (isCancelled) {\n return;\n }\n\n setOptions(\n query === ''\n ? catalog\n : catalog.filter((option) =>\n option.label.toLowerCase().includes(query),\n ),\n );\n setIsLoading(false);\n }, SEARCH_DELAY_MS);\n\n return () => {\n isCancelled = true;\n window.clearTimeout(timeoutId);\n };\n }, [hasOpened, searchValue]);\n\n return (\n <div className=\"flex flex-col gap-token-4\">\n <Combobox\n label=\"Products\"\n // The consumer supplies already-filtered options, so internal\n // filtering must be disabled.\n filterOption={false}\n searchValue={searchValue}\n onSearchChange={setSearchValue}\n onOpenChange={(isOpen) => {\n if (isOpen) {\n setIsLoading(true);\n setHasOpened(true);\n }\n }}\n options={options}\n isLoading={isLoading}\n searchPlaceholder=\"Search products\"\n />\n <Typography variant=\"body-small\" className=\"text-neutral-text-weak\">\n The consumer clears, fetches, and filters options after a short delay.\n The loading state is shown while each request is in flight.\n </Typography>\n </div>\n );\n};\n\nexport default Component;\n"]}

package/lib/cjs/combobox/stories/combobox-disabled.story.js CHANGED Viewed

@@ -29,6 +29,6 @@ const options = [
     { label: 'Bloom', value: 'bloom' },
     { label: 'Data Importer', value: 'data-importer' },
 ];
-const Component = () => ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-items-start n-gap-token-16", children: [(0, jsx_runtime_1.jsx)(react_1.Combobox, { label: "Disabled single select", defaultValue: options[0], isDisabled: true, options: options }), (0, jsx_runtime_1.jsx)(react_1.Combobox, { label: "Disabled multi select", defaultValue: options.slice(0, 3), isDisabled: true, isMulti: true, options: options })] }));
+const Component = () => ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start gap-token-16", children: [(0, jsx_runtime_1.jsx)(react_1.Combobox, { label: "Disabled single select", defaultValue: options[0], isDisabled: true, options: options }), (0, jsx_runtime_1.jsx)(react_1.Combobox, { label: "Disabled multi select", defaultValue: options.slice(0, 3), isDisabled: true, isMulti: true, options: options })] }));
 exports.default = Component;
 //# sourceMappingURL=combobox-disabled.story.js.map

package/lib/cjs/combobox/stories/combobox-disabled.story.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"combobox-disabled.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-disabled.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA4C;AAE5C,MAAM,OAAO,GAAG;IACd,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;IAChC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,eAAe,EAAE;CACnD,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CACtB,iCAAK,SAAS,EAAC,~~gDAAgD~~,~~aAC7D~~,uBAAC,gBAAQ,IACP,KAAK,EAAC,wBAAwB,EAC9B,YAAY,EAAE,OAAO,CAAC,CAAC,CAAC,EACxB,UAAU,QACV,OAAO,EAAE,OAAO,GAChB,EACF,uBAAC,gBAAQ,IACP,KAAK,EAAC,uBAAuB,EAC7B,YAAY,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EACjC,UAAU,QACV,OAAO,QACP,OAAO,EAAE,OAAO,GAChB,IACE,CACP,CAAC;AAEF,kBAAe,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 { Combobox } from '@neo4j-ndl/react';\n\nconst options = [\n { label: 'Neo4j', value: 'neo4j' },\n { label: 'Aura', value: 'aura' },\n { label: 'Bloom', value: 'bloom' },\n { label: 'Data Importer', value: 'data-importer' },\n];\n\nconst Component = () => (\n <div className=\"n-flex n-flex-col n-items-start n-gap-token-16\">\n <Combobox\n label=\"Disabled single select\"\n defaultValue={options[0]}\n isDisabled\n options={options}\n />\n <Combobox\n label=\"Disabled multi select\"\n defaultValue={options.slice(0, 3)}\n isDisabled\n isMulti\n options={options}\n />\n </div>\n);\n\nexport default Component;\n"]}
1	+ {"version":3,"file":"combobox-disabled.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-disabled.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA4C;AAE5C,MAAM,OAAO,GAAG;IACd,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;IAChC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,eAAe,EAAE;CACnD,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CACtB,iCAAK,SAAS,EAAC,wCAAwC,aACrD,uBAAC,gBAAQ,IACP,KAAK,EAAC,wBAAwB,EAC9B,YAAY,EAAE,OAAO,CAAC,CAAC,CAAC,EACxB,UAAU,QACV,OAAO,EAAE,OAAO,GAChB,EACF,uBAAC,gBAAQ,IACP,KAAK,EAAC,uBAAuB,EAC7B,YAAY,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EACjC,UAAU,QACV,OAAO,QACP,OAAO,EAAE,OAAO,GAChB,IACE,CACP,CAAC;AAEF,kBAAe,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 { Combobox } from '@neo4j-ndl/react';\n\nconst options = [\n { label: 'Neo4j', value: 'neo4j' },\n { label: 'Aura', value: 'aura' },\n { label: 'Bloom', value: 'bloom' },\n { label: 'Data Importer', value: 'data-importer' },\n];\n\nconst Component = () => (\n <div className=\"flex flex-col items-start gap-token-16\">\n <Combobox\n label=\"Disabled single select\"\n defaultValue={options[0]}\n isDisabled\n options={options}\n />\n <Combobox\n label=\"Disabled multi select\"\n defaultValue={options.slice(0, 3)}\n isDisabled\n isMulti\n options={options}\n />\n </div>\n);\n\nexport default Component;\n"]}

package/lib/cjs/combobox/stories/combobox-fluid.story.js CHANGED Viewed

@@ -29,6 +29,6 @@ const options = [
     { label: 'Bloom', value: 'bloom' },
     { label: 'Data Importer', value: 'data-importer' },
 ];
-const Component = () => ((0, jsx_runtime_1.jsx)("div", { className: "n-w-full", children: (0, jsx_runtime_1.jsx)(react_1.Combobox, { label: "Product", helpText: "This combobox fills the width of its parent.", isClearable: true, isFluid: true, options: options }) }));
+const Component = () => ((0, jsx_runtime_1.jsx)("div", { className: "w-full", children: (0, jsx_runtime_1.jsx)(react_1.Combobox, { label: "Product", helpText: "This combobox fills the width of its parent.", isClearable: true, isFluid: true, options: options }) }));
 exports.default = Component;
 //# sourceMappingURL=combobox-fluid.story.js.map

package/lib/cjs/combobox/stories/combobox-fluid.story.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"combobox-fluid.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-fluid.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA4C;AAE5C,MAAM,OAAO,GAAG;IACd,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;IAChC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,eAAe,EAAE;CACnD,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CACtB,gCAAK,SAAS,EAAC,~~UAAU~~,~~YACvB~~,uBAAC,gBAAQ,IACP,KAAK,EAAC,SAAS,EACf,QAAQ,EAAC,8CAA8C,EACvD,WAAW,QACX,OAAO,QACP,OAAO,EAAE,OAAO,GAChB,GACE,CACP,CAAC;AAEF,kBAAe,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 { Combobox } from '@neo4j-ndl/react';\n\nconst options = [\n { label: 'Neo4j', value: 'neo4j' },\n { label: 'Aura', value: 'aura' },\n { label: 'Bloom', value: 'bloom' },\n { label: 'Data Importer', value: 'data-importer' },\n];\n\nconst Component = () => (\n <div className=\"n-w-full\">\n <Combobox\n label=\"Product\"\n helpText=\"This combobox fills the width of its parent.\"\n isClearable\n isFluid\n options={options}\n />\n </div>\n);\n\nexport default Component;\n"]}
1	+ {"version":3,"file":"combobox-fluid.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-fluid.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA4C;AAE5C,MAAM,OAAO,GAAG;IACd,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;IAChC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,eAAe,EAAE;CACnD,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CACtB,gCAAK,SAAS,EAAC,QAAQ,YACrB,uBAAC,gBAAQ,IACP,KAAK,EAAC,SAAS,EACf,QAAQ,EAAC,8CAA8C,EACvD,WAAW,QACX,OAAO,QACP,OAAO,EAAE,OAAO,GAChB,GACE,CACP,CAAC;AAEF,kBAAe,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 { Combobox } from '@neo4j-ndl/react';\n\nconst options = [\n { label: 'Neo4j', value: 'neo4j' },\n { label: 'Aura', value: 'aura' },\n { label: 'Bloom', value: 'bloom' },\n { label: 'Data Importer', value: 'data-importer' },\n];\n\nconst Component = () => (\n <div className=\"w-full\">\n <Combobox\n label=\"Product\"\n helpText=\"This combobox fills the width of its parent.\"\n isClearable\n isFluid\n options={options}\n />\n </div>\n);\n\nexport default Component;\n"]}

package/lib/cjs/combobox/stories/combobox-hidden-label.story.js CHANGED Viewed

@@ -28,6 +28,6 @@ const options = [
     { label: 'Aura', value: 'aura' },
     { label: 'Bloom', value: 'bloom' },
 ];
-const Component = () => ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-token-4", children: [(0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Filter results by product" }), (0, jsx_runtime_1.jsx)(react_1.Combobox, { label: "Product", hasVisuallyHiddenLabel: true, options: options, placeholder: "All products" })] }));
+const Component = () => ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-token-4", children: [(0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Filter results by product" }), (0, jsx_runtime_1.jsx)(react_1.Combobox, { label: "Product", hasVisuallyHiddenLabel: true, options: options, placeholder: "All products" })] }));
 exports.default = Component;
 //# sourceMappingURL=combobox-hidden-label.story.js.map

package/lib/cjs/combobox/stories/combobox-hidden-label.story.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"combobox-hidden-label.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-hidden-label.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAwD;AAExD,MAAM,OAAO,GAAG;IACd,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;IAChC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;CACnC,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CACtB,iCAAK,SAAS,EAAC,~~iCAAiC~~,~~aAC9C~~,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,0CAAuC,EACxE,uBAAC,gBAAQ,IACP,KAAK,EAAC,SAAS,EACf,sBAAsB,QACtB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAC,cAAc,GAC1B,IACE,CACP,CAAC;AAEF,kBAAe,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 { Combobox, Typography } from '@neo4j-ndl/react';\n\nconst options = [\n { label: 'Neo4j', value: 'neo4j' },\n { label: 'Aura', value: 'aura' },\n { label: 'Bloom', value: 'bloom' },\n];\n\nconst Component = () => (\n <div className=\"n-flex n-flex-col n-gap-token-4\">\n <Typography variant=\"body-medium\">Filter results by product</Typography>\n <Combobox\n label=\"Product\"\n hasVisuallyHiddenLabel\n options={options}\n placeholder=\"All products\"\n />\n </div>\n);\n\nexport default Component;\n"]}
1	+ {"version":3,"file":"combobox-hidden-label.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-hidden-label.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAwD;AAExD,MAAM,OAAO,GAAG;IACd,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;IAChC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;CACnC,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CACtB,iCAAK,SAAS,EAAC,2BAA2B,aACxC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,0CAAuC,EACxE,uBAAC,gBAAQ,IACP,KAAK,EAAC,SAAS,EACf,sBAAsB,QACtB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAC,cAAc,GAC1B,IACE,CACP,CAAC;AAEF,kBAAe,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 { Combobox, Typography } from '@neo4j-ndl/react';\n\nconst options = [\n { label: 'Neo4j', value: 'neo4j' },\n { label: 'Aura', value: 'aura' },\n { label: 'Bloom', value: 'bloom' },\n];\n\nconst Component = () => (\n <div className=\"flex flex-col gap-token-4\">\n <Typography variant=\"body-medium\">Filter results by product</Typography>\n <Combobox\n label=\"Product\"\n hasVisuallyHiddenLabel\n options={options}\n placeholder=\"All products\"\n />\n </div>\n);\n\nexport default Component;\n"]}

package/lib/cjs/combobox/stories/combobox-in-popover-dialog.story.js CHANGED Viewed

@@ -34,7 +34,7 @@ const options = [
 ];
 const Component = () => {
     const [isOpen, setIsOpen] = (0, react_2.useState)(false);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => setIsOpen(true), children: "Open dialog" }), (0, jsx_runtime_1.jsxs)(react_1.Dialog, { isOpen: isOpen, onClose: () => setIsOpen(false), size: "medium", children: [(0, jsx_runtime_1.jsx)(react_1.Dialog.Header, { children: "Combobox in a popover in a dialog" }), (0, jsx_runtime_1.jsx)(react_1.Dialog.Description, { children: "This exercises nested portals, fixed positioning, focus handling, and stacking across all three components." }), (0, jsx_runtime_1.jsx)(react_1.Dialog.Content, { children: (0, jsx_runtime_1.jsxs)(react_1.Popover, { isPortaled: true, hasAnchorPortal: true, strategy: "fixed", children: [(0, jsx_runtime_1.jsx)(react_1.Popover.Trigger, { hasButtonWrapper: true, children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { children: "Open popover" }) }), (0, jsx_runtime_1.jsx)(react_1.Popover.Content, { className: "n-w-[400px] n-p-token-16", children: (0, jsx_runtime_1.jsx)(react_1.Combobox, { label: "Product", errorText: "This error styling should inherit the dialog theme.", isFluid: true, options: options, searchPlaceholder: "Search products" }) })] }) })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => setIsOpen(true), children: "Open dialog" }), (0, jsx_runtime_1.jsxs)(react_1.Dialog, { isOpen: isOpen, onClose: () => setIsOpen(false), size: "medium", children: [(0, jsx_runtime_1.jsx)(react_1.Dialog.Header, { children: "Combobox in a popover in a dialog" }), (0, jsx_runtime_1.jsx)(react_1.Dialog.Description, { children: "This exercises nested portals, fixed positioning, focus handling, and stacking across all three components." }), (0, jsx_runtime_1.jsx)(react_1.Dialog.Content, { children: (0, jsx_runtime_1.jsxs)(react_1.Popover, { isPortaled: true, hasAnchorPortal: true, strategy: "fixed", children: [(0, jsx_runtime_1.jsx)(react_1.Popover.Trigger, { hasButtonWrapper: true, children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { children: "Open popover" }) }), (0, jsx_runtime_1.jsx)(react_1.Popover.Content, { className: "w-[400px] p-token-16", children: (0, jsx_runtime_1.jsx)(react_1.Combobox, { label: "Product", errorText: "This error styling should inherit the dialog theme.", isFluid: true, options: options, searchPlaceholder: "Search products" }) })] }) })] })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=combobox-in-popover-dialog.story.js.map

package/lib/cjs/combobox/stories/combobox-in-popover-dialog.story.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"combobox-in-popover-dialog.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-in-popover-dialog.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA2E;AAC3E,iCAAiC;AAEjC,MAAM,OAAO,GAAG;IACd,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;IAChC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,eAAe,EAAE;IAClD,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,EAAE;IACtD,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;CACrC,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAE5C,OAAO,CACL,6DACE,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,4BAA4B,EACxE,wBAAC,cAAM,IAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,IAAI,EAAC,QAAQ,aACpE,uBAAC,cAAM,CAAC,MAAM,oDAAkD,EAChE,uBAAC,cAAM,CAAC,WAAW,8HAGE,EACrB,uBAAC,cAAM,CAAC,OAAO,cACb,wBAAC,eAAO,IAAC,UAAU,QAAC,eAAe,QAAC,QAAQ,EAAC,OAAO,aAClD,uBAAC,eAAO,CAAC,OAAO,IAAC,gBAAgB,kBAC/B,uBAAC,oBAAY,+BAA4B,GACzB,EAClB,uBAAC,eAAO,CAAC,OAAO,IAAC,SAAS,EAAC,~~0BAA0B~~,~~YACnD~~,uBAAC,gBAAQ,IACP,KAAK,EAAC,SAAS,EACf,SAAS,EAAC,qDAAqD,EAC/D,OAAO,QACP,OAAO,EAAE,OAAO,EAChB,iBAAiB,EAAC,iBAAiB,GACnC,GACc,IACV,GACK,IACV,IACR,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,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 { Combobox, Dialog, FilledButton, Popover } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst options = [\n { label: 'Neo4j', value: 'neo4j' },\n { label: 'Aura', value: 'aura' },\n { label: 'Bloom', value: 'bloom' },\n { label: 'Data Importer', value: 'data-importer' },\n { label: 'GraphQL Library', value: 'graphql-library' },\n { label: 'Cypher', value: 'cypher' },\n];\n\nconst Component = () => {\n const [isOpen, setIsOpen] = useState(false);\n\n return (\n <>\n <FilledButton onClick={() => setIsOpen(true)}>Open dialog</FilledButton>\n <Dialog isOpen={isOpen} onClose={() => setIsOpen(false)} size=\"medium\">\n <Dialog.Header>Combobox in a popover in a dialog</Dialog.Header>\n <Dialog.Description>\n This exercises nested portals, fixed positioning, focus handling, and\n stacking across all three components.\n </Dialog.Description>\n <Dialog.Content>\n <Popover isPortaled hasAnchorPortal strategy=\"fixed\">\n <Popover.Trigger hasButtonWrapper>\n <FilledButton>Open popover</FilledButton>\n </Popover.Trigger>\n <Popover.Content className=\"n-w-[400px] n-p-token-16\">\n <Combobox\n label=\"Product\"\n errorText=\"This error styling should inherit the dialog theme.\"\n isFluid\n options={options}\n searchPlaceholder=\"Search products\"\n />\n </Popover.Content>\n </Popover>\n </Dialog.Content>\n </Dialog>\n </>\n );\n};\n\nexport default Component;\n"]}
1	+ {"version":3,"file":"combobox-in-popover-dialog.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-in-popover-dialog.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA2E;AAC3E,iCAAiC;AAEjC,MAAM,OAAO,GAAG;IACd,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;IAChC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,eAAe,EAAE;IAClD,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,EAAE;IACtD,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;CACrC,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAE5C,OAAO,CACL,6DACE,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,4BAA4B,EACxE,wBAAC,cAAM,IAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,IAAI,EAAC,QAAQ,aACpE,uBAAC,cAAM,CAAC,MAAM,oDAAkD,EAChE,uBAAC,cAAM,CAAC,WAAW,8HAGE,EACrB,uBAAC,cAAM,CAAC,OAAO,cACb,wBAAC,eAAO,IAAC,UAAU,QAAC,eAAe,QAAC,QAAQ,EAAC,OAAO,aAClD,uBAAC,eAAO,CAAC,OAAO,IAAC,gBAAgB,kBAC/B,uBAAC,oBAAY,+BAA4B,GACzB,EAClB,uBAAC,eAAO,CAAC,OAAO,IAAC,SAAS,EAAC,sBAAsB,YAC/C,uBAAC,gBAAQ,IACP,KAAK,EAAC,SAAS,EACf,SAAS,EAAC,qDAAqD,EAC/D,OAAO,QACP,OAAO,EAAE,OAAO,EAChB,iBAAiB,EAAC,iBAAiB,GACnC,GACc,IACV,GACK,IACV,IACR,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,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 { Combobox, Dialog, FilledButton, Popover } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst options = [\n { label: 'Neo4j', value: 'neo4j' },\n { label: 'Aura', value: 'aura' },\n { label: 'Bloom', value: 'bloom' },\n { label: 'Data Importer', value: 'data-importer' },\n { label: 'GraphQL Library', value: 'graphql-library' },\n { label: 'Cypher', value: 'cypher' },\n];\n\nconst Component = () => {\n const [isOpen, setIsOpen] = useState(false);\n\n return (\n <>\n <FilledButton onClick={() => setIsOpen(true)}>Open dialog</FilledButton>\n <Dialog isOpen={isOpen} onClose={() => setIsOpen(false)} size=\"medium\">\n <Dialog.Header>Combobox in a popover in a dialog</Dialog.Header>\n <Dialog.Description>\n This exercises nested portals, fixed positioning, focus handling, and\n stacking across all three components.\n </Dialog.Description>\n <Dialog.Content>\n <Popover isPortaled hasAnchorPortal strategy=\"fixed\">\n <Popover.Trigger hasButtonWrapper>\n <FilledButton>Open popover</FilledButton>\n </Popover.Trigger>\n <Popover.Content className=\"w-[400px] p-token-16\">\n <Combobox\n label=\"Product\"\n errorText=\"This error styling should inherit the dialog theme.\"\n isFluid\n options={options}\n searchPlaceholder=\"Search products\"\n />\n </Popover.Content>\n </Popover>\n </Dialog.Content>\n </Dialog>\n </>\n );\n};\n\nexport default Component;\n"]}

package/lib/cjs/combobox/stories/combobox-in-popover.story.js CHANGED Viewed

@@ -31,6 +31,6 @@ const options = [
     { label: 'GraphQL Library', value: 'graphql-library' },
     { label: 'Cypher', value: 'cypher' },
 ];
-const Component = () => ((0, jsx_runtime_1.jsxs)(react_1.Popover, { isPortaled: true, children: [(0, jsx_runtime_1.jsx)(react_1.Popover.Trigger, { hasButtonWrapper: true, children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { children: "Open popover" }) }), (0, jsx_runtime_1.jsx)(react_1.Popover.Content, { className: "n-max-h-[240px] n-w-[400px] n-overflow-y-auto n-p-token-16", children: (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-token-16", children: [(0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Scroll this popover while the combobox panel is open to verify that it remains anchored and is not clipped by the overflow container." }), (0, jsx_runtime_1.jsx)("div", { className: "n-h-[120px] n-shrink-0 n-rounded-sm n-border n-border-neutral-border-strong n-bg-neutral-bg-weak" }), (0, jsx_runtime_1.jsx)(react_1.Combobox, { label: "Product", helpText: "The combobox panel is independently portaled above this popover.", isFluid: true, options: options, searchPlaceholder: "Search products" }), (0, jsx_runtime_1.jsx)("div", { className: "n-h-[120px] n-shrink-0 n-rounded-sm n-border n-border-neutral-border-strong n-bg-neutral-bg-weak" })] }) })] }));
+const Component = () => ((0, jsx_runtime_1.jsxs)(react_1.Popover, { isPortaled: true, children: [(0, jsx_runtime_1.jsx)(react_1.Popover.Trigger, { hasButtonWrapper: true, children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { children: "Open popover" }) }), (0, jsx_runtime_1.jsx)(react_1.Popover.Content, { className: "max-h-[240px] w-[400px] overflow-y-auto p-token-16", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-token-16", children: [(0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Scroll this popover while the combobox panel is open to verify that it remains anchored and is not clipped by the overflow container." }), (0, jsx_runtime_1.jsx)("div", { className: "h-[120px] shrink-0 rounded-sm border border-neutral-border-strong bg-neutral-bg-weak" }), (0, jsx_runtime_1.jsx)(react_1.Combobox, { label: "Product", helpText: "The combobox panel is independently portaled above this popover.", isFluid: true, options: options, searchPlaceholder: "Search products" }), (0, jsx_runtime_1.jsx)("div", { className: "h-[120px] shrink-0 rounded-sm border border-neutral-border-strong bg-neutral-bg-weak" })] }) })] }));
 exports.default = Component;
 //# sourceMappingURL=combobox-in-popover.story.js.map

package/lib/cjs/combobox/stories/combobox-in-popover.story.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"combobox-in-popover.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-in-popover.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA+E;AAE/E,MAAM,OAAO,GAAG;IACd,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;IAChC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,eAAe,EAAE;IAClD,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,EAAE;IACtD,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;CACrC,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CACtB,wBAAC,eAAO,IAAC,UAAU,mBACjB,uBAAC,eAAO,CAAC,OAAO,IAAC,gBAAgB,kBAC/B,uBAAC,oBAAY,+BAA4B,GACzB,EAClB,uBAAC,eAAO,CAAC,OAAO,IAAC,SAAS,EAAC,~~4DAA4D~~,~~YACrF~~,iCAAK,SAAS,EAAC,~~kCAAkC~~,~~aAC/C~~,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,sJAGpB,EACb,gCAAK,SAAS,EAAC,~~kGAAkG~~,GAAG,~~EACpH~~,uBAAC,gBAAQ,IACP,KAAK,EAAC,SAAS,EACf,QAAQ,EAAC,kEAAkE,EAC3E,OAAO,QACP,OAAO,EAAE,OAAO,EAChB,iBAAiB,EAAC,iBAAiB,GACnC,EACF,gCAAK,SAAS,EAAC,~~kGAAkG~~,GAAG,~~IAChH~~,GACU,IACV,CACX,CAAC;AAEF,kBAAe,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 { Combobox, FilledButton, Popover, Typography } from '@neo4j-ndl/react';\n\nconst options = [\n { label: 'Neo4j', value: 'neo4j' },\n { label: 'Aura', value: 'aura' },\n { label: 'Bloom', value: 'bloom' },\n { label: 'Data Importer', value: 'data-importer' },\n { label: 'GraphQL Library', value: 'graphql-library' },\n { label: 'Cypher', value: 'cypher' },\n];\n\nconst Component = () => (\n <Popover isPortaled>\n <Popover.Trigger hasButtonWrapper>\n <FilledButton>Open popover</FilledButton>\n </Popover.Trigger>\n <Popover.Content className=\"n-max-h-[240px] n-w-[400px] n-overflow-y-auto n-p-token-16\">\n <div className=\"n-flex n-flex-col n-gap-token-16\">\n <Typography variant=\"body-medium\">\n Scroll this popover while the combobox panel is open to verify that it\n remains anchored and is not clipped by the overflow container.\n </Typography>\n <div className=\"n-h-[120px] n-shrink-0 n-rounded-sm n-border n-border-neutral-border-strong n-bg-neutral-bg-weak\" />\n <Combobox\n label=\"Product\"\n helpText=\"The combobox panel is independently portaled above this popover.\"\n isFluid\n options={options}\n searchPlaceholder=\"Search products\"\n />\n <div className=\"n-h-[120px] n-shrink-0 n-rounded-sm n-border n-border-neutral-border-strong n-bg-neutral-bg-weak\" />\n </div>\n </Popover.Content>\n </Popover>\n);\n\nexport default Component;\n"]}
1	+ {"version":3,"file":"combobox-in-popover.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-in-popover.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA+E;AAE/E,MAAM,OAAO,GAAG;IACd,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;IAChC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,eAAe,EAAE;IAClD,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,EAAE;IACtD,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;CACrC,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CACtB,wBAAC,eAAO,IAAC,UAAU,mBACjB,uBAAC,eAAO,CAAC,OAAO,IAAC,gBAAgB,kBAC/B,uBAAC,oBAAY,+BAA4B,GACzB,EAClB,uBAAC,eAAO,CAAC,OAAO,IAAC,SAAS,EAAC,oDAAoD,YAC7E,iCAAK,SAAS,EAAC,4BAA4B,aACzC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,sJAGpB,EACb,gCAAK,SAAS,EAAC,sFAAsF,GAAG,EACxG,uBAAC,gBAAQ,IACP,KAAK,EAAC,SAAS,EACf,QAAQ,EAAC,kEAAkE,EAC3E,OAAO,QACP,OAAO,EAAE,OAAO,EAChB,iBAAiB,EAAC,iBAAiB,GACnC,EACF,gCAAK,SAAS,EAAC,sFAAsF,GAAG,IACpG,GACU,IACV,CACX,CAAC;AAEF,kBAAe,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 { Combobox, FilledButton, Popover, Typography } from '@neo4j-ndl/react';\n\nconst options = [\n { label: 'Neo4j', value: 'neo4j' },\n { label: 'Aura', value: 'aura' },\n { label: 'Bloom', value: 'bloom' },\n { label: 'Data Importer', value: 'data-importer' },\n { label: 'GraphQL Library', value: 'graphql-library' },\n { label: 'Cypher', value: 'cypher' },\n];\n\nconst Component = () => (\n <Popover isPortaled>\n <Popover.Trigger hasButtonWrapper>\n <FilledButton>Open popover</FilledButton>\n </Popover.Trigger>\n <Popover.Content className=\"max-h-[240px] w-[400px] overflow-y-auto p-token-16\">\n <div className=\"flex flex-col gap-token-16\">\n <Typography variant=\"body-medium\">\n Scroll this popover while the combobox panel is open to verify that it\n remains anchored and is not clipped by the overflow container.\n </Typography>\n <div className=\"h-[120px] shrink-0 rounded-sm border border-neutral-border-strong bg-neutral-bg-weak\" />\n <Combobox\n label=\"Product\"\n helpText=\"The combobox panel is independently portaled above this popover.\"\n isFluid\n options={options}\n searchPlaceholder=\"Search products\"\n />\n <div className=\"h-[120px] shrink-0 rounded-sm border border-neutral-border-strong bg-neutral-bg-weak\" />\n </div>\n </Popover.Content>\n </Popover>\n);\n\nexport default Component;\n"]}

package/lib/cjs/combobox/stories/combobox-native-form.story.js CHANGED Viewed

@@ -41,7 +41,7 @@ const Component = () => {
         event.preventDefault();
         setSubmittedValues(Array.from(new FormData(event.currentTarget).entries()).map(([name, value]) => `${name}: ${String(value)}`));
     };
-    return ((0, jsx_runtime_1.jsxs)("form", { className: "n-flex n-max-w-xl n-flex-col n-gap-token-6", onSubmit: handleSubmit, children: [(0, jsx_runtime_1.jsx)(react_1.Combobox, { label: "Product", name: "product", options: products, defaultValue: products[0], isRequired: true, hasRequiredIndicator: true, triggerRef: triggerRef }), (0, jsx_runtime_1.jsx)(react_1.Combobox, { label: "Environments", name: "environment", options: environments, defaultValue: [environments[0], environments[1]], isMulti: true }), (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-wrap n-gap-token-2", children: [(0, jsx_runtime_1.jsx)(react_1.FilledButton, { type: "submit", children: "Submit" }), (0, jsx_runtime_1.jsx)(react_1.OutlinedButton, { type: "reset", children: "Reset" }), (0, jsx_runtime_1.jsx)(react_1.TextButton, { type: "button", onClick: () => { var _a; return (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, children: "Focus product" })] }), (0, jsx_runtime_1.jsxs)("div", { "aria-live": "polite", children: [(0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Submitted form data" }), (0, jsx_runtime_1.jsx)("pre", { className: "n-mt-token-2", children: submittedValues.length > 0
+    return ((0, jsx_runtime_1.jsxs)("form", { className: "flex max-w-xl flex-col gap-token-6", onSubmit: handleSubmit, children: [(0, jsx_runtime_1.jsx)(react_1.Combobox, { label: "Product", name: "product", options: products, defaultValue: products[0], isRequired: true, hasRequiredIndicator: true, triggerRef: triggerRef }), (0, jsx_runtime_1.jsx)(react_1.Combobox, { label: "Environments", name: "environment", options: environments, defaultValue: [environments[0], environments[1]], isMulti: true }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap gap-token-2", children: [(0, jsx_runtime_1.jsx)(react_1.FilledButton, { type: "submit", children: "Submit" }), (0, jsx_runtime_1.jsx)(react_1.OutlinedButton, { type: "reset", children: "Reset" }), (0, jsx_runtime_1.jsx)(react_1.TextButton, { type: "button", onClick: () => { var _a; return (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, children: "Focus product" })] }), (0, jsx_runtime_1.jsxs)("div", { "aria-live": "polite", children: [(0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Submitted form data" }), (0, jsx_runtime_1.jsx)("pre", { className: "mt-token-2", children: submittedValues.length > 0
                             ? submittedValues.join('\n')
                             : 'Submit the form to inspect its values.' })] })] }));
 };

package/lib/cjs/combobox/stories/combobox-native-form.story.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"combobox-native-form.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-native-form.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAM0B;AAC1B,iCAAyD;AAEzD,MAAM,QAAQ,GAAG;IACf,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;IAChC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;CACnC,CAAC;AAEF,MAAM,YAAY,GAAG;IACnB,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,EAAE;IAC9C,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;IACtC,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,YAAY,EAAE;CAC7C,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,UAAU,GAAG,IAAA,cAAM,EAAqB,IAAI,CAAC,CAAC;IACpD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,IAAA,gBAAQ,EAAW,EAAE,CAAC,CAAC;IAErE,MAAM,YAAY,GAAG,CAAC,KAAiC,EAAE,EAAE;QACzD,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,kBAAkB,CAChB,KAAK,CAAC,IAAI,CAAC,IAAI,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,GAAG,CACzD,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,GAAG,IAAI,KAAK,MAAM,CAAC,KAAK,CAAC,EAAE,CAC/C,CACF,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,CACL,kCACE,SAAS,EAAC,~~4CAA4C~~,~~EACtD~~,QAAQ,EAAE,YAAY,aAEtB,uBAAC,gBAAQ,IACP,KAAK,EAAC,SAAS,EACf,IAAI,EAAC,SAAS,EACd,OAAO,EAAE,QAAQ,EACjB,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC,EACzB,UAAU,QACV,oBAAoB,QACpB,UAAU,EAAE,UAAU,GACtB,EACF,uBAAC,gBAAQ,IACP,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,aAAa,EAClB,OAAO,EAAE,YAAY,EACrB,YAAY,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,EAChD,OAAO,SACP,EACF,iCAAK,SAAS,EAAC,~~kCAAkC~~,~~aAC/C~~,uBAAC,oBAAY,IAAC,IAAI,EAAC,QAAQ,uBAAsB,EACjD,uBAAC,sBAAc,IAAC,IAAI,EAAC,OAAO,sBAAuB,EACnD,uBAAC,kBAAU,IAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,GAAG,EAAE,WAAC,OAAA,MAAA,UAAU,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAA,EAAA,8BAEvD,IACT,EACN,8CAAe,QAAQ,aACrB,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,oCAAiC,EAClE,gCAAK,SAAS,EAAC,~~cAAc~~,~~YAC1B~~,eAAe,CAAC,MAAM,GAAG,CAAC;4BACzB,CAAC,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC;4BAC5B,CAAC,CAAC,wCAAwC,GACxC,IACF,IACD,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,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 {\n Combobox,\n FilledButton,\n OutlinedButton,\n TextButton,\n Typography,\n} from '@neo4j-ndl/react';\nimport { type FormEvent, useRef, useState } from 'react';\n\nconst products = [\n { label: 'Neo4j', value: 'neo4j' },\n { label: 'Aura', value: 'aura' },\n { label: 'Bloom', value: 'bloom' },\n];\n\nconst environments = [\n { label: 'Development', value: 'development' },\n { label: 'Staging', value: 'staging' },\n { label: 'Production', value: 'production' },\n];\n\nconst Component = () => {\n const triggerRef = useRef<HTMLElement \| null>(null);\n const [submittedValues, setSubmittedValues] = useState<string[]>([]);\n\n const handleSubmit = (event: FormEvent<HTMLFormElement>) => {\n event.preventDefault();\n setSubmittedValues(\n Array.from(new FormData(event.currentTarget).entries()).map(\n ([name, value]) => `${name}: ${String(value)}`,\n ),\n );\n };\n\n return (\n <form\n className=\"n-flex n-max-w-xl n-flex-col n-gap-token-6\"\n onSubmit={handleSubmit}\n >\n <Combobox\n label=\"Product\"\n name=\"product\"\n options={products}\n defaultValue={products[0]}\n isRequired\n hasRequiredIndicator\n triggerRef={triggerRef}\n />\n <Combobox\n label=\"Environments\"\n name=\"environment\"\n options={environments}\n defaultValue={[environments[0], environments[1]]}\n isMulti\n />\n <div className=\"n-flex n-flex-wrap n-gap-token-2\">\n <FilledButton type=\"submit\">Submit</FilledButton>\n <OutlinedButton type=\"reset\">Reset</OutlinedButton>\n <TextButton type=\"button\" onClick={() => triggerRef.current?.focus()}>\n Focus product\n </TextButton>\n </div>\n <div aria-live=\"polite\">\n <Typography variant=\"body-medium\">Submitted form data</Typography>\n <pre className=\"n-mt-token-2\">\n {submittedValues.length > 0\n ? submittedValues.join('\\n')\n : 'Submit the form to inspect its values.'}\n </pre>\n </div>\n </form>\n );\n};\n\nexport default Component;\n"]}
1	+ {"version":3,"file":"combobox-native-form.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-native-form.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAM0B;AAC1B,iCAAyD;AAEzD,MAAM,QAAQ,GAAG;IACf,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;IAChC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;CACnC,CAAC;AAEF,MAAM,YAAY,GAAG;IACnB,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,EAAE;IAC9C,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;IACtC,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,YAAY,EAAE;CAC7C,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,UAAU,GAAG,IAAA,cAAM,EAAqB,IAAI,CAAC,CAAC;IACpD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,IAAA,gBAAQ,EAAW,EAAE,CAAC,CAAC;IAErE,MAAM,YAAY,GAAG,CAAC,KAAiC,EAAE,EAAE;QACzD,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,kBAAkB,CAChB,KAAK,CAAC,IAAI,CAAC,IAAI,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,GAAG,CACzD,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,GAAG,IAAI,KAAK,MAAM,CAAC,KAAK,CAAC,EAAE,CAC/C,CACF,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,CACL,kCACE,SAAS,EAAC,oCAAoC,EAC9C,QAAQ,EAAE,YAAY,aAEtB,uBAAC,gBAAQ,IACP,KAAK,EAAC,SAAS,EACf,IAAI,EAAC,SAAS,EACd,OAAO,EAAE,QAAQ,EACjB,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC,EACzB,UAAU,QACV,oBAAoB,QACpB,UAAU,EAAE,UAAU,GACtB,EACF,uBAAC,gBAAQ,IACP,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,aAAa,EAClB,OAAO,EAAE,YAAY,EACrB,YAAY,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,EAChD,OAAO,SACP,EACF,iCAAK,SAAS,EAAC,4BAA4B,aACzC,uBAAC,oBAAY,IAAC,IAAI,EAAC,QAAQ,uBAAsB,EACjD,uBAAC,sBAAc,IAAC,IAAI,EAAC,OAAO,sBAAuB,EACnD,uBAAC,kBAAU,IAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,GAAG,EAAE,WAAC,OAAA,MAAA,UAAU,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAA,EAAA,8BAEvD,IACT,EACN,8CAAe,QAAQ,aACrB,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,oCAAiC,EAClE,gCAAK,SAAS,EAAC,YAAY,YACxB,eAAe,CAAC,MAAM,GAAG,CAAC;4BACzB,CAAC,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC;4BAC5B,CAAC,CAAC,wCAAwC,GACxC,IACF,IACD,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,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 {\n Combobox,\n FilledButton,\n OutlinedButton,\n TextButton,\n Typography,\n} from '@neo4j-ndl/react';\nimport { type FormEvent, useRef, useState } from 'react';\n\nconst products = [\n { label: 'Neo4j', value: 'neo4j' },\n { label: 'Aura', value: 'aura' },\n { label: 'Bloom', value: 'bloom' },\n];\n\nconst environments = [\n { label: 'Development', value: 'development' },\n { label: 'Staging', value: 'staging' },\n { label: 'Production', value: 'production' },\n];\n\nconst Component = () => {\n const triggerRef = useRef<HTMLElement \| null>(null);\n const [submittedValues, setSubmittedValues] = useState<string[]>([]);\n\n const handleSubmit = (event: FormEvent<HTMLFormElement>) => {\n event.preventDefault();\n setSubmittedValues(\n Array.from(new FormData(event.currentTarget).entries()).map(\n ([name, value]) => `${name}: ${String(value)}`,\n ),\n );\n };\n\n return (\n <form\n className=\"flex max-w-xl flex-col gap-token-6\"\n onSubmit={handleSubmit}\n >\n <Combobox\n label=\"Product\"\n name=\"product\"\n options={products}\n defaultValue={products[0]}\n isRequired\n hasRequiredIndicator\n triggerRef={triggerRef}\n />\n <Combobox\n label=\"Environments\"\n name=\"environment\"\n options={environments}\n defaultValue={[environments[0], environments[1]]}\n isMulti\n />\n <div className=\"flex flex-wrap gap-token-2\">\n <FilledButton type=\"submit\">Submit</FilledButton>\n <OutlinedButton type=\"reset\">Reset</OutlinedButton>\n <TextButton type=\"button\" onClick={() => triggerRef.current?.focus()}>\n Focus product\n </TextButton>\n </div>\n <div aria-live=\"polite\">\n <Typography variant=\"body-medium\">Submitted form data</Typography>\n <pre className=\"mt-token-2\">\n {submittedValues.length > 0\n ? submittedValues.join('\\n')\n : 'Submit the form to inspect its values.'}\n </pre>\n </div>\n </form>\n );\n};\n\nexport default Component;\n"]}

package/lib/cjs/combobox/stories/combobox-sizes.story.js CHANGED Viewed

@@ -28,6 +28,6 @@ const options = [
     { label: 'Aura', value: 'aura' },
     { label: 'Bloom', value: 'bloom' },
 ];
-const Component = () => ((0, jsx_runtime_1.jsx)("div", { className: "n-flex n-flex-col n-gap-token-16", children: ['small', 'medium', 'large'].map((size) => ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-token-4", children: [(0, jsx_runtime_1.jsx)("p", { className: "n-capitalize", children: size }), (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-wrap n-items-start n-gap-token-16", children: [(0, jsx_runtime_1.jsx)(react_1.Combobox, { label: `${size} single-select`, defaultValue: options[0], options: options, size: size }), (0, jsx_runtime_1.jsx)(react_1.Combobox, { label: `${size} multi-select`, defaultValue: options.slice(0, 2), isMulti: true, options: options, size: size })] })] }, size))) }));
+const Component = () => ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-token-16", children: ['small', 'medium', 'large'].map((size) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-token-4", children: [(0, jsx_runtime_1.jsx)("p", { className: "capitalize", children: size }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-start gap-token-16", children: [(0, jsx_runtime_1.jsx)(react_1.Combobox, { label: `${size} single-select`, defaultValue: options[0], options: options, size: size }), (0, jsx_runtime_1.jsx)(react_1.Combobox, { label: `${size} multi-select`, defaultValue: options.slice(0, 2), isMulti: true, options: options, size: size })] })] }, size))) }));
 exports.default = Component;
 //# sourceMappingURL=combobox-sizes.story.js.map