@pingux/astro 2.206.2-alpha.0 → 2.207.0-alpha.0

package/lib/components/TableBase/TableBase.stories.js

@@ -36,7 +36,7 @@ import { items as listData } from '../../utils/devUtils/constants/items';
 import TableReadme from './TableBase.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Experimental/Table',
+  title: 'Components/TableBase',
   component: TableBase,
   parameters: {
     docs: {
@@ -383,6 +383,56 @@ DynamicWithSorting.parameters = {
     }
   }
 };
+export var WithResizableColumns = function WithResizableColumns() {
+  return ___EmotionJSX(Card, {
+    variant: "cards.tableWrapper"
+  }, ___EmotionJSX(TableBase, {
+    caption: "Lorem ipsum",
+    "aria-label": "table"
+  }, ___EmotionJSX(THead, null, ___EmotionJSX(Column, {
+    minWidth: 100,
+    allowsResizing: true
+  }, "Type"), ___EmotionJSX(Column, {
+    minWidth: 100,
+    allowsResizing: true
+  }, "Date"), ___EmotionJSX(Column, {
+    minWidth: 100
+  }, "Additional Grant"), ___EmotionJSX(Column, {
+    minWidth: 100
+  }, "Total Grant")), ___EmotionJSX(TBody, {
+    items: objects
+  }, function (item) {
+    return ___EmotionJSX(Row, {
+      key: item.id
+    }, ___EmotionJSX(Cell, null, item.type), ___EmotionJSX(Cell, null, item.date), ___EmotionJSX(Cell, null, item.additional_grant), ___EmotionJSX(Cell, null, item.total_grant));
+  })));
+};
+export var WithMinMaxColumnWidth = function WithMinMaxColumnWidth() {
+  return ___EmotionJSX(Card, {
+    variant: "cards.tableWrapper"
+  }, ___EmotionJSX(TableBase, {
+    caption: "Lorem ipsum",
+    "aria-label": "table"
+  }, ___EmotionJSX(THead, null, ___EmotionJSX(Column, {
+    minWidth: 80,
+    maxWidth: 200
+  }, "Type"), ___EmotionJSX(Column, {
+    minWidth: 120,
+    maxWidth: 300
+  }, "Date"), ___EmotionJSX(Column, {
+    minWidth: 100,
+    maxWidth: 180
+  }, "Additional Grant"), ___EmotionJSX(Column, {
+    minWidth: 100,
+    maxWidth: 180
+  }, "Total Grant")), ___EmotionJSX(TBody, {
+    items: objects
+  }, function (item) {
+    return ___EmotionJSX(Row, {
+      key: item.id
+    }, ___EmotionJSX(Cell, null, item.type), ___EmotionJSX(Cell, null, item.date), ___EmotionJSX(Cell, null, item.additional_grant), ___EmotionJSX(Cell, null, item.total_grant));
+  })));
+};
 export var WithLastColumnSticky = function WithLastColumnSticky() {
   return ___EmotionJSX(Card, {
     variant: "cards.tableWrapper",

package/lib/components/TableBase/TableBase.styles.js

@@ -9,6 +9,7 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { astroTokens } from '@pingux/onyx-tokens';
 import { text } from '../Text/Text.styles';
 var defaultFocus = {
   outline: '1px',
@@ -17,6 +18,37 @@ var defaultFocus = {
   outlineOffset: '-1px',
   zIndex: 2
 };
+
+// Pseudo-element styles for the sticky last column separator and shadow.
+// Using ::after/::before instead of border-left + box-shadow because:
+//   - border-collapse:collapse absorbs border-left (invisible until adjacent cell scrolls away)
+//   - overflow:auto on the scroll container clips outward box-shadow
+// Pseudo-elements live inside the sticky cell's stacking context and render
+// within the visible viewport, so neither constraint applies.
+var stickyColumnSeparator = {
+  // 1px left border line — unaffected by border-collapse
+  '&::after': {
+    content: '""',
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    width: '1px',
+    backgroundColor: astroTokens.color.common.border,
+    pointerEvents: 'none'
+  },
+  // drop shadow extending left into the scrolling area — unaffected by overflow clipping
+  '&::before': {
+    content: '""',
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: '-6px',
+    width: '6px',
+    background: 'linear-gradient(to right, transparent, rgba(0, 0, 0, 0.13))',
+    pointerEvents: 'none'
+  }
+};
 var container = {
   width: '100%',
   height: '100%',
@@ -24,43 +56,48 @@ var container = {
   borderCollapse: 'collapse',
   position: 'relative',
   '&.is-last-column-sticky': {
-    'thead tr th:last-of-type': {
+    'thead tr th:last-of-type': _objectSpread(_objectSpread({
       position: 'sticky',
       right: 0,
       backgroundColor: 'white',
-      zIndex: 2,
+      zIndex: 2
+    }, stickyColumnSeparator), {}, {
       '&.is-focused': {
         borderStyle: 'solid',
         borderColor: 'transparent',
         borderWidth: '2px'
       }
-    },
+    }),
     'tbody tr': {
       '&.is-focused td:last-of-type': {
         borderStyle: 'solid',
         borderColor: 'transparent',
         borderWidth: '4px 2px'
       },
-      '&:nth-of-type(odd) td:last-of-type': {
+      '&:nth-of-type(odd) td:last-of-type': _objectSpread(_objectSpread({
         position: 'sticky',
         right: 0,
-        backgroundColor: 'inherit',
+        zIndex: 1,
+        backgroundColor: 'inherit'
+      }, stickyColumnSeparator), {}, {
         '&.is-focused': {
           borderStyle: 'solid',
           borderColor: 'transparent',
           borderWidth: '2px'
         }
-      },
-      '&:nth-of-type(even) td:last-of-type': {
+      }),
+      '&:nth-of-type(even) td:last-of-type': _objectSpread(_objectSpread({
         position: 'sticky',
         right: 0,
-        backgroundColor: 'white',
+        zIndex: 1,
+        backgroundColor: 'white'
+      }, stickyColumnSeparator), {}, {
         '&.is-focused': {
           borderStyle: 'solid',
           borderColor: 'transparent',
           borderWidth: '2px'
         }
-      }
+      })
     }
   }
 };
@@ -92,6 +129,19 @@ var head = _objectSpread(_objectSpread({}, text.label), {}, {
   },
   '&.is-focused': _objectSpread({}, defaultFocus)
 });
+var resizer = {
+  cursor: 'col-resize',
+  display: 'inline-block',
+  width: '2px',
+  height: '100%',
+  backgroundColor: 'neutral.10',
+  position: 'absolute',
+  right: '0px',
+  top: '0',
+  '&.is-focused': {
+    backgroundColor: 'focus'
+  }
+};
 var tbody = {
   borderBottom: '1px solid',
   borderBottomColor: 'neutral.80',
@@ -132,5 +182,6 @@ export default {
   container: container,
   data: data,
   head: head,
-  row: row
+  row: row,
+  resizer: resizer
 };