@spaced-out/ui-design-system 0.3.33 → 0.3.35

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.3.35](https://github.com/spaced-out/ui-design-system/compare/v0.3.34...v0.3.35) (2025-04-14)
+
+
+### Bug Fixes
+
+* fixes loader scrolling for a big table ([#333](https://github.com/spaced-out/ui-design-system/issues/333)) ([0fa6c74](https://github.com/spaced-out/ui-design-system/commit/0fa6c74db3d221a27890854a884602577345c6d9))
+
+### [0.3.34](https://github.com/spaced-out/ui-design-system/compare/v0.3.33...v0.3.34) (2025-04-08)
+
+
+### Bug Fixes
+
+* added updates in Table stories ([#332](https://github.com/spaced-out/ui-design-system/issues/332)) ([43d5c6b](https://github.com/spaced-out/ui-design-system/commit/43d5c6b68617387fcd906ed78d53f8d98d467ca8))
+
 ### [0.3.33](https://github.com/spaced-out/ui-design-system/compare/v0.3.32...v0.3.33) (2025-04-03)
 
 

package/lib/components/Table/StaticTable.js

@@ -8,6 +8,8 @@ exports.StaticTable = StaticTable;
 var React = _interopRequireWildcard(require("react"));
 var _get = _interopRequireDefault(require("lodash/get"));
 var _xor = _interopRequireDefault(require("lodash/xor"));
+var _useWindowSize = require("../../hooks/useWindowSize");
+var _size = require("../../styles/variables/_size");
 var _classify = require("../../utils/classify");
 var _makeClassNameComponent = require("../../utils/makeClassNameComponent");
 var _DefaultRow = require("./DefaultRow");
@@ -62,6 +64,16 @@ function StaticTable(props) {
   // this is a fallback and honestly probably doesn't need the
   // memo'ing
   const mappedKeys = React.useMemo(() => rowKeys ?? entries.map(e => (0, _get.default)(e, idName)), [entries, idName, rowKeys]);
+  const tableRef = React.useRef(null);
+  const {
+    width
+  } = (0, _useWindowSize.useWindowSize)();
+  const [tableWidth, setTableWidth] = React.useState();
+  React.useEffect(() => {
+    if (tableRef.current) {
+      setTableWidth(tableRef.current.offsetWidth);
+    }
+  }, [width]);
 
   /**
    * this function is also used to decide weather to show checkbox in header or not. so it's value is undefined incase selectedKeys is not there.
@@ -82,8 +94,10 @@ function StaticTable(props) {
   return /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.classify)(_TableModule.default.tableContainer, classNames?.wrapper),
     "data-id": "table-wrap",
+    ref: tableRef,
     style: {
-      '--border-radius': borderRadius
+      '--border-radius': borderRadius,
+      '--table-width': tableWidth ? `${tableWidth}px` : _size.sizeFluid
     }
   }, /*#__PURE__*/React.createElement(BasicTable, {
     "data-id": "basic-table",

package/lib/components/Table/StaticTable.js.flow

@@ -4,6 +4,8 @@ import * as React from 'react';
 import get from 'lodash/get';
 import xor from 'lodash/xor';
 
+import {useWindowSize} from '../../hooks/useWindowSize';
+import {sizeFluid} from '../../styles/variables/_size';
 import {classify} from '../../utils/classify';
 import type {ClassNameComponent} from '../../utils/makeClassNameComponent';
 import {makeClassNameComponent} from '../../utils/makeClassNameComponent';
@@ -75,6 +77,16 @@ export function StaticTable<Data: GenericObject, Extras: GenericObject>(props: {
     [entries, idName, rowKeys],
   );
 
+  const tableRef = React.useRef(null);
+  const {width} = useWindowSize();
+  const [tableWidth, setTableWidth] = React.useState();
+
+  React.useEffect(() => {
+    if (tableRef.current) {
+      setTableWidth(tableRef.current.offsetWidth);
+    }
+  }, [width]);
+
   /**
    * this function is also used to decide weather to show checkbox in header or not. so it's value is undefined incase selectedKeys is not there.
    */
@@ -97,8 +109,10 @@ export function StaticTable<Data: GenericObject, Extras: GenericObject>(props: {
     <div
       className={classify(css.tableContainer, classNames?.wrapper)}
       data-id="table-wrap"
+      ref={tableRef}
       style={{
         '--border-radius': borderRadius,
+        '--table-width': tableWidth ? `${tableWidth}px` : sizeFluid,
       }}
     >
       <BasicTable

package/lib/components/Table/Table.module.css

@@ -16,12 +16,15 @@
 @value (fontLineHeight170) from '../../styles/variables/_font.css';
 @value (elevationCard) from '../../styles/variables/_elevation.css';
 
+@value tableRowTotalPadding: calc(spaceMedium * 2);
+
 .fooBar {
   color: colorFillPrimary;
 }
 
 .tableContainer {
   --border-radius: borderRadiusMedium;
+  --table-width: sizeFluid;
   composes: borderPrimary from '../../styles/border.module.css';
   width: sizeFluid;
   overflow-x: auto;
@@ -167,6 +170,9 @@
 
 .emptyRow {
   display: flex;
+  width: calc(var(--table-width) - tableRowTotalPadding);
+  position: sticky;
+  left: spaceMedium;
   flex: 0 0 auto;
   align-items: center;
   justify-content: center;

package/lib/styles/typography.module.css

@@ -140,11 +140,13 @@
 .menuTextMedium {
   composes: buttonTextMedium;
   line-height: fontLineHeight130;
+  letter-spacing: fontLetterSpacing0;
 }
 
 .menuTextSmall {
   composes: buttonTextSmall;
-  letter-spacing: fontLineHeight130;
+  letter-spacing: fontLetterSpacing0;
+  line-height: fontLineHeight130;
 }
 
 .formInputMedium {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.3.33",
+  "version": "0.3.35",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {