@economic/taco 2.9.2 → 2.10.1

package/dist/components/Button/Button.d.ts

@@ -44,7 +44,7 @@ export declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAtt
     target?: "_self" | "_blank" | "_parent" | "_top" | undefined;
 } & {
     /** Appearance will change the style of the button */
-    appearance?: "default" | "primary" | "danger" | "ghost" | "discrete" | undefined;
+    appearance?: "default" | "primary" | "danger" | "ghost" | "discrete" | "transparent" | undefined;
     /**
      * Dialog component associated with the button, clicking the button will open the dialog.
      * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of

package/dist/components/IconButton/IconButton.d.ts

@@ -34,7 +34,7 @@ export declare type IconButtonProps = Omit<ButtonPrimitive.ButtonProps, 'childre
 };
 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"> & {
     /** Appearance will change the style of the button */
-    appearance?: "default" | "primary" | "danger" | "ghost" | "discrete" | undefined;
+    appearance?: "default" | "primary" | "danger" | "ghost" | "discrete" | "transparent" | undefined;
     /**
      * Dialog component associated with the button, clicking the button will open the dialog.
      * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of
@@ -63,7 +63,7 @@ export declare const Base: React.ForwardRefExoticComponent<Pick<ButtonPrimitive.
 } & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
 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"> & {
     /** Appearance will change the style of the button */
-    appearance?: "default" | "primary" | "danger" | "ghost" | "discrete" | undefined;
+    appearance?: "default" | "primary" | "danger" | "ghost" | "discrete" | "transparent" | undefined;
     /**
      * Dialog component associated with the button, clicking the button will open the dialog.
      * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of

package/dist/components/Provider/Localization.d.ts

@@ -269,6 +269,12 @@ export declare const defaultLocalisationTexts: {
                 gotoRow: string;
                 hideColumn: string;
                 unfreezeColumns: string;
+                sorting: string;
+                sortingOrder: {
+                    ascending: string;
+                    descending: string;
+                    unsorted: string;
+                };
             };
             resize: {
                 tooltip: string;

package/dist/components/Table3/components/columns/header/Header.d.ts

@@ -1,6 +1,9 @@
 /// <reference types="react" />
 import { ColumnMeta, HeaderContext } from '@tanstack/react-table';
 import { Table3ColumnAlignment, Table3SortDirection, TableStrategy } from '../../../types';
+export declare const SORT_DIRECTION: Record<string, Table3SortDirection>;
+export declare type HeaderSortDirection = Table3SortDirection | false;
+export declare type SortToggleHandler = (sortDirection: HeaderSortDirection) => void;
 export declare type HeaderProps<TType = unknown> = HeaderContext<TType, unknown> & {
     children?: string | JSX.Element;
 };
@@ -15,6 +18,7 @@ export declare type MemoedHeaderProps<TType = unknown> = Omit<HeaderProps<TType>
     id: string;
     index: number;
     isFrozen: boolean;
+    isPrinting: boolean;
     isResizing: boolean;
     length: number;
     meta: ColumnMeta<TType, unknown>;
@@ -22,6 +26,7 @@ export declare type MemoedHeaderProps<TType = unknown> = Omit<HeaderProps<TType>
     onHide: (event: unknown) => void;
     onResize: (event: unknown) => void;
     onSort: (event: unknown) => void;
+    onSortToggle: SortToggleHandler;
     scrollToIndex: TableStrategy['scrollToIndex'];
-    sortDirection: false | Table3SortDirection;
+    sortDirection: HeaderSortDirection;
 };

package/dist/components/Table3/components/columns/header/Menu.d.ts

@@ -1,16 +1,20 @@
 import React from 'react';
 import { Header as RTHeader, Table as RTable } from '@tanstack/react-table';
 import { Table3ColumnHeaderMenu, TableStrategy } from '../../../types';
+import { HeaderSortDirection, SortToggleHandler } from './Header';
 export declare function isGotoAvailable<TType = unknown>(table: RTable<TType>, header: RTHeader<TType, unknown>): boolean;
 export declare function isMenuAvailable<TType = unknown>(table: RTable<TType>, header: RTHeader<TType, unknown>): boolean;
 export declare type MenuProps<TType = unknown> = React.ButtonHTMLAttributes<HTMLButtonElement> & {
     canFreeze: boolean;
     canHide: boolean;
+    canSort: boolean;
     index: number;
     menu?: Table3ColumnHeaderMenu;
     onGoto?: (query: string) => Promise<number>;
     onHide: (event: unknown) => void;
+    onSortToggle: SortToggleHandler;
     scrollToIndex: TableStrategy['scrollToIndex'];
+    sortDirection: HeaderSortDirection;
     table: RTable<TType>;
 };
 export declare function Menu<TType = unknown>(props: MenuProps<TType>): JSX.Element;

package/dist/components/Table3/hooks/features/useCurrentRow.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
-import { TableStrategy } from '../../types';
+import { Table3Ref, TableStrategy } from '../../types';
 declare type CurrentRowHandlerCallback = TableStrategy['scrollToIndex'];
-export declare function useCurrentRow(defaultCurrentRowIndex?: number | undefined): {
-    currentRowIndex: number;
-    setCurrentRowIndex: React.Dispatch<React.SetStateAction<number>>;
-    handleKeyDown: (event: KeyboardEvent, length: number, scrollToIndex: CurrentRowHandlerCallback) => void;
+export declare function useCurrentRow(defaultCurrentRowIndex: number | undefined): {
+    currentRowIndex: number | undefined;
+    setCurrentRowIndex: React.Dispatch<React.SetStateAction<number | undefined>>;
+    handleFocus: (event: React.FocusEvent, length: number, scrollToIndex: CurrentRowHandlerCallback) => void;
+    handleKeyDown: (event: KeyboardEvent, length: number, scrollToIndex: CurrentRowHandlerCallback, isEditing: boolean, tableRef: React.RefObject<Table3Ref>) => void;
 };
 export {};

package/dist/components/Table3/hooks/useCssVars.d.ts

@@ -1,6 +1,7 @@
 import { Table3FontSize, Table3RowHeight } from '../types';
 export declare const useCssVars: (height: Table3RowHeight, fontSize: Table3FontSize) => {
     style: {
-        '--table3-row-padding': string;
+        '--table3-cell-padding-x': string;
+        '--table3-cell-padding-y': string;
     };
 };

package/dist/components/Table3/hooks/useTable.d.ts

@@ -25,6 +25,7 @@ declare module '@tanstack/table-core' {
         enableFooter: boolean;
         fontSize: ReturnType<typeof useFontSize>;
         hoverState: ReturnType<typeof usePauseHoverState>;
+        isPrinting: boolean;
         isUsingServer: boolean;
         printing: ReturnType<typeof usePrinting>;
         rowActions: ReturnType<typeof useRowActions>;

package/dist/components/Table3/types.d.ts

@@ -35,6 +35,7 @@ export declare type Table3ColumnProps<TType = unknown> = ValueOf<{
         enableFiltering?: boolean;
         enableHiding?: boolean;
         enableOrdering?: boolean;
+        enablePrinting?: boolean;
         enableResizing?: boolean;
         enableSearch?: boolean;
         enableSorting?: boolean;
@@ -206,6 +207,12 @@ export declare type Table3Texts = {
             gotoRow: string;
             hideColumn: string;
             unfreezeColumns: string;
+            sorting: string;
+            sortingOrder: {
+                ascending: string;
+                descending: string;
+                unsorted: string;
+            };
         };
         resize: {
             tooltip: string;

package/dist/esm/index.css

@@ -647,7 +647,7 @@
 
 [role='cell']:not([data-highlighted='true']),
 [role='columnheader'] {
-    @apply flex px-4;
+    @apply flex;
 }
 
 /* In cases where row height might differ from default one (example: textarea without truncate or changing of font size or row height),
@@ -696,13 +696,20 @@
         @apply bg-grey-100;
     }
 [role='row']:not([data-selected='true']):not([data-error='true'])[data-current='true'] [role='cell'] {
-        --table3-row-actions-shadow: theme(colors.grey.200);
-        @apply bg-grey-200;
+        --table3-row-actions-shadow: theme(colors.grey.100);
+        @apply bg-grey-100;
     }
 [role='row']:not([data-selected='true']):not([data-error='true'])[data-current='true']:hover [role='cell'] {
         --table3-row-actions-shadow: theme(colors.grey.100);
         @apply bg-grey-100;
     }
+/* normal rows when focus is inside the table */
+[data-taco='table2']:focus-within
+    [role='row'][data-current='true']:not([data-selected='true']):not([data-error='true'])
+    [role='cell'] {
+    --table3-row-actions-shadow: theme(colors.grey.200);
+    @apply bg-grey-200;
+}
 /* normal rows when hover is paused */
 [data-pause-hover='true'] [role='row']:not([data-selected='true']):not([data-error='true']):hover:not([data-current='true']) [role='cell'] {
         --table3-row-actions-shadow: theme(colors.white);
@@ -721,14 +728,17 @@
         --table3-row-actions-shadow: #d6e3f6;
         @apply bg-[#D6E3F6];
     }
-[role='row'][data-selected='true']:not([data-error='true'])[data-current='true'] [role='cell'] {
-        --table3-row-actions-shadow: #ccd8eb;
-        @apply bg-[#CCD8EB];
-    }
-[role='row'][data-selected='true']:not([data-error='true'])[data-current='true']:hover [role='cell'] {
+[role='row'][data-selected='true']:not([data-error='true'])[data-current='true']:hover [role='cell'],
+    
+    [role='row'][data-selected='true']:not([data-error='true'])[data-current='true'] [role='cell'] {
         --table3-row-actions-shadow: #d6e3f6;
         @apply bg-[#D6E3F6];
     }
+/* selected rows when focus is inside the table */
+[data-taco='table2']:focus-within [role='row'][data-current='true'][data-selected='true']:not([data-error='true']) [role='cell'] {
+    --table3-row-actions-shadow: #ccd8eb;
+    @apply bg-[#CCD8EB];
+}
 /* selected rows when hover is paused */
 [data-pause-hover='true'] [role='row'][data-selected='true']:not([data-error='true']):hover:not([data-current='true']) [role='cell'] {
         --table3-row-actions-shadow: theme(colors.blue.100);
@@ -755,6 +765,11 @@
         --table3-row-actions-shadow: #ffe4de;
         @apply bg-[#FFE4DE];
     }
+/* error rows when focus is inside the table */
+[data-taco='table2']:focus-within [role='row'][data-current='true'][data-error='true'] [role='cell'] {
+    --table3-row-actions-shadow: theme(colors.red.100);
+    @apply bg-red-100;
+}
 /* error rows when hover is paused */
 [data-pause-hover='true'] [role='row'][data-error='true']:hover:not([data-current='true']) [role='cell'] {
         --table3-row-actions-shadow: #ffede9;
@@ -777,17 +792,27 @@
 /* cell component overrides */
 
 /* small font size */
+[data-font-size='small'] [role='cell'] > [data-taco='button'],
+[data-font-size='small'] [role='cell'] > [data-taco='icon-button'] {
+    @apply !-my-2;
+}
+
+[data-font-size='small'] [role='cell'] > [data-taco='icon'] {
+    @apply !-my-[3px];
+}
+
 [data-font-size='small'] [role='cell'] [data-taco='badge'],
-[data-font-size='small'] [role='cell'] [data-taco='badge-icon'],
-[data-font-size='small'] [role='cell'] [data-taco='icon'] {
+[data-font-size='small'] [role='cell'] [data-taco='badge-icon'] {
     @apply !-my-0.5 !text-xs;
 }
 
-[data-font-size='small'] [role='cell'] [data-taco='tag'],
-[data-font-size='small'] [role='cell'] [data-taco='Select2'],
+[data-font-size='small'] [role='cell'] [data-taco='tag'] {
+    @apply !-my-1;
+}
+
 [data-font-size='small'] [role='cell'] [data-taco='input-container'],
 [data-font-size='small'] [role='cell'] [data-taco='Select2'] {
-    @apply !-my-1;
+    @apply !-my-[3px];
 }
 
 [data-font-size='small'] [role='cell'] [data-taco='input'],
@@ -816,30 +841,70 @@
     @apply !my-0;
 }
 
+[data-font-size='small'] [role='cell'][data-editable] {
+    @apply px-[calc(var(--table3-cell-padding-x)_-_7px)];
+}
+
+[data-font-size='small'] [role='cell'][data-editable] [data-taco='checkbox'],
+[data-font-size='small'] [role='cell'][data-editable] [data-taco='checkbox-container'],
+[data-font-size='small'] [role='cell'][data-editable] [data-taco='switch'],
+[data-font-size='small'] [role='cell'][data-editable] [data-taco='switch-container'] {
+    @apply !mx-[calc(var(--table3-cell-padding-x)_-_1px)] !-mt-px;
+}
+
 /* medium font size */
+[data-font-size='medium'] [role='cell'] > [data-taco='button'],
+[data-font-size='medium'] [role='cell'] > [data-taco='icon-button'] {
+    @apply !-my-1.5;
+}
+
+[data-font-size='medium'] [role='cell'] > [data-taco='icon'] {
+    @apply !-my-0.5;
+}
+
 [data-font-size='medium'] [role='cell'] [data-taco='tag'] {
     @apply !-my-0.5;
 }
 
 [data-font-size='medium'] [role='cell'] [data-taco='Select2'],
 [data-font-size='medium'] [role='cell'] [data-taco='input-container'] {
-    @apply !-my-1.5;
+    @apply !-my-[5px];
+}
+
+[data-font-size='medium'] [role='cell'][data-editable] {
+    @apply px-[calc(var(--table3-cell-padding-x)_-_9px)];
+}
+
+[data-font-size='medium'] [role='cell'][data-editable] [data-taco='checkbox'],
+[data-font-size='medium'] [role='cell'][data-editable] [data-taco='checkbox-container'],
+[data-font-size='medium'] [role='cell'][data-editable] [data-taco='switch'],
+[data-font-size='medium'] [role='cell'][data-editable] [data-taco='switch-container'] {
+    @apply !mx-[calc(var(--table3-cell-padding-x)_-_3px)] !mt-px;
 }
 
 /* large font size */
+[data-font-size='large'] [role='cell'] > [data-taco='button'],
+[data-font-size='large'] [role='cell'] > [data-taco='icon-button'] {
+    @apply !-my-1;
+}
+
+[data-font-size='large'] [role='cell'] > [data-taco='icon'] {
+    @apply !-my-0.5;
+}
+
 [data-font-size='large'] [role='cell'] [data-taco='tag'] {
     @apply !-my-0.5;
 }
 
 [data-font-size='large'] [role='cell'] [data-taco='Select2'],
 [data-font-size='large'] [role='cell'] [data-taco='input-container'] {
-    @apply !-my-2;
+    @apply !-my-[7.5px];
 }
 
 [data-font-size='large'] [role='cell'] [data-taco='input'],
 [data-font-size='large'] [role='cell'] [data-taco='Select2'],
 [data-font-size='large'] [role='cell'] [data-taco='textarea'] {
-    @apply h-10 px-2.5 text-lg;
+    @apply h-10 px-2.5 text-base;
 }
 
 [data-font-size='large'] [role='cell'] [data-taco='input-container'] [data-affix-type='postfix'] button {
@@ -849,3 +914,14 @@
 [data-font-size='large'] [role='cell'] [data-taco='input-container'] [data-affix-type='postfix'] [data-taco='icon'] {
     @apply !h-6 !w-6;
 }
+
+[data-font-size='large'] [role='cell'][data-editable] {
+    @apply px-[calc(var(--table3-cell-padding-x)_-_11px)];
+}
+
+[data-font-size='large'] [role='cell'][data-editable] [data-taco='checkbox'],
+[data-font-size='large'] [role='cell'][data-editable] [data-taco='checkbox-container'],
+[data-font-size='large'] [role='cell'][data-editable] [data-taco='switch'],
+[data-font-size='large'] [role='cell'][data-editable] [data-taco='switch-container'] {
+    @apply !mx-[calc(var(--table3-cell-padding-x)_-_5px)] !mt-px;
+}

package/dist/esm/packages/taco/src/components/Button/util.js

@@ -16,10 +16,14 @@ const getAppearanceClasses = (value, icon = false) => {
     case 'discrete':
       {
         if (icon) {
-          return `bg-transparent text-black enabled:hover:bg-grey-200/80 disabled:text-black/30`;
+          return `bg-transparent text-black enabled:hover:bg-[#000]/[0.08] disabled:text-black/30`;
         }
         return `bg-transparent text-blue-500 enabled:hover:text-blue-700 disabled:text-blue-500/50`;
       }
+    case 'transparent':
+      {
+        return `bg-transparent text-black enabled:hover:text-black enabled:hover:bg-[#000]/[0.08] disabled:text-black/30`;
+      }
     default:
       return `wcag-grey-200 enabled:hover:wcag-grey-300 disabled:bg-grey-200/50 disabled:text-black/30`;
   }

package/dist/esm/packages/taco/src/components/Button/util.js.map

@@ -1 +1 @@
-{"version":3,"file":"util.js","sources":["../../../../../../../src/components/Button/util.tsx"],"sourcesContent":["import React from 'react';\nimport { Appearance } from '../../types';\nimport * as ButtonPrimitive from '../../primitives/Button';\nimport { Tooltip } from '../Tooltip/Tooltip';\n\nexport const getButtonClasses = () => {\n    return 'flex-shrink-0 min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] gap-1 h-max leading-5 inline-flex items-center justify-center focus-visible:yt-focus disabled:cursor-not-allowed';\n};\n\nexport const getAppearanceClasses = (value: Appearance | undefined, icon = false): string => {\n    switch (value) {\n        case 'primary':\n            return `wcag-blue-500 enabled:hover:wcag-blue-700 enabled:hover:active:wcag-blue-500 disabled:bg-blue-500/50`;\n\n        case 'danger':\n            return `wcag-red-500 enabled:hover:wcag-red-700 enabled:hover:active:wcag-red-500 disabled:bg-red-500/50`;\n\n        case 'ghost':\n            return `bg-white border border-blue-500 text-blue-500 enabled:hover:bg-blue-100 enabled:hover:text-blue-700 disabled:border-blue-500/50 disabled:text-blue-500/50`;\n\n        case 'discrete': {\n            if (icon) {\n                return `bg-transparent text-black enabled:hover:bg-grey-200/80 disabled:text-black/30`;\n            }\n\n            return `bg-transparent text-blue-500 enabled:hover:text-blue-700 disabled:text-blue-500/50`;\n        }\n\n        default:\n            return `wcag-grey-200 enabled:hover:wcag-grey-300 disabled:bg-grey-200/50 disabled:text-black/30`;\n    }\n};\n\nexport const createButtonWithTooltip = (\n    props: any,\n    className: string,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n): JSX.Element => {\n    const { tooltip, ...buttonProps } = props;\n    const button = <ButtonPrimitive.Button {...buttonProps} className={className} ref={ref} />;\n\n    if (tooltip) {\n        return <Tooltip title={tooltip}>{button}</Tooltip>;\n    }\n\n    return button;\n};\n\nexport const createButtonWithOverlays = (props: any, buttonBase: JSX.Element) => {\n    const { dialog, drawer, hanger, menu, popover } = props;\n    let button = buttonBase;\n\n    if (typeof dialog === 'function') {\n        button = dialog({ trigger: button });\n    } else if (typeof drawer === 'function') {\n        button = drawer({ trigger: button });\n    } else if (typeof menu === 'function') {\n        button = menu({ trigger: button });\n    } else if (typeof popover === 'function') {\n        button = popover({ trigger: button });\n    }\n\n    if (typeof hanger === 'function') {\n        button = hanger({ anchor: button });\n    }\n\n    return button;\n};\n"],"names":["getButtonClasses","getAppearanceClasses","value","icon","createButtonWithTooltip","props","className","ref","tooltip","buttonProps","button","React","ButtonPrimitive","Tooltip","title","createButtonWithOverlays","buttonBase","dialog","drawer","hanger","menu","popover","trigger","anchor"],"mappings":";;;;MAKaA,gBAAgB,GAAGA;EAC5B,OAAO,kLAAkL;AAC7L;MAEaC,oBAAoB,GAAGA,CAACC,KAA6B,EAAEC,IAAI,GAAG,KAAK;EAC5E,QAAQD,KAAK;IACT,KAAK,SAAS;MACV,6GAA6G;IAEjH,KAAK,QAAQ;MACT,yGAAyG;IAE7G,KAAK,OAAO;MACR,kKAAkK;IAEtK,KAAK,UAAU;MAAE;QACb,IAAIC,IAAI,EAAE;UACN,sFAAsF;;QAG1F,2FAA2F;;IAG/F;MACI,iGAAiG;;AAE7G;MAEaC,uBAAuB,GAAGA,CACnCC,KAAU,EACVC,SAAiB,EACjBC,GAAqD;EAErD,MAAM;IAAEC,OAAO;IAAE,GAAGC;GAAa,GAAGJ,KAAK;EACzC,MAAMK,MAAM,gBAAGC,6BAACC,MAAsB,oBAAKH,WAAW;IAAEH,SAAS,EAAEA,SAAS;IAAEC,GAAG,EAAEA;KAAO;EAE1F,IAAIC,OAAO,EAAE;IACT,oBAAOG,6BAACE,OAAO;MAACC,KAAK,EAAEN;OAAUE,MAAM,CAAW;;EAGtD,OAAOA,MAAM;AACjB;MAEaK,wBAAwB,GAAGA,CAACV,KAAU,EAAEW,UAAuB;EACxE,MAAM;IAAEC,MAAM;IAAEC,MAAM;IAAEC,MAAM;IAAEC,IAAI;IAAEC;GAAS,GAAGhB,KAAK;EACvD,IAAIK,MAAM,GAAGM,UAAU;EAEvB,IAAI,OAAOC,MAAM,KAAK,UAAU,EAAE;IAC9BP,MAAM,GAAGO,MAAM,CAAC;MAAEK,OAAO,EAAEZ;KAAQ,CAAC;GACvC,MAAM,IAAI,OAAOQ,MAAM,KAAK,UAAU,EAAE;IACrCR,MAAM,GAAGQ,MAAM,CAAC;MAAEI,OAAO,EAAEZ;KAAQ,CAAC;GACvC,MAAM,IAAI,OAAOU,IAAI,KAAK,UAAU,EAAE;IACnCV,MAAM,GAAGU,IAAI,CAAC;MAAEE,OAAO,EAAEZ;KAAQ,CAAC;GACrC,MAAM,IAAI,OAAOW,OAAO,KAAK,UAAU,EAAE;IACtCX,MAAM,GAAGW,OAAO,CAAC;MAAEC,OAAO,EAAEZ;KAAQ,CAAC;;EAGzC,IAAI,OAAOS,MAAM,KAAK,UAAU,EAAE;IAC9BT,MAAM,GAAGS,MAAM,CAAC;MAAEI,MAAM,EAAEb;KAAQ,CAAC;;EAGvC,OAAOA,MAAM;AACjB;;;;"}
+{"version":3,"file":"util.js","sources":["../../../../../../../src/components/Button/util.tsx"],"sourcesContent":["import React from 'react';\nimport { Appearance } from '../../types';\nimport * as ButtonPrimitive from '../../primitives/Button';\nimport { Tooltip } from '../Tooltip/Tooltip';\n\nexport const getButtonClasses = () => {\n    return 'flex-shrink-0 min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] gap-1 h-max leading-5 inline-flex items-center justify-center focus-visible:yt-focus disabled:cursor-not-allowed';\n};\n\nexport const getAppearanceClasses = (value: Appearance | undefined, icon = false): string => {\n    switch (value) {\n        case 'primary':\n            return `wcag-blue-500 enabled:hover:wcag-blue-700 enabled:hover:active:wcag-blue-500 disabled:bg-blue-500/50`;\n\n        case 'danger':\n            return `wcag-red-500 enabled:hover:wcag-red-700 enabled:hover:active:wcag-red-500 disabled:bg-red-500/50`;\n\n        case 'ghost':\n            return `bg-white border border-blue-500 text-blue-500 enabled:hover:bg-blue-100 enabled:hover:text-blue-700 disabled:border-blue-500/50 disabled:text-blue-500/50`;\n\n        case 'discrete': {\n            if (icon) {\n                return `bg-transparent text-black enabled:hover:bg-[#000]/[0.08] disabled:text-black/30`;\n            }\n\n            return `bg-transparent text-blue-500 enabled:hover:text-blue-700 disabled:text-blue-500/50`;\n        }\n\n        case 'transparent': {\n            return `bg-transparent text-black enabled:hover:text-black enabled:hover:bg-[#000]/[0.08] disabled:text-black/30`;\n        }\n\n        default:\n            return `wcag-grey-200 enabled:hover:wcag-grey-300 disabled:bg-grey-200/50 disabled:text-black/30`;\n    }\n};\n\nexport const createButtonWithTooltip = (\n    props: any,\n    className: string,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n): JSX.Element => {\n    const { tooltip, ...buttonProps } = props;\n    const button = <ButtonPrimitive.Button {...buttonProps} className={className} ref={ref} />;\n\n    if (tooltip) {\n        return <Tooltip title={tooltip}>{button}</Tooltip>;\n    }\n\n    return button;\n};\n\nexport const createButtonWithOverlays = (props: any, buttonBase: JSX.Element) => {\n    const { dialog, drawer, hanger, menu, popover } = props;\n    let button = buttonBase;\n\n    if (typeof dialog === 'function') {\n        button = dialog({ trigger: button });\n    } else if (typeof drawer === 'function') {\n        button = drawer({ trigger: button });\n    } else if (typeof menu === 'function') {\n        button = menu({ trigger: button });\n    } else if (typeof popover === 'function') {\n        button = popover({ trigger: button });\n    }\n\n    if (typeof hanger === 'function') {\n        button = hanger({ anchor: button });\n    }\n\n    return button;\n};\n"],"names":["getButtonClasses","getAppearanceClasses","value","icon","createButtonWithTooltip","props","className","ref","tooltip","buttonProps","button","React","ButtonPrimitive","Tooltip","title","createButtonWithOverlays","buttonBase","dialog","drawer","hanger","menu","popover","trigger","anchor"],"mappings":";;;;MAKaA,gBAAgB,GAAGA;EAC5B,OAAO,kLAAkL;AAC7L;MAEaC,oBAAoB,GAAGA,CAACC,KAA6B,EAAEC,IAAI,GAAG,KAAK;EAC5E,QAAQD,KAAK;IACT,KAAK,SAAS;MACV,6GAA6G;IAEjH,KAAK,QAAQ;MACT,yGAAyG;IAE7G,KAAK,OAAO;MACR,kKAAkK;IAEtK,KAAK,UAAU;MAAE;QACb,IAAIC,IAAI,EAAE;UACN,wFAAwF;;QAG5F,2FAA2F;;IAG/F,KAAK,aAAa;MAAE;QAChB,iHAAiH;;IAGrH;MACI,iGAAiG;;AAE7G;MAEaC,uBAAuB,GAAGA,CACnCC,KAAU,EACVC,SAAiB,EACjBC,GAAqD;EAErD,MAAM;IAAEC,OAAO;IAAE,GAAGC;GAAa,GAAGJ,KAAK;EACzC,MAAMK,MAAM,gBAAGC,6BAACC,MAAsB,oBAAKH,WAAW;IAAEH,SAAS,EAAEA,SAAS;IAAEC,GAAG,EAAEA;KAAO;EAE1F,IAAIC,OAAO,EAAE;IACT,oBAAOG,6BAACE,OAAO;MAACC,KAAK,EAAEN;OAAUE,MAAM,CAAW;;EAGtD,OAAOA,MAAM;AACjB;MAEaK,wBAAwB,GAAGA,CAACV,KAAU,EAAEW,UAAuB;EACxE,MAAM;IAAEC,MAAM;IAAEC,MAAM;IAAEC,MAAM;IAAEC,IAAI;IAAEC;GAAS,GAAGhB,KAAK;EACvD,IAAIK,MAAM,GAAGM,UAAU;EAEvB,IAAI,OAAOC,MAAM,KAAK,UAAU,EAAE;IAC9BP,MAAM,GAAGO,MAAM,CAAC;MAAEK,OAAO,EAAEZ;KAAQ,CAAC;GACvC,MAAM,IAAI,OAAOQ,MAAM,KAAK,UAAU,EAAE;IACrCR,MAAM,GAAGQ,MAAM,CAAC;MAAEI,OAAO,EAAEZ;KAAQ,CAAC;GACvC,MAAM,IAAI,OAAOU,IAAI,KAAK,UAAU,EAAE;IACnCV,MAAM,GAAGU,IAAI,CAAC;MAAEE,OAAO,EAAEZ;KAAQ,CAAC;GACrC,MAAM,IAAI,OAAOW,OAAO,KAAK,UAAU,EAAE;IACtCX,MAAM,GAAGW,OAAO,CAAC;MAAEC,OAAO,EAAEZ;KAAQ,CAAC;;EAGzC,IAAI,OAAOS,MAAM,KAAK,UAAU,EAAE;IAC9BT,MAAM,GAAGS,MAAM,CAAC;MAAEI,MAAM,EAAEb;KAAQ,CAAC;;EAGvC,OAAOA,MAAM;AACjB;;;;"}

package/dist/esm/packages/taco/src/components/Menu/components/Content.js

@@ -43,7 +43,7 @@ const Content = /*#__PURE__*/forwardRef(function MenuContent(props, ref) {
     return () => {
       shortcuts.forEach(handler => document.removeEventListener('keydown', handler));
     };
-  }, []);
+  }, [childrenWithRefs]);
   return /*#__PURE__*/createElement(Portal, null, /*#__PURE__*/createElement(Content$1, Object.assign({}, otherProps, {
     align: align,
     className: className,

package/dist/esm/packages/taco/src/components/Menu/components/Content.js.map

@@ -1 +1 @@
-{"version":3,"file":"Content.js","sources":["../../../../../../../../src/components/Menu/components/Content.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport cn from 'classnames';\nimport { Align, Placement } from '../../../types';\nimport { useMergedRef } from '../../../hooks/useMergedRef';\nimport { useCurrentMenu } from '../Context';\nimport { createShortcutKeyDownHandler } from '../../../utils/keyboard';\nimport { MenuItemProps } from './Item';\n\nexport type MenuContentProps = Omit<DropdownMenuPrimitive.DropdownMenuContentProps, 'children' | 'side'> & {\n    align?: Align;\n    children: React.ReactNode;\n    /** Set the position of the Menu relative to its trigger. Default value is `bottom` */\n    placement?: Placement;\n};\n\nexport const Content = React.forwardRef(function MenuContent(props: MenuContentProps, ref: React.Ref<HTMLDivElement>) {\n    const internalRef = useMergedRef<any>(ref);\n    const menu = useCurrentMenu();\n    const { align = 'start', children, placement: side, ...otherProps } = props;\n    const className = cn('border border-transparent rounded block outline-none p-1 yt-shadow wcag-white', props.className);\n\n    // attach refs to each child\n    const childrenRefs = React.useRef<React.RefObject<HTMLDivElement>[]>([]);\n    const childrenWithRefs = (React.Children.toArray(props.children) as React.ReactElement<MenuItemProps & { ref: any }>[])\n        .filter(child => !!child) // remove falsey children\n        .map((child, index) => {\n            childrenRefs.current[index] = React.createRef<HTMLDivElement>();\n            return React.cloneElement(child, { ref: childrenRefs.current[index] });\n        });\n\n    // register any shortcuts attached to children\n    React.useEffect(() => {\n        const shortcuts: ((event: KeyboardEvent) => void)[] = [];\n        childrenWithRefs.forEach((child, index) => {\n            if (child.props.shortcut) {\n                shortcuts.push(\n                    createShortcutKeyDownHandler(child.props.shortcut, event => {\n                        event.preventDefault();\n                        menu?.open();\n                        setTimeout(() => childrenRefs.current[index]?.current?.click(), 1);\n                    })\n                );\n            }\n        });\n\n        shortcuts.forEach(handler => document.addEventListener('keydown', handler));\n\n        return () => {\n            shortcuts.forEach(handler => document.removeEventListener('keydown', handler));\n        };\n    }, []);\n\n    return (\n        <DropdownMenuPrimitive.Portal>\n            <DropdownMenuPrimitive.Content\n                {...otherProps}\n                align={align}\n                className={className}\n                data-taco=\"menu\"\n                side={side}\n                sideOffset={3}\n                style={{ minWidth: menu?.minWidth }}\n                ref={internalRef}>\n                {childrenWithRefs}\n            </DropdownMenuPrimitive.Content>\n        </DropdownMenuPrimitive.Portal>\n    );\n});\n"],"names":["Content","React","MenuContent","props","ref","internalRef","useMergedRef","menu","useCurrentMenu","align","children","placement","side","otherProps","className","cn","childrenRefs","childrenWithRefs","toArray","filter","child","map","index","current","shortcuts","forEach","shortcut","push","createShortcutKeyDownHandler","event","preventDefault","open","setTimeout","_childrenRefs$current","_childrenRefs$current2","click","handler","document","addEventListener","removeEventListener","DropdownMenuPrimitive","sideOffset","style","minWidth"],"mappings":";;;;;;;MAgBaA,OAAO,gBAAGC,UAAgB,CAAC,SAASC,WAAWA,CAACC,KAAuB,EAAEC,GAA8B;EAChH,MAAMC,WAAW,GAAGC,YAAY,CAAMF,GAAG,CAAC;EAC1C,MAAMG,IAAI,GAAGC,cAAc,EAAE;EAC7B,MAAM;IAAEC,KAAK,GAAG,OAAO;IAAEC,QAAQ;IAAEC,SAAS,EAAEC,IAAI;IAAE,GAAGC;GAAY,GAAGV,KAAK;EAC3E,MAAMW,SAAS,GAAGC,EAAE,CAAC,+EAA+E,EAAEZ,KAAK,CAACW,SAAS,CAAC;;EAGtH,MAAME,YAAY,GAAGf,MAAY,CAAoC,EAAE,CAAC;EACxE,MAAMgB,gBAAgB,GAAIhB,QAAc,CAACiB,OAAO,CAACf,KAAK,CAACO,QAAQ,CAAwD,CAClHS,MAAM,CAACC,KAAK,IAAI,CAAC,CAACA,KAAK,CAAC;GACxBC,GAAG,CAAC,CAACD,KAAK,EAAEE,KAAK;IACdN,YAAY,CAACO,OAAO,CAACD,KAAK,CAAC,gBAAGrB,SAAe,EAAkB;IAC/D,oBAAOA,YAAkB,CAACmB,KAAK,EAAE;MAAEhB,GAAG,EAAEY,YAAY,CAACO,OAAO,CAACD,KAAK;KAAG,CAAC;GACzE,CAAC;;EAGNrB,SAAe,CAAC;IACZ,MAAMuB,SAAS,GAAuC,EAAE;IACxDP,gBAAgB,CAACQ,OAAO,CAAC,CAACL,KAAK,EAAEE,KAAK;MAClC,IAAIF,KAAK,CAACjB,KAAK,CAACuB,QAAQ,EAAE;QACtBF,SAAS,CAACG,IAAI,CACVC,4BAA4B,CAACR,KAAK,CAACjB,KAAK,CAACuB,QAAQ,EAAEG,KAAK;UACpDA,KAAK,CAACC,cAAc,EAAE;UACtBvB,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEwB,IAAI,EAAE;UACZC,UAAU,CAAC;YAAA,IAAAC,qBAAA,EAAAC,sBAAA;YAAA,QAAAD,qBAAA,GAAMjB,YAAY,CAACO,OAAO,CAACD,KAAK,CAAC,cAAAW,qBAAA,wBAAAC,sBAAA,GAA3BD,qBAAA,CAA6BV,OAAO,cAAAW,sBAAA,uBAApCA,sBAAA,CAAsCC,KAAK,EAAE;aAAE,CAAC,CAAC;SACrE,CAAC,CACL;;KAER,CAAC;IAEFX,SAAS,CAACC,OAAO,CAACW,OAAO,IAAIC,QAAQ,CAACC,gBAAgB,CAAC,SAAS,EAAEF,OAAO,CAAC,CAAC;IAE3E,OAAO;MACHZ,SAAS,CAACC,OAAO,CAACW,OAAO,IAAIC,QAAQ,CAACE,mBAAmB,CAAC,SAAS,EAAEH,OAAO,CAAC,CAAC;KACjF;GACJ,EAAE,EAAE,CAAC;EAEN,oBACInC,cAACuC,MAA4B,qBACzBvC,cAACuC,SAA6B,oBACtB3B,UAAU;IACdJ,KAAK,EAAEA,KAAK;IACZK,SAAS,EAAEA,SAAS;iBACV,MAAM;IAChBF,IAAI,EAAEA,IAAI;IACV6B,UAAU,EAAE,CAAC;IACbC,KAAK,EAAE;MAAEC,QAAQ,EAAEpC,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEoC;KAAU;IACnCvC,GAAG,EAAEC;MACJY,gBAAgB,CACW,CACL;AAEvC,CAAC;;;;"}
+{"version":3,"file":"Content.js","sources":["../../../../../../../../src/components/Menu/components/Content.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport cn from 'classnames';\nimport { Align, Placement } from '../../../types';\nimport { useMergedRef } from '../../../hooks/useMergedRef';\nimport { useCurrentMenu } from '../Context';\nimport { createShortcutKeyDownHandler } from '../../../utils/keyboard';\nimport { MenuItemProps } from './Item';\n\nexport type MenuContentProps = Omit<DropdownMenuPrimitive.DropdownMenuContentProps, 'children' | 'side'> & {\n    align?: Align;\n    children: React.ReactNode;\n    /** Set the position of the Menu relative to its trigger. Default value is `bottom` */\n    placement?: Placement;\n};\n\nexport const Content = React.forwardRef(function MenuContent(props: MenuContentProps, ref: React.Ref<HTMLDivElement>) {\n    const internalRef = useMergedRef<any>(ref);\n    const menu = useCurrentMenu();\n    const { align = 'start', children, placement: side, ...otherProps } = props;\n    const className = cn('border border-transparent rounded block outline-none p-1 yt-shadow wcag-white', props.className);\n\n    // attach refs to each child\n    const childrenRefs = React.useRef<React.RefObject<HTMLDivElement>[]>([]);\n    const childrenWithRefs = (React.Children.toArray(props.children) as React.ReactElement<MenuItemProps & { ref: any }>[])\n        .filter(child => !!child) // remove falsey children\n        .map((child, index) => {\n            childrenRefs.current[index] = React.createRef<HTMLDivElement>();\n            return React.cloneElement(child, { ref: childrenRefs.current[index] });\n        });\n\n    // register any shortcuts attached to children\n    React.useEffect(() => {\n        const shortcuts: ((event: KeyboardEvent) => void)[] = [];\n        childrenWithRefs.forEach((child, index) => {\n            if (child.props.shortcut) {\n                shortcuts.push(\n                    createShortcutKeyDownHandler(child.props.shortcut, event => {\n                        event.preventDefault();\n                        menu?.open();\n                        setTimeout(() => childrenRefs.current[index]?.current?.click(), 1);\n                    })\n                );\n            }\n        });\n\n        shortcuts.forEach(handler => document.addEventListener('keydown', handler));\n\n        return () => {\n            shortcuts.forEach(handler => document.removeEventListener('keydown', handler));\n        };\n    }, [childrenWithRefs]);\n\n    return (\n        <DropdownMenuPrimitive.Portal>\n            <DropdownMenuPrimitive.Content\n                {...otherProps}\n                align={align}\n                className={className}\n                data-taco=\"menu\"\n                side={side}\n                sideOffset={3}\n                style={{ minWidth: menu?.minWidth }}\n                ref={internalRef}>\n                {childrenWithRefs}\n            </DropdownMenuPrimitive.Content>\n        </DropdownMenuPrimitive.Portal>\n    );\n});\n"],"names":["Content","React","MenuContent","props","ref","internalRef","useMergedRef","menu","useCurrentMenu","align","children","placement","side","otherProps","className","cn","childrenRefs","childrenWithRefs","toArray","filter","child","map","index","current","shortcuts","forEach","shortcut","push","createShortcutKeyDownHandler","event","preventDefault","open","setTimeout","_childrenRefs$current","_childrenRefs$current2","click","handler","document","addEventListener","removeEventListener","DropdownMenuPrimitive","sideOffset","style","minWidth"],"mappings":";;;;;;;MAgBaA,OAAO,gBAAGC,UAAgB,CAAC,SAASC,WAAWA,CAACC,KAAuB,EAAEC,GAA8B;EAChH,MAAMC,WAAW,GAAGC,YAAY,CAAMF,GAAG,CAAC;EAC1C,MAAMG,IAAI,GAAGC,cAAc,EAAE;EAC7B,MAAM;IAAEC,KAAK,GAAG,OAAO;IAAEC,QAAQ;IAAEC,SAAS,EAAEC,IAAI;IAAE,GAAGC;GAAY,GAAGV,KAAK;EAC3E,MAAMW,SAAS,GAAGC,EAAE,CAAC,+EAA+E,EAAEZ,KAAK,CAACW,SAAS,CAAC;;EAGtH,MAAME,YAAY,GAAGf,MAAY,CAAoC,EAAE,CAAC;EACxE,MAAMgB,gBAAgB,GAAIhB,QAAc,CAACiB,OAAO,CAACf,KAAK,CAACO,QAAQ,CAAwD,CAClHS,MAAM,CAACC,KAAK,IAAI,CAAC,CAACA,KAAK,CAAC;GACxBC,GAAG,CAAC,CAACD,KAAK,EAAEE,KAAK;IACdN,YAAY,CAACO,OAAO,CAACD,KAAK,CAAC,gBAAGrB,SAAe,EAAkB;IAC/D,oBAAOA,YAAkB,CAACmB,KAAK,EAAE;MAAEhB,GAAG,EAAEY,YAAY,CAACO,OAAO,CAACD,KAAK;KAAG,CAAC;GACzE,CAAC;;EAGNrB,SAAe,CAAC;IACZ,MAAMuB,SAAS,GAAuC,EAAE;IACxDP,gBAAgB,CAACQ,OAAO,CAAC,CAACL,KAAK,EAAEE,KAAK;MAClC,IAAIF,KAAK,CAACjB,KAAK,CAACuB,QAAQ,EAAE;QACtBF,SAAS,CAACG,IAAI,CACVC,4BAA4B,CAACR,KAAK,CAACjB,KAAK,CAACuB,QAAQ,EAAEG,KAAK;UACpDA,KAAK,CAACC,cAAc,EAAE;UACtBvB,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEwB,IAAI,EAAE;UACZC,UAAU,CAAC;YAAA,IAAAC,qBAAA,EAAAC,sBAAA;YAAA,QAAAD,qBAAA,GAAMjB,YAAY,CAACO,OAAO,CAACD,KAAK,CAAC,cAAAW,qBAAA,wBAAAC,sBAAA,GAA3BD,qBAAA,CAA6BV,OAAO,cAAAW,sBAAA,uBAApCA,sBAAA,CAAsCC,KAAK,EAAE;aAAE,CAAC,CAAC;SACrE,CAAC,CACL;;KAER,CAAC;IAEFX,SAAS,CAACC,OAAO,CAACW,OAAO,IAAIC,QAAQ,CAACC,gBAAgB,CAAC,SAAS,EAAEF,OAAO,CAAC,CAAC;IAE3E,OAAO;MACHZ,SAAS,CAACC,OAAO,CAACW,OAAO,IAAIC,QAAQ,CAACE,mBAAmB,CAAC,SAAS,EAAEH,OAAO,CAAC,CAAC;KACjF;GACJ,EAAE,CAACnB,gBAAgB,CAAC,CAAC;EAEtB,oBACIhB,cAACuC,MAA4B,qBACzBvC,cAACuC,SAA6B,oBACtB3B,UAAU;IACdJ,KAAK,EAAEA,KAAK;IACZK,SAAS,EAAEA,SAAS;iBACV,MAAM;IAChBF,IAAI,EAAEA,IAAI;IACV6B,UAAU,EAAE,CAAC;IACbC,KAAK,EAAE;MAAEC,QAAQ,EAAEpC,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEoC;KAAU;IACnCvC,GAAG,EAAEC;MACJY,gBAAgB,CACW,CACL;AAEvC,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Provider/Localization.js

@@ -198,7 +198,13 @@ const defaultLocalisationTexts = {
         freezeColumns: (count = 1) => count === 1 ? 'Freeze the first column' : `Freeze first ${count} columns`,
         gotoRow: 'Go to',
         hideColumn: 'Hide column',
-        unfreezeColumns: 'Unfreeze all columns'
+        unfreezeColumns: 'Unfreeze all columns',
+        sorting: 'Sorting',
+        sortingOrder: {
+          ascending: 'Ascending order',
+          descending: 'Descending order',
+          unsorted: 'No sorting'
+        }
       },
       resize: {
         tooltip: 'Resize column'