@economic/taco 2.12.0 → 2.13.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (43) hide show
  1. package/dist/components/Provider/Localization.d.ts +1 -0
  2. package/dist/components/Select2/components/Option.d.ts +7 -5
  3. package/dist/components/Table3/Table3.d.ts +9 -1
  4. package/dist/components/Table3/components/columns/header/Group.d.ts +15 -0
  5. package/dist/components/Table3/components/columns/header/Header.d.ts +5 -0
  6. package/dist/components/Table3/components/columns/internal/EditingActions.d.ts +1 -1
  7. package/dist/components/Table3/hooks/features/useHeaderOffsetStyle.d.ts +3 -0
  8. package/dist/components/Table3/types.d.ts +7 -0
  9. package/dist/esm/index.css +24 -6
  10. package/dist/esm/packages/taco/src/components/Combobox/useCombobox.js +1 -1
  11. package/dist/esm/packages/taco/src/components/Combobox/useCombobox.js.map +1 -1
  12. package/dist/esm/packages/taco/src/components/Drawer/components/Content.js +4 -1
  13. package/dist/esm/packages/taco/src/components/Drawer/components/Content.js.map +1 -1
  14. package/dist/esm/packages/taco/src/components/Provider/Localization.js +1 -0
  15. package/dist/esm/packages/taco/src/components/Provider/Localization.js.map +1 -1
  16. package/dist/esm/packages/taco/src/components/Select2/components/Option.js +13 -6
  17. package/dist/esm/packages/taco/src/components/Select2/components/Option.js.map +1 -1
  18. package/dist/esm/packages/taco/src/components/Select2/components/Trigger.js +7 -6
  19. package/dist/esm/packages/taco/src/components/Select2/components/Trigger.js.map +1 -1
  20. package/dist/esm/packages/taco/src/components/Table3/Table3.js +25 -8
  21. package/dist/esm/packages/taco/src/components/Table3/Table3.js.map +1 -1
  22. package/dist/esm/packages/taco/src/components/Table3/components/columns/header/Group.js +70 -0
  23. package/dist/esm/packages/taco/src/components/Table3/components/columns/header/Group.js.map +1 -0
  24. package/dist/esm/packages/taco/src/components/Table3/components/columns/header/Header.js +26 -8
  25. package/dist/esm/packages/taco/src/components/Table3/components/columns/header/Header.js.map +1 -1
  26. package/dist/esm/packages/taco/src/components/Table3/components/columns/internal/EditingActions.js +13 -9
  27. package/dist/esm/packages/taco/src/components/Table3/components/columns/internal/EditingActions.js.map +1 -1
  28. package/dist/esm/packages/taco/src/components/Table3/components/toolbar/ColumnSettings.js +8 -5
  29. package/dist/esm/packages/taco/src/components/Table3/components/toolbar/ColumnSettings.js.map +1 -1
  30. package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Filter/filters/components/FilterColumn.js +14 -2
  31. package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Filter/filters/components/FilterColumn.js.map +1 -1
  32. package/dist/esm/packages/taco/src/components/Table3/hooks/features/useHeaderOffsetStyle.js +24 -0
  33. package/dist/esm/packages/taco/src/components/Table3/hooks/features/useHeaderOffsetStyle.js.map +1 -0
  34. package/dist/esm/packages/taco/src/components/Table3/hooks/useConvertChildrenToColumns.js +30 -7
  35. package/dist/esm/packages/taco/src/components/Table3/hooks/useConvertChildrenToColumns.js.map +1 -1
  36. package/dist/esm/packages/taco/src/components/Table3/types.js.map +1 -1
  37. package/dist/index.css +24 -6
  38. package/dist/taco.cjs.development.js +221 -54
  39. package/dist/taco.cjs.development.js.map +1 -1
  40. package/dist/taco.cjs.production.min.js +1 -1
  41. package/dist/taco.cjs.production.min.js.map +1 -1
  42. package/package.json +2 -2
  43. package/types.json +7274 -6482
@@ -353,6 +353,7 @@ export declare const defaultLocalisationTexts: {
353
353
  condition: string;
354
354
  value: string;
355
355
  };
356
+ hiddenColumn: string;
356
357
  tooltip: string;
357
358
  total: string;
358
359
  };
@@ -1,18 +1,20 @@
1
1
  import React from 'react';
2
- import { IconName, IconProps } from '../../Icon/Icon';
2
+ import { IconName } from '../../Icon/Icon';
3
3
  import * as ListboxPrimitive from '../../../primitives/Listbox2/Listbox2';
4
4
  import { Color } from '../../../types';
