@economic/taco 2.14.2 → 2.16.0

package/dist/esm/packages/taco/src/utils/hooks/useTruncated.js

@@ -0,0 +1,20 @@
+import React__default from 'react';
+
+const isTruncated = targetElement => {
+  if (targetElement !== null) {
+    return targetElement.offsetWidth < targetElement.scrollWidth;
+  }
+  return false;
+};
+const useTruncated = (element, deps = []) => {
+  const [truncated, setTruncated] = React__default.useState(isTruncated(element));
+  React__default.useEffect(() => {
+    setTruncated(isTruncated(element));
+  }, [element, ...deps]);
+  return {
+    truncated
+  };
+};
+
+export { useTruncated };
+//# sourceMappingURL=useTruncated.js.map

package/dist/esm/packages/taco/src/utils/hooks/useTruncated.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTruncated.js","sources":["../../../../../../../src/utils/hooks/useTruncated.tsx"],"sourcesContent":["import React from 'react';\n\nconst isTruncated = (targetElement: HTMLElement | null) => {\n    if (targetElement !== null) {\n        return targetElement.offsetWidth < targetElement.scrollWidth;\n    }\n\n    return false;\n};\n\nexport const useTruncated = (element: HTMLElement | null, deps: any[] = []) => {\n    const [truncated, setTruncated] = React.useState<boolean>(isTruncated(element));\n\n    React.useEffect(() => {\n        setTruncated(isTruncated(element));\n    }, [element, ...deps]);\n\n    return { truncated };\n};\n"],"names":["isTruncated","targetElement","offsetWidth","scrollWidth","useTruncated","element","deps","truncated","setTruncated","React","useState","useEffect"],"mappings":";;AAEA,MAAMA,WAAW,GAAIC,aAAiC;EAClD,IAAIA,aAAa,KAAK,IAAI,EAAE;IACxB,OAAOA,aAAa,CAACC,WAAW,GAAGD,aAAa,CAACE,WAAW;;EAGhE,OAAO,KAAK;AAChB,CAAC;MAEYC,YAAY,GAAGA,CAACC,OAA2B,EAAEC,OAAc,EAAE;EACtE,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGC,cAAK,CAACC,QAAQ,CAAUV,WAAW,CAACK,OAAO,CAAC,CAAC;EAE/EI,cAAK,CAACE,SAAS,CAAC;IACZH,YAAY,CAACR,WAAW,CAACK,OAAO,CAAC,CAAC;GACrC,EAAE,CAACA,OAAO,EAAE,GAAGC,IAAI,CAAC,CAAC;EAEtB,OAAO;IAAEC;GAAW;AACxB;;;;"}

package/dist/index.css

@@ -652,6 +652,10 @@
     @apply flex;
 }
 
+[data-taco='table3-column-group'] > div {
+    @apply grow;
+}
+
 /* In cases where row height might differ from default one (example: textarea without truncate or changing of font size or row height),
    we need to prevent editing controls to take all available space */
 [role='cell']:not([data-highlighted='true']) {
@@ -701,94 +705,108 @@
 }
 
 /* normal rows */
