@economic/taco 0.0.1-alpha.0 → 0.0.1-alpha.2

package/dist/index.css

@@ -578,81 +578,73 @@
 }
 
 .yt-table:focus {
-    @apply rounded-sm yt-focus;
+    @apply yt-focus rounded-sm;
 }
 
 /* rows */
 .yt-table__row {
-    @apply border-b border-grey-light flex;
+    @apply border-grey-light flex border-b;
     min-height: 2.5rem;
 }
 
 /* cells */
 .yt-table__cell {
-    @apply flex-1 p-2 align-middle text-center truncate;
+    @apply flex-1 truncate p-2 text-center align-middle;
 }
 
-.yt-table__cell.yt-table__cell__actions {
-    @apply flex justify-end px-1 overflow-visible;
-}
-
-.yt-table__cell > .yt-button,
-.yt-table__cell .yt-group > .yt-button {
-    @apply -mt-1 -mb-1;
-}
-
-.yt-table__cell.yt-table__cell__actions .yt-group > *:not(:first-child):not(.yt-hanger):not(.yt-menu) {
-    @apply ml-0;
+.yt-table__cell > [data-taco='button'],
+.yt-table__cell > [data-taco='icon-button'] {
+    @apply -mt-1 -mb-1 flex;
 }
 
 .yt-table__cell.yt-table__cell--draggable {
     @apply flex-col px-0;
 }
 
-.yt-table__cell.yt-table__cell--draggable .yt-icon {
-    @apply cursor-grab invisible text-grey-darkest;
+.yt-table__cell.yt-table__cell--draggable [data-taco='icon'] {
+    @apply text-grey-darkest invisible cursor-grab;
     width: 20px;
 }
 
-.yt-table__row.yt-table__row--dragging .yt-table__cell.yt-table__cell--draggable .yt-icon {
+.yt-table__row.yt-table__row--dragging .yt-table__cell.yt-table__cell--draggable [data-taco='icon'] {
     @apply text-white;
 }
 
-.yt-table__cell.yt-table__cell--draggable .yt-icon:active {
+.yt-table__cell.yt-table__cell--draggable [data-taco='icon']:active {
     @apply cursor-grabbing;
 }
 
-.yt-table__row:hover .yt-table__cell.yt-table__cell--draggable .yt-icon {
+.yt-table__row:hover .yt-table__cell.yt-table__cell--draggable [data-taco='icon'] {
     @apply visible;
 }
 
 /* head */
 .yt-table__head .yt-table__row {
-    @apply border-t-0 border-b-2 font-bold h-auto w-full select-none;
+    @apply h-auto w-full select-none border-t-0 border-b-2 font-bold;
 }
 
 .yt-table__head .yt-table__head__group {
-    @apply flex flex-wrap flex-1;
+    @apply flex flex-1 flex-wrap;
 }
 
 .yt-table__head .yt-table__head__group .yt-table__cell.yt-table__cell__group {
-    @apply border-b border-grey-light;
+    @apply border-grey-light border-b;
     flex-basis: 100%;
 }
 
 .yt-table__head .yt-table__head__group + .yt-table__head__group {
-    @apply border-l border-grey-light;
+    @apply border-grey-light border-l;
 }
 
 .yt-table__head .yt-table__cell {
-    @apply flex text-grey-darkest justify-center;
+    @apply text-grey-darkest flex justify-center;
 }
 
 .yt-table__head .yt-table__cell > span {
     @apply truncate;
 }
 
-.yt-table__head .yt-table__cell > .yt-icon {
+.yt-table__head .yt-table__cell > [data-taco='icon'] {
     @apply flex-shrink-0;
 }
 
@@ -661,7 +653,7 @@
 }
 
 .yt-table__head .yt-table__cell.yt-table__cell__group + .yt-table__cell__group {
-    @apply border-l-2 border-grey-light;
+    @apply border-grey-light border-l-2;
 }
 
 .yt-table__head .yt-table__cell:not(.yt-table__cell--disable-sort) {
@@ -717,35 +709,26 @@
     overflow-wrap: normal;
 }
 
-.yt-table__cell .yt-label {
-    @apply text-transparent pb-0 -my-2;
+.yt-table__cell [data-taco='label'] {
+    @apply -my-2 pb-0 text-transparent;
     min-height: theme('spacing.10');
 }
 
-.yt-table__cell .yt-label > *:not(.yt-label__message) {
+.yt-table__cell [data-taco='label'] > *:not([data-taco='label']__message) {
     @apply mt-1;
 }
 
-.yt-table__body .yt-table__row.yt-table__row--editing .yt-table__cell .yt-label > *:not(.yt-label__message) {
+.yt-table__body .yt-table__row.yt-table__row--editing .yt-table__cell [data-taco='label'] > *:not([data-taco='label']__message) {
     @apply -mt-5;
 }
 
-.yt-table__cell .yt-label > .yt-label__message {
+.yt-table__cell [data-taco='label'] > [data-taco='label']__message {
     @apply mb-1;
 }
 
 /* drag */
 #yt-table__drag__placeholder {
-    @apply bg-blue text-white rounded font-bold p-4 flex w-3/12;
-}
-
-/* cell alignment */
-.yt-table__cell.yt-table__cell--align-left {
-    @apply justify-start text-left;
-}
-
-.yt-table__cell.yt-table__cell--align-right {
-    @apply justify-end text-right;
+    @apply bg-blue flex w-3/12 rounded p-4 font-bold text-white;
 }
 
 .yt-tabs .yt-tab__list[aria-orientation='vertical'] {

package/dist/taco.cjs.development.js

@@ -4050,7 +4050,7 @@ var Title = /*#__PURE__*/React.forwardRef(function DialogTitle(props, ref) {
 });
 var Footer = /*#__PURE__*/React.forwardRef(function DialogFooter(props, ref) {
   return React.createElement("div", Object.assign({}, props, {
-    className: "flex justify-end mt-8",
+    className: "mt-8 flex justify-end",
     ref: ref
   }), React.createElement(Group, null, props.children));
 });
@@ -4085,7 +4085,7 @@ var Content$2 = /*#__PURE__*/React.forwardRef(function DialogContent(props, ref)
     };
   }
 
-  var className = cn('bg-white rounded fixed-center', {
+  var className = cn('bg-white rounded mt-16 mx-auto', {
     'w-128 text-center justify-center': dialog.size === 'dialog',
     'w-xs': dialog.size === 'xs',
     'w-sm': dialog.size === 'sm',
@@ -4129,7 +4129,7 @@ var Content$2 = /*#__PURE__*/React.forwardRef(function DialogContent(props, ref)
     className: containerClassName
   }, output, dialog.draggable && React.createElement("div", Object.assign({}, dragHandleProps, {
     "aria-label": texts.dialog.drag,
-    className: "yt-dialog__drag absolute-center-x h-3 rounded bg-grey-light cursor-move text-center w-24 top-1.5"
+    className: "yt-dialog__drag absolute-center-x bg-grey-light top-1.5 h-3 w-24 cursor-move rounded text-center"
   })), React.createElement(DialogPrimitive.Close, {
     asChild: true,
     onClick: dialog.onClose
@@ -7852,6 +7852,8 @@ var useRowEditing = function useRowEditing(uniqueId) {
   return plugin;
 };
 
+var actionGroupClassName = '-mt-1 -mb-1 h-8 flex';
+
 var hasActions = function hasActions(inlineEditingUniqueId, handlers, actions) {
   return !!actions || handlers.onRowCreate || handlers.onRowCopy || handlers.onRowDelete || !!inlineEditingUniqueId || handlers.onRowEdit;
 };
@@ -7952,7 +7954,9 @@ var EditModeActions = function EditModeActions() {
       document.removeEventListener('keydown', listener);
     };
   }, []);
-  return React__default.createElement(Group, null, React__default.createElement(IconButton, {
+  return React__default.createElement("div", {
+    className: actionGroupClassName
+  }, React__default.createElement(IconButton, {
     appearance: "primary",
     icon: "tick",
     type: "submit",
@@ -7977,7 +7981,7 @@ var useRowActions = function useRowActions(inlineEditingUniqueId, handlers, acti
       hooks.visibleColumns.push(function (columns) {
         return [].concat(columns, [{
           id: '_actions',
-          className: 'yt-table__cell__actions',
+          className: 'flex justify-end px-1 overflow-visible',
           flex: "0 0 calc((" + actionsLength + " * 2rem) + .5rem)",
           Cell: function Cell(_ref) {
             var row = _ref.row;
@@ -8075,7 +8079,9 @@ var useRowActions = function useRowActions(inlineEditingUniqueId, handlers, acti
             }))) : null);
 
             if (windowed) {
-              return React__default.createElement(Group, null, output);
+              return React__default.createElement("div", {
+                className: actionGroupClassName
+              }, output);
             }
 
             return React__default.createElement(reactIntersectionObserver.InView, {
@@ -8083,7 +8089,8 @@ var useRowActions = function useRowActions(inlineEditingUniqueId, handlers, acti
             }, function (_ref2) {
               var inView = _ref2.inView,
                   ref = _ref2.ref;
-              return React__default.createElement(Group, {
+              return React__default.createElement("div", {
+                className: actionGroupClassName,
                 ref: ref
               }, inView ? output : null);
             });
@@ -8158,7 +8165,7 @@ var useRowSelect = function useRowSelect(onSelectedRows) {
 
             return React__default.createElement(Checkbox, Object.assign({}, props, {
               onChange: onChange,
-              className: "h-auto mt-px"
+              className: "mt-px"
             }));
           },
           Cell: function Cell(_ref2) {
@@ -8190,7 +8197,7 @@ var useRowSelect = function useRowSelect(onSelectedRows) {
             };
 
             return React__default.createElement(Checkbox, Object.assign({}, props, {
-              className: "h-auto mt-px",
+              className: "mt-px",
               onClick: onClick,
               // this is necessary to remove console spam from eslint
               onChange: function onChange() {
@@ -8199,7 +8206,7 @@ var useRowSelect = function useRowSelect(onSelectedRows) {
             }));
           },
           flex: '0 0 36px',
-          className: 'flex-col justify-start'
+          className: 'flex-col justify-start !pb-0'
         }].concat(columns);
       });
     }
@@ -8686,8 +8693,8 @@ var _excluded$K = ["row", "index", "instance", "headerGroups"];
 var renderCell = function renderCell(cell, row) {
   var props = _extends({}, cell.getCellProps(), {
     className: cn('yt-table__cell', cell.column.className, {
-      'yt-table__cell--align-left': cell.column.align === 'left',
-      'yt-table__cell--align-right': cell.column.align === 'right'
+      'justify-start text-left': cell.column.align === 'left',
+      'justify-end text-right': cell.column.align === 'right'
     }),
     style: _extends({}, cell.column.style, {
       flex: typeof cell.column.flex === 'function' ? cell.column.flex(row) : cell.column.flex
@@ -8695,7 +8702,8 @@ var renderCell = function renderCell(cell, row) {
   });
 
   return React__default.createElement("div", Object.assign({}, props, {
-    role: "gridcell"
+    role: "gridcell",
+    "data-taco": "table-cell"
   }), cell.render('Cell') || null);
 };
 
@@ -8790,8 +8798,8 @@ var Column = function Column(_ref) {
     className: cn('yt-table__cell', cell.className, {
       'yt-table__cell__group': !!cell.columns,
       'yt-table__cell--disable-sort': cell.disableSorting,
-      'yt-table__cell--align-left': cell.align === 'left',
-      'yt-table__cell--align-right': cell.align === 'right'
+      'justify-start text-left': cell.align === 'left',
+      'justify-end text-right': cell.align === 'right'
     }),
     style: _extends({}, cell.style, {
       flex: cell.flex
@@ -8803,7 +8811,8 @@ var Column = function Column(_ref) {
   }
 
   return React__default.createElement("div", Object.assign({}, props, {
-    key: cell.id
+    key: cell.id,
+    "data-taco": "table-column"
   }), React__default.createElement("span", null, cell.render('Header')), cell.isSorted ? React__default.createElement(Icon, {
     name: cell.isSortedDesc ? 'chevron-down-solid' : 'chevron-up-solid'
   }) : null);
@@ -9410,6 +9419,12 @@ var tailwindcssAriaAttributes = {
     __proto__: null
 };
 
+function getCjsExportFromNamespace (n) {
+	return n && n['default'] || n;
+}
+
+var require$$0 = getCjsExportFromNamespace(tailwindcssAriaAttributes);
+
 var tailwind_config = {
   theme: {
     colors: {
@@ -9485,7 +9500,7 @@ var tailwind_config = {
       }
     }
   },
-  plugins: [/*#__PURE__*/tailwindcssAriaAttributes, /*#__PURE__*/plugin(function (_ref) {
+  plugins: [/*#__PURE__*/require$$0, /*#__PURE__*/plugin(function (_ref) {
     var addUtilities = _ref.addUtilities,
         theme = _ref.theme;
     // ideally we would do this using the @layer utilities directive, but