@stack-spot/portal-layout 0.0.18 → 0.0.20

package/dist/Layout.d.ts

@@ -1,9 +1,9 @@
 import { WithStyle } from '@stack-spot/portal-theme';
 import '@stack-spot/portal-theme/dist/theme.css';
 import { ReactElement, ReactNode } from 'react';
-import { DescriptionFn, ErrorHandler } from './components/error/ErrorManager';
-import { HeaderProps } from './components/Header';
-import { MenuProps } from './components/menu/types';
+import { DescriptionFn, ErrorHandler } from './components/error/ErrorManager.js';
+import { HeaderProps } from './components/Header.js';
+import { MenuProps } from './components/menu/types.js';
 import './layout.css';
 interface Props extends WithStyle {
     menu: MenuProps;

package/dist/Layout.js

@@ -2,16 +2,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CSSToCitricAdapter, listToClass } from '@stack-spot/portal-theme';
 import '@stack-spot/portal-theme/dist/theme.css';
 import { useEffect } from 'react';
-import { ErrorBoundary } from './components/error/ErrorBoundary';
-import { ErrorManager } from './components/error/ErrorManager';
-import { SilentErrorBoundary } from './components/error/SilentErrorBoundary';
-import { Header } from './components/Header';
-import { MenuContent } from './components/menu/MenuContent';
-import { MenuSections } from './components/menu/MenuSections';
-import { Toaster } from './components/Toaster';
-import { elementIds } from './elements';
+import { ErrorBoundary } from './components/error/ErrorBoundary.js';
+import { ErrorManager } from './components/error/ErrorManager.js';
+import { SilentErrorBoundary } from './components/error/SilentErrorBoundary.js';
+import { Header } from './components/Header.js';
+import { MenuContent } from './components/menu/MenuContent.js';
+import { MenuSections } from './components/menu/MenuSections.js';
+import { Toaster } from './components/Toaster.js';
+import { elementIds } from './elements.js';
 import './layout.css';
