@neo4j-ndl/react 4.8.3 → 4.8.4

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 (85) hide show
  1. package/lib/cjs/accordion/Accordion.js +1 -1
  2. package/lib/cjs/accordion/Accordion.js.map +1 -1
  3. package/lib/cjs/ai/prompt/Prompt.js +1 -1
  4. package/lib/cjs/ai/prompt/Prompt.js.map +1 -1
  5. package/lib/cjs/ai/suggestion/Suggestion.js +1 -1
  6. package/lib/cjs/ai/suggestion/Suggestion.js.map +1 -1
  7. package/lib/cjs/breadcrumbs/Breadcrumbs.js +1 -1
  8. package/lib/cjs/breadcrumbs/Breadcrumbs.js.map +1 -1
  9. package/lib/cjs/breadcrumbs/stories/breadcrumbs-header.story.js +1 -1
  10. package/lib/cjs/breadcrumbs/stories/breadcrumbs-header.story.js.map +1 -1
  11. package/lib/cjs/color-picker/ColorPicker.js +1 -1
  12. package/lib/cjs/color-picker/ColorPicker.js.map +1 -1
  13. package/lib/cjs/date-picker/DatePicker.js +2 -2
  14. package/lib/cjs/date-picker/DatePicker.js.map +1 -1
  15. package/lib/cjs/graph-label/GraphLabel.js +5 -1
  16. package/lib/cjs/graph-label/GraphLabel.js.map +1 -1
  17. package/lib/cjs/inline-edit/InlineEdit.js +1 -1
  18. package/lib/cjs/inline-edit/InlineEdit.js.map +1 -1
  19. package/lib/cjs/select-icon-button/SelectIconButton.js +1 -1
  20. package/lib/cjs/select-icon-button/SelectIconButton.js.map +1 -1
  21. package/lib/cjs/side-navigation/SideNavigation.js +1 -1
  22. package/lib/cjs/side-navigation/SideNavigation.js.map +1 -1
  23. package/lib/cjs/tabs/Tabs.js +1 -1
  24. package/lib/cjs/tabs/Tabs.js.map +1 -1
  25. package/lib/cjs/timezone-picker/stories/timezone-picker-dst-aware.story.js +2 -2
  26. package/lib/cjs/timezone-picker/stories/timezone-picker-dst-aware.story.js.map +1 -1
  27. package/lib/cjs/tooltip/Tooltip.js +1 -1
  28. package/lib/cjs/tooltip/Tooltip.js.map +1 -1
  29. package/lib/cjs/tree-view/TreeItemWrapper.js +1 -1
  30. package/lib/cjs/tree-view/TreeItemWrapper.js.map +1 -1
  31. package/lib/cjs/tree-view/TreeViewTextItem.js +2 -2
  32. package/lib/cjs/tree-view/TreeViewTextItem.js.map +1 -1
  33. package/lib/cjs/tree-view/stories/treeview-custom.story.js +1 -1
  34. package/lib/cjs/tree-view/stories/treeview-custom.story.js.map +1 -1
  35. package/lib/esm/accordion/Accordion.js +1 -1
  36. package/lib/esm/accordion/Accordion.js.map +1 -1
  37. package/lib/esm/ai/prompt/Prompt.js +1 -1
  38. package/lib/esm/ai/prompt/Prompt.js.map +1 -1
  39. package/lib/esm/ai/suggestion/Suggestion.js +1 -1
  40. package/lib/esm/ai/suggestion/Suggestion.js.map +1 -1
  41. package/lib/esm/breadcrumbs/Breadcrumbs.js +1 -1
  42. package/lib/esm/breadcrumbs/Breadcrumbs.js.map +1 -1
  43. package/lib/esm/breadcrumbs/stories/breadcrumbs-header.story.js +1 -1
  44. package/lib/esm/breadcrumbs/stories/breadcrumbs-header.story.js.map +1 -1
  45. package/lib/esm/color-picker/ColorPicker.js +1 -1
  46. package/lib/esm/color-picker/ColorPicker.js.map +1 -1
  47. package/lib/esm/date-picker/DatePicker.js +2 -2
  48. package/lib/esm/date-picker/DatePicker.js.map +1 -1
  49. package/lib/esm/graph-label/GraphLabel.js +5 -1
  50. package/lib/esm/graph-label/GraphLabel.js.map +1 -1
  51. package/lib/esm/inline-edit/InlineEdit.js +1 -1
  52. package/lib/esm/inline-edit/InlineEdit.js.map +1 -1
  53. package/lib/esm/select-icon-button/SelectIconButton.js +1 -1
  54. package/lib/esm/select-icon-button/SelectIconButton.js.map +1 -1
  55. package/lib/esm/side-navigation/SideNavigation.js +1 -1
  56. package/lib/esm/side-navigation/SideNavigation.js.map +1 -1
  57. package/lib/esm/tabs/Tabs.js +1 -1
  58. package/lib/esm/tabs/Tabs.js.map +1 -1
  59. package/lib/esm/timezone-picker/stories/timezone-picker-dst-aware.story.js +2 -2
  60. package/lib/esm/timezone-picker/stories/timezone-picker-dst-aware.story.js.map +1 -1
  61. package/lib/esm/tooltip/Tooltip.js +1 -1
  62. package/lib/esm/tooltip/Tooltip.js.map +1 -1
  63. package/lib/esm/tree-view/TreeItemWrapper.js +1 -1
  64. package/lib/esm/tree-view/TreeItemWrapper.js.map +1 -1
  65. package/lib/esm/tree-view/TreeViewTextItem.js +2 -2
  66. package/lib/esm/tree-view/TreeViewTextItem.js.map +1 -1
  67. package/lib/esm/tree-view/stories/treeview-custom.story.js +1 -1
  68. package/lib/esm/tree-view/stories/treeview-custom.story.js.map +1 -1
  69. package/lib/types/accordion/Accordion.d.ts.map +1 -1
  70. package/lib/types/ai/prompt/Prompt.d.ts.map +1 -1
  71. package/lib/types/ai/suggestion/Suggestion.d.ts.map +1 -1
  72. package/lib/types/breadcrumbs/Breadcrumbs.d.ts.map +1 -1
  73. package/lib/types/breadcrumbs/stories/breadcrumbs-header.story.d.ts.map +1 -1
  74. package/lib/types/date-picker/DatePicker.d.ts.map +1 -1
  75. package/lib/types/graph-label/GraphLabel.d.ts.map +1 -1
  76. package/lib/types/inline-edit/InlineEdit.d.ts.map +1 -1
  77. package/lib/types/select-icon-button/SelectIconButton.d.ts.map +1 -1
  78. package/lib/types/side-navigation/SideNavigation.d.ts.map +1 -1
  79. package/lib/types/tabs/Tabs.d.ts.map +1 -1
  80. package/lib/types/timezone-picker/stories/timezone-picker-dst-aware.story.d.ts.map +1 -1
  81. package/lib/types/tooltip/Tooltip.d.ts.map +1 -1
  82. package/lib/types/tree-view/TreeItemWrapper.d.ts.map +1 -1
  83. package/lib/types/tree-view/TreeViewTextItem.d.ts.map +1 -1
  84. package/lib/types/tree-view/stories/treeview-custom.story.d.ts.map +1 -1
  85. package/package.json +1 -1
