@economic/taco 2.2.4 → 2.3.0

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,3 @@
1
+ import * as React from 'react';
2
+ declare const _default: React.ForwardRefExoticComponent<Pick<React.SVGProps<SVGSVGElement>, "string" | "children" | "style" | "className" | "id" | "lang" | "tabIndex" | "role" | "color" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "clipPath" | "filter" | "mask" | "path" | "name" | "ideographic" | "alphabetic" | "hanging" | "mathematical" | "height" | "max" | "media" | "method" | "min" | "target" | "type" | "width" | "crossOrigin" | "accentHeight" | "accumulate" | "additive" | "alignmentBaseline" | "allowReorder" | "amplitude" | "arabicForm" | "ascent" | "attributeName" | "attributeType" | "autoReverse" | "azimuth" | "baseFrequency" | "baselineShift" | "baseProfile" | "bbox" | "begin" | "bias" | "by" | "calcMode" | "capHeight" | "clip" | "clipPathUnits" | "clipRule" | "colorInterpolation" | "colorInterpolationFilters" | "colorProfile" | "colorRendering" | "contentScriptType" | "contentStyleType" | "cursor" | "cx" | "cy" | "d" | "decelerate" | "descent" | "diffuseConstant" | "direction" | "display" | "divisor" | "dominantBaseline" | "dur" | "dx" | "dy" | "edgeMode" | "elevation" | "enableBackground" | "end" | "exponent" | "externalResourcesRequired" | "fill" | "fillOpacity" | "fillRule" | "filterRes" | "filterUnits" | "floodColor" | "floodOpacity" | "focusable" | "fontFamily" | "fontSize" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontVariant" | "fontWeight" | "format" | "fr" | "from" | "fx" | "fy" | "g1" | "g2" | "glyphName" | "glyphOrientationHorizontal" | "glyphOrientationVertical" | "glyphRef" | "gradientTransform" | "gradientUnits" | "horizAdvX" | "horizOriginX" | "href" | "imageRendering" | "in2" | "in" | "intercept" | "k1" | "k2" | "k3" | "k4" | "k" | "kernelMatrix" | "kernelUnitLength" | "kerning" | "keyPoints" | "keySplines" | "keyTimes" | "lengthAdjust" | "letterSpacing" | "lightingColor" | "limitingConeAngle" | "local" | "markerEnd" | "markerHeight" | "markerMid" | "markerStart" | "markerUnits" | "markerWidth" | "maskContentUnits" | "maskUnits" | "mode" | "numOctaves" | "offset" | "opacity" | "operator" | "order" | "orient" | "orientation" | "origin" | "overflow" | "overlinePosition" | "overlineThickness" | "paintOrder" | "panose1" | "pathLength" | "patternContentUnits" | "patternTransform" | "patternUnits" | "pointerEvents" | "points" | "pointsAtX" | "pointsAtY" | "pointsAtZ" | "preserveAlpha" | "preserveAspectRatio" | "primitiveUnits" | "r" | "radius" | "refX" | "refY" | "renderingIntent" | "repeatCount" | "repeatDur" | "requiredExtensions" | "requiredFeatures" | "restart" | "result" | "rotate" | "rx" | "ry" | "scale" | "seed" | "shapeRendering" | "slope" | "spacing" | "specularConstant" | "specularExponent" | "speed" | "spreadMethod" | "startOffset" | "stdDeviation" | "stemh" | "stemv" | "stitchTiles" | "stopColor" | "stopOpacity" | "strikethroughPosition" | "strikethroughThickness" | "stroke" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "surfaceScale" | "systemLanguage" | "tableValues" | "targetX" | "targetY" | "textAnchor" | "textDecoration" | "textLength" | "textRendering" | "to" | "transform" | "u1" | "u2" | "underlinePosition" | "underlineThickness" | "unicode" | "unicodeBidi" | "unicodeRange" | "unitsPerEm" | "vAlphabetic" | "values" | "vectorEffect" | "version" | "vertAdvY" | "vertOriginX" | "vertOriginY" | "vHanging" | "vIdeographic" | "viewBox" | "viewTarget" | "visibility" | "vMathematical" | "widths" | "wordSpacing" | "writingMode" | "x1" | "x2" | "x" | "xChannelSelector" | "xHeight" | "xlinkActuate" | "xlinkArcrole" | "xlinkHref" | "xlinkRole" | "xlinkShow" | "xlinkTitle" | "xlinkType" | "xmlBase" | "xmlLang" | "xmlns" | "xmlnsXlink" | "xmlSpace" | "y1" | "y2" | "y" | "yChannelSelector" | "z" | "zoomAndPan" | "key"> & React.RefAttributes<SVGSVGElement>>;
3
+ export default _default;
@@ -0,0 +1,3 @@
1
+ import * as React from 'react';
2
+ declare const _default: React.ForwardRefExoticComponent<Pick<React.SVGProps<SVGSVGElement>, "string" | "children" | "style" | "className" | "id" | "lang" | "tabIndex" | "role" | "color" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "clipPath" | "filter" | "mask" | "path" | "name" | "ideographic" | "alphabetic" | "hanging" | "mathematical" | "height" | "max" | "media" | "method" | "min" | "target" | "type" | "width" | "crossOrigin" | "accentHeight" | "accumulate" | "additive" | "alignmentBaseline" | "allowReorder" | "amplitude" | "arabicForm" | "ascent" | "attributeName" | "attributeType" | "autoReverse" | "azimuth" | "baseFrequency" | "baselineShift" | "baseProfile" | "bbox" | "begin" | "bias" | "by" | "calcMode" | "capHeight" | "clip" | "clipPathUnits" | "clipRule" | "colorInterpolation" | "colorInterpolationFilters" | "colorProfile" | "colorRendering" | "contentScriptType" | "contentStyleType" | "cursor" | "cx" | "cy" | "d" | "decelerate" | "descent" | "diffuseConstant" | "direction" | "display" | "divisor" | "dominantBaseline" | "dur" | "dx" | "dy" | "edgeMode" | "elevation" | "enableBackground" | "end" | "exponent" | "externalResourcesRequired" | "fill" | "fillOpacity" | "fillRule" | "filterRes" | "filterUnits" | "floodColor" | "floodOpacity" | "focusable" | "fontFamily" | "fontSize" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontVariant" | "fontWeight" | "format" | "fr" | "from" | "fx" | "fy" | "g1" | "g2" | "glyphName" | "glyphOrientationHorizontal" | "glyphOrientationVertical" | "glyphRef" | "gradientTransform" | "gradientUnits" | "horizAdvX" | "horizOriginX" | "href" | "imageRendering" | "in2" | "in" | "intercept" | "k1" | "k2" | "k3" | "k4" | "k" | "kernelMatrix" | "kernelUnitLength" | "kerning" | "keyPoints" | "keySplines" | "keyTimes" | "lengthAdjust" | "letterSpacing" | "lightingColor" | "limitingConeAngle" | "local" | "markerEnd" | "markerHeight" | "markerMid" | "markerStart" | "markerUnits" | "markerWidth" | "maskContentUnits" | "maskUnits" | "mode" | "numOctaves" | "offset" | "opacity" | "operator" | "order" | "orient" | "orientation" | "origin" | "overflow" | "overlinePosition" | "overlineThickness" | "paintOrder" | "panose1" | "pathLength" | "patternContentUnits" | "patternTransform" | "patternUnits" | "pointerEvents" | "points" | "pointsAtX" | "pointsAtY" | "pointsAtZ" | "preserveAlpha" | "preserveAspectRatio" | "primitiveUnits" | "r" | "radius" | "refX" | "refY" | "renderingIntent" | "repeatCount" | "repeatDur" | "requiredExtensions" | "requiredFeatures" | "restart" | "result" | "rotate" | "rx" | "ry" | "scale" | "seed" | "shapeRendering" | "slope" | "spacing" | "specularConstant" | "specularExponent" | "speed" | "spreadMethod" | "startOffset" | "stdDeviation" | "stemh" | "stemv" | "stitchTiles" | "stopColor" | "stopOpacity" | "strikethroughPosition" | "strikethroughThickness" | "stroke" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "surfaceScale" | "systemLanguage" | "tableValues" | "targetX" | "targetY" | "textAnchor" | "textDecoration" | "textLength" | "textRendering" | "to" | "transform" | "u1" | "u2" | "underlinePosition" | "underlineThickness" | "unicode" | "unicodeBidi" | "unicodeRange" | "unitsPerEm" | "vAlphabetic" | "values" | "vectorEffect" | "version" | "vertAdvY" | "vertOriginX" | "vertOriginY" | "vHanging" | "vIdeographic" | "viewBox" | "viewTarget" | "visibility" | "vMathematical" | "widths" | "wordSpacing" | "writingMode" | "x1" | "x2" | "x" | "xChannelSelector" | "xHeight" | "xlinkActuate" | "xlinkArcrole" | "xlinkHref" | "xlinkRole" | "xlinkShow" | "xlinkTitle" | "xlinkType" | "xmlBase" | "xmlLang" | "xmlns" | "xmlnsXlink" | "xmlSpace" | "y1" | "y2" | "y" | "yChannelSelector" | "z" | "zoomAndPan" | "key"> & React.RefAttributes<SVGSVGElement>>;
3
+ export default _default;
@@ -125,7 +125,7 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
125
125
  var _listboxRef$current;
126
126
  if (open) {
127
127
  event.preventDefault();
128
- } else if (event.key === 'ArrowDown') {
128
+ } else if (!event.ctrlKey && !event.metaKey && (event.key === 'ArrowDown' || /^[a-z0-9]$/i.test(event.key))) {
129
129
  setOpen(true);
130
130
  }
131
131
  // the focus should always remain on the input, so we forward events on to the listbox