-import { overlay } from './LayoutOverlayManager';
+import { overlay } from './LayoutOverlayManager.js';
 export const RawLayout = ({ menuSections, menuContent, header, compactMenu = true, children, extra, errorDescriptor, onError, className, style }) => {
     // @ts-ignore
     const { bottomDialog, modal, rightPanel } = overlay.useOverlays();

package/dist/LayoutOverlayManager.d.ts

@@ -1,7 +1,7 @@
 import { ReactElement } from 'react';
-import { DialogOptions } from './components/Dialog';
-import { OverlayContentProps } from './components/OverlayContent';
-import { showToaster as showReactToaster } from './toaster';
+import { DialogOptions } from './components/Dialog.js';
+import { OverlayContentProps } from './components/OverlayContent.js';
+import { showToaster as showReactToaster } from './toaster.js';
 interface AlertOptions extends Omit<DialogOptions, 'cancel'> {
     showButton?: boolean;
 }

package/dist/LayoutOverlayManager.js

@@ -2,13 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 /* eslint-disable react-hooks/rules-of-hooks */
 import { Button } from '@citric/core';
 import { useLayoutEffect, useState } from 'react';
-import { Dialog } from './components/Dialog';
-import { CLOSE_OVERLAY_ID, OverlayContent } from './components/OverlayContent';
-import { getDictionary } from './dictionary';
-import { elementIds, getLayoutElements } from './elements';
-import { ElementNotFound, LayoutError } from './errors';
-import { showToaster as showReactToaster } from './toaster';
-import { focusFirstChild, valueOfLayoutVar } from './utils';
+import { Dialog } from './components/Dialog.js';
+import { CLOSE_OVERLAY_ID, OverlayContent } from './components/OverlayContent.js';
+import { getDictionary } from './dictionary.js';
+import { elementIds, getLayoutElements } from './elements.js';
+import { ElementNotFound, LayoutError } from './errors.js';
+import { showToaster as showReactToaster } from './toaster.js';
+import { focusFirstChild, valueOfLayoutVar } from './utils.js';
 function multipleCallsWarning(type, timeMS) {
     return `
     Attempted to show a modal or rightPanel while a ${type} was still being closed. Closing a ${type} takes only ${timeMS}ms, so this action

package/dist/components/Dialog.js

@@ -2,8 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, Flex, Input, Text } from '@citric/core';
 import { interpolate } from '@stack-spot/portal-translate';
 import { useState } from 'react';
-import { useDictionary } from '../dictionary';
-import { OverlayContent } from './OverlayContent';
+import { useDictionary } from '../dictionary.js';
+import { OverlayContent } from './OverlayContent.js';
 const justifyButtons = {
     center: 'center',
     left: 'start',

package/dist/components/Header.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { SelectionListProps } from './SelectionList';
+import { SelectionListProps } from './SelectionList.js';
 export interface HeaderProps {
     logo?: ReactNode;
     logoHref?: string;

package/dist/components/Header.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Flex } from '@citric/core';
-import { Logo } from '../svg/Logo';
-import { UserMenu } from './UserMenu';
+import { Logo } from '../svg/Logo.js';
+import { UserMenu } from './UserMenu.js';
 export const Header = ({ logo, logoHref, center, right, userName, email, options }) => (_jsxs(_Fragment, { children: [_jsx("a", { href: logoHref, title: "Home", children: logo ?? _jsx(Logo, { style: { width: 130 } }) }), _jsx(Flex, { flex: 1, children: center }), right, userName && _jsx(UserMenu, { userName: userName, email: email, options: options })] }));
 //# sourceMappingURL=Header.js.map

package/dist/components/OverlayContent.js

@@ -4,7 +4,7 @@ import { TimesMini } from '@citric/icons';
 import { IconButton } from '@citric/ui';
 import { listToClass, theme } from '@stack-spot/portal-theme';
 import { styled } from 'styled-components';
-import { useDictionary } from '../dictionary';
+import { useDictionary } from '../dictionary.js';
 export const CLOSE_OVERLAY_ID = 'close-overlay';
 const ContentBox = styled.section `
   display: flex;

package/dist/components/SelectionList.d.ts

@@ -1,6 +1,6 @@
 import { WithStyle } from '@stack-spot/portal-theme';
 import { ReactElement } from 'react';
-import { Action } from './types';
+import { Action } from './types.js';
 interface ItemWithIcon {
     icon?: React.ReactElement;
     iconRight?: React.ReactElement;

package/dist/components/Toaster.js

@@ -3,7 +3,7 @@ import { TimesMini } from '@citric/icons';
 import { IconButton } from '@citric/ui';
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
-import { useDictionary } from '../dictionary';
+import { useDictionary } from '../dictionary.js';
 const CloseButton = ({ closeToast }) => {
     const t = useDictionary();
     return (_jsx(IconButton, { onClick: () => closeToast(null), title: t.dismiss, children: _jsx(TimesMini, {}) }));

package/dist/components/UserMenu.d.ts

@@ -1,4 +1,4 @@
-import { SelectionListProps } from './SelectionList';
+import { SelectionListProps } from './SelectionList.js';
 interface Props {
     userName: string;
     email?: string;

package/dist/components/UserMenu.js

@@ -6,7 +6,7 @@ import { theme } from '@stack-spot/portal-theme';
 import { interpolate, useTranslate } from '@stack-spot/portal-translate';
 import { useState } from 'react';
 import { styled } from 'styled-components';
-import { SelectionList } from './SelectionList';
+import { SelectionList } from './SelectionList.js';
 const USER_MENU_ID = 'userMenu';
 const UserMenuBox = styled.div `
   .user-menu-header {

package/dist/components/error/ErrorBoundary.d.ts

@@ -1,5 +1,5 @@
 import { Component } from 'react';
-import { ErrorDescription } from './ErrorManager';
+import { ErrorDescription } from './ErrorManager.js';
 interface State extends ErrorDescription {
     hasError: boolean;
 }

package/dist/components/error/ErrorBoundary.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Component } from 'react';
-import { ErrorFeedback } from './ErrorFeedback';
-import { ErrorManager } from './ErrorManager';
+import { ErrorFeedback } from './ErrorFeedback.js';
+import { ErrorManager } from './ErrorManager.js';
 export class ErrorBoundary extends Component {
     constructor(props) {
         super(props);

package/dist/components/error/ErrorFeedback.d.ts

@@ -1,3 +1,3 @@
-import { ErrorDescription } from './ErrorManager';
+import { ErrorDescription } from './ErrorManager.js';
 export declare const ErrorFeedback: ({ code, message, debug }: ErrorDescription) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ErrorFeedback.d.ts.map

package/dist/components/error/ErrorFeedback.js

@@ -2,11 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Button, Container, Flex, LinkBox, Text } from '@citric/core';
 import { useTranslate } from '@stack-spot/portal-translate';
 import { useState } from 'react';
-import { Forbidden } from '../../svg/Forbidden';
-import { Logo } from '../../svg/Logo';
-import { NotFound } from '../../svg/NotFound';
-import { ServerError } from '../../svg/ServerError';
-import { Unauthenticated } from '../../svg/Unauthenticated';
+import { Forbidden } from '../../svg/Forbidden.js';
+import { Logo } from '../../svg/Logo.js';
+import { NotFound } from '../../svg/NotFound.js';
+import { ServerError } from '../../svg/ServerError.js';
+import { Unauthenticated } from '../../svg/Unauthenticated.js';
 const imageStyle = {
     width: '200px',
     height: '200px',

package/dist/components/error/SilentErrorBoundary.d.ts

@@ -1,5 +1,5 @@
 import { Component } from 'react';
-import { ErrorDescription } from './ErrorManager';
+import { ErrorDescription } from './ErrorManager.js';
 interface State extends ErrorDescription {
     hasError: boolean;
     message?: string;

package/dist/components/error/SilentErrorBoundary.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { theme } from '@stack-spot/portal-theme';
 import { Component } from 'react';
-import { ErrorManager } from './ErrorManager';
+import { ErrorManager } from './ErrorManager.js';
 export class SilentErrorBoundary extends Component {
     constructor(props) {
         super(props);

package/dist/components/menu/MenuContent.d.ts

@@ -1,3 +1,3 @@
-import { MenuSectionContent } from './types';
+import { MenuSectionContent } from './types.js';
 export declare const MenuContent: ({ pageSelector, goBack, title, subtitle, afterTitle, options, loading, error }: MenuSectionContent) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=MenuContent.d.ts.map

package/dist/components/menu/MenuContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuContent.d.ts","sourceRoot":"","sources":["../../../src/components/menu/MenuContent.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAmC,kBAAkB,EAAE,MAAM,SAAS,CAAA;AA6L7E,eAAO,MAAM,WAAW,mFAAyF,kBAAkB,4CAoClI,CAAA"}
+{"version":3,"file":"MenuContent.d.ts","sourceRoot":"","sources":["../../../src/components/menu/MenuContent.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAmC,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAiM7E,eAAO,MAAM,WAAW,mFAAyF,kBAAkB,4CAoClI,CAAA"}

package/dist/components/menu/MenuContent.js

@@ -6,9 +6,10 @@ import { LoadingCircular } from '@citric/ui';
 import { listToClass, theme } from '@stack-spot/portal-theme';
 import { useMemo, useState } from 'react';
 import { styled } from 'styled-components';
-import { hideOverlayImmediately } from './MenuSections';
-import { PageSelector } from './PageSelector';
-import { MENU_CONTENT_ITEM_PADDING as ITEM_PADDING, MENU_CONTENT_PADDING as PADDING } from './constants';
+import { hideOverlayImmediately } from './MenuSections.js';
+import { PageSelector } from './PageSelector.js';
+import { MENU_CONTENT_ITEM_PADDING as ITEM_PADDING, MENU_CONTENT_PADDING as PADDING } from './constants.js';
+import { useCheckTextOverflow } from './useCheckTextOverflow.js';
 const BackLink = styled.a `
   display: flex;
   flex-direction: row;
@@ -128,16 +129,19 @@ const Title = styled.header `
   flex-direction: column;
   margin: ${PADDING}px 0 24px ${PADDING}px;
 `;
-const ActionItem = ({ label, onClick, href, active, icon, badge, overflow = 'wrap' }) => (_jsxs("a", { href: active ? undefined : href, onClick: () => {
-        if (active)
-            return;
-        if (onClick)
-            onClick();
-        hideOverlayImmediately();
-    }, className: listToClass(['action', 'item-row', active ? 'active' : undefined]), ...(active ? { 'aria-current': 'page' } : undefined), children: [icon, _jsx(Text, { appearance: "body2", className: `label ${overflow}`, children: label }), badge] }));
+const ActionItem = ({ label, onClick, href, active, icon, badge, overflow = 'wrap' }) => {
+    const { ref, overflow: textOverflow } = useCheckTextOverflow();
+    return (_jsxs("a", { href: active ? undefined : href, onClick: () => {
+            if (active)
+                return;
+            if (onClick)
+                onClick();
+            hideOverlayImmediately();
+        }, className: listToClass(['action', 'item-row', active ? 'active' : undefined]), ...(active ? { 'aria-current': 'page' } : undefined), children: [icon, _jsx(Text, { ref: ref, appearance: "body2", className: `label ${overflow}`, title: textOverflow ? label : '', children: label }), badge] }));
+};
 const CollapsibleGroupItem = ({ label, open: initiallyOpened, children, icon, badge, overflow = 'wrap' }) => {
     const [open, setOpen] = useState(initiallyOpened ?? children?.some(c => 'active' in c && c.active) ?? false);
-    const items = useMemo(() => children?.map(renderOption), [children]);
+    const items = useMemo(() => children?.filter(i => !i.hidden).map(renderOption), [children]);
     const id = `menuGroup${label}`;
     return (_jsxs(_Fragment, { children: [_jsxs("a", { onClick: () => setOpen(!open), onKeyDown: e => e.key === 'Enter' && setOpen(!open), className: "item-row", tabIndex: 0, "aria-controls": id, "aria-expanded": open, children: [icon, _jsx(Text, { appearance: "body2", className: `label ${overflow}`, children: label }), badge, _jsx(IconBox, { children: _jsx(ChevronDown, { className: listToClass(['chevron', open ? 'open' : '']) }) })] }), _jsx(MenuGroup, { id: id, className: open ? 'open' : undefined, "aria-hidden": !open, children: items })] }));
 };

package/dist/components/menu/MenuContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuContent.js","sourceRoot":"","sources":["../../../src/components/menu/MenuContent.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"MenuContent.js","sourceRoot":"","sources":["../../../src/components/menu/MenuContent.tsx"],"names":[],"mappings":"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"}

package/dist/components/menu/MenuSections.d.ts

@@ -1,4 +1,4 @@
-import { MenuProps } from './types';
+import { MenuProps } from './types.js';
 export declare function hideOverlayImmediately(): void;
 export declare const MenuSections: ({ sections, ...props }: MenuProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=MenuSections.d.ts.map

package/dist/components/menu/MenuSections.js

@@ -4,7 +4,7 @@ import { IconBox, Text } from '@citric/core';
 import { ChevronLeft, Menu as MenuIcon } from '@citric/icons';
 import { useTranslate } from '@stack-spot/portal-translate';
 import { useCallback, useMemo, useState } from 'react';
-import { MenuContent } from './MenuContent';
+import { MenuContent } from './MenuContent.js';
 const ARROW_HEIGHT = 24;
 const HIDE_OVERLAY_DELAY_MS = 400;
 const MENU_OVERLAY_ID = 'menuContentOverlay';

package/dist/components/menu/PageSelector.d.ts

@@ -1,3 +1,3 @@
-import { Selector } from './types';
+import { Selector } from './types.js';
 export declare const PageSelector: ({ options, value, button, loading, title }: Selector) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=PageSelector.d.ts.map

package/dist/components/menu/PageSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageSelector.d.ts","sourceRoot":"","sources":["../../../src/components/menu/PageSelector.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAqElC,eAAO,MAAM,YAAY,+CAAgD,QAAQ,4CAsDhF,CAAA"}
+{"version":3,"file":"PageSelector.d.ts","sourceRoot":"","sources":["../../../src/components/menu/PageSelector.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAsElC,eAAO,MAAM,YAAY,+CAAgD,QAAQ,4CAwDhF,CAAA"}

package/dist/components/menu/PageSelector.js

@@ -6,8 +6,9 @@ import { theme } from '@stack-spot/portal-theme';
 import { interpolate, useTranslate } from '@stack-spot/portal-translate';
 import { useMemo, useRef, useState } from 'react';
 import { styled } from 'styled-components';
-import { SelectionList } from '../SelectionList';
-import { MENU_CONTENT_PADDING as PADDING } from './constants';
+import { SelectionList } from '../SelectionList.js';
+import { MENU_CONTENT_PADDING as PADDING } from './constants.js';
+import { useCheckTextOverflow } from './useCheckTextOverflow.js';
 const SelectorBox = styled.div `
   position: relative;
   margin: ${PADDING}px;
@@ -77,6 +78,7 @@ const SelectorBox = styled.div `
 export const PageSelector = ({ options, value, button, loading, title }) => {
     const t = useTranslate(dictionary);
     const [visible, setVisible] = useState(false);
+    const { ref, overflow } = useCheckTextOverflow();
     const id = useRef(`pageSelector${title || Math.random()}`);
     const { optionsWithIcon, selected } = useMemo(() => {
         let selected = options[0];
@@ -89,9 +91,10 @@ export const PageSelector = ({ options, value, button, loading, title }) => {
         });
         return { optionsWithIcon, selected };
     }, [options, value, button]);
+    const label = selected?.label ?? button?.label ?? value;
     return (_jsx(SelectorBox, { children: loading
             ? _jsx(LoadingCircular, {})
-            : (_jsxs(_Fragment, { children: [title && _jsx(Text, { colorScheme: "light.700", sx: { mb: 3 }, children: title }), _jsxs("a", { onClick: () => setVisible(true), onKeyDown: e => e.key === 'Enter' && setVisible(true), title: value, tabIndex: 0, "aria-label": interpolate(t.accessibility, [value]), "aria-expanded": visible, "aria-controls": id.current, children: [selected?.icon && _jsx(IconBox, { children: selected?.icon }), _jsx(Text, { appearance: "body2", className: "label", children: selected?.label ?? button?.label ?? value }), _jsx(IconBox, { size: "xs", children: _jsx(Select, {}) })] }), _jsx(SelectionList, { id: id.current, visible: visible, items: optionsWithIcon, onHide: () => setVisible(false), after: button ? _jsx("a", { className: "view-all", href: button.href, onClick: button.onClick, children: button.label }) : undefined, scroll: true })] })) }));
+            : (_jsxs(_Fragment, { children: [title && _jsx(Text, { colorScheme: "light.700", sx: { mb: 3 }, children: title }), _jsxs("a", { onClick: () => setVisible(true), onKeyDown: e => e.key === 'Enter' && setVisible(true), title: value, tabIndex: 0, "aria-label": interpolate(t.accessibility, [value]), "aria-expanded": visible, "aria-controls": id.current, children: [selected?.icon && _jsx(IconBox, { children: selected?.icon }), _jsx(Text, { ref: ref, appearance: "body2", className: "label", title: overflow ? label : '', children: label }), _jsx(IconBox, { size: "xs", children: _jsx(Select, {}) })] }), _jsx(SelectionList, { id: id.current, visible: visible, items: optionsWithIcon, onHide: () => setVisible(false), after: button ? _jsx("a", { className: "view-all", href: button.href, onClick: button.onClick, children: button.label }) : undefined, scroll: true })] })) }));
 };
 const dictionary = {
     en: {

package/dist/components/menu/PageSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageSelector.js","sourceRoot":"","sources":["../../../src/components/menu/PageSelector.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"PageSelector.js","sourceRoot":"","sources":["../../../src/components/menu/PageSelector.tsx"],"names":[],"mappings":"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"}

package/dist/components/menu/types.d.ts

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
-import { Action } from '../types';
+import { Action } from '../types.js';
 interface BaseMenuItem {
     hidden?: boolean;
     /**

package/dist/components/menu/useCheckTextOverflow.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare function useCheckTextOverflow(): {
+    overflow: boolean;
+    ref: import("react").RefObject<HTMLParagraphElement>;
+};
+//# sourceMappingURL=useCheckTextOverflow.d.ts.map

package/dist/components/menu/useCheckTextOverflow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCheckTextOverflow.d.ts","sourceRoot":"","sources":["../../../src/components/menu/useCheckTextOverflow.tsx"],"names":[],"mappings":";AAEA,wBAAgB,oBAAoB;;;EAuBnC"}

package/dist/components/menu/useCheckTextOverflow.js

@@ -0,0 +1,20 @@
+import { useState, useRef, useEffect } from 'react';
+export function useCheckTextOverflow() {
+    const [overflow, setOverflow] = useState(false);
+    const ref = useRef(null);
+    const checkOverflow = () => {
+        if (!ref.current) {
+            return;
+        }
+        const hasOverflow = ref.current.offsetWidth < ref.current.scrollWidth;
+        if (hasOverflow === overflow) {
+            return;
+        }
+        setOverflow(hasOverflow);
+    };
+    useEffect(() => {
+        checkOverflow();
+    }, [ref.current]);
+    return { overflow, ref };
+}
+//# sourceMappingURL=useCheckTextOverflow.js.map

package/dist/components/menu/useCheckTextOverflow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCheckTextOverflow.js","sourceRoot":"","sources":["../../../src/components/menu/useCheckTextOverflow.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEpD,MAAM,UAAU,oBAAoB;IAClC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAA;IACxD,MAAM,GAAG,GAAG,MAAM,CAAuB,IAAI,CAAC,CAAA;IAE9C,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE;YAChB,OAAM;SACP;QAED,MAAM,WAAW,GAAG,GAAG,CAAC,OAAO,CAAC,WAAW,GAAG,GAAG,CAAC,OAAO,CAAC,WAAW,CAAA;QAErE,IAAI,WAAW,KAAK,QAAQ,EAAE;YAC5B,OAAM;SACP;QAED,WAAW,CAAC,WAAW,CAAC,CAAA;IAC1B,CAAC,CAAA;IAED,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,EAAE,CAAA;IACjB,CAAC,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAA;IAEjB,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAA;AAC1B,CAAC"}

package/dist/index.d.ts

@@ -1,15 +1,15 @@
-export { Layout } from './Layout';
-export { overlay } from './LayoutOverlayManager';
-export { Dialog } from './components/Dialog';
-export { Header, HeaderProps } from './components/Header';
-export { OverlayContent } from './components/OverlayContent';
-export { ListAction, SelectionList, SelectionListProps } from './components/SelectionList';
-export { MenuContent } from './components/menu/MenuContent';
-export { MenuSections } from './components/menu/MenuSections';
-export * from './components/menu/types';
-export * from './components/types';
-export * from './elements';
-export * from './errors';
-export { Logo as StackspotLogo } from './svg/Logo';
-export * from './utils';
+export { Layout } from './Layout.js';
+export { overlay } from './LayoutOverlayManager.js';
+export { Dialog } from './components/Dialog.js';
+export { Header, HeaderProps } from './components/Header.js';
+export { OverlayContent } from './components/OverlayContent.js';
+export { ListAction, SelectionList, SelectionListProps } from './components/SelectionList.js';
+export { MenuContent } from './components/menu/MenuContent.js';
+export { MenuSections } from './components/menu/MenuSections.js';
+export * from './components/menu/types.js';
+export * from './components/types.js';
+export * from './elements.js';
+export * from './errors.js';
+export { Logo as StackspotLogo } from './svg/Logo.js';
+export * from './utils.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -1,15 +1,15 @@
-export { Layout } from './Layout';
-export { overlay } from './LayoutOverlayManager';
-export { Dialog } from './components/Dialog';
-export { Header } from './components/Header';
-export { OverlayContent } from './components/OverlayContent';
-export { SelectionList } from './components/SelectionList';
-export { MenuContent } from './components/menu/MenuContent';
-export { MenuSections } from './components/menu/MenuSections';
-export * from './components/menu/types';
-export * from './components/types';
-export * from './elements';
-export * from './errors';
-export { Logo as StackspotLogo } from './svg/Logo';
-export * from './utils';
+export { Layout } from './Layout.js';
+export { overlay } from './LayoutOverlayManager.js';
+export { Dialog } from './components/Dialog.js';
+export { Header } from './components/Header.js';
+export { OverlayContent } from './components/OverlayContent.js';
+export { SelectionList } from './components/SelectionList.js';
+export { MenuContent } from './components/menu/MenuContent.js';
+export { MenuSections } from './components/menu/MenuSections.js';
+export * from './components/menu/types.js';
+export * from './components/types.js';
+export * from './elements.js';
+export * from './errors.js';
+export { Logo as StackspotLogo } from './svg/Logo.js';
+export * from './utils.js';
 //# sourceMappingURL=index.js.map

package/dist/utils.js

@@ -1,5 +1,5 @@
 import { valueOf } from '@stack-spot/portal-theme';
-import { getLayoutElements } from './elements';
+import { getLayoutElements } from './elements.js';
 export function valueOfLayoutVar(varname) {
     const layout = document.getElementById('layout');
     if (!layout)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stack-spot/portal-layout",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -28,13 +28,14 @@
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.4",
+    "tsc-esm-fix": "^2.20.26",
     "typescript": "^5.2.2"
   },
   "dependencies": {
     "react-toastify": "^9.1.3"
   },
   "scripts": {
-    "build": "tsc && cpy src/layout.css dist --flat",
+    "build": "tsc && tsc-esm-fix --target='dist' && cpy src/layout.css dist --flat",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
   }
 }

package/src/components/menu/MenuContent.tsx

@@ -9,6 +9,7 @@ import { hideOverlayImmediately } from './MenuSections'
 import { PageSelector } from './PageSelector'
 import { MENU_CONTENT_ITEM_PADDING as ITEM_PADDING, MENU_CONTENT_PADDING as PADDING } from './constants'
 import { ItemGroup, MenuAction, MenuItem, MenuSectionContent } from './types'
+import { useCheckTextOverflow } from './useCheckTextOverflow'
 
 const BackLink = styled.a`
   display: flex;
@@ -132,26 +133,29 @@ const Title = styled.header`
   margin: ${PADDING}px 0 24px ${PADDING}px;
 `
 
-const ActionItem = ({ label, onClick, href, active, icon, badge, overflow = 'wrap' }: MenuAction) => (
-  <a
-    href={active ? undefined : href}
-    onClick={() => {
-      if (active) return
-      if (onClick) onClick()
-      hideOverlayImmediately()
-    }}
-    className={listToClass(['action', 'item-row', active ? 'active' : undefined])}
-    {...(active ? { 'aria-current': 'page' } : undefined)}
-  >
-    {icon}
-    <Text appearance="body2" className={`label ${overflow}`}>{label}</Text>
-    {badge}
-  </a>
-)
+const ActionItem = ({ label, onClick, href, active, icon, badge, overflow = 'wrap' }: MenuAction) => {
+  const { ref, overflow: textOverflow } = useCheckTextOverflow()
+  return (
+    <a
+      href={active ? undefined : href}
+      onClick={() => {
+        if (active) return
+        if (onClick) onClick()
+        hideOverlayImmediately()
+      }}
+      className={listToClass(['action', 'item-row', active ? 'active' : undefined])}
+      {...(active ? { 'aria-current': 'page' } : undefined)}
+    >
+      {icon}
+      <Text ref={ref} appearance="body2" className={`label ${overflow}`} title={textOverflow ? label : ''}>{label}</Text>
+      {badge}
+    </a>
+  )
+}
 
 const CollapsibleGroupItem = ({ label, open: initiallyOpened, children, icon, badge, overflow = 'wrap' }: ItemGroup) => {
   const [open, setOpen] = useState(initiallyOpened ?? children?.some(c => 'active' in c && c.active) ?? false)
-  const items = useMemo(() => children?.map(renderOption), [children])
+  const items = useMemo(() => children?.filter(i => !i.hidden).map(renderOption), [children])
   const id = `menuGroup${label}`
 
   return (

package/src/components/menu/PageSelector.tsx

@@ -8,6 +8,7 @@ import { styled } from 'styled-components'
 import { ListAction, SelectionList } from '../SelectionList'
 import { MENU_CONTENT_PADDING as PADDING } from './constants'
 import { Selector } from './types'
+import { useCheckTextOverflow } from './useCheckTextOverflow'
 
 const SelectorBox = styled.div`
   position: relative;
@@ -79,6 +80,7 @@ const SelectorBox = styled.div`
 export const PageSelector = ({ options, value, button, loading, title }: Selector) => {
   const t = useTranslate(dictionary)
   const [visible, setVisible] = useState(false)
+  const { ref, overflow } = useCheckTextOverflow()
   const id = useRef(`pageSelector${title || Math.random()}`)
   const { optionsWithIcon, selected } = useMemo(
     () => {
@@ -95,6 +97,7 @@ export const PageSelector = ({ options, value, button, loading, title }: Selecto
     [options, value, button],
   )
   
+  const label = selected?.label ?? button?.label ?? value
 
   return (
     <SelectorBox>
@@ -113,7 +116,7 @@ export const PageSelector = ({ options, value, button, loading, title }: Selecto
               aria-controls={id.current}
             >
               {selected?.icon && <IconBox>{selected?.icon}</IconBox>}
-              <Text appearance="body2" className="label">{selected?.label ?? button?.label ?? value}</Text>
+              <Text ref={ref} appearance="body2" className="label" title={overflow ? label : ''}>{label}</Text>
               <IconBox size="xs"><Select /></IconBox>
             </a>
 

package/src/components/menu/useCheckTextOverflow.tsx

@@ -0,0 +1,26 @@
+import { useState, useRef, useEffect } from 'react';
+
+export function useCheckTextOverflow() {
+  const [overflow, setOverflow] = useState<boolean>(false)
+  const ref = useRef<HTMLParagraphElement>(null) 
+
+  const checkOverflow = () => {
+    if (!ref.current) {
+      return
+    }
+
+    const hasOverflow = ref.current.offsetWidth < ref.current.scrollWidth
+    
+    if (hasOverflow === overflow) {
+      return
+    }
+
+    setOverflow(hasOverflow)  
+  }
+
+  useEffect(() => {    
+    checkOverflow()
+  }, [ref.current])
+
+  return { overflow, ref }
+}