5
- export declare type Select2OptionProps = Omit<ListboxPrimitive.Listbox2OptionProps, 'children'> & {
5
+ export declare type Select2OptionProps = Omit<ListboxPrimitive.Listbox2OptionProps, 'children' | 'prefix'> & {
6
6
  children: string;
7
7
  color?: Color;
8
8
  description?: string;
9
- icon?: React.ReactElement<IconProps> | IconName;
9
+ prefix?: IconName | JSX.Element;
10
+ postfix?: IconName | JSX.Element;
10
11
  textValue?: string;
11
12
  };
12
- export declare const Option: React.ForwardRefExoticComponent<Pick<ListboxPrimitive.Listbox2OptionProps, "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" | "disabled" | "value"> & {
13
+ export declare const Option: React.ForwardRefExoticComponent<Pick<ListboxPrimitive.Listbox2OptionProps, "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" | "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" | "disabled" | "value"> & {
13
14
  children: string;
14
15
  color?: "green" | "yellow" | "red" | "blue" | "purple" | "brown" | "pink" | "orange" | "grey" | "transparent" | undefined;
15
16
  description?: string | undefined;
16
- icon?: React.ReactElement<IconProps, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)> | "account-preview" | "accounting-year-cancel" | "accounting-year" | "accounting" | "arrow-bottom" | "arrow-down" | "arrow-end" | "arrow-left" | "arrow-right" | "arrow-start" | "arrow-top" | "arrow-up" | "attach-auto" | "attach-cancel" | "attach-warning" | "attach" | "autotext-insert" | "autotext" | "basic-tabs" | "basic" | "bell-solid" | "book" | "booking" | "budget" | "calendar" | "cash-account" | "cash-reports" | "chart-area" | "chart-bar" | "chart-line" | "chart-pie" | "chart-table" | "chat-solid" | "chat" | "chevron-down-double" | "chevron-down-solid" | "chevron-down" | "chevron-left-double" | "chevron-left-solid" | "chevron-left" | "chevron-right-double" | "chevron-right-solid" | "chevron-right" | "chevron-up-double" | "chevron-up-solid" | "chevron-up" | "circle-close" | "circle-information" | "circle-minus" | "circle-plus" | "circle-questionmark" | "circle-tick" | "circle-warning" | "clamp-open" | "clamp" | "close" | "column-freeze" | "column-unfreeze" | "columns" | "connection-enable" | "connection-revoke" | "contacts" | "copy" | "courses" | "credit" | "delete-permanently" | "delete" | "depecriate" | "developer" | "distribution-template" | "document-approve" | "document-create-entry" | "document-cut" | "document-error" | "document-isolate-page" | "document-merge" | "document-move" | "document-preview" | "document-received" | "document-rejected-request" | "document-split" | "document-time" | "document" | "download" | "drag" | "e-copedia" | "e-signature" | "edit-simple" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "entries-on-account" | "entries-open" | "entries-warning" | "entry-type-customer-invoice" | "entry-type-customer-payment" | "entry-type-journal-entry" | "entry-type-manual-customer-invoice" | "entry-type-supplier-invoice" | "entry-type-supplier-payment" | "envelope-approved" | "envelope" | "expand-view" | "expenses" | "export-to-excel" | "export-to-pdf" | "export" | "eye-off" | "eye-on" | "filter-solid" | "filter" | "font-size" | "graph-solid" | "hash" | "height-extra-tall" | "height-medium" | "height-short" | "height-tall" | "home" | "images" | "import" | "inbox-einvoicing" | "inbox-scanning" | "inbox-smart" | "inbox" | "info" | "inventory-matrix" | "inventory" | "journal-pro" | "layout-both" | "layout-first" | "layout-last" | "layout-none" | "layout" | "ledger-card-customer-reminder" | "ledger-card-manual-customer-invoice" | "ledger-card-obsolete-stock" | "ledger-card-opening-entry" | "ledger-card-reserved-entry" | "ledger-card-shrinkage-pilferage" | "ledger-card-stock-adjustment" | "ledger-card-transferred-opening-entry" | "ledger-card" | "lightbulb" | "line" | "list-bulleted" | "list-search" | "list" | "lock-open" | "lock" | "log-out" | "log" | "market" | "match-amount" | "match-entries" | "menu" | "mileage" | "modal-resize" | "modal-shrink" | "more-solid" | "more" | "move" | "navigation-list" | "note-follow-up" | "note-read" | "note" | "numbers" | "partner-api" | "payment-paid" | "payment-unpaid" | "period" | "person-change" | "person-minus" | "person-plus" | "person-tick" | "play" | "plus-minus" | "print" | "process-payment" | "product-ledger-card" | "profile" | "project-cards" | "projects" | "question-mark" | "quicklinks" | "rating-bankruptcy" | "rating-payment-problems" | "reconciled" | "refresh" | "report-solid" | "report" | "restore" | "rotate-left" | "rotate-right" | "sales" | "search-bold" | "search" | "secure-tick" | "secure" | "settings-solid" | "settings" | "shortcuts" | "show-all" | "show-less" | "show-more" | "show-template" | "sliders" | "smartpay" | "sort-by" | "star-solid" | "star" | "subscriptions" | "system-entries" | "tag" | "template-override" | "templates" | "thumb-both" | "thumb-down-solid" | "thumb-down" | "thumb-up-solid" | "thumb-up" | "tick-bold" | "tick" | "time" | "transfer-cancel" | "transfer-locked" | "transfer" | "undo" | "undock" | "unreconciled" | "warning" | "webshop" | "website" | "workflow-template-basic" | "workflow" | "zoom" | undefined;
17
+ prefix?: "account-preview" | "accounting-year-cancel" | "accounting-year" | "accounting" | "arrow-bottom" | "arrow-down" | "arrow-end" | "arrow-left" | "arrow-right" | "arrow-start" | "arrow-top" | "arrow-up" | "attach-auto" | "attach-cancel" | "attach-warning" | "attach" | "autotext-insert" | "autotext" | "basic-tabs" | "basic" | "bell-solid" | "book" | "booking" | "budget" | "calendar" | "cash-account" | "cash-reports" | "chart-area" | "chart-bar" | "chart-line" | "chart-pie" | "chart-table" | "chat-solid" | "chat" | "chevron-down-double" | "chevron-down-solid" | "chevron-down" | "chevron-left-double" | "chevron-left-solid" | "chevron-left" | "chevron-right-double" | "chevron-right-solid" | "chevron-right" | "chevron-up-double" | "chevron-up-solid" | "chevron-up" | "circle-close" | "circle-information" | "circle-minus" | "circle-plus" | "circle-questionmark" | "circle-tick" | "circle-warning" | "clamp-open" | "clamp" | "close" | "column-freeze" | "column-unfreeze" | "columns" | "connection-enable" | "connection-revoke" | "contacts" | "copy" | "courses" | "credit" | "delete-permanently" | "delete" | "depecriate" | "developer" | "distribution-template" | "document-approve" | "document-create-entry" | "document-cut" | "document-error" | "document-isolate-page" | "document-merge" | "document-move" | "document-preview" | "document-received" | "document-rejected-request" | "document-split" | "document-time" | "document" | "download" | "drag" | "e-copedia" | "e-signature" | "edit-simple" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "entries-on-account" | "entries-open" | "entries-warning" | "entry-type-customer-invoice" | "entry-type-customer-payment" | "entry-type-journal-entry" | "entry-type-manual-customer-invoice" | "entry-type-supplier-invoice" | "entry-type-supplier-payment" | "envelope-approved" | "envelope" | "expand-view" | "expenses" | "export-to-excel" | "export-to-pdf" | "export" | "eye-off" | "eye-on" | "filter-solid" | "filter" | "font-size" | "graph-solid" | "hash" | "height-extra-tall" | "height-medium" | "height-short" | "height-tall" | "home" | "images" | "import" | "inbox-einvoicing" | "inbox-scanning" | "inbox-smart" | "inbox" | "info" | "inventory-matrix" | "inventory" | "journal-pro" | "layout-both" | "layout-first" | "layout-last" | "layout-none" | "layout" | "ledger-card-customer-reminder" | "ledger-card-manual-customer-invoice" | "ledger-card-obsolete-stock" | "ledger-card-opening-entry" | "ledger-card-reserved-entry" | "ledger-card-shrinkage-pilferage" | "ledger-card-stock-adjustment" | "ledger-card-transferred-opening-entry" | "ledger-card" | "lightbulb" | "line" | "list-bulleted" | "list-search" | "list" | "lock-open" | "lock" | "log-out" | "log" | "market" | "match-amount" | "match-entries" | "menu" | "mileage" | "modal-resize" | "modal-shrink" | "more-solid" | "more" | "move" | "navigation-list" | "note-follow-up" | "note-read" | "note" | "numbers" | "partner-api" | "payment-paid" | "payment-unpaid" | "period" | "person-change" | "person-minus" | "person-plus" | "person-tick" | "play" | "plus-minus" | "print" | "process-payment" | "product-ledger-card" | "profile" | "project-cards" | "projects" | "question-mark" | "quicklinks" | "rating-bankruptcy" | "rating-payment-problems" | "reconciled" | "refresh" | "report-solid" | "report" | "restore" | "rotate-left" | "rotate-right" | "sales" | "search-bold" | "search" | "secure-tick" | "secure" | "settings-solid" | "settings" | "shortcuts" | "show-all" | "show-less" | "show-more" | "show-template" | "sliders" | "smartpay" | "sort-by" | "star-solid" | "star" | "subscriptions" | "system-entries" | "tag" | "template-override" | "templates" | "thumb-both" | "thumb-down-solid" | "thumb-down" | "thumb-up-solid" | "thumb-up" | "tick-bold" | "tick" | "time" | "transfer-cancel" | "transfer-locked" | "transfer" | "undo" | "undock" | "unreconciled" | "warning" | "webshop" | "website" | "workflow-template-basic" | "workflow" | "zoom" | JSX.Element | undefined;
18
+ postfix?: "account-preview" | "accounting-year-cancel" | "accounting-year" | "accounting" | "arrow-bottom" | "arrow-down" | "arrow-end" | "arrow-left" | "arrow-right" | "arrow-start" | "arrow-top" | "arrow-up" | "attach-auto" | "attach-cancel" | "attach-warning" | "attach" | "autotext-insert" | "autotext" | "basic-tabs" | "basic" | "bell-solid" | "book" | "booking" | "budget" | "calendar" | "cash-account" | "cash-reports" | "chart-area" | "chart-bar" | "chart-line" | "chart-pie" | "chart-table" | "chat-solid" | "chat" | "chevron-down-double" | "chevron-down-solid" | "chevron-down" | "chevron-left-double" | "chevron-left-solid" | "chevron-left" | "chevron-right-double" | "chevron-right-solid" | "chevron-right" | "chevron-up-double" | "chevron-up-solid" | "chevron-up" | "circle-close" | "circle-information" | "circle-minus" | "circle-plus" | "circle-questionmark" | "circle-tick" | "circle-warning" | "clamp-open" | "clamp" | "close" | "column-freeze" | "column-unfreeze" | "columns" | "connection-enable" | "connection-revoke" | "contacts" | "copy" | "courses" | "credit" | "delete-permanently" | "delete" | "depecriate" | "developer" | "distribution-template" | "document-approve" | "document-create-entry" | "document-cut" | "document-error" | "document-isolate-page" | "document-merge" | "document-move" | "document-preview" | "document-received" | "document-rejected-request" | "document-split" | "document-time" | "document" | "download" | "drag" | "e-copedia" | "e-signature" | "edit-simple" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "entries-on-account" | "entries-open" | "entries-warning" | "entry-type-customer-invoice" | "entry-type-customer-payment" | "entry-type-journal-entry" | "entry-type-manual-customer-invoice" | "entry-type-supplier-invoice" | "entry-type-supplier-payment" | "envelope-approved" | "envelope" | "expand-view" | "expenses" | "export-to-excel" | "export-to-pdf" | "export" | "eye-off" | "eye-on" | "filter-solid" | "filter" | "font-size" | "graph-solid" | "hash" | "height-extra-tall" | "height-medium" | "height-short" | "height-tall" | "home" | "images" | "import" | "inbox-einvoicing" | "inbox-scanning" | "inbox-smart" | "inbox" | "info" | "inventory-matrix" | "inventory" | "journal-pro" | "layout-both" | "layout-first" | "layout-last" | "layout-none" | "layout" | "ledger-card-customer-reminder" | "ledger-card-manual-customer-invoice" | "ledger-card-obsolete-stock" | "ledger-card-opening-entry" | "ledger-card-reserved-entry" | "ledger-card-shrinkage-pilferage" | "ledger-card-stock-adjustment" | "ledger-card-transferred-opening-entry" | "ledger-card" | "lightbulb" | "line" | "list-bulleted" | "list-search" | "list" | "lock-open" | "lock" | "log-out" | "log" | "market" | "match-amount" | "match-entries" | "menu" | "mileage" | "modal-resize" | "modal-shrink" | "more-solid" | "more" | "move" | "navigation-list" | "note-follow-up" | "note-read" | "note" | "numbers" | "partner-api" | "payment-paid" | "payment-unpaid" | "period" | "person-change" | "person-minus" | "person-plus" | "person-tick" | "play" | "plus-minus" | "print" | "process-payment" | "product-ledger-card" | "profile" | "project-cards" | "projects" | "question-mark" | "quicklinks" | "rating-bankruptcy" | "rating-payment-problems" | "reconciled" | "refresh" | "report-solid" | "report" | "restore" | "rotate-left" | "rotate-right" | "sales" | "search-bold" | "search" | "secure-tick" | "secure" | "settings-solid" | "settings" | "shortcuts" | "show-all" | "show-less" | "show-more" | "show-template" | "sliders" | "smartpay" | "sort-by" | "star-solid" | "star" | "subscriptions" | "system-entries" | "tag" | "template-override" | "templates" | "thumb-both" | "thumb-down-solid" | "thumb-down" | "thumb-up-solid" | "thumb-up" | "tick-bold" | "tick" | "time" | "transfer-cancel" | "transfer-locked" | "transfer" | "undo" | "undock" | "unreconciled" | "warning" | "webshop" | "website" | "workflow-template-basic" | "workflow" | "zoom" | JSX.Element | undefined;
17
19
  textValue?: string | undefined;
18
20
  } & React.RefAttributes<HTMLDivElement>>;
@@ -1,11 +1,19 @@
1
1
  import React from 'react';
2
- import { Table3ColumnProps, Table3Props, Table3Ref } from './types';
2
+ import { Table3ColumnProps, Table3GroupProps, Table3Props, Table3Ref } from './types';
3
3
  import './style.css';
4
4
  declare function Column<TType = unknown>(_: Table3ColumnProps<TType>): null;
5
+ declare namespace Column {
6
+ var displayName: string;
7
+ }
8
+ declare function Group(_: Table3GroupProps): null;
9
+ declare namespace Group {
10
+ var displayName: string;
11
+ }
5
12
  declare type FixedForwardRef = <T, P = {}>(render: (props: P, ref: React.Ref<T>) => JSX.Element) => (props: P & React.RefAttributes<T>) => JSX.Element;
6
13
  export declare const fixedForwardRef: FixedForwardRef;
7
14
  declare type Table3WithStatics = (<TType = unknown>(props: Table3Props<TType> & React.RefAttributes<Table3Ref>) => JSX.Element) & {
8
15
  Column: typeof Column;
16
+ Group: typeof Group;
9
17
  };
10
18
  export declare const Table3: Table3WithStatics;
11
19
  export { useTable3DataLoader } from './hooks/useTableDataLoader';
@@ -0,0 +1,15 @@
1
+ /// <reference types="react" />
2
+ import { HeaderProps } from './Header';
3
+ import { ColumnMeta } from '@tanstack/react-table';
4
+ import { Table3ColumnAlignment } from '../../../types';
5
+ export declare function Group<TType = unknown>(props: HeaderProps<TType>): JSX.Element;
6
+ export declare type MemoedGroupProps<TType = unknown> = Omit<HeaderProps<TType>, 'column' | 'header' | 'scrollToIndex'> & {
7
+ align?: Table3ColumnAlignment;
8
+ colSpan: number;
9
+ hasSeparator?: boolean;
10
+ id: string;
11
+ index: number;
12
+ isPrinting: boolean;
13
+ length: number;
14
+ meta: ColumnMeta<TType, unknown>;
15
+ };
@@ -6,6 +6,7 @@ export declare type HeaderSortDirection = Table3SortDirection | false;
6
6
  export declare type SortToggleHandler = (sortDirection: HeaderSortDirection) => void;
7
7
  export declare type HeaderProps<TType = unknown> = HeaderContext<TType, unknown> & {
8
8
  children?: string | JSX.Element;
9
+ hasSeparator?: boolean;
9
10
  };
10
11
  export declare function Header<TType = unknown>(props: HeaderProps<TType>): JSX.Element;
11
12
  export declare type MemoedHeaderProps<TType = unknown> = Omit<HeaderProps<TType>, 'column' | 'header'> & {
@@ -14,10 +15,13 @@ export declare type MemoedHeaderProps<TType = unknown> = Omit<HeaderProps<TType>
14
15
  canHide: boolean;
15
16
  canResize: boolean;
16
17
  canSort: boolean;
18
+ colSpan: number;
17
19
  hasMenu: boolean;
20
+ hasSeparator?: boolean;
18
21
  id: string;
19
22
  index: number;
20
23
  isFrozen: boolean;
24
+ isPlaceholder: boolean;
21
25
  isPrinting: boolean;
22
26
  isResizing: boolean;
23
27
  length: number;
@@ -30,3 +34,4 @@ export declare type MemoedHeaderProps<TType = unknown> = Omit<HeaderProps<TType>
30
34
  scrollToIndex: TableStrategy['scrollToIndex'];
31
35
  sortDirection: HeaderSortDirection;
32
36
  };
37
+ export declare function HeaderSeparator(): JSX.Element;
@@ -4,5 +4,5 @@ export declare type EditingActionsProps<TType = unknown> = CellContext<TType, un
4
4
  isHovered: boolean;
5
5
  };
