@opengeoweb/layer-select 9.23.1 → 9.25.0

package/index.esm.js

@@ -2,12 +2,12 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import { CustomIconButton, ToolContainerDraggable, CustomAccordion, CustomToggleButton, CustomTooltip, SearchHighlight, SearchField, ToggleMenu } from '@opengeoweb/shared';
+import { CustomIconButton, FilterListItem, ToolContainerDraggable, CustomAccordion, CustomToggleButton, CustomTooltip, SearchHighlight, SearchField, ToggleMenu } from '@opengeoweb/shared';
 import { Filter, LayersAdd, Add, Cached, Edit, Visibility, Delete, Close, Copy } from '@opengeoweb/theme';
 import { uiTypes, serviceActions, selectorMemoizationOptions, serviceSelectors, uiActions, getUserAddedServices, setUserAddedServices, layerActions, uiSelectors, layerSelectors, useSetupDialog, mapSelectors, layerTypes } from '@opengeoweb/store';
 import { createEntityAdapter, createSlice, createSelector, createListenerMiddleware, isAnyOf } from '@reduxjs/toolkit';
 import { compact, countBy, partition } from 'lodash';
-import { ListItem, ListItemIcon, Checkbox, Typography, ListItemSecondaryAction, Switch, Grid, List, Box, Backdrop, CircularProgress, Button, ListItemText, Dialog, DialogTitle, LinearProgress, DialogContent, InputAdornment, DialogActions } from '@mui/material';
+import { Switch, Grid, List, Box, Typography, Backdrop, CircularProgress, Button, ListItem, ListItemText, ListItemSecondaryAction, Dialog, DialogTitle, LinearProgress, DialogContent, InputAdornment, DialogActions } from '@mui/material';
 import i18n from 'i18next';
 import { useTranslation } from 'react-i18next';
 import { FixedSizeList } from 'react-window';