@@ -1 +1 @@
1
- {"version":3,"file":"Select2.js","sources":["../../../../../../../src/components/Select2/Select2.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport * as ListboxPrimitive from '../../primitives/Listbox2/Listbox2';\nimport { Select2Children, Select2OptionValue, Select2Value } from './types';\nimport { Option, Select2OptionProps } from './components/Option';\nimport { Group, Select2GroupProps } from './components/Group';\nimport { Select2TitleProps, Title } from './components/Title';\nimport { Select2Context } from './components/Context';\nimport { createCollectionClassName } from './utilities';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { useBoundingClientRectListener } from '../../hooks/useBoundingClientRectListener';\nimport { createCustomKeyboardEvent } from '../../utils/input';\nimport { Trigger } from './components/Trigger';\nimport { useIsFormControl } from '../../hooks/useIsFormControl';\nimport { BubbleSelect } from '../../primitives/BubbleSelect';\nimport { Search } from './components/Search';\nimport { useChildren } from './hooks/useChildren';\n\nimport { Create } from './components/Create';\nimport { Collection } from './components/Collection';\nimport { CollectionRef } from '../../primitives/Collection/Collection';\nimport { useLocalization } from '../Provider/Localization';\nimport { Color } from '../../types';\nimport { useIsHoverStatePaused } from '../../hooks/useIsHoverStatePaused';\nimport { isAriaDirectionKey } from '../../utils/aria';\n//import { All } from './components/All';\n\ntype Select2Texts = {\n allSelect: string;\n allDeselect: string;\n cancel: string;\n chooseColor: string;\n create: string;\n delete: string;\n save: string;\n search: string;\n searchOrCreate: string;\n};\n\ntype Select2Props = Omit<React.HTMLAttributes<HTMLButtonElement>, 'children' | 'defaultValue' | 'onChange' | 'value'> & {\n autoFocus?: boolean;\n children: Select2Children;\n defaultValue?: Select2Value;\n emptyValue?: Select2OptionValue;\n disabled?: boolean;\n highlighted?: boolean;\n invalid?: boolean;\n multiple?: boolean;\n name?: string;\n onChange?: (value: Select2Value) => void;\n onCreate?: (name: string, color: Color | undefined) => Promise<Select2OptionProps>;\n onDelete?: (value: Select2OptionValue) => Promise<void>;\n onEdit?: (value: Select2OptionValue, text: string, color: Color | undefined) => Promise<void>;\n readOnly?: boolean;\n required?: boolean;\n tags?: boolean;\n value?: Select2Value;\n};\ntype Select2PropsWithStatics = React.ForwardRefExoticComponent<Select2Props & React.RefAttributes<HTMLButtonElement>> & {\n Option: React.ForwardRefExoticComponent<Select2OptionProps>;\n Group: React.ForwardRefExoticComponent<Select2GroupProps>;\n Title: React.ForwardRefExoticComponent<Select2TitleProps>;\n};\n\nconst Select2 = React.forwardRef<HTMLButtonElement, Select2Props>(function Select2(props, ref) {\n const {\n children: initChildren,\n defaultValue: defaultProp,\n disabled = false,\n emptyValue = undefined,\n highlighted = false,\n invalid = false,\n multiple = false,\n name,\n onChange,\n onCreate,\n onDelete,\n onEdit,\n readOnly = false,\n tags = false,\n value: prop,\n ...otherProps\n } = props;\n\n const emptyOption: React.ReactElement<Select2OptionProps> | undefined = React.useMemo(() => {\n if (emptyValue !== undefined && !multiple) {\n // Empty option has 0px height, because it's empty, so need to apply height manually\n return <Option key=\"__empty\" children=\"\" value={emptyValue} className=\"h-8\" />;\n }\n return;\n }, [emptyValue, multiple]);\n\n const initialChildren = React.useMemo(() => {\n if (emptyOption) {\n return [emptyOption, ...initChildren] as Select2Children;\n }\n return initChildren;\n }, [emptyOption, initChildren]);\n\n // refs\n const internalRef = useMergedRef<HTMLButtonElement>(ref);\n const listboxRef = React.useRef<CollectionRef>(null);\n const searchRef = React.useRef<HTMLInputElement>(null);\n const { texts } = useLocalization();\n // align the listbox min width with the width of the input - it should never be smaller\n const dimensions = useBoundingClientRectListener(internalRef);\n\n // state\n const [open, setOpen] = React.useState(false);\n const [value, _setValue] = useControllableState<Select2Value>({\n // uncontrolled\n defaultProp,\n // controlled\n onChange,\n prop,\n });\n const setValue = ListboxPrimitive.createListboxValueSetter(multiple, _setValue);\n const [validationError, setValidationError] = React.useState<Error | undefined>();\n const [shouldPauseHoverState, setShouldPauseHoverState] = useIsHoverStatePaused();\n\n const { flattenedChildren, filteredChildren, searchQuery, setSearchQuery } = useChildren({\n children: initialChildren,\n emptyValue,\n multiple,\n open,\n setValue,\n value,\n });\n\n // context\n const context = {\n disabled,\n highlighted,\n invalid,\n listboxRef,\n multiple,\n onCreate,\n onDelete,\n onEdit,\n open,\n readOnly,\n ref: internalRef,\n searchQuery,\n searchRef,\n setOpen,\n setSearchQuery,\n setValidationError,\n setValue,\n shouldPauseHoverState,\n setShouldPauseHoverState,\n tags,\n validationError,\n value,\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n if (open) {\n event.preventDefault();\n } else if (event.key === 'ArrowDown') {\n setOpen(true);\n }\n\n // the focus should always remain on the input, so we forward events on to the listbox\n listboxRef.current?.dispatchEvent(createCustomKeyboardEvent(event as React.KeyboardEvent<HTMLInputElement>));\n };\n\n let handleBlur;\n\n if (otherProps.onBlur) {\n // we might be focusing on an input or something inside the dropdown that was triggered by the select\n // so see if the element gaining focus is inside a portal and look up its controller\n // if we don't do this, things like validate on blur occur while simply opening the select\n handleBlur = (event: React.FocusEvent<HTMLButtonElement>) => {\n const elementGainingFocus = event.relatedTarget;\n\n if (elementGainingFocus === undefined) {\n return;\n }\n\n const portalId = elementGainingFocus?.closest('[data-radix-popper-content-wrapper] > :first-child')?.id;\n\n if (!portalId || event.currentTarget.getAttribute(`aria-controls`) !== portalId) {\n otherProps.onBlur?.(event);\n }\n };\n }\n\n const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n if (isAriaDirectionKey(event)) {\n setShouldPauseHoverState(true);\n }\n };\n\n const className = cn('border-grey-300 rounded border bg-white py-1.5 shadow-md outline-none', createCollectionClassName());\n\n return (\n <Select2Context.Provider value={context}>\n <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>\n <ControlledHiddenField\n emptyValue={emptyValue}\n multiple={multiple || tags}\n name={name}\n options={flattenedChildren.map(child => child.props.value)}\n parentRef={internalRef}\n setValue={setValue}\n value={value}\n />\n <PopoverPrimitive.Trigger asChild data-taco=\"Select2\">\n <Trigger\n {...otherProps}\n aria-haspopup=\"listbox\"\n emptyValue={emptyValue}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n ref={internalRef}>\n {flattenedChildren}\n </Trigger>\n </PopoverPrimitive.Trigger>\n <PopoverPrimitive.Portal>\n <PopoverPrimitive.Content\n asChild\n align=\"start\"\n onOpenAutoFocus={event => {\n event.preventDefault();\n event.stopPropagation();\n internalRef.current?.focus();\n }}\n onCloseAutoFocus={event => {\n event.preventDefault();\n event.stopPropagation();\n internalRef.current?.focus();\n }}\n sideOffset={4}\n tabIndex={-1}>\n <div className={className} style={{ minWidth: dimensions?.width ? `${dimensions.width}px` : undefined }}>\n {flattenedChildren.length > 0 || onCreate ? (\n <Search\n placeholder={onCreate ? texts.select2.searchOrCreate : texts.select2.search}\n ref={searchRef}\n />\n ) : null}\n {flattenedChildren.length <= 0 ? (\n <div className=\"text-grey-700 -mt-0.5 flex h-8 items-center px-2\" role=\"presentation\">\n No results found...\n </div>\n ) : (\n <ListboxPrimitive.Root\n className=\"flex flex-col gap-0.5\"\n customSelector=\":scope > button\"\n disabled={disabled}\n multiple={multiple}\n onKeyDown={handleListboxKeyDown}\n readOnly={readOnly}\n ref={listboxRef}\n setValue={setValue}\n tabIndex={-1}\n value={value}>\n {/*multiple && !searchQuery && Array.isArray(value) ? (\n <All\n children={flattenedChildren}\n onToggle={_setValue}\n selected={value.length === flattenedChildren.length}\n />\n ) : null*/}\n {searchQuery === '' ? (\n <Collection>{initialChildren}</Collection>\n ) : (\n <Collection>{filteredChildren}</Collection>\n )}\n {onCreate ? <Create onCreate={onCreate} options={flattenedChildren} /> : null}\n </ListboxPrimitive.Root>\n )}\n </div>\n </PopoverPrimitive.Content>\n </PopoverPrimitive.Portal>\n </PopoverPrimitive.Root>\n </Select2Context.Provider>\n );\n}) as Select2PropsWithStatics;\nSelect2.Option = Option;\nSelect2.Group = Group;\nSelect2.Title = Title;\n\nconst ControlledHiddenField = props => {\n const { emptyValue, multiple, name, options, parentRef, value, setValue } = props;\n const isFormControl = useIsFormControl(parentRef, () => setValue(multiple ? [] : undefined));\n\n let bubbleValue;\n\n if (isFormControl) {\n if (value !== undefined) {\n if (multiple) {\n bubbleValue = Array.isArray(value) ? value.map(String) : [value === null ? '' : String(value)];\n } else {\n bubbleValue = value === null ? '' : String(value);\n }\n }\n\n return (\n <BubbleSelect aria-hidden key={String(bubbleValue)} multiple={multiple} name={name} value={bubbleValue}>\n {emptyValue !== undefined ? <option value={emptyValue} /> : null}\n {options.map(option => (\n <option key={String(option)} value={String(option)} />\n ))}\n </BubbleSelect>\n );\n }\n\n return null;\n};\nSelect2.displayName = 'Select2';\n\nexport { Select2 };\n\nexport type {\n Select2Texts,\n Select2GroupProps,\n Select2OptionProps,\n Select2OptionValue,\n Select2Value,\n Select2Props,\n Select2TitleProps,\n};\n"],"names":["Select2","React","forwardRef","props","ref","children","initChildren","defaultValue","defaultProp","disabled","emptyValue","undefined","highlighted","invalid","multiple","name","onChange","onCreate","onDelete","onEdit","readOnly","tags","value","prop","otherProps","emptyOption","useMemo","Option","key","className","initialChildren","internalRef","useMergedRef","listboxRef","useRef","searchRef","texts","useLocalization","dimensions","useBoundingClientRectListener","open","setOpen","useState","_setValue","useControllableState","setValue","ListboxPrimitive","validationError","setValidationError","shouldPauseHoverState","setShouldPauseHoverState","useIsHoverStatePaused","flattenedChildren","filteredChildren","searchQuery","setSearchQuery","useChildren","context","handleKeyDown","event","preventDefault","current","dispatchEvent","createCustomKeyboardEvent","handleBlur","onBlur","elementGainingFocus","relatedTarget","portalId","closest","id","currentTarget","getAttribute","handleListboxKeyDown","isAriaDirectionKey","cn","createCollectionClassName","Select2Context","Provider","PopoverPrimitive","onOpenChange","ControlledHiddenField","options","map","child","parentRef","asChild","Trigger","onKeyDown","align","onOpenAutoFocus","stopPropagation","focus","onCloseAutoFocus","sideOffset","tabIndex","style","minWidth","width","length","Search","placeholder","select2","searchOrCreate","search","role","customSelector","Collection","Create","Group","Title","isFormControl","useIsFormControl","bubbleValue","Array","isArray","String","BubbleSelect","option","displayName"],"mappings":"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"}
1
+ {"version":3,"file":"Select2.js","sources":["../../../../../../../src/components/Select2/Select2.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport * as ListboxPrimitive from '../../primitives/Listbox2/Listbox2';\nimport { Select2Children, Select2OptionValue, Select2Value } from './types';\nimport { Option, Select2OptionProps } from './components/Option';\nimport { Group, Select2GroupProps } from './components/Group';\nimport { Select2TitleProps, Title } from './components/Title';\nimport { Select2Context } from './components/Context';\nimport { createCollectionClassName } from './utilities';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { useBoundingClientRectListener } from '../../hooks/useBoundingClientRectListener';\nimport { createCustomKeyboardEvent } from '../../utils/input';\nimport { Trigger } from './components/Trigger';\nimport { useIsFormControl } from '../../hooks/useIsFormControl';\nimport { BubbleSelect } from '../../primitives/BubbleSelect';\nimport { Search } from './components/Search';\nimport { useChildren } from './hooks/useChildren';\n\nimport { Create } from './components/Create';\nimport { Collection } from './components/Collection';\nimport { CollectionRef } from '../../primitives/Collection/Collection';\nimport { useLocalization } from '../Provider/Localization';\nimport { Color } from '../../types';\nimport { useIsHoverStatePaused } from '../../hooks/useIsHoverStatePaused';\nimport { isAriaDirectionKey } from '../../utils/aria';\n//import { All } from './components/All';\n\ntype Select2Texts = {\n allSelect: string;\n allDeselect: string;\n cancel: string;\n chooseColor: string;\n create: string;\n delete: string;\n save: string;\n search: string;\n searchOrCreate: string;\n};\n\ntype Select2Props = Omit<React.HTMLAttributes<HTMLButtonElement>, 'children' | 'defaultValue' | 'onChange' | 'value'> & {\n autoFocus?: boolean;\n children: Select2Children;\n defaultValue?: Select2Value;\n emptyValue?: Select2OptionValue;\n disabled?: boolean;\n highlighted?: boolean;\n invalid?: boolean;\n multiple?: boolean;\n name?: string;\n onChange?: (value: Select2Value) => void;\n onCreate?: (name: string, color: Color | undefined) => Promise<Select2OptionProps>;\n onDelete?: (value: Select2OptionValue) => Promise<void>;\n onEdit?: (value: Select2OptionValue, text: string, color: Color | undefined) => Promise<void>;\n readOnly?: boolean;\n required?: boolean;\n tags?: boolean;\n value?: Select2Value;\n};\ntype Select2PropsWithStatics = React.ForwardRefExoticComponent<Select2Props & React.RefAttributes<HTMLButtonElement>> & {\n Option: React.ForwardRefExoticComponent<Select2OptionProps>;\n Group: React.ForwardRefExoticComponent<Select2GroupProps>;\n Title: React.ForwardRefExoticComponent<Select2TitleProps>;\n};\n\nconst Select2 = React.forwardRef<HTMLButtonElement, Select2Props>(function Select2(props, ref) {\n const {\n children: initChildren,\n defaultValue: defaultProp,\n disabled = false,\n emptyValue = undefined,\n highlighted = false,\n invalid = false,\n multiple = false,\n name,\n onChange,\n onCreate,\n onDelete,\n onEdit,\n readOnly = false,\n tags = false,\n value: prop,\n ...otherProps\n } = props;\n\n const emptyOption: React.ReactElement<Select2OptionProps> | undefined = React.useMemo(() => {\n if (emptyValue !== undefined && !multiple) {\n // Empty option has 0px height, because it's empty, so need to apply height manually\n return <Option key=\"__empty\" children=\"\" value={emptyValue} className=\"h-8\" />;\n }\n return;\n }, [emptyValue, multiple]);\n\n const initialChildren = React.useMemo(() => {\n if (emptyOption) {\n return [emptyOption, ...initChildren] as Select2Children;\n }\n return initChildren;\n }, [emptyOption, initChildren]);\n\n // refs\n const internalRef = useMergedRef<HTMLButtonElement>(ref);\n const listboxRef = React.useRef<CollectionRef>(null);\n const searchRef = React.useRef<HTMLInputElement>(null);\n const { texts } = useLocalization();\n // align the listbox min width with the width of the input - it should never be smaller\n const dimensions = useBoundingClientRectListener(internalRef);\n\n // state\n const [open, setOpen] = React.useState(false);\n const [value, _setValue] = useControllableState<Select2Value>({\n // uncontrolled\n defaultProp,\n // controlled\n onChange,\n prop,\n });\n const setValue = ListboxPrimitive.createListboxValueSetter(multiple, _setValue);\n const [validationError, setValidationError] = React.useState<Error | undefined>();\n const [shouldPauseHoverState, setShouldPauseHoverState] = useIsHoverStatePaused();\n\n const { flattenedChildren, filteredChildren, searchQuery, setSearchQuery } = useChildren({\n children: initialChildren,\n emptyValue,\n multiple,\n open,\n setValue,\n value,\n });\n\n // context\n const context = {\n disabled,\n highlighted,\n invalid,\n listboxRef,\n multiple,\n onCreate,\n onDelete,\n onEdit,\n open,\n readOnly,\n ref: internalRef,\n searchQuery,\n searchRef,\n setOpen,\n setSearchQuery,\n setValidationError,\n setValue,\n shouldPauseHoverState,\n setShouldPauseHoverState,\n tags,\n validationError,\n value,\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n if (open) {\n event.preventDefault();\n } else if (!event.ctrlKey && !event.metaKey && (event.key === 'ArrowDown' || /^[a-z0-9]$/i.test(event.key))) {\n setOpen(true);\n }\n\n // the focus should always remain on the input, so we forward events on to the listbox\n listboxRef.current?.dispatchEvent(createCustomKeyboardEvent(event as React.KeyboardEvent<HTMLInputElement>));\n };\n\n let handleBlur;\n\n if (otherProps.onBlur) {\n // we might be focusing on an input or something inside the dropdown that was triggered by the select\n // so see if the element gaining focus is inside a portal and look up its controller\n // if we don't do this, things like validate on blur occur while simply opening the select\n handleBlur = (event: React.FocusEvent<HTMLButtonElement>) => {\n const elementGainingFocus = event.relatedTarget;\n\n if (elementGainingFocus === undefined) {\n return;\n }\n\n const portalId = elementGainingFocus?.closest('[data-radix-popper-content-wrapper] > :first-child')?.id;\n\n if (!portalId || event.currentTarget.getAttribute(`aria-controls`) !== portalId) {\n otherProps.onBlur?.(event);\n }\n };\n }\n\n const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n if (isAriaDirectionKey(event)) {\n setShouldPauseHoverState(true);\n }\n };\n\n const className = cn('border-grey-300 rounded border bg-white py-1.5 shadow-md outline-none', createCollectionClassName());\n\n return (\n <Select2Context.Provider value={context}>\n <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>\n <ControlledHiddenField\n emptyValue={emptyValue}\n multiple={multiple || tags}\n name={name}\n options={flattenedChildren.map(child => child.props.value)}\n parentRef={internalRef}\n setValue={setValue}\n value={value}\n />\n <PopoverPrimitive.Trigger asChild data-taco=\"Select2\">\n <Trigger\n {...otherProps}\n aria-haspopup=\"listbox\"\n emptyValue={emptyValue}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n ref={internalRef}>\n {flattenedChildren}\n </Trigger>\n </PopoverPrimitive.Trigger>\n <PopoverPrimitive.Portal>\n <PopoverPrimitive.Content\n asChild\n align=\"start\"\n onOpenAutoFocus={event => {\n event.preventDefault();\n event.stopPropagation();\n internalRef.current?.focus();\n }}\n onCloseAutoFocus={event => {\n event.preventDefault();\n event.stopPropagation();\n internalRef.current?.focus();\n }}\n sideOffset={4}\n tabIndex={-1}>\n <div className={className} style={{ minWidth: dimensions?.width ? `${dimensions.width}px` : undefined }}>\n {flattenedChildren.length > 0 || onCreate ? (\n <Search\n placeholder={onCreate ? texts.select2.searchOrCreate : texts.select2.search}\n ref={searchRef}\n />\n ) : null}\n {flattenedChildren.length <= 0 ? (\n <div className=\"text-grey-700 -mt-0.5 flex h-8 items-center px-2\" role=\"presentation\">\n No results found...\n </div>\n ) : (\n <ListboxPrimitive.Root\n className=\"flex flex-col gap-0.5\"\n customSelector=\":scope > button\"\n disabled={disabled}\n multiple={multiple}\n onKeyDown={handleListboxKeyDown}\n readOnly={readOnly}\n ref={listboxRef}\n setValue={setValue}\n tabIndex={-1}\n value={value}>\n {/*multiple && !searchQuery && Array.isArray(value) ? (\n <All\n children={flattenedChildren}\n onToggle={_setValue}\n selected={value.length === flattenedChildren.length}\n />\n ) : null*/}\n {searchQuery === '' ? (\n <Collection>{initialChildren}</Collection>\n ) : (\n <Collection>{filteredChildren}</Collection>\n )}\n {onCreate ? <Create onCreate={onCreate} options={flattenedChildren} /> : null}\n </ListboxPrimitive.Root>\n )}\n </div>\n </PopoverPrimitive.Content>\n </PopoverPrimitive.Portal>\n </PopoverPrimitive.Root>\n </Select2Context.Provider>\n );\n}) as Select2PropsWithStatics;\nSelect2.Option = Option;\nSelect2.Group = Group;\nSelect2.Title = Title;\n\nconst ControlledHiddenField = props => {\n const { emptyValue, multiple, name, options, parentRef, value, setValue } = props;\n const isFormControl = useIsFormControl(parentRef, () => setValue(multiple ? [] : undefined));\n\n let bubbleValue;\n\n if (isFormControl) {\n if (value !== undefined) {\n if (multiple) {\n bubbleValue = Array.isArray(value) ? value.map(String) : [value === null ? '' : String(value)];\n } else {\n bubbleValue = value === null ? '' : String(value);\n }\n }\n\n return (\n <BubbleSelect aria-hidden key={String(bubbleValue)} multiple={multiple} name={name} value={bubbleValue}>\n {emptyValue !== undefined ? <option value={emptyValue} /> : null}\n {options.map(option => (\n <option key={String(option)} value={String(option)} />\n ))}\n </BubbleSelect>\n );\n }\n\n return null;\n};\nSelect2.displayName = 'Select2';\n\nexport { Select2 };\n\nexport type {\n Select2Texts,\n Select2GroupProps,\n Select2OptionProps,\n Select2OptionValue,\n Select2Value,\n Select2Props,\n Select2TitleProps,\n};\n"],"names":["Select2","React","forwardRef","props","ref","children","initChildren","defaultValue","defaultProp","disabled","emptyValue","undefined","highlighted","invalid","multiple","name","onChange","onCreate","onDelete","onEdit","readOnly","tags","value","prop","otherProps","emptyOption","useMemo","Option","key","className","initialChildren","internalRef","useMergedRef","listboxRef","useRef","searchRef","texts","useLocalization","dimensions","useBoundingClientRectListener","open","setOpen","useState","_setValue","useControllableState","setValue","ListboxPrimitive","validationError","setValidationError","shouldPauseHoverState","setShouldPauseHoverState","useIsHoverStatePaused","flattenedChildren","filteredChildren","searchQuery","setSearchQuery","useChildren","context","handleKeyDown","event","preventDefault","ctrlKey","metaKey","test","current","dispatchEvent","createCustomKeyboardEvent","handleBlur","onBlur","elementGainingFocus","relatedTarget","portalId","closest","id","currentTarget","getAttribute","handleListboxKeyDown","isAriaDirectionKey","cn","createCollectionClassName","Select2Context","Provider","PopoverPrimitive","onOpenChange","ControlledHiddenField","options","map","child","parentRef","asChild","Trigger","onKeyDown","align","onOpenAutoFocus","stopPropagation","focus","onCloseAutoFocus","sideOffset","tabIndex","style","minWidth","width","length","Search","placeholder","select2","searchOrCreate","search","role","customSelector","Collection","Create","Group","Title","isFormControl","useIsFormControl","bubbleValue","Array","isArray","String","BubbleSelect","option","displayName"],"mappings":"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"}
@@ -110,9 +110,7 @@ const EditPopover = props => {
110
110
  event.stopPropagation();
111
111
  }