@@ -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';\nimport { Select } from '../select';\nimport { TextInput } from '../text-input';\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\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 },\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;\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 });\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\"\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 });\n }}\n radius={tokens.borderRadius['lg']}\n pointer={(props) => (\n <Pointer\n {...props}\n hsva={{\n a: 1,\n h: hsva.h,\n s: 100,\n v: 100,\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 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 = (e: React.ChangeEvent<HTMLInputElement>) => {\n const value = removeHashPrefix(e.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: (e) => {\n e.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,\n g: rgba.g,\n r: rgba.r,\n });\n\n // Update input values when hsva changes from outside\n useEffect(() => {\n const newRgba = hsvaToRgba(hsva);\n setRgbValues({\n b: newRgba.b,\n g: newRgba.g,\n r: newRgba.r,\n });\n }, [hsva]);\n\n const handleChange = (\n channel: 'r' | 'g' | 'b',\n e: React.ChangeEvent<HTMLInputElement>,\n ) => {\n const value = parseInt(e.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={(e) => handleChange('r', e)}\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={(e) => handleChange('g', e)}\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={(e) => handleChange('b', e)}\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 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';\nimport { Select } from '../select';\nimport { TextInput } from '../text-input';\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\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 },\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;\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 });\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\"\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 });\n }}\n radius={tokens.borderRadius['lg']}\n pointer={(props) => (\n <Pointer\n {...props}\n hsva={{\n a: 1,\n h: hsva.h,\n s: 100,\n v: 100,\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 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 = (e: React.ChangeEvent<HTMLInputElement>) => {\n const value = removeHashPrefix(e.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: (e) => {\n e.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,\n g: rgba.g,\n r: rgba.r,\n });\n\n // Update input values when hsva changes from outside\n useEffect(() => {\n const newRgba = hsvaToRgba(hsva);\n setRgbValues({\n b: newRgba.b,\n g: newRgba.g,\n r: newRgba.r,\n });\n }, [hsva]);\n\n const handleChange = (\n channel: 'r' | 'g' | 'b',\n e: React.ChangeEvent<HTMLInputElement>,\n ) => {\n const value = parseInt(e.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={(e) => handleChange('r', e)}\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={(e) => handleChange('g', e)}\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={(e) => handleChange('b', e)}\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"]}
@@ -75,9 +75,9 @@ export const DatePicker = (_a) => {
75
75
  const nextCallback = picker === 'year' ? increaseYear : increaseMonth;
76
76
  const prevDisabled = picker === 'year' ? prevYearButtonDisabled : prevMonthButtonDisabled;
77
77
  const nextDisabled = picker === 'year' ? nextYearButtonDisabled : nextMonthButtonDisabled;
78
- return (_jsxs("div", { className: "ndl-datepicker-header", children: [_jsxs("div", { className: "ndl-datepicker-selects", children: [picker !== 'year' && (_jsx("button", { "aria-label": `${picker === 'month' ? 'Close' : 'Open'} month picker`, "aria-pressed": picker === 'month', onClick: () => headerAction('month'), children: _jsxs("div", { className: "n-flex n-items-center n-gap-token-4", children: [_jsx(Typography, { variant: "subheading-small", children: format(props.date, 'MMM') }), _jsx(ChevronDownIconOutline, { className: classNames('ndl-datepicker-chevron', {
78
+ return (_jsxs("div", { className: "ndl-datepicker-header", children: [_jsxs("div", { className: "ndl-datepicker-selects", children: [picker !== 'year' && (_jsx("button", { type: "button", "aria-label": `${picker === 'month' ? 'Close' : 'Open'} month picker`, "aria-pressed": picker === 'month', onClick: () => headerAction('month'), children: _jsxs("div", { className: "n-flex n-items-center n-gap-token-4", children: [_jsx(Typography, { variant: "subheading-small", children: format(props.date, 'MMM') }), _jsx(ChevronDownIconOutline, { className: classNames('ndl-datepicker-chevron', {
79
79
  'n-rotate-180': picker === 'month',
80
- }), "aria-label": "Chevron icon" })] }) })), picker !== 'month' && (_jsx("button", { "aria-label": `${picker === 'year' ? 'Close' : 'Open'} year picker`, onClick: () => headerAction('year'), children: _jsxs("div", { className: "n-flex n-items-center n-gap-token-4", children: [_jsx(Typography, { variant: "subheading-small", children: picker === 'year'
80
+ }), "aria-label": "Chevron icon" })] }) })), picker !== 'month' && (_jsx("button", { type: "button", "aria-label": `${picker === 'year' ? 'Close' : 'Open'} year picker`, onClick: () => headerAction('year'), children: _jsxs("div", { className: "n-flex n-items-center n-gap-token-4", children: [_jsx(Typography, { variant: "subheading-small", children: picker === 'year'
81
81
  ? getYearsPeriodString(props.date, reactDatePickerProps === null || reactDatePickerProps === void 0 ? void 0 : reactDatePickerProps.yearItemNumber)
82
82
  : format(props.date, 'yyyy') }), _jsx(ChevronDownIconOutline, { className: classNames('ndl-datepicker-chevron', {
83
83
  'n-rotate-180': picker === 'year',
@@ -1 +1 @@
1
- {"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../src/date-picker/DatePicker.tsx"],"names":[],"mappings":"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","sourcesContent":["// TODO: try to fix as some point\n/* eslint-disable @typescript-eslint/naming-convention */\n\n/**\n *\n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n *\n * This file is part of Neo4j.\n *\n * Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\nimport classNames from 'classnames';\nimport { format } from 'date-fns';\nimport { useCallback, useRef, useState } from 'react';\nimport ReactDatePicker, {\n type ReactDatePickerCustomHeaderProps,\n} from 'react-datepicker';\n\nimport type { CommonProps, HtmlAttributes } from '../_common/types';\nimport { CleanIconButton } from '../clean-icon-button';\nimport { useIsInsideDialog } from '../dialog/dialog-context';\nimport { Divider } from '../divider';\nimport {\n ArrowLeftIconOutline,\n ArrowRightIconOutline,\n CalendarDaysIconOutline,\n ChevronDownIconOutline,\n} from '../icons';\nimport { TextInput } from '../text-input';\nimport { NeedleTime, TimePicker, type TimePickerProps } from '../time-picker';\nimport { TimeZonePicker } from '../timezone-picker';\nimport { Typography } from '../typography';\nimport { daysInMonth, getYearsPeriodString } from './utils';\n\ntype DatePickerTextInputWrapperProps = React.ComponentProps<'input'> & {\n textInputProps?: React.ComponentProps<typeof TextInput>;\n isDisabled?: boolean;\n value?: string;\n ariaLabel?: string;\n};\n\n// This wrapper is needed due to react-datepicker injecting html attributes\n// into the custom input component on root level, since we use htmlAttributes\n// we need to help spread them there instead of the root level\nconst DatePickerTextInputWrapper = ({\n textInputProps,\n isDisabled,\n value,\n placeholder,\n ...restProps\n}: DatePickerTextInputWrapperProps) => {\n // deconstruct textInputProps to avoid bugs with react-datepicker injecting props\n const {\n placeholder: textInputPlaceholder,\n htmlAttributes: textInputHtmlAttributes,\n ref,\n ...restTextInputProps\n } = textInputProps ?? {};\n\n return (\n <TextInput\n ref={ref}\n trailingElement={<CalendarDaysIconOutline />}\n value={value}\n placeholder={placeholder ?? textInputPlaceholder}\n isDisabled={isDisabled}\n // react-datepicker injects html attributes into the custom input\n htmlAttributes={{\n ...textInputHtmlAttributes,\n ...restProps,\n }}\n {...restTextInputProps}\n />\n );\n};\n\n/**\n *\n *\n * Types\n *\n *\n */\n\ntype PickerType = 'day' | 'month' | 'year';\n\n// Define a more flexible type for onChange\ntype DatePickerChangeHandler = (\n date: Date | null | [Date | null, Date | null] | Date[],\n event?: React.SyntheticEvent | undefined,\n) => void;\n\ninterface DatePickerProps {\n /** Props for the embedded `TextInput` component. */\n textInputProps?: React.ComponentProps<typeof TextInput>;\n /** Whether the date picker is disabled. */\n isDisabled?: boolean;\n /** Props for the embedded `TimePicker` component. */\n timePickerProps?: TimePickerProps;\n /** Props for the embedded `TimeZonePicker` component. */\n timeZonePickerProps?: React.ComponentProps<typeof TimeZonePicker>;\n /** Props forwarded to underlying `react-datepicker` component. */\n reactDatePickerProps: React.ComponentProps<typeof ReactDatePicker>;\n /**\n * WARNING: these attributes do not apply to the underlying input element currently. This will be fixed in a future version.\n */\n htmlAttributes?: HtmlAttributes<'div'>;\n}\n\nexport const DatePicker = ({\n reactDatePickerProps,\n textInputProps,\n timePickerProps,\n timeZonePickerProps,\n isDisabled,\n ref,\n className,\n style,\n htmlAttributes,\n ...restProps\n}: CommonProps<'div', DatePickerProps>) => {\n const classes = classNames(`ndl-datepicker`, className, {});\n const datetimeRef = useRef<ReactDatePicker>(null);\n const [picker, setPicker] = useState<PickerType>('day');\n const [preSelectedDate, setPreSelectedDate] = useState<Date | null>(\n (reactDatePickerProps.selected as Date | null) ||\n (reactDatePickerProps.startDate as Date | null),\n );\n const [selectedTimeZone, setSelectedTimeZone] = useState<string | undefined>(\n timeZonePickerProps?.value,\n );\n\n const isInsideDialog = useIsInsideDialog();\n\n const headerAction = useCallback(\n (action: PickerType) => {\n setPicker(picker === action ? 'day' : action);\n },\n [picker],\n );\n\n const CustomHeader = useCallback(\n (props: ReactDatePickerCustomHeaderProps) => {\n const {\n decreaseMonth,\n increaseMonth,\n increaseYear,\n decreaseYear,\n nextMonthButtonDisabled,\n nextYearButtonDisabled,\n prevMonthButtonDisabled,\n prevYearButtonDisabled,\n } = props;\n\n const prevCallback = picker === 'year' ? decreaseYear : decreaseMonth;\n const nextCallback = picker === 'year' ? increaseYear : increaseMonth;\n const prevDisabled =\n picker === 'year' ? prevYearButtonDisabled : prevMonthButtonDisabled;\n const nextDisabled =\n picker === 'year' ? nextYearButtonDisabled : nextMonthButtonDisabled;\n\n return (\n <div className=\"ndl-datepicker-header\">\n <div className=\"ndl-datepicker-selects\">\n {picker !== 'year' && (\n <button\n aria-label={`${picker === 'month' ? 'Close' : 'Open'} month picker`}\n aria-pressed={picker === 'month'}\n onClick={() => headerAction('month')}\n >\n <div className=\"n-flex n-items-center n-gap-token-4\">\n <Typography variant=\"subheading-small\">\n {format(props.date, 'MMM')}\n </Typography>\n <ChevronDownIconOutline\n className={classNames('ndl-datepicker-chevron', {\n 'n-rotate-180': picker === 'month',\n })}\n aria-label=\"Chevron icon\"\n />\n </div>\n </button>\n )}\n {picker !== 'month' && (\n <button\n aria-label={`${picker === 'year' ? 'Close' : 'Open'} year picker`}\n onClick={() => headerAction('year')}\n >\n <div className=\"n-flex n-items-center n-gap-token-4\">\n <Typography variant=\"subheading-small\">\n {picker === 'year'\n ? getYearsPeriodString(\n props.date,\n reactDatePickerProps?.yearItemNumber,\n )\n : format(props.date, 'yyyy')}\n </Typography>\n <ChevronDownIconOutline\n className={classNames('ndl-datepicker-chevron', {\n 'n-rotate-180': picker === 'year',\n })}\n aria-label=\"Chevron icon\"\n />\n </div>\n </button>\n )}\n </div>\n {picker !== 'month' && (\n <div className=\"n-flex n-justify-center n-gap-token-16\">\n <CleanIconButton\n description={\n picker === 'year' ? 'Previous period' : 'Previous month'\n }\n onClick={prevCallback}\n isDisabled={prevDisabled}\n className=\"n-text-neutral-text-weak\"\n size=\"small\"\n >\n <ArrowLeftIconOutline />\n </CleanIconButton>\n <CleanIconButton\n description={picker === 'year' ? 'Next period' : 'Next month'}\n onClick={nextCallback}\n isDisabled={nextDisabled}\n className=\"n-text-neutral-text-weak\"\n size=\"small\"\n >\n <ArrowRightIconOutline />\n </CleanIconButton>\n </div>\n )}\n </div>\n );\n },\n [picker, headerAction, reactDatePickerProps?.yearItemNumber],\n );\n\n const handleTimeChange = (newTime: NeedleTime) => {\n if (\n reactDatePickerProps.selectsRange ||\n reactDatePickerProps.selectsMultiple\n ) {\n // this is consistent with the behavior of react-datepicker\n return;\n }\n\n if (!preSelectedDate) {\n return;\n }\n\n const newDate = new Date(preSelectedDate);\n newDate.setHours(newTime.hour, newTime.minute, 0, 0);\n setPreSelectedDate(newDate);\n\n if (reactDatePickerProps.onChange) {\n // For single date selection\n reactDatePickerProps.onChange(newDate, undefined);\n }\n };\n\n const handleTimeZoneChange = (timezone: string) => {\n setSelectedTimeZone(timezone);\n if (timeZonePickerProps?.onChange) {\n timeZonePickerProps.onChange(timezone);\n }\n };\n\n /**\n * Intercept onChange so we can work with\n * Month and Year pickers\n */\n const interceptedChange: DatePickerChangeHandler = useCallback(\n (\n date: Date | null | [Date | null, Date | null] | Date[],\n event?: React.SyntheticEvent,\n ) => {\n if (picker !== 'day') {\n // setTimeout to prevent picker change before the handleMonthChange logic\n setTimeout(() => {\n setPicker('day');\n });\n } else if (picker === 'day') {\n if (date instanceof Date) {\n setPreSelectedDate(date);\n } else if (\n Array.isArray(date) &&\n date.length > 0 &&\n date[0] instanceof Date\n ) {\n setPreSelectedDate(date[0]);\n } else if (date === null) {\n setPreSelectedDate(null);\n }\n\n if (reactDatePickerProps.onChange && date !== null) {\n (reactDatePickerProps.onChange as DatePickerChangeHandler)(\n date,\n event,\n );\n }\n }\n },\n [picker, reactDatePickerProps],\n );\n\n /**\n * Intercept onCalendarClose so we can\n * switch to \"day\" picker if we close on \"month\" or \"year\"\n * view\n */\n const interceptedOnCalendarClose = useCallback(() => {\n if (picker !== 'day') {\n setPicker('day');\n }\n reactDatePickerProps?.onCalendarClose?.();\n }, [picker, reactDatePickerProps]);\n\n const handleMonthChange = useCallback(\n (date: Date) => {\n if (picker === 'month') {\n const selectedDay = preSelectedDate?.getDate() ?? 1;\n const daysInNewMonth = daysInMonth(date.getMonth(), date.getFullYear());\n date.setDate(Math.min(selectedDay, daysInNewMonth));\n reactDatePickerProps?.onMonthChange?.(date);\n } else if (picker === 'year') {\n const selectedDay = preSelectedDate?.getDate() ?? 1;\n const selectedMonth = preSelectedDate?.getMonth() ?? 0;\n const daysInNewMonth = daysInMonth(selectedMonth, date.getFullYear());\n date.setMonth(selectedMonth, Math.min(selectedDay, daysInNewMonth));\n reactDatePickerProps?.onMonthChange?.(date);\n }\n setPreSelectedDate(date);\n },\n [picker, preSelectedDate, reactDatePickerProps],\n );\n\n /**\n * Intercept onChangeRaw to handle clearing the input\n * When the user clears the text input, set the date to null\n */\n const interceptedOnChangeRaw = useCallback(\n (\n event?:\n | React.KeyboardEvent<HTMLElement>\n | React.MouseEvent<HTMLElement, MouseEvent>,\n ) => {\n const target = event?.target as HTMLInputElement | undefined;\n if (target?.value === '') {\n setPreSelectedDate(null);\n if (reactDatePickerProps.onChange) {\n (reactDatePickerProps.onChange as DatePickerChangeHandler)(\n null,\n event,\n );\n }\n }\n reactDatePickerProps?.onChangeRaw?.(event);\n },\n [reactDatePickerProps],\n );\n\n const datePickerProps = {\n ...reactDatePickerProps,\n onCalendarClose: interceptedOnCalendarClose,\n onChange: interceptedChange,\n onChangeRaw: interceptedOnChangeRaw,\n onMonthChange: handleMonthChange,\n };\n\n return (\n <div\n className={classes}\n ref={ref}\n style={style}\n {...restProps}\n {...htmlAttributes}\n >\n {/** TODO v5: Remove the div wrapper, type the component as an input, and apply all root props to the TextInput */}\n <ReactDatePicker\n ref={datetimeRef}\n customInput={\n <DatePickerTextInputWrapper\n isDisabled={isDisabled}\n textInputProps={textInputProps}\n />\n }\n customTimeInput={\n <span className=\"ndl-time-picker-wrapper\">\n <Divider />\n <TimePicker\n isFluid\n value={\n preSelectedDate\n ? new NeedleTime(\n preSelectedDate.getHours(),\n preSelectedDate.getMinutes(),\n )\n : undefined\n }\n onChange={handleTimeChange}\n {...timePickerProps}\n floatingStrategy=\"absolute\"\n isPortaled={false}\n />\n {timeZonePickerProps && (\n <TimeZonePicker\n isFluid\n value={selectedTimeZone}\n onChange={handleTimeZoneChange}\n referenceDate={preSelectedDate || undefined}\n {...timeZonePickerProps}\n floatingStrategy=\"absolute\"\n isPortaled={false}\n />\n )}\n </span>\n }\n disabled={isDisabled}\n showPopperArrow={false}\n showMonthYearPicker={picker === 'month'}\n showYearPicker={picker === 'year'}\n shouldCloseOnSelect={\n picker === 'day' && !(reactDatePickerProps.showTimeInput ?? false)\n }\n dayClassName={() => 'ndl-datepicker-day'}\n renderCustomHeader={CustomHeader}\n {...datePickerProps}\n popperClassName={classNames(\n 'ndl-datepicker-popper',\n reactDatePickerProps.popperClassName,\n )}\n popperProps={{\n strategy: isInsideDialog ? 'fixed' : 'absolute',\n ...reactDatePickerProps.popperProps,\n }}\n />\n </div>\n );\n};\n"]}
1
+ {"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../src/date-picker/DatePicker.tsx"],"names":[],"mappings":"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","sourcesContent":["// TODO: try to fix as some point\n/* eslint-disable @typescript-eslint/naming-convention */\n\n/**\n *\n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n *\n * This file is part of Neo4j.\n *\n * Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\nimport classNames from 'classnames';\nimport { format } from 'date-fns';\nimport { useCallback, useRef, useState } from 'react';\nimport ReactDatePicker, {\n type ReactDatePickerCustomHeaderProps,\n} from 'react-datepicker';\n\nimport type { CommonProps, HtmlAttributes } from '../_common/types';\nimport { CleanIconButton } from '../clean-icon-button';\nimport { useIsInsideDialog } from '../dialog/dialog-context';\nimport { Divider } from '../divider';\nimport {\n ArrowLeftIconOutline,\n ArrowRightIconOutline,\n CalendarDaysIconOutline,\n ChevronDownIconOutline,\n} from '../icons';\nimport { TextInput } from '../text-input';\nimport { NeedleTime, TimePicker, type TimePickerProps } from '../time-picker';\nimport { TimeZonePicker } from '../timezone-picker';\nimport { Typography } from '../typography';\nimport { daysInMonth, getYearsPeriodString } from './utils';\n\ntype DatePickerTextInputWrapperProps = React.ComponentProps<'input'> & {\n textInputProps?: React.ComponentProps<typeof TextInput>;\n isDisabled?: boolean;\n value?: string;\n ariaLabel?: string;\n};\n\n// This wrapper is needed due to react-datepicker injecting html attributes\n// into the custom input component on root level, since we use htmlAttributes\n// we need to help spread them there instead of the root level\nconst DatePickerTextInputWrapper = ({\n textInputProps,\n isDisabled,\n value,\n placeholder,\n ...restProps\n}: DatePickerTextInputWrapperProps) => {\n // deconstruct textInputProps to avoid bugs with react-datepicker injecting props\n const {\n placeholder: textInputPlaceholder,\n htmlAttributes: textInputHtmlAttributes,\n ref,\n ...restTextInputProps\n } = textInputProps ?? {};\n\n return (\n <TextInput\n ref={ref}\n trailingElement={<CalendarDaysIconOutline />}\n value={value}\n placeholder={placeholder ?? textInputPlaceholder}\n isDisabled={isDisabled}\n // react-datepicker injects html attributes into the custom input\n htmlAttributes={{\n ...textInputHtmlAttributes,\n ...restProps,\n }}\n {...restTextInputProps}\n />\n );\n};\n\n/**\n *\n *\n * Types\n *\n *\n */\n\ntype PickerType = 'day' | 'month' | 'year';\n\n// Define a more flexible type for onChange\ntype DatePickerChangeHandler = (\n date: Date | null | [Date | null, Date | null] | Date[],\n event?: React.SyntheticEvent | undefined,\n) => void;\n\ninterface DatePickerProps {\n /** Props for the embedded `TextInput` component. */\n textInputProps?: React.ComponentProps<typeof TextInput>;\n /** Whether the date picker is disabled. */\n isDisabled?: boolean;\n /** Props for the embedded `TimePicker` component. */\n timePickerProps?: TimePickerProps;\n /** Props for the embedded `TimeZonePicker` component. */\n timeZonePickerProps?: React.ComponentProps<typeof TimeZonePicker>;\n /** Props forwarded to underlying `react-datepicker` component. */\n reactDatePickerProps: React.ComponentProps<typeof ReactDatePicker>;\n /**\n * WARNING: these attributes do not apply to the underlying input element currently. This will be fixed in a future version.\n */\n htmlAttributes?: HtmlAttributes<'div'>;\n}\n\nexport const DatePicker = ({\n reactDatePickerProps,\n textInputProps,\n timePickerProps,\n timeZonePickerProps,\n isDisabled,\n ref,\n className,\n style,\n htmlAttributes,\n ...restProps\n}: CommonProps<'div', DatePickerProps>) => {\n const classes = classNames(`ndl-datepicker`, className, {});\n const datetimeRef = useRef<ReactDatePicker>(null);\n const [picker, setPicker] = useState<PickerType>('day');\n const [preSelectedDate, setPreSelectedDate] = useState<Date | null>(\n (reactDatePickerProps.selected as Date | null) ||\n (reactDatePickerProps.startDate as Date | null),\n );\n const [selectedTimeZone, setSelectedTimeZone] = useState<string | undefined>(\n timeZonePickerProps?.value,\n );\n\n const isInsideDialog = useIsInsideDialog();\n\n const headerAction = useCallback(\n (action: PickerType) => {\n setPicker(picker === action ? 'day' : action);\n },\n [picker],\n );\n\n const CustomHeader = useCallback(\n (props: ReactDatePickerCustomHeaderProps) => {\n const {\n decreaseMonth,\n increaseMonth,\n increaseYear,\n decreaseYear,\n nextMonthButtonDisabled,\n nextYearButtonDisabled,\n prevMonthButtonDisabled,\n prevYearButtonDisabled,\n } = props;\n\n const prevCallback = picker === 'year' ? decreaseYear : decreaseMonth;\n const nextCallback = picker === 'year' ? increaseYear : increaseMonth;\n const prevDisabled =\n picker === 'year' ? prevYearButtonDisabled : prevMonthButtonDisabled;\n const nextDisabled =\n picker === 'year' ? nextYearButtonDisabled : nextMonthButtonDisabled;\n\n return (\n <div className=\"ndl-datepicker-header\">\n <div className=\"ndl-datepicker-selects\">\n {picker !== 'year' && (\n <button\n type=\"button\"\n aria-label={`${picker === 'month' ? 'Close' : 'Open'} month picker`}\n aria-pressed={picker === 'month'}\n onClick={() => headerAction('month')}\n >\n <div className=\"n-flex n-items-center n-gap-token-4\">\n <Typography variant=\"subheading-small\">\n {format(props.date, 'MMM')}\n </Typography>\n <ChevronDownIconOutline\n className={classNames('ndl-datepicker-chevron', {\n 'n-rotate-180': picker === 'month',\n })}\n aria-label=\"Chevron icon\"\n />\n </div>\n </button>\n )}\n {picker !== 'month' && (\n <button\n type=\"button\"\n aria-label={`${picker === 'year' ? 'Close' : 'Open'} year picker`}\n onClick={() => headerAction('year')}\n >\n <div className=\"n-flex n-items-center n-gap-token-4\">\n <Typography variant=\"subheading-small\">\n {picker === 'year'\n ? getYearsPeriodString(\n props.date,\n reactDatePickerProps?.yearItemNumber,\n )\n : format(props.date, 'yyyy')}\n </Typography>\n <ChevronDownIconOutline\n className={classNames('ndl-datepicker-chevron', {\n 'n-rotate-180': picker === 'year',\n })}\n aria-label=\"Chevron icon\"\n />\n </div>\n </button>\n )}\n </div>\n {picker !== 'month' && (\n <div className=\"n-flex n-justify-center n-gap-token-16\">\n <CleanIconButton\n description={\n picker === 'year' ? 'Previous period' : 'Previous month'\n }\n onClick={prevCallback}\n isDisabled={prevDisabled}\n className=\"n-text-neutral-text-weak\"\n size=\"small\"\n >\n <ArrowLeftIconOutline />\n </CleanIconButton>\n <CleanIconButton\n description={picker === 'year' ? 'Next period' : 'Next month'}\n onClick={nextCallback}\n isDisabled={nextDisabled}\n className=\"n-text-neutral-text-weak\"\n size=\"small\"\n >\n <ArrowRightIconOutline />\n </CleanIconButton>\n </div>\n )}\n </div>\n );\n },\n [picker, headerAction, reactDatePickerProps?.yearItemNumber],\n );\n\n const handleTimeChange = (newTime: NeedleTime) => {\n if (\n reactDatePickerProps.selectsRange ||\n reactDatePickerProps.selectsMultiple\n ) {\n // this is consistent with the behavior of react-datepicker\n return;\n }\n\n if (!preSelectedDate) {\n return;\n }\n\n const newDate = new Date(preSelectedDate);\n newDate.setHours(newTime.hour, newTime.minute, 0, 0);\n setPreSelectedDate(newDate);\n\n if (reactDatePickerProps.onChange) {\n // For single date selection\n reactDatePickerProps.onChange(newDate, undefined);\n }\n };\n\n const handleTimeZoneChange = (timezone: string) => {\n setSelectedTimeZone(timezone);\n if (timeZonePickerProps?.onChange) {\n timeZonePickerProps.onChange(timezone);\n }\n };\n\n /**\n * Intercept onChange so we can work with\n * Month and Year pickers\n */\n const interceptedChange: DatePickerChangeHandler = useCallback(\n (\n date: Date | null | [Date | null, Date | null] | Date[],\n event?: React.SyntheticEvent,\n ) => {\n if (picker !== 'day') {\n // setTimeout to prevent picker change before the handleMonthChange logic\n setTimeout(() => {\n setPicker('day');\n });\n } else if (picker === 'day') {\n if (date instanceof Date) {\n setPreSelectedDate(date);\n } else if (\n Array.isArray(date) &&\n date.length > 0 &&\n date[0] instanceof Date\n ) {\n setPreSelectedDate(date[0]);\n } else if (date === null) {\n setPreSelectedDate(null);\n }\n\n if (reactDatePickerProps.onChange && date !== null) {\n (reactDatePickerProps.onChange as DatePickerChangeHandler)(\n date,\n event,\n );\n }\n }\n },\n [picker, reactDatePickerProps],\n );\n\n /**\n * Intercept onCalendarClose so we can\n * switch to \"day\" picker if we close on \"month\" or \"year\"\n * view\n */\n const interceptedOnCalendarClose = useCallback(() => {\n if (picker !== 'day') {\n setPicker('day');\n }\n reactDatePickerProps?.onCalendarClose?.();\n }, [picker, reactDatePickerProps]);\n\n const handleMonthChange = useCallback(\n (date: Date) => {\n if (picker === 'month') {\n const selectedDay = preSelectedDate?.getDate() ?? 1;\n const daysInNewMonth = daysInMonth(date.getMonth(), date.getFullYear());\n date.setDate(Math.min(selectedDay, daysInNewMonth));\n reactDatePickerProps?.onMonthChange?.(date);\n } else if (picker === 'year') {\n const selectedDay = preSelectedDate?.getDate() ?? 1;\n const selectedMonth = preSelectedDate?.getMonth() ?? 0;\n const daysInNewMonth = daysInMonth(selectedMonth, date.getFullYear());\n date.setMonth(selectedMonth, Math.min(selectedDay, daysInNewMonth));\n reactDatePickerProps?.onMonthChange?.(date);\n }\n setPreSelectedDate(date);\n },\n [picker, preSelectedDate, reactDatePickerProps],\n );\n\n /**\n * Intercept onChangeRaw to handle clearing the input\n * When the user clears the text input, set the date to null\n */\n const interceptedOnChangeRaw = useCallback(\n (\n event?:\n | React.KeyboardEvent<HTMLElement>\n | React.MouseEvent<HTMLElement, MouseEvent>,\n ) => {\n const target = event?.target as HTMLInputElement | undefined;\n if (target?.value === '') {\n setPreSelectedDate(null);\n if (reactDatePickerProps.onChange) {\n (reactDatePickerProps.onChange as DatePickerChangeHandler)(\n null,\n event,\n );\n }\n }\n reactDatePickerProps?.onChangeRaw?.(event);\n },\n [reactDatePickerProps],\n );\n\n const datePickerProps = {\n ...reactDatePickerProps,\n onCalendarClose: interceptedOnCalendarClose,\n onChange: interceptedChange,\n onChangeRaw: interceptedOnChangeRaw,\n onMonthChange: handleMonthChange,\n };\n\n return (\n <div\n className={classes}\n ref={ref}\n style={style}\n {...restProps}\n {...htmlAttributes}\n >\n {/** TODO v5: Remove the div wrapper, type the component as an input, and apply all root props to the TextInput */}\n <ReactDatePicker\n ref={datetimeRef}\n customInput={\n <DatePickerTextInputWrapper\n isDisabled={isDisabled}\n textInputProps={textInputProps}\n />\n }\n customTimeInput={\n <span className=\"ndl-time-picker-wrapper\">\n <Divider />\n <TimePicker\n isFluid\n value={\n preSelectedDate\n ? new NeedleTime(\n preSelectedDate.getHours(),\n preSelectedDate.getMinutes(),\n )\n : undefined\n }\n onChange={handleTimeChange}\n {...timePickerProps}\n floatingStrategy=\"absolute\"\n isPortaled={false}\n />\n {timeZonePickerProps && (\n <TimeZonePicker\n isFluid\n value={selectedTimeZone}\n onChange={handleTimeZoneChange}\n referenceDate={preSelectedDate || undefined}\n {...timeZonePickerProps}\n floatingStrategy=\"absolute\"\n isPortaled={false}\n />\n )}\n </span>\n }\n disabled={isDisabled}\n showPopperArrow={false}\n showMonthYearPicker={picker === 'month'}\n showYearPicker={picker === 'year'}\n shouldCloseOnSelect={\n picker === 'day' && !(reactDatePickerProps.showTimeInput ?? false)\n }\n dayClassName={() => 'ndl-datepicker-day'}\n renderCustomHeader={CustomHeader}\n {...datePickerProps}\n popperClassName={classNames(\n 'ndl-datepicker-popper',\n reactDatePickerProps.popperClassName,\n )}\n popperProps={{\n strategy: isInsideDialog ? 'fixed' : 'absolute',\n ...reactDatePickerProps.popperProps,\n }}\n />\n </div>\n );\n};\n"]}
@@ -130,6 +130,7 @@ export const GraphLabel = (_a) => {
130
130
  onClick: handleClick,
131
131
  onMouseEnter: handleMouseEnter,
132
132
  onMouseLeave: handleMouseLeave,
133
+ type: 'button',
133
134
  }), htmlAttributes, { children: _jsx("div", { className: "ndl-node-label-content", children: children }) })));
134
135
  }
135
136
  else if (type === 'relationship' ||
@@ -142,13 +143,16 @@ export const GraphLabel = (_a) => {
142
143
  onClick: handleClick,
143
144
  onMouseEnter: handleMouseEnter,
144
145
  onMouseLeave: handleMouseLeave,
146
+ type: 'button',
145
147
  }), { ref: ref }, restProps, htmlAttributes, { children: [type === 'relationshipLeft' || type === 'relationship' ? (_jsx(HexagonEnd, { direction: "left", color: backgroundColor, height: height })) : (_jsx(SquareEnd, { direction: "left", color: backgroundColor, height: height })), _jsxs("div", { className: "ndl-relationship-label-container", style: {
146
148
  backgroundColor: backgroundColor,
147
149
  }, children: [_jsx("div", { className: "ndl-relationship-label-content", children: children }), _jsx(HorizontalLines, { height: height })] }), type === 'relationshipRight' || type === 'relationship' ? (_jsx(HexagonEnd, { direction: "right", color: backgroundColor, height: height })) : (_jsx(SquareEnd, { direction: "right", color: backgroundColor, height: height }))] })));
148
150
  }
149
151
  else {
150
152
  const classes = classNames('ndl-property-key-label', commonClasses);
151
- return (_jsx(Component, Object.assign({ style: Object.assign({ backgroundColor: backgroundColor, color: isDisabled ? disabledTextColor : textColor, maxWidth: isFluid ? '100%' : MAX_WIDTH }, style), className: classes, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: ref }, htmlAttributes, { children: _jsx("div", { className: "ndl-property-key-label-content", children: children }) })));
153
+ return (_jsx(Component, Object.assign({}, (isButton && {
154
+ type: 'button',
155
+ }), { style: Object.assign({ backgroundColor: backgroundColor, color: isDisabled ? disabledTextColor : textColor, maxWidth: isFluid ? '100%' : MAX_WIDTH }, style), className: classes, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: ref }, htmlAttributes, { children: _jsx("div", { className: "ndl-property-key-label-content", children: children }) })));
152
156
  }
153
157
  };
154
158
  //# sourceMappingURL=GraphLabel.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"GraphLabel.js","sourceRoot":"","sources":["../../../src/graph-label/GraphLabel.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAM1C,OAAO,EACL,oBAAoB,EACpB,aAAa,EACb,0BAA0B,GAC3B,MAAM,SAAS,CAAC;AAgDjB;;;;;;GAMG;AAEH,MAAM,UAAU,GAAG,CAAC,EAClB,SAAS,GAAG,MAAM,EAClB,KAAK,EACL,cAAc,EACd,MAAM,GAAG,EAAE,GACK,EAAE,EAAE;IACpB,MAAM,OAAO,GAAG,UAAU,CAAC,iBAAiB,EAAE;QAC5C,UAAU,EAAE,SAAS,KAAK,MAAM;QAChC,WAAW,EAAE,SAAS,KAAK,OAAO;KACnC,CAAC,CAAC;IAEH,OAAO,CACL,6BAAK,SAAS,EAAE,OAAO,IAAM,cAAc,eACzC,6BACe,IAAI,EACjB,SAAS,EAAC,uBAAuB,EACjC,IAAI,EAAC,MAAM,EACX,MAAM,EAAE,MAAM,EACd,mBAAmB,EAAC,MAAM,EAC1B,OAAO,EAAC,UAAU,EAClB,KAAK,EAAC,GAAG,EACT,KAAK,EAAC,4BAA4B,YAGlC,eACE,KAAK,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,EACtB,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,oMAAoM,GACtM,GACE,EACN,6BACe,IAAI,EACjB,SAAS,EAAC,wBAAwB,EAClC,IAAI,EAAC,MAAM,EACX,MAAM,EAAE,MAAM,GAAG,CAAC,EAClB,mBAAmB,EAAC,MAAM,EAC1B,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,IAAI,EACV,KAAK,EAAC,4BAA4B,YAElC,eACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,kWAAkW,GACpW,GACE,KACF,CACP,CAAC;AACJ,CAAC,CAAC;AAaF,MAAM,SAAS,GAAG,CAAC,EACjB,SAAS,GAAG,MAAM,EAClB,KAAK,EACL,MAAM,GAAG,EAAE,EACX,cAAc,GACC,EAAE,EAAE;IACnB,MAAM,OAAO,GAAG,UAAU,CAAC,gBAAgB,EAAE;QAC3C,UAAU,EAAE,SAAS,KAAK,MAAM;QAChC,WAAW,EAAE,SAAS,KAAK,OAAO;KACnC,CAAC,CAAC;IAEH,OAAO,CACL,6BAAK,SAAS,EAAE,OAAO,IAAM,cAAc,eACzC,cACE,SAAS,EAAC,sBAAsB,EAChC,KAAK,EAAE,EAAE,eAAe,EAAE,KAAK,EAAE,GACjC,EACF,cACE,SAAS,EAAC,uBAAuB,EACjC,KAAK,EAAC,GAAG,EACT,MAAM,EAAE,MAAM,GAAG,CAAC,EAClB,mBAAmB,EAAC,MAAM,EAC1B,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,YAElC,eACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,+aAA+a,GACjb,GACE,KACF,CACP,CAAC;AACJ,CAAC,CAAC;AAMF,MAAM,eAAe,GAAG,CAAC,EAAE,MAAM,GAAG,EAAE,EAAwB,EAAE,EAAE;IAChE,OAAO,CACL,eACE,KAAK,EAAC,4BAA4B,EAClC,MAAM,EAAE,MAAM,GAAG,CAAC,EAClB,mBAAmB,EAAC,MAAM,EAC1B,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,8BAA8B,aAExC,eACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,2BAA2B,GAC7B,EACF,eACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,8BAA8B,GAChC,IACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF;;;;;;GAMG;AAEH,MAAM,SAAS,GAAG,GAAG,CAAC;AAEtB,MAAM,CAAC,MAAM,UAAU,GAAG,CAAyC,EAetB,EAAE,EAAE;QAfkB,EACjE,IAAI,GAAG,MAAM,EACb,KAAK,EACL,UAAU,GAAG,KAAK,EAClB,UAAU,GAAG,KAAK,EAClB,EAAE,EACF,OAAO,EACP,SAAS,EACT,KAAK,EACL,QAAQ,EACR,cAAc,EACd,OAAO,GAAG,KAAK,EACf,IAAI,GAAG,OAAO,EACd,GAAG,OAEwC,EADxC,SAAS,cAdqD,4IAelE,CADa;IAEZ,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9C,MAAM,gBAAgB,GAAG,CACvB,KAAsD,EACtD,EAAE;QACF,UAAU,CAAC,IAAI,CAAC,CAAC;QAEjB,IAAI,cAAc,IAAI,cAAc,CAAC,YAAY,KAAK,SAAS,EAAE,CAAC;YAChE,cAAc,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QACrC,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAAG,CACvB,KAAsD,EACtD,EAAE;;QACF,UAAU,CAAC,KAAK,CAAC,CAAC;QAElB,MAAA,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,YAAY,+DAAG,KAAK,CAAC,CAAC;IACxC,CAAC,CAAC;IAEF,MAAM,SAAS,GAAsB,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,QAAQ,CAAC;IACpD,MAAM,QAAQ,GAAG,SAAS,KAAK,QAAQ,CAAC;IAExC,MAAM,WAAW,GAAG,CAClB,KAAsD,EACtD,EAAE;QACF,8EAA8E;QAC9E,yEAAyE;QACzE,iFAAiF;QACjF,4CAA4C;QAC5C,IAAI,UAAU,EAAE,CAAC;YACf,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,OAAO;QACT,CAAC;QAED,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,CAAC,KAAK,CAAC,CAAC;QACjB,CAAC;IACH,CAAC,CAAC;IAEF,IAAI,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;YACxB,QAAQ,IAAI,EAAE,CAAC;gBACb,KAAK,MAAM;oBACT,OAAO,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;gBAC3B,KAAK,cAAc,CAAC;gBACpB,KAAK,kBAAkB,CAAC;gBACxB,KAAK,mBAAmB;oBACtB,OAAO,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,MAAM,CAAC;gBACpD;oBACE,OAAO,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,SAAS,CAAC;YACzD,CAAC;QACH,CAAC;QACD,OAAO,KAAK,CAAC;IACf,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC;IAElB,MAAM,UAAU,GAAG,OAAO,CACxB,GAAG,EAAE,CACH,aAAa,CACX,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,CAC7D,EACH,CAAC,eAAe,CAAC,CAClB,CAAC;IACF,MAAM,SAAS,GAAG,OAAO,CACvB,GAAG,EAAE,CACH,0BAA0B,CACxB,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,CAC7D,EACH,CAAC,eAAe,CAAC,CAClB,CAAC;IACF,MAAM,iBAAiB,GAAG,OAAO,CAC/B,GAAG,EAAE,CACH,oBAAoB,CAClB,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,CAC7D,EACH,CAAC,eAAe,CAAC,CAClB,CAAC;IAEF,IAAI,OAAO,IAAI,CAAC,UAAU,EAAE,CAAC;QAC3B,eAAe,GAAG,UAAU,CAAC;IAC/B,CAAC;IAED,MAAM,aAAa,GAAG,UAAU,CAAC,iBAAiB,EAAE,SAAS,EAAE;QAC7D,cAAc,EAAE,UAAU;QAC1B,kBAAkB,EAAE,QAAQ;QAC5B,cAAc,EAAE,UAAU;QAC1B,WAAW,EAAE,IAAI,KAAK,OAAO;KAC9B,CAAC,CAAC;IAEH,IAAI,IAAI,KAAK,MAAM,EAAE,CAAC;QACpB,MAAM,OAAO,GAAG,UAAU,CAAC,gBAAgB,EAAE,aAAa,CAAC,CAAC;QAE5D,OAAO,CACL,KAAC,SAAS,kBACR,SAAS,EAAE,OAAO,EAClB,GAAG,EAAE,GAAG,EACR,KAAK,kBACH,eAAe,EAAE,eAAe,EAChC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,EACjD,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,IACnC,KAAK,KAEN,CAAC,QAAQ,IAAI;YACf,QAAQ,EAAE,UAAU;YACpB,OAAO,EAAE,WAAW;YACpB,YAAY,EAAE,gBAAgB;YAC9B,YAAY,EAAE,gBAAgB;SAC/B,CAAC,EACE,cAAc,cAElB,cAAK,SAAS,EAAC,wBAAwB,YAAE,QAAQ,GAAO,IAC9C,CACb,CAAC;IACJ,CAAC;SAAM,IACL,IAAI,KAAK,cAAc;QACvB,IAAI,KAAK,kBAAkB;QAC3B,IAAI,KAAK,mBAAmB,EAC5B,CAAC;QACD,MAAM,OAAO,GAAG,UAAU,CAAC,wBAAwB,EAAE,aAAa,CAAC,CAAC;QACpE,MAAM,MAAM,GAAG,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QAE1C,OAAO,CACL,MAAC,SAAS,kBACR,KAAK,gCACH,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,IACnC,KAAK,KACR,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,KAEnD,SAAS,EAAE,OAAO,IACd,CAAC,QAAQ,IAAI;YACf,QAAQ,EAAE,UAAU;YACpB,OAAO,EAAE,WAAW;YACpB,YAAY,EAAE,gBAAgB;YAC9B,YAAY,EAAE,gBAAgB;SAC/B,CAAC,IACF,GAAG,EAAE,GAAG,IACJ,SAAS,EACT,cAAc,eAEjB,IAAI,KAAK,kBAAkB,IAAI,IAAI,KAAK,cAAc,CAAC,CAAC,CAAC,CACxD,KAAC,UAAU,IACT,SAAS,EAAC,MAAM,EAChB,KAAK,EAAE,eAAe,EACtB,MAAM,EAAE,MAAM,GACd,CACH,CAAC,CAAC,CAAC,CACF,KAAC,SAAS,IAAC,SAAS,EAAC,MAAM,EAAC,KAAK,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,GAAI,CACvE,EACD,eACE,SAAS,EAAC,kCAAkC,EAC5C,KAAK,EAAE;wBACL,eAAe,EAAE,eAAe;qBACjC,aAED,cAAK,SAAS,EAAC,gCAAgC,YAAE,QAAQ,GAAO,EAChE,KAAC,eAAe,IAAC,MAAM,EAAE,MAAM,GAAI,IAC/B,EACL,IAAI,KAAK,mBAAmB,IAAI,IAAI,KAAK,cAAc,CAAC,CAAC,CAAC,CACzD,KAAC,UAAU,IACT,SAAS,EAAC,OAAO,EACjB,KAAK,EAAE,eAAe,EACtB,MAAM,EAAE,MAAM,GACd,CACH,CAAC,CAAC,CAAC,CACF,KAAC,SAAS,IACR,SAAS,EAAC,OAAO,EACjB,KAAK,EAAE,eAAe,EACtB,MAAM,EAAE,MAAM,GACd,CACH,KACS,CACb,CAAC;IACJ,CAAC;SAAM,CAAC;QACN,MAAM,OAAO,GAAG,UAAU,CAAC,wBAAwB,EAAE,aAAa,CAAC,CAAC;QAEpE,OAAO,CACL,KAAC,SAAS,kBACR,KAAK,kBACH,eAAe,EAAE,eAAe,EAChC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,EACjD,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,IACnC,KAAK,GAEV,SAAS,EAAE,OAAO,EAClB,OAAO,EAAE,WAAW,EACpB,YAAY,EAAE,gBAAgB,EAC9B,YAAY,EAAE,gBAAgB,EAC9B,GAAG,EAAE,GAAG,IACJ,cAAc,cAElB,cAAK,SAAS,EAAC,gCAAgC,YAAE,QAAQ,GAAO,IACtD,CACb,CAAC;IACJ,CAAC;AACH,CAAC,CAAC","sourcesContent":["/**\n *\n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n *\n * This file is part of Neo4j.\n *\n * Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\nimport { tokens } from '@neo4j-ndl/base';\nimport classNames from 'classnames';\nimport type React from 'react';\nimport { useMemo, useState } from 'react';\n\nimport {\n type HtmlAttributes,\n type PolymorphicCommonProps,\n} from '../_common/types';\nimport {\n getDisabledTextColor,\n getHoverColor,\n getTextColorFromBackground,\n} from './color';\n\n/**\n *\n *\n * Types\n *\n *\n */\n\ntype GraphLabelProps = {\n /** The type of label */\n type:\n | 'node'\n | 'relationship'\n | 'propertyKey'\n | 'relationshipLeft'\n | 'relationshipRight';\n /** Callback function that is called when the label is clicked */\n onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n /** Additional styles to apply to the label */\n style?: React.CSSProperties;\n /** Content displayed inside the label */\n children?: React.ReactNode;\n /** The background color of the label */\n color?: string;\n /** Whether the label is disabled */\n isDisabled?: boolean;\n /** Additional class names */\n className?: string;\n /** Whether the label is selected */\n isSelected?: boolean;\n /** Whether the label should expand to full available width */\n isFluid?: boolean;\n /** The size of the label */\n size?: 'small' | 'large';\n};\n\ntype HexagonEndProps = {\n /** The direction of the hexagon end */\n direction: 'left' | 'right';\n /** The color of the hexagon end */\n color?: string;\n /** The height of the hexagon end in pixels */\n height?: number;\n /** HTML attributes */\n htmlAttributes?: HtmlAttributes<'div'>;\n};\n/**\n *\n *\n * Helpers\n *\n *\n */\n\nconst HexagonEnd = ({\n direction = 'left',\n color,\n htmlAttributes,\n height = 24,\n}: HexagonEndProps) => {\n const classes = classNames('ndl-hexagon-end', {\n 'ndl-left': direction === 'left',\n 'ndl-right': direction === 'right',\n });\n\n return (\n <div className={classes} {...htmlAttributes}>\n <svg\n aria-hidden={true}\n className=\"ndl-hexagon-end-inner\"\n fill=\"none\"\n height={height}\n preserveAspectRatio=\"none\"\n viewBox=\"0 0 9 24\"\n width=\"9\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n {/* triangle */}\n <path\n style={{ fill: color }}\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M5.73024 1.03676C6.08165 0.397331 6.75338 0 7.48301 0H9V24H7.483C6.75338 24 6.08165 23.6027 5.73024 22.9632L0.315027 13.1094C-0.105009 12.4376 -0.105009 11.5624 0.315026 10.8906L5.73024 1.03676Z\"\n />\n </svg>\n <svg\n aria-hidden={true}\n className=\"ndl-hexagon-end-active\"\n fill=\"none\"\n height={height + 6}\n preserveAspectRatio=\"none\"\n viewBox=\"0 0 13 30\"\n width=\"13\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M10.075 2C9.12474 2 8.24318 2.54521 7.74867 3.43873L2.21419 13.4387C1.68353 14.3976 1.68353 15.6024 2.21419 16.5613L7.74867 26.5613C8.24318 27.4548 9.12474 28 10.075 28H13V30H10.075C8.49126 30 7.022 29.0913 6.1978 27.6021L0.663324 17.6021C-0.221109 16.0041 -0.221108 13.9959 0.663325 12.3979L6.1978 2.39789C7.022 0.90869 8.49126 0 10.075 0H13V2H10.075Z\"\n />\n </svg>\n </div>\n );\n};\n\ntype SquareEndProps = {\n /** The direction of the square end (where it's rounded and has the active state) */\n direction: 'left' | 'right';\n /** The color of the square end */\n color: string;\n /** The height of the square end in pixels */\n height: number;\n /** HTML attributes */\n htmlAttributes?: HtmlAttributes<'div'>;\n};\n\nconst SquareEnd = ({\n direction = 'left',\n color,\n height = 24,\n htmlAttributes,\n}: SquareEndProps) => {\n const classes = classNames('ndl-square-end', {\n 'ndl-left': direction === 'left',\n 'ndl-right': direction === 'right',\n });\n\n return (\n <div className={classes} {...htmlAttributes}>\n <div\n className=\"ndl-square-end-inner\"\n style={{ backgroundColor: color }}\n />\n <svg\n className=\"ndl-square-end-active\"\n width=\"7\"\n height={height + 6}\n preserveAspectRatio=\"none\"\n viewBox=\"0 0 7 30\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M 3.8774 2 C 3.2697 2 2.7917 2.248 2.3967 2.6605 C 1.928 3.1498 1.7993 3.8555 1.7993 4.5331 V 13.8775 V 25.4669 C 1.7993 26.1445 1.928 26.8502 2.3967 27.3395 C 2.7917 27.752 3.2697 28 3.8774 28 H 7 V 30 H 3.8774 C 2.6211 30 1.4369 29.4282 0.5895 28.4485 C 0.1462 27.936 0.0002 27.2467 0.0002 26.5691 L -0.0002 13.8775 L 0.0002 3.4309 C 0.0002 2.7533 0.1462 2.064 0.5895 1.5515 C 1.4368 0.5718 2.6211 0 3.8774 0 H 7 V 2 H 3.8774 Z\"\n />\n </svg>\n </div>\n );\n};\n\ntype HorizontalLinesProps = {\n height?: number;\n};\n\nconst HorizontalLines = ({ height = 24 }: HorizontalLinesProps) => {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height={height + 6}\n preserveAspectRatio=\"none\"\n viewBox=\"0 0 37 30\"\n fill=\"none\"\n className=\"ndl-relationship-label-lines\"\n >\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M 37 2 H 0 V 0 H 37 V 2 Z\"\n />\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M 37 30 H 0 V 28 H 37 V 30 Z\"\n />\n </svg>\n );\n};\n\n/**\n *\n *\n * GraphLabel Component\n *\n *\n */\n\nconst MAX_WIDTH = 200;\n\nexport const GraphLabel = <T extends React.ElementType = 'button'>({\n type = 'node',\n color,\n isDisabled = false,\n isSelected = false,\n as,\n onClick,\n className,\n style,\n children,\n htmlAttributes,\n isFluid = false,\n size = 'large',\n ref,\n ...restProps\n}: PolymorphicCommonProps<T, GraphLabelProps>) => {\n const [isHover, setIsHover] = useState(false);\n\n const handleMouseEnter = (\n event: React.MouseEvent<HTMLButtonElement, MouseEvent>,\n ) => {\n setIsHover(true);\n\n if (htmlAttributes && htmlAttributes.onMouseEnter !== undefined) {\n htmlAttributes.onMouseEnter(event);\n }\n };\n\n const handleMouseLeave = (\n event: React.MouseEvent<HTMLButtonElement, MouseEvent>,\n ) => {\n setIsHover(false);\n\n htmlAttributes?.onMouseLeave?.(event);\n };\n\n const Component: React.ElementType = as ?? 'button';\n const isButton = Component === 'button';\n\n const handleClick = (\n event: React.MouseEvent<HTMLButtonElement, MouseEvent>,\n ) => {\n // By default, a <button /> element with disabled set to true will not get its\n // on click handler called. To support the same behavior on <a /> tags we\n // swallow the event here when disabled, since the <a /> tag with disabled set to\n // true will have its onClick handler called\n if (isDisabled) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n\n if (onClick) {\n onClick(event);\n }\n };\n\n let backgroundColor = useMemo(() => {\n if (color === undefined) {\n switch (type) {\n case 'node':\n return tokens.graph['1'];\n case 'relationship':\n case 'relationshipLeft':\n case 'relationshipRight':\n return tokens.theme.light.color.neutral.bg.strong;\n default:\n return tokens.theme.light.color.neutral.bg.strongest;\n }\n }\n return color;\n }, [color, type]);\n\n const hoverColor = useMemo(\n () =>\n getHoverColor(\n backgroundColor ? backgroundColor : tokens.palette.lemon[40],\n ),\n [backgroundColor],\n );\n const textColor = useMemo(\n () =>\n getTextColorFromBackground(\n backgroundColor ? backgroundColor : tokens.palette.lemon[40],\n ),\n [backgroundColor],\n );\n const disabledTextColor = useMemo(\n () =>\n getDisabledTextColor(\n backgroundColor ? backgroundColor : tokens.palette.lemon[40],\n ),\n [backgroundColor],\n );\n\n if (isHover && !isDisabled) {\n backgroundColor = hoverColor;\n }\n\n const commonClasses = classNames('ndl-graph-label', className, {\n 'ndl-disabled': isDisabled,\n 'ndl-interactable': isButton,\n 'ndl-selected': isSelected,\n 'ndl-small': size === 'small',\n });\n\n if (type === 'node') {\n const classes = classNames('ndl-node-label', commonClasses);\n\n return (\n <Component\n className={classes}\n ref={ref}\n style={{\n backgroundColor: backgroundColor,\n color: isDisabled ? disabledTextColor : textColor,\n maxWidth: isFluid ? '100%' : MAX_WIDTH,\n ...style,\n }}\n {...(isButton && {\n disabled: isDisabled,\n onClick: handleClick,\n onMouseEnter: handleMouseEnter,\n onMouseLeave: handleMouseLeave,\n })}\n {...htmlAttributes}\n >\n <div className=\"ndl-node-label-content\">{children}</div>\n </Component>\n );\n } else if (\n type === 'relationship' ||\n type === 'relationshipLeft' ||\n type === 'relationshipRight'\n ) {\n const classes = classNames('ndl-relationship-label', commonClasses);\n const height = size === 'small' ? 20 : 24;\n\n return (\n <Component\n style={{\n maxWidth: isFluid ? '100%' : MAX_WIDTH,\n ...style,\n color: isDisabled ? disabledTextColor : textColor,\n }}\n className={classes}\n {...(isButton && {\n disabled: isDisabled,\n onClick: handleClick,\n onMouseEnter: handleMouseEnter,\n onMouseLeave: handleMouseLeave,\n })}\n ref={ref}\n {...restProps}\n {...htmlAttributes}\n >\n {type === 'relationshipLeft' || type === 'relationship' ? (\n <HexagonEnd\n direction=\"left\"\n color={backgroundColor}\n height={height}\n />\n ) : (\n <SquareEnd direction=\"left\" color={backgroundColor} height={height} />\n )}\n <div\n className=\"ndl-relationship-label-container\"\n style={{\n backgroundColor: backgroundColor,\n }}\n >\n <div className=\"ndl-relationship-label-content\">{children}</div>\n <HorizontalLines height={height} />\n </div>\n {type === 'relationshipRight' || type === 'relationship' ? (\n <HexagonEnd\n direction=\"right\"\n color={backgroundColor}\n height={height}\n />\n ) : (\n <SquareEnd\n direction=\"right\"\n color={backgroundColor}\n height={height}\n />\n )}\n </Component>\n );\n } else {\n const classes = classNames('ndl-property-key-label', commonClasses);\n\n return (\n <Component\n style={{\n backgroundColor: backgroundColor,\n color: isDisabled ? disabledTextColor : textColor,\n maxWidth: isFluid ? '100%' : MAX_WIDTH,\n ...style,\n }}\n className={classes}\n onClick={handleClick}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n ref={ref}\n {...htmlAttributes}\n >\n <div className=\"ndl-property-key-label-content\">{children}</div>\n </Component>\n );\n }\n};\n"]}
1
+ {"version":3,"file":"GraphLabel.js","sourceRoot":"","sources":["../../../src/graph-label/GraphLabel.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n *\n * This file is part of Neo4j.\n *\n * Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\nimport { tokens } from '@neo4j-ndl/base';\nimport classNames from 'classnames';\nimport type React from 'react';\nimport { useMemo, useState } from 'react';\n\nimport {\n type HtmlAttributes,\n type PolymorphicCommonProps,\n} from '../_common/types';\nimport {\n getDisabledTextColor,\n getHoverColor,\n getTextColorFromBackground,\n} from './color';\n\n/**\n *\n *\n * Types\n *\n *\n */\n\ntype GraphLabelProps = {\n /** The type of label */\n type:\n | 'node'\n | 'relationship'\n | 'propertyKey'\n | 'relationshipLeft'\n | 'relationshipRight';\n /** Callback function that is called when the label is clicked */\n onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n /** Additional styles to apply to the label */\n style?: React.CSSProperties;\n /** Content displayed inside the label */\n children?: React.ReactNode;\n /** The background color of the label */\n color?: string;\n /** Whether the label is disabled */\n isDisabled?: boolean;\n /** Additional class names */\n className?: string;\n /** Whether the label is selected */\n isSelected?: boolean;\n /** Whether the label should expand to full available width */\n isFluid?: boolean;\n /** The size of the label */\n size?: 'small' | 'large';\n};\n\ntype HexagonEndProps = {\n /** The direction of the hexagon end */\n direction: 'left' | 'right';\n /** The color of the hexagon end */\n color?: string;\n /** The height of the hexagon end in pixels */\n height?: number;\n /** HTML attributes */\n htmlAttributes?: HtmlAttributes<'div'>;\n};\n/**\n *\n *\n * Helpers\n *\n *\n */\n\nconst HexagonEnd = ({\n direction = 'left',\n color,\n htmlAttributes,\n height = 24,\n}: HexagonEndProps) => {\n const classes = classNames('ndl-hexagon-end', {\n 'ndl-left': direction === 'left',\n 'ndl-right': direction === 'right',\n });\n\n return (\n <div className={classes} {...htmlAttributes}>\n <svg\n aria-hidden={true}\n className=\"ndl-hexagon-end-inner\"\n fill=\"none\"\n height={height}\n preserveAspectRatio=\"none\"\n viewBox=\"0 0 9 24\"\n width=\"9\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n {/* triangle */}\n <path\n style={{ fill: color }}\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M5.73024 1.03676C6.08165 0.397331 6.75338 0 7.48301 0H9V24H7.483C6.75338 24 6.08165 23.6027 5.73024 22.9632L0.315027 13.1094C-0.105009 12.4376 -0.105009 11.5624 0.315026 10.8906L5.73024 1.03676Z\"\n />\n </svg>\n <svg\n aria-hidden={true}\n className=\"ndl-hexagon-end-active\"\n fill=\"none\"\n height={height + 6}\n preserveAspectRatio=\"none\"\n viewBox=\"0 0 13 30\"\n width=\"13\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M10.075 2C9.12474 2 8.24318 2.54521 7.74867 3.43873L2.21419 13.4387C1.68353 14.3976 1.68353 15.6024 2.21419 16.5613L7.74867 26.5613C8.24318 27.4548 9.12474 28 10.075 28H13V30H10.075C8.49126 30 7.022 29.0913 6.1978 27.6021L0.663324 17.6021C-0.221109 16.0041 -0.221108 13.9959 0.663325 12.3979L6.1978 2.39789C7.022 0.90869 8.49126 0 10.075 0H13V2H10.075Z\"\n />\n </svg>\n </div>\n );\n};\n\ntype SquareEndProps = {\n /** The direction of the square end (where it's rounded and has the active state) */\n direction: 'left' | 'right';\n /** The color of the square end */\n color: string;\n /** The height of the square end in pixels */\n height: number;\n /** HTML attributes */\n htmlAttributes?: HtmlAttributes<'div'>;\n};\n\nconst SquareEnd = ({\n direction = 'left',\n color,\n height = 24,\n htmlAttributes,\n}: SquareEndProps) => {\n const classes = classNames('ndl-square-end', {\n 'ndl-left': direction === 'left',\n 'ndl-right': direction === 'right',\n });\n\n return (\n <div className={classes} {...htmlAttributes}>\n <div\n className=\"ndl-square-end-inner\"\n style={{ backgroundColor: color }}\n />\n <svg\n className=\"ndl-square-end-active\"\n width=\"7\"\n height={height + 6}\n preserveAspectRatio=\"none\"\n viewBox=\"0 0 7 30\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M 3.8774 2 C 3.2697 2 2.7917 2.248 2.3967 2.6605 C 1.928 3.1498 1.7993 3.8555 1.7993 4.5331 V 13.8775 V 25.4669 C 1.7993 26.1445 1.928 26.8502 2.3967 27.3395 C 2.7917 27.752 3.2697 28 3.8774 28 H 7 V 30 H 3.8774 C 2.6211 30 1.4369 29.4282 0.5895 28.4485 C 0.1462 27.936 0.0002 27.2467 0.0002 26.5691 L -0.0002 13.8775 L 0.0002 3.4309 C 0.0002 2.7533 0.1462 2.064 0.5895 1.5515 C 1.4368 0.5718 2.6211 0 3.8774 0 H 7 V 2 H 3.8774 Z\"\n />\n </svg>\n </div>\n );\n};\n\ntype HorizontalLinesProps = {\n height?: number;\n};\n\nconst HorizontalLines = ({ height = 24 }: HorizontalLinesProps) => {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height={height + 6}\n preserveAspectRatio=\"none\"\n viewBox=\"0 0 37 30\"\n fill=\"none\"\n className=\"ndl-relationship-label-lines\"\n >\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M 37 2 H 0 V 0 H 37 V 2 Z\"\n />\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M 37 30 H 0 V 28 H 37 V 30 Z\"\n />\n </svg>\n );\n};\n\n/**\n *\n *\n * GraphLabel Component\n *\n *\n */\n\nconst MAX_WIDTH = 200;\n\nexport const GraphLabel = <T extends React.ElementType = 'button'>({\n type = 'node',\n color,\n isDisabled = false,\n isSelected = false,\n as,\n onClick,\n className,\n style,\n children,\n htmlAttributes,\n isFluid = false,\n size = 'large',\n ref,\n ...restProps\n}: PolymorphicCommonProps<T, GraphLabelProps>) => {\n const [isHover, setIsHover] = useState(false);\n\n const handleMouseEnter = (\n event: React.MouseEvent<HTMLButtonElement, MouseEvent>,\n ) => {\n setIsHover(true);\n\n if (htmlAttributes && htmlAttributes.onMouseEnter !== undefined) {\n htmlAttributes.onMouseEnter(event);\n }\n };\n\n const handleMouseLeave = (\n event: React.MouseEvent<HTMLButtonElement, MouseEvent>,\n ) => {\n setIsHover(false);\n\n htmlAttributes?.onMouseLeave?.(event);\n };\n\n const Component: React.ElementType = as ?? 'button';\n const isButton = Component === 'button';\n\n const handleClick = (\n event: React.MouseEvent<HTMLButtonElement, MouseEvent>,\n ) => {\n // By default, a <button /> element with disabled set to true will not get its\n // on click handler called. To support the same behavior on <a /> tags we\n // swallow the event here when disabled, since the <a /> tag with disabled set to\n // true will have its onClick handler called\n if (isDisabled) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n\n if (onClick) {\n onClick(event);\n }\n };\n\n let backgroundColor = useMemo(() => {\n if (color === undefined) {\n switch (type) {\n case 'node':\n return tokens.graph['1'];\n case 'relationship':\n case 'relationshipLeft':\n case 'relationshipRight':\n return tokens.theme.light.color.neutral.bg.strong;\n default:\n return tokens.theme.light.color.neutral.bg.strongest;\n }\n }\n return color;\n }, [color, type]);\n\n const hoverColor = useMemo(\n () =>\n getHoverColor(\n backgroundColor ? backgroundColor : tokens.palette.lemon[40],\n ),\n [backgroundColor],\n );\n const textColor = useMemo(\n () =>\n getTextColorFromBackground(\n backgroundColor ? backgroundColor : tokens.palette.lemon[40],\n ),\n [backgroundColor],\n );\n const disabledTextColor = useMemo(\n () =>\n getDisabledTextColor(\n backgroundColor ? backgroundColor : tokens.palette.lemon[40],\n ),\n [backgroundColor],\n );\n\n if (isHover && !isDisabled) {\n backgroundColor = hoverColor;\n }\n\n const commonClasses = classNames('ndl-graph-label', className, {\n 'ndl-disabled': isDisabled,\n 'ndl-interactable': isButton,\n 'ndl-selected': isSelected,\n 'ndl-small': size === 'small',\n });\n\n if (type === 'node') {\n const classes = classNames('ndl-node-label', commonClasses);\n\n return (\n <Component\n className={classes}\n ref={ref}\n style={{\n backgroundColor: backgroundColor,\n color: isDisabled ? disabledTextColor : textColor,\n maxWidth: isFluid ? '100%' : MAX_WIDTH,\n ...style,\n }}\n {...(isButton && {\n disabled: isDisabled,\n onClick: handleClick,\n onMouseEnter: handleMouseEnter,\n onMouseLeave: handleMouseLeave,\n type: 'button',\n })}\n {...htmlAttributes}\n >\n <div className=\"ndl-node-label-content\">{children}</div>\n </Component>\n );\n } else if (\n type === 'relationship' ||\n type === 'relationshipLeft' ||\n type === 'relationshipRight'\n ) {\n const classes = classNames('ndl-relationship-label', commonClasses);\n const height = size === 'small' ? 20 : 24;\n\n return (\n <Component\n style={{\n maxWidth: isFluid ? '100%' : MAX_WIDTH,\n ...style,\n color: isDisabled ? disabledTextColor : textColor,\n }}\n className={classes}\n {...(isButton && {\n disabled: isDisabled,\n onClick: handleClick,\n onMouseEnter: handleMouseEnter,\n onMouseLeave: handleMouseLeave,\n type: 'button',\n })}\n ref={ref}\n {...restProps}\n {...htmlAttributes}\n >\n {type === 'relationshipLeft' || type === 'relationship' ? (\n <HexagonEnd\n direction=\"left\"\n color={backgroundColor}\n height={height}\n />\n ) : (\n <SquareEnd direction=\"left\" color={backgroundColor} height={height} />\n )}\n <div\n className=\"ndl-relationship-label-container\"\n style={{\n backgroundColor: backgroundColor,\n }}\n >\n <div className=\"ndl-relationship-label-content\">{children}</div>\n <HorizontalLines height={height} />\n </div>\n {type === 'relationshipRight' || type === 'relationship' ? (\n <HexagonEnd\n direction=\"right\"\n color={backgroundColor}\n height={height}\n />\n ) : (\n <SquareEnd\n direction=\"right\"\n color={backgroundColor}\n height={height}\n />\n )}\n </Component>\n );\n } else {\n const classes = classNames('ndl-property-key-label', commonClasses);\n\n return (\n <Component\n {...(isButton && {\n type: 'button',\n })}\n style={{\n backgroundColor: backgroundColor,\n color: isDisabled ? disabledTextColor : textColor,\n maxWidth: isFluid ? '100%' : MAX_WIDTH,\n ...style,\n }}\n className={classes}\n onClick={handleClick}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n ref={ref}\n {...htmlAttributes}\n >\n <div className=\"ndl-property-key-label-content\">{children}</div>\n </Component>\n );\n }\n};\n"]}
@@ -176,7 +176,7 @@ export const InlineEdit = (_a) => {
176
176
  onMouseDown: () => {
177
177
  blurWithinRef.current = true;
178
178
  },
179
- }, children: _jsx(XMarkIconOutline, {}) })] })] }))) : (_jsxs("button", { className: classNames('ndl-inline-idle-container', {
179
+ }, children: _jsx(XMarkIconOutline, {}) })] })] }))) : (_jsxs("button", { type: "button", className: classNames('ndl-inline-idle-container', {
180
180
  'n-text-neutral-text-weaker': displayText === placeholder,
181
181
  'ndl-disabled': isDisabled,
182
182
  'ndl-has-edit-icon': hasEditIcon,
@@ -1 +1 @@
1
- {"version":3,"file":"InlineEdit.js","sourceRoot":"","sources":["../../../src/inline-edit/InlineEdit.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n *\n * This file is part of Neo4j.\n *\n * Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\nimport classNames from 'classnames';\nimport type React from 'react';\nimport {\n type ReactNode,\n useCallback,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useFocusWithin } from 'react-aria';\n\nimport {\n type HtmlAttributes,\n type PolymorphicCommonProps,\n} from '../_common/types';\nimport { useSemicontrolledState } from '../_common/use-semi-controlled-state';\nimport { needleWarningMessage, randomId } from '../_common/utils';\nimport { IconButton } from '../icon-button';\nimport {\n CheckIconOutline,\n PencilIconOutline,\n XMarkIconOutline,\n} from '../icons';\nimport { Typography } from '../typography';\nimport { type TypographyVariants } from '../typography';\nimport { getIconStyle, getMinHeight } from './utils';\n\ntype InlineEditProps = {\n /** Label text */\n label?: ReactNode;\n\n /**\n * The typographyVariant of the component applied to Typography as its variant.\n * @default subheading-medium\n */\n typographyVariant?: TypographyVariants;\n\n /**\n * The default input value. Use for an uncontrolled component.\n */\n defaultValue?: string;\n\n /**\n * The input value. Makes the component controlled.\n */\n value?: string;\n\n /**\n * Callback when the input value changes. Must be used when the component is controlled.\n */\n onChange?: (value: string) => void;\n\n /**\n * Placeholder text displayed when the input is empty.\n */\n placeholder: string;\n\n /**\n * @default false\n */\n isDisabled?: boolean;\n\n /**\n * If edit pencil icon should be visible on hover\n * @default false\n */\n hasEditIcon?: boolean;\n\n /**\n * If the input is in editing mode\n * Used in a stateless inline edit\n * @default undefined\n */\n isEditing?: boolean;\n\n /** Callback when confirm icon button is pressed */\n onConfirm?: (\n value: string,\n event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,\n ) => void;\n\n /** Callback when cancel icon button is pressed */\n onCancel?: (\n event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,\n ) => void;\n\n /**\n * What the input should do on blur\n * - \"confirm\" will confirm the value\n * - \"cancel\" will cancel the value\n * - \"none\" will do nothing\n * @default \"confirm\"\n */\n blurBehavior?: 'confirm' | 'cancel' | 'none';\n\n /** props applied to the internal input element */\n inputProps?: HtmlAttributes<'input'>;\n\n /**\n * If the input is fluid\n * @default false\n */\n isFluid?: boolean;\n};\n\n// The input should not be less than this (it does shrink if container is smaller though).\nconst MINIMUM_WIDTH = 320;\n\nexport const InlineEdit = <T extends React.ElementType = 'div'>({\n as,\n className,\n defaultValue,\n htmlAttributes,\n label,\n onChange,\n onCancel,\n onConfirm,\n ref,\n style,\n value,\n hasEditIcon = false,\n inputProps,\n isDisabled = false,\n isEditing,\n blurBehavior = 'confirm',\n isFluid = false,\n typographyVariant = 'subheading-medium',\n placeholder,\n ...restProps\n}: PolymorphicCommonProps<T, InlineEditProps>) => {\n const [hasEditMode, setEditMode] = useState(false);\n\n const [currentValue, setCurrentValue] = useSemicontrolledState({\n isControlled: value !== undefined,\n onChange,\n state: value ?? defaultValue ?? '',\n });\n const [previousConfirmedValue, setPreviousConfirmedValue] =\n useState(currentValue);\n\n const mirrorRef = useRef<HTMLSpanElement>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n /**\n * This ref is used to prevent the blur behavior from being triggered on mouse down events\n * on the confirm and cancel buttons. So when true, the blur behavior is not triggered.\n * This is needed due to Webkit browsers (like Safari) triggering blur on mouse down events.\n *\n * It is also used to prevent the blur behavior from being triggered after the component exits edit mode without blur.\n * This bug caused the handler to be called when something was focused after confirming.\n */\n const blurWithinRef = useRef(false);\n\n // Validate controlled mode requirements\n useEffect(() => {\n if (value !== undefined && onChange === undefined) {\n needleWarningMessage(\n 'onChange prop should be supplied when using controlled mode (value prop is provided).',\n );\n }\n }, [value, onChange]);\n\n const { focusWithinProps } = useFocusWithin({\n onBlurWithin: () => {\n if (blurWithinRef.current) {\n return;\n }\n\n if (blurBehavior === 'confirm') {\n onConfirmHandler();\n return;\n }\n if (blurBehavior === 'cancel') {\n onCancelHandler();\n return;\n }\n },\n });\n\n const resetToDefaults = useCallback(() => {\n // In controlled mode, don't reset the value - let the parent manage it\n // In uncontrolled mode, reset to default value\n if (value === undefined) {\n setCurrentValue(previousConfirmedValue ?? '');\n }\n // Only reset edit mode if isEditing is not controlled (undefined)\n if (isEditing === undefined) {\n blurWithinRef.current = true;\n setEditMode(false);\n }\n }, [previousConfirmedValue, isEditing, setCurrentValue, value]);\n\n const resetEditState = useCallback(() => {\n // Only reset edit mode if isEditing is not controlled (undefined)\n if (isEditing === undefined) {\n blurWithinRef.current = true;\n setEditMode(false);\n }\n }, [isEditing]);\n\n const onConfirmHandler = useCallback(\n async (\n event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,\n ) => {\n setPreviousConfirmedValue(currentValue);\n onConfirm?.(currentValue, event);\n resetEditState();\n },\n [onConfirm, currentValue, resetEditState],\n );\n\n const onCancelHandler = useCallback(\n (\n event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,\n ) => {\n onCancel?.(event);\n resetToDefaults();\n },\n [onCancel, resetToDefaults],\n );\n\n const inputID = useMemo(() => {\n return inputProps?.id ?? randomId(12);\n }, [inputProps?.id]);\n\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (['Enter', 'Escape'].includes(e.key)) {\n if (e.key === 'Enter') {\n onConfirmHandler();\n }\n if (e.key === 'Escape') {\n onCancelHandler();\n }\n e.preventDefault();\n e.stopPropagation();\n }\n },\n [onConfirmHandler, onCancelHandler],\n );\n\n const handleInputChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n const newValue = e.target.value;\n setCurrentValue(newValue);\n },\n [setCurrentValue],\n );\n\n const isInEditMode = isEditing ?? hasEditMode;\n\n const handleEditClick = useCallback(() => {\n if (isDisabled === false) {\n setEditMode(true);\n blurWithinRef.current = false;\n }\n }, [isDisabled]);\n\n const updateInputWidth = useCallback(() => {\n if (mirrorRef.current && containerRef.current && !isFluid) {\n const mirrorWidth = mirrorRef.current.offsetWidth;\n const newWidth = Math.max(mirrorWidth, MINIMUM_WIDTH);\n containerRef.current.style.width = `${newWidth}px`;\n }\n }, [mirrorRef, containerRef, isFluid]);\n\n // Width calculation effect\n useLayoutEffect(() => {\n updateInputWidth();\n }, [updateInputWidth, isInEditMode, currentValue]);\n\n const displayText = currentValue || placeholder;\n\n return (\n <Typography\n as={as ?? 'div'}\n variant={typographyVariant}\n className={classNames('ndl-inline-edit', className, {\n 'ndl-disabled': isDisabled,\n 'ndl-fluid': isFluid,\n })}\n style={style}\n ref={ref}\n htmlAttributes={htmlAttributes}\n {...restProps}\n >\n {Boolean(label) && <label htmlFor={inputID}>{label}</label>}\n {isInEditMode === true ? (\n <div\n className=\"ndl-inline-edit-container\"\n ref={containerRef}\n {...focusWithinProps}\n >\n {/* Mirror span for measuring width */}\n <span\n aria-hidden={true}\n className=\"ndl-inline-edit-mirror\"\n ref={mirrorRef}\n >\n {displayText}\n </span>\n <input\n {...inputProps}\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus\n aria-label={typeof label === 'string' ? label : 'Inline edit input'}\n className={classNames(\n 'ndl-inline-edit-input',\n inputProps?.className,\n )}\n id={inputID}\n value={currentValue}\n onChange={handleInputChange}\n onKeyDown={handleKeyDown}\n placeholder={placeholder}\n />\n <div className=\"ndl-inline-edit-buttons\">\n <IconButton\n description=\"Accept\"\n tooltipProps={{\n root: { placement: 'bottom' },\n }}\n onClick={onConfirmHandler}\n size=\"small\"\n isFloating={true}\n htmlAttributes={{\n onMouseDown: () => {\n blurWithinRef.current = true;\n },\n }}\n >\n <CheckIconOutline />\n </IconButton>\n <IconButton\n description=\"Cancel\"\n tooltipProps={{\n root: { placement: 'bottom' },\n }}\n onClick={(event) => onCancelHandler(event)}\n size=\"small\"\n isFloating={true}\n htmlAttributes={{\n onMouseDown: () => {\n blurWithinRef.current = true;\n },\n }}\n >\n <XMarkIconOutline />\n </IconButton>\n </div>\n </div>\n ) : (\n <button\n className={classNames('ndl-inline-idle-container', {\n 'n-text-neutral-text-weaker': displayText === placeholder,\n 'ndl-disabled': isDisabled,\n 'ndl-has-edit-icon': hasEditIcon,\n })}\n aria-disabled={isDisabled}\n disabled={isDisabled}\n onClick={handleEditClick}\n style={{\n minHeight: getMinHeight(typographyVariant),\n }}\n >\n <span className=\"ndl-inline-edit-text\">{displayText}</span>\n {hasEditIcon && (\n <PencilIconOutline\n className=\"ndl-inline-edit-pencil-icon\"\n style={getIconStyle(typographyVariant)}\n />\n )}\n </button>\n )}\n </Typography>\n );\n};\n"]}
1
+ {"version":3,"file":"InlineEdit.js","sourceRoot":"","sources":["../../../src/inline-edit/InlineEdit.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAEL,WAAW,EACX,SAAS,EACT,eAAe,EACf,OAAO,EACP,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAM5C,OAAO,EAAE,sBAAsB,EAAE,MAAM,sCAAsC,CAAC;AAC9E,OAAO,EAAE,oBAAoB,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EACL,gBAAgB,EAChB,iBAAiB,EACjB,gBAAgB,GACjB,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAgFrD,0FAA0F;AAC1F,MAAM,aAAa,GAAG,GAAG,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,CAAsC,EAqBnB,EAAE,EAAE;;QArBe,EAC9D,EAAE,EACF,SAAS,EACT,YAAY,EACZ,cAAc,EACd,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,GAAG,EACH,KAAK,EACL,KAAK,EACL,WAAW,GAAG,KAAK,EACnB,UAAU,EACV,UAAU,GAAG,KAAK,EAClB,SAAS,EACT,YAAY,GAAG,SAAS,EACxB,OAAO,GAAG,KAAK,EACf,iBAAiB,GAAG,mBAAmB,EACvC,WAAW,OAEgC,EADxC,SAAS,cApBkD,mPAqB/D,CADa;IAEZ,MAAM,CAAC,WAAW,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEnD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,sBAAsB,CAAC;QAC7D,YAAY,EAAE,KAAK,KAAK,SAAS;QACjC,QAAQ;QACR,KAAK,EAAE,MAAA,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,YAAY,mCAAI,EAAE;KACnC,CAAC,CAAC;IACH,MAAM,CAAC,sBAAsB,EAAE,yBAAyB,CAAC,GACvD,QAAQ,CAAC,YAAY,CAAC,CAAC;IAEzB,MAAM,SAAS,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IAChD,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD;;;;;;;OAOG;IACH,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAEpC,wCAAwC;IACxC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,KAAK,SAAS,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;YAClD,oBAAoB,CAClB,uFAAuF,CACxF,CAAC;QACJ,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEtB,MAAM,EAAE,gBAAgB,EAAE,GAAG,cAAc,CAAC;QAC1C,YAAY,EAAE,GAAG,EAAE;YACjB,IAAI,aAAa,CAAC,OAAO,EAAE,CAAC;gBAC1B,OAAO;YACT,CAAC;YAED,IAAI,YAAY,KAAK,SAAS,EAAE,CAAC;gBAC/B,gBAAgB,EAAE,CAAC;gBACnB,OAAO;YACT,CAAC;YACD,IAAI,YAAY,KAAK,QAAQ,EAAE,CAAC;gBAC9B,eAAe,EAAE,CAAC;gBAClB,OAAO;YACT,CAAC;QACH,CAAC;KACF,CAAC,CAAC;IAEH,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE;QACvC,uEAAuE;QACvE,+CAA+C;QAC/C,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;YACxB,eAAe,CAAC,sBAAsB,aAAtB,sBAAsB,cAAtB,sBAAsB,GAAI,EAAE,CAAC,CAAC;QAChD,CAAC;QACD,kEAAkE;QAClE,IAAI,SAAS,KAAK,SAAS,EAAE,CAAC;YAC5B,aAAa,CAAC,OAAO,GAAG,IAAI,CAAC;YAC7B,WAAW,CAAC,KAAK,CAAC,CAAC;QACrB,CAAC;IACH,CAAC,EAAE,CAAC,sBAAsB,EAAE,SAAS,EAAE,eAAe,EAAE,KAAK,CAAC,CAAC,CAAC;IAEhE,MAAM,cAAc,GAAG,WAAW,CAAC,GAAG,EAAE;QACtC,kEAAkE;QAClE,IAAI,SAAS,KAAK,SAAS,EAAE,CAAC;YAC5B,aAAa,CAAC,OAAO,GAAG,IAAI,CAAC;YAC7B,WAAW,CAAC,KAAK,CAAC,CAAC;QACrB,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,MAAM,gBAAgB,GAAG,WAAW,CAClC,CACE,KAAwE,EACxE,EAAE;QACF,yBAAyB,CAAC,YAAY,CAAC,CAAC;QACxC,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAG,YAAY,EAAE,KAAK,CAAC,CAAC;QACjC,cAAc,EAAE,CAAC;IACnB,CAAC,CAAA,EACD,CAAC,SAAS,EAAE,YAAY,EAAE,cAAc,CAAC,CAC1C,CAAC;IAEF,MAAM,eAAe,GAAG,WAAW,CACjC,CACE,KAAwE,EACxE,EAAE;QACF,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,KAAK,CAAC,CAAC;QAClB,eAAe,EAAE,CAAC;IACpB,CAAC,EACD,CAAC,QAAQ,EAAE,eAAe,CAAC,CAC5B,CAAC;IAEF,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE;;QAC3B,OAAO,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,EAAE,mCAAI,QAAQ,CAAC,EAAE,CAAC,CAAC;IACxC,CAAC,EAAE,CAAC,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,EAAE,CAAC,CAAC,CAAC;IAErB,MAAM,aAAa,GAAG,WAAW,CAC/B,CAAC,CAAsB,EAAE,EAAE;QACzB,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC;YACxC,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;gBACtB,gBAAgB,EAAE,CAAC;YACrB,CAAC;YACD,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;gBACvB,eAAe,EAAE,CAAC;YACpB,CAAC;YACD,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QACtB,CAAC;IACH,CAAC,EACD,CAAC,gBAAgB,EAAE,eAAe,CAAC,CACpC,CAAC;IAEF,MAAM,iBAAiB,GAAG,WAAW,CACnC,CAAC,CAAsC,EAAE,EAAE;QACzC,MAAM,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;QAChC,eAAe,CAAC,QAAQ,CAAC,CAAC;IAC5B,CAAC,EACD,CAAC,eAAe,CAAC,CAClB,CAAC;IAEF,MAAM,YAAY,GAAG,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,WAAW,CAAC;IAE9C,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE;QACvC,IAAI,UAAU,KAAK,KAAK,EAAE,CAAC;YACzB,WAAW,CAAC,IAAI,CAAC,CAAC;YAClB,aAAa,CAAC,OAAO,GAAG,KAAK,CAAC;QAChC,CAAC;IACH,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,MAAM,gBAAgB,GAAG,WAAW,CAAC,GAAG,EAAE;QACxC,IAAI,SAAS,CAAC,OAAO,IAAI,YAAY,CAAC,OAAO,IAAI,CAAC,OAAO,EAAE,CAAC;YAC1D,MAAM,WAAW,GAAG,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;YAClD,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,WAAW,EAAE,aAAa,CAAC,CAAC;YACtD,YAAY,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,QAAQ,IAAI,CAAC;QACrD,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,YAAY,EAAE,OAAO,CAAC,CAAC,CAAC;IAEvC,2BAA2B;IAC3B,eAAe,CAAC,GAAG,EAAE;QACnB,gBAAgB,EAAE,CAAC;IACrB,CAAC,EAAE,CAAC,gBAAgB,EAAE,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC;IAEnD,MAAM,WAAW,GAAG,YAAY,IAAI,WAAW,CAAC;IAEhD,OAAO,CACL,MAAC,UAAU,kBACT,EAAE,EAAE,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,KAAK,EACf,OAAO,EAAE,iBAAiB,EAC1B,SAAS,EAAE,UAAU,CAAC,iBAAiB,EAAE,SAAS,EAAE;YAClD,cAAc,EAAE,UAAU;YAC1B,WAAW,EAAE,OAAO;SACrB,CAAC,EACF,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,EACR,cAAc,EAAE,cAAc,IAC1B,SAAS,eAEZ,OAAO,CAAC,KAAK,CAAC,IAAI,gBAAO,OAAO,EAAE,OAAO,YAAG,KAAK,GAAS,EAC1D,YAAY,KAAK,IAAI,CAAC,CAAC,CAAC,CACvB,6BACE,SAAS,EAAC,2BAA2B,EACrC,GAAG,EAAE,YAAY,IACb,gBAAgB,eAGpB,8BACe,IAAI,EACjB,SAAS,EAAC,wBAAwB,EAClC,GAAG,EAAE,SAAS,YAEb,WAAW,GACP,EACP,gCACM,UAAU;wBACd,iDAAiD;wBACjD,SAAS,sBACG,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,mBAAmB,EACnE,SAAS,EAAE,UAAU,CACnB,uBAAuB,EACvB,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,SAAS,CACtB,EACD,EAAE,EAAE,OAAO,EACX,KAAK,EAAE,YAAY,EACnB,QAAQ,EAAE,iBAAiB,EAC3B,SAAS,EAAE,aAAa,EACxB,WAAW,EAAE,WAAW,IACxB,EACF,eAAK,SAAS,EAAC,yBAAyB,aACtC,KAAC,UAAU,IACT,WAAW,EAAC,QAAQ,EACpB,YAAY,EAAE;oCACZ,IAAI,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE;iCAC9B,EACD,OAAO,EAAE,gBAAgB,EACzB,IAAI,EAAC,OAAO,EACZ,UAAU,EAAE,IAAI,EAChB,cAAc,EAAE;oCACd,WAAW,EAAE,GAAG,EAAE;wCAChB,aAAa,CAAC,OAAO,GAAG,IAAI,CAAC;oCAC/B,CAAC;iCACF,YAED,KAAC,gBAAgB,KAAG,GACT,EACb,KAAC,UAAU,IACT,WAAW,EAAC,QAAQ,EACpB,YAAY,EAAE;oCACZ,IAAI,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE;iCAC9B,EACD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,eAAe,CAAC,KAAK,CAAC,EAC1C,IAAI,EAAC,OAAO,EACZ,UAAU,EAAE,IAAI,EAChB,cAAc,EAAE;oCACd,WAAW,EAAE,GAAG,EAAE;wCAChB,aAAa,CAAC,OAAO,GAAG,IAAI,CAAC;oCAC/B,CAAC;iCACF,YAED,KAAC,gBAAgB,KAAG,GACT,IACT,KACF,CACP,CAAC,CAAC,CAAC,CACF,kBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,UAAU,CAAC,2BAA2B,EAAE;oBACjD,4BAA4B,EAAE,WAAW,KAAK,WAAW;oBACzD,cAAc,EAAE,UAAU;oBAC1B,mBAAmB,EAAE,WAAW;iBACjC,CAAC,mBACa,UAAU,EACzB,QAAQ,EAAE,UAAU,EACpB,OAAO,EAAE,eAAe,EACxB,KAAK,EAAE;oBACL,SAAS,EAAE,YAAY,CAAC,iBAAiB,CAAC;iBAC3C,aAED,eAAM,SAAS,EAAC,sBAAsB,YAAE,WAAW,GAAQ,EAC1D,WAAW,IAAI,CACd,KAAC,iBAAiB,IAChB,SAAS,EAAC,6BAA6B,EACvC,KAAK,EAAE,YAAY,CAAC,iBAAiB,CAAC,GACtC,CACH,IACM,CACV,KACU,CACd,CAAC;AACJ,CAAC,CAAC","sourcesContent":["/**\n *\n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n *\n * This file is part of Neo4j.\n *\n * Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\nimport classNames from 'classnames';\nimport type React from 'react';\nimport {\n type ReactNode,\n useCallback,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useFocusWithin } from 'react-aria';\n\nimport {\n type HtmlAttributes,\n type PolymorphicCommonProps,\n} from '../_common/types';\nimport { useSemicontrolledState } from '../_common/use-semi-controlled-state';\nimport { needleWarningMessage, randomId } from '../_common/utils';\nimport { IconButton } from '../icon-button';\nimport {\n CheckIconOutline,\n PencilIconOutline,\n XMarkIconOutline,\n} from '../icons';\nimport { Typography } from '../typography';\nimport { type TypographyVariants } from '../typography';\nimport { getIconStyle, getMinHeight } from './utils';\n\ntype InlineEditProps = {\n /** Label text */\n label?: ReactNode;\n\n /**\n * The typographyVariant of the component applied to Typography as its variant.\n * @default subheading-medium\n */\n typographyVariant?: TypographyVariants;\n\n /**\n * The default input value. Use for an uncontrolled component.\n */\n defaultValue?: string;\n\n /**\n * The input value. Makes the component controlled.\n */\n value?: string;\n\n /**\n * Callback when the input value changes. Must be used when the component is controlled.\n */\n onChange?: (value: string) => void;\n\n /**\n * Placeholder text displayed when the input is empty.\n */\n placeholder: string;\n\n /**\n * @default false\n */\n isDisabled?: boolean;\n\n /**\n * If edit pencil icon should be visible on hover\n * @default false\n */\n hasEditIcon?: boolean;\n\n /**\n * If the input is in editing mode\n * Used in a stateless inline edit\n * @default undefined\n */\n isEditing?: boolean;\n\n /** Callback when confirm icon button is pressed */\n onConfirm?: (\n value: string,\n event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,\n ) => void;\n\n /** Callback when cancel icon button is pressed */\n onCancel?: (\n event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,\n ) => void;\n\n /**\n * What the input should do on blur\n * - \"confirm\" will confirm the value\n * - \"cancel\" will cancel the value\n * - \"none\" will do nothing\n * @default \"confirm\"\n */\n blurBehavior?: 'confirm' | 'cancel' | 'none';\n\n /** props applied to the internal input element */\n inputProps?: HtmlAttributes<'input'>;\n\n /**\n * If the input is fluid\n * @default false\n */\n isFluid?: boolean;\n};\n\n// The input should not be less than this (it does shrink if container is smaller though).\nconst MINIMUM_WIDTH = 320;\n\nexport const InlineEdit = <T extends React.ElementType = 'div'>({\n as,\n className,\n defaultValue,\n htmlAttributes,\n label,\n onChange,\n onCancel,\n onConfirm,\n ref,\n style,\n value,\n hasEditIcon = false,\n inputProps,\n isDisabled = false,\n isEditing,\n blurBehavior = 'confirm',\n isFluid = false,\n typographyVariant = 'subheading-medium',\n placeholder,\n ...restProps\n}: PolymorphicCommonProps<T, InlineEditProps>) => {\n const [hasEditMode, setEditMode] = useState(false);\n\n const [currentValue, setCurrentValue] = useSemicontrolledState({\n isControlled: value !== undefined,\n onChange,\n state: value ?? defaultValue ?? '',\n });\n const [previousConfirmedValue, setPreviousConfirmedValue] =\n useState(currentValue);\n\n const mirrorRef = useRef<HTMLSpanElement>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n /**\n * This ref is used to prevent the blur behavior from being triggered on mouse down events\n * on the confirm and cancel buttons. So when true, the blur behavior is not triggered.\n * This is needed due to Webkit browsers (like Safari) triggering blur on mouse down events.\n *\n * It is also used to prevent the blur behavior from being triggered after the component exits edit mode without blur.\n * This bug caused the handler to be called when something was focused after confirming.\n */\n const blurWithinRef = useRef(false);\n\n // Validate controlled mode requirements\n useEffect(() => {\n if (value !== undefined && onChange === undefined) {\n needleWarningMessage(\n 'onChange prop should be supplied when using controlled mode (value prop is provided).',\n );\n }\n }, [value, onChange]);\n\n const { focusWithinProps } = useFocusWithin({\n onBlurWithin: () => {\n if (blurWithinRef.current) {\n return;\n }\n\n if (blurBehavior === 'confirm') {\n onConfirmHandler();\n return;\n }\n if (blurBehavior === 'cancel') {\n onCancelHandler();\n return;\n }\n },\n });\n\n const resetToDefaults = useCallback(() => {\n // In controlled mode, don't reset the value - let the parent manage it\n // In uncontrolled mode, reset to default value\n if (value === undefined) {\n setCurrentValue(previousConfirmedValue ?? '');\n }\n // Only reset edit mode if isEditing is not controlled (undefined)\n if (isEditing === undefined) {\n blurWithinRef.current = true;\n setEditMode(false);\n }\n }, [previousConfirmedValue, isEditing, setCurrentValue, value]);\n\n const resetEditState = useCallback(() => {\n // Only reset edit mode if isEditing is not controlled (undefined)\n if (isEditing === undefined) {\n blurWithinRef.current = true;\n setEditMode(false);\n }\n }, [isEditing]);\n\n const onConfirmHandler = useCallback(\n async (\n event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,\n ) => {\n setPreviousConfirmedValue(currentValue);\n onConfirm?.(currentValue, event);\n resetEditState();\n },\n [onConfirm, currentValue, resetEditState],\n );\n\n const onCancelHandler = useCallback(\n (\n event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,\n ) => {\n onCancel?.(event);\n resetToDefaults();\n },\n [onCancel, resetToDefaults],\n );\n\n const inputID = useMemo(() => {\n return inputProps?.id ?? randomId(12);\n }, [inputProps?.id]);\n\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (['Enter', 'Escape'].includes(e.key)) {\n if (e.key === 'Enter') {\n onConfirmHandler();\n }\n if (e.key === 'Escape') {\n onCancelHandler();\n }\n e.preventDefault();\n e.stopPropagation();\n }\n },\n [onConfirmHandler, onCancelHandler],\n );\n\n const handleInputChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n const newValue = e.target.value;\n setCurrentValue(newValue);\n },\n [setCurrentValue],\n );\n\n const isInEditMode = isEditing ?? hasEditMode;\n\n const handleEditClick = useCallback(() => {\n if (isDisabled === false) {\n setEditMode(true);\n blurWithinRef.current = false;\n }\n }, [isDisabled]);\n\n const updateInputWidth = useCallback(() => {\n if (mirrorRef.current && containerRef.current && !isFluid) {\n const mirrorWidth = mirrorRef.current.offsetWidth;\n const newWidth = Math.max(mirrorWidth, MINIMUM_WIDTH);\n containerRef.current.style.width = `${newWidth}px`;\n }\n }, [mirrorRef, containerRef, isFluid]);\n\n // Width calculation effect\n useLayoutEffect(() => {\n updateInputWidth();\n }, [updateInputWidth, isInEditMode, currentValue]);\n\n const displayText = currentValue || placeholder;\n\n return (\n <Typography\n as={as ?? 'div'}\n variant={typographyVariant}\n className={classNames('ndl-inline-edit', className, {\n 'ndl-disabled': isDisabled,\n 'ndl-fluid': isFluid,\n })}\n style={style}\n ref={ref}\n htmlAttributes={htmlAttributes}\n {...restProps}\n >\n {Boolean(label) && <label htmlFor={inputID}>{label}</label>}\n {isInEditMode === true ? (\n <div\n className=\"ndl-inline-edit-container\"\n ref={containerRef}\n {...focusWithinProps}\n >\n {/* Mirror span for measuring width */}\n <span\n aria-hidden={true}\n className=\"ndl-inline-edit-mirror\"\n ref={mirrorRef}\n >\n {displayText}\n </span>\n <input\n {...inputProps}\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus\n aria-label={typeof label === 'string' ? label : 'Inline edit input'}\n className={classNames(\n 'ndl-inline-edit-input',\n inputProps?.className,\n )}\n id={inputID}\n value={currentValue}\n onChange={handleInputChange}\n onKeyDown={handleKeyDown}\n placeholder={placeholder}\n />\n <div className=\"ndl-inline-edit-buttons\">\n <IconButton\n description=\"Accept\"\n tooltipProps={{\n root: { placement: 'bottom' },\n }}\n onClick={onConfirmHandler}\n size=\"small\"\n isFloating={true}\n htmlAttributes={{\n onMouseDown: () => {\n blurWithinRef.current = true;\n },\n }}\n >\n <CheckIconOutline />\n </IconButton>\n <IconButton\n description=\"Cancel\"\n tooltipProps={{\n root: { placement: 'bottom' },\n }}\n onClick={(event) => onCancelHandler(event)}\n size=\"small\"\n isFloating={true}\n htmlAttributes={{\n onMouseDown: () => {\n blurWithinRef.current = true;\n },\n }}\n >\n <XMarkIconOutline />\n </IconButton>\n </div>\n </div>\n ) : (\n <button\n type=\"button\"\n className={classNames('ndl-inline-idle-container', {\n 'n-text-neutral-text-weaker': displayText === placeholder,\n 'ndl-disabled': isDisabled,\n 'ndl-has-edit-icon': hasEditIcon,\n })}\n aria-disabled={isDisabled}\n disabled={isDisabled}\n onClick={handleEditClick}\n style={{\n minHeight: getMinHeight(typographyVariant),\n }}\n >\n <span className=\"ndl-inline-edit-text\">{displayText}</span>\n {hasEditIcon && (\n <PencilIconOutline\n className=\"ndl-inline-edit-pencil-icon\"\n style={getIconStyle(typographyVariant)}\n />\n )}\n </button>\n )}\n </Typography>\n );\n};\n"]}
@@ -50,7 +50,7 @@ export const SelectIconButton = (_a) => {
50
50
  open: 500,
51
51
  } }, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.root, { type: "simple",
52
52
  // We disable the tooltip if the button is disabled or open, so it doesn't interfere with a menu open
53
- isDisabled: description === null || isDisabled || isOpen === true, children: [_jsx(Tooltip.Trigger, Object.assign({}, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.trigger, { hasButtonWrapper: true, children: _jsxs("button", Object.assign({ ref: ref, className: classes, style: style, disabled: !isInteractable, "aria-disabled": !isInteractable, "aria-label": description !== null && description !== void 0 ? description : undefined, "aria-expanded": isOpen, onClick: onClick }, restProps, htmlAttributes, { children: [_jsx("div", { className: "ndl-select-icon-btn-inner", children: isLoading ? (_jsx(LoadingSpinner, { size: "small" })) : (_jsx("div", { className: "ndl-icon", children: children })) }), _jsx(ChevronDownIconOutline, { className: classNames('ndl-select-icon-btn-icon', {
53
+ isDisabled: description === null || isDisabled || isOpen === true, children: [_jsx(Tooltip.Trigger, Object.assign({}, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.trigger, { hasButtonWrapper: true, children: _jsxs("button", Object.assign({ type: "button", ref: ref, className: classes, style: style, disabled: !isInteractable, "aria-disabled": !isInteractable, "aria-label": description !== null && description !== void 0 ? description : undefined, "aria-expanded": isOpen, onClick: onClick }, restProps, htmlAttributes, { children: [_jsx("div", { className: "ndl-select-icon-btn-inner", children: isLoading ? (_jsx(LoadingSpinner, { size: "small" })) : (_jsx("div", { className: "ndl-icon", children: children })) }), _jsx(ChevronDownIconOutline, { className: classNames('ndl-select-icon-btn-icon', {
54
54
  'ndl-select-icon-btn-icon-open': isOpen === true,
55
55
  }) })] })) })), _jsx(Tooltip.Content, Object.assign({}, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.content, { children: description }))] })));
56
56
  };
@@ -1 +1 @@
1
- {"version":3,"file":"SelectIconButton.js","sourceRoot":"","sources":["../../../src/select-icon-button/SelectIconButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,UAAU,MAAM,YAAY,CAAC;AAIpC,OAAO,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AA0BrC,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAcc,EAAE,EAAE;QAdlB,EAC/B,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,UAAU,GAAG,KAAK,EAClB,SAAS,GAAG,KAAK,EACjB,MAAM,GAAG,KAAK,EACd,SAAS,EACT,WAAW,EACX,YAAY,EACZ,OAAO,EACP,KAAK,EACL,cAAc,EACd,GAAG,OAE0C,EAD1C,SAAS,cAbmB,kJAchC,CADa;IAEZ,MAAM,OAAO,GAAG,UAAU,CAAC,qBAAqB,EAAE,SAAS,EAAE;QAC3D,YAAY,EAAE,MAAM;QACpB,cAAc,EAAE,UAAU;QAC1B,WAAW,EAAE,IAAI,KAAK,OAAO;QAC7B,aAAa,EAAE,SAAS;QACxB,YAAY,EAAE,IAAI,KAAK,QAAQ;QAC/B,WAAW,EAAE,IAAI,KAAK,OAAO;KAC9B,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,CAAC,UAAU,IAAI,CAAC,SAAS,CAAC;IAEjD,OAAO,CACL,MAAC,OAAO,kBACN,UAAU,EAAE;YACV,KAAK,EAAE,CAAC;YACR,IAAI,EAAE,GAAG;SACV,IACG,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,IAAI,IACtB,IAAI,EAAC,QAAQ;QACb,qGAAqG;QACrG,UAAU,EAAE,WAAW,KAAK,IAAI,IAAI,UAAU,IAAI,MAAM,KAAK,IAAI,aAEjE,KAAC,OAAO,CAAC,OAAO,oBAAK,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,IAAE,gBAAgB,kBAC1D,gCACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,OAAO,EAClB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,cAAc,mBACV,CAAC,cAAc,gBAClB,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,SAAS,mBACrB,MAAM,EACrB,OAAO,EAAE,OAAO,IACZ,SAAS,EACT,cAAc,eAElB,cAAK,SAAS,EAAC,2BAA2B,YACvC,SAAS,CAAC,CAAC,CAAC,CACX,KAAC,cAAc,IAAC,IAAI,EAAC,OAAO,GAAG,CAChC,CAAC,CAAC,CAAC,CACF,cAAK,SAAS,EAAC,UAAU,YAAE,QAAQ,GAAO,CAC3C,GACG,EAEN,KAAC,sBAAsB,IACrB,SAAS,EAAE,UAAU,CAAC,0BAA0B,EAAE;gCAChD,+BAA+B,EAAE,MAAM,KAAK,IAAI;6BACjD,CAAC,GACF,KACK,IACO,EAClB,KAAC,OAAO,CAAC,OAAO,oBAAK,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,cACvC,WAAW,IACI,KACV,CACX,CAAC;AACJ,CAAC,CAAC","sourcesContent":["/**\n *\n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n *\n * This file is part of Neo4j.\n *\n * Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\nimport classNames from 'classnames';\nimport type React from 'react';\n\nimport { type CommonProps, type TooltipObjectProps } from '../_common/types';\nimport { ChevronDownIconOutline } from '../icons';\nimport { LoadingSpinner } from '../loading-spinner';\nimport { Tooltip } from '../tooltip';\n\ntype SelectIconButtonProps = {\n /** Content displayed in the button */\n children?: React.ReactNode;\n /** Size of button */\n size?: 'small' | 'medium' | 'large';\n /** If the button is doing something Async, it will display a loading spinner */\n isLoading?: boolean;\n /** Whether the button is in disabled state */\n isDisabled?: boolean;\n /** If the button is opened */\n isOpen: boolean;\n /** Callback function to be called when the button is clicked */\n onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n /**\n * A string that will be shown as a tooltip when hovering over the button. It also acts as an aria-label.\n * {@link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label}\n */\n description: string | null;\n /**\n * Props for the tooltip component.\n */\n tooltipProps?: TooltipObjectProps;\n};\n\nexport const SelectIconButton = ({\n children,\n size = 'medium',\n isDisabled = false,\n isLoading = false,\n isOpen = false,\n className,\n description,\n tooltipProps,\n onClick,\n style,\n htmlAttributes,\n ref,\n ...restProps\n}: CommonProps<'button', SelectIconButtonProps>) => {\n const classes = classNames('ndl-select-icon-btn', className, {\n 'ndl-active': isOpen,\n 'ndl-disabled': isDisabled,\n 'ndl-large': size === 'large',\n 'ndl-loading': isLoading,\n 'ndl-medium': size === 'medium',\n 'ndl-small': size === 'small',\n });\n\n const isInteractable = !isDisabled && !isLoading;\n\n return (\n <Tooltip\n hoverDelay={{\n close: 0,\n open: 500,\n }}\n {...tooltipProps?.root}\n type=\"simple\"\n // We disable the tooltip if the button is disabled or open, so it doesn't interfere with a menu open\n isDisabled={description === null || isDisabled || isOpen === true}\n >\n <Tooltip.Trigger {...tooltipProps?.trigger} hasButtonWrapper>\n <button\n ref={ref}\n className={classes}\n style={style}\n disabled={!isInteractable}\n aria-disabled={!isInteractable}\n aria-label={description ?? undefined}\n aria-expanded={isOpen}\n onClick={onClick}\n {...restProps}\n {...htmlAttributes}\n >\n <div className=\"ndl-select-icon-btn-inner\">\n {isLoading ? (\n <LoadingSpinner size=\"small\" />\n ) : (\n <div className=\"ndl-icon\">{children}</div>\n )}\n </div>\n\n <ChevronDownIconOutline\n className={classNames('ndl-select-icon-btn-icon', {\n 'ndl-select-icon-btn-icon-open': isOpen === true,\n })}\n />\n </button>\n </Tooltip.Trigger>\n <Tooltip.Content {...tooltipProps?.content}>\n {description}\n </Tooltip.Content>\n </Tooltip>\n );\n};\n"]}
1
+ {"version":3,"file":"SelectIconButton.js","sourceRoot":"","sources":["../../../src/select-icon-button/SelectIconButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,UAAU,MAAM,YAAY,CAAC;AAIpC,OAAO,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AA0BrC,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAcc,EAAE,EAAE;QAdlB,EAC/B,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,UAAU,GAAG,KAAK,EAClB,SAAS,GAAG,KAAK,EACjB,MAAM,GAAG,KAAK,EACd,SAAS,EACT,WAAW,EACX,YAAY,EACZ,OAAO,EACP,KAAK,EACL,cAAc,EACd,GAAG,OAE0C,EAD1C,SAAS,cAbmB,kJAchC,CADa;IAEZ,MAAM,OAAO,GAAG,UAAU,CAAC,qBAAqB,EAAE,SAAS,EAAE;QAC3D,YAAY,EAAE,MAAM;QACpB,cAAc,EAAE,UAAU;QAC1B,WAAW,EAAE,IAAI,KAAK,OAAO;QAC7B,aAAa,EAAE,SAAS;QACxB,YAAY,EAAE,IAAI,KAAK,QAAQ;QAC/B,WAAW,EAAE,IAAI,KAAK,OAAO;KAC9B,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,CAAC,UAAU,IAAI,CAAC,SAAS,CAAC;IAEjD,OAAO,CACL,MAAC,OAAO,kBACN,UAAU,EAAE;YACV,KAAK,EAAE,CAAC;YACR,IAAI,EAAE,GAAG;SACV,IACG,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,IAAI,IACtB,IAAI,EAAC,QAAQ;QACb,qGAAqG;QACrG,UAAU,EAAE,WAAW,KAAK,IAAI,IAAI,UAAU,IAAI,MAAM,KAAK,IAAI,aAEjE,KAAC,OAAO,CAAC,OAAO,oBAAK,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,IAAE,gBAAgB,kBAC1D,gCACE,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,OAAO,EAClB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,cAAc,mBACV,CAAC,cAAc,gBAClB,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,SAAS,mBACrB,MAAM,EACrB,OAAO,EAAE,OAAO,IACZ,SAAS,EACT,cAAc,eAElB,cAAK,SAAS,EAAC,2BAA2B,YACvC,SAAS,CAAC,CAAC,CAAC,CACX,KAAC,cAAc,IAAC,IAAI,EAAC,OAAO,GAAG,CAChC,CAAC,CAAC,CAAC,CACF,cAAK,SAAS,EAAC,UAAU,YAAE,QAAQ,GAAO,CAC3C,GACG,EAEN,KAAC,sBAAsB,IACrB,SAAS,EAAE,UAAU,CAAC,0BAA0B,EAAE;gCAChD,+BAA+B,EAAE,MAAM,KAAK,IAAI;6BACjD,CAAC,GACF,KACK,IACO,EAClB,KAAC,OAAO,CAAC,OAAO,oBAAK,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,cACvC,WAAW,IACI,KACV,CACX,CAAC;AACJ,CAAC,CAAC","sourcesContent":["/**\n *\n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n *\n * This file is part of Neo4j.\n *\n * Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\nimport classNames from 'classnames';\nimport type React from 'react';\n\nimport { type CommonProps, type TooltipObjectProps } from '../_common/types';\nimport { ChevronDownIconOutline } from '../icons';\nimport { LoadingSpinner } from '../loading-spinner';\nimport { Tooltip } from '../tooltip';\n\ntype SelectIconButtonProps = {\n /** Content displayed in the button */\n children?: React.ReactNode;\n /** Size of button */\n size?: 'small' | 'medium' | 'large';\n /** If the button is doing something Async, it will display a loading spinner */\n isLoading?: boolean;\n /** Whether the button is in disabled state */\n isDisabled?: boolean;\n /** If the button is opened */\n isOpen: boolean;\n /** Callback function to be called when the button is clicked */\n onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n /**\n * A string that will be shown as a tooltip when hovering over the button. It also acts as an aria-label.\n * {@link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label}\n */\n description: string | null;\n /**\n * Props for the tooltip component.\n */\n tooltipProps?: TooltipObjectProps;\n};\n\nexport const SelectIconButton = ({\n children,\n size = 'medium',\n isDisabled = false,\n isLoading = false,\n isOpen = false,\n className,\n description,\n tooltipProps,\n onClick,\n style,\n htmlAttributes,\n ref,\n ...restProps\n}: CommonProps<'button', SelectIconButtonProps>) => {\n const classes = classNames('ndl-select-icon-btn', className, {\n 'ndl-active': isOpen,\n 'ndl-disabled': isDisabled,\n 'ndl-large': size === 'large',\n 'ndl-loading': isLoading,\n 'ndl-medium': size === 'medium',\n 'ndl-small': size === 'small',\n });\n\n const isInteractable = !isDisabled && !isLoading;\n\n return (\n <Tooltip\n hoverDelay={{\n close: 0,\n open: 500,\n }}\n {...tooltipProps?.root}\n type=\"simple\"\n // We disable the tooltip if the button is disabled or open, so it doesn't interfere with a menu open\n isDisabled={description === null || isDisabled || isOpen === true}\n >\n <Tooltip.Trigger {...tooltipProps?.trigger} hasButtonWrapper>\n <button\n type=\"button\"\n ref={ref}\n className={classes}\n style={style}\n disabled={!isInteractable}\n aria-disabled={!isInteractable}\n aria-label={description ?? undefined}\n aria-expanded={isOpen}\n onClick={onClick}\n {...restProps}\n {...htmlAttributes}\n >\n <div className=\"ndl-select-icon-btn-inner\">\n {isLoading ? (\n <LoadingSpinner size=\"small\" />\n ) : (\n <div className=\"ndl-icon\">{children}</div>\n )}\n </div>\n\n <ChevronDownIconOutline\n className={classNames('ndl-select-icon-btn-icon', {\n 'ndl-select-icon-btn-icon-open': isOpen === true,\n })}\n />\n </button>\n </Tooltip.Trigger>\n <Tooltip.Content {...tooltipProps?.content}>\n {description}\n </Tooltip.Content>\n </Tooltip>\n );\n};\n"]}
@@ -252,7 +252,7 @@ const CategoryItem = (_a) => {
252
252
  }, children: _jsx(ConditionalWrap, { shouldWrap: isExpanded === false && !shouldOverlayOnInteraction && Boolean(label), wrap: (children) => (_jsxs(Tooltip, { type: "simple", placement: "top", hoverDelay: {
253
253
  close: 0,
254
254
  open: shouldOverlayOnInteraction ? 100 : 0,
255
- }, isOpen: isTooltipOpen, onOpenChange: setIsTooltipOpen, children: [_jsx(Tooltip.Trigger, { hasButtonWrapper: true, children: children }), _jsx(Tooltip.Content, { className: "ndl-side-nav ndl-side-nav-category-menu-tooltip-content", children: label })] })), children: _jsxs(CompositeItem, { render: _jsx("button", Object.assign({}, refInteractions.getReferenceProps(Object.assign(Object.assign({ className: classes, ref: mergedRef, style }, restProps), htmlAttributes)), {
255
+ }, isOpen: isTooltipOpen, onOpenChange: setIsTooltipOpen, children: [_jsx(Tooltip.Trigger, { hasButtonWrapper: true, children: children }), _jsx(Tooltip.Content, { className: "ndl-side-nav ndl-side-nav-category-menu-tooltip-content", children: label })] })), children: _jsxs(CompositeItem, { render: _jsx("button", Object.assign({ type: "button" }, refInteractions.getReferenceProps(Object.assign(Object.assign({ className: classes, ref: mergedRef, style }, restProps), htmlAttributes)), {
256
256
  // {...restProps}
257
257
  // {...htmlAttributes}
258
258
  role: "menuitem", "aria-haspopup": "menu", "aria-expanded": context.open, "aria-controls": floatingId, onFocus: (e) => {