@stack-spot/portal-layout 2.36.3 → 2.37.1

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## [2.37.1](https://github.com/stack-spot/portal-commons/compare/portal-layout@v2.37.0...portal-layout@v2.37.1) (2025-11-07)
+
+
+### Bug Fixes
+
+* semantic for accessibility ([#1766](https://github.com/stack-spot/portal-commons/issues/1766)) ([578bc95](https://github.com/stack-spot/portal-commons/commit/578bc95698f5d707f4645693df22c4da57f8684e))
+
+## [2.37.0](https://github.com/stack-spot/portal-commons/compare/portal-layout@v2.36.3...portal-layout@v2.37.0) (2025-09-30)
+
+
+### Features
+
+* 3156 notifications ([#1491](https://github.com/stack-spot/portal-commons/issues/1491)) ([3f9f6a6](https://github.com/stack-spot/portal-commons/commit/3f9f6a6b56004893cca4e0d53afe8eccdf615005))
+* upgrades translation lib ([#1645](https://github.com/stack-spot/portal-commons/issues/1645)) ([838a740](https://github.com/stack-spot/portal-commons/commit/838a7404c9946e8804cebab6ba33a24a0cf52a80))
+
 ## [2.36.3](https://github.com/stack-spot/portal-commons/compare/portal-layout@v2.36.2...portal-layout@v2.36.3) (2025-09-02)
 
 

package/dist/components/NotificationCenter/NotificationPanel.js

@@ -8,7 +8,7 @@ import { NotificationPanelFooter } from './NotificationsPanelFooter.js';
 import { StyledBackdrop } from './styled.js';
 export const NotificationPanel = ({ filter, onFilter, loading, error, visible, onClose, ...props }) => {
     const controller = useNotificationController();
-    return (_jsx(StyledBackdrop, { visible: visible, onClose: onClose, persistent: true, children: _jsx(AnimatedHeight, { className: "notification-panel", visible: visible, header: _jsx(NotificationPanelHeader, { filter: filter, onChangeFilter: onFilter, onClose: onClose }), footer: _jsx(NotificationPanelFooter, { onClose: onClose }), children: _jsx(ScrollView, { direction: "vertical", style: { maxHeight: 'calc(100vh - 300px)' }, children: error ? _jsx(ErrorFeedback, { code: error.code, direction: "column" }) : _jsx(NotificationList, { ...props, compact: true, loading: loading, onCommit: id => controller.markAsCommitted(id), onClickViewNotification: () => {
+    return (_jsx(StyledBackdrop, { visible: visible, onClose: onClose, persistent: true, children: _jsx(AnimatedHeight, { className: "notification-panel", visible: visible, header: _jsx(NotificationPanelHeader, { filter: filter, onChangeFilter: onFilter, onClose: onClose }), footer: _jsx(NotificationPanelFooter, { onClose: onClose }), children: _jsx(ScrollView, { direction: "vertical", style: { maxHeight: 'calc(100vh - 200px)' }, children: error ? _jsx(ErrorFeedback, { code: error.code, direction: "column" }) : _jsx(NotificationList, { ...props, compact: true, loading: loading, onCommit: id => controller.markAsCommitted(id), onClickViewNotification: () => {
                         onClose();
                         controller.config.onClickViewNotification?.();
                     }, onClickAction: (id) => {

package/dist/components/NotificationCenter/NotificationsPanelFooter.js

@@ -7,6 +7,6 @@ export const NotificationPanelFooter = ({ onClose }) => {
     const t = useNotificationsDictionary();
     const controller = useNotificationController();
     const Link = useAnchorTag();
-    return (_jsx(Button, { as: Link, onClick: onClose, size: "sm", colorScheme: "inverse", appearance: "text", className: "see-all", href: controller.config.notificationsPath, children: _jsx(Text, { appearance: "microtext1", children: t.seeAll }) }));
+    return (_jsx(Button, { as: Link, onClick: onClose, size: "sm", colorScheme: "inverse", appearance: "text", className: "see-all", href: controller.config.notificationsPath, children: _jsx(Text, { appearance: "microtext1", children: t.viewAll }) }));
 };
 //# sourceMappingURL=NotificationsPanelFooter.js.map

package/dist/components/NotificationCenter/NotificationsPanelFooter.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationsPanelFooter.js","sourceRoot":"","sources":["../../../src/components/NotificationCenter/NotificationsPanelFooter.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAA;AACnE,OAAO,EAAE,yBAAyB,EAAE,MAAM,6CAA6C,CAAA;AACvF,OAAO,EAAE,0BAA0B,EAAE,MAAM,cAAc,CAAA;AAEzD,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,EAAE,OAAO,EAA2B,EAAE,EAAE;IAC9E,MAAM,CAAC,GAAG,0BAA0B,EAAE,CAAA;IACtC,MAAM,UAAU,GAAG,yBAAyB,EAAE,CAAA;IAC9C,MAAM,IAAI,GAAG,YAAY,EAAE,CAAA;IAC3B,OAAO,CACL,KAAC,MAAM,IACL,EAAE,EAAE,IAAI,EACR,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,IAAI,EACT,WAAW,EAAC,SAAS,EACrB,UAAU,EAAC,MAAM,EACjB,SAAS,EAAC,SAAS,EACnB,IAAI,EAAE,UAAU,CAAC,MAAM,CAAC,iBAAiB,YAEzC,KAAC,IAAI,IAAC,UAAU,EAAC,YAAY,YAC1B,CAAC,CAAC,MAAM,GACJ,GACA,CACV,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"NotificationsPanelFooter.js","sourceRoot":"","sources":["../../../src/components/NotificationCenter/NotificationsPanelFooter.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAA;AACnE,OAAO,EAAE,yBAAyB,EAAE,MAAM,6CAA6C,CAAA;AACvF,OAAO,EAAE,0BAA0B,EAAE,MAAM,cAAc,CAAA;AAEzD,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,EAAE,OAAO,EAA2B,EAAE,EAAE;IAC9E,MAAM,CAAC,GAAG,0BAA0B,EAAE,CAAA;IACtC,MAAM,UAAU,GAAG,yBAAyB,EAAE,CAAA;IAC9C,MAAM,IAAI,GAAG,YAAY,EAAE,CAAA;IAC3B,OAAO,CACL,KAAC,MAAM,IACL,EAAE,EAAE,IAAI,EACR,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,IAAI,EACT,WAAW,EAAC,SAAS,EACrB,UAAU,EAAC,MAAM,EACjB,SAAS,EAAC,SAAS,EACnB,IAAI,EAAE,UAAU,CAAC,MAAM,CAAC,iBAAiB,YAEzC,KAAC,IAAI,IAAC,UAAU,EAAC,YAAY,YAC1B,CAAC,CAAC,OAAO,GACL,GACA,CACV,CAAA;AACH,CAAC,CAAA"}

package/dist/components/NotificationCenter/dictionary.d.ts

@@ -1,2 +1,2 @@
-export declare const useNotificationsDictionary: () => Record<"close" | "notifications" | "ALL.ariaLabel" | "UNREAD.ariaLabel" | "HIGH.ariaLabel" | "MEDIUM.ariaLabel" | "LOW.ariaLabel" | "ALL.label" | "UNREAD.label" | "HIGH.label" | "MEDIUM.label" | "LOW.label" | "seeAll" | "openNotifications" | "hasUnread" | "loadingNotifications" | "tour", string>;
+export declare const useNotificationsDictionary: () => Record<"close" | "notifications" | "ALL.ariaLabel" | "UNREAD.ariaLabel" | "HIGH.ariaLabel" | "MEDIUM.ariaLabel" | "LOW.ariaLabel" | "ALL.label" | "UNREAD.label" | "HIGH.label" | "MEDIUM.label" | "LOW.label" | "viewAll" | "openNotifications" | "hasUnread" | "loadingNotifications" | "tour", string>;
 //# sourceMappingURL=dictionary.d.ts.map

package/dist/components/NotificationCenter/dictionary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dictionary.d.ts","sourceRoot":"","sources":["../../../src/components/NotificationCenter/dictionary.ts"],"names":[],"mappings":"AA2CA,eAAO,MAAM,0BAA0B,gTAAiC,CAAA"}
+{"version":3,"file":"dictionary.d.ts","sourceRoot":"","sources":["../../../src/components/NotificationCenter/dictionary.ts"],"names":[],"mappings":"AA2CA,eAAO,MAAM,0BAA0B,iTAAiC,CAAA"}

package/dist/components/NotificationCenter/dictionary.js

@@ -12,7 +12,7 @@ const dictionary = {
         'HIGH.label': 'High',
         'MEDIUM.label': 'Medium',
         'LOW.label': 'Low',
-        seeAll: 'See all notifications',
+        viewAll: 'View all notifications',
         openNotifications: 'View notifications',
         hasUnread: 'Has Unread notifications',
         close: 'Close',
@@ -31,7 +31,7 @@ const dictionary = {
         'HIGH.label': 'Alto',
         'MEDIUM.label': 'Médio',
         'LOW.label': 'Baixo',
-        seeAll: 'Ver todas as notificações',
+        viewAll: 'Ver todas as notificações',
         openNotifications: 'Visualizar notificações',
         hasUnread: 'Existem notificações não lidas',
         close: 'Fechar',

package/dist/components/NotificationCenter/dictionary.js.map

@@ -1 +1 @@
-{"version":3,"file":"dictionary.js","sourceRoot":"","sources":["../../../src/components/NotificationCenter/dictionary.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAEvE,MAAM,UAAU,GAAG;IACjB,EAAE,EAAE;QACF,aAAa,EAAE,eAAe;QAC9B,eAAe,EAAE,wBAAwB;QACzC,kBAAkB,EAAE,2BAA2B;QAC/C,gBAAgB,EAAE,6BAA6B;QAC/C,kBAAkB,EAAE,4CAA4C;QAChE,eAAe,EAAE,yCAAyC;QAC1D,WAAW,EAAE,KAAK;QAClB,cAAc,EAAE,QAAQ;QACxB,YAAY,EAAE,MAAM;QACpB,cAAc,EAAE,QAAQ;QACxB,WAAW,EAAE,KAAK;QAClB,MAAM,EAAE,uBAAuB;QAC/B,iBAAiB,EAAE,oBAAoB;QACvC,SAAS,EAAE,0BAA0B;QACrC,KAAK,EAAE,OAAO;QACd,oBAAoB,EAAE,2FAA2F;QACjH,IAAI,EAAE,+IAA+I;KACtJ;IACD,EAAE,EAAE;QACF,aAAa,EAAE,cAAc;QAC7B,eAAe,EAAE,+BAA+B;QAChD,kBAAkB,EAAE,gCAAgC;QACpD,gBAAgB,EAAE,+BAA+B;QACjD,kBAAkB,EAAE,4CAA4C;QAChE,eAAe,EAAE,4CAA4C;QAC7D,WAAW,EAAE,OAAO;QACpB,cAAc,EAAE,WAAW;QAC3B,YAAY,EAAE,MAAM;QACpB,cAAc,EAAE,OAAO;QACvB,WAAW,EAAE,OAAO;QACpB,MAAM,EAAE,2BAA2B;QACnC,iBAAiB,EAAE,yBAAyB;QAC5C,SAAS,EAAE,gCAAgC;QAC3C,KAAK,EAAE,QAAQ;QACf,oBAAoB,EAAE,sFAAsF;QAC5G,IAAI,EAAE,2JAA2J;KAClK;CACmB,CAAA;AAEtB,MAAM,CAAC,MAAM,0BAA0B,GAAG,GAAG,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,CAAA"}
+{"version":3,"file":"dictionary.js","sourceRoot":"","sources":["../../../src/components/NotificationCenter/dictionary.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAEvE,MAAM,UAAU,GAAG;IACjB,EAAE,EAAE;QACF,aAAa,EAAE,eAAe;QAC9B,eAAe,EAAE,wBAAwB;QACzC,kBAAkB,EAAE,2BAA2B;QAC/C,gBAAgB,EAAE,6BAA6B;QAC/C,kBAAkB,EAAE,4CAA4C;QAChE,eAAe,EAAE,yCAAyC;QAC1D,WAAW,EAAE,KAAK;QAClB,cAAc,EAAE,QAAQ;QACxB,YAAY,EAAE,MAAM;QACpB,cAAc,EAAE,QAAQ;QACxB,WAAW,EAAE,KAAK;QAClB,OAAO,EAAE,wBAAwB;QACjC,iBAAiB,EAAE,oBAAoB;QACvC,SAAS,EAAE,0BAA0B;QACrC,KAAK,EAAE,OAAO;QACd,oBAAoB,EAAE,2FAA2F;QACjH,IAAI,EAAE,+IAA+I;KACtJ;IACD,EAAE,EAAE;QACF,aAAa,EAAE,cAAc;QAC7B,eAAe,EAAE,+BAA+B;QAChD,kBAAkB,EAAE,gCAAgC;QACpD,gBAAgB,EAAE,+BAA+B;QACjD,kBAAkB,EAAE,4CAA4C;QAChE,eAAe,EAAE,4CAA4C;QAC7D,WAAW,EAAE,OAAO;QACpB,cAAc,EAAE,WAAW;QAC3B,YAAY,EAAE,MAAM;QACpB,cAAc,EAAE,OAAO;QACvB,WAAW,EAAE,OAAO;QACpB,OAAO,EAAE,2BAA2B;QACpC,iBAAiB,EAAE,yBAAyB;QAC5C,SAAS,EAAE,gCAAgC;QAC3C,KAAK,EAAE,QAAQ;QACf,oBAAoB,EAAE,sFAAsF;QAC5G,IAAI,EAAE,2JAA2J;KAClK;CACmB,CAAA;AAEtB,MAAM,CAAC,MAAM,0BAA0B,GAAG,GAAG,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,CAAA"}

package/dist/components/OverlayContent.js

@@ -32,6 +32,6 @@ const ContentBox = styled.section `
  */
 export const OverlayContent = ({ children, title, subtitle, className, style, onClose, onGoBack, type }) => {
     const t = useDictionary();
-    return (_jsxs(ContentBox, { style: style, className: listToClass([className, type]), children: [_jsxs("header", { children: [_jsxs(Flex, { flexDirection: "column", flex: 1, children: [_jsxs(Flex, { style: { gap: '6px' }, children: [onGoBack && (_jsx(IconButton, { appearance: "circle", onClick: onGoBack, title: t.goBack, "aria-label": t.goBack, children: _jsx(ArrowLeft, {}) })), _jsx(Text, { as: "h2", appearance: type === 'modal' ? 'h3' : 'h4', children: title })] }), subtitle && _jsx(Text, { appearance: "body2", colorScheme: "light.700", children: subtitle })] }), _jsx(IconButton, { appearance: "circle", onClick: onClose, title: t.close, "aria-label": t.close, id: CLOSE_OVERLAY_ID, children: _jsx(TimesMini, {}) })] }), children] }));
+    return (_jsxs(ContentBox, { style: style, className: listToClass([className, type]), children: [_jsxs("header", { children: [_jsxs(Flex, { flexDirection: "column", flex: 1, children: [_jsxs(Flex, { style: { gap: '6px' }, children: [onGoBack && (_jsx(IconButton, { appearance: "circle", onClick: onGoBack, title: t.goBack, "aria-label": t.goBack, children: _jsx(ArrowLeft, {}) })), _jsx(Text, { as: "h1", appearance: type === 'modal' ? 'h3' : 'h4', children: title })] }), subtitle && _jsx(Text, { appearance: "body2", colorScheme: "light.700", children: subtitle })] }), _jsx(IconButton, { appearance: "circle", onClick: onClose, title: t.close, "aria-label": t.close, id: CLOSE_OVERLAY_ID, children: _jsx(TimesMini, {}) })] }), children] }));
 };
 //# sourceMappingURL=OverlayContent.js.map

package/dist/dictionary.js

@@ -1,4 +1,4 @@
-import { getLanguage, useTranslate } from '@stack-spot/portal-translate';
+import { getLanguage, ptEn, useTranslate } from '@stack-spot/portal-translate';
 const dictionary = {
     en: {
         close: 'Close',
@@ -22,7 +22,7 @@ const dictionary = {
  */
 export const useDictionary = () => useTranslate(dictionary);
 export function getDictionary() {
-    const language = getLanguage();
+    const language = getLanguage(ptEn);
     return dictionary[language];
 }
 //# sourceMappingURL=dictionary.js.map

package/dist/dictionary.js.map

@@ -1 +1 @@
-{"version":3,"file":"dictionary.js","sourceRoot":"","sources":["../src/dictionary.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,WAAW,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAEpF,MAAM,UAAU,GAAG;IACjB,EAAE,EAAE;QACF,KAAK,EAAE,OAAO;QACd,eAAe,EAAE,kDAAkD;QACnE,OAAO,EAAE,SAAS;QAClB,OAAO,EAAE,IAAI;QACb,MAAM,EAAE,QAAQ;QAChB,MAAM,EAAE,QAAQ;KACjB;IACD,EAAE,EAAE;QACF,KAAK,EAAE,QAAQ;QACf,eAAe,EAAE,4DAA4D;QAC7E,OAAO,EAAE,WAAW;QACpB,OAAO,EAAE,IAAI;QACb,MAAM,EAAE,UAAU;QAClB,MAAM,EAAE,QAAQ;KACjB;CACmB,CAAA;AAEtB;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,CAAA;AAE3D,MAAM,UAAU,aAAa;IAC3B,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAA;IAC9B,OAAO,UAAU,CAAC,QAAQ,CAAC,CAAA;AAC7B,CAAC"}
+{"version":3,"file":"dictionary.js","sourceRoot":"","sources":["../src/dictionary.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,WAAW,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAE1F,MAAM,UAAU,GAAG;IACjB,EAAE,EAAE;QACF,KAAK,EAAE,OAAO;QACd,eAAe,EAAE,kDAAkD;QACnE,OAAO,EAAE,SAAS;QAClB,OAAO,EAAE,IAAI;QACb,MAAM,EAAE,QAAQ;QAChB,MAAM,EAAE,QAAQ;KACjB;IACD,EAAE,EAAE;QACF,KAAK,EAAE,QAAQ;QACf,eAAe,EAAE,4DAA4D;QAC7E,OAAO,EAAE,WAAW;QACpB,OAAO,EAAE,IAAI;QACb,MAAM,EAAE,UAAU;QAClB,MAAM,EAAE,QAAQ;KACjB;CACmB,CAAA;AAEtB;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,CAAA;AAE3D,MAAM,UAAU,aAAa;IAC3B,MAAM,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,CAAA;IAClC,OAAO,UAAU,CAAC,QAAQ,CAAC,CAAA;AAC7B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stack-spot/portal-layout",
-  "version": "2.36.3",
+  "version": "2.37.1",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -14,8 +14,8 @@
     "@citric/icons": "^5.9.0",
     "@citric/ui": "^6.10.1",
     "@stack-spot/portal-theme": "^1.1.1",
-    "@stack-spot/portal-translate": "^1.1.0",
-    "@stack-spot/portal-components": "^2.22.4",
+    "@stack-spot/portal-translate": "~2.1.0",
+    "@stack-spot/portal-components": "^2.25.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "styled-components": "^6.1.10"

package/src/components/NotificationCenter/NotificationPanel.tsx

@@ -17,7 +17,7 @@ export const NotificationPanel = ({ filter, onFilter, loading, error, visible, o
         header={<NotificationPanelHeader filter={filter} onChangeFilter={onFilter} onClose={onClose} />}
         footer={<NotificationPanelFooter onClose={onClose} />}
       >
-        <ScrollView direction="vertical" style={{ maxHeight: 'calc(100vh - 300px)' }}>
+        <ScrollView direction="vertical" style={{ maxHeight: 'calc(100vh - 200px)' }}>
           {error ? <ErrorFeedback code={error.code} direction="column" /> : <NotificationList
             {...props}
             compact

package/src/components/NotificationCenter/NotificationsPanelFooter.tsx

@@ -18,7 +18,7 @@ export const NotificationPanelFooter = ({ onClose }: { onClose: () => void }) =>
       href={controller.config.notificationsPath}
     >
       <Text appearance="microtext1">
-        {t.seeAll}
+        {t.viewAll}
       </Text>
     </Button>
   )

package/src/components/NotificationCenter/dictionary.ts

@@ -13,7 +13,7 @@ const dictionary = {
     'HIGH.label': 'High',
     'MEDIUM.label': 'Medium',
     'LOW.label': 'Low',
-    seeAll: 'See all notifications',
+    viewAll: 'View all notifications',
     openNotifications: 'View notifications',
     hasUnread: 'Has Unread notifications',
     close: 'Close',
@@ -32,7 +32,7 @@ const dictionary = {
     'HIGH.label': 'Alto',
     'MEDIUM.label': 'Médio',
     'LOW.label': 'Baixo',
-    seeAll: 'Ver todas as notificações',
+    viewAll: 'Ver todas as notificações',
     openNotifications: 'Visualizar notificações',
     hasUnread: 'Existem notificações não lidas',
     close: 'Fechar',

package/src/components/OverlayContent.tsx

@@ -79,7 +79,7 @@ export const OverlayContent = ({ children, title, subtitle, className, style, on
                 <ArrowLeft />
               </IconButton>
             )}
-            <Text as="h2" appearance={type === 'modal' ? 'h3' : 'h4'}>{title}</Text>
+            <Text as="h1" appearance={type === 'modal' ? 'h3' : 'h4'}>{title}</Text>
           </Flex>
           {subtitle && <Text appearance="body2" colorScheme="light.700">{subtitle}</Text>}
         </Flex>

package/src/dictionary.ts

@@ -1,4 +1,4 @@
-import { Dictionary, getLanguage, useTranslate } from '@stack-spot/portal-translate'
+import { Dictionary, getLanguage, ptEn, useTranslate } from '@stack-spot/portal-translate'
 
 const dictionary = {
   en: {
@@ -25,6 +25,6 @@ const dictionary = {
 export const useDictionary = () => useTranslate(dictionary)
 
 export function getDictionary() {
-  const language = getLanguage()
+  const language = getLanguage(ptEn)
   return dictionary[language]
 }