@economic/taco 1.30.1 → 1.31.0

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 (70) hide show
  1. package/dist/components/Button/Button.d.ts +1 -0
  2. package/dist/components/Header/components/Button.d.ts +1 -1
  3. package/dist/components/IconButton/IconButton.d.ts +2 -2
  4. package/dist/components/Menu/components/Item.d.ts +0 -1
  5. package/dist/components/Shortcut/Shortcut.d.ts +2 -1
  6. package/dist/components/Table2/Table2.d.ts +1 -1
  7. package/dist/components/Table2/hooks/listeners/useFilterStateListener.d.ts +3 -0
  8. package/dist/components/Table2/hooks/useColumnDefinitions.d.ts +3 -2
  9. package/dist/components/Table2/types.d.ts +3 -10
  10. package/dist/components/Table2/utilities/columns.d.ts +1 -1
  11. package/dist/esm/packages/taco/src/components/Button/Button.js +2 -1
  12. package/dist/esm/packages/taco/src/components/Button/Button.js.map +1 -1
  13. package/dist/esm/packages/taco/src/components/Combobox/useCombobox.js +1 -1
  14. package/dist/esm/packages/taco/src/components/Datepicker/useDatepicker.js +1 -1
  15. package/dist/esm/packages/taco/src/components/Dialog/components/Content.js +1 -1
  16. package/dist/esm/packages/taco/src/components/Drawer/components/Content.js +3 -7
  17. package/dist/esm/packages/taco/src/components/Drawer/components/Content.js.map +1 -1
  18. package/dist/esm/packages/taco/src/components/Header/components/PrimaryNavigation.js +1 -1
  19. package/dist/esm/packages/taco/src/components/Input/Input.js +1 -1
  20. package/dist/esm/packages/taco/src/components/Listbox/ScrollableList.js +1 -1
  21. package/dist/esm/packages/taco/src/components/Listbox/useListbox.js +1 -1
  22. package/dist/esm/packages/taco/src/components/Listbox/useMultiListbox.js +1 -1
  23. package/dist/esm/packages/taco/src/components/Menu/components/Item.js +9 -8
  24. package/dist/esm/packages/taco/src/components/Menu/components/Item.js.map +1 -1
  25. package/dist/esm/packages/taco/src/components/OverflowGroup/OverflowGroup.js +1 -1
  26. package/dist/esm/packages/taco/src/components/SearchInput/SearchInput.js +1 -1
  27. package/dist/esm/packages/taco/src/components/Select/useSelect.js +1 -1
  28. package/dist/esm/packages/taco/src/components/Select2/Select2.js +1 -1
  29. package/dist/esm/packages/taco/src/components/Select2/components/Trigger.js +1 -1
  30. package/dist/esm/packages/taco/src/components/Shortcut/Shortcut.js +32 -2
  31. package/dist/esm/packages/taco/src/components/Shortcut/Shortcut.js.map +1 -1
  32. package/dist/esm/packages/taco/src/components/Table/components/WindowedTable.js +1 -1
  33. package/dist/esm/packages/taco/src/components/Table2/Table2.js +3 -6
  34. package/dist/esm/packages/taco/src/components/Table2/Table2.js.map +1 -1
  35. package/dist/esm/packages/taco/src/components/Table2/components/EditModeButton.js +13 -9
  36. package/dist/esm/packages/taco/src/components/Table2/components/EditModeButton.js.map +1 -1
  37. package/dist/esm/packages/taco/src/components/Table2/components/Search.js +10 -8
  38. package/dist/esm/packages/taco/src/components/Table2/components/Search.js.map +1 -1
  39. package/dist/esm/packages/taco/src/components/Table2/components/filters/FiltersButton.js +14 -8
  40. package/dist/esm/packages/taco/src/components/Table2/components/filters/FiltersButton.js.map +1 -1
  41. package/dist/esm/packages/taco/src/components/Table2/hooks/listeners/useFilterStateListener.js +12 -0
  42. package/dist/esm/packages/taco/src/components/Table2/hooks/listeners/useFilterStateListener.js.map +1 -0
  43. package/dist/esm/packages/taco/src/components/Table2/hooks/useColumnDefinitions.js +1 -1
  44. package/dist/esm/packages/taco/src/components/Table2/hooks/useColumnDefinitions.js.map +1 -1
  45. package/dist/esm/packages/taco/src/components/Table2/hooks/useTable.js +5 -0
  46. package/dist/esm/packages/taco/src/components/Table2/hooks/useTable.js.map +1 -1
  47. package/dist/esm/packages/taco/src/components/Table2/types.js.map +1 -1
  48. package/dist/esm/packages/taco/src/components/Table2/utilities/columns.js +36 -49
  49. package/dist/esm/packages/taco/src/components/Table2/utilities/columns.js.map +1 -1
  50. package/dist/esm/packages/taco/src/hooks/useGlobalKeyDown.js +15 -0
  51. package/dist/esm/packages/taco/src/hooks/useGlobalKeyDown.js.map +1 -0
  52. package/dist/esm/packages/taco/src/index.js +3 -2
  53. package/dist/esm/packages/taco/src/index.js.map +1 -1
  54. package/dist/esm/packages/taco/src/primitives/Button.js +21 -2
  55. package/dist/esm/packages/taco/src/primitives/Button.js.map +1 -1
  56. package/dist/esm/packages/taco/src/utils/keyboard.js +35 -0
  57. package/dist/esm/packages/taco/src/utils/keyboard.js.map +1 -0
  58. package/dist/hooks/useGlobalKeyDown.d.ts +2 -0
  59. package/dist/index.d.ts +1 -0
  60. package/dist/primitives/Button.d.ts +3 -0
  61. package/dist/taco.cjs.development.js +220 -133
  62. package/dist/taco.cjs.development.js.map +1 -1
  63. package/dist/taco.cjs.production.min.js +1 -1
  64. package/dist/taco.cjs.production.min.js.map +1 -1
  65. package/dist/utils/keyboard.d.ts +8 -0
  66. package/package.json +2 -2
  67. package/types.json +20 -118
  68. package/dist/esm/packages/taco/src/hooks/useGlobalKeyboardShortcut.js +0 -13
  69. package/dist/esm/packages/taco/src/hooks/useGlobalKeyboardShortcut.js.map +0 -1
  70. package/dist/hooks/useGlobalKeyboardShortcut.d.ts +0 -1