112
112
  };
113
- return /*#__PURE__*/React__default.createElement(Popover, Object.assign({}, popoverProps, {
114
- modal: true
115
- }), /*#__PURE__*/React__default.createElement(Popover.Content, {
113
+ return /*#__PURE__*/React__default.createElement(Popover, Object.assign({}, popoverProps), /*#__PURE__*/React__default.createElement(Popover.Content, {
116
114
  onCloseAutoFocus: handleCloseAutoFocus,
117
115
  onInteractOutside: handleInteractOutside,
118
116
  onClick: event => event.stopPropagation(),
@@ -1 +1 @@
1
- {"version":3,"file":"Edit.js","sources":["../../../../../../../../src/components/Select2/components/Edit.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport * as RadioGroup from '@radix-ui/react-radio-group';\nimport { Button } from '../../Button/Button';\nimport { Input } from '../../Input/Input';\nimport { Popover, PopoverProps } from '../../Popover/Popover';\nimport { Icon } from '../../Icon/Icon';\nimport { Select2OptionValue } from '../types';\nimport { useSelect2Context } from './Context';\nimport { Field } from '../../Field/Field';\nimport { Group } from '../../Group/Group';\nimport { useLocalization } from '../../Provider/Localization';\nimport { Color } from '../../../types';\nimport { AVAILABLE_COLORS, getSubtleColorShadeClasses } from '../../../utils/tailwind';\n\nexport type EditPopoverProps = PopoverProps & {\n color?: Color;\n text: string;\n value: Select2OptionValue;\n};\n\nexport const EditPopover = (props: EditPopoverProps) => {\n const { color: initialColor, text: initialName, value, ...popoverProps } = props;\n const ref = React.useRef<HTMLInputElement>(null);\n const { onDelete, onEdit, searchRef, ref: selectRef } = useSelect2Context();\n const { texts } = useLocalization();\n const [name, setName] = React.useState(initialName);\n const [color, setColor] = React.useState(initialColor);\n const [validationError, setValidationError] = React.useState<Error | undefined>();\n\n const handleInputChange = event => {\n setName(event.target.value);\n setValidationError(undefined);\n };\n\n const handleInputKeyDown = close => async event => {\n event.stopPropagation();\n\n if (event.key === 'Escape') {\n close();\n } else if (event.key === 'Enter') {\n handleSave(close)(event);\n }\n };\n\n const handleDelete = close => async event => {\n event.stopPropagation();\n close();\n\n if (onDelete) {\n await onDelete(value);\n }\n };\n\n const handleSave = close => async event => {\n if (onEdit && (name !== initialName || color !== initialColor)) {\n try {\n await onEdit(value, name, color);\n close();\n } catch (error) {\n event.preventDefault();\n event.stopPropagation();\n setValidationError(error as Error);\n ref.current?.focus();\n }\n } else {\n close();\n }\n };\n\n const handleCloseAutoFocus = event => {\n event.preventDefault();\n setName(initialName);\n setColor(initialColor);\n setValidationError(undefined);\n\n if (searchRef?.current) {\n searchRef.current?.focus();\n } else {\n selectRef.current?.focus();\n }\n };\n\n const handleInteractOutside = () => {\n setName(initialName);\n setColor(initialColor);\n };\n\n const preventKeyDownPropagation = event => {\n if (event.key !== 'Escape') {\n event.stopPropagation();\n }\n };\n\n return (\n <Popover {...popoverProps} modal>\n <Popover.Content\n onCloseAutoFocus={handleCloseAutoFocus}\n onInteractOutside={handleInteractOutside}\n onClick={event => event.stopPropagation()}\n placement=\"right\"\n tabIndex={-1}\n className=\"focus:!shadow-none\">\n {({ close }) => (\n <>\n <div className=\"flex w-32 flex-col space-y-2\">\n {onEdit ? (\n <>\n <Field\n className={cn('!min-h-fit', { '!pb-0': !validationError })}\n invalid={!!validationError}\n message={validationError?.message}>\n <Input\n invalid={!!validationError}\n onChange={handleInputChange}\n onKeyDown={handleInputKeyDown(close)}\n ref={ref}\n value={name}\n />\n </Field>\n {initialColor ? (\n <>\n <h5>Colours</h5>\n <Colours\n color={color}\n onChangeColor={setColor}\n onKeyDown={preventKeyDownPropagation}\n />\n </>\n ) : null}\n <Group>\n <Button onClick={close}>{texts.select2.cancel}</Button>\n <Button appearance=\"primary\" onClick={handleSave(close)}>\n {texts.select2.save}\n </Button>\n </Group>\n </>\n ) : null}\n {onEdit && onDelete ? <hr /> : null}\n {onDelete ? (\n <button\n className=\"hover:text-grey-700 flex items-center justify-start gap-1\"\n onClick={handleDelete(close)}\n onKeyDown={preventKeyDownPropagation}>\n <Icon className=\"!h-5 !w-5\" name=\"delete-permanently\" /> {texts.select2.delete}\n </button>\n ) : null}\n </div>\n </>\n )}\n </Popover.Content>\n </Popover>\n );\n};\n\nconst Colours = props => {\n const { color, onChangeColor, onClick, onKeyDown } = props;\n const { texts } = useLocalization();\n\n return (\n <RadioGroup.Root\n aria-label={texts.select2.chooseColor}\n className=\"grid grid-cols-4 gap-2 focus:outline-none\"\n onClick={onClick}\n onKeyDown={onKeyDown}\n onValueChange={color => onChangeColor(color)}\n value={color}>\n {AVAILABLE_COLORS.map((availableColor: string) => (\n <RadioGroup.Item\n aria-label={color}\n className={cn(\n 'flex h-6 w-6 cursor-pointer items-center justify-center rounded',\n getSubtleColorShadeClasses(availableColor as Color)\n )}\n key={availableColor}\n onFocus={() => onChangeColor(availableColor)}\n value={availableColor}>\n <RadioGroup.Indicator asChild>\n <Icon name=\"tick\" className=\"!h-5 !w-5\" />\n </RadioGroup.Indicator>\n </RadioGroup.Item>\n ))}\n </RadioGroup.Root>\n );\n};\n"],"names":["EditPopover","props","color","initialColor","text","initialName","value","popoverProps","ref","React","useRef","onDelete","onEdit","searchRef","selectRef","useSelect2Context","texts","useLocalization","name","setName","useState","setColor","validationError","setValidationError","handleInputChange","event","target","undefined","handleInputKeyDown","close","stopPropagation","key","handleSave","handleDelete","error","preventDefault","current","focus","handleCloseAutoFocus","handleInteractOutside","preventKeyDownPropagation","Popover","modal","Content","onCloseAutoFocus","onInteractOutside","onClick","placement","tabIndex","className","Field","cn","invalid","message","Input","onChange","onKeyDown","Colours","onChangeColor","Group","Button","select2","cancel","appearance","save","Icon","delete","RadioGroup","chooseColor","onValueChange","AVAILABLE_COLORS","map","availableColor","getSubtleColorShadeClasses","onFocus","asChild"],"mappings":"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"}
1
+ {"version":3,"file":"Edit.js","sources":["../../../../../../../../src/components/Select2/components/Edit.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport * as RadioGroup from '@radix-ui/react-radio-group';\nimport { Button } from '../../Button/Button';\nimport { Input } from '../../Input/Input';\nimport { Popover, PopoverProps } from '../../Popover/Popover';\nimport { Icon } from '../../Icon/Icon';\nimport { Select2OptionValue } from '../types';\nimport { useSelect2Context } from './Context';\nimport { Field } from '../../Field/Field';\nimport { Group } from '../../Group/Group';\nimport { useLocalization } from '../../Provider/Localization';\nimport { Color } from '../../../types';\nimport { AVAILABLE_COLORS, getSubtleColorShadeClasses } from '../../../utils/tailwind';\n\nexport type EditPopoverProps = PopoverProps & {\n color?: Color;\n text: string;\n value: Select2OptionValue;\n};\n\nexport const EditPopover = (props: EditPopoverProps) => {\n const { color: initialColor, text: initialName, value, ...popoverProps } = props;\n const ref = React.useRef<HTMLInputElement>(null);\n const { onDelete, onEdit, searchRef, ref: selectRef } = useSelect2Context();\n const { texts } = useLocalization();\n const [name, setName] = React.useState(initialName);\n const [color, setColor] = React.useState(initialColor);\n const [validationError, setValidationError] = React.useState<Error | undefined>();\n\n const handleInputChange = event => {\n setName(event.target.value);\n setValidationError(undefined);\n };\n\n const handleInputKeyDown = close => async event => {\n event.stopPropagation();\n\n if (event.key === 'Escape') {\n close();\n } else if (event.key === 'Enter') {\n handleSave(close)(event);\n }\n };\n\n const handleDelete = close => async event => {\n event.stopPropagation();\n close();\n\n if (onDelete) {\n await onDelete(value);\n }\n };\n\n const handleSave = close => async event => {\n if (onEdit && (name !== initialName || color !== initialColor)) {\n try {\n await onEdit(value, name, color);\n close();\n } catch (error) {\n event.preventDefault();\n event.stopPropagation();\n setValidationError(error as Error);\n ref.current?.focus();\n }\n } else {\n close();\n }\n };\n\n const handleCloseAutoFocus = event => {\n event.preventDefault();\n setName(initialName);\n setColor(initialColor);\n setValidationError(undefined);\n\n if (searchRef?.current) {\n searchRef.current?.focus();\n } else {\n selectRef.current?.focus();\n }\n };\n\n const handleInteractOutside = () => {\n setName(initialName);\n setColor(initialColor);\n };\n\n const preventKeyDownPropagation = event => {\n if (event.key !== 'Escape') {\n event.stopPropagation();\n }\n };\n\n return (\n <Popover {...popoverProps}>\n <Popover.Content\n onCloseAutoFocus={handleCloseAutoFocus}\n onInteractOutside={handleInteractOutside}\n onClick={event => event.stopPropagation()}\n placement=\"right\"\n tabIndex={-1}\n className=\"focus:!shadow-none\">\n {({ close }) => (\n <>\n <div className=\"flex w-32 flex-col space-y-2\">\n {onEdit ? (\n <>\n <Field\n className={cn('!min-h-fit', { '!pb-0': !validationError })}\n invalid={!!validationError}\n message={validationError?.message}>\n <Input\n invalid={!!validationError}\n onChange={handleInputChange}\n onKeyDown={handleInputKeyDown(close)}\n ref={ref}\n value={name}\n />\n </Field>\n {initialColor ? (\n <>\n <h5>Colours</h5>\n <Colours\n color={color}\n onChangeColor={setColor}\n onKeyDown={preventKeyDownPropagation}\n />\n </>\n ) : null}\n <Group>\n <Button onClick={close}>{texts.select2.cancel}</Button>\n <Button appearance=\"primary\" onClick={handleSave(close)}>\n {texts.select2.save}\n </Button>\n </Group>\n </>\n ) : null}\n {onEdit && onDelete ? <hr /> : null}\n {onDelete ? (\n <button\n className=\"hover:text-grey-700 flex items-center justify-start gap-1\"\n onClick={handleDelete(close)}\n onKeyDown={preventKeyDownPropagation}>\n <Icon className=\"!h-5 !w-5\" name=\"delete-permanently\" /> {texts.select2.delete}\n </button>\n ) : null}\n </div>\n </>\n )}\n </Popover.Content>\n </Popover>\n );\n};\n\nconst Colours = props => {\n const { color, onChangeColor, onClick, onKeyDown } = props;\n const { texts } = useLocalization();\n\n return (\n <RadioGroup.Root\n aria-label={texts.select2.chooseColor}\n className=\"grid grid-cols-4 gap-2 focus:outline-none\"\n onClick={onClick}\n onKeyDown={onKeyDown}\n onValueChange={color => onChangeColor(color)}\n value={color}>\n {AVAILABLE_COLORS.map((availableColor: string) => (\n <RadioGroup.Item\n aria-label={color}\n className={cn(\n 'flex h-6 w-6 cursor-pointer items-center justify-center rounded',\n getSubtleColorShadeClasses(availableColor as Color)\n )}\n key={availableColor}\n onFocus={() => onChangeColor(availableColor)}\n value={availableColor}>\n <RadioGroup.Indicator asChild>\n <Icon name=\"tick\" className=\"!h-5 !w-5\" />\n </RadioGroup.Indicator>\n </RadioGroup.Item>\n ))}\n </RadioGroup.Root>\n );\n};\n"],"names":["EditPopover","props","color","initialColor","text","initialName","value","popoverProps","ref","React","useRef","onDelete","onEdit","searchRef","selectRef","useSelect2Context","texts","useLocalization","name","setName","useState","setColor","validationError","setValidationError","handleInputChange","event","target","undefined","handleInputKeyDown","close","stopPropagation","key","handleSave","handleDelete","error","preventDefault","current","focus","handleCloseAutoFocus","handleInteractOutside","preventKeyDownPropagation","Popover","Content","onCloseAutoFocus","onInteractOutside","onClick","placement","tabIndex","className","Field","cn","invalid","message","Input","onChange","onKeyDown","Colours","onChangeColor","Group","Button","select2","cancel","appearance","save","Icon","delete","RadioGroup","chooseColor","onValueChange","AVAILABLE_COLORS","map","availableColor","getSubtleColorShadeClasses","onFocus","asChild"],"mappings":"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"}
@@ -15,7 +15,8 @@ const Search = /*#__PURE__*/React__default.forwardRef(function ListboxSearch(pro
15
15
  searchQuery,
16
16
  setSearchQuery,
17
17
  setValidationError,
18
- validationError
18
+ validationError,
19
+ setOpen
19
20
  } = useSelect2Context();
20
21
  const handleChange = event => {
21
22
  if (validationError) {
@@ -28,6 +29,11 @@ const Search = /*#__PURE__*/React__default.forwardRef(function ListboxSearch(pro
28
29
  if (event.key === ' ') {
29
30
  return;
30
31
  }
32
+ // Select2 should close dropdown and receive focus, when user press Tab while searching (UX requirement to support better keyboard navigation)
33
+ if (event.key === 'Tab') {
34
+ setOpen(false);
35
+ return;
36
+ }
31
37
  if (isAriaSelectionKey(event) || event.key === 'ArrowDown' || event.key === 'ArrowUp') {
32
38
  var _listboxRef$current;
33
39
  event.preventDefault();
@@ -1 +1 @@
1
- {"version":3,"file":"Search.js","sources":["../../../../../../../../src/components/Select2/components/Search.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { createCustomKeyboardEvent } from '../../../utils/input';\nimport { Input, InputProps } from '../../Input/Input';\nimport { useSelect2Context } from './Context';\nimport { Field } from '../../Field/Field';\nimport { isAriaSelectionKey } from '../../../utils/aria';\n\nexport type Select2SearchProps = InputProps & {};\n\nexport const Search = React.forwardRef<HTMLInputElement, Select2SearchProps>(function ListboxSearch(props, ref) {\n const { ...otherProps } = props;\n const { listboxRef, searchQuery, setSearchQuery, setValidationError, validationError } = useSelect2Context();\n\n const handleChange = event => {\n if (validationError) {\n setValidationError(undefined);\n }\n\n setSearchQuery(event.target.value);\n };\n\n const handleKeyDown = event => {\n // space is an aria selection key, so we have to remove it to allow spaces\n if (event.key === ' ') {\n return;\n }\n\n if (isAriaSelectionKey(event) || event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n event.preventDefault();\n // forward navigation events onto the underlying collection - we want arrow keys to work from inside the filter input\n listboxRef?.current?.dispatchEvent(createCustomKeyboardEvent(event as React.KeyboardEvent<HTMLInputElement>));\n return;\n }\n };\n\n return (\n <Field\n className={cn('mx-1.5 mb-1.5 !min-h-fit ', { '!pb-0': !validationError })}\n invalid={!!validationError}\n message={validationError?.message}>\n <Input\n {...otherProps}\n aria-hidden\n autoFocus\n invalid={!!validationError}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n ref={ref}\n value={searchQuery}\n />\n </Field>\n );\n});\n"],"names":["Search","React","forwardRef","ListboxSearch","props","ref","otherProps","listboxRef","searchQuery","setSearchQuery","setValidationError","validationError","useSelect2Context","handleChange","event","undefined","target","value","handleKeyDown","key","isAriaSelectionKey","preventDefault","current","dispatchEvent","createCustomKeyboardEvent","Field","className","cn","invalid","message","Input","autoFocus","onChange","onKeyDown"],"mappings":";;;;;;;;MAUaA,MAAM,gBAAGC,cAAK,CAACC,UAAU,CAAuC,SAASC,aAAa,CAACC,KAAK,EAAEC,GAAG;EAC1G,MAAM;IAAE,GAAGC;GAAY,GAAGF,KAAK;EAC/B,MAAM;IAAEG,UAAU;IAAEC,WAAW;IAAEC,cAAc;IAAEC,kBAAkB;IAAEC;GAAiB,GAAGC,iBAAiB,EAAE;EAE5G,MAAMC,YAAY,GAAGC,KAAK;IACtB,IAAIH,eAAe,EAAE;MACjBD,kBAAkB,CAACK,SAAS,CAAC;;IAGjCN,cAAc,CAACK,KAAK,CAACE,MAAM,CAACC,KAAK,CAAC;GACrC;EAED,MAAMC,aAAa,GAAGJ,KAAK;;IAEvB,IAAIA,KAAK,CAACK,GAAG,KAAK,GAAG,EAAE;MACnB;;IAGJ,IAAIC,kBAAkB,CAACN,KAAK,CAAC,IAAIA,KAAK,CAACK,GAAG,KAAK,WAAW,IAAIL,KAAK,CAACK,GAAG,KAAK,SAAS,EAAE;MAAA;MACnFL,KAAK,CAACO,cAAc,EAAE;;MAEtBd,UAAU,aAAVA,UAAU,8CAAVA,UAAU,CAAEe,OAAO,wDAAnB,oBAAqBC,aAAa,CAACC,yBAAyB,CAACV,KAA8C,CAAC,CAAC;MAC7G;;GAEP;EAED,oBACIb,6BAACwB,KAAK;IACFC,SAAS,EAAEC,EAAE,CAAC,2BAA2B,EAAE;MAAE,OAAO,EAAE,CAAChB;KAAiB,CAAC;IACzEiB,OAAO,EAAE,CAAC,CAACjB,eAAe;IAC1BkB,OAAO,EAAElB,eAAe,aAAfA,eAAe,uBAAfA,eAAe,CAAEkB;kBAC1B5B,6BAAC6B,KAAK,oBACExB,UAAU;;IAEdyB,SAAS;IACTH,OAAO,EAAE,CAAC,CAACjB,eAAe;IAC1BqB,QAAQ,EAAEnB,YAAY;IACtBoB,SAAS,EAAEf,aAAa;IACxBb,GAAG,EAAEA,GAAG;IACRY,KAAK,EAAET;KACT,CACE;AAEhB,CAAC;;;;"}
1
+ {"version":3,"file":"Search.js","sources":["../../../../../../../../src/components/Select2/components/Search.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { createCustomKeyboardEvent } from '../../../utils/input';\nimport { Input, InputProps } from '../../Input/Input';\nimport { useSelect2Context } from './Context';\nimport { Field } from '../../Field/Field';\nimport { isAriaSelectionKey } from '../../../utils/aria';\n\nexport type Select2SearchProps = InputProps & {};\n\nexport const Search = React.forwardRef<HTMLInputElement, Select2SearchProps>(function ListboxSearch(props, ref) {\n const { ...otherProps } = props;\n const { listboxRef, searchQuery, setSearchQuery, setValidationError, validationError, setOpen } = useSelect2Context();\n\n const handleChange = event => {\n if (validationError) {\n setValidationError(undefined);\n }\n\n setSearchQuery(event.target.value);\n };\n\n const handleKeyDown = event => {\n // space is an aria selection key, so we have to remove it to allow spaces\n if (event.key === ' ') {\n return;\n }\n\n // Select2 should close dropdown and receive focus, when user press Tab while searching (UX requirement to support better keyboard navigation)\n if (event.key === 'Tab') {\n setOpen(false);\n return;\n }\n\n if (isAriaSelectionKey(event) || event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n event.preventDefault();\n // forward navigation events onto the underlying collection - we want arrow keys to work from inside the filter input\n listboxRef?.current?.dispatchEvent(createCustomKeyboardEvent(event as React.KeyboardEvent<HTMLInputElement>));\n return;\n }\n };\n\n return (\n <Field\n className={cn('mx-1.5 mb-1.5 !min-h-fit ', { '!pb-0': !validationError })}\n invalid={!!validationError}\n message={validationError?.message}>\n <Input\n {...otherProps}\n aria-hidden\n autoFocus\n invalid={!!validationError}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n ref={ref}\n value={searchQuery}\n />\n </Field>\n );\n});\n"],"names":["Search","React","forwardRef","ListboxSearch","props","ref","otherProps","listboxRef","searchQuery","setSearchQuery","setValidationError","validationError","setOpen","useSelect2Context","handleChange","event","undefined","target","value","handleKeyDown","key","isAriaSelectionKey","preventDefault","current","dispatchEvent","createCustomKeyboardEvent","Field","className","cn","invalid","message","Input","autoFocus","onChange","onKeyDown"],"mappings":";;;;;;;;MAUaA,MAAM,gBAAGC,cAAK,CAACC,UAAU,CAAuC,SAASC,aAAa,CAACC,KAAK,EAAEC,GAAG;EAC1G,MAAM;IAAE,GAAGC;GAAY,GAAGF,KAAK;EAC/B,MAAM;IAAEG,UAAU;IAAEC,WAAW;IAAEC,cAAc;IAAEC,kBAAkB;IAAEC,eAAe;IAAEC;GAAS,GAAGC,iBAAiB,EAAE;EAErH,MAAMC,YAAY,GAAGC,KAAK;IACtB,IAAIJ,eAAe,EAAE;MACjBD,kBAAkB,CAACM,SAAS,CAAC;;IAGjCP,cAAc,CAACM,KAAK,CAACE,MAAM,CAACC,KAAK,CAAC;GACrC;EAED,MAAMC,aAAa,GAAGJ,KAAK;;IAEvB,IAAIA,KAAK,CAACK,GAAG,KAAK,GAAG,EAAE;MACnB;;;IAIJ,IAAIL,KAAK,CAACK,GAAG,KAAK,KAAK,EAAE;MACrBR,OAAO,CAAC,KAAK,CAAC;MACd;;IAGJ,IAAIS,kBAAkB,CAACN,KAAK,CAAC,IAAIA,KAAK,CAACK,GAAG,KAAK,WAAW,IAAIL,KAAK,CAACK,GAAG,KAAK,SAAS,EAAE;MAAA;MACnFL,KAAK,CAACO,cAAc,EAAE;;MAEtBf,UAAU,aAAVA,UAAU,8CAAVA,UAAU,CAAEgB,OAAO,wDAAnB,oBAAqBC,aAAa,CAACC,yBAAyB,CAACV,KAA8C,CAAC,CAAC;MAC7G;;GAEP;EAED,oBACId,6BAACyB,KAAK;IACFC,SAAS,EAAEC,EAAE,CAAC,2BAA2B,EAAE;MAAE,OAAO,EAAE,CAACjB;KAAiB,CAAC;IACzEkB,OAAO,EAAE,CAAC,CAAClB,eAAe;IAC1BmB,OAAO,EAAEnB,eAAe,aAAfA,eAAe,uBAAfA,eAAe,CAAEmB;kBAC1B7B,6BAAC8B,KAAK,oBACEzB,UAAU;;IAEd0B,SAAS;IACTH,OAAO,EAAE,CAAC,CAAClB,eAAe;IAC1BsB,QAAQ,EAAEnB,YAAY;IACtBoB,SAAS,EAAEf,aAAa;IACxBd,GAAG,EAAEA,GAAG;IACRa,KAAK,EAAEV;KACT,CACE;AAEhB,CAAC;;;;"}
@@ -18,8 +18,7 @@ const MemoedCell = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
18
18
  isEditing,
19
19
  isResizingColumn,
20
20
  isHoverStatePaused,
21
- row,
22
- table
21
+ row
23
22
  } = props;
24
23
  const {
25
24
  isHovered
@@ -28,18 +27,20 @@ const MemoedCell = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
28
27
  texts
29
28
  } = useLocalization();
30
29
  const ref = React__default.useRef(null);
31
- const size = table.getState().columnSizing[COLUMN_ID];
32
- // the actions column needs to set its size based on its content, not the actual column
33
- // so we do this here instead of in the header
34
- React__default.useLayoutEffect(() => {
35
- if (ref.current && !size) {
36
- const width = ref.current.getBoundingClientRect().width;
37
- table.setColumnSizing(sizes => ({
38
- ...sizes,
39
- [COLUMN_ID]: width
40
- }));
41
- }
42
- }, [ref.current]);
30
+ /*
31
+ const size = table.getState().columnSizing[COLUMN_ID];
32
+ // the actions column needs to set its size based on its content, not the actual column
33
+ // so we do this here instead of in the header
34
+ React.useLayoutEffect(() => {
35
+ if (ref.current && !size) {
36
+ const width = ref.current.getBoundingClientRect().width;
37
+ table.setColumnSizing(sizes => ({
38
+ ...sizes,
39
+ [COLUMN_ID]: width,
40
+ }));
41
+ }
42
+ }, [ref.current]);
43
+ */
43
44
  let content;
44
45
  // We don't want to show actions in edit mode, since we have editing actions,
45
46
  // which is shown in edit mode instead.
@@ -1 +1 @@
1
- {"version":3,"file":"Actions.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/internal/Actions.tsx"],"sourcesContent":["import React from 'react';\nimport { CellContext, DisplayColumnDef, TableMeta } from '@tanstack/react-table';\nimport cn from 'classnames';\nimport { Header as ColumnHeader } from '../header/Header';\nimport { DisplayCell } from '../cell/DisplayCell';\nimport { Table3RowActionRenderer } from '../../../types';\nimport { RowContext } from '../../rows/RowContext';\nimport { IconButton } from '../../../../IconButton/IconButton';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { Menu } from '../../../../Menu/Menu';\nimport { Shortcut } from '../../../../Shortcut/Shortcut';\nimport { Footer } from '../footer/Footer';\n\nexport const COLUMN_ID = '__actions';\n\ntype MemoedCellProps<TType = unknown> = CellContext<TType, unknown> & {\n actions?: Table3RowActionRenderer<TType>[];\n actionsLength: number;\n isCurrentRow: boolean;\n isEditing: boolean;\n isResizingColumn: boolean;\n isHoverStatePaused: boolean;\n};\n\nconst MemoedCell = React.memo(function MemoedCell<TType = unknown>(props: MemoedCellProps<TType>) {\n const { actions, actionsLength, isCurrentRow, isEditing, isResizingColumn, isHoverStatePaused, row, table } = props;\n const { isHovered } = React.useContext(RowContext);\n const { texts } = useLocalization();\n const ref = React.useRef<HTMLSpanElement | null>(null);\n const size = table.getState().columnSizing[COLUMN_ID];\n\n // the actions column needs to set its size based on its content, not the actual column\n // so we do this here instead of in the header\n React.useLayoutEffect(() => {\n if (ref.current && !size) {\n const width = ref.current.getBoundingClientRect().width;\n\n table.setColumnSizing(sizes => ({\n ...sizes,\n [COLUMN_ID]: width,\n }));\n }\n }, [ref.current]);\n\n let content;\n\n // We don't want to show actions in edit mode, since we have editing actions,\n // which is shown in edit mode instead.\n if (actions?.length && !isEditing && (isCurrentRow || (isHovered && !isHoverStatePaused && !isResizingColumn))) {\n const visibleActions = actions.map(action => action(row.original)).filter(action => !!action) as JSX.Element[];\n\n const actionsOnRow =\n visibleActions.length === actionsLength ? visibleActions : visibleActions.slice(0, actionsLength - 1);\n const actionsInMenu = visibleActions.slice(visibleActions.length === actionsLength ? actionsLength : actionsLength - 1);\n\n content = (\n <span className=\"-mb-2 -mt-2 flex justify-end pl-2 text-right\" ref={ref}>\n {actionsOnRow.map((button, index) => {\n const tooltip = String(button.props.tooltip ?? button.props['aria-label'] ?? '');\n\n return React.cloneElement(button, {\n appearance: 'discrete',\n key: index,\n tabIndex: isCurrentRow ? 0 : -1,\n tooltip: button.props.shortcut ? (\n <>\n {tooltip}\n <Shortcut className=\"ml-2\" keys={button.props.shortcut} />\n </>\n ) : (\n tooltip\n ),\n });\n })}\n {actionsInMenu.length ? (\n <IconButton\n appearance=\"discrete\"\n aria-label={texts.table3.columns.actions.tooltip}\n icon=\"more\"\n tabIndex={isCurrentRow ? 0 : -1}\n menu={menuProps => (\n <Menu {...menuProps}>\n <Menu.Content>\n {actionsInMenu.map((action, i) => (\n <Menu.Item key={i} {...action.props} shortcut={action.props.shortcut}>\n {action.props['aria-label']}\n </Menu.Item>\n ))}\n </Menu.Content>\n </Menu>\n )}\n />\n ) : null}\n </span>\n );\n }\n\n return <DisplayCell {...props}>{content}</DisplayCell>;\n}) as <TType = unknown>(props: MemoedCellProps<TType>) => JSX.Element;\n\ntype CellProps<TType = unknown> = CellContext<TType, unknown>;\n\nfunction Cell<TType = unknown>(context: CellProps<TType>) {\n const { rowIndex } = React.useContext(RowContext);\n const tableMeta = context.table.options.meta as TableMeta<TType>;\n\n return (\n <MemoedCell\n {...context}\n actions={tableMeta.rowActions.actionsForRow}\n actionsLength={tableMeta.rowActions.actionsForRowLength}\n isCurrentRow={tableMeta.currentRow.currentRowIndex === rowIndex}\n isEditing={tableMeta.editing.isEditing}\n isResizingColumn={!!context.table.getState().columnSizingInfo.isResizingColumn}\n isHoverStatePaused={!!tableMeta.hoverState.isPaused}\n />\n );\n}\n\nexport function createRowActionsColumn<TType = unknown>(): DisplayColumnDef<TType, unknown> {\n return {\n id: COLUMN_ID,\n header: ColumnHeader,\n cell: Cell,\n footer: Footer,\n meta: {\n align: 'right',\n className: cn(\n '!pt-[var(--table3-row-padding)] print:opacity-0 [[role=\"table\"][data-editing=\"false\"]_&]:group-[[data-current=\"true\"]]/row:sticky [[role=\"table\"][data-pause-hover=\"false\"][data-editing=\"false\"]_&]:group-hover/row:sticky right-0 !pl-1 !pr-1',\n '[[role=\"table\"][data-editing=\"false\"]_&]:group-[[data-current=\"true\"]]/row:shadow-[-6px_0px_6px] [[role=\"table\"][data-pause-hover=\"false\"][data-editing=\"false\"]_&]:group-hover/row:shadow-[-6px_0px_6px]',\n 'group-[[data-current=\"true\"][data-selected=\"false\"]]/row:text-grey-200',\n 'group-[[data-selected=\"true\"]]/row:text-blue-100',\n 'group-[[data-selected=\"false\"]:hover]/row:text-grey-100'\n ),\n enableOrdering: false,\n enableSearch: false,\n enableTruncate: false,\n header: '',\n headerClassName: 'items-center !p-0',\n },\n // options\n enableResizing: false,\n };\n}\n"],"names":["COLUMN_ID","MemoedCell","React","memo","props","actions","actionsLength","isCurrentRow","isEditing","isResizingColumn","isHoverStatePaused","row","table","isHovered","useContext","RowContext","texts","useLocalization","ref","useRef","size","getState","columnSizing","useLayoutEffect","current","width","getBoundingClientRect","setColumnSizing","sizes","content","length","visibleActions","map","action","original","filter","actionsOnRow","slice","actionsInMenu","className","button","index","tooltip","String","cloneElement","appearance","key","tabIndex","shortcut","Shortcut","keys","IconButton","table3","columns","icon","menu","menuProps","Menu","Content","i","Item","DisplayCell","Cell","context","rowIndex","tableMeta","options","meta","rowActions","actionsForRow","actionsForRowLength","currentRow","currentRowIndex","editing","columnSizingInfo","hoverState","isPaused","createRowActionsColumn","id","header","ColumnHeader","cell","footer","Footer","align","cn","enableOrdering","enableSearch","enableTruncate","headerClassName","enableResizing"],"mappings":"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"}
1
+ {"version":3,"file":"Actions.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/internal/Actions.tsx"],"sourcesContent":["import React from 'react';\nimport { CellContext, DisplayColumnDef, TableMeta } from '@tanstack/react-table';\nimport cn from 'classnames';\nimport { Header as ColumnHeader } from '../header/Header';\nimport { DisplayCell } from '../cell/DisplayCell';\nimport { Table3RowActionRenderer } from '../../../types';\nimport { RowContext } from '../../rows/RowContext';\nimport { IconButton } from '../../../../IconButton/IconButton';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { Menu } from '../../../../Menu/Menu';\nimport { Shortcut } from '../../../../Shortcut/Shortcut';\nimport { Footer } from '../footer/Footer';\n\nexport const COLUMN_ID = '__actions';\n\ntype MemoedCellProps<TType = unknown> = CellContext<TType, unknown> & {\n actions?: Table3RowActionRenderer<TType>[];\n actionsLength: number;\n isCurrentRow: boolean;\n isEditing: boolean;\n isResizingColumn: boolean;\n isHoverStatePaused: boolean;\n};\n\nconst MemoedCell = React.memo(function MemoedCell<TType = unknown>(props: MemoedCellProps<TType>) {\n const { actions, actionsLength, isCurrentRow, isEditing, isResizingColumn, isHoverStatePaused, row } = props;\n const { isHovered } = React.useContext(RowContext);\n const { texts } = useLocalization();\n const ref = React.useRef<HTMLSpanElement | null>(null);\n /*\n const size = table.getState().columnSizing[COLUMN_ID];\n\n // the actions column needs to set its size based on its content, not the actual column\n // so we do this here instead of in the header\n React.useLayoutEffect(() => {\n if (ref.current && !size) {\n const width = ref.current.getBoundingClientRect().width;\n\n table.setColumnSizing(sizes => ({\n ...sizes,\n [COLUMN_ID]: width,\n }));\n }\n }, [ref.current]);\n */\n\n let content;\n\n // We don't want to show actions in edit mode, since we have editing actions,\n // which is shown in edit mode instead.\n if (actions?.length && !isEditing && (isCurrentRow || (isHovered && !isHoverStatePaused && !isResizingColumn))) {\n const visibleActions = actions.map(action => action(row.original)).filter(action => !!action) as JSX.Element[];\n\n const actionsOnRow =\n visibleActions.length === actionsLength ? visibleActions : visibleActions.slice(0, actionsLength - 1);\n const actionsInMenu = visibleActions.slice(visibleActions.length === actionsLength ? actionsLength : actionsLength - 1);\n\n content = (\n <span className=\"-mb-2 -mt-2 flex justify-end pl-2 text-right\" ref={ref}>\n {actionsOnRow.map((button, index) => {\n const tooltip = String(button.props.tooltip ?? button.props['aria-label'] ?? '');\n\n return React.cloneElement(button, {\n appearance: 'discrete',\n key: index,\n tabIndex: isCurrentRow ? 0 : -1,\n tooltip: button.props.shortcut ? (\n <>\n {tooltip}\n <Shortcut className=\"ml-2\" keys={button.props.shortcut} />\n </>\n ) : (\n tooltip\n ),\n });\n })}\n {actionsInMenu.length ? (\n <IconButton\n appearance=\"discrete\"\n aria-label={texts.table3.columns.actions.tooltip}\n icon=\"more\"\n tabIndex={isCurrentRow ? 0 : -1}\n menu={menuProps => (\n <Menu {...menuProps}>\n <Menu.Content>\n {actionsInMenu.map((action, i) => (\n <Menu.Item key={i} {...action.props} shortcut={action.props.shortcut}>\n {action.props['aria-label']}\n </Menu.Item>\n ))}\n </Menu.Content>\n </Menu>\n )}\n />\n ) : null}\n </span>\n );\n }\n\n return <DisplayCell {...props}>{content}</DisplayCell>;\n}) as <TType = unknown>(props: MemoedCellProps<TType>) => JSX.Element;\n\ntype CellProps<TType = unknown> = CellContext<TType, unknown>;\n\nfunction Cell<TType = unknown>(context: CellProps<TType>) {\n const { rowIndex } = React.useContext(RowContext);\n const tableMeta = context.table.options.meta as TableMeta<TType>;\n\n return (\n <MemoedCell\n {...context}\n actions={tableMeta.rowActions.actionsForRow}\n actionsLength={tableMeta.rowActions.actionsForRowLength}\n isCurrentRow={tableMeta.currentRow.currentRowIndex === rowIndex}\n isEditing={tableMeta.editing.isEditing}\n isResizingColumn={!!context.table.getState().columnSizingInfo.isResizingColumn}\n isHoverStatePaused={!!tableMeta.hoverState.isPaused}\n />\n );\n}\n\nexport function createRowActionsColumn<TType = unknown>(): DisplayColumnDef<TType, unknown> {\n return {\n id: COLUMN_ID,\n header: ColumnHeader,\n cell: Cell,\n footer: Footer,\n meta: {\n align: 'right',\n className: cn(\n '!pt-[var(--table3-row-padding)] print:opacity-0 [[role=\"table\"][data-editing=\"false\"]_&]:group-[[data-current=\"true\"]]/row:sticky [[role=\"table\"][data-pause-hover=\"false\"][data-editing=\"false\"]_&]:group-hover/row:sticky right-0 !pl-1 !pr-1',\n '[[role=\"table\"][data-editing=\"false\"]_&]:group-[[data-current=\"true\"]]/row:shadow-[-6px_0px_6px] [[role=\"table\"][data-pause-hover=\"false\"][data-editing=\"false\"]_&]:group-hover/row:shadow-[-6px_0px_6px]',\n 'group-[[data-current=\"true\"][data-selected=\"false\"]]/row:text-grey-200',\n 'group-[[data-selected=\"true\"]]/row:text-blue-100',\n 'group-[[data-selected=\"false\"]:hover]/row:text-grey-100'\n ),\n enableOrdering: false,\n enableSearch: false,\n enableTruncate: false,\n header: '',\n headerClassName: 'items-center !p-0',\n },\n // options\n enableResizing: false,\n };\n}\n"],"names":["COLUMN_ID","MemoedCell","React","memo","props","actions","actionsLength","isCurrentRow","isEditing","isResizingColumn","isHoverStatePaused","row","isHovered","useContext","RowContext","texts","useLocalization","ref","useRef","content","length","visibleActions","map","action","original","filter","actionsOnRow","slice","actionsInMenu","className","button","index","tooltip","String","cloneElement","appearance","key","tabIndex","shortcut","Shortcut","keys","IconButton","table3","columns","icon","menu","menuProps","Menu","Content","i","Item","DisplayCell","Cell","context","rowIndex","tableMeta","table","options","meta","rowActions","actionsForRow","actionsForRowLength","currentRow","currentRowIndex","editing","getState","columnSizingInfo","hoverState","isPaused","createRowActionsColumn","id","header","ColumnHeader","cell","footer","Footer","align","cn","enableOrdering","enableSearch","enableTruncate","headerClassName","enableResizing"],"mappings":"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"}
@@ -3,7 +3,6 @@ import { isInternalColumn } from '../util/columns.js';
3
3
  import { MIN_COLUMN_SIZE } from '../components/columns/styles.js';
4
4
  import { COLUMN_ID } from '../components/columns/internal/Actions.js';
5
5
 
6
- const REACT_TABLE_DEFAULT_COLUMN_SIZE_DO_NOT_CHANGE = 150;
7
6
  const useCssGrid = table => {
8
7
  const allVisibleColumns = table.getVisibleLeafColumns();
9
8
  const columnSizing = table.getState().columnSizing;
@@ -17,7 +16,7 @@ const useCssGrid = table => {
17
16
  const width = columnSizing[column.id];
18
17
  if (isInternalColumn(column.id)) {
19
18
  if (column.id === COLUMN_ID) {
20
- size = column.getSize() !== REACT_TABLE_DEFAULT_COLUMN_SIZE_DO_NOT_CHANGE ? `minmax(${column.getSize()}px, 1fr)` : '1fr';
19
+ size = 'minmax(max-content, auto)';
21
20
  } else {
22
21
  size = `${column.getSize()}px`;
23
22
  }
@@ -1 +1 @@
1
- {"version":3,"file":"useCssGrid.js","sources":["../../../../../../../../src/components/Table3/hooks/useCssGrid.ts"],"sourcesContent":["import React from 'react';\nimport { Table as RTable } from '@tanstack/react-table';\nimport { isInternalColumn } from '../util/columns';\nimport { MIN_COLUMN_SIZE } from '../components/columns/styles';\nimport { COLUMN_ID as ACTIONS_COLUMN_ID } from '../components/columns/internal/Actions';\n\nconst REACT_TABLE_DEFAULT_COLUMN_SIZE_DO_NOT_CHANGE = 150;\n\nexport const useCssGrid = <TType = unknown>(table: RTable<TType>) => {\n const allVisibleColumns = table.getVisibleLeafColumns();\n const columnSizing = table.getState().columnSizing;\n const length = table.getRowModel().rows.length;\n\n const gridTemplateColumns = React.useMemo(() => {\n return allVisibleColumns.reduce((accum, column, index) => {\n let size;\n const isLastColumn = index === allVisibleColumns.length - 1;\n // column has a getSize function, but it always returns a default value (150), and we want the\n // first render to use auto layout - so we get the size directly from table state where it is undefined\n const width = columnSizing[column.id] as number | '1fr';\n\n if (isInternalColumn(column.id)) {\n if (column.id === ACTIONS_COLUMN_ID) {\n size =\n column.getSize() !== REACT_TABLE_DEFAULT_COLUMN_SIZE_DO_NOT_CHANGE\n ? `minmax(${column.getSize()}px, 1fr)`\n : '1fr';\n } else {\n size = `${column.getSize()}px`;\n }\n } else if (width !== undefined) {\n if (width === '1fr') {\n size = 'minmax(max-content, 1fr)';\n } else if (isLastColumn) {\n size = `minmax(${width}px, auto)`;\n } else if (width < MIN_COLUMN_SIZE) {\n // the react-table getResizeHandler function does not respect the minSize property on columns, it is possible\n // to go below the minSize - so we have to prevent it entirely on the grid layout\n size = `${MIN_COLUMN_SIZE}px`;\n } else {\n size = `${width}px`;\n }\n } else {\n size = 'minmax(max-content, auto)';\n }\n\n return `${accum} ${size}`.trim();\n }, '');\n }, [allVisibleColumns, columnSizing]);\n\n const gridTemplateRows = React.useMemo(() => {\n return `min-content repeat(${length}, min-content) 1fr min-content`;\n }, [length]);\n\n const style: React.CSSProperties = {\n gridTemplateColumns,\n gridTemplateRows,\n };\n\n return { style };\n};\n"],"names":["REACT_TABLE_DEFAULT_COLUMN_SIZE_DO_NOT_CHANGE","useCssGrid","table","allVisibleColumns","getVisibleLeafColumns","columnSizing","getState","length","getRowModel","rows","gridTemplateColumns","React","useMemo","reduce","accum","column","index","size","isLastColumn","width","id","isInternalColumn","ACTIONS_COLUMN_ID","getSize","undefined","MIN_COLUMN_SIZE","trim","gridTemplateRows","style"],"mappings":";;;;;AAMA,MAAMA,6CAA6C,GAAG,GAAG;MAE5CC,UAAU,GAAqBC,KAAoB;EAC5D,MAAMC,iBAAiB,GAAGD,KAAK,CAACE,qBAAqB,EAAE;EACvD,MAAMC,YAAY,GAAGH,KAAK,CAACI,QAAQ,EAAE,CAACD,YAAY;EAClD,MAAME,MAAM,GAAGL,KAAK,CAACM,WAAW,EAAE,CAACC,IAAI,CAACF,MAAM;EAE9C,MAAMG,mBAAmB,GAAGC,cAAK,CAACC,OAAO,CAAC;IACtC,OAAOT,iBAAiB,CAACU,MAAM,CAAC,CAACC,KAAK,EAAEC,MAAM,EAAEC,KAAK;MACjD,IAAIC,IAAI;MACR,MAAMC,YAAY,GAAGF,KAAK,KAAKb,iBAAiB,CAACI,MAAM,GAAG,CAAC;;;MAG3D,MAAMY,KAAK,GAAGd,YAAY,CAACU,MAAM,CAACK,EAAE,CAAmB;MAEvD,IAAIC,gBAAgB,CAACN,MAAM,CAACK,EAAE,CAAC,EAAE;QAC7B,IAAIL,MAAM,CAACK,EAAE,KAAKE,SAAiB,EAAE;UACjCL,IAAI,GACAF,MAAM,CAACQ,OAAO,EAAE,KAAKvB,6CAA6C,aAClDe,MAAM,CAACQ,OAAO,YAAY,GACpC,KAAK;SAClB,MAAM;UACHN,IAAI,MAAMF,MAAM,CAACQ,OAAO,MAAM;;OAErC,MAAM,IAAIJ,KAAK,KAAKK,SAAS,EAAE;QAC5B,IAAIL,KAAK,KAAK,KAAK,EAAE;UACjBF,IAAI,GAAG,0BAA0B;SACpC,MAAM,IAAIC,YAAY,EAAE;UACrBD,IAAI,aAAaE,gBAAgB;SACpC,MAAM,IAAIA,KAAK,GAAGM,eAAe,EAAE;;;UAGhCR,IAAI,MAAMQ,mBAAmB;SAChC,MAAM;UACHR,IAAI,MAAME,SAAS;;OAE1B,MAAM;QACHF,IAAI,GAAG,2BAA2B;;MAGtC,UAAUH,SAASG,MAAM,CAACS,IAAI,EAAE;KACnC,EAAE,EAAE,CAAC;GACT,EAAE,CAACvB,iBAAiB,EAAEE,YAAY,CAAC,CAAC;EAErC,MAAMsB,gBAAgB,GAAGhB,cAAK,CAACC,OAAO,CAAC;IACnC,6BAA6BL,sCAAsC;GACtE,EAAE,CAACA,MAAM,CAAC,CAAC;EAEZ,MAAMqB,KAAK,GAAwB;IAC/BlB,mBAAmB;IACnBiB;GACH;EAED,OAAO;IAAEC;GAAO;AACpB;;;;"}
1
+ {"version":3,"file":"useCssGrid.js","sources":["../../../../../../../../src/components/Table3/hooks/useCssGrid.ts"],"sourcesContent":["import React from 'react';\nimport { Table as RTable } from '@tanstack/react-table';\nimport { isInternalColumn } from '../util/columns';\nimport { MIN_COLUMN_SIZE } from '../components/columns/styles';\nimport { COLUMN_ID as ACTIONS_COLUMN_ID } from '../components/columns/internal/Actions';\n\nexport const useCssGrid = <TType = unknown>(table: RTable<TType>) => {\n const allVisibleColumns = table.getVisibleLeafColumns();\n const columnSizing = table.getState().columnSizing;\n const length = table.getRowModel().rows.length;\n\n const gridTemplateColumns = React.useMemo(() => {\n return allVisibleColumns.reduce((accum, column, index) => {\n let size;\n const isLastColumn = index === allVisibleColumns.length - 1;\n // column has a getSize function, but it always returns a default value (150), and we want the\n // first render to use auto layout - so we get the size directly from table state where it is undefined\n const width = columnSizing[column.id] as number | '1fr';\n\n if (isInternalColumn(column.id)) {\n if (column.id === ACTIONS_COLUMN_ID) {\n size = 'minmax(max-content, auto)';\n } else {\n size = `${column.getSize()}px`;\n }\n } else if (width !== undefined) {\n if (width === '1fr') {\n size = 'minmax(max-content, 1fr)';\n } else if (isLastColumn) {\n size = `minmax(${width}px, auto)`;\n } else if (width < MIN_COLUMN_SIZE) {\n // the react-table getResizeHandler function does not respect the minSize property on columns, it is possible\n // to go below the minSize - so we have to prevent it entirely on the grid layout\n size = `${MIN_COLUMN_SIZE}px`;\n } else {\n size = `${width}px`;\n }\n } else {\n size = 'minmax(max-content, auto)';\n }\n\n return `${accum} ${size}`.trim();\n }, '');\n }, [allVisibleColumns, columnSizing]);\n\n const gridTemplateRows = React.useMemo(() => {\n return `min-content repeat(${length}, min-content) 1fr min-content`;\n }, [length]);\n\n const style: React.CSSProperties = {\n gridTemplateColumns,\n gridTemplateRows,\n };\n\n return { style };\n};\n"],"names":["useCssGrid","table","allVisibleColumns","getVisibleLeafColumns","columnSizing","getState","length","getRowModel","rows","gridTemplateColumns","React","useMemo","reduce","accum","column","index","size","isLastColumn","width","id","isInternalColumn","ACTIONS_COLUMN_ID","getSize","undefined","MIN_COLUMN_SIZE","trim","gridTemplateRows","style"],"mappings":";;;;;MAMaA,UAAU,GAAqBC,KAAoB;EAC5D,MAAMC,iBAAiB,GAAGD,KAAK,CAACE,qBAAqB,EAAE;EACvD,MAAMC,YAAY,GAAGH,KAAK,CAACI,QAAQ,EAAE,CAACD,YAAY;EAClD,MAAME,MAAM,GAAGL,KAAK,CAACM,WAAW,EAAE,CAACC,IAAI,CAACF,MAAM;EAE9C,MAAMG,mBAAmB,GAAGC,cAAK,CAACC,OAAO,CAAC;IACtC,OAAOT,iBAAiB,CAACU,MAAM,CAAC,CAACC,KAAK,EAAEC,MAAM,EAAEC,KAAK;MACjD,IAAIC,IAAI;MACR,MAAMC,YAAY,GAAGF,KAAK,KAAKb,iBAAiB,CAACI,MAAM,GAAG,CAAC;;;MAG3D,MAAMY,KAAK,GAAGd,YAAY,CAACU,MAAM,CAACK,EAAE,CAAmB;MAEvD,IAAIC,gBAAgB,CAACN,MAAM,CAACK,EAAE,CAAC,EAAE;QAC7B,IAAIL,MAAM,CAACK,EAAE,KAAKE,SAAiB,EAAE;UACjCL,IAAI,GAAG,2BAA2B;SACrC,MAAM;UACHA,IAAI,MAAMF,MAAM,CAACQ,OAAO,MAAM;;OAErC,MAAM,IAAIJ,KAAK,KAAKK,SAAS,EAAE;QAC5B,IAAIL,KAAK,KAAK,KAAK,EAAE;UACjBF,IAAI,GAAG,0BAA0B;SACpC,MAAM,IAAIC,YAAY,EAAE;UACrBD,IAAI,aAAaE,gBAAgB;SACpC,MAAM,IAAIA,KAAK,GAAGM,eAAe,EAAE;;;UAGhCR,IAAI,MAAMQ,mBAAmB;SAChC,MAAM;UACHR,IAAI,MAAME,SAAS;;OAE1B,MAAM;QACHF,IAAI,GAAG,2BAA2B;;MAGtC,UAAUH,SAASG,MAAM,CAACS,IAAI,EAAE;KACnC,EAAE,EAAE,CAAC;GACT,EAAE,CAACvB,iBAAiB,EAAEE,YAAY,CAAC,CAAC;EAErC,MAAMsB,gBAAgB,GAAGhB,cAAK,CAACC,OAAO,CAAC;IACnC,6BAA6BL,sCAAsC;GACtE,EAAE,CAACA,MAAM,CAAC,CAAC;EAEZ,MAAMqB,KAAK,GAAwB;IAC/BlB,mBAAmB;IACnBiB;GACH;EAED,OAAO;IAAEC;GAAO;AACpB;;;;"}
@@ -9472,9 +9472,7 @@ const EditPopover = props => {
9472
9472
  event.stopPropagation();
9473
9473
  }
9474
9474
  };
9475
- return /*#__PURE__*/React__default.createElement(Popover, Object.assign({}, popoverProps, {
9476
- modal: true
9477
- }), /*#__PURE__*/React__default.createElement(Popover.Content, {
9475
+ return /*#__PURE__*/React__default.createElement(Popover, Object.assign({}, popoverProps), /*#__PURE__*/React__default.createElement(Popover.Content, {
9478
9476
  onCloseAutoFocus: handleCloseAutoFocus,
9479
9477
  onInteractOutside: handleInteractOutside,
9480
9478
  onClick: event => event.stopPropagation(),
@@ -9984,7 +9982,8 @@ const Search$1 = /*#__PURE__*/React__default.forwardRef(function ListboxSearch(p
9984
9982
  searchQuery,
9985
9983
  setSearchQuery,
9986
9984
  setValidationError,
9987
- validationError
9985
+ validationError,
9986
+ setOpen
9988
9987
  } = useSelect2Context();
9989
9988
  const handleChange = event => {
9990
9989
  if (validationError) {
@@ -9997,6 +9996,11 @@ const Search$1 = /*#__PURE__*/React__default.forwardRef(function ListboxSearch(p
9997
9996
  if (event.key === ' ') {
9998
9997
  return;
9999
9998
  }
9999
+ // Select2 should close dropdown and receive focus, when user press Tab while searching (UX requirement to support better keyboard navigation)
10000
+ if (event.key === 'Tab') {
10001
+ setOpen(false);
10002
+ return;
10003
+ }
10000
10004
  if (isAriaSelectionKey(event) || event.key === 'ArrowDown' || event.key === 'ArrowUp') {
10001
10005
  var _listboxRef$current;
10002
10006
  event.preventDefault();
@@ -10287,7 +10291,7 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
10287
10291
  var _listboxRef$current;
10288
10292
  if (open) {
10289
10293
  event.preventDefault();
10290
- } else if (event.key === 'ArrowDown') {
10294
+ } else if (!event.ctrlKey && !event.metaKey && (event.key === 'ArrowDown' || /^[a-z0-9]$/i.test(event.key))) {
10291
10295
  setOpen(true);
10292
10296
  }
10293
10297
  // the focus should always remain on the input, so we forward events on to the listbox
@@ -16207,8 +16211,7 @@ const MemoedCell = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
16207
16211
  isEditing,
16208
16212
  isResizingColumn,
16209
16213
  isHoverStatePaused,
16210
- row,
16211
- table
16214
+ row
16212
16215
  } = props;
16213
16216
  const {
16214
16217
  isHovered
@@ -16217,18 +16220,20 @@ const MemoedCell = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
16217
16220
  texts
16218
16221
  } = useLocalization();
16219
16222
  const ref = React__default.useRef(null);
16220
- const size = table.getState().columnSizing[COLUMN_ID];
16221
- // the actions column needs to set its size based on its content, not the actual column
16222
- // so we do this here instead of in the header
16223
- React__default.useLayoutEffect(() => {
16224
- if (ref.current && !size) {
16225
- const width = ref.current.getBoundingClientRect().width;
16226
- table.setColumnSizing(sizes => ({
16227
- ...sizes,
16228
- [COLUMN_ID]: width
16229
- }));
16230
- }
16231
- }, [ref.current]);
16223
+ /*
16224
+ const size = table.getState().columnSizing[COLUMN_ID];
16225
+ // the actions column needs to set its size based on its content, not the actual column
16226
+ // so we do this here instead of in the header
16227
+ React.useLayoutEffect(() => {
16228
+ if (ref.current && !size) {
16229
+ const width = ref.current.getBoundingClientRect().width;
16230
+ table.setColumnSizing(sizes => ({
16231
+ ...sizes,
16232
+ [COLUMN_ID]: width,
16233
+ }));
16234
+ }
16235
+ }, [ref.current]);
16236
+ */
16232
16237
  let content;
16233
16238
  // We don't want to show actions in edit mode, since we have editing actions,
16234
16239
  // which is shown in edit mode instead.
@@ -16299,7 +16304,6 @@ function createRowActionsColumn$1() {
16299
16304
  };
16300
16305
  }
16301
16306
 
16302
- const REACT_TABLE_DEFAULT_COLUMN_SIZE_DO_NOT_CHANGE = 150;
16303
16307
  const useCssGrid = table => {
16304
16308
  const allVisibleColumns = table.getVisibleLeafColumns();
16305
16309
  const columnSizing = table.getState().columnSizing;
@@ -16313,7 +16317,7 @@ const useCssGrid = table => {
16313
16317
  const width = columnSizing[column.id];
16314
16318
  if (isInternalColumn$1(column.id)) {
16315
16319
  if (column.id === COLUMN_ID) {
16316
- size = column.getSize() !== REACT_TABLE_DEFAULT_COLUMN_SIZE_DO_NOT_CHANGE ? `minmax(${column.getSize()}px, 1fr)` : '1fr';
16320
+ size = 'minmax(max-content, auto)';
16317
16321
  } else {
16318
16322
  size = `${column.getSize()}px`;
16319
16323
  }