6
6
  export declare const COLUMN_ID = "__editing_actions";
7
- export declare const EDITING_ACTIONS_WIDTH = 45;
7
+ export declare const EDITING_ACTIONS_WIDTH = 60;
8
8
  export declare function createRowEditingActionsColumn<TType = unknown>(): DisplayColumnDef<TType, unknown>;
@@ -0,0 +1,3 @@
1
+ import { Table } from '@tanstack/react-table';
2
+ export declare function getHeaderTopOffset(depth: number): number;
3
+ export declare function useHeaderOffsetStyle<TType = unknown>(tableId: string, table: Table<TType>): string;
@@ -53,6 +53,12 @@ export declare type Table3ColumnProps<TType = unknown> = ValueOf<{
53
53
  tooltip?: string;
54
54
  };
55
55
  }>;
56
+ export declare type Table3GroupProps = {
57
+ id: string;
58
+ header: string;
59
+ colSpan?: number;
60
+ children: (JSX.Element | boolean | null | undefined)[];
61
+ };
56
62
  export declare type DeprecatedRowDensity = 'compact' | 'normal' | 'comfortable' | 'spacious';
57
63
  export declare type Table3RowHeight = 'short' | 'medium' | 'tall' | 'extra-tall';
58
64
  export declare type Table3FontSize = 'small' | 'medium' | 'large';
