@evergis/react 3.1.105 → 3.1.106

package/dist/components/Dashboard/headers/DashboardDefaultHeader/styled.d.ts

@@ -4,8 +4,6 @@ export declare const DefaultHeaderContainer: import('styled-components').StyledC
 }, never>;
 export declare const TopContainer: import('styled-components').StyledComponent<"div", any, import('@evergis/uilib-gl').FlexProps, never>;
 export declare const TopContainerButtons: import('styled-components').StyledComponent<"div", any, import('@evergis/uilib-gl').FlexProps, never>;
-export declare const PaginationDivider: import('styled-components').StyledComponent<"div", any, import('@evergis/uilib-gl').DividerProps & {
-    vertical: boolean;
-}, "vertical">;
 export declare const LogoContainer: import('styled-components').StyledComponent<"div", any, import('@evergis/uilib-gl').FlexProps, never>;
 export declare const PageTitle: import('styled-components').StyledComponent<"h2", any, {}, never>;
+export declare const PageTitleContainer: import('styled-components').StyledComponent<"div", any, import('@evergis/uilib-gl').FlexProps, never>;

package/dist/components/Dashboard/hooks/useWidgetContext.d.ts

@@ -1,5 +1,7 @@
 import { WidgetType } from '../types';
 export declare const useWidgetContext: (type?: WidgetType) => {
+    toggleLayersVisibility: VoidFunction;
+    visibleLayers: boolean;
     projectInfo: import('@evergis/api').ExtendedProjectInfoDc;
     layerInfos: import('../../..').LayerInfo[];
     updateProject: (projectInfo: import('@evergis/api').ExtendedProjectInfoDc) => void;
@@ -17,7 +19,6 @@ export declare const useWidgetContext: (type?: WidgetType) => {
     changeControls: (controls: Record<string, string>) => void;
     components: {
         LayerItem?: import('react').FC<import('../..').LayerItemProps>;
-        ProjectCatalogMenu?: import('react').FC;
         ProjectPanelMenu?: import('react').FC;
         ProjectPagesMenu?: import('react').FC;
     };

package/dist/contexts/DashboardContext/types.d.ts

@@ -19,10 +19,11 @@ export type DashboardContextProps = PropsWithChildren<{
     selectedTabId?: string;
     components?: {
         LayerItem?: FC<LayerItemProps>;
-        ProjectCatalogMenu?: FC;
         ProjectPanelMenu?: FC;
         ProjectPagesMenu?: FC;
     };
+    toggleLayersVisibility: VoidFunction;
+    visibleLayers: boolean;
     changeFilters?: (filters: SelectedFilters, resetFilters?: string[]) => void;
     expandedContainers?: Record<string, boolean>;
     expandContainer?: (id: string, expanded?: boolean) => void;

package/dist/index.js

@@ -4016,9 +4016,11 @@ const ServerNotificationsProvider = ({ url, initialized, children }) => {
 };
 
 const useWidgetContext = (type = exports.WidgetType.Dashboard) => {
-    const { projectInfo, updateProject, layerInfos, geometryFilter, dashboardLayers, setDashboardLayer, components: dashboardComponents, config: dashboardConfig, containerIds, pageIndex: projectPageIndex, selectedTabId: projectSelectedTabId, setSelectedTabId: setProjectSelectedTabId, dataSources: projectDataSources, loading: projectLoading, editMode: projectEditMode, filters: projectFilters, changeFilters: projectChangeFilters, expandContainer: projectExpandContainer, expandedContainers: projectExpandedContainers, nextPage: projectNextPage, prevPage: projectPrevPage, changePage: projectChangePage, } = React.useContext(DashboardContext) || {};
+    const { toggleLayersVisibility, visibleLayers, projectInfo, updateProject, layerInfos, geometryFilter, dashboardLayers, setDashboardLayer, components: dashboardComponents, config: dashboardConfig, containerIds, pageIndex: projectPageIndex, selectedTabId: projectSelectedTabId, setSelectedTabId: setProjectSelectedTabId, dataSources: projectDataSources, loading: projectLoading, editMode: projectEditMode, filters: projectFilters, changeFilters: projectChangeFilters, expandContainer: projectExpandContainer, expandedContainers: projectExpandedContainers, nextPage: projectNextPage, prevPage: projectPrevPage, changePage: projectChangePage, } = React.useContext(DashboardContext) || {};
     const { layerInfo, attributes, feature, controls, changeControls, closeFeatureCard, config: featureConfig, pageIndex: featurePageIndex, selectedTabId: featureSelectedTabId, setSelectedTabId: setFeatureSelectedTabId, dataSources: featureDataSources, loading: featureLoading, editMode: featureEditMode, filters: featureFilters, changeFilters: featureChangeFilters, expandContainer: featureExpandContainer, expandedContainers: featureExpandedContainers, nextPage: featureNextPage, prevPage: featurePrevPage, changePage: featureChangePage, } = React.useContext(FeatureCardContext) || {};
     return {
+        toggleLayersVisibility,
+        visibleLayers,
         projectInfo,
         layerInfos,
         updateProject,
@@ -7469,13 +7471,6 @@ const TopContainerButtons = styled(uilibGl.Flex) `
     padding: 0 0.5rem;
   }
 `;
-const PaginationDivider = styled(uilibGl.Divider).attrs(() => ({
-    vertical: true,
-})) `
-  height: 0.875rem;
-  margin: 0 0.5rem 0 0.75rem;
-  align-self: center;
-`;
 const LogoContainer = styled(uilibGl.Flex) `
   max-width: calc(100% - 1.4rem);
   flex-grow: 1;
@@ -7490,21 +7485,71 @@ const LogoContainer = styled(uilibGl.Flex) `
   }
 `;
 const PageTitle = styled(uilibGl.H2) `
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
+  cursor: pointer;
+  text-align: left;
+  flex: 1 1 auto;
+  min-width: 0;
   margin: 0;
   font-size: 1.25rem;
   font-weight: 600;
   pointer-events: initial;
   font-family: "Nunito Sans", serif;
+  
+  > * {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+`;
+const PageTitleContainer = styled(uilibGl.Flex) `
+  flex-grow: 1;
+  align-items: center;
+
+  ${PageTitle} {
+    max-width: 15.75rem;
+  }
+
+  &&& button {
+    width: 0;
+    overflow: hidden;
+    
+    span[kind] {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 0.75rem;
+      
+      :after {
+        font-size: 0.75rem;
+        color: ${({ theme: { palette } }) => palette.textDisabled};
+        transition: color ${uilibGl.transition.hover};
+      }
+    }
+    
+    &:hover,
+    &:active {
+      span[kind]:after {
+        color: ${({ theme: { palette } }) => palette.textPrimary};
+      }
+    }
+  }
+
+  :hover {
+    ${PageTitle} {
+      max-width: 14.25rem;
+    }
+
+    &&& button {
+      width: 1.5rem;
+    }
+  }
 `;
 
 const DashboardDefaultHeader = React.memo(() => {
-    const { components: { ProjectCatalogMenu, ProjectPanelMenu, ProjectPagesMenu }, } = useWidgetContext();
+    const { title } = useDashboardHeader();
+    const { toggleLayersVisibility, components: { ProjectPanelMenu, ProjectPagesMenu }, } = useWidgetContext();
     const { pageId, image, icon, tooltip, themeName } = useDashboardHeader();
-    return (jsxRuntime.jsxs(DefaultHeaderContainer, { image: getResourceUrl(image), isDark: themeName === exports.ThemeName.Dark, children: [!pageId && jsxRuntime.jsx(uilibGl.LinearProgress, {}), jsxRuntime.jsxs(uilibGl.Flex, { column: true, gap: "1rem", children: [jsxRuntime.jsx(uilibGl.FlexSpan, { children: jsxRuntime.jsxs(TopContainer, { children: [jsxRuntime.jsx(LogoContainer, { children: icon }), jsxRuntime.jsxs(TopContainerButtons, { children: [jsxRuntime.jsx(Pagination, {}), jsxRuntime.jsx(PaginationDivider, {}), jsxRuntime.jsx(ProjectCatalogMenu, {}), jsxRuntime.jsx(ProjectPanelMenu, {})] })] }) }), jsxRuntime.jsx(uilibGl.FlexSpan, { children: jsxRuntime.jsx(uilibGl.Flex, { column: true, gap: "0.25rem", children: jsxRuntime.jsx(uilibGl.FlexSpan, { children: jsxRuntime.jsx(uilibGl.Flex, { alignItems: "center", children: jsxRuntime.jsx(uilibGl.FlexSpan, { flexGrow: 1, children: jsxRuntime.jsx(uilibGl.Tooltip, { arrow: true, content: tooltip, children: ref => (jsxRuntime.jsx(PageTitle, { ref: ref, children: jsxRuntime.jsx(ProjectPagesMenu, {}) })) }) }) }) }) }) })] })] }));
+    return (jsxRuntime.jsxs(DefaultHeaderContainer, { image: getResourceUrl(image), isDark: themeName === exports.ThemeName.Dark, children: [!pageId && jsxRuntime.jsx(uilibGl.LinearProgress, {}), jsxRuntime.jsxs(uilibGl.Flex, { column: true, gap: "1rem", children: [jsxRuntime.jsx(uilibGl.FlexSpan, { children: jsxRuntime.jsxs(TopContainer, { children: [jsxRuntime.jsx(LogoContainer, { children: icon }), jsxRuntime.jsx(TopContainerButtons, { children: jsxRuntime.jsx(ProjectPanelMenu, {}) })] }) }), jsxRuntime.jsx(uilibGl.FlexSpan, { children: jsxRuntime.jsx(uilibGl.Flex, { column: true, gap: "0.25rem", children: jsxRuntime.jsx(uilibGl.FlexSpan, { children: jsxRuntime.jsxs(uilibGl.Flex, { alignItems: "center", children: [jsxRuntime.jsxs(PageTitleContainer, { children: [jsxRuntime.jsx(uilibGl.Tooltip, { arrow: true, content: tooltip, children: ref => (jsxRuntime.jsx(PageTitle, { ref: ref, onClick: toggleLayersVisibility, children: title })) }), jsxRuntime.jsx(ProjectPagesMenu, {})] }), jsxRuntime.jsx(uilibGl.FlexSpan, { children: jsxRuntime.jsx(Pagination, {}) })] }) }) }) })] })] }));
 });
 
 const HeaderFrontView = styled(uilibGl.Flex) `
@@ -10246,7 +10291,7 @@ const useDashboardHeader = () => {
     const image = React.useMemo(() => (header?.children?.some(({ id }) => id === "image") ? renderElement({ id: "image", wrap: false }) : null), [header?.children, renderElement]);
     const icon = React.useMemo(() => header?.children?.some(({ id }) => id === "icon") ? (renderElement({ id: "icon", wrap: false })) : (jsxRuntime.jsx(uilibGl.Icon, { kind: "logo", style: { width: "2rem", height: "2rem" } })), [header?.children, renderElement]);
     const title = React.useMemo(() => header?.children?.some(({ id }) => id === "title") ? renderElement({ id: "title" }) : currentPage?.options?.title, [header?.children, renderElement, currentPage?.options?.title]);
-    const tooltip = React.useMemo(() => (jsxRuntime.jsxs(uilibGl.Flex, { textAlign: "left", children: [jsxRuntime.jsx("div", { children: alias || name }), jsxRuntime.jsx(uilibGl.Flex, { opacity: 0.54, ml: "0.5rem", children: title })] })), [alias, name, title]);
+    const tooltip = React.useMemo(() => (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("span", { children: alias || name }), jsxRuntime.jsx("span", { style: { opacity: 0.54, marginLeft: "0.5rem" }, children: title })] })), [alias, name, title]);
     const description = React.useMemo(() => (header?.children?.some(({ id }) => id === "description") ? renderElement({ id: "description" }) : ""), [header?.children, renderElement]);
     return {
         pageId,
@@ -11708,9 +11753,9 @@ exports.NoLiveSnapshotContainer = NoLiveSnapshotContainer;
 exports.OneColumnContainer = OneColumnContainer;
 exports.PageNavigator = PageNavigator;
 exports.PageTitle = PageTitle;
+exports.PageTitleContainer = PageTitleContainer;
 exports.PagesContainer = PagesContainer;
 exports.Pagination = Pagination;
-exports.PaginationDivider = PaginationDivider;
 exports.PresentationHeader = PresentationHeader;
 exports.PresentationHeaderButtons = PresentationHeaderButtons;
 exports.PresentationHeaderTools = PresentationHeaderTools;