@spaced-out/ui-design-system 0.4.1 → 0.4.2

package/.github/workflows/publish_to_npm.yml

@@ -22,7 +22,7 @@ jobs:
       - name: Check Permissions
         id: check-permissions
         env:
-          ALLOWED_USERS: superrover, Anant-Raj, diwakersurya, ashwini-sensehq, vish-sah, VishalBarnawal, sanskar-s, VivekJangid, sharad-kushwah, Swatantramishra1, bhatiarush27, darsh-mecwan-sense, keshavsensehq, SahilShrivastava1
+          ALLOWED_USERS: superrover, Anant-Raj, diwakersurya, ashwini-sensehq, vish-sah, VishalBarnawal, sanskar-s, VivekJangid, sharad-kushwah, Swatantramishra1, bhatiarush27, darsh-mecwan-sense, keshavsensehq, SahilShrivastava1, aditya-kaushal
         if: ${{ !contains(env.ALLOWED_USERS, github.actor) }}
         run: |
           echo "You don't have correct permissions to do this release"

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 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.4.2](https://github.com/spaced-out/ui-design-system/compare/v0.4.1...v0.4.2) (2025-07-18)
+
+
+### Features
+
+* added language support labels in pagination ([#368](https://github.com/spaced-out/ui-design-system/issues/368)) ([9d37138](https://github.com/spaced-out/ui-design-system/commit/9d37138315427b41a28820a92ee466ea544d9ded))
+* pagination static labels ([#370](https://github.com/spaced-out/ui-design-system/issues/370)) ([241bb9d](https://github.com/spaced-out/ui-design-system/commit/241bb9d56dc016f97971e0f2a060a40d6d8d918a))
+
+
+### Bug Fixes
+
+* fixes the depth issue while using useWindowSize ([#369](https://github.com/spaced-out/ui-design-system/issues/369)) ([cc27012](https://github.com/spaced-out/ui-design-system/commit/cc27012f1075e8f435c8d045dd221f66bcc88f2a))
+
 ### [0.4.1](https://github.com/spaced-out/ui-design-system/compare/v0.4.0...v0.4.1) (2025-07-15)
 
 

package/lib/components/Pagination/Pagination.js

@@ -32,6 +32,7 @@ const Pagination = exports.Pagination = /*#__PURE__*/React.forwardRef((props, re
     onChange,
     showFirstButton = style !== 'primary' && showExtraSecPaginationButtons,
     showLastButton = style !== 'primary' && showExtraSecPaginationButtons,
+    staticPaginationLabel,
     ...restPaginationProps
   } = props;
   const showPageSelectionDropDown = style !== 'primary' && showExtraSecPaginationButtons;
@@ -81,7 +82,7 @@ const Pagination = exports.Pagination = /*#__PURE__*/React.forwardRef((props, re
   }), !!totalPages && !!currentPage && /*#__PURE__*/React.createElement(_Text.SubTitleExtraSmall, {
     color: "tertiary",
     className: _PaginationModule.default.secondaryLabel
-  }, "of ", totalPages, " ", totalPages > 1 ? 'Pages' : 'Page')), /*#__PURE__*/React.createElement("div", {
+  }, staticPaginationLabel ? staticPaginationLabel : `of ${totalPages} ${totalPages > 1 ? 'Pages' : 'Page'}`)), /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_PaginationModule.default.paginatorSlot, classNames?.paginator)
   }, items?.map(item => /*#__PURE__*/React.createElement(_PaginationItem.PaginationItem, _extends({
     key: item.id

package/lib/components/Pagination/Pagination.js.flow

@@ -41,6 +41,7 @@ export type PaginationBaseProps = {
   boundaryCount?: number,
   siblingCount?: number,
   style?: 'primary' | 'secondary',
+  staticPaginationLabel?: string,
 };
 
 export type PaginationProps = {
@@ -78,6 +79,7 @@ export const Pagination: React$AbstractComponent<
       onChange,
       showFirstButton = style !== 'primary' && showExtraSecPaginationButtons,
       showLastButton = style !== 'primary' && showExtraSecPaginationButtons,
+      staticPaginationLabel,
       ...restPaginationProps
     } = props;
     const showPageSelectionDropDown =
@@ -136,7 +138,9 @@ export const Pagination: React$AbstractComponent<
                   color="tertiary"
                   className={css.secondaryLabel}
                 >
-                  of {totalPages} {totalPages > 1 ? 'Pages' : 'Page'}
+                  {staticPaginationLabel
+                    ? staticPaginationLabel
+                    : `of ${totalPages} ${totalPages > 1 ? 'Pages' : 'Page'}`}
                 </SubTitleExtraSmall>
               )}
             </>

package/lib/hooks/useWindowSize/useWindowSize.js

@@ -5,26 +5,34 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useWindowSize = useWindowSize;
 var _react = require("react");
+var _lodash = require("lodash");
+const THROTTLE_DURATION = 200;
 function useWindowSize() {
   const [windowSize, setWindowSize] = (0, _react.useState)({
-    width: 0,
-    height: 0
+    width: typeof window !== 'undefined' ? window.innerWidth : 0,
+    height: typeof window !== 'undefined' ? window.innerHeight : 0
   });
   (0, _react.useEffect)(() => {
-    const handler = () => {
-      setWindowSize({
-        width: window.innerWidth,
-        height: window.innerHeight
+    const updateSize = (0, _lodash.throttle)(() => {
+      const {
+        innerWidth,
+        innerHeight
+      } = window;
+      setWindowSize(prevSize => {
+        if (prevSize.width !== innerWidth || prevSize.height !== innerHeight) {
+          return {
+            width: innerWidth,
+            height: innerHeight
+          };
+        }
+        return prevSize;
       });
-    };
-
-    // Set size at the first client-side load
-    handler();
-    window.addEventListener('resize', handler);
-
-    // Remove event listener on cleanup
+    }, THROTTLE_DURATION);
+    window.addEventListener('resize', updateSize);
+    updateSize();
     return () => {
-      window.removeEventListener('resize', handler);
+      window.removeEventListener('resize', updateSize);
+      updateSize.cancel();
     };
   }, []);
   return windowSize;

package/lib/hooks/useWindowSize/useWindowSize.js.flow

@@ -1,6 +1,7 @@
 // @flow strict
 
 import {useEffect, useState} from 'react';
+import {throttle} from 'lodash';
 
 
 type WindowSize = {
@@ -8,28 +9,31 @@ type WindowSize = {
   height: number,
 };
 
+const THROTTLE_DURATION = 200;
+
 export function useWindowSize(): WindowSize {
   const [windowSize, setWindowSize] = useState<WindowSize>({
-    width: 0,
-    height: 0,
+    width: typeof window !== 'undefined' ? window.innerWidth : 0,
+    height: typeof window !== 'undefined' ? window.innerHeight : 0,
   });
 
   useEffect(() => {
-    const handler = () => {
-      setWindowSize({
-        width: window.innerWidth,
-        height: window.innerHeight,
+    const updateSize = throttle(() => {
+      const {innerWidth, innerHeight} = window;
+      setWindowSize((prevSize) => {
+        if (prevSize.width !== innerWidth || prevSize.height !== innerHeight) {
+          return {width: innerWidth, height: innerHeight};
+        }
+        return prevSize;
       });
-    };
-
-    // Set size at the first client-side load
-    handler();
+    }, THROTTLE_DURATION);
 
-    window.addEventListener('resize', handler);
+    window.addEventListener('resize', updateSize);
+    updateSize();
 
-    // Remove event listener on cleanup
     return () => {
-      window.removeEventListener('resize', handler);
+      window.removeEventListener('resize', updateSize);
+      updateSize.cancel();
     };
   }, []);
 

package/package.json

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