@@ -291,6 +297,7 @@ export declare type Table3Texts = {
291
297
  condition: string;
292
298
  value: string;
293
299
  };
300
+ hiddenColumn: string;
294
301
  tooltip: string;
295
302
  total: string;
296
303
  };
@@ -641,12 +641,14 @@
641
641
  /* cells */
642
642
  [role='cell'],
643
643
  [role='columnheader'],
644
+ [data-taco='table3-column-group'] > div,
644
645
  [data-taco='table2-footer-summary'] {
645
646
  @apply border-grey-300;
646
647
  }
647
648
 
648
649
  [role='cell']:not([data-highlighted='true']),
649
- [role='columnheader'] {
650
+ [role='columnheader'],
651
+ [data-taco='table3-column-group'] > div {
650
652
  @apply flex;
651
653
  }
652
654
 
@@ -657,17 +659,20 @@
657
659
  }
658
660
 
659
661
  [role='cell'][data-align='left'],
660
- [role='columnheader'][data-align='left'] {
662
+ [role='columnheader'][data-align='left'],
663
+ [data-taco='table3-column-group'][data-align='left'] > div {
661
664
  @apply justify-start text-left;
662
665
  }
663
666
 
664
667
  [role='cell'][data-align='center'],
665
- [role='columnheader'][data-align='center'] {
668
+ [role='columnheader'][data-align='center'],
669
+ [data-taco='table3-column-group'][data-align='center'] > div {
666
670
  @apply justify-center text-center;
667
671
  }
668
672
 
669
673
  [role='cell'][data-align='right'],
670
- [role='columnheader'][data-align='right'] {
674
+ [role='columnheader'][data-align='right'],
675
+ [data-taco='table3-column-group'][data-align='right'] > div {
671
676
  @apply justify-end text-right;
672
677
  }
673
678
 
@@ -683,10 +688,18 @@
683
688
 
684
689
  /* row/cell backgrounds */
685
690
 
686
- [role='columnheader'] {
691
+ [role='columnheader'],
692
+ [data-taco='table3-column-group'] > div {
687
693
  @apply bg-white;
688
694
  }
689
695
 
696
+ [role='columnheader'] [data-taco='header-separator'] {
697
+ @apply -mr-1;
698
+ }
699
+ [data-taco='table3-column-group'] [data-taco='header-separator'] {
700
+ @apply -mr-3;
701
+ }
702
+
690
703
  /* normal rows */
691
704
  [role='row']:not([data-selected='true']):not([data-error='true']) [role='cell'] {
692
705
  @apply bg-white;
@@ -797,7 +810,12 @@
797
810
  @apply !-my-2;
798
811
  }
799
812
 
800
- [data-font-size='small'] [role='cell'] > [data-taco='icon'] {
813
+ [data-font-size='small'] [role='cell'] [data-taco='spinner'] {
814
+ @apply !h-4 !w-4;
815
+ }
816
+
817
+ [data-font-size='small'] [role='cell'] > [data-taco='icon'],
818
+ [data-font-size='small'] [role='cell'] [data-taco='spinner'] {
801
819
  @apply !-my-[3px];
802
820
  }
803
821
 
@@ -100,7 +100,7 @@ const useCombobox = ({
100
100
  // event handlers
101
101
  const handleInputBlur = event => {
102
102
  event.persist();
103
- if (event.relatedTarget === listRef.current) {
103
+ if (listRef.current && event.relatedTarget === listRef.current) {
104
104
  event.preventDefault();
105
105
  return;
106
106
  }
@@ -1 +1 @@
1
- {"version":3,"file":"useCombobox.js","sources":["../../../../../../../src/components/Combobox/useCombobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { v4 as uuid } from 'uuid';\nimport debounce from 'lodash/debounce';\nimport { ComboboxProps } from './Combobox';\nimport {\n setInputValueByRef,\n getIndexFromValue,\n findByValue,\n useFlattenedData,\n sanitizeItem,\n getOptionParents,\n filterData,\n} from '../Listbox/util';\nimport { createCustomKeyboardEvent } from '../../utils/input';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { getId, ScrollableListItemValue, ScrollableListPropsWithRef } from '../Listbox/ScrollableList';\nimport { InputProps } from '../Input/Input';\n\nconst debouncer = debounce(f => f(), 200);\n\nconst convertToInputValue = (value: ScrollableListItemValue | undefined) => String(value ?? '');\n\ntype useCombobox = React.HTMLAttributes<HTMLDivElement> & {\n combobox: React.HTMLAttributes<HTMLSpanElement>;\n input: Omit<InputProps, 'defaultValue'> & { ref: React.RefObject<HTMLInputElement> };\n list: ScrollableListPropsWithRef;\n button: { ref: any };\n popover: { open: boolean; onOpenChange: (open: boolean) => void };\n};\n\nexport const useCombobox = (\n {\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n data: unfilteredData = [],\n defaultValue,\n disabled,\n id: nativeId,\n inline,\n loading: __,\n onChange,\n onClick,\n onKeyDown,\n onSearch,\n readOnly,\n value,\n ...props\n }: Omit<ComboboxProps, 'dialog'>,\n ref: React.Ref<HTMLInputElement>\n): useCombobox => {\n const inputRef = useMergedRef<HTMLInputElement>(ref);\n const buttonRef = React.useRef<HTMLButtonElement>(null);\n const listRef = React.useRef<HTMLUListElement>(null);\n const [open, setOpen] = React.useState(false);\n const listId = React.useMemo(() => uuid(), []);\n const [inputValue, setInputValue] = React.useState<string>(convertToInputValue(value));\n const shouldFilterData = !onSearch && (!inline || (inline && inputValue !== convertToInputValue(value)));\n const flattenedData = useFlattenedData(unfilteredData);\n const data = React.useMemo(\n () => (shouldFilterData ? filterData(flattenedData, inputValue) : flattenedData),\n [shouldFilterData, inputValue, flattenedData]\n );\n // listbox/select change value _with_ the index, but combobox changes on select of an index (click/enter), so we need state\n const [currentIndex, setCurrentIndex] = React.useState<number | undefined>(\n inputValue !== undefined ? getIndexFromValue(data, inputValue) : undefined\n );\n\n const setInputValueByIndex = (index: number | undefined): void => {\n if (index !== undefined) {\n const option = data[index];\n\n if (option && !option.disabled) {\n setInputValueByRef(inputRef.current, option.value, 'focusout');\n }\n }\n };\n\n const setCurrentValue = (index: number | undefined) => {\n if (index === undefined) {\n return;\n }\n\n const option = data[index];\n\n // if the selected option is not already selected, trigger blur event\n if (option.value !== value) {\n setInputValueByIndex(index);\n } else {\n // if the selected option is already selected, refill input with its value\n setInputValue(convertToInputValue(value));\n }\n };\n\n // ensure the external value is synced with the internal value when mounting, e.g. incase a default value was set\n React.useEffect(() => {\n if (defaultValue && !value) {\n setInputValueByIndex(getIndexFromValue(data, defaultValue));\n }\n }, [data]);\n\n // update input value if it changed 'externally', e.g. clicking/entering an item in the listbox, from a modal etc\n React.useEffect(() => {\n if (value !== undefined && value !== inputValue) {\n setInputValue(convertToInputValue(value));\n }\n }, [value]);\n\n React.useEffect(() => {\n if (onSearch) {\n debouncer(() => {\n onSearch(inputValue);\n });\n }\n }, [inputValue]);\n\n // show listbox based on input value\n React.useEffect(() => {\n // don't show the popover if the internal (input) value already is the current value\n // this prevents the popover showing after selecting a value or pressing escape\n const isCurrentValue = value !== undefined && value !== null && inputValue === String(value);\n\n if (inputValue && data.length && !isCurrentValue) {\n setCurrentIndex(0);\n\n if (!open) {\n setOpen(true);\n }\n } else {\n setOpen(false);\n }\n }, [inputValue, data]);\n\n React.useEffect(() => {\n if (open) {\n setCurrentIndex(getIndexFromValue(data, inputValue) || 0);\n } else {\n setCurrentIndex(undefined);\n }\n }, [open]);\n\n // event handlers\n const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>): void => {\n event.persist();\n\n if (event.relatedTarget === listRef.current) {\n event.preventDefault();\n return;\n }\n\n if (onChange && event.target.value !== value) {\n const item = findByValue(flattenedData, event.target.value);\n (event as any).detail = sanitizeItem(item);\n\n const parents = getOptionParents(flattenedData, item?.path);\n\n if (parents !== null && parents.length > 0) {\n (event as any).detail.parents = parents;\n }\n\n onChange(event);\n }\n\n if (props.onBlur) {\n props.onBlur(event);\n }\n };\n\n const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n setInputValue(event.target.value);\n };\n\n const handleInputClick = (event: React.MouseEvent<HTMLInputElement>): void => {\n if (inline || (!open && inputValue && data.length)) {\n setOpen(true);\n }\n\n if (onClick) {\n event.persist();\n onClick(event);\n }\n };\n\n const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n event.persist();\n\n switch (event.key) {\n case 'Backspace': {\n return;\n }\n\n case 'Escape': {\n event.preventDefault();\n setInputValue(convertToInputValue(value));\n setOpen(false);\n return;\n }\n\n case 'Tab':\n case 'Enter': {\n if (event.key !== 'Tab') {\n event.preventDefault();\n }\n\n setCurrentValue(currentIndex);\n setOpen(false);\n return;\n }\n\n case 'ArrowDown':\n if (open) {\n event.preventDefault();\n } else {\n if (!inline && buttonRef.current) {\n buttonRef.current.click();\n }\n }\n break;\n\n case 'ArrowUp':\n case 'Home':\n case 'End': {\n if (open) {\n event.preventDefault();\n }\n break;\n }\n\n default:\n }\n\n // we aren't focused on the list, so manually forward the keydown event to it\n if (listRef.current) {\n listRef.current.dispatchEvent(createCustomKeyboardEvent(event));\n }\n\n if (inline && !open) {\n if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {\n event.preventDefault();\n const initialIndex = event.key === 'ArrowUp' ? data.length - 1 : 0;\n setCurrentIndex(currentIndex !== undefined ? currentIndex : initialIndex);\n setOpen(true);\n }\n }\n\n if (!event.isDefaultPrevented() && onKeyDown) {\n event.persist();\n onKeyDown(event);\n }\n };\n\n const handleListboxChange = (index: number): void => {\n setCurrentIndex(index);\n };\n\n const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>, index: number): void => {\n event.preventDefault();\n setCurrentValue(index);\n setOpen(false);\n };\n\n const combobox = {\n 'aria-expanded': open,\n 'aria-owns': listId,\n 'aria-haspopup': 'listbox' as const,\n role: 'combobox',\n };\n\n const input = {\n ...props,\n 'aria-controls': listId,\n // Indicates that the autocomplete behavior of the text input is to suggest a list of possible values in a popup and that the suggestions\n // are related to the string that is present in the textbox\n 'aria-autocomplete': 'list' as const,\n // Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the input element\n 'aria-activedescendant':\n currentIndex !== undefined && data[currentIndex] ? getId(listId, String(data[currentIndex].value)) : undefined,\n 'aria-labelledby': ariaLabelledBy,\n disabled,\n onBlur: !disabled && !readOnly ? handleInputBlur : undefined,\n onChange: !disabled && !readOnly ? handleInputChange : undefined,\n onClick: !disabled && !readOnly ? handleInputClick : undefined,\n onKeyDown: !disabled && !readOnly ? handleInputKeyDown : undefined,\n readOnly,\n ref: inputRef,\n type: 'text',\n value: inputValue ?? '',\n };\n\n const list: ScrollableListPropsWithRef = {\n 'aria-labelledby': ariaLabelledBy,\n data,\n disabled,\n id: listId,\n onChange: handleListboxChange,\n onClick: handleListboxClick,\n ref: listRef,\n scrollOnFocus: false,\n tabIndex: -1,\n value: currentIndex,\n };\n\n const button = {\n ref: buttonRef,\n };\n\n return {\n combobox,\n input,\n list,\n button,\n popover: {\n open,\n onOpenChange: setOpen,\n //visible: !data.length ? false : open,\n },\n };\n};\n"],"names":["debouncer","debounce","f","convertToInputValue","value","String","useCombobox","ariaLabel","ariaLabelledBy","data","unfilteredData","defaultValue","disabled","id","nativeId","inline","loading","__","onChange","onClick","onKeyDown","onSearch","readOnly","props","ref","inputRef","useMergedRef","buttonRef","React","listRef","open","setOpen","listId","uuid","inputValue","setInputValue","shouldFilterData","flattenedData","useFlattenedData","filterData","currentIndex","setCurrentIndex","undefined","getIndexFromValue","setInputValueByIndex","index","option","setInputValueByRef","current","setCurrentValue","isCurrentValue","length","handleInputBlur","event","persist","relatedTarget","preventDefault","target","item","findByValue","detail","sanitizeItem","parents","getOptionParents","path","onBlur","handleInputChange","handleInputClick","handleInputKeyDown","key","click","dispatchEvent","createCustomKeyboardEvent","initialIndex","isDefaultPrevented","handleListboxChange","handleListboxClick","combobox","role","input","getId","type","list","scrollOnFocus","tabIndex","button","popover","onOpenChange"],"mappings":"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"}
1
+ {"version":3,"file":"useCombobox.js","sources":["../../../../../../../src/components/Combobox/useCombobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { v4 as uuid } from 'uuid';\nimport debounce from 'lodash/debounce';\nimport { ComboboxProps } from './Combobox';\nimport {\n setInputValueByRef,\n getIndexFromValue,\n findByValue,\n useFlattenedData,\n sanitizeItem,\n getOptionParents,\n filterData,\n} from '../Listbox/util';\nimport { createCustomKeyboardEvent } from '../../utils/input';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { getId, ScrollableListItemValue, ScrollableListPropsWithRef } from '../Listbox/ScrollableList';\nimport { InputProps } from '../Input/Input';\n\nconst debouncer = debounce(f => f(), 200);\n\nconst convertToInputValue = (value: ScrollableListItemValue | undefined) => String(value ?? '');\n\ntype useCombobox = React.HTMLAttributes<HTMLDivElement> & {\n combobox: React.HTMLAttributes<HTMLSpanElement>;\n input: Omit<InputProps, 'defaultValue'> & { ref: React.RefObject<HTMLInputElement> };\n list: ScrollableListPropsWithRef;\n button: { ref: any };\n popover: { open: boolean; onOpenChange: (open: boolean) => void };\n};\n\nexport const useCombobox = (\n {\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n data: unfilteredData = [],\n defaultValue,\n disabled,\n id: nativeId,\n inline,\n loading: __,\n onChange,\n onClick,\n onKeyDown,\n onSearch,\n readOnly,\n value,\n ...props\n }: Omit<ComboboxProps, 'dialog'>,\n ref: React.Ref<HTMLInputElement>\n): useCombobox => {\n const inputRef = useMergedRef<HTMLInputElement>(ref);\n const buttonRef = React.useRef<HTMLButtonElement>(null);\n const listRef = React.useRef<HTMLUListElement>(null);\n const [open, setOpen] = React.useState(false);\n const listId = React.useMemo(() => uuid(), []);\n const [inputValue, setInputValue] = React.useState<string>(convertToInputValue(value));\n const shouldFilterData = !onSearch && (!inline || (inline && inputValue !== convertToInputValue(value)));\n const flattenedData = useFlattenedData(unfilteredData);\n const data = React.useMemo(\n () => (shouldFilterData ? filterData(flattenedData, inputValue) : flattenedData),\n [shouldFilterData, inputValue, flattenedData]\n );\n // listbox/select change value _with_ the index, but combobox changes on select of an index (click/enter), so we need state\n const [currentIndex, setCurrentIndex] = React.useState<number | undefined>(\n inputValue !== undefined ? getIndexFromValue(data, inputValue) : undefined\n );\n\n const setInputValueByIndex = (index: number | undefined): void => {\n if (index !== undefined) {\n const option = data[index];\n\n if (option && !option.disabled) {\n setInputValueByRef(inputRef.current, option.value, 'focusout');\n }\n }\n };\n\n const setCurrentValue = (index: number | undefined) => {\n if (index === undefined) {\n return;\n }\n\n const option = data[index];\n\n // if the selected option is not already selected, trigger blur event\n if (option.value !== value) {\n setInputValueByIndex(index);\n } else {\n // if the selected option is already selected, refill input with its value\n setInputValue(convertToInputValue(value));\n }\n };\n\n // ensure the external value is synced with the internal value when mounting, e.g. incase a default value was set\n React.useEffect(() => {\n if (defaultValue && !value) {\n setInputValueByIndex(getIndexFromValue(data, defaultValue));\n }\n }, [data]);\n\n // update input value if it changed 'externally', e.g. clicking/entering an item in the listbox, from a modal etc\n React.useEffect(() => {\n if (value !== undefined && value !== inputValue) {\n setInputValue(convertToInputValue(value));\n }\n }, [value]);\n\n React.useEffect(() => {\n if (onSearch) {\n debouncer(() => {\n onSearch(inputValue);\n });\n }\n }, [inputValue]);\n\n // show listbox based on input value\n React.useEffect(() => {\n // don't show the popover if the internal (input) value already is the current value\n // this prevents the popover showing after selecting a value or pressing escape\n const isCurrentValue = value !== undefined && value !== null && inputValue === String(value);\n\n if (inputValue && data.length && !isCurrentValue) {\n setCurrentIndex(0);\n\n if (!open) {\n setOpen(true);\n }\n } else {\n setOpen(false);\n }\n }, [inputValue, data]);\n\n React.useEffect(() => {\n if (open) {\n setCurrentIndex(getIndexFromValue(data, inputValue) || 0);\n } else {\n setCurrentIndex(undefined);\n }\n }, [open]);\n\n // event handlers\n const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>): void => {\n event.persist();\n\n if (listRef.current && event.relatedTarget === listRef.current) {\n event.preventDefault();\n return;\n }\n\n if (onChange && event.target.value !== value) {\n const item = findByValue(flattenedData, event.target.value);\n (event as any).detail = sanitizeItem(item);\n\n const parents = getOptionParents(flattenedData, item?.path);\n\n if (parents !== null && parents.length > 0) {\n (event as any).detail.parents = parents;\n }\n\n onChange(event);\n }\n\n if (props.onBlur) {\n props.onBlur(event);\n }\n };\n\n const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n setInputValue(event.target.value);\n };\n\n const handleInputClick = (event: React.MouseEvent<HTMLInputElement>): void => {\n if (inline || (!open && inputValue && data.length)) {\n setOpen(true);\n }\n\n if (onClick) {\n event.persist();\n onClick(event);\n }\n };\n\n const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n event.persist();\n\n switch (event.key) {\n case 'Backspace': {\n return;\n }\n\n case 'Escape': {\n event.preventDefault();\n setInputValue(convertToInputValue(value));\n setOpen(false);\n return;\n }\n\n case 'Tab':\n case 'Enter': {\n if (event.key !== 'Tab') {\n event.preventDefault();\n }\n\n setCurrentValue(currentIndex);\n setOpen(false);\n return;\n }\n\n case 'ArrowDown':\n if (open) {\n event.preventDefault();\n } else {\n if (!inline && buttonRef.current) {\n buttonRef.current.click();\n }\n }\n break;\n\n case 'ArrowUp':\n case 'Home':\n case 'End': {\n if (open) {\n event.preventDefault();\n }\n break;\n }\n\n default:\n }\n\n // we aren't focused on the list, so manually forward the keydown event to it\n if (listRef.current) {\n listRef.current.dispatchEvent(createCustomKeyboardEvent(event));\n }\n\n if (inline && !open) {\n if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {\n event.preventDefault();\n const initialIndex = event.key === 'ArrowUp' ? data.length - 1 : 0;\n setCurrentIndex(currentIndex !== undefined ? currentIndex : initialIndex);\n setOpen(true);\n }\n }\n\n if (!event.isDefaultPrevented() && onKeyDown) {\n event.persist();\n onKeyDown(event);\n }\n };\n\n const handleListboxChange = (index: number): void => {\n setCurrentIndex(index);\n };\n\n const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>, index: number): void => {\n event.preventDefault();\n setCurrentValue(index);\n setOpen(false);\n };\n\n const combobox = {\n 'aria-expanded': open,\n 'aria-owns': listId,\n 'aria-haspopup': 'listbox' as const,\n role: 'combobox',\n };\n\n const input = {\n ...props,\n 'aria-controls': listId,\n // Indicates that the autocomplete behavior of the text input is to suggest a list of possible values in a popup and that the suggestions\n // are related to the string that is present in the textbox\n 'aria-autocomplete': 'list' as const,\n // Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the input element\n 'aria-activedescendant':\n currentIndex !== undefined && data[currentIndex] ? getId(listId, String(data[currentIndex].value)) : undefined,\n 'aria-labelledby': ariaLabelledBy,\n disabled,\n onBlur: !disabled && !readOnly ? handleInputBlur : undefined,\n onChange: !disabled && !readOnly ? handleInputChange : undefined,\n onClick: !disabled && !readOnly ? handleInputClick : undefined,\n onKeyDown: !disabled && !readOnly ? handleInputKeyDown : undefined,\n readOnly,\n ref: inputRef,\n type: 'text',\n value: inputValue ?? '',\n };\n\n const list: ScrollableListPropsWithRef = {\n 'aria-labelledby': ariaLabelledBy,\n data,\n disabled,\n id: listId,\n onChange: handleListboxChange,\n onClick: handleListboxClick,\n ref: listRef,\n scrollOnFocus: false,\n tabIndex: -1,\n value: currentIndex,\n };\n\n const button = {\n ref: buttonRef,\n };\n\n return {\n combobox,\n input,\n list,\n button,\n popover: {\n open,\n onOpenChange: setOpen,\n //visible: !data.length ? false : open,\n },\n };\n};\n"],"names":["debouncer","debounce","f","convertToInputValue","value","String","useCombobox","ariaLabel","ariaLabelledBy","data","unfilteredData","defaultValue","disabled","id","nativeId","inline","loading","__","onChange","onClick","onKeyDown","onSearch","readOnly","props","ref","inputRef","useMergedRef","buttonRef","React","listRef","open","setOpen","listId","uuid","inputValue","setInputValue","shouldFilterData","flattenedData","useFlattenedData","filterData","currentIndex","setCurrentIndex","undefined","getIndexFromValue","setInputValueByIndex","index","option","setInputValueByRef","current","setCurrentValue","isCurrentValue","length","handleInputBlur","event","persist","relatedTarget","preventDefault","target","item","findByValue","detail","sanitizeItem","parents","getOptionParents","path","onBlur","handleInputChange","handleInputClick","handleInputKeyDown","key","click","dispatchEvent","createCustomKeyboardEvent","initialIndex","isDefaultPrevented","handleListboxChange","handleListboxClick","combobox","role","input","getId","type","list","scrollOnFocus","tabIndex","button","popover","onOpenChange"],"mappings":"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"}
@@ -248,7 +248,10 @@ const DrawerContent = /*#__PURE__*/React__default.forwardRef(function Content(pr
248
248
  }, dragHandleProps, {
249
249
  "data-testid": "resize-handler",
250
250
  ref: dragHandlerRef
251
- })), showCloseButton ? /*#__PURE__*/React__default.createElement(Close, null, /*#__PURE__*/React__default.createElement(IconButton, {
251
+ }), dragging ? /*#__PURE__*/React__default.createElement("div", {
252
+ "data-testid": "resize-hit-area",
253
+ className: "fixed bottom-0 left-0 right-0 top-0"
254
+ }) : null), showCloseButton ? /*#__PURE__*/React__default.createElement(Close, null, /*#__PURE__*/React__default.createElement(IconButton, {
252
255
  appearance: "discrete",
253
256
  "aria-label": texts.drawer.close,
254
257
  className: "absolute right-0 top-0 mr-2 mt-4",
@@ -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 { 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(\n 'grow flex flex-col',\n {\n 'overflow-y-hidden': isScrollable,\n 'p-4': !isScrollable,\n },\n className\n );\n return (\n <div {...otherProps} className={cName} ref={ref}>\n {isScrollable ? <ScrollArea className=\"w-full gap-y-0.5 p-4\">{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 {output}\n <div className={dragHandlerClassName} {...dragHandleProps} data-testid=\"resize-handler\" ref={dragHandlerRef} />\n {showCloseButton ? (\n <Close>\n <IconButton\n appearance=\"discrete\"\n aria-label={texts.drawer.close}\n className=\"absolute right-0 top-0 mr-2 mt-4\"\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","_ref$current","current","contains","target","preventDefault","containerWidth","setContainerWidth","useState","dragHandlerRef","useRef","position","dragging","handleProps","dragHandleProps","resetPosition","useDraggable","contentRef","useEffect","x","_contentRef$current","offsetWidth","resizedWidth","Math","min","max","output","content","IconButton","appearance","drawer","icon","styleProp","width","onEscapeKeyDown","onInteractOutside","onCloseAutoFocus"],"mappings":"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"}
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(\n 'grow flex flex-col',\n {\n 'overflow-y-hidden': isScrollable,\n 'p-4': !isScrollable,\n },\n className\n );\n return (\n <div {...otherProps} className={cName} ref={ref}>\n {isScrollable ? <ScrollArea className=\"w-full gap-y-0.5 p-4\">{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 {output}\n <div className={dragHandlerClassName} {...dragHandleProps} data-testid=\"resize-handler\" ref={dragHandlerRef}>\n {dragging ? <div data-testid=\"resize-hit-area\" className=\"fixed bottom-0 left-0 right-0 top-0\" /> : null}\n </div>\n {showCloseButton ? (\n <Close>\n <IconButton\n appearance=\"discrete\"\n aria-label={texts.drawer.close}\n className=\"absolute right-0 top-0 mr-2 mt-4\"\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","_ref$current","current","contains","target","preventDefault","containerWidth","setContainerWidth","useState","dragHandlerRef","useRef","position","dragging","handleProps","dragHandleProps","resetPosition","useDraggable","contentRef","useEffect","x","_contentRef$current","offsetWidth","resizedWidth","Math","min","max","output","content","IconButton","appearance","drawer","icon","styleProp","width","onEscapeKeyDown","onInteractOutside","onCloseAutoFocus"],"mappings":"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"}
@@ -283,6 +283,7 @@ const defaultLocalisationTexts = {
283
283
  condition: 'Condition',
284
284
  value: 'Value'
285
285
  },
286
+ hiddenColumn: 'Hidden column',
286
287
  tooltip: 'Apply filters',
287
288
  total: 'Viewing [CURRENT] of [TOTAL]'
288
289
  },