@@ -21,7 +21,6 @@ var en = {
 	"layer-select": "Layer Select",
 	"select-all": "Select all",
 	"groups-and-keywords-dialog-title": "Groups & Keywords",
-	only: "ONLY",
 	add: "add",
 	remove: "remove",
 	"layer-list-results": "results",
@@ -59,7 +58,6 @@ var fi = {
 	"layer-select": "Layer Select",
 	"select-all": "Valitse kaikki",
 	"groups-and-keywords-dialog-title": "Ryhmät ja Avainsanat",
-	only: "Pelkästään",
 	add: "lisää",
 	remove: "poista",
 	"layer-list-results": "tulosta",
@@ -97,7 +95,6 @@ var no = {
 	"layer-select": "Lagvalg",
 	"select-all": "Velg alle",
 	"groups-and-keywords-dialog-title": "Grupper & Nøkkelord",
-	only: "BARE",
 	add: "legg til",
 	remove: "fjern",
 	"layer-list-results": "resultat",
@@ -135,7 +132,6 @@ var nl = {
 	"layer-select": "Layer Select",
 	"select-all": "Selecteer alles",
 	"groups-and-keywords-dialog-title": "Groepen & Trefwoorden",
-	only: "ALLEEN",
 	add: "toevoegen",
 	remove: "verwijderen",
 	"layer-list-results": "resultaten",
@@ -2956,128 +2952,6 @@ const KeywordFilterButtonConnect = ({
   }));
 };
 
-const LAYER_SELECT_NAMESPACE = 'layerselect';
-const useLayerSelectTranslation = () => useTranslation(LAYER_SELECT_NAMESPACE);
-const translateKeyOutsideComponents = (key, params = undefined) => i18n.t(key, Object.assign({
-  ns: [LAYER_SELECT_NAMESPACE]
-}, params));
-
-const FilterListItem = ({
-  filter,
-  toggleFilter,
-  enableOnlyOneFilter
-}) => {
-  const {
-    t
-  } = useLayerSelectTranslation();
-  const [isHovering, setIsHovering] = React.useState(false);
-  const handleMouseEnter = React.useCallback(() => {
-    setIsHovering(true);
-  }, []);
-  const handleMouseLeave = React.useCallback(() => {
-    setIsHovering(false);
-  }, []);
-  const selectOnlyOne = filterId => {
-    enableOnlyOneFilter(filterId);
-  };
-  const toggleCheckbox = filterId => {
-    toggleFilter([filterId]);
-  };
-  const mouseMoveRef = React.useRef(null);
-  React.useEffect(() => {
-    window.addEventListener('mousemove', checkHover, true);
-    return () => {
-      window.removeEventListener('mousemove', checkHover, true);
-    };
-  });
-  const checkHover = e => {
-    if (mouseMoveRef.current) {
-      const mouseOver = mouseMoveRef.current.contains(e.target);
-      if (!isHovering && mouseOver) {
-        handleMouseEnter();
-      }
-      if (isHovering && !mouseOver) {
-        handleMouseLeave();
-      }
-    }
-  };
-  if (filter.amountVisible !== 0) {
-    return jsx("div", Object.assign({
-      ref: mouseMoveRef,
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave,
-      onFocus: handleMouseEnter,
-      onBlur: handleMouseLeave
-    }, {
-      children: jsxs(ListItem, Object.assign({
-        sx: {
-          width: '100%',
-          minWidth: '300px',
-          padding: '0px',
-          paddingLeft: '0px',
-          paddingRight: '50px',
-          fontSize: '12px'
-        }
-      }, {
-        children: [jsx(ListItemIcon, Object.assign({
-          sx: {
-            minWidth: '42px'
-          }
-        }, {
-          children: jsx(Checkbox, {
-            inputProps: {
-              'aria-label': filter.name
-            },
-            color: "secondary",
-            checked: filter.checked,
-            onChange: () => {
-              toggleCheckbox(filter.id);
-            },
-            sx: {
-              paddingTop: '6px',
-              paddingBottom: '7px',
-              '&&:hover': {
-                backgroundColor: 'transparent'
-              }
-            }
-          })
-        })), jsxs(Typography, Object.assign({
-          variant: "body2",
-          sx: {
-            fontSize: '16px',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap',
-            overflow: 'hidden'
-          }
-        }, {
-          children: [filter.name, " (", filter.amountVisible, ")"]
-        })), isHovering ? jsx(ListItemSecondaryAction, {
-          children: jsx(CustomIconButton, Object.assign({
-            "aria-label": `Only ${filter.name}`,
-            style: {
-              backgroundColor: 'transparent',
-              width: 'auto'
-            },
-            edge: "end",
-            onClick: () => selectOnlyOne(filter.id)
-          }, {
-            children: jsx(Typography, Object.assign({
-              sx: {
-                color: 'geowebColors.buttons.primary.default.fill',
-                fontSize: '14px',
-                fontWeight: 500
-              }
-            }, {
-              children: t('only')
-            }))
-          }))
-        }) : null]
-      }))
-    }));
-  }
-  return null;
-};
-
 const KeywordFilterResultsListItemConnect = ({
   filter
 }) => {
@@ -3120,6 +2994,12 @@ const KeywordFilterSelectAllSwitchConnect = () => {
   });
 };
 
+const LAYER_SELECT_NAMESPACE = 'layerselect';
+const useLayerSelectTranslation = () => useTranslation(LAYER_SELECT_NAMESPACE);
+const translateKeyOutsideComponents = (key, params = undefined) => i18n.t(key, Object.assign({
+  ns: [LAYER_SELECT_NAMESPACE]
+}, params));
+
 const listStyle = {
   padding: '0px'
 };
@@ -5150,4 +5030,4 @@ const LayerSelectConnect = ({
   });
 };
 
