@economic/taco 2.49.5 → 2.50.0

package/dist/esm/index.css

@@ -1166,19 +1166,19 @@ table[data-taco^='table'][data-table-pause-hover='true'] > tbody > tr:hover[data
 
 /* row metadata */
 table[data-taco^='table'] tbody tr[data-row-meta-layout='heading']:not([data-row-group='true']) td {
-    @apply !border-b-0 border-t font-bold;
+    @apply border-b-0 border-t font-bold;
 }
 
 table[data-taco^='table'] tbody tr[data-row-group='true'] + tr[data-row-meta-layout='heading'] td {
-    @apply !border-t-0;
+    @apply border-t-0;
 }
 
 table[data-taco^='table'] tbody tr[data-row-meta-layout='summary']:not([data-row-group='true']) td {
-    @apply !border-b-0 font-bold;
+    @apply border-b-0 font-bold;
 }
 
 table[data-taco^='table'] tbody tr[data-row-meta-layout='item']:not([data-row-group='true']) td {
-    @apply !border-b-0;
+    @apply border-b-0;
 }
 
 /* rows */
@@ -1341,6 +1341,14 @@ table[data-taco='table3'][data-table-editing-mode] tbody tr[data-row-editing-mov
         @apply border-r-2 border-blue-500 pr-[calc(var(--table-cell-padding-x)_-_2px)];
     }
 
+table[data-taco^='table3'][data-table-editing-mode] [data-cell-align='center'] > label {
+    @apply flex-row justify-center text-center;
+}
+
+table[data-taco^='table3'][data-table-editing-mode] [data-cell-align='right'] > label {
+    @apply flex-row justify-end text-right;
+}
+
 /* invalid rows */
 
 table[data-taco='table3'] > tbody > tr[data-row-editing-invalid='true'] > td,

package/dist/esm/packages/taco/src/components/Card/Card.js

@@ -9,7 +9,7 @@ const Content = /*#__PURE__*/forwardRef(function CardContent(externalProps, ref)
     ...props
   } = externalProps;
   const className = cn('flex-grow overflow-auto', {
-    'mx-4 mb-4': !noPadding
+    'px-4 pb-4': !noPadding
   }, props.className);
   return /*#__PURE__*/createElement("div", Object.assign({}, props, {
     className: className,
@@ -31,7 +31,7 @@ const Card = /*#__PURE__*/forwardRef(function Card(props, ref) {
     "data-taco": "card",
     ref: ref
   }), /*#__PURE__*/createElement("div", {
-    className: "mx-4 mb-2 mt-4 flex justify-between"
+    className: "flex justify-between px-4 pb-2 pt-4"
   }, title && (/*#__PURE__*/createElement(Truncate, {
     tooltip: title
   }, /*#__PURE__*/createElement("h4", {

package/dist/esm/packages/taco/src/components/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../../../../../../../src/components/Card/Card.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { MenuProps } from '../Menu/Menu';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Truncate } from '../Truncate/Truncate';\nimport './style.css';\n\nexport type CardContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    noPadding?: boolean;\n};\n\nconst Content = React.forwardRef<HTMLDivElement, CardContentProps>(function CardContent(externalProps, ref) {\n    const { noPadding, ...props } = externalProps;\n    const className = cn(\n        'flex-grow overflow-auto',\n        {\n            'mx-4 mb-4': !noPadding,\n        },\n        props.className\n    );\n    return <div {...props} className={className} data-taco=\"card-content\" ref={ref} />;\n});\n\nexport type CardProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Title of the Card */\n    title: string | React.ReactElement;\n    /** Menu component associated with the Card */\n    menu?: (props: Partial<MenuProps>) => JSX.Element;\n};\n\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(props, ref) {\n    const { title, menu, children, className, ...otherProps } = props;\n    const cardClassName = cn(\n        'bg-white flex flex-col rounded-xl border border-solid border-radius-[12px] border-grey-300 hover:border-grey-500',\n        className\n    );\n\n    return (\n        <div {...otherProps} className={cardClassName} data-taco=\"card\" ref={ref}>\n            <div className=\"mx-4 mb-2 mt-4 flex justify-between\">\n                {title && (\n                    <Truncate tooltip={title}>\n                        <h4 className=\"mb-0 flex-grow truncate text-left\">{title}</h4>\n                    </Truncate>\n                )}\n                {menu ? <IconButton icon=\"ellipsis-horizontal\" appearance=\"discrete\" menu={menu} className=\"-mt-[4px]\" /> : null}\n            </div>\n            {children}\n        </div>\n    );\n}) as React.ForwardRefExoticComponent<CardProps> & {\n    Content: React.ForwardRefExoticComponent<CardContentProps>;\n};\nCard.Content = Content;\n"],"names":["Content","React","CardContent","externalProps","ref","noPadding","props","className","cn","Card","title","menu","children","otherProps","cardClassName","Truncate","tooltip","IconButton","icon","appearance"],"mappings":";;;;;AAWA,MAAMA,OAAO,gBAAGC,UAAgB,CAAmC,SAASC,WAAWA,CAACC,aAAa,EAAEC,GAAG;EACtG,MAAM;IAAEC,SAAS;IAAE,GAAGC;GAAO,GAAGH,aAAa;EAC7C,MAAMI,SAAS,GAAGC,EAAE,CAChB,yBAAyB,EACzB;IACI,WAAW,EAAE,CAACH;GACjB,EACDC,KAAK,CAACC,SAAS,CAClB;EACD,oBAAON,uCAASK,KAAK;IAAEC,SAAS,EAAEA,SAAS;iBAAY,cAAc;IAACH,GAAG,EAAEA;KAAO;AACtF,CAAC,CAAC;MASWK,IAAI,gBAAGR,UAAgB,CAA4B,SAASQ,IAAIA,CAACH,KAAK,EAAEF,GAAG;EACpF,MAAM;IAAEM,KAAK;IAAEC,IAAI;IAAEC,QAAQ;IAAEL,SAAS;IAAE,GAAGM;GAAY,GAAGP,KAAK;EACjE,MAAMQ,aAAa,GAAGN,EAAE,CACpB,kHAAkH,EAClHD,SAAS,CACZ;EAED,oBACIN,uCAASY,UAAU;IAAEN,SAAS,EAAEO,aAAa;iBAAY,MAAM;IAACV,GAAG,EAAEA;mBACjEH;IAAKM,SAAS,EAAC;KACVG,KAAK,kBACFT,cAACc,QAAQ;IAACC,OAAO,EAAEN;kBACfT;IAAIM,SAAS,EAAC;KAAqCG,KAAK,CAAM,CACvD,CACd,EACAC,IAAI,gBAAGV,cAACgB,UAAU;IAACC,IAAI,EAAC,qBAAqB;IAACC,UAAU,EAAC,UAAU;IAACR,IAAI,EAAEA,IAAI;IAAEJ,SAAS,EAAC;IAAc,GAAG,IAAI,CAC9G,EACLK,QAAQ,CACP;AAEd,CAAC;AAGDH,IAAI,CAACT,OAAO,GAAGA,OAAO;;;;"}
+{"version":3,"file":"Card.js","sources":["../../../../../../../src/components/Card/Card.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { MenuProps } from '../Menu/Menu';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Truncate } from '../Truncate/Truncate';\nimport './style.css';\n\nexport type CardContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    noPadding?: boolean;\n};\n\nconst Content = React.forwardRef<HTMLDivElement, CardContentProps>(function CardContent(externalProps, ref) {\n    const { noPadding, ...props } = externalProps;\n    const className = cn(\n        'flex-grow overflow-auto',\n        {\n            'px-4 pb-4': !noPadding,\n        },\n        props.className\n    );\n    return <div {...props} className={className} data-taco=\"card-content\" ref={ref} />;\n});\n\nexport type CardProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Title of the Card */\n    title: string | React.ReactElement;\n    /** Menu component associated with the Card */\n    menu?: (props: Partial<MenuProps>) => JSX.Element;\n};\n\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(props, ref) {\n    const { title, menu, children, className, ...otherProps } = props;\n    const cardClassName = cn(\n        'bg-white flex flex-col rounded-xl border border-solid border-radius-[12px] border-grey-300 hover:border-grey-500',\n        className\n    );\n\n    return (\n        <div {...otherProps} className={cardClassName} data-taco=\"card\" ref={ref}>\n            <div className=\"flex justify-between px-4 pb-2 pt-4\">\n                {title && (\n                    <Truncate tooltip={title}>\n                        <h4 className=\"mb-0 flex-grow truncate text-left\">{title}</h4>\n                    </Truncate>\n                )}\n                {menu ? <IconButton icon=\"ellipsis-horizontal\" appearance=\"discrete\" menu={menu} className=\"-mt-[4px]\" /> : null}\n            </div>\n            {children}\n        </div>\n    );\n}) as React.ForwardRefExoticComponent<CardProps> & {\n    Content: React.ForwardRefExoticComponent<CardContentProps>;\n};\nCard.Content = Content;\n"],"names":["Content","React","CardContent","externalProps","ref","noPadding","props","className","cn","Card","title","menu","children","otherProps","cardClassName","Truncate","tooltip","IconButton","icon","appearance"],"mappings":";;;;;AAWA,MAAMA,OAAO,gBAAGC,UAAgB,CAAmC,SAASC,WAAWA,CAACC,aAAa,EAAEC,GAAG;EACtG,MAAM;IAAEC,SAAS;IAAE,GAAGC;GAAO,GAAGH,aAAa;EAC7C,MAAMI,SAAS,GAAGC,EAAE,CAChB,yBAAyB,EACzB;IACI,WAAW,EAAE,CAACH;GACjB,EACDC,KAAK,CAACC,SAAS,CAClB;EACD,oBAAON,uCAASK,KAAK;IAAEC,SAAS,EAAEA,SAAS;iBAAY,cAAc;IAACH,GAAG,EAAEA;KAAO;AACtF,CAAC,CAAC;MASWK,IAAI,gBAAGR,UAAgB,CAA4B,SAASQ,IAAIA,CAACH,KAAK,EAAEF,GAAG;EACpF,MAAM;IAAEM,KAAK;IAAEC,IAAI;IAAEC,QAAQ;IAAEL,SAAS;IAAE,GAAGM;GAAY,GAAGP,KAAK;EACjE,MAAMQ,aAAa,GAAGN,EAAE,CACpB,kHAAkH,EAClHD,SAAS,CACZ;EAED,oBACIN,uCAASY,UAAU;IAAEN,SAAS,EAAEO,aAAa;iBAAY,MAAM;IAACV,GAAG,EAAEA;mBACjEH;IAAKM,SAAS,EAAC;KACVG,KAAK,kBACFT,cAACc,QAAQ;IAACC,OAAO,EAAEN;kBACfT;IAAIM,SAAS,EAAC;KAAqCG,KAAK,CAAM,CACvD,CACd,EACAC,IAAI,gBAAGV,cAACgB,UAAU;IAACC,IAAI,EAAC,qBAAqB;IAACC,UAAU,EAAC,UAAU;IAACR,IAAI,EAAEA,IAAI;IAAEJ,SAAS,EAAC;IAAc,GAAG,IAAI,CAC9G,EACLK,QAAQ,CACP;AAEd,CAAC;AAGDH,IAAI,CAACT,OAAO,GAAGA,OAAO;;;;"}

package/dist/esm/packages/taco/src/components/Checkbox/Checkbox.js

@@ -16,8 +16,9 @@ const Checkbox = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
     ...otherProps
   } = props;
   const id = useId(props.id);
-  const className = cn('bg-white h-5 w-5 border rounded text-sm flex-shrink-0 mt-[0.1rem] focus-visible:yt-focus disabled:cursor-not-allowed text-white', {
-    'self-start': !!label
+  const className = cn('bg-white h-5 w-5 border rounded text-sm flex-shrink-0 focus-visible:yt-focus disabled:cursor-not-allowed text-white', {
+    'self-start': !!label,
+    'mt-[0.1rem]': !label
   }, invalid ? {
     'border-red-500 hover:border-red-700 aria-checked:border-red-500 aria-checked-mixed:border-red-500 aria-checked:bg-red-500 aria-checked-mixed:bg-red-500 aria-checked:hover:border-red-700 aria-checked-mixed:hover:border-red-700 aria-checked:hover:bg-red-700 aria-checked-mixed:hover:bg-red-700': !props.disabled,
     'border-red-500/50 aria-checked:wcag-red-500/50 aria-checked-mixed:wcag-red-500/50': props.disabled

package/dist/esm/packages/taco/src/components/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { Icon } from '../Icon/Icon';\nimport { useId } from '../../hooks/useId';\nimport { Spinner } from '../Spinner/Spinner';\n\ntype CheckedState = boolean | 'indeterminate';\n\ntype CheckboxBaseProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onChange'> & {\n    /**\n     * Indeterminate state should only be used with sub-checkboxes. The indeterminate state is shown if not all\n     * sub-checkboxes are selected. This only affects the style, changing the icon in the checkbox.\n     */\n    indeterminate?: boolean;\n    /* Whether the checkbox is in an invalid state */\n    invalid?: boolean;\n    /** Label for the checkbox */\n    label?: React.ReactNode;\n    /** Displays loading state in checkbox */\n    loading?: boolean;\n    /* Whether user input is required */\n    required?: boolean;\n};\n\nexport interface UncontrolledCheckboxProps extends CheckboxBaseProps {\n    checked?: never;\n    onChange?: never;\n    /* The default checked state (uncontrolled) */\n    defaultChecked?: boolean;\n}\n\nexport interface ControlledCheckboxProps extends CheckboxBaseProps {\n    defaultChecked?: never;\n    /* The current checked state (controlled) */\n    checked: boolean;\n    /* Handler called when the checked state changes */\n    onChange: (checked: boolean) => void;\n}\n\nexport type CheckboxProps = UncontrolledCheckboxProps | ControlledCheckboxProps;\n\nexport const Checkbox = React.forwardRef(function Checkbox(props: CheckboxProps, ref: React.Ref<HTMLButtonElement>) {\n    const { checked, indeterminate, invalid, label, loading, onChange, ...otherProps } = props;\n    const id = useId(props.id);\n\n    const className = cn(\n        'bg-white h-5 w-5 border rounded text-sm flex-shrink-0 mt-[0.1rem] focus-visible:yt-focus disabled:cursor-not-allowed text-white',\n        {\n            'self-start': !!label,\n        },\n        invalid\n            ? {\n                  'border-red-500 hover:border-red-700 aria-checked:border-red-500 aria-checked-mixed:border-red-500 aria-checked:bg-red-500 aria-checked-mixed:bg-red-500 aria-checked:hover:border-red-700 aria-checked-mixed:hover:border-red-700 aria-checked:hover:bg-red-700 aria-checked-mixed:hover:bg-red-700':\n                      !props.disabled,\n                  'border-red-500/50 aria-checked:wcag-red-500/50 aria-checked-mixed:wcag-red-500/50': props.disabled,\n              }\n            : {\n                  'border-grey-500 hover:border-grey-700 aria-checked:border-blue-500 aria-checked-mixed:border-blue-500 aria-checked:bg-blue-500 aria-checked-mixed:bg-blue-500 aria-checked:hover:border-blue-700 aria-checked-mixed:hover:border-blue-700 aria-checked:hover:bg-blue-700 aria-checked-mixed:hover:bg-blue-700':\n                      !props.disabled,\n                  'border-grey-500/50 aria-checked:bg-blue-500/50 aria-checked-mixed:bg-blue-500/50': props.disabled,\n              },\n        props.className\n    );\n\n    let handleChange: ((checked: CheckedState) => void) | undefined;\n\n    if (onChange) {\n        handleChange = (checked: CheckedState) => onChange(checked === 'indeterminate' ? false : checked);\n    }\n\n    let labelledByProps: Record<string, string> | null = null;\n\n    if (label) {\n        labelledByProps = {\n            'aria-labelledby': `${id}-label`,\n            id,\n        };\n    }\n\n    // the enter keyboard shortcut isn't supported by default, but we want it\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n        if (event.key === 'Enter') {\n            event.currentTarget.click();\n        }\n    };\n\n    const spinnerClassname = cn(\n        //Spinner is slightly bigger then 'line' and 'tick' icons, so making it 2px smaller from each side\n        \"m-0.5 !h-[calc(100%-theme('spacing.1'))] !w-[calc(100%-theme('spacing.1'))]\",\n        { 'text-blue-500': !checked && !indeterminate }\n    );\n\n    const element = (\n        <CheckboxPrimitive.Root\n            {...otherProps}\n            {...labelledByProps}\n            aria-invalid={invalid ? 'true' : undefined}\n            data-taco=\"checkbox\"\n            checked={indeterminate ? 'indeterminate' : checked}\n            className={className}\n            onCheckedChange={handleChange}\n            onKeyDown={handleKeyDown}\n            ref={ref}>\n            {loading ? (\n                <Spinner className={spinnerClassname} />\n            ) : (\n                <CheckboxPrimitive.Indicator className=\"flex h-full w-full\">\n                    <Icon name={indeterminate ? 'line' : 'tick'} className=\"!h-full !w-full\" />\n                </CheckboxPrimitive.Indicator>\n            )}\n        </CheckboxPrimitive.Root>\n    );\n\n    if (label) {\n        const labelContainerClassName = cn('flex items-center cursor-pointer gap-2', {\n            'cursor-not-allowed text-grey-300': props.disabled,\n        });\n\n        return (\n            <span className={labelContainerClassName} data-taco=\"checkbox-container\">\n                {element}\n                <label htmlFor={id} id={`${id}-label`}>\n                    {label}\n                </label>\n            </span>\n        );\n    }\n\n    return element;\n});\nCheckbox.displayName = 'Checkbox';\n"],"names":["Checkbox","React","props","ref","checked","indeterminate","invalid","label","loading","onChange","otherProps","id","useId","className","cn","disabled","handleChange","labelledByProps","handleKeyDown","event","key","currentTarget","click","spinnerClassname","element","CheckboxPrimitive","undefined","onCheckedChange","onKeyDown","Spinner","Icon","name","labelContainerClassName","htmlFor","displayName"],"mappings":";;;;;;;MA0CaA,QAAQ,gBAAGC,UAAgB,CAAC,SAASD,QAAQA,CAACE,KAAoB,EAAEC,GAAiC;EAC9G,MAAM;IAAEC,OAAO;IAAEC,aAAa;IAAEC,OAAO;IAAEC,KAAK;IAAEC,OAAO;IAAEC,QAAQ;IAAE,GAAGC;GAAY,GAAGR,KAAK;EAC1F,MAAMS,EAAE,GAAGC,KAAK,CAACV,KAAK,CAACS,EAAE,CAAC;EAE1B,MAAME,SAAS,GAAGC,EAAE,CAChB,iIAAiI,EACjI;IACI,YAAY,EAAE,CAAC,CAACP;GACnB,EACDD,OAAO,GACD;IACI,qSAAqS,EACjS,CAACJ,KAAK,CAACa,QAAQ;IACnB,mFAAmF,EAAEb,KAAK,CAACa;GAC9F,GACD;IACI,+SAA+S,EAC3S,CAACb,KAAK,CAACa,QAAQ;IACnB,kFAAkF,EAAEb,KAAK,CAACa;GAC7F,EACPb,KAAK,CAACW,SAAS,CAClB;EAED,IAAIG,YAA2D;EAE/D,IAAIP,QAAQ,EAAE;IACVO,YAAY,GAAIZ,OAAqB,IAAKK,QAAQ,CAACL,OAAO,KAAK,eAAe,GAAG,KAAK,GAAGA,OAAO,CAAC;;EAGrG,IAAIa,eAAe,GAAkC,IAAI;EAEzD,IAAIV,KAAK,EAAE;IACPU,eAAe,GAAG;MACd,iBAAiB,EAAE,GAAGN,EAAE,QAAQ;MAChCA;KACH;;;EAIL,MAAMO,aAAa,GAAIC,KAA6C;IAChE,IAAIA,KAAK,CAACC,GAAG,KAAK,OAAO,EAAE;MACvBD,KAAK,CAACE,aAAa,CAACC,KAAK,EAAE;;GAElC;EAED,MAAMC,gBAAgB,GAAGT,EAAE;;EAEvB,6EAA6E,EAC7E;IAAE,eAAe,EAAE,CAACV,OAAO,IAAI,CAACC;GAAe,CAClD;EAED,MAAMmB,OAAO,gBACTvB,cAACwB,IAAsB,oBACff,UAAU,EACVO,eAAe;oBACLX,OAAO,GAAG,MAAM,GAAGoB,SAAS;iBAChC,UAAU;IACpBtB,OAAO,EAAEC,aAAa,GAAG,eAAe,GAAGD,OAAO;IAClDS,SAAS,EAAEA,SAAS;IACpBc,eAAe,EAAEX,YAAY;IAC7BY,SAAS,EAAEV,aAAa;IACxBf,GAAG,EAAEA;MACJK,OAAO,iBACJP,cAAC4B,OAAO;IAAChB,SAAS,EAAEU;IAAoB,kBAExCtB,cAACwB,SAA2B;IAACZ,SAAS,EAAC;kBACnCZ,cAAC6B,IAAI;IAACC,IAAI,EAAE1B,aAAa,GAAG,MAAM,GAAG,MAAM;IAAEQ,SAAS,EAAC;IAAoB,CACjD,CACjC,CAER;EAED,IAAIN,KAAK,EAAE;IACP,MAAMyB,uBAAuB,GAAGlB,EAAE,CAAC,wCAAwC,EAAE;MACzE,kCAAkC,EAAEZ,KAAK,CAACa;KAC7C,CAAC;IAEF,oBACId;MAAMY,SAAS,EAAEmB,uBAAuB;mBAAY;OAC/CR,OAAO,eACRvB;MAAOgC,OAAO,EAAEtB,EAAE;MAAEA,EAAE,EAAE,GAAGA,EAAE;OACxBJ,KAAK,CACF,CACL;;EAIf,OAAOiB,OAAO;AAClB,CAAC;AACDxB,QAAQ,CAACkC,WAAW,GAAG,UAAU;;;;"}
+{"version":3,"file":"Checkbox.js","sources":["../../../../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { Icon } from '../Icon/Icon';\nimport { useId } from '../../hooks/useId';\nimport { Spinner } from '../Spinner/Spinner';\n\ntype CheckedState = boolean | 'indeterminate';\n\ntype CheckboxBaseProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onChange'> & {\n    /**\n     * Indeterminate state should only be used with sub-checkboxes. The indeterminate state is shown if not all\n     * sub-checkboxes are selected. This only affects the style, changing the icon in the checkbox.\n     */\n    indeterminate?: boolean;\n    /* Whether the checkbox is in an invalid state */\n    invalid?: boolean;\n    /** Label for the checkbox */\n    label?: React.ReactNode;\n    /** Displays loading state in checkbox */\n    loading?: boolean;\n    /* Whether user input is required */\n    required?: boolean;\n};\n\nexport interface UncontrolledCheckboxProps extends CheckboxBaseProps {\n    checked?: never;\n    onChange?: never;\n    /* The default checked state (uncontrolled) */\n    defaultChecked?: boolean;\n}\n\nexport interface ControlledCheckboxProps extends CheckboxBaseProps {\n    defaultChecked?: never;\n    /* The current checked state (controlled) */\n    checked: boolean;\n    /* Handler called when the checked state changes */\n    onChange: (checked: boolean) => void;\n}\n\nexport type CheckboxProps = UncontrolledCheckboxProps | ControlledCheckboxProps;\n\nexport const Checkbox = React.forwardRef(function Checkbox(props: CheckboxProps, ref: React.Ref<HTMLButtonElement>) {\n    const { checked, indeterminate, invalid, label, loading, onChange, ...otherProps } = props;\n    const id = useId(props.id);\n\n    const className = cn(\n        'bg-white h-5 w-5 border rounded text-sm flex-shrink-0 focus-visible:yt-focus disabled:cursor-not-allowed text-white',\n        {\n            'self-start': !!label,\n            'mt-[0.1rem]': !label,\n        },\n        invalid\n            ? {\n                  'border-red-500 hover:border-red-700 aria-checked:border-red-500 aria-checked-mixed:border-red-500 aria-checked:bg-red-500 aria-checked-mixed:bg-red-500 aria-checked:hover:border-red-700 aria-checked-mixed:hover:border-red-700 aria-checked:hover:bg-red-700 aria-checked-mixed:hover:bg-red-700':\n                      !props.disabled,\n                  'border-red-500/50 aria-checked:wcag-red-500/50 aria-checked-mixed:wcag-red-500/50': props.disabled,\n              }\n            : {\n                  'border-grey-500 hover:border-grey-700 aria-checked:border-blue-500 aria-checked-mixed:border-blue-500 aria-checked:bg-blue-500 aria-checked-mixed:bg-blue-500 aria-checked:hover:border-blue-700 aria-checked-mixed:hover:border-blue-700 aria-checked:hover:bg-blue-700 aria-checked-mixed:hover:bg-blue-700':\n                      !props.disabled,\n                  'border-grey-500/50 aria-checked:bg-blue-500/50 aria-checked-mixed:bg-blue-500/50': props.disabled,\n              },\n        props.className\n    );\n\n    let handleChange: ((checked: CheckedState) => void) | undefined;\n\n    if (onChange) {\n        handleChange = (checked: CheckedState) => onChange(checked === 'indeterminate' ? false : checked);\n    }\n\n    let labelledByProps: Record<string, string> | null = null;\n\n    if (label) {\n        labelledByProps = {\n            'aria-labelledby': `${id}-label`,\n            id,\n        };\n    }\n\n    // the enter keyboard shortcut isn't supported by default, but we want it\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n        if (event.key === 'Enter') {\n            event.currentTarget.click();\n        }\n    };\n\n    const spinnerClassname = cn(\n        //Spinner is slightly bigger then 'line' and 'tick' icons, so making it 2px smaller from each side\n        \"m-0.5 !h-[calc(100%-theme('spacing.1'))] !w-[calc(100%-theme('spacing.1'))]\",\n        { 'text-blue-500': !checked && !indeterminate }\n    );\n\n    const element = (\n        <CheckboxPrimitive.Root\n            {...otherProps}\n            {...labelledByProps}\n            aria-invalid={invalid ? 'true' : undefined}\n            data-taco=\"checkbox\"\n            checked={indeterminate ? 'indeterminate' : checked}\n            className={className}\n            onCheckedChange={handleChange}\n            onKeyDown={handleKeyDown}\n            ref={ref}>\n            {loading ? (\n                <Spinner className={spinnerClassname} />\n            ) : (\n                <CheckboxPrimitive.Indicator className=\"flex h-full w-full\">\n                    <Icon name={indeterminate ? 'line' : 'tick'} className=\"!h-full !w-full\" />\n                </CheckboxPrimitive.Indicator>\n            )}\n        </CheckboxPrimitive.Root>\n    );\n\n    if (label) {\n        const labelContainerClassName = cn('flex items-center cursor-pointer gap-2', {\n            'cursor-not-allowed text-grey-300': props.disabled,\n        });\n\n        return (\n            <span className={labelContainerClassName} data-taco=\"checkbox-container\">\n                {element}\n                <label htmlFor={id} id={`${id}-label`}>\n                    {label}\n                </label>\n            </span>\n        );\n    }\n\n    return element;\n});\nCheckbox.displayName = 'Checkbox';\n"],"names":["Checkbox","React","props","ref","checked","indeterminate","invalid","label","loading","onChange","otherProps","id","useId","className","cn","disabled","handleChange","labelledByProps","handleKeyDown","event","key","currentTarget","click","spinnerClassname","element","CheckboxPrimitive","undefined","onCheckedChange","onKeyDown","Spinner","Icon","name","labelContainerClassName","htmlFor","displayName"],"mappings":";;;;;;;MA0CaA,QAAQ,gBAAGC,UAAgB,CAAC,SAASD,QAAQA,CAACE,KAAoB,EAAEC,GAAiC;EAC9G,MAAM;IAAEC,OAAO;IAAEC,aAAa;IAAEC,OAAO;IAAEC,KAAK;IAAEC,OAAO;IAAEC,QAAQ;IAAE,GAAGC;GAAY,GAAGR,KAAK;EAC1F,MAAMS,EAAE,GAAGC,KAAK,CAACV,KAAK,CAACS,EAAE,CAAC;EAE1B,MAAME,SAAS,GAAGC,EAAE,CAChB,qHAAqH,EACrH;IACI,YAAY,EAAE,CAAC,CAACP,KAAK;IACrB,aAAa,EAAE,CAACA;GACnB,EACDD,OAAO,GACD;IACI,qSAAqS,EACjS,CAACJ,KAAK,CAACa,QAAQ;IACnB,mFAAmF,EAAEb,KAAK,CAACa;GAC9F,GACD;IACI,+SAA+S,EAC3S,CAACb,KAAK,CAACa,QAAQ;IACnB,kFAAkF,EAAEb,KAAK,CAACa;GAC7F,EACPb,KAAK,CAACW,SAAS,CAClB;EAED,IAAIG,YAA2D;EAE/D,IAAIP,QAAQ,EAAE;IACVO,YAAY,GAAIZ,OAAqB,IAAKK,QAAQ,CAACL,OAAO,KAAK,eAAe,GAAG,KAAK,GAAGA,OAAO,CAAC;;EAGrG,IAAIa,eAAe,GAAkC,IAAI;EAEzD,IAAIV,KAAK,EAAE;IACPU,eAAe,GAAG;MACd,iBAAiB,EAAE,GAAGN,EAAE,QAAQ;MAChCA;KACH;;;EAIL,MAAMO,aAAa,GAAIC,KAA6C;IAChE,IAAIA,KAAK,CAACC,GAAG,KAAK,OAAO,EAAE;MACvBD,KAAK,CAACE,aAAa,CAACC,KAAK,EAAE;;GAElC;EAED,MAAMC,gBAAgB,GAAGT,EAAE;;EAEvB,6EAA6E,EAC7E;IAAE,eAAe,EAAE,CAACV,OAAO,IAAI,CAACC;GAAe,CAClD;EAED,MAAMmB,OAAO,gBACTvB,cAACwB,IAAsB,oBACff,UAAU,EACVO,eAAe;oBACLX,OAAO,GAAG,MAAM,GAAGoB,SAAS;iBAChC,UAAU;IACpBtB,OAAO,EAAEC,aAAa,GAAG,eAAe,GAAGD,OAAO;IAClDS,SAAS,EAAEA,SAAS;IACpBc,eAAe,EAAEX,YAAY;IAC7BY,SAAS,EAAEV,aAAa;IACxBf,GAAG,EAAEA;MACJK,OAAO,iBACJP,cAAC4B,OAAO;IAAChB,SAAS,EAAEU;IAAoB,kBAExCtB,cAACwB,SAA2B;IAACZ,SAAS,EAAC;kBACnCZ,cAAC6B,IAAI;IAACC,IAAI,EAAE1B,aAAa,GAAG,MAAM,GAAG,MAAM;IAAEQ,SAAS,EAAC;IAAoB,CACjD,CACjC,CAER;EAED,IAAIN,KAAK,EAAE;IACP,MAAMyB,uBAAuB,GAAGlB,EAAE,CAAC,wCAAwC,EAAE;MACzE,kCAAkC,EAAEZ,KAAK,CAACa;KAC7C,CAAC;IAEF,oBACId;MAAMY,SAAS,EAAEmB,uBAAuB;mBAAY;OAC/CR,OAAO,eACRvB;MAAOgC,OAAO,EAAEtB,EAAE;MAAEA,EAAE,EAAE,GAAGA,EAAE;OACxBJ,KAAK,CACF,CACL;;EAIf,OAAOiB,OAAO;AAClB,CAAC;AACDxB,QAAQ,CAACkC,WAAW,GAAG,UAAU;;;;"}

package/dist/esm/packages/taco/src/components/Datepicker/useDatepicker.js

@@ -1,6 +1,7 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { useMergedRef } from '../../hooks/useMergedRef.js';
 import { useLocalization } from '../Provider/Localization.js';
+import { isMatch } from 'react-day-picker';
 import { setInputValueByRef } from '../../utils/input.js';
 import { format, parse, parseFromCustomString } from '../../utils/date.js';
 
@@ -26,6 +27,12 @@ const useDatepicker = ({
       setInternalValue(formattedValue !== null && formattedValue !== void 0 ? formattedValue : '');
     }
   }, [value]);
+  const isDisabledDay = useMemo(() => {
+    if (originalValueAsDate && calendar !== null && calendar !== void 0 && calendar.disabledDays) {
+      return isMatch(originalValueAsDate, calendar === null || calendar === void 0 ? void 0 : calendar.disabledDays); // can happen if you type a disabled date in input.
+    }
+    return false;
+  }, [originalValueAsDate]);
   // event handlers
   const handleInputBlur = event => {
     event.persist();
@@ -62,6 +69,7 @@ const useDatepicker = ({
   const inputProps = {
     ...props,
     autoComplete: 'off',
+    invalid: props.invalid || isDisabledDay,
     onBlur: handleInputBlur,
     onChange: handleInputChange,
     onKeyDown: handleKeyDown,

package/dist/esm/packages/taco/src/components/Datepicker/useDatepicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDatepicker.js","sources":["../../../../../../../src/components/Datepicker/useDatepicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { parseFromCustomString, format, parse } from '../../utils/date';\nimport { useLocalization } from '../Provider/Localization';\nimport { setInputValueByRef } from '../../utils/input';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { DatepickerProps } from './Datepicker';\nimport { CalendarProps } from '../Calendar/Calendar';\nimport { InputProps as BaseInputProps } from '../Input/Input';\n\ntype InputProps = BaseInputProps & { ref: React.RefObject<HTMLInputElement> };\ntype useDatepicker = React.HTMLAttributes<HTMLDivElement> & {\n    calendar: CalendarProps;\n    input: InputProps;\n};\n\nexport const useDatepicker = (\n    { defaultValue: _, calendar, onBlur, onChange, value, ...props }: DatepickerProps,\n    ref: React.Ref<HTMLInputElement>\n): useDatepicker => {\n    const inputRef = useMergedRef<HTMLInputElement>(ref);\n    const { formatting } = useLocalization();\n    const [internalValue, setInternalValue] = React.useState(format(value, formatting.date) ?? '');\n    const originalValueAsDate = parse(value);\n\n    // update internal value if it changed 'externally'\n    React.useEffect(() => {\n        const formattedValue = format(value, formatting.date);\n\n        if (formattedValue !== internalValue) {\n            setInternalValue(formattedValue ?? '');\n        }\n    }, [value]);\n\n    // event handlers\n    const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        const valueAsDate = parseFromCustomString(\n            event.target.value,\n            'dd.mm.yy',\n            originalValueAsDate?.getMonth(),\n            originalValueAsDate?.getFullYear()\n        );\n        const formattedValue = valueAsDate ? format(valueAsDate) || '' : '';\n\n        event.target.value = formattedValue;\n\n        if (onChange) {\n            (event as any).detail = valueAsDate;\n            onChange(event);\n        } else {\n            // update the internal value to use the formatted date\n            setInternalValue(formattedValue);\n        }\n\n        if (onBlur) {\n            onBlur(event);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        setInternalValue(event.target.value);\n    };\n\n    const handleChange = date => {\n        setInputValueByRef(inputRef.current, format(date, formatting.date), 'focusout');\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        if (props.onKeyDown) {\n            props.onKeyDown(event);\n        }\n\n        if (event.key === 'Enter') {\n            event.target.dispatchEvent(new Event('focusout', { bubbles: true }));\n        }\n    };\n\n    const inputProps: InputProps = {\n        ...props,\n        autoComplete: 'off',\n        onBlur: handleInputBlur,\n        onChange: handleInputChange,\n        onKeyDown: handleKeyDown,\n        ref: inputRef,\n        type: 'text',\n        value: internalValue,\n    };\n\n    const calendarProps: CalendarProps = {\n        ...calendar,\n        onChange: handleChange,\n        value: originalValueAsDate,\n    };\n\n    return {\n        input: inputProps,\n        calendar: calendarProps,\n    };\n};\n"],"names":["useDatepicker","defaultValue","_","calendar","onBlur","onChange","value","props","ref","inputRef","useMergedRef","formatting","useLocalization","internalValue","setInternalValue","React","_format","format","date","originalValueAsDate","parse","formattedValue","handleInputBlur","event","persist","valueAsDate","parseFromCustomString","target","getMonth","getFullYear","detail","handleInputChange","handleChange","setInputValueByRef","current","handleKeyDown","onKeyDown","key","dispatchEvent","Event","bubbles","inputProps","autoComplete","type","calendarProps","input"],"mappings":"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"}
+{"version":3,"file":"useDatepicker.js","sources":["../../../../../../../src/components/Datepicker/useDatepicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { isMatch } from 'react-day-picker';\nimport { parseFromCustomString, format, parse } from '../../utils/date';\nimport { useLocalization } from '../Provider/Localization';\nimport { setInputValueByRef } from '../../utils/input';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { DatepickerProps } from './Datepicker';\nimport { CalendarProps } from '../Calendar/Calendar';\nimport { InputProps as BaseInputProps } from '../Input/Input';\n\ntype InputProps = BaseInputProps & { ref: React.RefObject<HTMLInputElement> };\ntype useDatepicker = React.HTMLAttributes<HTMLDivElement> & {\n    calendar: CalendarProps;\n    input: InputProps;\n};\n\nexport const useDatepicker = (\n    { defaultValue: _, calendar, onBlur, onChange, value, ...props }: DatepickerProps,\n    ref: React.Ref<HTMLInputElement>\n): useDatepicker => {\n    const inputRef = useMergedRef<HTMLInputElement>(ref);\n    const { formatting } = useLocalization();\n    const [internalValue, setInternalValue] = React.useState(format(value, formatting.date) ?? '');\n    const originalValueAsDate = parse(value);\n\n    // update internal value if it changed 'externally'\n    React.useEffect(() => {\n        const formattedValue = format(value, formatting.date);\n\n        if (formattedValue !== internalValue) {\n            setInternalValue(formattedValue ?? '');\n        }\n    }, [value]);\n\n    const isDisabledDay = React.useMemo(() => {\n        if (originalValueAsDate && calendar?.disabledDays) {\n            return isMatch(originalValueAsDate, calendar?.disabledDays); // can happen if you type a disabled date in input.\n        }\n\n        return false;\n    }, [originalValueAsDate]);\n\n    // event handlers\n    const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        const valueAsDate = parseFromCustomString(\n            event.target.value,\n            'dd.mm.yy',\n            originalValueAsDate?.getMonth(),\n            originalValueAsDate?.getFullYear()\n        );\n        const formattedValue = valueAsDate ? format(valueAsDate) || '' : '';\n\n        event.target.value = formattedValue;\n\n        if (onChange) {\n            (event as any).detail = valueAsDate;\n            onChange(event);\n        } else {\n            // update the internal value to use the formatted date\n            setInternalValue(formattedValue);\n        }\n\n        if (onBlur) {\n            onBlur(event);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        setInternalValue(event.target.value);\n    };\n\n    const handleChange = date => {\n        setInputValueByRef(inputRef.current, format(date, formatting.date), 'focusout');\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        if (props.onKeyDown) {\n            props.onKeyDown(event);\n        }\n\n        if (event.key === 'Enter') {\n            event.target.dispatchEvent(new Event('focusout', { bubbles: true }));\n        }\n    };\n\n    const inputProps: InputProps = {\n        ...props,\n        autoComplete: 'off',\n        invalid: props.invalid || isDisabledDay,\n        onBlur: handleInputBlur,\n        onChange: handleInputChange,\n        onKeyDown: handleKeyDown,\n        ref: inputRef,\n        type: 'text',\n        value: internalValue,\n    };\n\n    const calendarProps: CalendarProps = {\n        ...calendar,\n        onChange: handleChange,\n        value: originalValueAsDate,\n    };\n\n    return {\n        input: inputProps,\n        calendar: calendarProps,\n    };\n};\n"],"names":["useDatepicker","defaultValue","_","calendar","onBlur","onChange","value","props","ref","inputRef","useMergedRef","formatting","useLocalization","internalValue","setInternalValue","React","_format","format","date","originalValueAsDate","parse","formattedValue","isDisabledDay","disabledDays","isMatch","handleInputBlur","event","persist","valueAsDate","parseFromCustomString","target","getMonth","getFullYear","detail","handleInputChange","handleChange","setInputValueByRef","current","handleKeyDown","onKeyDown","key","dispatchEvent","Event","bubbles","inputProps","autoComplete","invalid","type","calendarProps","input"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Table3/Table3.js

@@ -23,7 +23,14 @@ const BaseTable3 = /*#__PURE__*/fixedForwardRef(function BaseTable3(props, ref)
     'data-table-editing-mode': (_table3$meta$editing = table3.meta.editing) !== null && _table3$meta$editing !== void 0 && _table3$meta$editing.isEditing ? (_table3$meta$editing2 = table3.meta.editing) !== null && _table3$meta$editing2 !== void 0 && _table3$meta$editing2.isDetailedMode ? 'detailed' : 'normal' : undefined,
     enableHorizontalArrowKeyNavigation: table3.meta.editing.isEditing
   };
-  const hasAlertErrors = table3.meta.editing.getErrorsShownInAlert().length;
+  const rowsById = table3.instance.getCoreRowModel().rowsById;
+  const hasAlertErrors = table3.meta.editing.getErrorsShownInAlert().filter(row => {
+    if (table3.meta.server._experimentalDataLoader2) {
+      // consumers of dataloader2 need to run a cleanup function, as this would otherwise return false when pages are unloaded.
+      return true;
+    }
+    return rowsById[row.rowId];
+  }).length;
   const hasCreateWorkflow = table3.meta.editing.isEnabled && props.onEditingCreate;
   const isScrolled = isTableScrolled(table3.ref);
   let createWorkflow;

package/dist/esm/packages/taco/src/components/Table3/Table3.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table3.js","sources":["../../../../../../../src/components/Table3/Table3.tsx"],"sourcesContent":["import React from 'react';\nimport { fixedForwardRef } from '../../types';\nimport { useTable3 } from './useTable3';\nimport { Table } from '../../primitives/Table/Core/Table';\nimport { Alert } from './components/Editing/Alert';\nimport { Table3Props, Table3Ref, Table3ColumnProps, Table3GroupProps } from './types';\nimport { Editing } from './components/Toolbar/Editing/Editing';\nimport { CreateNewRow } from './components/Row/Editing/CreateNewRow';\nimport { TemporaryRow } from './components/Row/Editing/TemporaryRow';\nimport './style.css';\nimport { isTableScrolled } from './util/editing';\n\nfunction Column<TType = unknown>(_: Table3ColumnProps<TType>) {\n    return null;\n}\nColumn.displayName = 'Table3Column';\n\nfunction Group(_: Table3GroupProps) {\n    return null;\n}\nGroup.displayName = 'Table3Group';\n\nconst BaseTable3 = fixedForwardRef(function BaseTable3<TType = unknown>(props: Table3Props<TType>, ref: React.Ref<Table3Ref>) {\n    const table3 = useTable3<TType>(props, ref);\n\n    const gridAttributes = {\n        'data-table-editing-mode': table3.meta.editing?.isEditing\n            ? table3.meta.editing?.isDetailedMode\n                ? 'detailed'\n                : 'normal'\n            : undefined,\n        enableHorizontalArrowKeyNavigation: table3.meta.editing.isEditing,\n    };\n\n    const hasAlertErrors = table3.meta.editing.getErrorsShownInAlert().length;\n    const hasCreateWorkflow = table3.meta.editing.isEnabled && props.onEditingCreate;\n    const isScrolled = isTableScrolled(table3.ref);\n\n    let createWorkflow;\n\n    if (hasCreateWorkflow) {\n        createWorkflow = (\n            <CreateNewRow\n                buttonRef={table3.meta.editing.createRowButtonRef}\n                isScrolled={isScrolled}\n                table={table3.instance}\n                tableMeta={table3.meta}\n            />\n        );\n    }\n\n    return (\n        <Table>\n            <Table.Toolbar<TType> table={table3}>\n                {table3.meta.editing.isEnabled ? (\n                    <Editing scrollToIndex={table3.renderer.scrollToIndex} table={table3.instance} />\n                ) : null}\n            </Table.Toolbar>\n            {hasAlertErrors ? (\n                <Alert\n                    className=\"mb-4\"\n                    scrollToIndex={table3.renderer.scrollToIndex}\n                    table={table3.instance}\n                    tableRef={table3.ref}\n                />\n            ) : null}\n            <Table.Grid<TType>\n                {...gridAttributes}\n                data-taco=\"table3\"\n                footerRows={hasCreateWorkflow && isScrolled ? createWorkflow : undefined}\n                table={table3}>\n                {hasCreateWorkflow ? (\n                    <>\n                        <TemporaryRow\n                            createRowButtonRef={table3.meta.editing.createRowButtonRef}\n                            isScrolled={isScrolled}\n                            table={table3.instance}\n                            tableMeta={table3.meta}\n                            tableRef={table3.ref}\n                        />\n                        {!isScrolled ? createWorkflow : null}\n                    </>\n                ) : null}\n            </Table.Grid>\n        </Table>\n    );\n});\n\nexport const Table3 = fixedForwardRef(function Table3<TType = unknown>(props: Table3Props<TType>, ref: React.Ref<Table3Ref>) {\n    const stringifiedChildren = String(props.children);\n    // we force a remount (using key) when the child columns change because there are too many places to add children as an effect\n    // this is cheaper from a complexity perspective, and probably performance wise as well\n    const key = React.useMemo(() => String('tableKey_' + stringifiedChildren), [stringifiedChildren]);\n    return <BaseTable3<TType> {...props} key={key} ref={ref} />;\n}) as (<TType = unknown>(props: Table3Props<TType> & React.RefAttributes<Table3Ref>) => JSX.Element) & {\n    Column: typeof Column;\n    Group: typeof Group;\n};\nTable3.Column = Column;\nTable3.Group = Group;\n\nexport type {\n    Table3Ref,\n    Table3Props,\n    Table3ColumnProps,\n    Table3GroupProps,\n    Table3EditingSaveHandler,\n    Table3EditingValidatorFn,\n    Table3Texts,\n    Table3FeatureProps,\n    Table3CommonProps,\n    Table3WithoutEditingWithClientProps,\n    Table3WithoutEditingWithServerProps,\n    Table3WithEditingProps,\n    Table3WithEditingWithClientProps,\n    Table3WithEditingWithServerProps,\n    Table3EditingChangeHandler,\n    Table3EditingCreateHandler,\n} from './types';\n"],"names":["Column","_","displayName","Group","BaseTable3","fixedForwardRef","props","ref","table3","useTable3","gridAttributes","_table3$meta$editing","meta","editing","isEditing","_table3$meta$editing2","isDetailedMode","undefined","enableHorizontalArrowKeyNavigation","hasAlertErrors","getErrorsShownInAlert","length","hasCreateWorkflow","isEnabled","onEditingCreate","isScrolled","isTableScrolled","createWorkflow","React","CreateNewRow","buttonRef","createRowButtonRef","table","instance","tableMeta","Table","Toolbar","Editing","scrollToIndex","renderer","Alert","className","tableRef","Grid","footerRows","TemporaryRow","Table3","stringifiedChildren","String","children","key","useMemo"],"mappings":"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"}
+{"version":3,"file":"Table3.js","sources":["../../../../../../../src/components/Table3/Table3.tsx"],"sourcesContent":["import React from 'react';\nimport { fixedForwardRef } from '../../types';\nimport { useTable3 } from './useTable3';\nimport { Table } from '../../primitives/Table/Core/Table';\nimport { Alert } from './components/Editing/Alert';\nimport { Table3Props, Table3Ref, Table3ColumnProps, Table3GroupProps } from './types';\nimport { Editing } from './components/Toolbar/Editing/Editing';\nimport { CreateNewRow } from './components/Row/Editing/CreateNewRow';\nimport { TemporaryRow } from './components/Row/Editing/TemporaryRow';\nimport './style.css';\nimport { isTableScrolled } from './util/editing';\n\nfunction Column<TType = unknown>(_: Table3ColumnProps<TType>) {\n    return null;\n}\nColumn.displayName = 'Table3Column';\n\nfunction Group(_: Table3GroupProps) {\n    return null;\n}\nGroup.displayName = 'Table3Group';\n\nconst BaseTable3 = fixedForwardRef(function BaseTable3<TType = unknown>(props: Table3Props<TType>, ref: React.Ref<Table3Ref>) {\n    const table3 = useTable3<TType>(props, ref);\n\n    const gridAttributes = {\n        'data-table-editing-mode': table3.meta.editing?.isEditing\n            ? table3.meta.editing?.isDetailedMode\n                ? 'detailed'\n                : 'normal'\n            : undefined,\n        enableHorizontalArrowKeyNavigation: table3.meta.editing.isEditing,\n    };\n\n    const rowsById = table3.instance.getCoreRowModel().rowsById;\n    const hasAlertErrors = table3.meta.editing.getErrorsShownInAlert().filter(row => {\n        if (table3.meta.server._experimentalDataLoader2) {\n            // consumers of dataloader2 need to run a cleanup function, as this would otherwise return false when pages are unloaded.\n            return true;\n        }\n\n        return rowsById[row.rowId];\n    }).length;\n\n    const hasCreateWorkflow = table3.meta.editing.isEnabled && props.onEditingCreate;\n    const isScrolled = isTableScrolled(table3.ref);\n\n    let createWorkflow;\n\n    if (hasCreateWorkflow) {\n        createWorkflow = (\n            <CreateNewRow\n                buttonRef={table3.meta.editing.createRowButtonRef}\n                isScrolled={isScrolled}\n                table={table3.instance}\n                tableMeta={table3.meta}\n            />\n        );\n    }\n\n    return (\n        <Table>\n            <Table.Toolbar<TType> table={table3}>\n                {table3.meta.editing.isEnabled ? (\n                    <Editing scrollToIndex={table3.renderer.scrollToIndex} table={table3.instance} />\n                ) : null}\n            </Table.Toolbar>\n            {hasAlertErrors ? (\n                <Alert\n                    className=\"mb-4\"\n                    scrollToIndex={table3.renderer.scrollToIndex}\n                    table={table3.instance}\n                    tableRef={table3.ref}\n                />\n            ) : null}\n            <Table.Grid<TType>\n                {...gridAttributes}\n                data-taco=\"table3\"\n                footerRows={hasCreateWorkflow && isScrolled ? createWorkflow : undefined}\n                table={table3}>\n                {hasCreateWorkflow ? (\n                    <>\n                        <TemporaryRow\n                            createRowButtonRef={table3.meta.editing.createRowButtonRef}\n                            isScrolled={isScrolled}\n                            table={table3.instance}\n                            tableMeta={table3.meta}\n                            tableRef={table3.ref}\n                        />\n                        {!isScrolled ? createWorkflow : null}\n                    </>\n                ) : null}\n            </Table.Grid>\n        </Table>\n    );\n});\n\nexport const Table3 = fixedForwardRef(function Table3<TType = unknown>(props: Table3Props<TType>, ref: React.Ref<Table3Ref>) {\n    const stringifiedChildren = String(props.children);\n    // we force a remount (using key) when the child columns change because there are too many places to add children as an effect\n    // this is cheaper from a complexity perspective, and probably performance wise as well\n    const key = React.useMemo(() => String('tableKey_' + stringifiedChildren), [stringifiedChildren]);\n    return <BaseTable3<TType> {...props} key={key} ref={ref} />;\n}) as (<TType = unknown>(props: Table3Props<TType> & React.RefAttributes<Table3Ref>) => JSX.Element) & {\n    Column: typeof Column;\n    Group: typeof Group;\n};\nTable3.Column = Column;\nTable3.Group = Group;\n\nexport type {\n    Table3Ref,\n    Table3Props,\n    Table3ColumnProps,\n    Table3GroupProps,\n    Table3EditingSaveHandler,\n    Table3EditingValidatorFn,\n    Table3Texts,\n    Table3FeatureProps,\n    Table3CommonProps,\n    Table3WithoutEditingWithClientProps,\n    Table3WithoutEditingWithServerProps,\n    Table3WithEditingProps,\n    Table3WithEditingWithClientProps,\n    Table3WithEditingWithServerProps,\n    Table3EditingChangeHandler,\n    Table3EditingCreateHandler,\n} from './types';\n"],"names":["Column","_","displayName","Group","BaseTable3","fixedForwardRef","props","ref","table3","useTable3","gridAttributes","_table3$meta$editing","meta","editing","isEditing","_table3$meta$editing2","isDetailedMode","undefined","enableHorizontalArrowKeyNavigation","rowsById","instance","getCoreRowModel","hasAlertErrors","getErrorsShownInAlert","filter","row","server","_experimentalDataLoader2","rowId","length","hasCreateWorkflow","isEnabled","onEditingCreate","isScrolled","isTableScrolled","createWorkflow","React","CreateNewRow","buttonRef","createRowButtonRef","table","tableMeta","Table","Toolbar","Editing","scrollToIndex","renderer","Alert","className","tableRef","Grid","footerRows","TemporaryRow","Table3","stringifiedChildren","String","children","key","useMemo"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Table3/components/Editing/DiscardChangesConfirmationDialog.js

@@ -23,7 +23,6 @@ function DiscardChangesConfirmationDialog(props) {
   }, /*#__PURE__*/React__default.createElement(Dialog.Title, null, texts.table3.editing.clearChangesConfirmationDialog.title), /*#__PURE__*/React__default.createElement("p", null, texts.table3.editing.clearChangesConfirmationDialog.description), /*#__PURE__*/React__default.createElement(Dialog.Footer, null, /*#__PURE__*/React__default.createElement(Group, null, /*#__PURE__*/React__default.createElement(Dialog.Close, null, /*#__PURE__*/React__default.createElement(Button, {
     tabIndex: 0
   }, texts.table3.editing.clearChangesConfirmationDialog.cancel)), /*#__PURE__*/React__default.createElement(Dialog.Close, null, /*#__PURE__*/React__default.createElement(Button, {
-    autoFocus: true,
     tabIndex: 0,
     appearance: "primary",
     onClick: handleDiscard

package/dist/esm/packages/taco/src/components/Table3/components/Editing/DiscardChangesConfirmationDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"DiscardChangesConfirmationDialog.js","sources":["../../../../../../../../../src/components/Table3/components/Editing/DiscardChangesConfirmationDialog.tsx"],"sourcesContent":["import React from 'react';\nimport { Dialog, DialogProps } from '../../../Dialog/Dialog';\nimport { useLocalization } from '../../../Provider/Localization';\nimport { Group } from '../../../Group/Group';\nimport { Button } from '../../../Button/Button';\n\ntype DiscardChangesConfirmationDialogProps = Partial<DialogProps> & {\n    onDiscard: () => void;\n};\n\nexport function DiscardChangesConfirmationDialog(props: DiscardChangesConfirmationDialogProps) {\n    const { onDiscard: handleDiscard, ...dialogProps } = props;\n    const { texts } = useLocalization();\n\n    const handleClickInsideDialogContent = (event: React.MouseEvent) => {\n        // Prevents the click event from propagating to the table, ensuring the row isn't saved when a click occurs\n        // inside the dialog\n        event.stopPropagation();\n    };\n\n    return (\n        <Dialog {...dialogProps}>\n            <Dialog.Content\n                aria-label={texts.table3.editing.clearChangesConfirmationDialog.title}\n                onClick={handleClickInsideDialogContent}>\n                <Dialog.Title>{texts.table3.editing.clearChangesConfirmationDialog.title}</Dialog.Title>\n\n                <p>{texts.table3.editing.clearChangesConfirmationDialog.description}</p>\n\n                <Dialog.Footer>\n                    <Group>\n                        <Dialog.Close>\n                            <Button tabIndex={0}>{texts.table3.editing.clearChangesConfirmationDialog.cancel}</Button>\n                        </Dialog.Close>\n                        <Dialog.Close>\n                            <Button autoFocus tabIndex={0} appearance=\"primary\" onClick={handleDiscard}>\n                                {texts.table3.editing.clearChangesConfirmationDialog.confirm}\n                            </Button>\n                        </Dialog.Close>\n                    </Group>\n                </Dialog.Footer>\n            </Dialog.Content>\n        </Dialog>\n    );\n}\n"],"names":["DiscardChangesConfirmationDialog","props","onDiscard","handleDiscard","dialogProps","texts","useLocalization","handleClickInsideDialogContent","event","stopPropagation","React","Dialog","Content","table3","editing","clearChangesConfirmationDialog","title","onClick","Title","description","Footer","Group","Close","Button","tabIndex","cancel","autoFocus","appearance","confirm"],"mappings":";;;;;;SAUgBA,gCAAgCA,CAACC,KAA4C;EACzF,MAAM;IAAEC,SAAS,EAAEC,aAAa;IAAE,GAAGC;GAAa,GAAGH,KAAK;EAC1D,MAAM;IAAEI;GAAO,GAAGC,eAAe,EAAE;EAEnC,MAAMC,8BAA8B,GAAIC,KAAuB;;;IAG3DA,KAAK,CAACC,eAAe,EAAE;GAC1B;EAED,oBACIC,6BAACC,MAAM,oBAAKP,WAAW,gBACnBM,6BAACC,MAAM,CAACC,OAAO;kBACCP,KAAK,CAACQ,MAAM,CAACC,OAAO,CAACC,8BAA8B,CAACC,KAAK;IACrEC,OAAO,EAAEV;kBACTG,6BAACC,MAAM,CAACO,KAAK,QAAEb,KAAK,CAACQ,MAAM,CAACC,OAAO,CAACC,8BAA8B,CAACC,KAAK,CAAgB,eAExFN,wCAAIL,KAAK,CAACQ,MAAM,CAACC,OAAO,CAACC,8BAA8B,CAACI,WAAW,CAAK,eAExET,6BAACC,MAAM,CAACS,MAAM,qBACVV,6BAACW,KAAK,qBACFX,6BAACC,MAAM,CAACW,KAAK,qBACTZ,6BAACa,MAAM;IAACC,QAAQ,EAAE;KAAInB,KAAK,CAACQ,MAAM,CAACC,OAAO,CAACC,8BAA8B,CAACU,MAAM,CAAU,CAC/E,eACff,6BAACC,MAAM,CAACW,KAAK,qBACTZ,6BAACa,MAAM;IAACG,SAAS;IAACF,QAAQ,EAAE,CAAC;IAAEG,UAAU,EAAC,SAAS;IAACV,OAAO,EAAEd;KACxDE,KAAK,CAACQ,MAAM,CAACC,OAAO,CAACC,8BAA8B,CAACa,OAAO,CACvD,CACE,CACX,CACI,CACH,CACZ;AAEjB;;;;"}
+{"version":3,"file":"DiscardChangesConfirmationDialog.js","sources":["../../../../../../../../../src/components/Table3/components/Editing/DiscardChangesConfirmationDialog.tsx"],"sourcesContent":["import React from 'react';\nimport { Dialog, DialogProps } from '../../../Dialog/Dialog';\nimport { useLocalization } from '../../../Provider/Localization';\nimport { Group } from '../../../Group/Group';\nimport { Button } from '../../../Button/Button';\n\ntype DiscardChangesConfirmationDialogProps = Partial<DialogProps> & {\n    onDiscard: () => void;\n};\n\nexport function DiscardChangesConfirmationDialog(props: DiscardChangesConfirmationDialogProps) {\n    const { onDiscard: handleDiscard, ...dialogProps } = props;\n    const { texts } = useLocalization();\n\n    const handleClickInsideDialogContent = (event: React.MouseEvent) => {\n        // Prevents the click event from propagating to the table, ensuring the row isn't saved when a click occurs\n        // inside the dialog\n        event.stopPropagation();\n    };\n\n    return (\n        <Dialog {...dialogProps}>\n            <Dialog.Content\n                aria-label={texts.table3.editing.clearChangesConfirmationDialog.title}\n                onClick={handleClickInsideDialogContent}>\n                <Dialog.Title>{texts.table3.editing.clearChangesConfirmationDialog.title}</Dialog.Title>\n\n                <p>{texts.table3.editing.clearChangesConfirmationDialog.description}</p>\n\n                <Dialog.Footer>\n                    <Group>\n                        <Dialog.Close>\n                            <Button tabIndex={0}>{texts.table3.editing.clearChangesConfirmationDialog.cancel}</Button>\n                        </Dialog.Close>\n                        <Dialog.Close>\n                            <Button tabIndex={0} appearance=\"primary\" onClick={handleDiscard}>\n                                {texts.table3.editing.clearChangesConfirmationDialog.confirm}\n                            </Button>\n                        </Dialog.Close>\n                    </Group>\n                </Dialog.Footer>\n            </Dialog.Content>\n        </Dialog>\n    );\n}\n"],"names":["DiscardChangesConfirmationDialog","props","onDiscard","handleDiscard","dialogProps","texts","useLocalization","handleClickInsideDialogContent","event","stopPropagation","React","Dialog","Content","table3","editing","clearChangesConfirmationDialog","title","onClick","Title","description","Footer","Group","Close","Button","tabIndex","cancel","appearance","confirm"],"mappings":";;;;;;SAUgBA,gCAAgCA,CAACC,KAA4C;EACzF,MAAM;IAAEC,SAAS,EAAEC,aAAa;IAAE,GAAGC;GAAa,GAAGH,KAAK;EAC1D,MAAM;IAAEI;GAAO,GAAGC,eAAe,EAAE;EAEnC,MAAMC,8BAA8B,GAAIC,KAAuB;;;IAG3DA,KAAK,CAACC,eAAe,EAAE;GAC1B;EAED,oBACIC,6BAACC,MAAM,oBAAKP,WAAW,gBACnBM,6BAACC,MAAM,CAACC,OAAO;kBACCP,KAAK,CAACQ,MAAM,CAACC,OAAO,CAACC,8BAA8B,CAACC,KAAK;IACrEC,OAAO,EAAEV;kBACTG,6BAACC,MAAM,CAACO,KAAK,QAAEb,KAAK,CAACQ,MAAM,CAACC,OAAO,CAACC,8BAA8B,CAACC,KAAK,CAAgB,eAExFN,wCAAIL,KAAK,CAACQ,MAAM,CAACC,OAAO,CAACC,8BAA8B,CAACI,WAAW,CAAK,eAExET,6BAACC,MAAM,CAACS,MAAM,qBACVV,6BAACW,KAAK,qBACFX,6BAACC,MAAM,CAACW,KAAK,qBACTZ,6BAACa,MAAM;IAACC,QAAQ,EAAE;KAAInB,KAAK,CAACQ,MAAM,CAACC,OAAO,CAACC,8BAA8B,CAACU,MAAM,CAAU,CAC/E,eACff,6BAACC,MAAM,CAACW,KAAK,qBACTZ,6BAACa,MAAM;IAACC,QAAQ,EAAE,CAAC;IAAEE,UAAU,EAAC,SAAS;IAACT,OAAO,EAAEd;KAC9CE,KAAK,CAACQ,MAAM,CAACC,OAAO,CAACC,8BAA8B,CAACY,OAAO,CACvD,CACE,CACX,CACI,CACH,CACZ;AAEjB;;;;"}

package/dist/esm/packages/taco/src/components/Table3/listeners/useTableEditingListener.js

@@ -52,21 +52,13 @@ function useTableEditingListener(table, tableRef, scrollToIndex) {
     document.addEventListener('click', onClickOutside);
     return () => document.removeEventListener('click', onClickOutside);
   }, [tableMeta.editing.isEditing, tableMeta.editing.saveChanges]);
-  /*
-  const rows = table.getRowModel().rows;
-   // make sure pending changes are removed for rows that no longer exist
-  useLazyEffect(() => {
-      const pendingChanges = tableMeta.editing.getErrorsShownInAlert();
-       pendingChanges.forEach(pendingChange => {
-          try {
-              table.getRow(pendingChange.rowId);
-          } catch {
-              // TODO: this has the potential to remove changes for "unloaded" rows in server loading
-              //tableMeta.editing.discardChanges(pendingChange.rowId, table);
-          }
-      });
-  }, [rows.length]);
-  */
+  React__default.useEffect(() => {
+    if (tableMeta.editing.isEnabled) {
+      tableMeta.rowActions.registerHandler('cleanup', rowId => {
+        tableMeta.editing.discardChanges(rowId, table);
+      });
+    }
+  }, []);
   // shortcuts
   useGlobalKeyDown(tableMeta.editing.isEnabled ? shortcut : undefined, event => {
     event.preventDefault();

package/dist/esm/packages/taco/src/components/Table3/listeners/useTableEditingListener.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTableEditingListener.js","sources":["../../../../../../../../src/components/Table3/listeners/useTableEditingListener.ts"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport { useLazyEffect } from '../../../hooks/useLazyEffect';\nimport { isElementInsideOrTriggeredFromContainer } from '../../../utils/dom';\nimport { TableRef } from '../../../primitives/Table/types';\nimport { resetHighlightedColumnIndexes } from '../../../primitives/Table/useTableManager/util/search';\nimport { useLocalization } from '../../Provider/Localization';\nimport { useGlobalKeyDown } from '../../../hooks/useGlobalKeyDown';\nimport { shortcut } from '../util/editing';\n\nexport function useTableEditingListener<TType = unknown>(\n    table: ReactTable<TType>,\n    tableRef: React.RefObject<TableRef>,\n    scrollToIndex: (index: number) => void\n) {\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n    const localization = useLocalization();\n\n    useLazyEffect(() => {\n        return () => {\n            if (tableMeta.editing.isEditing && tableMeta.rowActive.rowActiveIndex !== undefined) {\n                tableMeta.editing.saveChanges(table, table.getRowModel().rows[tableMeta.rowActive.rowActiveIndex]?.id);\n            }\n        };\n    }, [tableMeta.rowActive.rowActiveIndex]);\n\n    // show a warning if the user navigates away without triggering save, such as using the browser back/forward button\n    const hasChanges = tableMeta.editing.hasChanges();\n\n    React.useEffect(() => {\n        function showUnsavedChangesWarning(event: BeforeUnloadEvent) {\n            if (tableMeta.editing.isEditing && hasChanges) {\n                event.returnValue = true;\n                return true;\n            }\n\n            return false;\n        }\n\n        window.addEventListener('beforeunload', showUnsavedChangesWarning);\n\n        return () => {\n            window.removeEventListener('beforeunload', showUnsavedChangesWarning);\n        };\n    }, [tableMeta.editing.isEditing, hasChanges]);\n\n    const hasSavedChanges = tableMeta.editing.hasSaved();\n\n    useLazyEffect(() => {\n        if (hasSavedChanges) {\n            resetHighlightedColumnIndexes(table.getState().globalFilter, table, localization);\n        }\n    }, [hasSavedChanges]);\n\n    React.useEffect(() => {\n        const onClickOutside = (event: MouseEvent) => {\n            if (tableMeta.editing.isEditing) {\n                const element = event.target as Element;\n                const isTableOrIsInsideTable =\n                    element.tagName === 'TABLE' ||\n                    element.tagName === 'TBODY' ||\n                    element.getAttribute('data-taco') === 'backdrop' ||\n                    element.getAttribute('data-table') === 'editing-toggle' ||\n                    !document.body.contains(element) ||\n                    isElementInsideOrTriggeredFromContainer(element, tableRef.current);\n\n                // users can click the white space below rows which could be inside the table, but a valid scenario to save\n                if (!isTableOrIsInsideTable) {\n                    tableMeta.editing.saveChanges(table);\n                }\n            }\n        };\n\n        document.addEventListener('click', onClickOutside);\n\n        return () => document.removeEventListener('click', onClickOutside);\n    }, [tableMeta.editing.isEditing, tableMeta.editing.saveChanges]);\n\n    /*\n    const rows = table.getRowModel().rows;\n\n    // make sure pending changes are removed for rows that no longer exist\n    useLazyEffect(() => {\n        const pendingChanges = tableMeta.editing.getErrorsShownInAlert();\n\n        pendingChanges.forEach(pendingChange => {\n            try {\n                table.getRow(pendingChange.rowId);\n            } catch {\n                // TODO: this has the potential to remove changes for \"unloaded\" rows in server loading\n                //tableMeta.editing.discardChanges(pendingChange.rowId, table);\n            }\n        });\n    }, [rows.length]);\n    */\n\n    // shortcuts\n    useGlobalKeyDown(tableMeta.editing.isEnabled ? shortcut : undefined, (event: KeyboardEvent) => {\n        event.preventDefault();\n        tableMeta.editing.toggleEditing(!tableMeta.editing.isEditing, table, scrollToIndex);\n    });\n\n    useGlobalKeyDown(tableMeta.editing.isEditing ? { key: 's', meta: true, shift: false } : undefined, event => {\n        event.preventDefault();\n        tableMeta.editing.saveChanges(table);\n    });\n}\n"],"names":["useTableEditingListener","table","tableRef","scrollToIndex","tableMeta","options","meta","localization","useLocalization","useLazyEffect","editing","isEditing","rowActive","rowActiveIndex","undefined","_table$getRowModel$ro","saveChanges","getRowModel","rows","id","hasChanges","React","useEffect","showUnsavedChangesWarning","event","returnValue","window","addEventListener","removeEventListener","hasSavedChanges","hasSaved","resetHighlightedColumnIndexes","getState","globalFilter","onClickOutside","element","target","isTableOrIsInsideTable","tagName","getAttribute","document","body","contains","isElementInsideOrTriggeredFromContainer","current","useGlobalKeyDown","isEnabled","shortcut","preventDefault","toggleEditing","key","shift"],"mappings":"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"}
+{"version":3,"file":"useTableEditingListener.js","sources":["../../../../../../../../src/components/Table3/listeners/useTableEditingListener.ts"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport { useLazyEffect } from '../../../hooks/useLazyEffect';\nimport { isElementInsideOrTriggeredFromContainer } from '../../../utils/dom';\nimport { TableRef } from '../../../primitives/Table/types';\nimport { resetHighlightedColumnIndexes } from '../../../primitives/Table/useTableManager/util/search';\nimport { useLocalization } from '../../Provider/Localization';\nimport { useGlobalKeyDown } from '../../../hooks/useGlobalKeyDown';\nimport { shortcut } from '../util/editing';\n\nexport function useTableEditingListener<TType = unknown>(\n    table: ReactTable<TType>,\n    tableRef: React.RefObject<TableRef>,\n    scrollToIndex: (index: number) => void\n) {\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n    const localization = useLocalization();\n\n    useLazyEffect(() => {\n        return () => {\n            if (tableMeta.editing.isEditing && tableMeta.rowActive.rowActiveIndex !== undefined) {\n                tableMeta.editing.saveChanges(table, table.getRowModel().rows[tableMeta.rowActive.rowActiveIndex]?.id);\n            }\n        };\n    }, [tableMeta.rowActive.rowActiveIndex]);\n\n    // show a warning if the user navigates away without triggering save, such as using the browser back/forward button\n    const hasChanges = tableMeta.editing.hasChanges();\n\n    React.useEffect(() => {\n        function showUnsavedChangesWarning(event: BeforeUnloadEvent) {\n            if (tableMeta.editing.isEditing && hasChanges) {\n                event.returnValue = true;\n                return true;\n            }\n\n            return false;\n        }\n\n        window.addEventListener('beforeunload', showUnsavedChangesWarning);\n\n        return () => {\n            window.removeEventListener('beforeunload', showUnsavedChangesWarning);\n        };\n    }, [tableMeta.editing.isEditing, hasChanges]);\n\n    const hasSavedChanges = tableMeta.editing.hasSaved();\n\n    useLazyEffect(() => {\n        if (hasSavedChanges) {\n            resetHighlightedColumnIndexes(table.getState().globalFilter, table, localization);\n        }\n    }, [hasSavedChanges]);\n\n    React.useEffect(() => {\n        const onClickOutside = (event: MouseEvent) => {\n            if (tableMeta.editing.isEditing) {\n                const element = event.target as Element;\n                const isTableOrIsInsideTable =\n                    element.tagName === 'TABLE' ||\n                    element.tagName === 'TBODY' ||\n                    element.getAttribute('data-taco') === 'backdrop' ||\n                    element.getAttribute('data-table') === 'editing-toggle' ||\n                    !document.body.contains(element) ||\n                    isElementInsideOrTriggeredFromContainer(element, tableRef.current);\n\n                // users can click the white space below rows which could be inside the table, but a valid scenario to save\n                if (!isTableOrIsInsideTable) {\n                    tableMeta.editing.saveChanges(table);\n                }\n            }\n        };\n\n        document.addEventListener('click', onClickOutside);\n\n        return () => document.removeEventListener('click', onClickOutside);\n    }, [tableMeta.editing.isEditing, tableMeta.editing.saveChanges]);\n\n    React.useEffect(() => {\n        if (tableMeta.editing.isEnabled) {\n            tableMeta.rowActions.registerHandler('cleanup', (rowId: string) => {\n                tableMeta.editing.discardChanges(rowId, table);\n            });\n        }\n    }, []);\n\n    // shortcuts\n    useGlobalKeyDown(tableMeta.editing.isEnabled ? shortcut : undefined, (event: KeyboardEvent) => {\n        event.preventDefault();\n        tableMeta.editing.toggleEditing(!tableMeta.editing.isEditing, table, scrollToIndex);\n    });\n\n    useGlobalKeyDown(tableMeta.editing.isEditing ? { key: 's', meta: true, shift: false } : undefined, event => {\n        event.preventDefault();\n        tableMeta.editing.saveChanges(table);\n    });\n}\n"],"names":["useTableEditingListener","table","tableRef","scrollToIndex","tableMeta","options","meta","localization","useLocalization","useLazyEffect","editing","isEditing","rowActive","rowActiveIndex","undefined","_table$getRowModel$ro","saveChanges","getRowModel","rows","id","hasChanges","React","useEffect","showUnsavedChangesWarning","event","returnValue","window","addEventListener","removeEventListener","hasSavedChanges","hasSaved","resetHighlightedColumnIndexes","getState","globalFilter","onClickOutside","element","target","isTableOrIsInsideTable","tagName","getAttribute","document","body","contains","isElementInsideOrTriggeredFromContainer","current","isEnabled","rowActions","registerHandler","rowId","discardChanges","useGlobalKeyDown","shortcut","preventDefault","toggleEditing","key","shift"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Table3/useTable3.js

@@ -26,7 +26,7 @@ function useTable3(props, ref) {
     data,
     enableRowActions: editing.isEditing ? true : props.enableRowActions,
     // Display EditingActionMenu instead of row actions while editing
-    rowActions: editing.isEditing ? [(_, rowId, table) => {
+    rowActions: editing.isEditing ? [(_, rowId, __, table) => {
       const tableMeta = table.options.meta;
       return /*#__PURE__*/React__default.createElement(EditingActionsMenu, {
         hasChanges: editing.hasChanges(rowId),

package/dist/esm/packages/taco/src/components/Table3/useTable3.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTable3.js","sources":["../../../../../../../src/components/Table3/useTable3.tsx"],"sourcesContent":["import React from 'react';\nimport { RowData, Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport { useTable } from '../../primitives/Table/Core/useTable';\nimport { useTableEditingListener } from './listeners/useTableEditingListener';\nimport { useTableEditing } from './features/useTableEditing';\nimport { Table3Props, Table3Ref } from './types';\nimport { TableRowActionRenderer } from '../../primitives/Table/types';\nimport { Cell } from './components/Columns/Cell/Cell';\nimport { EditingActionsMenu } from './components/Columns/Internal/EditingActionsMenu';\nimport { Row } from './components/Row/Row';\nimport { useTableRenderOptions } from '../../primitives/Table/Core/types';\n\nexport const RENDERERS = {\n    row: Row,\n    cell: Cell,\n};\n\ndeclare module '@tanstack/table-core' {\n    interface TableMeta<TData extends RowData> {\n        editing: ReturnType<typeof useTableEditing>;\n    }\n}\n\ntype Table3Meta = {\n    editing: ReturnType<typeof useTableEditing>;\n};\n\nexport function useTable3<TType>(props: Table3Props<TType>, ref: React.Ref<Table3Ref>) {\n    const editing = useTableEditing(\n        props.enableEditing,\n        props.onEditingSave,\n        props.onEditingChange,\n        props.onEditingCreate,\n        props.onEditingDiscard,\n        props.rowIdentityAccessor,\n        props.validator\n    );\n    const creationEnabled = editing.isEnabled && !!props.onEditingCreate;\n\n    // this gives me the performance heeby jeebies, but can't think of a better way to internalise the state\n    const data: TType[] = React.useMemo(() => {\n        if (editing.temporaryRows.length) {\n            return (props.data ?? []).concat(editing.temporaryRows as TType[]);\n        }\n\n        return props.data;\n    }, [JSON.stringify(props.data), editing.temporaryRows.length]);\n\n    const extendedProps: Table3Props<TType> = {\n        ...props,\n        data,\n        enableRowActions: editing.isEditing ? true : props.enableRowActions,\n        // Display EditingActionMenu instead of row actions while editing\n        rowActions: editing.isEditing\n            ? ([\n                  (_, rowId, table: ReactTable<TType>) => {\n                      const tableMeta = table.options.meta as ReactTableMeta<TType>;\n                      return (\n                          <EditingActionsMenu\n                              hasChanges={editing.hasChanges(rowId)}\n                              hasErrors={editing.hasRowErrors(rowId)}\n                              onDiscard={() => {\n                                  editing.discardChanges(rowId, table);\n\n                                  if (editing.temporaryRows.length) {\n                                      requestAnimationFrame(() => editing.createRowButtonRef.current?.focus());\n                                  }\n                              }}\n                              onEditingSave={async () => {\n                                  await editing.saveChanges(table, rowId);\n                              }}\n                              isLastRow={!creationEnabled && tableMeta.rowActive.rowActiveIndex === tableMeta.length - 1}\n                          />\n                      );\n                  },\n              ] as TableRowActionRenderer<TType>[])\n            : props.rowActions,\n    };\n    const meta = { editing };\n\n    const options: useTableRenderOptions = {\n        virtualiserPaddingEndOffset:\n            props.enableEditing && props.onEditingCreate ? (editing.hasTemporaryRowErrors() ? 1.4 : 1) : 0,\n    };\n\n    const table = useTable<TType, Table3Meta>(extendedProps, ref, RENDERERS, meta, options);\n\n    // listeners\n    useTableEditingListener<TType>(table.instance, table.ref, table.renderer.scrollToIndex);\n\n    React.useEffect(() => {\n        if (table.ref.current) {\n            (table.ref.current as Table3Ref).instance.toggleEditing = (enabled: boolean | undefined) =>\n                table.meta.editing.toggleEditing(enabled ?? (editing => !editing), table.instance, table.renderer.scrollToIndex);\n\n            if (props.onEditingCreate) {\n                (table.ref.current as Table3Ref).instance.createRow = (row: unknown) =>\n                    table.meta.editing.createRow(table.instance, row as Partial<TType>);\n            }\n        }\n    }, [table.ref.current]);\n\n    return table;\n}\n"],"names":["RENDERERS","row","Row","cell","Cell","useTable3","props","ref","editing","useTableEditing","enableEditing","onEditingSave","onEditingChange","onEditingCreate","onEditingDiscard","rowIdentityAccessor","validator","creationEnabled","isEnabled","data","React","useMemo","temporaryRows","length","_props$data","concat","JSON","stringify","extendedProps","enableRowActions","isEditing","rowActions","_","rowId","table","tableMeta","options","meta","EditingActionsMenu","hasChanges","hasErrors","hasRowErrors","onDiscard","discardChanges","requestAnimationFrame","_editing$createRowBut","createRowButtonRef","current","focus","saveChanges","then","e","Promise","reject","isLastRow","rowActive","rowActiveIndex","virtualiserPaddingEndOffset","hasTemporaryRowErrors","useTable","useTableEditingListener","instance","renderer","scrollToIndex","useEffect","toggleEditing","enabled","createRow"],"mappings":"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"}
+{"version":3,"file":"useTable3.js","sources":["../../../../../../../src/components/Table3/useTable3.tsx"],"sourcesContent":["import React from 'react';\nimport { RowData, Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport { useTable } from '../../primitives/Table/Core/useTable';\nimport { useTableEditingListener } from './listeners/useTableEditingListener';\nimport { useTableEditing } from './features/useTableEditing';\nimport { Table3Props, Table3Ref } from './types';\nimport { TableRowActionRenderer } from '../../primitives/Table/types';\nimport { Cell } from './components/Columns/Cell/Cell';\nimport { EditingActionsMenu } from './components/Columns/Internal/EditingActionsMenu';\nimport { Row } from './components/Row/Row';\nimport { useTableRenderOptions } from '../../primitives/Table/Core/types';\n\nexport const RENDERERS = {\n    row: Row,\n    cell: Cell,\n};\n\ndeclare module '@tanstack/table-core' {\n    interface TableMeta<TData extends RowData> {\n        editing: ReturnType<typeof useTableEditing>;\n    }\n}\n\ntype Table3Meta = {\n    editing: ReturnType<typeof useTableEditing>;\n};\n\nexport function useTable3<TType>(props: Table3Props<TType>, ref: React.Ref<Table3Ref>) {\n    const editing = useTableEditing(\n        props.enableEditing,\n        props.onEditingSave,\n        props.onEditingChange,\n        props.onEditingCreate,\n        props.onEditingDiscard,\n        props.rowIdentityAccessor,\n        props.validator\n    );\n    const creationEnabled = editing.isEnabled && !!props.onEditingCreate;\n\n    // this gives me the performance heeby jeebies, but can't think of a better way to internalise the state\n    const data: TType[] = React.useMemo(() => {\n        if (editing.temporaryRows.length) {\n            return (props.data ?? []).concat(editing.temporaryRows as TType[]);\n        }\n\n        return props.data;\n    }, [JSON.stringify(props.data), editing.temporaryRows.length]);\n\n    const extendedProps: Table3Props<TType> = {\n        ...props,\n        data,\n        enableRowActions: editing.isEditing ? true : props.enableRowActions,\n        // Display EditingActionMenu instead of row actions while editing\n        rowActions: editing.isEditing\n            ? ([\n                  (_, rowId, __, table: ReactTable<TType>) => {\n                      const tableMeta = table.options.meta as ReactTableMeta<TType>;\n                      return (\n                          <EditingActionsMenu\n                              hasChanges={editing.hasChanges(rowId)}\n                              hasErrors={editing.hasRowErrors(rowId)}\n                              onDiscard={() => {\n                                  editing.discardChanges(rowId, table);\n\n                                  if (editing.temporaryRows.length) {\n                                      requestAnimationFrame(() => editing.createRowButtonRef.current?.focus());\n                                  }\n                              }}\n                              onEditingSave={async () => {\n                                  await editing.saveChanges(table, rowId);\n                              }}\n                              isLastRow={!creationEnabled && tableMeta.rowActive.rowActiveIndex === tableMeta.length - 1}\n                          />\n                      );\n                  },\n              ] as TableRowActionRenderer<TType>[])\n            : props.rowActions,\n    };\n\n    const meta = { editing };\n\n    const options: useTableRenderOptions = {\n        virtualiserPaddingEndOffset:\n            props.enableEditing && props.onEditingCreate ? (editing.hasTemporaryRowErrors() ? 1.4 : 1) : 0,\n    };\n\n    const table = useTable<TType, Table3Meta>(extendedProps, ref, RENDERERS, meta, options);\n\n    // listeners\n    useTableEditingListener<TType>(table.instance, table.ref, table.renderer.scrollToIndex);\n\n    React.useEffect(() => {\n        if (table.ref.current) {\n            (table.ref.current as Table3Ref).instance.toggleEditing = (enabled: boolean | undefined) =>\n                table.meta.editing.toggleEditing(enabled ?? (editing => !editing), table.instance, table.renderer.scrollToIndex);\n\n            if (props.onEditingCreate) {\n                (table.ref.current as Table3Ref).instance.createRow = (row: unknown) =>\n                    table.meta.editing.createRow(table.instance, row as Partial<TType>);\n            }\n        }\n    }, [table.ref.current]);\n\n    return table;\n}\n"],"names":["RENDERERS","row","Row","cell","Cell","useTable3","props","ref","editing","useTableEditing","enableEditing","onEditingSave","onEditingChange","onEditingCreate","onEditingDiscard","rowIdentityAccessor","validator","creationEnabled","isEnabled","data","React","useMemo","temporaryRows","length","_props$data","concat","JSON","stringify","extendedProps","enableRowActions","isEditing","rowActions","_","rowId","__","table","tableMeta","options","meta","EditingActionsMenu","hasChanges","hasErrors","hasRowErrors","onDiscard","discardChanges","requestAnimationFrame","_editing$createRowBut","createRowButtonRef","current","focus","saveChanges","then","e","Promise","reject","isLastRow","rowActive","rowActiveIndex","virtualiserPaddingEndOffset","hasTemporaryRowErrors","useTable","useTableEditingListener","instance","renderer","scrollToIndex","useEffect","toggleEditing","enabled","createRow"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Tooltip/Tooltip.js

@@ -1,5 +1,5 @@
 import { forwardRef, createElement } from 'react';
-import cn from 'clsx';
+import cn, { clsx } from 'clsx';
 import { Root, Trigger, Portal, Content, Arrow } from '@radix-ui/react-tooltip';
 
 const Tooltip = /*#__PURE__*/forwardRef(function Tooltip(props, ref) {
@@ -20,19 +20,16 @@ const Tooltip = /*#__PURE__*/forwardRef(function Tooltip(props, ref) {
     asChild: true,
     ref: ref
   }, children), /*#__PURE__*/createElement(Portal, null, /*#__PURE__*/createElement(Content, Object.assign({}, otherProps, {
-    asChild: true,
-    className: className,
     side: placement,
-    sideOffset: 3
-  }), /*#__PURE__*/createElement("div", {
-    className: "xs:max-w-[theme(spacing.56)] max-w-[theme(spacing.32)] animate-[fade-in_150ms] rounded-sm bg-blue-900 px-2 py-1 text-xs font-bold text-white print:hidden",
+    sideOffset: 3,
+    className: clsx('xs:max-w-[theme(spacing.56)] max-w-[theme(spacing.32)] animate-[fade-in_150ms] rounded bg-blue-900 px-2 py-1 text-xs text-white print:hidden', className),
     "data-taco": "tooltip",
     style: {
       transformOrigin: 'var(--radix-tooltip-content-transform-origin)'
     }
-  }, /*#__PURE__*/createElement(Arrow, {
-    className: "-mt-px fill-blue-900/90 stroke-blue-900/90"
-  }), title))));
+  }), title, /*#__PURE__*/createElement(Arrow, {
+    className: "-mt-px fill-blue-900 stroke-blue-900"
+  }))));
 });
 
 export { Tooltip };

package/dist/esm/packages/taco/src/components/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../../../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip';\nimport cn from 'clsx';\n\nexport type TooltipProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> & {\n    /** The element which activates the tooltip when hovered. Should be a single React/HTML element */\n    children: React.ReactElement | any;\n    /** Use this value to hide tooltip conditionally */\n    hide?: boolean;\n    /** Text displayed in the tooltip */\n    title: string | JSX.Element;\n    /**\n     *  Placement of the tooltip relative to the reference element. Placement will be reversed if a collision occurs\n     * @defaultValue bottom\n     */\n    placement?: 'top' | 'right' | 'bottom' | 'left';\n};\n\nexport const Tooltip = React.forwardRef(function Tooltip(props: TooltipProps, ref: React.Ref<HTMLElement>) {\n    const { title, children, placement, hide = false, ...otherProps } = props;\n    const className = cn('break-words', otherProps.className);\n\n    if (hide) {\n        return children;\n    }\n\n    return (\n        <TooltipPrimitive.Root delayDuration={250}>\n            <TooltipPrimitive.Trigger asChild ref={ref as any}>\n                {children}\n            </TooltipPrimitive.Trigger>\n            <TooltipPrimitive.Portal>\n                <TooltipPrimitive.Content {...otherProps} asChild className={className} side={placement} sideOffset={3}>\n                    <div\n                        className=\"xs:max-w-[theme(spacing.56)] max-w-[theme(spacing.32)] animate-[fade-in_150ms] rounded-sm bg-blue-900 px-2 py-1 text-xs font-bold text-white print:hidden\"\n                        data-taco=\"tooltip\"\n                        style={{\n                            transformOrigin: 'var(--radix-tooltip-content-transform-origin)',\n                        }}>\n                        <TooltipPrimitive.Arrow className=\"-mt-px fill-blue-900/90 stroke-blue-900/90\" />\n                        {title}\n                    </div>\n                </TooltipPrimitive.Content>\n            </TooltipPrimitive.Portal>\n        </TooltipPrimitive.Root>\n    );\n});\n"],"names":["Tooltip","React","props","ref","title","children","placement","hide","otherProps","className","cn","TooltipPrimitive","delayDuration","asChild","side","sideOffset","style","transformOrigin"],"mappings":";;;;MAkBaA,OAAO,gBAAGC,UAAgB,CAAC,SAASD,OAAOA,CAACE,KAAmB,EAAEC,GAA2B;EACrG,MAAM;IAAEC,KAAK;IAAEC,QAAQ;IAAEC,SAAS;IAAEC,IAAI,GAAG,KAAK;IAAE,GAAGC;GAAY,GAAGN,KAAK;EACzE,MAAMO,SAAS,GAAGC,EAAE,CAAC,aAAa,EAAEF,UAAU,CAACC,SAAS,CAAC;EAEzD,IAAIF,IAAI,EAAE;IACN,OAAOF,QAAQ;;EAGnB,oBACIJ,cAACU,IAAqB;IAACC,aAAa,EAAE;kBAClCX,cAACU,OAAwB;IAACE,OAAO;IAACV,GAAG,EAAEA;KAClCE,QAAQ,CACc,eAC3BJ,cAACU,MAAuB,qBACpBV,cAACU,OAAwB,oBAAKH,UAAU;IAAEK,OAAO;IAACJ,SAAS,EAAEA,SAAS;IAAEK,IAAI,EAAER,SAAS;IAAES,UAAU,EAAE;mBACjGd;IACIQ,SAAS,EAAC,2JAA2J;iBAC3J,SAAS;IACnBO,KAAK,EAAE;MACHC,eAAe,EAAE;;kBAErBhB,cAACU,KAAsB;IAACF,SAAS,EAAC;IAA+C,EAChFL,KAAK,CACJ,CACiB,CACL,CACN;AAEhC,CAAC;;;;"}
+{"version":3,"file":"Tooltip.js","sources":["../../../../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip';\nimport cn, { clsx } from 'clsx';\n\nexport type TooltipProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> & {\n    /** The element which activates the tooltip when hovered. Should be a single React/HTML element */\n    children: React.ReactElement | any;\n    /** Use this value to hide tooltip conditionally */\n    hide?: boolean;\n    /** Text displayed in the tooltip */\n    title: string | JSX.Element;\n    /**\n     *  Placement of the tooltip relative to the reference element. Placement will be reversed if a collision occurs\n     * @defaultValue bottom\n     */\n    placement?: 'top' | 'right' | 'bottom' | 'left';\n};\n\nexport const Tooltip = React.forwardRef(function Tooltip(props: TooltipProps, ref: React.Ref<HTMLElement>) {\n    const { title, children, placement, hide = false, ...otherProps } = props;\n    const className = cn('break-words', otherProps.className);\n\n    if (hide) {\n        return children;\n    }\n\n    return (\n        <TooltipPrimitive.Root delayDuration={250}>\n            <TooltipPrimitive.Trigger asChild ref={ref as any}>\n                {children}\n            </TooltipPrimitive.Trigger>\n            <TooltipPrimitive.Portal>\n                <TooltipPrimitive.Content\n                    {...otherProps}\n                    side={placement}\n                    sideOffset={3}\n                    className={clsx(\n                        'xs:max-w-[theme(spacing.56)] max-w-[theme(spacing.32)] animate-[fade-in_150ms] rounded bg-blue-900 px-2 py-1 text-xs text-white print:hidden',\n                        className\n                    )}\n                    data-taco=\"tooltip\"\n                    style={{\n                        transformOrigin: 'var(--radix-tooltip-content-transform-origin)',\n                    }}>\n                    {title}\n                    <TooltipPrimitive.Arrow className=\"-mt-px fill-blue-900 stroke-blue-900\" />\n                </TooltipPrimitive.Content>\n            </TooltipPrimitive.Portal>\n        </TooltipPrimitive.Root>\n    );\n});\n"],"names":["Tooltip","React","props","ref","title","children","placement","hide","otherProps","className","cn","TooltipPrimitive","delayDuration","asChild","side","sideOffset","clsx","style","transformOrigin"],"mappings":";;;;MAkBaA,OAAO,gBAAGC,UAAgB,CAAC,SAASD,OAAOA,CAACE,KAAmB,EAAEC,GAA2B;EACrG,MAAM;IAAEC,KAAK;IAAEC,QAAQ;IAAEC,SAAS;IAAEC,IAAI,GAAG,KAAK;IAAE,GAAGC;GAAY,GAAGN,KAAK;EACzE,MAAMO,SAAS,GAAGC,EAAE,CAAC,aAAa,EAAEF,UAAU,CAACC,SAAS,CAAC;EAEzD,IAAIF,IAAI,EAAE;IACN,OAAOF,QAAQ;;EAGnB,oBACIJ,cAACU,IAAqB;IAACC,aAAa,EAAE;kBAClCX,cAACU,OAAwB;IAACE,OAAO;IAACV,GAAG,EAAEA;KAClCE,QAAQ,CACc,eAC3BJ,cAACU,MAAuB,qBACpBV,cAACU,OAAwB,oBACjBH,UAAU;IACdM,IAAI,EAAER,SAAS;IACfS,UAAU,EAAE,CAAC;IACbN,SAAS,EAAEO,IAAI,CACX,8IAA8I,EAC9IP,SAAS,CACZ;iBACS,SAAS;IACnBQ,KAAK,EAAE;MACHC,eAAe,EAAE;;MAEpBd,KAAK,eACNH,cAACU,KAAsB;IAACF,SAAS,EAAC;IAAyC,CACpD,CACL,CACN;AAEhC,CAAC;;;;"}

package/dist/esm/packages/taco/src/primitives/Table/Core/components/Columns/Internal/Actions.js

@@ -18,8 +18,9 @@ function Actions(props) {
   const {
     texts
   } = useLocalization();
+  const tableMeta = table.options.meta;
   // we don't want to document passing table, so it isn't on the type
-  const visibleActions = actions.map(action => action(data, rowId, table)).filter(action => !!action);
+  const visibleActions = actions.map(action => action(data, rowId, tableMeta.rowActions.handlers['cleanup'], table)).filter(action => !!action);
   const actionsOnRow = visibleActions.length === actionsLength ? visibleActions : visibleActions.slice(0, actionsLength - 1);
   const actionsInMenu = visibleActions.slice(visibleActions.length === actionsLength ? actionsLength : actionsLength - 1);
   const className = cn('flex justify-end text-right bg-[inherit] shadow-[-6px_0px_6px_var(--table-row-actions-shadow)] print:hidden');

package/dist/esm/packages/taco/src/primitives/Table/Core/components/Columns/Internal/Actions.js.map

@@ -1 +1 @@
-{"version":3,"file":"Actions.js","sources":["../../../../../../../../../../../src/primitives/Table/Core/components/Columns/Internal/Actions.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, CellContext as ReactTableCellContext, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport cn from 'clsx';\nimport { useLocalization } from '../../../../../../components/Provider/Localization';\nimport { IconButton } from '../../../../../../components/IconButton/IconButton';\nimport { Menu } from '../../../../../../components/Menu/Menu';\nimport { Shortcut } from '../../../../../../components/Shortcut/Shortcut';\nimport { RowContext } from '../../Row/RowContext';\nimport { useTableManagerInternalColumn } from '../../../../useTableManager/types';\nimport { TableRowActionRenderer } from '../../../../types';\n\nexport type ActionsProps<TType = unknown> = {\n    actions: TableRowActionRenderer<TType>[];\n    actionsLength: number;\n    data: any;\n    isActiveRow: boolean;\n    rowId: string;\n    table: ReactTable<TType>;\n};\nexport function Actions<TType = unknown>(props: ActionsProps<TType>) {\n    const { actions, actionsLength, data, isActiveRow, rowId, table } = props;\n    const { texts } = useLocalization();\n    // we don't want to document passing table, so it isn't on the type\n    const visibleActions = (actions as ((row: TType, internalRowId: string, table: ReactTable<TType>) => JSX.Element | null)[])\n        .map(action => action(data, rowId, table))\n        .filter(action => !!action) as JSX.Element[];\n\n    const actionsOnRow = visibleActions.length === actionsLength ? visibleActions : visibleActions.slice(0, actionsLength - 1);\n    const actionsInMenu = visibleActions.slice(visibleActions.length === actionsLength ? actionsLength : actionsLength - 1);\n\n    const className = cn(\n        'flex justify-end text-right bg-[inherit] shadow-[-6px_0px_6px_var(--table-row-actions-shadow)] print:hidden'\n    );\n\n    return (\n        <span className={className}>\n            {actionsOnRow.map((button, index) => {\n                const tooltip = String(button.props.tooltip ?? button.props['aria-label'] ?? '');\n\n                return React.cloneElement(button, {\n                    appearance: 'transparent',\n                    key: index,\n                    tabIndex: isActiveRow ? 0 : -1,\n                    tooltip: button.props.shortcut ? (\n                        <>\n                            {tooltip}\n                            <Shortcut className=\"ml-2\" keys={button.props.shortcut} />\n                        </>\n                    ) : (\n                        tooltip\n                    ),\n                });\n            })}\n            {actionsInMenu.length ? (\n                <IconButton\n                    appearance=\"transparent\"\n                    aria-label={texts.table.columns.actions.tooltip}\n                    icon=\"more\"\n                    tabIndex={isActiveRow ? 0 : -1}\n                    menu={menuProps => (\n                        <Menu {...menuProps}>\n                            <Menu.Content>\n                                {actionsInMenu.map((action, i) => (\n                                    <Menu.Item key={i} {...action.props} shortcut={action.props.shortcut}>\n                                        {action.props['aria-label']}\n                                    </Menu.Item>\n                                ))}\n                            </Menu.Content>\n                        </Menu>\n                    )}\n                />\n            ) : null}\n        </span>\n    );\n}\n\nfunction Header() {\n    return null;\n}\n\nconst Cell = React.memo(function MemoedCell<TType = unknown>(context: ReactTableCellContext<TType, unknown>) {\n    const { row, table } = context;\n    const { hideRowActions, isHovered, rowIndex } = React.useContext(RowContext);\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n\n    const actions = tableMeta.rowActions.rowActions;\n    const actionsLength = tableMeta.rowActions.rowActionsLength;\n\n    const isActiveRow = tableMeta.rowActive.rowActiveIndex === rowIndex;\n    const isResizingColumn = !!table.getState().columnSizingInfo.isResizingColumn;\n    const isHoverStatePaused = tableMeta.rowActive.isHoverStatePaused;\n    const isRowGrouped = row.getIsGrouped();\n\n    if (\n        !hideRowActions &&\n        !isRowGrouped &&\n        actions?.length &&\n        (isActiveRow || (isHovered && !isHoverStatePaused && !isResizingColumn))\n    ) {\n        return (\n            <Actions<TType>\n                actions={actions}\n                actionsLength={actionsLength}\n                data={row.original}\n                isActiveRow={isActiveRow}\n                rowId={row.id}\n                table={table}\n            />\n        );\n    }\n\n    return null;\n}) as <TType = unknown>(context: ReactTableCellContext<TType, unknown>) => JSX.Element;\n\nexport const renderer: useTableManagerInternalColumn = {\n    header: Header,\n    renderer: Cell,\n    meta: {\n        align: 'right',\n        className: cn(\n            'print:opacity-0 !px-0 !pr-1 overflow-hidden [table_&]:group-[[data-row-active=\"true\"]]/row:sticky right-0',\n            'group-[[data-row-active=\"true\"][data-selected=\"false\"]]/row:text-grey-200',\n            'group-[[data-row-selected=\"true\"]]/row:text-blue-100',\n            'group-[[data-row-selected=\"false\"]:hover]/row:text-grey-100'\n        ),\n        // TODO: remove when table3 is migrated, this satisfies the legacy table3 type\n        enableSearch: false,\n        header: '',\n    },\n};\n"],"names":["Actions","props","actions","actionsLength","data","isActiveRow","rowId","table","texts","useLocalization","visibleActions","map","action","filter","actionsOnRow","length","slice","actionsInMenu","className","cn","React","button","index","tooltip","String","_ref","_button$props$tooltip","cloneElement","appearance","key","tabIndex","shortcut","Shortcut","keys","IconButton","columns","icon","menu","menuProps","Menu","Content","i","Item","Header","Cell","memo","MemoedCell","context","row","hideRowActions","isHovered","rowIndex","useContext","RowContext","tableMeta","options","meta","rowActions","rowActionsLength","rowActive","rowActiveIndex","isResizingColumn","getState","columnSizingInfo","isHoverStatePaused","isRowGrouped","getIsGrouped","original","id","renderer","header","align","enableSearch"],"mappings":"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"}
+{"version":3,"file":"Actions.js","sources":["../../../../../../../../../../../src/primitives/Table/Core/components/Columns/Internal/Actions.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, CellContext as ReactTableCellContext, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport cn from 'clsx';\nimport { useLocalization } from '../../../../../../components/Provider/Localization';\nimport { IconButton } from '../../../../../../components/IconButton/IconButton';\nimport { Menu } from '../../../../../../components/Menu/Menu';\nimport { Shortcut } from '../../../../../../components/Shortcut/Shortcut';\nimport { RowContext } from '../../Row/RowContext';\nimport { useTableManagerInternalColumn } from '../../../../useTableManager/types';\nimport { TableRowActionRenderer } from '../../../../types';\n\nexport type ActionsProps<TType = unknown> = {\n    actions: TableRowActionRenderer<TType>[];\n    actionsLength: number;\n    data: any;\n    isActiveRow: boolean;\n    rowId: string;\n    table: ReactTable<TType>;\n};\nexport function Actions<TType = unknown>(props: ActionsProps<TType>) {\n    const { actions, actionsLength, data, isActiveRow, rowId, table } = props;\n    const { texts } = useLocalization();\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n\n    // we don't want to document passing table, so it isn't on the type\n    const visibleActions = (\n        actions as ((\n            row: TType,\n            internalRowId: string,\n            cleanup: (rowId: string) => void,\n            table: ReactTable<TType>\n        ) => JSX.Element | null)[]\n    )\n        .map(action => action(data, rowId, tableMeta.rowActions.handlers['cleanup'], table))\n        .filter(action => !!action) as JSX.Element[];\n\n    const actionsOnRow = visibleActions.length === actionsLength ? visibleActions : visibleActions.slice(0, actionsLength - 1);\n    const actionsInMenu = visibleActions.slice(visibleActions.length === actionsLength ? actionsLength : actionsLength - 1);\n\n    const className = cn(\n        'flex justify-end text-right bg-[inherit] shadow-[-6px_0px_6px_var(--table-row-actions-shadow)] print:hidden'\n    );\n\n    return (\n        <span className={className}>\n            {actionsOnRow.map((button, index) => {\n                const tooltip = String(button.props.tooltip ?? button.props['aria-label'] ?? '');\n\n                return React.cloneElement(button, {\n                    appearance: 'transparent',\n                    key: index,\n                    tabIndex: isActiveRow ? 0 : -1,\n                    tooltip: button.props.shortcut ? (\n                        <>\n                            {tooltip}\n                            <Shortcut className=\"ml-2\" keys={button.props.shortcut} />\n                        </>\n                    ) : (\n                        tooltip\n                    ),\n                });\n            })}\n            {actionsInMenu.length ? (\n                <IconButton\n                    appearance=\"transparent\"\n                    aria-label={texts.table.columns.actions.tooltip}\n                    icon=\"more\"\n                    tabIndex={isActiveRow ? 0 : -1}\n                    menu={menuProps => (\n                        <Menu {...menuProps}>\n                            <Menu.Content>\n                                {actionsInMenu.map((action, i) => (\n                                    <Menu.Item key={i} {...action.props} shortcut={action.props.shortcut}>\n                                        {action.props['aria-label']}\n                                    </Menu.Item>\n                                ))}\n                            </Menu.Content>\n                        </Menu>\n                    )}\n                />\n            ) : null}\n        </span>\n    );\n}\n\nfunction Header() {\n    return null;\n}\n\nconst Cell = React.memo(function MemoedCell<TType = unknown>(context: ReactTableCellContext<TType, unknown>) {\n    const { row, table } = context;\n    const { hideRowActions, isHovered, rowIndex } = React.useContext(RowContext);\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n\n    const actions = tableMeta.rowActions.rowActions;\n    const actionsLength = tableMeta.rowActions.rowActionsLength;\n\n    const isActiveRow = tableMeta.rowActive.rowActiveIndex === rowIndex;\n    const isResizingColumn = !!table.getState().columnSizingInfo.isResizingColumn;\n    const isHoverStatePaused = tableMeta.rowActive.isHoverStatePaused;\n    const isRowGrouped = row.getIsGrouped();\n\n    if (\n        !hideRowActions &&\n        !isRowGrouped &&\n        actions?.length &&\n        (isActiveRow || (isHovered && !isHoverStatePaused && !isResizingColumn))\n    ) {\n        return (\n            <Actions<TType>\n                actions={actions}\n                actionsLength={actionsLength}\n                data={row.original}\n                isActiveRow={isActiveRow}\n                rowId={row.id}\n                table={table}\n            />\n        );\n    }\n\n    return null;\n}) as <TType = unknown>(context: ReactTableCellContext<TType, unknown>) => JSX.Element;\n\nexport const renderer: useTableManagerInternalColumn = {\n    header: Header,\n    renderer: Cell,\n    meta: {\n        align: 'right',\n        className: cn(\n            'print:opacity-0 !px-0 !pr-1 overflow-hidden [table_&]:group-[[data-row-active=\"true\"]]/row:sticky right-0',\n            'group-[[data-row-active=\"true\"][data-selected=\"false\"]]/row:text-grey-200',\n            'group-[[data-row-selected=\"true\"]]/row:text-blue-100',\n            'group-[[data-row-selected=\"false\"]:hover]/row:text-grey-100'\n        ),\n        // TODO: remove when table3 is migrated, this satisfies the legacy table3 type\n        enableSearch: false,\n        header: '',\n    },\n};\n"],"names":["Actions","props","actions","actionsLength","data","isActiveRow","rowId","table","texts","useLocalization","tableMeta","options","meta","visibleActions","map","action","rowActions","handlers","filter","actionsOnRow","length","slice","actionsInMenu","className","cn","React","button","index","tooltip","String","_ref","_button$props$tooltip","cloneElement","appearance","key","tabIndex","shortcut","Shortcut","keys","IconButton","columns","icon","menu","menuProps","Menu","Content","i","Item","Header","Cell","memo","MemoedCell","context","row","hideRowActions","isHovered","rowIndex","useContext","RowContext","rowActionsLength","rowActive","rowActiveIndex","isResizingColumn","getState","columnSizingInfo","isHoverStatePaused","isRowGrouped","getIsGrouped","original","id","renderer","header","align","enableSearch"],"mappings":"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"}

package/dist/esm/packages/taco/src/primitives/Table/Core/components/Header/Header.js

@@ -178,12 +178,12 @@ const MemoedHeader = /*#__PURE__*/React__default.memo(function MemoedHeader(prop
     "data-cell-pinned": isPinned ? isPinned : undefined,
     style: style,
     ref: setRef
-  }), isPlaceholder ? null : isInternalColumn(id) ? children : (/*#__PURE__*/React__default.createElement(Tooltip, {
+  }), !isPlaceholder && (isInternalColumn(id) || typeof children !== 'string' ? children : (/*#__PURE__*/React__default.createElement(Tooltip, {
     title: String(tooltip !== null && tooltip !== void 0 ? tooltip : children),
     placement: "top"
   }, /*#__PURE__*/React__default.createElement("span", {
     className: "truncate"
-  }, children))), sortDirection ? /*#__PURE__*/React__default.createElement(SortIndicator, {
+  }, children)))), sortDirection ? /*#__PURE__*/React__default.createElement(SortIndicator, {
     direction: sortDirection
   }) : null, hasMenu ? (/*#__PURE__*/React__default.createElement(HeaderMenu, {
     canFilter: canFilter,