From eed1456bfbbebb723e57689e61b2940f51cb463c Mon Sep 17 00:00:00 2001 From: Kamy Date: Wed, 7 Aug 2024 15:45:50 -0400 Subject: [PATCH] 2420 wcag layerpanel (#2426) * fix(layers): layer panel wcag issue closes2420 * fix(layers): layer panel wcag issue closes2420 * fix(layers): layer panel wcag issue closes2420 * fix(layers): fix data table export button closes2420 * fix(layers): fix guide opening focus closes2420 * fix(layers): fix unique id of the layer for focus closes2420 * fix(layers): fix unique id of the layer for focus closes2420 --- .../src/core/components/app-bar/app-bar.tsx | 2 +- .../common/focus-trap-container.tsx | 11 ++- .../src/core/components/common/layer-list.tsx | 32 ++++--- .../src/core/components/common/layout.tsx | 7 +- .../common/responsive-grid-layout-style.ts | 3 + .../common/responsive-grid-layout.tsx | 32 ++++++- .../core/components/data-table/data-panel.tsx | 21 +++-- .../data-table/data-table-modal.tsx | 6 +- .../core/components/data-table/data-table.tsx | 4 +- .../components/data-table/export-button.tsx | 1 + .../core/components/details/details-panel.tsx | 7 +- .../details/feature-detail-modal.tsx | 6 +- .../components/export/export-modal-button.tsx | 4 +- .../core/components/export/export-modal.tsx | 8 +- .../core/components/footer-bar/footer-bar.tsx | 13 ++- .../src/core/components/guide/guide-panel.tsx | 6 +- .../src/core/components/guide/guide-style.ts | 3 + .../layers/right-panel/layer-details.tsx | 4 +- .../ui-state.ts | 50 +++++++---- .../geoview-core/src/ui/tabs/tab-panel.tsx | 5 +- packages/geoview-core/src/ui/tabs/tabs.tsx | 89 +++++++++++-------- .../geoview-geochart/src/geochart-panel.tsx | 4 +- .../src/time-slider-panel.tsx | 4 +- 23 files changed, 212 insertions(+), 110 deletions(-) diff --git a/packages/geoview-core/src/core/components/app-bar/app-bar.tsx b/packages/geoview-core/src/core/components/app-bar/app-bar.tsx index dea17da380d..c8a4be98160 100644 --- a/packages/geoview-core/src/core/components/app-bar/app-bar.tsx +++ b/packages/geoview-core/src/core/components/app-bar/app-bar.tsx @@ -405,7 +405,7 @@ export function AppBar(props: AppBarProps): JSX.Element { {appBarComponents.includes(CV_DEFAULT_APPBAR_CORE.EXPORT) && interaction === 'dynamic' && ( - + )} diff --git a/packages/geoview-core/src/core/components/common/focus-trap-container.tsx b/packages/geoview-core/src/core/components/common/focus-trap-container.tsx index 6c2caf2822e..40cb785cb85 100644 --- a/packages/geoview-core/src/core/components/common/focus-trap-container.tsx +++ b/packages/geoview-core/src/core/components/common/focus-trap-container.tsx @@ -26,13 +26,12 @@ export function FocusTrapContainer({ children, open = false, id, containerType } const { t } = useTranslation(); // get values from the store - const { closeModal } = useUIStoreActions(); + const { disableFocusTrap } = useUIStoreActions(); const activeTrapGeoView = useUIActiveTrapGeoView(); const focusItem = useUIActiveFocusItem(); const handleClose = (): void => { - closeModal(); - document.getElementById(focusItem.callbackElementId as string)?.focus(); + disableFocusTrap(); }; // #region REACT HOOKS @@ -41,8 +40,8 @@ export function FocusTrapContainer({ children, open = false, id, containerType } // Log logger.logTraceUseEffect('FOCUS-TRAP-ELEMENT - activeTrapGeoView', activeTrapGeoView); - if (!activeTrapGeoView) closeModal(); - }, [activeTrapGeoView, closeModal]); + if (!activeTrapGeoView) disableFocusTrap(); + }, [activeTrapGeoView, disableFocusTrap]); // if focus trap gets focus, send focus to the exit button useEffect(() => { @@ -56,7 +55,7 @@ export function FocusTrapContainer({ children, open = false, id, containerType } // #endregion return ( - + {containerType === CONTAINER_TYPE.FOOTER_BAR && ( diff --git a/packages/geoview-core/src/core/components/data-table/data-table.tsx b/packages/geoview-core/src/core/components/data-table/data-table.tsx index dbba32a3e6b..9b9fcc95fc1 100644 --- a/packages/geoview-core/src/core/components/data-table/data-table.tsx +++ b/packages/geoview-core/src/core/components/data-table/data-table.tsx @@ -96,7 +96,7 @@ function DataTable({ data, layerPath, tableHeight = '500px' }: DataTableProps): const { globalFilter, setGlobalFilter } = useGlobalFilter({ layerPath }); // #endregion - const { openModal } = useUIStoreActions(); + const { enableFocusTrap } = useUIStoreActions(); /** * Create table header cell @@ -364,7 +364,7 @@ function DataTable({ data, layerPath, tableHeight = '500px' }: DataTableProps): color="primary" onClick={() => { setSelectedFeature(feature); - openModal({ activeElementId: 'featureDetailDataTable', callbackElementId: 'table-details' }); + enableFocusTrap({ activeElementId: 'featureDetailDataTable', callbackElementId: 'table-details' }); }} > diff --git a/packages/geoview-core/src/core/components/data-table/export-button.tsx b/packages/geoview-core/src/core/components/data-table/export-button.tsx index 3de18bfde33..c85f42f85e6 100644 --- a/packages/geoview-core/src/core/components/data-table/export-button.tsx +++ b/packages/geoview-core/src/core/components/data-table/export-button.tsx @@ -90,6 +90,7 @@ function ExportButton({ rows, columns, children }: ExportButtonProps): JSX.Eleme }); const csvExporter = new ExportToCsv(getCsvOptions()); csvExporter.generateCsv(csvRows); + setAnchorEl(null); }, [getCsvOptions, rows]); return ( diff --git a/packages/geoview-core/src/core/components/details/details-panel.tsx b/packages/geoview-core/src/core/components/details/details-panel.tsx index 47437f55d92..a5fc06fdb05 100644 --- a/packages/geoview-core/src/core/components/details/details-panel.tsx +++ b/packages/geoview-core/src/core/components/details/details-panel.tsx @@ -8,6 +8,7 @@ import { useDetailsLayerDataArrayBatch, useDetailsSelectedLayerPath, } from '@/core/stores/store-interface-and-intial-values/feature-info-state'; +import { useGeoViewMapId } from '@/core/stores/geoview-store'; import { useMapStoreActions, useMapVisibleLayers, useMapClickCoordinates } from '@/core/stores/store-interface-and-intial-values/map-state'; import { logger } from '@/core/utils/logger'; import { TypeFeatureInfoEntry, TypeGeometry, TypeLayerData } from '@/geo/map/map-schema-types'; @@ -15,7 +16,7 @@ import { TypeFeatureInfoEntry, TypeGeometry, TypeLayerData } from '@/geo/map/map import { LayerListEntry, Layout } from '@/core/components/common'; import { getSxClasses } from './details-style'; import { FeatureInfo } from './feature-info-new'; -import { LAYER_STATUS } from '@/core/utils/constant'; +import { LAYER_STATUS, TABS } from '@/core/utils/constant'; import DetailsSkeleton from './details-skeleton'; interface DetailsPanelType { @@ -37,6 +38,7 @@ export function DetailsPanel({ fullWidth = false }: DetailsPanelType): JSX.Eleme const sxClasses = getSxClasses(theme); // Get states and actions from store + const mapId = useGeoViewMapId(); const selectedLayerPath = useDetailsSelectedLayerPath(); const arrayOfLayerDataBatch = useDetailsLayerDataArrayBatch(); const checkedFeatures = useDetailsCheckedFeatures(); @@ -132,10 +134,11 @@ export function DetailsPanel({ fullWidth = false }: DetailsPanelType): JSX.Eleme numOffeatures: layer!.features?.length ?? 0, layerFeatures: getNumFeaturesLabel(layer!), tooltip: `${layer!.layerName}, ${getNumFeaturesLabel(layer!)}`, + layerUniqueId: `${mapId}-${TABS.DETAILS}-${layer?.layerPath ?? ''}`, } as LayerListEntry) ); return layerListEntries; - }, [visibleLayers, arrayOfLayerDataBatch, getNumFeaturesLabel]); + }, [visibleLayers, arrayOfLayerDataBatch, getNumFeaturesLabel, mapId]); /** * Memoizes the selected layer for the LayerList component. diff --git a/packages/geoview-core/src/core/components/details/feature-detail-modal.tsx b/packages/geoview-core/src/core/components/details/feature-detail-modal.tsx index 595fdfc556c..388e86d166b 100644 --- a/packages/geoview-core/src/core/components/details/feature-detail-modal.tsx +++ b/packages/geoview-core/src/core/components/details/feature-detail-modal.tsx @@ -24,7 +24,7 @@ export default function FeatureDetailModal(): JSX.Element { const sxClasses = getSxClasses(theme); // get store function - const { closeModal } = useUIStoreActions(); + const { disableFocusTrap } = useUIStoreActions(); const activeModalId = useUIActiveFocusItem().activeElementId; const feature = useDataTableSelectedFeature()!; @@ -49,7 +49,7 @@ export default function FeatureDetailModal(): JSX.Element { return ( - diff --git a/packages/geoview-core/src/core/components/export/export-modal-button.tsx b/packages/geoview-core/src/core/components/export/export-modal-button.tsx index a237e9dd7ff..87ec06eb29e 100644 --- a/packages/geoview-core/src/core/components/export/export-modal-button.tsx +++ b/packages/geoview-core/src/core/components/export/export-modal-button.tsx @@ -18,14 +18,14 @@ interface ExportProps { export default function ExportButton({ className = '', sxDetails }: ExportProps): JSX.Element { // get store function const mapId = useGeoViewMapId(); - const { openModal } = useUIStoreActions(); + const { enableFocusTrap } = useUIStoreActions(); return ( openModal({ activeElementId: 'export', callbackElementId: `${mapId}-export-btn` })} + onClick={() => enableFocusTrap({ activeElementId: 'export', callbackElementId: `${mapId}-export-btn` })} sx={sxDetails} className={className} aria-label="appbar.export" diff --git a/packages/geoview-core/src/core/components/export/export-modal.tsx b/packages/geoview-core/src/core/components/export/export-modal.tsx index d89430d537b..89336fb49c7 100644 --- a/packages/geoview-core/src/core/components/export/export-modal.tsx +++ b/packages/geoview-core/src/core/components/export/export-modal.tsx @@ -49,7 +49,7 @@ export default function ExportModal(): JSX.Element { const { rotationAngle } = useManageArrow(); // get store function - const { closeModal, setActiveAppBarTab } = useUIStoreActions(); + const { disableFocusTrap, setActiveAppBarTab } = useUIStoreActions(); const activeModalId = useUIActiveFocusItem().activeElementId; const { isOpen } = useActiveAppBarTab(); @@ -66,7 +66,7 @@ export default function ExportModal(): JSX.Element { setIsMapExporting(false); exportPNG(dataUrl, mapId); setActiveAppBarTab('AppbarPanelButtonLegend', 'legend', false); - closeModal(); + disableFocusTrap(); }) .catch((error: Error) => { logger.logError('Error while exporting the image', error); @@ -76,7 +76,7 @@ export default function ExportModal(): JSX.Element { const handleCloseModal = (): void => { setActiveAppBarTab('AppbarPanelButtonLegend', 'legend', false); - closeModal(); + disableFocusTrap(); }; /** * Calculate the width of the canvas based on dialog box container width. @@ -158,7 +158,7 @@ export default function ExportModal(): JSX.Element { }, [activeModalId, isOpen]); return ( - + {t('exportModal.title')} diff --git a/packages/geoview-core/src/core/components/footer-bar/footer-bar.tsx b/packages/geoview-core/src/core/components/footer-bar/footer-bar.tsx index be03971f1f9..d91f371b018 100644 --- a/packages/geoview-core/src/core/components/footer-bar/footer-bar.tsx +++ b/packages/geoview-core/src/core/components/footer-bar/footer-bar.tsx @@ -74,7 +74,8 @@ export function FooterBar(props: FooterBarProps): JSX.Element | null { const geoviewElement = useAppGeoviewHTMLElement(); const shellContainer = geoviewElement.querySelector(`[id^="shell-${mapId}"]`) as HTMLElement; - const { setFooterPanelResizeValue, setActiveFooterBarTab, openModal, closeModal, setFooterBarIsCollapsed } = useUIStoreActions(); + const { setFooterPanelResizeValue, setActiveFooterBarTab, enableFocusTrap, disableFocusTrap, setFooterBarIsCollapsed } = + useUIStoreActions(); // get store config for footer bar tabs to add (similar logic as in app-bar) const footerBarTabsConfig = useGeoViewConfig()?.footerBar; @@ -215,10 +216,6 @@ export function FooterBar(props: FooterBarProps): JSX.Element | null { lastChild.style.maxHeight = isCollapsed ? '0px' : ''; } } - // unset footer tab id when footer bar panel is collapsed. - if (isCollapsed) { - setActiveFooterBarTab(''); - } }, [isCollapsed, setActiveFooterBarTab]); /** @@ -242,7 +239,7 @@ export function FooterBar(props: FooterBarProps): JSX.Element | null { */ useEffect(() => { // Log - logger.logTraceUseEffect('FOOTER-BAR - selectedTab'); + logger.logTraceUseEffect('FOOTER-BAR - selectedTab', selectedTab); // If clicked on a tab with a plugin MapEventProcessor.getMapViewerPlugins(mapId) @@ -377,8 +374,8 @@ export function FooterBar(props: FooterBarProps): JSX.Element | null { isCollapsed={isCollapsed} onToggleCollapse={handleToggleCollapse} onSelectedTabChanged={handleSelectedTabChanged} - onOpenKeyboard={openModal} - onCloseKeyboard={closeModal} + onOpenKeyboard={enableFocusTrap} + onCloseKeyboard={disableFocusTrap} selectedTab={memoFooterBarTabs.findIndex((t) => t.id === selectedTab)} tabProps={{ disableRipple: true }} tabs={memoFooterBarTabs} diff --git a/packages/geoview-core/src/core/components/guide/guide-panel.tsx b/packages/geoview-core/src/core/components/guide/guide-panel.tsx index 5a0cde4db7a..b8fcda7fd14 100644 --- a/packages/geoview-core/src/core/components/guide/guide-panel.tsx +++ b/packages/geoview-core/src/core/components/guide/guide-panel.tsx @@ -7,6 +7,8 @@ import { TypeGuideObject, useAppGuide } from '@/core/stores/store-interface-and- import { logger } from '@/core/utils/logger'; import { getSxClasses } from './guide-style'; import { LayerListEntry, Layout } from '@/core/components/common'; +import { useGeoViewMapId } from '@/core/stores/geoview-store'; +import { TABS } from '@/core/utils/constant'; interface GuideListItem extends LayerListEntry { content: string | ReactNode; @@ -23,6 +25,7 @@ export function GuidePanel({ fullWidth }: GuidePanelType): JSX.Element { const theme = useTheme(); const sxClasses = getSxClasses(theme); const guide = useAppGuide(); + const mapId = useGeoViewMapId(); const [selectedLayerPath, setSelectedLayerPath] = useState(''); const [guideItemIndex, setGuideItemIndex] = useState(0); @@ -59,9 +62,10 @@ export function GuidePanel({ fullWidth }: GuidePanelType): JSX.Element { layerStatus: 'loaded', queryStatus: 'processed', content: {content}, + layerUniqueId: `${mapId}-${TABS.GUIDE}-${item ?? ''}`, }; }); - }, [guide]); + }, [guide, mapId]); /** * Memo version of layer list with markdown content diff --git a/packages/geoview-core/src/core/components/guide/guide-style.ts b/packages/geoview-core/src/core/components/guide/guide-style.ts index 863cb447ad0..139abdd680a 100644 --- a/packages/geoview-core/src/core/components/guide/guide-style.ts +++ b/packages/geoview-core/src/core/components/guide/guide-style.ts @@ -5,6 +5,9 @@ export const getSxClasses = (theme: Theme) => guideContainer: { '& .responsive-layout-right-main-content': { backgroundColor: theme.palette.geoViewColor.white, + '&:focus-visible': { + border: '2px solid inherit', + }, }, }, rightPanelContainer: { diff --git a/packages/geoview-core/src/core/components/layers/right-panel/layer-details.tsx b/packages/geoview-core/src/core/components/layers/right-panel/layer-details.tsx index 2c03c17f128..b52a83ab88d 100644 --- a/packages/geoview-core/src/core/components/layers/right-panel/layer-details.tsx +++ b/packages/geoview-core/src/core/components/layers/right-panel/layer-details.tsx @@ -57,7 +57,7 @@ export function LayerDetails(props: LayerDetailsProps): JSX.Element { const highlightedLayer = useLayerHighlightedLayer(); const { setAllItemsVisibility, toggleItemVisibility, setHighlightLayer, refreshLayer, zoomToLayerExtent, getLayerBounds } = useLayerStoreActions(); - const { openModal } = useUIStoreActions(); + const { enableFocusTrap } = useUIStoreActions(); const { triggerGetAllFeatureInfo } = useDataTableStoreActions(); const datatableSettings = useDataTableLayerSettings(); const layersData = useDataTableAllFeaturesDataArray(); @@ -102,7 +102,7 @@ export function LayerDetails(props: LayerDetailsProps): JSX.Element { logger.logPromiseFailed('Failed to triggerGetAllFeatureInfo in single-layer.handleLayerClick', error); }); } - openModal({ activeElementId: 'layerDataTable', callbackElementId: `table-details` }); + enableFocusTrap({ activeElementId: 'layerDataTable', callbackElementId: `table-details` }); }; if (layerDetails.bounds === undefined || layerDetails.bounds![0] === Infinity) { diff --git a/packages/geoview-core/src/core/stores/store-interface-and-intial-values/ui-state.ts b/packages/geoview-core/src/core/stores/store-interface-and-intial-values/ui-state.ts index 30ad4ac6c9b..bad0a3c4156 100644 --- a/packages/geoview-core/src/core/stores/store-interface-and-intial-values/ui-state.ts +++ b/packages/geoview-core/src/core/stores/store-interface-and-intial-values/ui-state.ts @@ -24,19 +24,20 @@ export interface IUIState { activeAppBarTab: ActiveAppBarTabType; appBarComponents: TypeValidAppBarCoreProps[]; corePackagesComponents: TypeMapCorePackages; - focusITem: FocusItemProps; + focusItem: FocusItemProps; hiddenTabs: string[]; mapInfoExpanded: boolean; navBarComponents: TypeNavBarProps; footerPanelResizeValue: number; footerPanelResizeValues: number[]; footerBarIsCollapsed: boolean; + selectedFooterLayerListItem: string; setDefaultConfigValues: (geoviewConfig: TypeMapFeaturesConfig) => void; actions: { hideTab: (tab: string) => void; - closeModal: () => void; - openModal: (uiFocus: FocusItemProps) => void; + enableFocusTrap: (uiFocus: FocusItemProps) => void; + disableFocusTrap: () => void; showTab: (tab: string) => void; setActiveFooterBarTab: (id: string) => void; setActiveAppBarTab: (tabId: string, tabGroup: string, isOpen: boolean) => void; @@ -44,11 +45,12 @@ export interface IUIState { setFooterPanelResizeValue: (value: number) => void; setMapInfoExpanded: (expanded: boolean) => void; setFooterBarIsCollapsed: (collapsed: boolean) => void; + setSelectedFooterLayerListItem: (layerListItem: string) => void; }; setterActions: { - closeModal: () => void; - openModal: (uiFocus: FocusItemProps) => void; + enableFocusTrap: (uiFocus: FocusItemProps) => void; + disableFocusTrap: () => void; setActiveFooterBarTab: (id: string) => void; setActiveAppBarTab: (tabId: string, tabGroup: string, isOpen: boolean) => void; setActiveTrapGeoView: (active: boolean) => void; @@ -56,6 +58,7 @@ export interface IUIState { setHiddenTabs: (hiddenTabs: string[]) => void; setMapInfoExpanded: (expanded: boolean) => void; setFooterBarIsCollapsed: (collapsed: boolean) => void; + setSelectedFooterLayerListItem: (layerListItem: string) => void; }; } @@ -74,13 +77,14 @@ export function initializeUIState(set: TypeSetStore, get: TypeGetStore): IUIStat activeAppBarTab: { tabId: '', tabGroup: '', isOpen: false }, activeTrapGeoView: false, corePackagesComponents: [], - focusITem: { activeElementId: false, callbackElementId: false }, + focusItem: { activeElementId: false, callbackElementId: false }, hiddenTabs: ['time-slider', 'geochart'], mapInfoExpanded: false, navBarComponents: [], footerPanelResizeValue: 35, footerPanelResizeValues: [35, 50, 100], footerBarIsCollapsed: false, + selectedFooterLayerListItem: '', // initialize default stores section from config information when store receive configuration file setDefaultConfigValues: (geoviewConfig: TypeMapFeaturesConfig) => { @@ -110,13 +114,13 @@ export function initializeUIState(set: TypeSetStore, get: TypeGetStore): IUIStat // Redirect to event processor UIEventProcessor.hideTab(get().mapId, tab); }, - closeModal: () => { + enableFocusTrap: (uiFocus: FocusItemProps) => { // Redirect to setter - get().uiState.setterActions.closeModal(); + get().uiState.setterActions.enableFocusTrap(uiFocus); }, - openModal: (uiFocus: FocusItemProps) => { + disableFocusTrap: () => { // Redirect to setter - get().uiState.setterActions.openModal(uiFocus); + get().uiState.setterActions.disableFocusTrap(); }, showTab: (tab: string): void => { // Redirect to event processor @@ -146,23 +150,27 @@ export function initializeUIState(set: TypeSetStore, get: TypeGetStore): IUIStat // Redirect to setter get().uiState.setterActions.setActiveAppBarTab(tabId, tabGroup, isOpen); }, + setSelectedFooterLayerListItem: (layerListItem: string) => { + // Redirect to setter + get().uiState.setterActions.setSelectedFooterLayerListItem(layerListItem); + }, }, setterActions: { - closeModal: () => { - document.getElementById(get().uiState.focusITem.callbackElementId as string)?.focus(); + enableFocusTrap: (uiFocus: FocusItemProps) => { set({ uiState: { ...get().uiState, - focusITem: { activeElementId: false, callbackElementId: false }, + focusItem: { activeElementId: uiFocus.activeElementId, callbackElementId: uiFocus.callbackElementId }, }, }); }, - openModal: (uiFocus: FocusItemProps) => { + disableFocusTrap: () => { + document.getElementById(get().uiState.focusItem.callbackElementId as string)?.focus(); set({ uiState: { ...get().uiState, - focusITem: { activeElementId: uiFocus.activeElementId, callbackElementId: uiFocus.callbackElementId }, + focusItem: { activeElementId: false, callbackElementId: false }, }, }); }, @@ -226,6 +234,14 @@ export function initializeUIState(set: TypeSetStore, get: TypeGetStore): IUIStat }, }); }, + setSelectedFooterLayerListItem: (layerListItem: string) => { + set({ + uiState: { + ...get().uiState, + selectedFooterLayerListItem: layerListItem, + }, + }); + }, }, // #endregion ACTIONS @@ -242,7 +258,7 @@ type FocusItemProps = { // ********************************************************** // UI state selectors // ********************************************************** -export const useUIActiveFocusItem = (): FocusItemProps => useStore(useGeoViewStore(), (state) => state.uiState.focusITem); +export const useUIActiveFocusItem = (): FocusItemProps => useStore(useGeoViewStore(), (state) => state.uiState.focusItem); export const useUIActiveFooterBarTabId = (): string => useStore(useGeoViewStore(), (state) => state.uiState.activeFooterBarTabId); export const useActiveAppBarTab = (): ActiveAppBarTabType => useStore(useGeoViewStore(), (state) => state.uiState.activeAppBarTab); export const useUIActiveTrapGeoView = (): boolean => useStore(useGeoViewStore(), (state) => state.uiState.activeTrapGeoView); @@ -256,5 +272,7 @@ export const useUIHiddenTabs = (): string[] => useStore(useGeoViewStore(), (stat export const useUIMapInfoExpanded = (): boolean => useStore(useGeoViewStore(), (state) => state.uiState.mapInfoExpanded); export const useUINavbarComponents = (): TypeNavBarProps => useStore(useGeoViewStore(), (state) => state.uiState.navBarComponents); export const useUIFooterBarIsCollapsed = (): boolean => useStore(useGeoViewStore(), (state) => state.uiState.footerBarIsCollapsed); +export const useUISelectedFooterLayerListItem = (): string => + useStore(useGeoViewStore(), (state) => state.uiState.selectedFooterLayerListItem); export const useUIStoreActions = (): UIActions => useStore(useGeoViewStore(), (state) => state.uiState.actions); diff --git a/packages/geoview-core/src/ui/tabs/tab-panel.tsx b/packages/geoview-core/src/ui/tabs/tab-panel.tsx index 572abf92437..35c9a4f12cd 100644 --- a/packages/geoview-core/src/ui/tabs/tab-panel.tsx +++ b/packages/geoview-core/src/ui/tabs/tab-panel.tsx @@ -15,6 +15,7 @@ export interface TypeTabPanelProps { id: string; children?: TypeChildren; containerType?: TypeContainerBox; + tabId: string; } /** @@ -24,10 +25,10 @@ export interface TypeTabPanelProps { * @returns {JSX.Element} returns the tab panel */ export function TabPanel(props: TypeTabPanelProps): JSX.Element { - const { children, value, index, id, containerType, ...other } = props; + const { children, value, index, id, containerType, tabId, ...other } = props; return ( -