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

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

@@ -14,6 +14,7 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _onyxTokens = require("@pingux/onyx-tokens");
 var _Text = require("../Text/Text.styles");
 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) { (0, _defineProperty2["default"])(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; }
@@ -24,6 +25,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: _onyxTokens.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%',
@@ -31,43 +63,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'
         }
-      }
+      })
     }
   }
 };
@@ -99,6 +136,19 @@ var head = _objectSpread(_objectSpread({}, _Text.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',
@@ -139,5 +189,6 @@ var _default = exports["default"] = {
   container: container,
   data: data,
   head: head,
-  row: row
+  row: row,
+  resizer: resizer
 };