-[role='row']:not([data-selected='true']):not([data-error='true']) [role='cell'] {
+[role='row']:not([data-selected='true']):not([data-invalid='true']) [role='cell'] {
         @apply bg-white;
     }
-[role='row']:not([data-selected='true']):not([data-error='true']):hover [role='cell'] {
+[role='row']:not([data-selected='true']):not([data-invalid='true']):hover [role='cell'] {
         --table3-row-actions-shadow: theme(colors.grey.100);
         @apply bg-grey-100;
     }
-[role='row']:not([data-selected='true']):not([data-error='true'])[data-current='true'] [role='cell'] {
+[role='row']:not([data-selected='true']):not([data-invalid='true'])[data-current='true'] [role='cell'] {
         --table3-row-actions-shadow: theme(colors.grey.100);
         @apply bg-grey-100;
     }
-[role='row']:not([data-selected='true']):not([data-error='true'])[data-current='true']:hover [role='cell'] {
+[role='row']:not([data-selected='true']):not([data-invalid='true'])[data-current='true']:hover [role='cell'] {
         --table3-row-actions-shadow: theme(colors.grey.100);
         @apply bg-grey-100;
     }
+/* Fields shouldn’t have white background when not in current row and hovered*/
+[role='row']:not([data-selected='true']):not([data-invalid='true'])[data-current='false']:hover [role='cell'] .bg-white {
+            @apply !bg-grey-100;
+        }
 /* normal rows when focus is inside the table */
 [data-taco='table2']:focus-within
-    [role='row'][data-current='true']:not([data-selected='true']):not([data-error='true'])
+    [role='row'][data-current='true']:not([data-selected='true']):not([data-invalid='true'])
     [role='cell'] {
     --table3-row-actions-shadow: theme(colors.grey.200);
     @apply bg-grey-200;
 }
 /* normal rows when hover is paused */
-[data-pause-hover='true'] [role='row']:not([data-selected='true']):not([data-error='true']):hover:not([data-current='true']) [role='cell'] {
+[data-pause-hover='true'] [role='row']:not([data-selected='true']):not([data-invalid='true']):hover:not([data-current='true']) [role='cell'] {
         --table3-row-actions-shadow: theme(colors.white);
         @apply !bg-white;
     }
-[data-pause-hover='true'] [role='row']:not([data-selected='true']):not([data-error='true']):hover[data-current='true'] [role='cell'] {
+[data-pause-hover='true'] [role='row']:not([data-selected='true']):not([data-invalid='true']):hover[data-current='true'] [role='cell'] {
         --table3-row-actions-shadow: theme(colors.grey.200);
         @apply !bg-grey-200;
     }
 
 /* selected rows */
-[role='row'][data-selected='true']:not([data-error='true']) [role='cell'] {
+[role='row'][data-selected='true']:not([data-invalid='true']) [role='cell'] {
         @apply bg-blue-100;
     }
-[role='row'][data-selected='true']:not([data-error='true']):hover [role='cell'] {
+[role='row'][data-selected='true']:not([data-invalid='true']):hover [role='cell'] {
         --table3-row-actions-shadow: #d6e3f6;
         @apply bg-[#D6E3F6];
     }
-[role='row'][data-selected='true']:not([data-error='true'])[data-current='true']:hover [role='cell'],
+[role='row'][data-selected='true']:not([data-invalid='true'])[data-current='true']:hover [role='cell'],
     
-    [role='row'][data-selected='true']:not([data-error='true'])[data-current='true'] [role='cell'] {
+    [role='row'][data-selected='true']:not([data-invalid='true'])[data-current='true'] [role='cell'] {
         --table3-row-actions-shadow: #d6e3f6;
         @apply bg-[#D6E3F6];
     }
 /* selected rows when focus is inside the table */
-[data-taco='table2']:focus-within [role='row'][data-current='true'][data-selected='true']:not([data-error='true']) [role='cell'] {
+[data-taco='table2']:focus-within
+    [role='row'][data-current='true'][data-selected='true']:not([data-invalid='true'])
+    [role='cell'] {
     --table3-row-actions-shadow: #ccd8eb;
     @apply bg-[#CCD8EB];
 }
 /* selected rows when hover is paused */
-[data-pause-hover='true'] [role='row'][data-selected='true']:not([data-error='true']):hover:not([data-current='true']) [role='cell'] {
+[data-pause-hover='true'] [role='row'][data-selected='true']:not([data-invalid='true']):hover:not([data-current='true']) [role='cell'] {
         --table3-row-actions-shadow: theme(colors.blue.100);
         @apply !bg-blue-100;
     }
-[data-pause-hover='true'] [role='row'][data-selected='true']:not([data-error='true']):hover[data-current='true'] [role='cell'] {
+[data-pause-hover='true'] [role='row'][data-selected='true']:not([data-invalid='true']):hover[data-current='true'] [role='cell'] {
         --table3-row-actions-shadow: #ccd8eb;
         @apply !bg-[#CCD8EB];
     }
 
 /* error rows */
-[role='row'][data-error='true'] [role='cell'] {
+[role='row'][data-invalid='true'] [role='cell'] {
         @apply bg-[#FFEDE9];
     }
-[role='row'][data-error='true']:hover [role='cell'] {
+[role='row'][data-invalid='true']:hover [role='cell'] {
         --table3-row-actions-shadow: #ffe4de;
         @apply bg-[#FFE4DE];
     }
-[role='row'][data-error='true'][data-current='true'] [role='cell'] {
+[role='row'][data-invalid='true'][data-current='true'] [role='cell'] {
         --table3-row-actions-shadow: theme(colors.red.100);
         @apply bg-red-100;
     }
-[role='row'][data-error='true'][data-current='true']:hover [role='cell'] {
+[role='row'][data-invalid='true'][data-current='true']:hover [role='cell'] {
         --table3-row-actions-shadow: #ffe4de;
         @apply bg-[#FFE4DE];
     }
+/* Fields with errors shouldn’t have white background when not in current row */
+[role='row'][data-invalid='true'][data-current='false'] [role='cell'] .bg-white {
+            @apply !bg-[#FFEDE9];
+        }
+/* Request from UX: In error state, input backgroud color should be the same as row background color */
+[role='row'][data-invalid='true'][data-current='false']:hover [role='cell'] .bg-white {
+            @apply !bg-[#FFE4DE];
+        }
 /* error rows when focus is inside the table */
-[data-taco='table2']:focus-within [role='row'][data-current='true'][data-error='true'] [role='cell'] {
+[data-taco='table2']:focus-within [role='row'][data-current='true'][data-invalid='true'] [role='cell'] {
     --table3-row-actions-shadow: theme(colors.red.100);
     @apply bg-red-100;
 }
 /* error rows when hover is paused */
-[data-pause-hover='true'] [role='row'][data-error='true']:hover:not([data-current='true']) [role='cell'] {
+[data-pause-hover='true'] [role='row'][data-invalid='true']:hover:not([data-current='true']) [role='cell'] {
         --table3-row-actions-shadow: #ffede9;
         @apply !bg-[#FFEDE9];
     }
-[data-pause-hover='true'] [role='row'][data-error='true']:hover[data-current='true'] [role='cell'] {
+[data-pause-hover='true'] [role='row'][data-invalid='true']:hover[data-current='true'] [role='cell'] {
         --table3-row-actions-shadow: theme(colors.red.100);
         @apply !bg-red-100;
     }
@@ -802,6 +820,12 @@
     @apply !wcag-blue-500;
 }
 
+/* error row */
+/*!!!!*/
+[data-taco='table2-body'] [role='row'][data-invalid='true'] [role='cell'] {
+    /*@apply !bg-[#FFF5F2];*/
+}
+
 /* cell component overrides */
 
 /* small font size */
@@ -820,7 +844,9 @@
 }
 
 [data-font-size='small'] [role='cell'] [data-taco='badge'],
-[data-font-size='small'] [role='cell'] [data-taco='badge-icon'] {
+[data-font-size='small'] [role='cell'] [data-taco='badge-icon'],
+[data-font-size='small'] [role='cell'] [data-taco='icon'],
+[data-font-size='small'] [role='cell'] [data-taco='spinner'] {
     @apply !-my-0.5 !text-xs;
 }
 
@@ -828,11 +854,21 @@
     @apply !-my-1;
 }
 
-[data-font-size='small'] [role='cell'] [data-taco='input-container'],
-[data-font-size='small'] [role='cell'] [data-taco='Select2'] {
+[data-font-size='small'] [role='cell'] [data-taco='Select2'],
+[data-font-size='small'] [role='cell'] [data-taco='input-container'] {
     @apply !-my-[3px];
 }
 
+/* from validation */
+[data-font-size='small'] [role='row'][data-invalid='true'] [role='cell'] [data-taco='Select2'],
+[data-font-size='small'] [role='row'][data-invalid='true'] [role='cell'] [data-taco='input-container'],
+[data-font-size='small'] [role='row'] [role='cell'][data-invalid='true'] [data-taco='Select2'],
+[data-font-size='small'] [role='row'] [role='cell'][data-invalid='true'] [data-taco='input-container'] {
+    @apply !-mt-1;
+    @apply !mb-0;
+}
+/*---*/
+
 [data-font-size='small'] [role='cell'] [data-taco='input'],
 [data-font-size='small'] [role='cell'] [data-taco='Select2'],
 [data-font-size='small'] [role='cell'] [data-taco='textarea'] {
@@ -859,9 +895,18 @@
     @apply !my-0;
 }
 
-[data-font-size='small'] [role='cell'][data-editable] {
-    @apply px-[calc(var(--table3-cell-padding-x)_-_6px)];
-}
+/* When cell is editable, but not highlighted, then we apply cell padding to a cell itself */
+
+[data-font-size='small'] [role='cell'][data-editable]:not([data-highlighted='true']) {
+        @apply px-[calc(var(--table3-cell-padding-x)_-_6px)];
+    }
+
+/* When cell is editable and highlighted, the padding should apply to highlight wrapper, 
+       because it should take all the available space in the cell */
+
+[data-font-size='small'] [role='cell'][data-editable][data-highlighted='true'] [data-taco='highlight'] {
+        @apply px-[calc(var(--table3-cell-padding-x)_-_6px)];
+    }
 
 [data-font-size='small'] [role='cell'][data-editable] [data-taco='checkbox'],
 [data-font-size='small'] [role='cell'][data-editable] [data-taco='checkbox-container'],
@@ -889,9 +934,18 @@
     @apply !-my-[5px];
 }
 
-[data-font-size='medium'] [role='cell'][data-editable] {
-    @apply px-[calc(var(--table3-cell-padding-x)_-_8px)];
-}
+/* When cell is editable, but not highlighted, then we apply cell padding to a cell itself */
+
+[data-font-size='medium'] [role='cell'][data-editable]:not([data-highlighted='true']) {
+        @apply px-[calc(var(--table3-cell-padding-x)_-_8px)];
+    }
+
+/* When cell is editable and highlighted, the padding should apply to highlight wrapper, 
+       because it should take all the available space in the cell */
+
+[data-font-size='medium'] [role='cell'][data-editable][data-highlighted='true'] [data-taco='highlight'] {
+        @apply px-[calc(var(--table3-cell-padding-x)_-_8px)];
+    }
 
 [data-font-size='medium'] [role='cell'][data-editable] [data-taco='checkbox'],
 [data-font-size='medium'] [role='cell'][data-editable] [data-taco='checkbox-container'],
@@ -900,6 +954,14 @@
     @apply !mx-[calc(var(--table3-cell-padding-x)_-_3px)] !mt-px;
 }
 
+[data-font-size='medium'] [role='row'][data-invalid='true'] [role='cell'] [data-taco='Select2'],
+[data-font-size='medium'] [role='row'][data-invalid='true'] [role='cell'] [data-taco='input-container'],
+[data-font-size='medium'] [role='row'] [role='cell'][data-invalid='true'] [data-taco='Select2'],
+[data-font-size='medium'] [role='row'] [role='cell'][data-invalid='true'] [data-taco='input-container'] {
+    @apply !-mt-1.5;
+    @apply !mb-0;
+}
+
 /* large font size */
 [data-font-size='large'] [role='cell'] > [data-taco='button'],
 [data-font-size='large'] [role='cell'] > [data-taco='icon-button'] {
@@ -919,6 +981,14 @@
     @apply !-my-[7.5px];
 }
 
+[data-font-size='large'] [role='row'][data-invalid='true'] [role='cell'] [data-taco='Select2'],
+[data-font-size='large'] [role='row'][data-invalid='true'] [role='cell'] [data-taco='input-container'],
+[data-font-size='large'] [role='row'] [role='cell'][data-invalid='true'] [data-taco='Select2'],
+[data-font-size='large'] [role='row'] [role='cell'][data-invalid='true'] [data-taco='input-container'] {
+    @apply !-mt-2;
+    @apply !mb-0;
+}
+
 [data-font-size='large'] [role='cell'] [data-taco='input'],
 [data-font-size='large'] [role='cell'] [data-taco='Select2'],
 [data-font-size='large'] [role='cell'] [data-taco='textarea'] {
@@ -933,9 +1003,18 @@
     @apply !h-6 !w-6;
 }
 
-[data-font-size='large'] [role='cell'][data-editable] {
-    @apply px-[calc(var(--table3-cell-padding-x)_-_10px)];
-}
+/* When cell is editable, but not highlighted, then we apply cell padding to a cell itself */
+
+[data-font-size='large'] [role='cell'][data-editable]:not([data-highlighted='true']) {
+        @apply px-[calc(var(--table3-cell-padding-x)_-_10px)];
+    }
+
+/* When cell is editable and highlighted, the padding should apply to highlight wrapper, 
+       because it should take all the available space in the cell */
+
+[data-font-size='large'] [role='cell'][data-editable][data-highlighted='true'] [data-taco='highlight'] {
+        @apply px-[calc(var(--table3-cell-padding-x)_-_10px)];
+    }
 
 [data-font-size='large'] [role='cell'][data-editable] [data-taco='checkbox'],
 [data-font-size='large'] [role='cell'][data-editable] [data-taco='checkbox-container'],