-export { AllChipConnect, FilterListItem, KeywordFilterButtonConnect, KeywordFilterResults, KeywordFilterResultsConnect, KeywordFilterResultsListItemConnect, KeywordFilterSelectAllSwitchConnect, LAYER_SELECT_NAMESPACE, LayerAddRemoveButton, LayerList, LayerListConnect, LayerListDimensions, LayerListRow, LayerSelectButtonConnect, LayerSelectConnect, SearchFieldConnect, ServiceChip, ServiceChipConnect, ServiceList, ServiceListConnect, ServiceOptionsButton, ServiceOptionsDialog, ServiceOptionsDialogConnect, ServicePopup, ServicePopupConnect, ServicePopupDialogConnect, getServiceFailedUpdateMessage, getServiceSuccesUpdateMessage, getSuccesMessage, isUserAddedService, layerSelectActions, layerSelectConfig, initialState as layerSelectInitialState, reducer as layerSelectReducer, selectors as layerSelectSelectors, layerSelectTranslations, types as layerSelectTypes, useAppSelector };
+export { AllChipConnect, KeywordFilterButtonConnect, KeywordFilterResults, KeywordFilterResultsConnect, KeywordFilterResultsListItemConnect, KeywordFilterSelectAllSwitchConnect, LAYER_SELECT_NAMESPACE, LayerAddRemoveButton, LayerList, LayerListConnect, LayerListDimensions, LayerListRow, LayerSelectButtonConnect, LayerSelectConnect, SearchFieldConnect, ServiceChip, ServiceChipConnect, ServiceList, ServiceListConnect, ServiceOptionsButton, ServiceOptionsDialog, ServiceOptionsDialogConnect, ServicePopup, ServicePopupConnect, ServicePopupDialogConnect, getServiceFailedUpdateMessage, getServiceSuccesUpdateMessage, getSuccesMessage, isUserAddedService, layerSelectActions, layerSelectConfig, initialState as layerSelectInitialState, reducer as layerSelectReducer, selectors as layerSelectSelectors, layerSelectTranslations, types as layerSelectTypes, useAppSelector };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/layer-select",
-  "version": "9.23.1",
+  "version": "9.25.0",
   "description": "GeoWeb layer select library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -12,7 +12,6 @@
     "@opengeoweb/store": "*",
     "react-redux": "^8.1.3",
     "@opengeoweb/theme": "*",
-    "@mui/material": "^5.16.0",
     "@opengeoweb/webmap-react": "*",
     "@opengeoweb/webmap": "*",
     "react-window": "^1.8.10",
@@ -23,6 +22,7 @@
     "@redux-eggs/core": "^2.2.0",
     "lodash": "^4.17.21",
     "i18next": "^23.11.5",
+    "@mui/material": "^5.16.0",
     "react-i18next": "^14.1.2"
   },
   "peerDependencies": {

package/src/lib/components/KeywordFilterResults/index.d.ts

@@ -1,5 +1,4 @@
 export * from './KeywordFilterResults';
 export * from './KeywordFilterResultsConnect';
-export * from './KeywordFilterResultsListItem';
 export * from './KeywordFilterResultsListItemConnect';
 export * from './KeywordFilterSelectAllSwitchConnect';

package/src/lib/store/types.d.ts

@@ -1,3 +1,4 @@
+import { FilterListItemFilter } from '@opengeoweb/shared';
 import { CoreAppStore, serviceTypes } from '@opengeoweb/store';
 import { EntityState } from '@reduxjs/toolkit';
 export type RootState = CoreAppStore & LayerSelectModuleState;
@@ -17,12 +18,8 @@ export interface ActiveServiceObject {
     groups?: string[];
 }
 export type FilterType = 'keywords' | 'groups';
-export interface Filter {
-    id: string;
-    name: string;
-    checked?: boolean;
+export interface Filter extends FilterListItemFilter {
     type: FilterType;
-    amountVisible?: number;
 }
 export type ActiveServiceObjectEntities = Record<string, ActiveServiceObject>;
 export type Filters = EntityState<Filter>;

package/src/lib/components/KeywordFilterResults/KeywordFilterResultsListItem.d.ts

@@ -1,8 +0,0 @@
-import * as React from 'react';
-import { layerSelectTypes } from '../../store';
-export interface FilterListItemProps {
-    filter: layerSelectTypes.Filter;
-    toggleFilter: (filterIds: string[]) => void;
-    enableOnlyOneFilter: (filterId: string) => void;
-}
-export declare const FilterListItem: React.FC<FilterListItemProps>;