@@ -40,6 +40,7 @@ export declare type ButtonProps = ButtonPrimitive.ButtonProps & {
40
40
  export declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement | HTMLAnchorElement> & {
41
41
  children: React.ReactNode;
42
42
  href?: string | undefined;
43
+ shortcut?: string | import("../..").KeyDownHandlerOptions | undefined;
43
44
  target?: "_self" | "_blank" | "_parent" | "_top" | undefined;
44
45
  } & {
45
46
  /** Appearance will change the style of the button */
@@ -3,7 +3,7 @@ import { IconButtonProps } from '../../IconButton/IconButton';
3
3
  export declare type ButtonProps = Omit<IconButtonProps, 'appearance' | 'aria-label'> & {
4
4
  'aria-label': string;
5
5
  };
6
- export declare const Button: React.ForwardRefExoticComponent<Pick<IconButtonProps, "autoFocus" | "disabled" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "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-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" | "href" | "target" | "dialog" | "hanger" | "icon" | "menu" | "popover" | "rounded" | "tooltip"> & {
6
+ export declare const Button: React.ForwardRefExoticComponent<Pick<IconButtonProps, "autoFocus" | "disabled" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "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-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" | "href" | "shortcut" | "target" | "dialog" | "hanger" | "icon" | "menu" | "popover" | "rounded" | "tooltip"> & {
7
7
  'aria-label': string;
8
8
  } & React.RefAttributes<HTMLButtonElement>>;
9
9
  export declare const getButtonClasses: (rounded?: boolean) => string;
@@ -32,7 +32,7 @@ export declare type IconButtonProps = Omit<ButtonPrimitive.ButtonProps, 'childre
32
32
  /** A tooltip to show when hovering over the button */
33
33
  tooltip?: string;
34
34
  };
35
- export declare const Base: React.ForwardRefExoticComponent<Pick<ButtonPrimitive.ButtonProps, "autoFocus" | "disabled" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "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" | "href" | "target"> & {
35
+ export declare const Base: React.ForwardRefExoticComponent<Pick<ButtonPrimitive.ButtonProps, "autoFocus" | "disabled" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "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" | "href" | "shortcut" | "target"> & {
36
36
  /** Appearance will change the style of the button */
37
37
  appearance?: "default" | "primary" | "danger" | "ghost" | "discrete" | undefined;
38
38
  /**
@@ -61,7 +61,7 @@ export declare const Base: React.ForwardRefExoticComponent<Pick<ButtonPrimitive.
61
61
  /** A tooltip to show when hovering over the button */
62
62
  tooltip?: string | undefined;
63
63
  } & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
64
- export declare const IconButton: React.ForwardRefExoticComponent<Pick<ButtonPrimitive.ButtonProps, "autoFocus" | "disabled" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "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" | "href" | "target"> & {
64
+ export declare const IconButton: React.ForwardRefExoticComponent<Pick<ButtonPrimitive.ButtonProps, "autoFocus" | "disabled" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "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" | "href" | "shortcut" | "target"> & {
65
65
  /** Appearance will change the style of the button */
66
66
  appearance?: "default" | "primary" | "danger" | "ghost" | "discrete" | undefined;
67
67
  /**
@@ -9,7 +9,6 @@ export declare const useItemStyling: ({ disabled, indented, className }: {
9
9
  indented: any;
10
10
  className: any;
11
11
  }) => string;
12
- export declare const Shortcut: (props: any) => JSX.Element;
13
12
  export declare type MenuItemProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> & {
14
13
  dialog?: (props: Partial<DialogProps>) => JSX.Element;
15
14
  disabled?: boolean;
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
+ import { KeyDownHandlerOptions } from '../../utils/keyboard';
2
3
  export declare type ShortcutProps = Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> & {
3
- keys: string[];
4
+ keys: string | KeyDownHandlerOptions;
4
5
  };
5
6
  export declare const Shortcut: ({ keys, ...props }: ShortcutProps) => JSX.Element;
@@ -101,4 +101,4 @@ export declare type ForwardedTable2WithStatics = React.ForwardRefExoticComponent
101
101
  declare const Table2: ForwardedTable2WithStatics;
102
102
  export { Table2 };
103
103
  export type { Table2Props };
104
- export type { Table2ColumnProps, Table2ActionProps, Table2RowActionProps, Table2Settings } from './types';
104
+ export type { Table2ColumnProps, Table2ActionProps, Table2RowActionRenderer, Table2Settings } from './types';
@@ -0,0 +1,3 @@
1
+ import { Table as RTTable } from '@tanstack/react-table';
2
+ import { RowSelectionHandler } from '../../types';
3
+ export declare const useFilterStateListener: <TType = any>(table: RTTable<TType>, onRowSelect: RowSelectionHandler | undefined) => void;
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  import { ColumnSort, Row, RowData, Table } from '@tanstack/react-table';
3
- import { CellAlignment, ColumnDataType, RowDragHandler, RowExpansionRenderer, Table2Children, Table2ColumnControlRenderer, Table2ColumnFooterRenderer, Table2ColumnHeaderMenu, Table2RowActionProps } from '../types';
3
+ import { CellAlignment, ColumnDataType, RowDragHandler, RowExpansionRenderer, Table2Children, Table2ColumnControlRenderer, Table2ColumnFooterRenderer, Table2ColumnHeaderMenu, Table2RowActionRenderer } from '../types';
4
4
  declare module '@tanstack/table-core' {
5
5
  interface ColumnMeta<TData extends RowData, TValue> {
6
6
  align?: CellAlignment;
@@ -15,7 +15,8 @@ declare module '@tanstack/table-core' {
15
15
  }
16
16
  }
17
17
  declare type useColumnDefinitionsOptions<TType> = {
18
- actionsForRow: Table2RowActionProps<TType>[];
18
+ actionsForRow: Table2RowActionRenderer<TType>[];
19
+ actionsForRowLength: number;
19
20
  enableColumnFiltering: boolean;
20
21
  enableColumnHiding: boolean;
21
22
  enableColumnFreezing: boolean;
@@ -74,15 +74,7 @@ export declare type Table2ActionProps<TType> = {
74
74
  text: string | ((rows: TType[]) => string);
75
75
  visible?: boolean | ((rows: TType[]) => boolean);
76
76
  };
77
- export declare type Table2RowActionProps<TType> = {
78
- ariaLabel: string | ((row: TType) => string);
79
- dialog?: (row: TType) => (props: Partial<DialogProps>) => JSX.Element;
80
- disabled?: boolean | ((row: TType) => boolean);
81
- icon: IconName | ((row: TType) => IconName);
82
- onClick?: (row: TType) => void;
83
- text: string | ((row: TType) => string);
84
- visible?: boolean | ((row: TType) => boolean);
85
- };
77
+ export declare type Table2RowActionRenderer<TType = unknown> = (row: TType) => JSX.Element;
86
78
  export declare type Table2Settings = {
87
79
  columnFilters?: ColumnFiltersState;
88
80
  columnOrder?: ColumnOrderState;
@@ -107,7 +99,8 @@ export declare type DataColumnIndexes = {
107
99
  };
108
100
  export declare type Table2Children<TType = any> = (React.ReactElement<Table2ColumnProps<TType>> | boolean | null | undefined)[];
109
101
  export declare type Table2Props<TType = any> = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {
110
- actionsForRow?: Table2RowActionProps<TType>[];
102
+ actionsForRow?: Table2RowActionRenderer<TType>[];
103
+ actionsForRowLength?: number;
111
104
  children: Table2Children;
112
105
  className?: string;
113
106
  data: TType[];
@@ -12,4 +12,4 @@ export declare const MIN_COLUMN_SIZE = 80;
12
12
  export declare function createRowDraggableColumn<TType = any>(onRowDrag: RowDragHandler<TType>, texts: LocalizationTexts): DisplayColumnDef<TType, any>;
13
13
  export declare function createRowSelectionColumn<TType = any>(enableMultipleRowSelection: boolean, lastSelectedRowIndex: React.MutableRefObject<number | undefined>, onRowDrag: RowDragHandler<TType> | undefined, tableRef: React.RefObject<HTMLDivElement>, texts: LocalizationTexts): DisplayColumnDef<TType, any>;
14
14
  export declare function createRowExpansionColumn<TType = any>(expandedRowRenderer: RowExpansionRenderer<TType>, texts: LocalizationTexts): DisplayColumnDef<TType, any>;
15
- export declare function createRowActionsColumn<TType = any>(rowActions: any, texts: LocalizationTexts): DisplayColumnDef<TType, any>;
15
+ export declare function createRowActionsColumn<TType = any>(rowActions: any, rowActionsLength: any, texts: LocalizationTexts): DisplayColumnDef<TType, any>;
@@ -5,10 +5,11 @@ import { createButtonWithOverlays, getButtonClasses, getAppearanceClasses, creat
5
5
 
6
6
  const Base = /*#__PURE__*/forwardRef(function ButtonBase(props, ref) {
7
7
  const {
8
+ appearance,
8
9
  fluid,
9
10
  ...otherProps
10
11
  } = props;
11
- const className = cn(getButtonClasses(), getAppearanceClasses(otherProps.appearance), 'rounded px-3', {
12
+ const className = cn(getButtonClasses(), getAppearanceClasses(appearance), 'rounded px-3', {
12
13
  'cursor-not-allowed opacity-50': props.disabled,
13
14
  'focus:yt-focus active:focus:yt-focus': !props.disabled,
14
15
  'w-full': fluid
@@ -1 +1 @@
1
- {"version":3,"file":"Button.js","sources":["../../../../../../../src/components/Button/Button.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { Appearance } from '../../types';\nimport * as ButtonPrimitive from '../../primitives/Button';\nimport { getAppearanceClasses, getButtonClasses, createButtonWithTooltip, createButtonWithOverlays } from './util';\nimport { HangerProps } from '../Hanger/Hanger';\nimport { MenuProps } from '../Menu/Menu';\nimport { DialogProps } from '../Dialog/Dialog';\nimport { PopoverProps } from '../Popover/Popover';\nimport './Button.css';\nimport { Icon } from '../Icon/Icon';\nimport { DrawerProps } from '../Drawer/Drawer';\n\nexport type ButtonProps = ButtonPrimitive.ButtonProps & {\n /** Appearance will change the style of the button */\n appearance?: Appearance;\n /**\n * Dialog component associated with the button, clicking the button will open the dialog.\n * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n * the button should be only to open the associated dialog when clicked.\n */\n dialog?: (props: Partial<DialogProps>) => JSX.Element;\n /**\n * Drawer component associated with the button, clicking the button will open the drawer.\n * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n * the button should be only to open the associated drawer when clicked.\n */\n drawer?: (props: Partial<DrawerProps>) => JSX.Element;\n /** If fluid, button expands to the width of it's container */\n fluid?: boolean;\n /** Hanger component associated with the button. */\n hanger?: (props: Partial<HangerProps>) => JSX.Element;\n /** Menu component associated with the button. */\n menu?: (props: Partial<MenuProps>) => JSX.Element;\n /**\n * Popover component associated with the button, clicking the button will open the popover.\n * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n * the button should be only to open the associated popover when clicked.\n */\n popover?: (props: Partial<PopoverProps>) => JSX.Element;\n /** A tooltip to show when hovering over the button */\n tooltip?: string | JSX.Element;\n};\n\nconst Base = React.forwardRef(function ButtonBase(props: ButtonProps, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) {\n const { fluid, ...otherProps } = props;\n const className = cn(\n getButtonClasses(),\n getAppearanceClasses(otherProps.appearance),\n 'rounded px-3',\n {\n 'cursor-not-allowed opacity-50': props.disabled,\n 'focus:yt-focus active:focus:yt-focus': !props.disabled,\n 'w-full': fluid,\n },\n props.className\n );\n\n return createButtonWithTooltip({ ...otherProps, 'data-taco': 'button' }, className, ref);\n});\n\nexport const Button = React.forwardRef(function Button(\n props: ButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n const { dialog, drawer, hanger, menu, popover, ...buttonProps } = props;\n\n let children = buttonProps.children;\n\n // add a chevron icon to menu buttons\n if (typeof menu === 'function') {\n children = Array.isArray(children)\n ? [...children, <Icon key=\"chevron-down\" name=\"chevron-down\" />]\n : [children, <Icon key=\"chevron-down\" name=\"chevron-down\" />];\n }\n\n const button = (\n <Base {...buttonProps} ref={ref}>\n {children}\n </Base>\n );\n\n return createButtonWithOverlays({ dialog, drawer, hanger, menu, popover }, button);\n});\n"],"names":["Base","React","ButtonBase","props","ref","fluid","otherProps","className","cn","getButtonClasses","getAppearanceClasses","appearance","disabled","createButtonWithTooltip","Button","dialog","drawer","hanger","menu","popover","buttonProps","children","Array","isArray","Icon","key","name","button","createButtonWithOverlays"],"mappings":";;;;;AA4CA,MAAMA,IAAI,gBAAGC,UAAgB,CAAC,SAASC,UAAU,CAACC,KAAkB,EAAEC,GAAqD;EACvH,MAAM;IAAEC,KAAK;IAAE,GAAGC;GAAY,GAAGH,KAAK;EACtC,MAAMI,SAAS,GAAGC,EAAE,CAChBC,gBAAgB,EAAE,EAClBC,oBAAoB,CAACJ,UAAU,CAACK,UAAU,CAAC,EAC3C,cAAc,EACd;IACI,+BAA+B,EAAER,KAAK,CAACS,QAAQ;IAC/C,sCAAsC,EAAE,CAACT,KAAK,CAACS,QAAQ;IACvD,QAAQ,EAAEP;GACb,EACDF,KAAK,CAACI,SAAS,CAClB;EAED,OAAOM,uBAAuB,CAAC;IAAE,GAAGP,UAAU;IAAE,WAAW,EAAE;GAAU,EAAEC,SAAS,EAAEH,GAAG,CAAC;AAC5F,CAAC,CAAC;MAEWU,MAAM,gBAAGb,UAAgB,CAAC,SAASa,MAAM,CAClDX,KAAkB,EAClBC,GAAqD;EAErD,MAAM;IAAEW,MAAM;IAAEC,MAAM;IAAEC,MAAM;IAAEC,IAAI;IAAEC,OAAO;IAAE,GAAGC;GAAa,GAAGjB,KAAK;EAEvE,IAAIkB,QAAQ,GAAGD,WAAW,CAACC,QAAQ;;EAGnC,IAAI,OAAOH,IAAI,KAAK,UAAU,EAAE;IAC5BG,QAAQ,GAAGC,KAAK,CAACC,OAAO,CAACF,QAAQ,CAAC,GAC5B,CAAC,GAAGA,QAAQ,eAAEpB,cAACuB,IAAI;MAACC,GAAG,EAAC,cAAc;MAACC,IAAI,EAAC;MAAiB,CAAC,GAC9D,CAACL,QAAQ,eAAEpB,cAACuB,IAAI;MAACC,GAAG,EAAC,cAAc;MAACC,IAAI,EAAC;MAAiB,CAAC;;EAGrE,MAAMC,MAAM,gBACR1B,cAACD,IAAI,oBAAKoB,WAAW;IAAEhB,GAAG,EAAEA;MACvBiB,QAAQ,CAEhB;EAED,OAAOO,wBAAwB,CAAC;IAAEb,MAAM;IAAEC,MAAM;IAAEC,MAAM;IAAEC,IAAI;IAAEC;GAAS,EAAEQ,MAAM,CAAC;AACtF,CAAC;;;;"}
1
+ {"version":3,"file":"Button.js","sources":["../../../../../../../src/components/Button/Button.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { Appearance } from '../../types';\nimport * as ButtonPrimitive from '../../primitives/Button';\nimport { getAppearanceClasses, getButtonClasses, createButtonWithTooltip, createButtonWithOverlays } from './util';\nimport { HangerProps } from '../Hanger/Hanger';\nimport { MenuProps } from '../Menu/Menu';\nimport { DialogProps } from '../Dialog/Dialog';\nimport { PopoverProps } from '../Popover/Popover';\nimport './Button.css';\nimport { Icon } from '../Icon/Icon';\nimport { DrawerProps } from '../Drawer/Drawer';\n\nexport type ButtonProps = ButtonPrimitive.ButtonProps & {\n /** Appearance will change the style of the button */\n appearance?: Appearance;\n /**\n * Dialog component associated with the button, clicking the button will open the dialog.\n * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n * the button should be only to open the associated dialog when clicked.\n */\n dialog?: (props: Partial<DialogProps>) => JSX.Element;\n /**\n * Drawer component associated with the button, clicking the button will open the drawer.\n * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n * the button should be only to open the associated drawer when clicked.\n */\n drawer?: (props: Partial<DrawerProps>) => JSX.Element;\n /** If fluid, button expands to the width of it's container */\n fluid?: boolean;\n /** Hanger component associated with the button. */\n hanger?: (props: Partial<HangerProps>) => JSX.Element;\n /** Menu component associated with the button. */\n menu?: (props: Partial<MenuProps>) => JSX.Element;\n /**\n * Popover component associated with the button, clicking the button will open the popover.\n * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n * the button should be only to open the associated popover when clicked.\n */\n popover?: (props: Partial<PopoverProps>) => JSX.Element;\n /** A tooltip to show when hovering over the button */\n tooltip?: string | JSX.Element;\n};\n\nconst Base = React.forwardRef(function ButtonBase(props: ButtonProps, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) {\n const { appearance, fluid, ...otherProps } = props;\n const className = cn(\n getButtonClasses(),\n getAppearanceClasses(appearance),\n 'rounded px-3',\n {\n 'cursor-not-allowed opacity-50': props.disabled,\n 'focus:yt-focus active:focus:yt-focus': !props.disabled,\n 'w-full': fluid,\n },\n props.className\n );\n\n return createButtonWithTooltip({ ...otherProps, 'data-taco': 'button' }, className, ref);\n});\n\nexport const Button = React.forwardRef(function Button(\n props: ButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n const { dialog, drawer, hanger, menu, popover, ...buttonProps } = props;\n\n let children = buttonProps.children;\n\n // add a chevron icon to menu buttons\n if (typeof menu === 'function') {\n children = Array.isArray(children)\n ? [...children, <Icon key=\"chevron-down\" name=\"chevron-down\" />]\n : [children, <Icon key=\"chevron-down\" name=\"chevron-down\" />];\n }\n\n const button = (\n <Base {...buttonProps} ref={ref}>\n {children}\n </Base>\n );\n\n return createButtonWithOverlays({ dialog, drawer, hanger, menu, popover }, button);\n});\n"],"names":["Base","React","ButtonBase","props","ref","appearance","fluid","otherProps","className","cn","getButtonClasses","getAppearanceClasses","disabled","createButtonWithTooltip","Button","dialog","drawer","hanger","menu","popover","buttonProps","children","Array","isArray","Icon","key","name","button","createButtonWithOverlays"],"mappings":";;;;;AA4CA,MAAMA,IAAI,gBAAGC,UAAgB,CAAC,SAASC,UAAU,CAACC,KAAkB,EAAEC,GAAqD;EACvH,MAAM;IAAEC,UAAU;IAAEC,KAAK;IAAE,GAAGC;GAAY,GAAGJ,KAAK;EAClD,MAAMK,SAAS,GAAGC,EAAE,CAChBC,gBAAgB,EAAE,EAClBC,oBAAoB,CAACN,UAAU,CAAC,EAChC,cAAc,EACd;IACI,+BAA+B,EAAEF,KAAK,CAACS,QAAQ;IAC/C,sCAAsC,EAAE,CAACT,KAAK,CAACS,QAAQ;IACvD,QAAQ,EAAEN;GACb,EACDH,KAAK,CAACK,SAAS,CAClB;EAED,OAAOK,uBAAuB,CAAC;IAAE,GAAGN,UAAU;IAAE,WAAW,EAAE;GAAU,EAAEC,SAAS,EAAEJ,GAAG,CAAC;AAC5F,CAAC,CAAC;MAEWU,MAAM,gBAAGb,UAAgB,CAAC,SAASa,MAAM,CAClDX,KAAkB,EAClBC,GAAqD;EAErD,MAAM;IAAEW,MAAM;IAAEC,MAAM;IAAEC,MAAM;IAAEC,IAAI;IAAEC,OAAO;IAAE,GAAGC;GAAa,GAAGjB,KAAK;EAEvE,IAAIkB,QAAQ,GAAGD,WAAW,CAACC,QAAQ;;EAGnC,IAAI,OAAOH,IAAI,KAAK,UAAU,EAAE;IAC5BG,QAAQ,GAAGC,KAAK,CAACC,OAAO,CAACF,QAAQ,CAAC,GAC5B,CAAC,GAAGA,QAAQ,eAAEpB,cAACuB,IAAI;MAACC,GAAG,EAAC,cAAc;MAACC,IAAI,EAAC;MAAiB,CAAC,GAC9D,CAACL,QAAQ,eAAEpB,cAACuB,IAAI;MAACC,GAAG,EAAC,cAAc;MAACC,IAAI,EAAC;MAAiB,CAAC;;EAGrE,MAAMC,MAAM,gBACR1B,cAACD,IAAI,oBAAKoB,WAAW;IAAEhB,GAAG,EAAEA;MACvBiB,QAAQ,CAEhB;EAED,OAAOO,wBAAwB,CAAC;IAAEb,MAAM;IAAEC,MAAM;IAAEC,MAAM;IAAEC,IAAI;IAAEC;GAAS,EAAEQ,MAAM,CAAC;AACtF,CAAC;;;;"}
@@ -1,6 +1,6 @@
1
1
  import { useRef, useState, useMemo, useEffect } from 'react';
2
- import { v4 } from 'uuid';
3
2
  import { useMergedRef } from '../../hooks/useMergedRef.js';
3
+ import { v4 } from 'uuid';
4
4
  import debounce from 'lodash-es/debounce';
5
5
  import { getId } from '../Listbox/ScrollableList.js';
6
6
  import { createCustomKeyboardEvent } from '../../utils/input.js';
@@ -1,6 +1,6 @@
1
1
  import { useState, useEffect } from 'react';
2
- import { useLocalization } from '../Provider/Localization.js';
3
2
  import { useMergedRef } from '../../hooks/useMergedRef.js';
3
+ import { useLocalization } from '../Provider/Localization.js';
4
4
  import { setInputValueByRef } from '../../utils/input.js';
5
5
  import { format, parseFromCustomString } from '../../utils/date.js';
6
6
 
@@ -2,9 +2,9 @@ import { forwardRef, createElement } from 'react';
2
2
  import cn from 'classnames';
3
3
  import { Backdrop } from '../../Backdrop/Backdrop.js';
4
4
  import { getDialogPositionClassnames, getDialogSizeClassnames } from '../util.js';
5
+ import { useMergedRef } from '../../../hooks/useMergedRef.js';
5
6
  import { IconButton } from '../../IconButton/IconButton.js';
6
7
  import { useLocalization } from '../../Provider/Localization.js';
7
- import { useMergedRef } from '../../../hooks/useMergedRef.js';
8
8
  import { Title as Title$1, Close as Close$1, Portal, Overlay, Content as Content$1 } from '@radix-ui/react-dialog';
9
9
  import { useCurrentDialog } from '../Context.js';
10
10
  import { useDraggable } from '../../../utils/hooks/useDraggable.js';
@@ -1,18 +1,18 @@
1
1
  import React__default from 'react';
2
2
  import cn from 'classnames';
3
3
  import { Backdrop } from '../../Backdrop/Backdrop.js';
4
+ import { useMergedRef } from '../../../hooks/useMergedRef.js';
4
5
  import { IconButton } from '../../IconButton/IconButton.js';
5
6
  import { useLocalization } from '../../Provider/Localization.js';
6
- import { useMergedRef } from '../../../hooks/useMergedRef.js';
7
7
  import { Title as Title$1, Close as Close$1, Portal as Portal$1, Overlay, Content as Content$1 } from '@radix-ui/react-dialog';
8
8
  import { useDraggable } from '../../../utils/hooks/useDraggable.js';
9
9
  import { Group } from '../../Group/Group.js';
10
10
  import { useCurrentMenu } from '../../Menu/Context.js';
11
11
  import { useCurrentDrawer } from '../Context.js';
12
12
  import { getBackdropClassNames, getDrawerContainerClassNames, getDrawerContentClassNames, getDrawerDragHandlerClassNames } from '../util.js';
13
- import { useGlobalKeyboardShortcut } from '../../../hooks/useGlobalKeyboardShortcut.js';
14
13
  import { FocusScope } from '@react-aria/focus';
15
14
  import { ScrollArea } from '../../ScrollArea/ScrollArea.js';
15
+ import { useGlobalKeyDown } from '../../../hooks/useGlobalKeyDown.js';
16
16
 
17
17
  const RESIZE_MIN = 360;
18
18
  const RESIZE_MAX = 1000;
@@ -137,11 +137,7 @@ const UntrappedFocusDrawerContent = /*#__PURE__*/React__default.forwardRef(funct
137
137
  children,
138
138
  ...otherProps
139
139
  } = props;
140
- useGlobalKeyboardShortcut(event => {
141
- if (event.key === 'Escape') {
142
- onEscape(event);
143
- }
144
- });
140
+ useGlobalKeyDown('Escape', onEscape);
145
141
  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, otherProps, {
146
142
  ref: ref
147
143
  }), /*#__PURE__*/React__default.createElement(FocusScope, {
@@ -1 +1 @@
1
- {"version":3,"file":"Content.js","sources":["../../../../../../../../src/components/Drawer/components/Content.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { Group, GroupProps } from '../../Group/Group';\nimport { IconButton } from '../../IconButton/IconButton';\nimport { useLocalization } from '../../Provider/Localization';\nimport { Backdrop } from '../../Backdrop/Backdrop';\nimport { useCurrentMenu } from '../../Menu/Context';\nimport { useCurrentDrawer } from '../Context';\nimport {\n getBackdropClassNames,\n getDrawerContainerClassNames,\n getDrawerContentClassNames,\n getDrawerDragHandlerClassNames,\n} from '../util';\nimport { useDraggable } from '../../../utils/hooks/useDraggable';\nimport { useMergedRef } from '../../../hooks/useMergedRef';\nimport { useGlobalKeyboardShortcut } from '../../../hooks/useGlobalKeyboardShortcut';\nimport { FocusScope } from '@react-aria/focus';\nimport { ScrollArea } from '../../ScrollArea/ScrollArea';\n\nconst RESIZE_MIN = 360;\nconst RESIZE_MAX = 1000;\n\nexport type DrawerContentRenderProps = {\n close: () => void;\n};\n\nexport enum DrawerAnimationDefinition {\n Visible = 'visible',\n Hidden = 'hidden',\n}\n\nconst RenderPropWrapper = React.forwardRef(function RenderPropWrapper({ children, onClick, renderProps }: any, ref) {\n const close = () => {\n onClick(new CustomEvent('close'));\n };\n\n return children({ close, ref, ...renderProps });\n});\n\nexport type DrawerTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DrawerTitle(props: DrawerTitleProps, ref: React.Ref<HTMLHeadingElement>) {\n const { className, children, ...otherProps } = props;\n /**\n * By design in default drawer version Title has grey separator, but we might have exceptions like Drawer + Tabs scenario,\n * where we might want to hide the grey separator. For this reason separator was rendedr with using of classNames,\n * so it can be easily overriden in exceptional scenarious.\n * */\n const cName = cn('grow-0 py-4 pl-4 justyfy-self-start mb-0 border-b-[1px] border-grey-300', className);\n return (\n <DialogPrimitive.Title className={cName} {...otherProps} ref={ref}>\n <span className=\"line-clamp-2 inline-block w-4/6 overflow-y-hidden\">{children}</span>\n </DialogPrimitive.Title>\n );\n});\n\nexport type DrawerFooterProps = React.HTMLAttributes<HTMLDivElement>;\nexport const Footer = React.forwardRef(function DrawerFooter(props: DrawerFooterProps, ref: React.Ref<HTMLDivElement>) {\n const { className, ...otherProps } = props;\n /**\n * The same scenario as Title, grey separator rendered using classNames to have posibility to override it.\n */\n const cName = cn('mt-auto flex justify-end grow-0 p-4 border-t-[1px] border-grey-300', props.className);\n return <div {...otherProps} className={cName} ref={ref} />;\n});\n\nexport const Actions = React.forwardRef(function Actions(props: GroupProps, ref: React.Ref<HTMLDivElement>) {\n const { className, ...otherProps } = props;\n const cName = cn('absolute top-0 right-10 mr-[8px] mt-4', className);\n return <Group {...otherProps} className={cName} ref={ref} />;\n});\n\nexport type DrawerCloseProps = React.HTMLAttributes<HTMLButtonElement>;\nexport const Close = React.forwardRef(function DrawerClose(props: DrawerCloseProps, ref: React.Ref<HTMLButtonElement>) {\n const { onClose } = useCurrentDrawer();\n\n return <DialogPrimitive.Close {...props} onClick={onClose} ref={ref} asChild />;\n});\n\n/**\n * It is container component, needed to provide default scrolling behaviour and padding, to simplyfy usage, requested by feature devs.\n * It is optional to use InnerContent component, if consumer need to implement custom behaviour or paddings for inner content,\n * then it's simply enough to render children and wrap them in custom implementation.\n */\nexport type DrawerInnerContentProps = React.HTMLAttributes<HTMLDivElement> & {\n /**\n * Consumer might want to use innerContent component to apply default paddings, but want to implement custom scrolling behaviour,\n * default value - true\n */\n isScrollable?: boolean;\n};\nexport const InnerContent = React.forwardRef(function InnerContent(\n props: DrawerInnerContentProps,\n ref: React.Ref<HTMLDivElement>\n) {\n const { className, isScrollable = true, children, ...otherProps } = props;\n const cName = cn('grow-1 p-4', className);\n return (\n <div {...otherProps} className={cName} ref={ref}>\n {isScrollable ? <ScrollArea className=\"w-full gap-y-0.5\">{children}</ScrollArea> : { children }}\n </div>\n );\n});\n\nconst Portal = (props: DialogPrimitive.DialogPortalProps) => {\n const { children, ...otherProps } = props;\n const { open = false, variant, outlet } = useCurrentDrawer();\n\n const backdropClassNames = React.useMemo(() => {\n return getBackdropClassNames(open);\n }, [open]);\n\n if (!outlet) {\n return null;\n }\n\n return (\n <DialogPrimitive.Portal {...otherProps} container={outlet ?? undefined}>\n {variant === 'overlay' ? (\n <DialogPrimitive.Overlay forceMount>\n {/* Animate backdrop appearance for overlay version of Drawer */}\n <Backdrop className={backdropClassNames} />\n </DialogPrimitive.Overlay>\n ) : null}\n {children}\n </DialogPrimitive.Portal>\n );\n};\n\ntype UntrappedFocusDrawerContentProps = React.HTMLAttributes<HTMLDivElement> & {\n onEscape: (event: KeyboardEvent) => void;\n};\nconst UntrappedFocusDrawerContent = React.forwardRef(function EmbeddedDrawerContent(\n props: UntrappedFocusDrawerContentProps,\n ref: React.Ref<HTMLDivElement>\n) {\n const { onEscape, children, ...otherProps } = props;\n\n useGlobalKeyboardShortcut((event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n onEscape(event);\n }\n });\n\n return (\n <div {...otherProps} ref={ref}>\n <FocusScope autoFocus={true} restoreFocus={true}>\n {children}\n </FocusScope>\n </div>\n );\n});\n\nexport type DrawerContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n /** An accessible label to be announced when the side drawer is opened */\n 'aria-label': string;\n children: Omit<React.ReactNode, 'Function'> | ((props: DrawerContentRenderProps) => JSX.Element);\n};\nexport const DrawerContent = React.forwardRef(function Content(\n props: DrawerContentProps,\n externalRef: React.Ref<HTMLDivElement>\n) {\n const {\n size,\n onClose,\n onResize,\n open = false,\n closeOnEscape,\n variant,\n focusTrap,\n showCloseButton,\n setOpen,\n } = useCurrentDrawer();\n const { className, style, children, ...otherProps } = props;\n const { texts } = useLocalization();\n const ref = useMergedRef<HTMLDivElement>(externalRef);\n\n // if the drawer was opened by a menu, we need to close the menu when the drawer closes\n // the menu is still open (and mounted) because it is the trigger for the drawer\n const menu = useCurrentMenu();\n let handleCloseAutoFocus: DialogPrimitive.DialogContentProps['onCloseAutoFocus'];\n\n if (menu) {\n handleCloseAutoFocus = () => {\n menu.close();\n };\n }\n\n const containerClassName: string = React.useMemo(() => cn(getDrawerContainerClassNames(variant), className), [className]);\n\n const { contentClassName, dragHandlerClassName } = React.useMemo(() => {\n const contentClassName = getDrawerContentClassNames(size, variant, open);\n const dragHandlerClassName: string = getDrawerDragHandlerClassNames();\n return { contentClassName, dragHandlerClassName };\n }, [size, variant, open]);\n\n const handleEscapeKeyDown = (event: KeyboardEvent) => {\n const isTargetInsideDrawerContent = ref.current?.contains(event.target as HTMLElement);\n if (isTargetInsideDrawerContent) {\n if (!closeOnEscape) {\n event.preventDefault();\n } else {\n setOpen && setOpen(false);\n if (onClose) {\n onClose();\n }\n }\n }\n };\n\n const [containerWidth, setContainerWidth] = React.useState<number>();\n\n const dragHandlerRef = React.useRef<HTMLDivElement>(null);\n const {\n position,\n dragging,\n handleProps: dragHandleProps,\n resetPosition,\n } = useDraggable(useMergedRef<HTMLDivElement>(dragHandlerRef));\n\n const contentRef = React.useRef<HTMLDivElement>(null);\n\n React.useEffect(() => {\n if (onResize) {\n onResize(position.x);\n }\n }, [position]);\n\n React.useEffect(() => {\n setContainerWidth(contentRef.current?.offsetWidth);\n }, [contentRef, open]);\n\n const resizedWidth = React.useMemo((): number | undefined => {\n if (containerWidth) {\n return Math.min(RESIZE_MAX, Math.max(RESIZE_MIN, containerWidth - position.x || 0));\n }\n return;\n }, [containerWidth, position]);\n\n React.useEffect(() => {\n if (!dragging && resizedWidth) {\n setContainerWidth(resizedWidth);\n resetPosition();\n }\n }, [dragging]);\n\n let output;\n\n if (typeof children === 'function') {\n output = (\n <Close>\n <RenderPropWrapper>{children}</RenderPropWrapper>\n </Close>\n );\n } else {\n output = children;\n }\n\n const content = (\n <div ref={contentRef} data-taco=\"drawer\" className={containerClassName}>\n <div className={dragHandlerClassName} {...dragHandleProps} data-testid=\"resize-handler\" ref={dragHandlerRef} />\n {output}\n {showCloseButton ? (\n <Close>\n <IconButton\n appearance=\"discrete\"\n aria-label={texts.drawer.close}\n className=\"absolute top-0 right-0 mt-4 mr-2\"\n icon=\"close\"\n />\n </Close>\n ) : null}\n </div>\n );\n\n const styleProp = {\n ...style,\n ...{ width: resizedWidth },\n };\n\n return focusTrap ? (\n <DialogPrimitive.Content\n forceMount\n {...otherProps}\n className={contentClassName}\n onEscapeKeyDown={handleEscapeKeyDown}\n onInteractOutside={variant === 'overlay' ? undefined : event => event.preventDefault()}\n onCloseAutoFocus={handleCloseAutoFocus}\n ref={ref}\n style={styleProp}>\n {content}\n </DialogPrimitive.Content>\n ) : (\n <UntrappedFocusDrawerContent onEscape={handleEscapeKeyDown} className={contentClassName} style={styleProp} ref={ref}>\n {content}\n </UntrappedFocusDrawerContent>\n );\n});\n\nexport const Content = React.forwardRef(function Content(props: DrawerContentProps, externalRef: React.Ref<HTMLDivElement>) {\n const { children } = props;\n\n return (\n <Portal>\n <DrawerContent {...props} ref={externalRef}>\n {children}\n </DrawerContent>\n </Portal>\n );\n});\n"],"names":["RESIZE_MIN","RESIZE_MAX","DrawerAnimationDefinition","RenderPropWrapper","React","forwardRef","children","onClick","renderProps","ref","close","CustomEvent","Title","DrawerTitle","props","className","otherProps","cName","cn","DialogPrimitive","Footer","DrawerFooter","Actions","Group","Close","DrawerClose","onClose","useCurrentDrawer","asChild","InnerContent","isScrollable","ScrollArea","Portal","open","variant","outlet","backdropClassNames","useMemo","getBackdropClassNames","container","undefined","forceMount","Backdrop","UntrappedFocusDrawerContent","EmbeddedDrawerContent","onEscape","useGlobalKeyboardShortcut","event","key","FocusScope","autoFocus","restoreFocus","DrawerContent","Content","externalRef","size","onResize","closeOnEscape","focusTrap","showCloseButton","setOpen","style","texts","useLocalization","useMergedRef","menu","useCurrentMenu","handleCloseAutoFocus","containerClassName","getDrawerContainerClassNames","contentClassName","dragHandlerClassName","getDrawerContentClassNames","getDrawerDragHandlerClassNames","handleEscapeKeyDown","isTargetInsideDrawerContent","current","contains","target","preventDefault","containerWidth","setContainerWidth","useState","dragHandlerRef","useRef","position","dragging","handleProps","dragHandleProps","resetPosition","useDraggable","contentRef","useEffect","x","offsetWidth","resizedWidth","Math","min","max","output","content","IconButton","appearance","drawer","icon","styleProp","width","onEscapeKeyDown","onInteractOutside","onCloseAutoFocus"],"mappings":";;;;;;;;;;;;;;;;AAqBA,MAAMA,UAAU,GAAG,GAAG;AACtB,MAAMC,UAAU,GAAG,IAAI;IAMXC;AAAZ,WAAYA,yBAAyB;EACjCA,gDAAmB;EACnBA,8CAAiB;AACrB,CAAC,EAHWA,yBAAyB,KAAzBA,yBAAyB;AAKrC,MAAMC,iBAAiB,gBAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,iBAAiB,CAAC;EAAEG,QAAQ;EAAEC,OAAO;EAAEC;CAAkB,EAAEC,GAAG;EAC9G,MAAMC,KAAK,GAAG;IACVH,OAAO,CAAC,IAAII,WAAW,CAAC,OAAO,CAAC,CAAC;GACpC;EAED,OAAOL,QAAQ,CAAC;IAAEI,KAAK;IAAED,GAAG;IAAE,GAAGD;GAAa,CAAC;AACnD,CAAC,CAAC;MAGWI,KAAK,gBAAGR,cAAK,CAACC,UAAU,CAAC,SAASQ,WAAW,CAACC,KAAuB,EAAEL,GAAkC;EAClH,MAAM;IAAEM,SAAS;IAAET,QAAQ;IAAE,GAAGU;GAAY,GAAGF,KAAK;;;;;;EAMpD,MAAMG,KAAK,GAAGC,EAAE,CAAC,yEAAyE,EAAEH,SAAS,CAAC;EACtG,oBACIX,6BAACe,OAAqB;IAACJ,SAAS,EAAEE;KAAWD,UAAU;IAAEP,GAAG,EAAEA;mBAC1DL;IAAMW,SAAS,EAAC;KAAqDT,QAAQ,CAAQ,CACjE;AAEhC,CAAC;MAGYc,MAAM,gBAAGhB,cAAK,CAACC,UAAU,CAAC,SAASgB,YAAY,CAACP,KAAwB,EAAEL,GAA8B;EACjH,MAAM;IAAEM,SAAS;IAAE,GAAGC;GAAY,GAAGF,KAAK;;;;EAI1C,MAAMG,KAAK,GAAGC,EAAE,CAAC,oEAAoE,EAAEJ,KAAK,CAACC,SAAS,CAAC;EACvG,oBAAOX,sDAASY,UAAU;IAAED,SAAS,EAAEE,KAAK;IAAER,GAAG,EAAEA;KAAO;AAC9D,CAAC;MAEYa,OAAO,gBAAGlB,cAAK,CAACC,UAAU,CAAC,SAASiB,OAAO,CAACR,KAAiB,EAAEL,GAA8B;EACtG,MAAM;IAAEM,SAAS;IAAE,GAAGC;GAAY,GAAGF,KAAK;EAC1C,MAAMG,KAAK,GAAGC,EAAE,CAAC,uCAAuC,EAAEH,SAAS,CAAC;EACpE,oBAAOX,6BAACmB,KAAK,oBAAKP,UAAU;IAAED,SAAS,EAAEE,KAAK;IAAER,GAAG,EAAEA;KAAO;AAChE,CAAC;MAGYe,KAAK,gBAAGpB,cAAK,CAACC,UAAU,CAAC,SAASoB,WAAW,CAACX,KAAuB,EAAEL,GAAiC;EACjH,MAAM;IAAEiB;GAAS,GAAGC,gBAAgB,EAAE;EAEtC,oBAAOvB,6BAACe,OAAqB,oBAAKL,KAAK;IAAEP,OAAO,EAAEmB,OAAO;IAAEjB,GAAG,EAAEA,GAAG;IAAEmB,OAAO;KAAG;AACnF,CAAC;MAcYC,YAAY,gBAAGzB,cAAK,CAACC,UAAU,CAAC,SAASwB,YAAY,CAC9Df,KAA8B,EAC9BL,GAA8B;EAE9B,MAAM;IAAEM,SAAS;IAAEe,YAAY,GAAG,IAAI;IAAExB,QAAQ;IAAE,GAAGU;GAAY,GAAGF,KAAK;EACzE,MAAMG,KAAK,GAAGC,EAAE,CAAC,YAAY,EAAEH,SAAS,CAAC;EACzC,oBACIX,sDAASY,UAAU;IAAED,SAAS,EAAEE,KAAK;IAAER,GAAG,EAAEA;MACvCqB,YAAY,gBAAG1B,6BAAC2B,UAAU;IAAChB,SAAS,EAAC;KAAoBT,QAAQ,CAAc,GAAG;IAAEA;GAAU,CAC7F;AAEd,CAAC;AAED,MAAM0B,MAAM,GAAIlB,KAAwC;EACpD,MAAM;IAAER,QAAQ;IAAE,GAAGU;GAAY,GAAGF,KAAK;EACzC,MAAM;IAAEmB,IAAI,GAAG,KAAK;IAAEC,OAAO;IAAEC;GAAQ,GAAGR,gBAAgB,EAAE;EAE5D,MAAMS,kBAAkB,GAAGhC,cAAK,CAACiC,OAAO,CAAC;IACrC,OAAOC,qBAAqB,CAACL,IAAI,CAAC;GACrC,EAAE,CAACA,IAAI,CAAC,CAAC;EAEV,IAAI,CAACE,MAAM,EAAE;IACT,OAAO,IAAI;;EAGf,oBACI/B,6BAACe,QAAsB,oBAAKH,UAAU;IAAEuB,SAAS,EAAEJ,MAAM,aAANA,MAAM,cAANA,MAAM,GAAIK;MACxDN,OAAO,KAAK,SAAS,gBAClB9B,6BAACe,OAAuB;IAACsB,UAAU;kBAE/BrC,6BAACsC,QAAQ;IAAC3B,SAAS,EAAEqB;IAAsB,CACrB,GAC1B,IAAI,EACP9B,QAAQ,CACY;AAEjC,CAAC;AAKD,MAAMqC,2BAA2B,gBAAGvC,cAAK,CAACC,UAAU,CAAC,SAASuC,qBAAqB,CAC/E9B,KAAuC,EACvCL,GAA8B;EAE9B,MAAM;IAAEoC,QAAQ;IAAEvC,QAAQ;IAAE,GAAGU;GAAY,GAAGF,KAAK;EAEnDgC,yBAAyB,CAAEC,KAAoB;IAC3C,IAAIA,KAAK,CAACC,GAAG,KAAK,QAAQ,EAAE;MACxBH,QAAQ,CAACE,KAAK,CAAC;;GAEtB,CAAC;EAEF,oBACI3C,sDAASY,UAAU;IAAEP,GAAG,EAAEA;mBACtBL,6BAAC6C,UAAU;IAACC,SAAS,EAAE,IAAI;IAAEC,YAAY,EAAE;KACtC7C,QAAQ,CACA,CACX;AAEd,CAAC,CAAC;MAOW8C,aAAa,gBAAGhD,cAAK,CAACC,UAAU,CAAC,SAASgD,OAAO,CAC1DvC,KAAyB,EACzBwC,WAAsC;EAEtC,MAAM;IACFC,IAAI;IACJ7B,OAAO;IACP8B,QAAQ;IACRvB,IAAI,GAAG,KAAK;IACZwB,aAAa;IACbvB,OAAO;IACPwB,SAAS;IACTC,eAAe;IACfC;GACH,GAAGjC,gBAAgB,EAAE;EACtB,MAAM;IAAEZ,SAAS;IAAE8C,KAAK;IAAEvD,QAAQ;IAAE,GAAGU;GAAY,GAAGF,KAAK;EAC3D,MAAM;IAAEgD;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMtD,GAAG,GAAGuD,YAAY,CAAiBV,WAAW,CAAC;;;EAIrD,MAAMW,IAAI,GAAGC,cAAc,EAAE;EAC7B,IAAIC,oBAA4E;EAEhF,IAAIF,IAAI,EAAE;IACNE,oBAAoB,GAAG;MACnBF,IAAI,CAACvD,KAAK,EAAE;KACf;;EAGL,MAAM0D,kBAAkB,GAAWhE,cAAK,CAACiC,OAAO,CAAC,MAAMnB,EAAE,CAACmD,4BAA4B,CAACnC,OAAO,CAAC,EAAEnB,SAAS,CAAC,EAAE,CAACA,SAAS,CAAC,CAAC;EAEzH,MAAM;IAAEuD,gBAAgB;IAAEC;GAAsB,GAAGnE,cAAK,CAACiC,OAAO,CAAC;IAC7D,MAAMiC,gBAAgB,GAAGE,0BAA0B,CAACjB,IAAI,EAAErB,OAAO,EAAED,IAAI,CAAC;IACxE,MAAMsC,oBAAoB,GAAWE,8BAA8B,EAAE;IACrE,OAAO;MAAEH,gBAAgB;MAAEC;KAAsB;GACpD,EAAE,CAAChB,IAAI,EAAErB,OAAO,EAAED,IAAI,CAAC,CAAC;EAEzB,MAAMyC,mBAAmB,GAAI3B,KAAoB;;IAC7C,MAAM4B,2BAA2B,mBAAGlE,GAAG,CAACmE,OAAO,iDAAX,aAAaC,QAAQ,CAAC9B,KAAK,CAAC+B,MAAqB,CAAC;IACtF,IAAIH,2BAA2B,EAAE;MAC7B,IAAI,CAAClB,aAAa,EAAE;QAChBV,KAAK,CAACgC,cAAc,EAAE;OACzB,MAAM;QACHnB,OAAO,IAAIA,OAAO,CAAC,KAAK,CAAC;QACzB,IAAIlC,OAAO,EAAE;UACTA,OAAO,EAAE;;;;GAIxB;EAED,MAAM,CAACsD,cAAc,EAAEC,iBAAiB,CAAC,GAAG7E,cAAK,CAAC8E,QAAQ,EAAU;EAEpE,MAAMC,cAAc,GAAG/E,cAAK,CAACgF,MAAM,CAAiB,IAAI,CAAC;EACzD,MAAM;IACFC,QAAQ;IACRC,QAAQ;IACRC,WAAW,EAAEC,eAAe;IAC5BC;GACH,GAAGC,YAAY,CAAC1B,YAAY,CAAiBmB,cAAc,CAAC,CAAC;EAE9D,MAAMQ,UAAU,GAAGvF,cAAK,CAACgF,MAAM,CAAiB,IAAI,CAAC;EAErDhF,cAAK,CAACwF,SAAS,CAAC;IACZ,IAAIpC,QAAQ,EAAE;MACVA,QAAQ,CAAC6B,QAAQ,CAACQ,CAAC,CAAC;;GAE3B,EAAE,CAACR,QAAQ,CAAC,CAAC;EAEdjF,cAAK,CAACwF,SAAS,CAAC;;IACZX,iBAAiB,wBAACU,UAAU,CAACf,OAAO,wDAAlB,oBAAoBkB,WAAW,CAAC;GACrD,EAAE,CAACH,UAAU,EAAE1D,IAAI,CAAC,CAAC;EAEtB,MAAM8D,YAAY,GAAG3F,cAAK,CAACiC,OAAO,CAAC;IAC/B,IAAI2C,cAAc,EAAE;MAChB,OAAOgB,IAAI,CAACC,GAAG,CAAChG,UAAU,EAAE+F,IAAI,CAACE,GAAG,CAAClG,UAAU,EAAEgF,cAAc,GAAGK,QAAQ,CAACQ,CAAC,IAAI,CAAC,CAAC,CAAC;;IAEvF;GACH,EAAE,CAACb,cAAc,EAAEK,QAAQ,CAAC,CAAC;EAE9BjF,cAAK,CAACwF,SAAS,CAAC;IACZ,IAAI,CAACN,QAAQ,IAAIS,YAAY,EAAE;MAC3Bd,iBAAiB,CAACc,YAAY,CAAC;MAC/BN,aAAa,EAAE;;GAEtB,EAAE,CAACH,QAAQ,CAAC,CAAC;EAEd,IAAIa,MAAM;EAEV,IAAI,OAAO7F,QAAQ,KAAK,UAAU,EAAE;IAChC6F,MAAM,gBACF/F,6BAACoB,KAAK,qBACFpB,6BAACD,iBAAiB,QAAEG,QAAQ,CAAqB,CAExD;GACJ,MAAM;IACH6F,MAAM,GAAG7F,QAAQ;;EAGrB,MAAM8F,OAAO,gBACThG;IAAKK,GAAG,EAAEkF,UAAU;iBAAY,QAAQ;IAAC5E,SAAS,EAAEqD;kBAChDhE;IAAKW,SAAS,EAAEwD;KAA0BiB,eAAe;mBAAc,gBAAgB;IAAC/E,GAAG,EAAE0E;KAAkB,EAC9GgB,MAAM,EACNxC,eAAe,gBACZvD,6BAACoB,KAAK,qBACFpB,6BAACiG,UAAU;IACPC,UAAU,EAAC,UAAU;kBACTxC,KAAK,CAACyC,MAAM,CAAC7F,KAAK;IAC9BK,SAAS,EAAC,kCAAkC;IAC5CyF,IAAI,EAAC;IACP,CACE,GACR,IAAI,CAEf;EAED,MAAMC,SAAS,GAAG;IACd,GAAG5C,KAAK;IACR,GAAG;MAAE6C,KAAK,EAAEX;;GACf;EAED,OAAOrC,SAAS,gBACZtD,6BAACe,SAAuB;IACpBsB,UAAU;KACNzB,UAAU;IACdD,SAAS,EAAEuD,gBAAgB;IAC3BqC,eAAe,EAAEjC,mBAAmB;IACpCkC,iBAAiB,EAAE1E,OAAO,KAAK,SAAS,GAAGM,SAAS,GAAGO,KAAK,IAAIA,KAAK,CAACgC,cAAc,EAAE;IACtF8B,gBAAgB,EAAE1C,oBAAoB;IACtC1D,GAAG,EAAEA,GAAG;IACRoD,KAAK,EAAE4C;MACNL,OAAO,CACc,gBAE1BhG,6BAACuC,2BAA2B;IAACE,QAAQ,EAAE6B,mBAAmB;IAAE3D,SAAS,EAAEuD,gBAAgB;IAAET,KAAK,EAAE4C,SAAS;IAAEhG,GAAG,EAAEA;KAC3G2F,OAAO,CAEf;AACL,CAAC;MAEY/C,OAAO,gBAAGjD,cAAK,CAACC,UAAU,CAAC,SAASgD,OAAO,CAACvC,KAAyB,EAAEwC,WAAsC;EACtH,MAAM;IAAEhD;GAAU,GAAGQ,KAAK;EAE1B,oBACIV,6BAAC4B,MAAM,qBACH5B,6BAACgD,aAAa,oBAAKtC,KAAK;IAAEL,GAAG,EAAE6C;MAC1BhD,QAAQ,CACG,CACX;AAEjB,CAAC;;;;"}
1
+ {"version":3,"file":"Content.js","sources":["../../../../../../../../src/components/Drawer/components/Content.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { Group, GroupProps } from '../../Group/Group';\nimport { IconButton } from '../../IconButton/IconButton';\nimport { useLocalization } from '../../Provider/Localization';\nimport { Backdrop } from '../../Backdrop/Backdrop';\nimport { useCurrentMenu } from '../../Menu/Context';\nimport { useCurrentDrawer } from '../Context';\nimport {\n getBackdropClassNames,\n getDrawerContainerClassNames,\n getDrawerContentClassNames,\n getDrawerDragHandlerClassNames,\n} from '../util';\nimport { useDraggable } from '../../../utils/hooks/useDraggable';\nimport { useMergedRef } from '../../../hooks/useMergedRef';\nimport { FocusScope } from '@react-aria/focus';\nimport { ScrollArea } from '../../ScrollArea/ScrollArea';\nimport { useGlobalKeyDown } from '../../../hooks/useGlobalKeyDown';\n\nconst RESIZE_MIN = 360;\nconst RESIZE_MAX = 1000;\n\nexport type DrawerContentRenderProps = {\n close: () => void;\n};\n\nexport enum DrawerAnimationDefinition {\n Visible = 'visible',\n Hidden = 'hidden',\n}\n\nconst RenderPropWrapper = React.forwardRef(function RenderPropWrapper({ children, onClick, renderProps }: any, ref) {\n const close = () => {\n onClick(new CustomEvent('close'));\n };\n\n return children({ close, ref, ...renderProps });\n});\n\nexport type DrawerTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DrawerTitle(props: DrawerTitleProps, ref: React.Ref<HTMLHeadingElement>) {\n const { className, children, ...otherProps } = props;\n /**\n * By design in default drawer version Title has grey separator, but we might have exceptions like Drawer + Tabs scenario,\n * where we might want to hide the grey separator. For this reason separator was rendedr with using of classNames,\n * so it can be easily overriden in exceptional scenarious.\n * */\n const cName = cn('grow-0 py-4 pl-4 justyfy-self-start mb-0 border-b-[1px] border-grey-300', className);\n return (\n <DialogPrimitive.Title className={cName} {...otherProps} ref={ref}>\n <span className=\"line-clamp-2 inline-block w-4/6 overflow-y-hidden\">{children}</span>\n </DialogPrimitive.Title>\n );\n});\n\nexport type DrawerFooterProps = React.HTMLAttributes<HTMLDivElement>;\nexport const Footer = React.forwardRef(function DrawerFooter(props: DrawerFooterProps, ref: React.Ref<HTMLDivElement>) {\n const { className, ...otherProps } = props;\n /**\n * The same scenario as Title, grey separator rendered using classNames to have posibility to override it.\n */\n const cName = cn('mt-auto flex justify-end grow-0 p-4 border-t-[1px] border-grey-300', props.className);\n return <div {...otherProps} className={cName} ref={ref} />;\n});\n\nexport const Actions = React.forwardRef(function Actions(props: GroupProps, ref: React.Ref<HTMLDivElement>) {\n const { className, ...otherProps } = props;\n const cName = cn('absolute top-0 right-10 mr-[8px] mt-4', className);\n return <Group {...otherProps} className={cName} ref={ref} />;\n});\n\nexport type DrawerCloseProps = React.HTMLAttributes<HTMLButtonElement>;\nexport const Close = React.forwardRef(function DrawerClose(props: DrawerCloseProps, ref: React.Ref<HTMLButtonElement>) {\n const { onClose } = useCurrentDrawer();\n\n return <DialogPrimitive.Close {...props} onClick={onClose} ref={ref} asChild />;\n});\n\n/**\n * It is container component, needed to provide default scrolling behaviour and padding, to simplyfy usage, requested by feature devs.\n * It is optional to use InnerContent component, if consumer need to implement custom behaviour or paddings for inner content,\n * then it's simply enough to render children and wrap them in custom implementation.\n */\nexport type DrawerInnerContentProps = React.HTMLAttributes<HTMLDivElement> & {\n /**\n * Consumer might want to use innerContent component to apply default paddings, but want to implement custom scrolling behaviour,\n * default value - true\n */\n isScrollable?: boolean;\n};\nexport const InnerContent = React.forwardRef(function InnerContent(\n props: DrawerInnerContentProps,\n ref: React.Ref<HTMLDivElement>\n) {\n const { className, isScrollable = true, children, ...otherProps } = props;\n const cName = cn('grow-1 p-4', className);\n return (\n <div {...otherProps} className={cName} ref={ref}>\n {isScrollable ? <ScrollArea className=\"w-full gap-y-0.5\">{children}</ScrollArea> : { children }}\n </div>\n );\n});\n\nconst Portal = (props: DialogPrimitive.DialogPortalProps) => {\n const { children, ...otherProps } = props;\n const { open = false, variant, outlet } = useCurrentDrawer();\n\n const backdropClassNames = React.useMemo(() => {\n return getBackdropClassNames(open);\n }, [open]);\n\n if (!outlet) {\n return null;\n }\n\n return (\n <DialogPrimitive.Portal {...otherProps} container={outlet ?? undefined}>\n {variant === 'overlay' ? (\n <DialogPrimitive.Overlay forceMount>\n {/* Animate backdrop appearance for overlay version of Drawer */}\n <Backdrop className={backdropClassNames} />\n </DialogPrimitive.Overlay>\n ) : null}\n {children}\n </DialogPrimitive.Portal>\n );\n};\n\ntype UntrappedFocusDrawerContentProps = React.HTMLAttributes<HTMLDivElement> & {\n onEscape: (event: KeyboardEvent) => void;\n};\nconst UntrappedFocusDrawerContent = React.forwardRef(function EmbeddedDrawerContent(\n props: UntrappedFocusDrawerContentProps,\n ref: React.Ref<HTMLDivElement>\n) {\n const { onEscape, children, ...otherProps } = props;\n\n useGlobalKeyDown('Escape', onEscape);\n\n return (\n <div {...otherProps} ref={ref}>\n <FocusScope autoFocus={true} restoreFocus={true}>\n {children}\n </FocusScope>\n </div>\n );\n});\n\nexport type DrawerContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n /** An accessible label to be announced when the side drawer is opened */\n 'aria-label': string;\n children: Omit<React.ReactNode, 'Function'> | ((props: DrawerContentRenderProps) => JSX.Element);\n};\nexport const DrawerContent = React.forwardRef(function Content(\n props: DrawerContentProps,\n externalRef: React.Ref<HTMLDivElement>\n) {\n const {\n size,\n onClose,\n onResize,\n open = false,\n closeOnEscape,\n variant,\n focusTrap,\n showCloseButton,\n setOpen,\n } = useCurrentDrawer();\n const { className, style, children, ...otherProps } = props;\n const { texts } = useLocalization();\n const ref = useMergedRef<HTMLDivElement>(externalRef);\n\n // if the drawer was opened by a menu, we need to close the menu when the drawer closes\n // the menu is still open (and mounted) because it is the trigger for the drawer\n const menu = useCurrentMenu();\n let handleCloseAutoFocus: DialogPrimitive.DialogContentProps['onCloseAutoFocus'];\n\n if (menu) {\n handleCloseAutoFocus = () => {\n menu.close();\n };\n }\n\n const containerClassName: string = React.useMemo(() => cn(getDrawerContainerClassNames(variant), className), [className]);\n\n const { contentClassName, dragHandlerClassName } = React.useMemo(() => {\n const contentClassName = getDrawerContentClassNames(size, variant, open);\n const dragHandlerClassName: string = getDrawerDragHandlerClassNames();\n return { contentClassName, dragHandlerClassName };\n }, [size, variant, open]);\n\n const handleEscapeKeyDown = (event: KeyboardEvent) => {\n const isTargetInsideDrawerContent = ref.current?.contains(event.target as HTMLElement);\n if (isTargetInsideDrawerContent) {\n if (!closeOnEscape) {\n event.preventDefault();\n } else {\n setOpen && setOpen(false);\n if (onClose) {\n onClose();\n }\n }\n }\n };\n\n const [containerWidth, setContainerWidth] = React.useState<number>();\n\n const dragHandlerRef = React.useRef<HTMLDivElement>(null);\n const {\n position,\n dragging,\n handleProps: dragHandleProps,\n resetPosition,\n } = useDraggable(useMergedRef<HTMLDivElement>(dragHandlerRef));\n\n const contentRef = React.useRef<HTMLDivElement>(null);\n\n React.useEffect(() => {\n if (onResize) {\n onResize(position.x);\n }\n }, [position]);\n\n React.useEffect(() => {\n setContainerWidth(contentRef.current?.offsetWidth);\n }, [contentRef, open]);\n\n const resizedWidth = React.useMemo((): number | undefined => {\n if (containerWidth) {\n return Math.min(RESIZE_MAX, Math.max(RESIZE_MIN, containerWidth - position.x || 0));\n }\n return;\n }, [containerWidth, position]);\n\n React.useEffect(() => {\n if (!dragging && resizedWidth) {\n setContainerWidth(resizedWidth);\n resetPosition();\n }\n }, [dragging]);\n\n let output;\n\n if (typeof children === 'function') {\n output = (\n <Close>\n <RenderPropWrapper>{children}</RenderPropWrapper>\n </Close>\n );\n } else {\n output = children;\n }\n\n const content = (\n <div ref={contentRef} data-taco=\"drawer\" className={containerClassName}>\n <div className={dragHandlerClassName} {...dragHandleProps} data-testid=\"resize-handler\" ref={dragHandlerRef} />\n {output}\n {showCloseButton ? (\n <Close>\n <IconButton\n appearance=\"discrete\"\n aria-label={texts.drawer.close}\n className=\"absolute top-0 right-0 mt-4 mr-2\"\n icon=\"close\"\n />\n </Close>\n ) : null}\n </div>\n );\n\n const styleProp = {\n ...style,\n ...{ width: resizedWidth },\n };\n\n return focusTrap ? (\n <DialogPrimitive.Content\n forceMount\n {...otherProps}\n className={contentClassName}\n onEscapeKeyDown={handleEscapeKeyDown}\n onInteractOutside={variant === 'overlay' ? undefined : event => event.preventDefault()}\n onCloseAutoFocus={handleCloseAutoFocus}\n ref={ref}\n style={styleProp}>\n {content}\n </DialogPrimitive.Content>\n ) : (\n <UntrappedFocusDrawerContent onEscape={handleEscapeKeyDown} className={contentClassName} style={styleProp} ref={ref}>\n {content}\n </UntrappedFocusDrawerContent>\n );\n});\n\nexport const Content = React.forwardRef(function Content(props: DrawerContentProps, externalRef: React.Ref<HTMLDivElement>) {\n const { children } = props;\n\n return (\n <Portal>\n <DrawerContent {...props} ref={externalRef}>\n {children}\n </DrawerContent>\n </Portal>\n );\n});\n"],"names":["RESIZE_MIN","RESIZE_MAX","DrawerAnimationDefinition","RenderPropWrapper","React","forwardRef","children","onClick","renderProps","ref","close","CustomEvent","Title","DrawerTitle","props","className","otherProps","cName","cn","DialogPrimitive","Footer","DrawerFooter","Actions","Group","Close","DrawerClose","onClose","useCurrentDrawer","asChild","InnerContent","isScrollable","ScrollArea","Portal","open","variant","outlet","backdropClassNames","useMemo","getBackdropClassNames","container","undefined","forceMount","Backdrop","UntrappedFocusDrawerContent","EmbeddedDrawerContent","onEscape","useGlobalKeyDown","FocusScope","autoFocus","restoreFocus","DrawerContent","Content","externalRef","size","onResize","closeOnEscape","focusTrap","showCloseButton","setOpen","style","texts","useLocalization","useMergedRef","menu","useCurrentMenu","handleCloseAutoFocus","containerClassName","getDrawerContainerClassNames","contentClassName","dragHandlerClassName","getDrawerContentClassNames","getDrawerDragHandlerClassNames","handleEscapeKeyDown","event","isTargetInsideDrawerContent","current","contains","target","preventDefault","containerWidth","setContainerWidth","useState","dragHandlerRef","useRef","position","dragging","handleProps","dragHandleProps","resetPosition","useDraggable","contentRef","useEffect","x","offsetWidth","resizedWidth","Math","min","max","output","content","IconButton","appearance","drawer","icon","styleProp","width","onEscapeKeyDown","onInteractOutside","onCloseAutoFocus"],"mappings":"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"}
@@ -1,8 +1,8 @@
1
1
  import React__default from 'react';
2
2
  import cn from 'classnames';
3
+ import { useMergedRef } from '../../../hooks/useMergedRef.js';
3
4
  import { useLocalization } from '../../Provider/Localization.js';
4
5
  import { Button } from '../../Button/Button.js';
5
- import { useMergedRef } from '../../../hooks/useMergedRef.js';
6
6
  import { OverflowGroup } from '../../OverflowGroup/OverflowGroup.js';
7
7
  import { getLinkClasses } from './Link.js';
8
8
 
@@ -1,9 +1,9 @@
1
1
  import { forwardRef, createElement, useRef, memo, cloneElement } from 'react';
2
2
  import cn from 'classnames';
3
3
  import { Icon } from '../Icon/Icon.js';
4
+ import { useMergedRef } from '../../hooks/useMergedRef.js';
4
5
  import { getButtonStateClasses, getInputClasses } from './util.js';
5
6
  import { useBoundingClientRectListener } from '../../hooks/useBoundingClientRectListener.js';
6
- import { useMergedRef } from '../../hooks/useMergedRef.js';
7
7
 
8
8
  const validSetSelectionRangeTypes = ['text', 'search', 'url', 'tel', 'password'];
9
9
  const InputWithoutDeprecatedFeatures = /*#__PURE__*/forwardRef(function InputWithoutDeprecatedFeatures(props, ref) {
@@ -1,9 +1,9 @@
1
1
  import { forwardRef, useMemo, createRef, useEffect, createElement } from 'react';
2
2
  import cn from 'classnames';
3
+ import { useMergedRef } from '../../hooks/useMergedRef.js';
3
4
  import { useLocalization } from '../Provider/Localization.js';
4
5
  import { Checkbox } from '../Checkbox/Checkbox.js';
5
6
  import { getInputClasses } from '../Input/util.js';
6
- import { useMergedRef } from '../../hooks/useMergedRef.js';
7
7
  import { getNextIndexFromKey } from '../../utils/hooks/useListKeyboardNavigation.js';
8
8
  import { useListScrollTo } from '../../utils/hooks/useListScrollTo.js';
9
9
  import { Spinner } from '../Spinner/Spinner.js';
@@ -1,6 +1,6 @@
1
1
  import { useMemo, useEffect } from 'react';
2
- import { v4 } from 'uuid';
3
2
  import { useMergedRef } from '../../hooks/useMergedRef.js';
3
+ import { v4 } from 'uuid';
4
4
  import { useFlattenedData, getIndexFromValue, getActiveDescendant, setInputValueByRef, findByValue, sanitizeItem } from './util.js';
5
5
  import { useTypeahead } from './useTypeahead.js';
6
6
 
@@ -1,7 +1,7 @@
1
1
  import { useMemo, useState, useEffect } from 'react';
2
+ import { useMergedRef } from '../../hooks/useMergedRef.js';
2
3
  import { useLocalization } from '../Provider/Localization.js';
3
4
  import { v4 } from 'uuid';
4
- import { useMergedRef } from '../../hooks/useMergedRef.js';
5
5
  import { getIndexFromValue, getSelectedIndexesFromValue, setInputValueByRef, getActiveDescendant, findByValue } from './util.js';
6
6
  import { useTypeahead } from './useTypeahead.js';
7
7
 
@@ -3,6 +3,7 @@ import cn from 'classnames';
3
3
  import { Icon as Icon$1 } from '../../Icon/Icon.js';
4
4
  import { useCurrentMenu } from '../Context.js';
5
5
  import { Item as Item$1 } from '@radix-ui/react-dropdown-menu';
6
+ import { Shortcut } from '../../Shortcut/Shortcut.js';
6
7
 
7
8
  const Icon = ({
8
9
  name
@@ -30,11 +31,6 @@ const useItemStyling = ({
30
31
  'cursor-not-allowed hover:bg-white text-grey-300': disabled
31
32
  }, className);
32
33
  };
33
- const Shortcut = props => {
34
- return /*#__PURE__*/createElement("span", Object.assign({}, props, {
35
- className: "text-grey-700 ml-auto pl-3"
36
- }));
37
- };
38
34
  const Item = /*#__PURE__*/forwardRef(function MenuItem(props, ref) {
39
35
  var _props$disabled;
40
36
  const {
@@ -72,9 +68,14 @@ const Item = /*#__PURE__*/forwardRef(function MenuItem(props, ref) {
72
68
  onClick: handleClick,
73
69
  onSelect: handleSelect,
74
70
  ref: ref
75
- }), icon && /*#__PURE__*/createElement(Icon, {
71
+ }), icon ? /*#__PURE__*/createElement(Icon, {
76
72
  name: icon
77
- }), props.children, shortcut && /*#__PURE__*/createElement(Shortcut, null, shortcut));
73
+ }) : null, props.children, shortcut ? /*#__PURE__*/createElement("span", {
74
+ className: "ml-auto pl-5"
75
+ }, /*#__PURE__*/createElement(Shortcut, {
76
+ keys: shortcut,
77
+ className: "text-grey-700"
78
+ })) : null);
78
79
  if (typeof dialog === 'function') {
79
80
  button = dialog({
80
81
  trigger: button,
@@ -84,5 +85,5 @@ const Item = /*#__PURE__*/forwardRef(function MenuItem(props, ref) {
84
85
  return button;
85
86
  });
86
87
 
87
- export { Icon, Item, Shortcut, useItemStyling };
88
+ export { Icon, Item, useItemStyling };
88
89
  //# sourceMappingURL=Item.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Item.js","sources":["../../../../../../../../src/components/Menu/components/Item.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport cn from 'classnames';\nimport { IconName } from '../../Icon/Icon';\nimport { Icon as IconPrimitive } from '../../Icon/Icon';\nimport { useCurrentMenu } from '../Context';\nimport { DialogProps } from '../../Dialog/Dialog';\n\nexport const Icon = ({ name }) => (\n <span className=\"absolute left-0 ml-1\">\n <IconPrimitive className=\"-ml-px -mt-px !h-5 !w-5\" name={name} />\n </span>\n);\n\nexport const useItemStyling = ({ disabled, indented, className }) => {\n const menu = useCurrentMenu();\n\n React.useEffect(() => {\n if (indented && !menu?.indented) {\n menu?.registerIndentation();\n }\n }, [indented]);\n\n return cn(\n 'flex items-center justify-start h-8 pr-1.5 relative rounded w-full focus:outline-none group',\n {\n 'pl-7': menu?.indented,\n 'pl-1.5': !menu?.indented,\n 'cursor-pointer text-black hover:wcag-grey-200 data-[highlighted]:wcag-grey-200': !disabled,\n 'cursor-not-allowed hover:bg-white text-grey-300': disabled,\n },\n className\n );\n};\n\nexport const Shortcut = props => {\n return <span {...props} className=\"text-grey-700 ml-auto pl-3\" />;\n};\n\nexport type MenuItemProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> & {\n dialog?: (props: Partial<DialogProps>) => JSX.Element;\n disabled?: boolean;\n icon?: IconName;\n onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n shortcut?: string;\n};\n\nexport const Item = React.forwardRef(function MenuItem(props: MenuItemProps, ref: React.Ref<HTMLDivElement>) {\n const { dialog, icon, onClick, shortcut, ...otherProps } = props;\n const menu = useCurrentMenu();\n const className = useItemStyling({\n disabled: props.disabled,\n indented: !!icon,\n className: props.className,\n });\n\n const disabled = props.disabled ?? props['aria-disabled'];\n\n let handleClick;\n\n // radix has a bug that does not disable clicks when disabled is set on items\n if (disabled) {\n handleClick = event => {\n event.preventDefault();\n event.stopPropagation();\n };\n }\n\n const handleSelect = event => {\n if (onClick) {\n onClick(event);\n }\n\n if (props['aria-haspopup'] || typeof dialog === 'function') {\n event.preventDefault();\n }\n };\n\n let button = (\n <DropdownMenuPrimitive.Item {...otherProps} className={className} onClick={handleClick} onSelect={handleSelect} ref={ref}>\n {icon && <Icon name={icon} />}\n {props.children}\n {shortcut && <Shortcut>{shortcut}</Shortcut>}\n </DropdownMenuPrimitive.Item>\n );\n\n if (typeof dialog === 'function') {\n button = dialog({ trigger: button, onClose: menu?.close });\n }\n\n return button;\n});\n"],"names":["Icon","name","React","className","IconPrimitive","useItemStyling","disabled","indented","menu","useCurrentMenu","registerIndentation","cn","Shortcut","props","Item","MenuItem","ref","dialog","icon","onClick","shortcut","otherProps","handleClick","event","preventDefault","stopPropagation","handleSelect","button","DropdownMenuPrimitive","onSelect","children","trigger","onClose","close"],"mappings":";;;;;;MAQaA,IAAI,GAAG,CAAC;EAAEC;CAAM,kBACzBC;EAAMC,SAAS,EAAC;gBACZD,cAACE,MAAa;EAACD,SAAS,EAAC,yBAAyB;EAACF,IAAI,EAAEA;EAAQ;MAI5DI,cAAc,GAAG,CAAC;EAAEC,QAAQ;EAAEC,QAAQ;EAAEJ;CAAW;EAC5D,MAAMK,IAAI,GAAGC,cAAc,EAAE;EAE7BP,SAAe,CAAC;IACZ,IAAIK,QAAQ,IAAI,EAACC,IAAI,aAAJA,IAAI,eAAJA,IAAI,CAAED,QAAQ,GAAE;MAC7BC,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEE,mBAAmB,EAAE;;GAElC,EAAE,CAACH,QAAQ,CAAC,CAAC;EAEd,OAAOI,EAAE,CACL,6FAA6F,EAC7F;IACI,MAAM,EAAEH,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAED,QAAQ;IACtB,QAAQ,EAAE,EAACC,IAAI,aAAJA,IAAI,eAAJA,IAAI,CAAED,QAAQ;IACzB,gFAAgF,EAAE,CAACD,QAAQ;IAC3F,iDAAiD,EAAEA;GACtD,EACDH,SAAS,CACZ;AACL;MAEaS,QAAQ,GAAGC,KAAK;EACzB,oBAAOX,wCAAUW,KAAK;IAAEV,SAAS,EAAC;KAA+B;AACrE;MAUaW,IAAI,gBAAGZ,UAAgB,CAAC,SAASa,QAAQ,CAACF,KAAoB,EAAEG,GAA8B;;EACvG,MAAM;IAAEC,MAAM;IAAEC,IAAI;IAAEC,OAAO;IAAEC,QAAQ;IAAE,GAAGC;GAAY,GAAGR,KAAK;EAChE,MAAML,IAAI,GAAGC,cAAc,EAAE;EAC7B,MAAMN,SAAS,GAAGE,cAAc,CAAC;IAC7BC,QAAQ,EAAEO,KAAK,CAACP,QAAQ;IACxBC,QAAQ,EAAE,CAAC,CAACW,IAAI;IAChBf,SAAS,EAAEU,KAAK,CAACV;GACpB,CAAC;EAEF,MAAMG,QAAQ,sBAAGO,KAAK,CAACP,QAAQ,6DAAIO,KAAK,CAAC,eAAe,CAAC;EAEzD,IAAIS,WAAW;;EAGf,IAAIhB,QAAQ,EAAE;IACVgB,WAAW,GAAGC,KAAK;MACfA,KAAK,CAACC,cAAc,EAAE;MACtBD,KAAK,CAACE,eAAe,EAAE;KAC1B;;EAGL,MAAMC,YAAY,GAAGH,KAAK;IACtB,IAAIJ,OAAO,EAAE;MACTA,OAAO,CAACI,KAAK,CAAC;;IAGlB,IAAIV,KAAK,CAAC,eAAe,CAAC,IAAI,OAAOI,MAAM,KAAK,UAAU,EAAE;MACxDM,KAAK,CAACC,cAAc,EAAE;;GAE7B;EAED,IAAIG,MAAM,gBACNzB,cAAC0B,MAA0B,oBAAKP,UAAU;IAAElB,SAAS,EAAEA,SAAS;IAAEgB,OAAO,EAAEG,WAAW;IAAEO,QAAQ,EAAEH,YAAY;IAAEV,GAAG,EAAEA;MAChHE,IAAI,iBAAIhB,cAACF,IAAI;IAACC,IAAI,EAAEiB;IAAQ,EAC5BL,KAAK,CAACiB,QAAQ,EACdV,QAAQ,iBAAIlB,cAACU,QAAQ,QAAEQ,QAAQ,CAAY,CAEnD;EAED,IAAI,OAAOH,MAAM,KAAK,UAAU,EAAE;IAC9BU,MAAM,GAAGV,MAAM,CAAC;MAAEc,OAAO,EAAEJ,MAAM;MAAEK,OAAO,EAAExB,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEyB;KAAO,CAAC;;EAG9D,OAAON,MAAM;AACjB,CAAC;;;;"}
1
+ {"version":3,"file":"Item.js","sources":["../../../../../../../../src/components/Menu/components/Item.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport cn from 'classnames';\nimport { IconName } from '../../Icon/Icon';\nimport { Icon as IconPrimitive } from '../../Icon/Icon';\nimport { useCurrentMenu } from '../Context';\nimport { DialogProps } from '../../Dialog/Dialog';\nimport { Shortcut } from '../../Shortcut/Shortcut';\n\nexport const Icon = ({ name }) => (\n <span className=\"absolute left-0 ml-1\">\n <IconPrimitive className=\"-ml-px -mt-px !h-5 !w-5\" name={name} />\n </span>\n);\n\nexport const useItemStyling = ({ disabled, indented, className }) => {\n const menu = useCurrentMenu();\n\n React.useEffect(() => {\n if (indented && !menu?.indented) {\n menu?.registerIndentation();\n }\n }, [indented]);\n\n return cn(\n 'flex items-center justify-start h-8 pr-1.5 relative rounded w-full focus:outline-none group',\n {\n 'pl-7': menu?.indented,\n 'pl-1.5': !menu?.indented,\n 'cursor-pointer text-black hover:wcag-grey-200 data-[highlighted]:wcag-grey-200': !disabled,\n 'cursor-not-allowed hover:bg-white text-grey-300': disabled,\n },\n className\n );\n};\n\nexport type MenuItemProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> & {\n dialog?: (props: Partial<DialogProps>) => JSX.Element;\n disabled?: boolean;\n icon?: IconName;\n onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n shortcut?: string;\n};\n\nexport const Item = React.forwardRef(function MenuItem(props: MenuItemProps, ref: React.Ref<HTMLDivElement>) {\n const { dialog, icon, onClick, shortcut, ...otherProps } = props;\n const menu = useCurrentMenu();\n const className = useItemStyling({\n disabled: props.disabled,\n indented: !!icon,\n className: props.className,\n });\n\n const disabled = props.disabled ?? props['aria-disabled'];\n\n let handleClick;\n\n // radix has a bug that does not disable clicks when disabled is set on items\n if (disabled) {\n handleClick = event => {\n event.preventDefault();\n event.stopPropagation();\n };\n }\n\n const handleSelect = event => {\n if (onClick) {\n onClick(event);\n }\n\n if (props['aria-haspopup'] || typeof dialog === 'function') {\n event.preventDefault();\n }\n };\n\n let button = (\n <DropdownMenuPrimitive.Item {...otherProps} className={className} onClick={handleClick} onSelect={handleSelect} ref={ref}>\n {icon ? <Icon name={icon} /> : null}\n {props.children}\n {shortcut ? (\n <span className=\"ml-auto pl-5\">\n <Shortcut keys={shortcut} className=\"text-grey-700\" />\n </span>\n ) : null}\n </DropdownMenuPrimitive.Item>\n );\n\n if (typeof dialog === 'function') {\n button = dialog({ trigger: button, onClose: menu?.close });\n }\n\n return button;\n});\n"],"names":["Icon","name","React","className","IconPrimitive","useItemStyling","disabled","indented","menu","useCurrentMenu","registerIndentation","cn","Item","MenuItem","props","ref","dialog","icon","onClick","shortcut","otherProps","handleClick","event","preventDefault","stopPropagation","handleSelect","button","DropdownMenuPrimitive","onSelect","children","Shortcut","keys","trigger","onClose","close"],"mappings":";;;;;;;MASaA,IAAI,GAAG,CAAC;EAAEC;CAAM,kBACzBC;EAAMC,SAAS,EAAC;gBACZD,cAACE,MAAa;EAACD,SAAS,EAAC,yBAAyB;EAACF,IAAI,EAAEA;EAAQ;MAI5DI,cAAc,GAAG,CAAC;EAAEC,QAAQ;EAAEC,QAAQ;EAAEJ;CAAW;EAC5D,MAAMK,IAAI,GAAGC,cAAc,EAAE;EAE7BP,SAAe,CAAC;IACZ,IAAIK,QAAQ,IAAI,EAACC,IAAI,aAAJA,IAAI,eAAJA,IAAI,CAAED,QAAQ,GAAE;MAC7BC,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEE,mBAAmB,EAAE;;GAElC,EAAE,CAACH,QAAQ,CAAC,CAAC;EAEd,OAAOI,EAAE,CACL,6FAA6F,EAC7F;IACI,MAAM,EAAEH,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAED,QAAQ;IACtB,QAAQ,EAAE,EAACC,IAAI,aAAJA,IAAI,eAAJA,IAAI,CAAED,QAAQ;IACzB,gFAAgF,EAAE,CAACD,QAAQ;IAC3F,iDAAiD,EAAEA;GACtD,EACDH,SAAS,CACZ;AACL;MAUaS,IAAI,gBAAGV,UAAgB,CAAC,SAASW,QAAQ,CAACC,KAAoB,EAAEC,GAA8B;;EACvG,MAAM;IAAEC,MAAM;IAAEC,IAAI;IAAEC,OAAO;IAAEC,QAAQ;IAAE,GAAGC;GAAY,GAAGN,KAAK;EAChE,MAAMN,IAAI,GAAGC,cAAc,EAAE;EAC7B,MAAMN,SAAS,GAAGE,cAAc,CAAC;IAC7BC,QAAQ,EAAEQ,KAAK,CAACR,QAAQ;IACxBC,QAAQ,EAAE,CAAC,CAACU,IAAI;IAChBd,SAAS,EAAEW,KAAK,CAACX;GACpB,CAAC;EAEF,MAAMG,QAAQ,sBAAGQ,KAAK,CAACR,QAAQ,6DAAIQ,KAAK,CAAC,eAAe,CAAC;EAEzD,IAAIO,WAAW;;EAGf,IAAIf,QAAQ,EAAE;IACVe,WAAW,GAAGC,KAAK;MACfA,KAAK,CAACC,cAAc,EAAE;MACtBD,KAAK,CAACE,eAAe,EAAE;KAC1B;;EAGL,MAAMC,YAAY,GAAGH,KAAK;IACtB,IAAIJ,OAAO,EAAE;MACTA,OAAO,CAACI,KAAK,CAAC;;IAGlB,IAAIR,KAAK,CAAC,eAAe,CAAC,IAAI,OAAOE,MAAM,KAAK,UAAU,EAAE;MACxDM,KAAK,CAACC,cAAc,EAAE;;GAE7B;EAED,IAAIG,MAAM,gBACNxB,cAACyB,MAA0B,oBAAKP,UAAU;IAAEjB,SAAS,EAAEA,SAAS;IAAEe,OAAO,EAAEG,WAAW;IAAEO,QAAQ,EAAEH,YAAY;IAAEV,GAAG,EAAEA;MAChHE,IAAI,gBAAGf,cAACF,IAAI;IAACC,IAAI,EAAEgB;IAAQ,GAAG,IAAI,EAClCH,KAAK,CAACe,QAAQ,EACdV,QAAQ,gBACLjB;IAAMC,SAAS,EAAC;kBACZD,cAAC4B,QAAQ;IAACC,IAAI,EAAEZ,QAAQ;IAAEhB,SAAS,EAAC;IAAkB,CACnD,GACP,IAAI,CAEf;EAED,IAAI,OAAOa,MAAM,KAAK,UAAU,EAAE;IAC9BU,MAAM,GAAGV,MAAM,CAAC;MAAEgB,OAAO,EAAEN,MAAM;MAAEO,OAAO,EAAEzB,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAE0B;KAAO,CAAC;;EAG9D,OAAOR,MAAM;AACjB,CAAC;;;;"}
@@ -1,7 +1,7 @@
1
1
  import React__default from 'react';
2
2
  import cn from 'classnames';
3
- import { IconButton } from '../IconButton/IconButton.js';
4
3
  import { useMergedRef } from '../../hooks/useMergedRef.js';
4
+ import { IconButton } from '../IconButton/IconButton.js';
5
5
  import { Menu } from '../Menu/Menu.js';
6
6
  import { useIntersectionObserver } from '../../hooks/useIntersectionObserver.js';
7
7
 
@@ -1,7 +1,7 @@
1
1
  import { forwardRef, createElement, Fragment } from 'react';
2
+ import { useMergedRef } from '../../hooks/useMergedRef.js';
2
3
  import { IconButton } from '../IconButton/IconButton.js';
3
4
  import { useLocalization } from '../Provider/Localization.js';
4
- import { useMergedRef } from '../../hooks/useMergedRef.js';
5
5
  import { Input } from '../Input/Input.js';
6
6
  import { setInputValueByRef } from '../../utils/input.js';
7
7
 
@@ -1,8 +1,8 @@
1
1
  import { useState, useMemo, useRef, useEffect, createElement, Fragment, cloneElement } from 'react';
2
2
  import cn from 'classnames';
3
+ import { useMergedRef } from '../../hooks/useMergedRef.js';
3
4
  import { useLocalization } from '../Provider/Localization.js';
4
5
  import { v4 } from 'uuid';
5
- import { useMergedRef } from '../../hooks/useMergedRef.js';
6
6
  import { createCustomEvent } from '../../utils/input.js';
7
7
  import { useFlattenedData, findByValue, setInputValueByRef, sanitizeItem } from '../Listbox/util.js';
8
8