@map-colonies/react-components 4.10.4 → 4.13.0

package/dist/cesium-map/map.css

@@ -1,58 +1,279 @@
-.cesium-widget-credits {
+.cesium-viewer .cesium-widget-credits {
   display: none !important;
 }
 
-.cesium-viewer-fullscreenContainer {
-  bottom: 8px;
-  right: 8px;
-  left: unset;
+.cesium-viewer .cesium-viewer-toolbar {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  top: 116px;
+  right: 27px;
 }
 
-body[dir='rtl'] .cesium-viewer-fullscreenContainer {
-  left: 8px;
+body[dir='rtl'] .cesium-viewer .cesium-viewer-toolbar {
+  left: 27px;
   right: unset;
 }
 
-body[dir='rtl'] .cesium-viewer-toolbar {
-  left: 5px;
-  right: unset;
+.cesium-viewer .widgetsContainer {
+  top: 24px;
+  left: 10px;
 }
 
-.cesium-button.cesium-fullscreenButton {
-  border-radius: 14%;
+body[dir='rtl'] .cesium-viewer .widgetsContainer {
+  left: unset;
+  right: 10px;
 }
 
-.toolsContainer {
-  color: var(--mdc-theme-on-surface);
-  display: flex;
-  gap: 8px;
-  z-index: 2000;
+.cesium-viewer .cesium-mc-tool {
+  display: block;
   position: absolute;
-  bottom: 12px;
+  box-sizing: content-box;
+  top: auto;
+  right: 0;
+  width: 320px;
+  max-height: 500px;
+  margin-top: 5px;
+  background-color: rgba(38, 38, 38, 0.75);
+  border: 1px solid #444;
+  padding: 6px;
+  overflow: auto;
+  border-radius: 10px;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  transform: translate(0, -20%);
+  visibility: hidden;
+  opacity: 0;
+  transition:
+    visibility 0s 0.2s,
+    opacity 0.2s ease-in,
+    transform 0.2s ease-in;
+}
+
+.cesium-viewer .cesium-mc-tool-visible {
+  transform: translate(0, 0);
+  visibility: visible;
+  opacity: 1;
+  transition:
+    opacity 0.2s ease-out,
+    transform 0.2s ease-out;
+}
+
+.cesium-viewer .cesium-mc-title {
+  display: block;
+  font-family: sans-serif;
+  font-size: 16pt;
+  text-align: left;
+  margin-bottom: 4px;
+}
+
+body[dir='rtl'] .cesium-viewer .cesium-mc-title {
+  text-align: right;
+}
+
+.cesium-viewer .cesium-mc-tool {
+  color: var(--mdc-theme-cesium-color);
   right: 40px;
-  opacity: 0.7;
+  margin-top: 0;
 }
 
-body[dir='rtl'] .toolsContainer {
+body[dir='rtl'] .cesium-viewer .cesium-mc-tool {
+  right: unset;
   left: 40px;
+}
+
+.cesium-viewer .cesium-mc-choices {
+  display: block;
+  border: 1px solid #888;
+  border-radius: 5px;
+  padding: 5px 0;
+  margin-bottom: 5px;
+}
+
+.cesium-viewer .cesium-baseLayerPicker-dropDown {
+  right: 40px;
+  margin-top: 0;
+}
+
+body[dir='rtl'] .cesium-viewer .cesium-baseLayerPicker-dropDown {
   right: unset;
+  left: 40px;
+}
+
+body[dir='rtl'] .cesium-viewer .cesium-baseLayerPicker-sectionTitle {
+  text-align: right;
 }
 
-.sideToolsContainer {
+.cesium-viewer span.cesium-sceneModePicker-wrapper {
+  width: 100%;
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: center;
+  column-gap: 4px;
+  margin: 3px 3px 1px 3px;
+}
+
+.cesium-viewer .cesium-viewer-fullscreenContainer {
+  width: 32px;
+  height: 32px;
+  bottom: 9px;
+  right: 30px;
+}
+
+body[dir='rtl'] .cesium-viewer .cesium-viewer-fullscreenContainer {
+  right: unset;
+  left: 30px;
+}
+
+.cesium-viewer .cesium-button.cesium-fullscreenButton {
+  border-radius: 14%;
+  box-sizing: border-box;
+}
+
+.cesium-viewer .bottomToolsContainer {
+  color: var(--mdc-theme-on-surface);
+  opacity: 0.7;
   display: flex;
-  flex-direction: row;
   gap: 8px;
-  z-index: 2000;
   position: absolute;
-  top: 12px;
-  right: 40px;
+  bottom: 10px;
+  right: 70px;
 }
 
-body[dir='rtl'] .sideToolsContainer {
-  left: 40px;
+body[dir='rtl'] .cesium-viewer .bottomToolsContainer {
+  left: 70px;
   right: unset;
 }
 
+/* #region for NATIVE CONTROLS */
+.cesium-viewer input[type='checkbox'] {
+  accent-color: var(--mdc-theme-cesium-checkbox-color);
+}
+
+.cesium-viewer input::placeholder {
+  color: unset;
+  opacity: 0.8;
+}
+
+.cesium-viewer input {
+  font-size: var(--mdc-theme-cesium-font-size);
+  color: unset;
+  font-weight: bold;
+  caret-color: unset;
+}
+
+.cesium-viewer ::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.cesium-viewer ::-webkit-scrollbar-track {
+  box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
+  border-radius: 6px;
+}
+
+.cesium-viewer ::-webkit-scrollbar-thumb {
+  background-color: #aaa;
+  border-radius: 6px;
+}
+
+/* #endregion for NATIVE CONTROLS */
+
+/* #region for mdc-checkbox */
+.cesium-viewer .mdc-checkbox .mdc-checkbox__native-control:enabled:checked ~ .mdc-checkbox__background,
+.mdc-checkbox .mdc-checkbox__native-control:enabled:indeterminate ~ .mdc-checkbox__background,
+.mdc-checkbox .mdc-checkbox__native-control[data-indeterminate='true']:enabled ~ .mdc-checkbox__background {
+  border-color: var(--mdc-theme-cesium-checkbox-color);
+  background-color: var(--mdc-theme-cesium-checkbox-color);
+}
+
+.cesium-viewer .mdc-checkbox--upgraded {
+  --mdc-checkbox-checked-color: var(--mdc-theme-cesium-checkbox-color);
+}
+
+.cesium-viewer .mdc-checkbox {
+  width: var(--mdc-theme-cesium-checkbox-width);
+  height: var(--mdc-theme-cesium-checkbox-height);
+}
+
+.cesium-viewer .mdc-checkbox__background {
+  width: 12px;
+  height: 12px;
+}
+
+.cesium-viewer .mdc-form-field {
+  color: unset;
+  margin: -2%;
+  margin-bottom: -4%;
+}
+
+.cesium-viewer .mdc-form-field > label {
+  color: unset;
+}
+
+.cesium-viewer .mdc-ripple-upgraded--unbounded {
+  --mdc-ripple-fg-size: 0px !important;
+}
+
+/* #endregion mdc-checkbox */
+
+/* #region mdc-list */
+.cesium-viewer .mdc-list {
+  font-size: var(--mdc-theme-cesium-font-size);
+  font-family: sans-serif;
+  padding: 1px;
+  color: unset;
+}
+
+.cesium-viewer .mdc-list-item {
+  padding: unset;
+  padding-right: 4px;
+  padding-left: 4px;
+  height: 24px;
+  font-weight: bold;
+}
+
+.cesium-viewer .mdc-text-field--filled {
+  height: 32px;
+}
+
+/* #endregion mdc-list */
+
+/* #region mdc-TextField */
+.cesium-viewer .mdc-text-field__input {
+  box-sizing: border-box;
+  border: unset;
+}
+
+.mdc-text-field--filled:not(.mdc-text-field--disabled) {
+  background-color: transparent !important;
+}
+
+.cesium-viewer .mdc-text-field {
+  padding: unset;
+  padding-right: 4px;
+  padding-left: 4px;
+}
+
+/* Removing the purple underline in RMWC */
+.cesium-viewer .mdc-line-ripple::before,
+.cesium-viewer .mdc-line-ripple::after {
+  border-bottom: none !important;
+}
+
+/* #endregion mdc-TextField */
+
+.cesium-viewer .disabled {
+  opacity: 0.6;
+  cursor: initial;
+}
+
+.cesium-viewer .search-results {
+  padding: 4px;
+}
+
 .viewer {
   display: flex;
   flex-direction: row;
@@ -60,4 +281,4 @@ body[dir='rtl'] .sideToolsContainer {
 
 .viewer .mdc-linear-progress__bar-inner {
   border-top-width: 10px;
-}
+}

package/dist/cesium-map/map.d.ts

@@ -2,10 +2,9 @@ import React, { ComponentProps, MouseEvent } from 'react';
 import { Viewer } from 'resium';
 import { Viewer as CesiumViewerCls, TerrainProvider } from 'cesium';
 import { Proj } from '../utils/projections';
-import LayerManager, { LegendExtractor } from './layers-manager';
-import { IMapLegend } from './map-legend';
-import { CesiumSceneMode } from './proxied.types';
-import { IBaseMaps } from './settings/settings';
+import { GeocoderOptions } from './geocoder/geocoder-panel';
+import LayerManager, { IRasterLayer, LegendExtractor } from './layers-manager';
+import { IMapLegend } from './legend';
 interface ViewerProps extends ComponentProps<typeof Viewer> {
 }
 export declare class CesiumViewer extends CesiumViewerCls {
@@ -38,6 +37,25 @@ export interface IContextMenuData {
     handleClose: () => void;
     contextEvt: MouseEvent | TouchEvent | KeyboardEvent | React.MouseEvent | React.TouchEvent | React.KeyboardEvent;
 }
+export interface IBaseMap {
+    id: string;
+    title?: string;
+    thumbnail?: string;
+    isCurrent?: boolean;
+    isForPreview?: boolean;
+    baseRasterLayers: IRasterLayer[];
+}
+export interface IBaseMaps {
+    maps: IBaseMap[];
+}
+export interface ITerrain {
+    id: string;
+    url: string;
+    title?: string;
+    thumbnail?: string;
+    isCurrent?: boolean;
+    terrainProvider?: TerrainProvider;
+}
 interface ILegends {
     legendsList?: IMapLegend[];
     emptyText?: string;
@@ -48,23 +66,23 @@ interface ILegends {
     };
     mapLegendsExtractor?: LegendExtractor;
 }
-export interface IDebugPanel {
-    wfs?: Record<string, unknown>;
-}
 export interface CesiumMapProps extends ViewerProps {
     showMousePosition?: boolean;
     showZoomLevel?: boolean;
     showScale?: boolean;
     showLoadingProgress?: boolean;
     showCompass?: boolean;
+    showZoomButtons?: boolean;
+    showDebuggerTool?: boolean;
+    showActiveLayersTool?: boolean;
     projection?: Proj;
     center?: [number, number];
     zoom?: number;
     locale?: {
         [key: string]: string;
     };
-    sceneModes?: (typeof CesiumSceneMode)[];
     baseMaps?: IBaseMaps;
+    terrains?: ITerrain[];
     useOptimizedTileRequests?: boolean;
     terrainProvider?: TerrainProvider;
     imageryContextMenu?: React.ReactElement<IContextMenuData>;
@@ -75,8 +93,7 @@ export interface CesiumMapProps extends ViewerProps {
     };
     legends?: ILegends;
     layerManagerFootprintMetaFieldPath?: string;
-    displayZoomButtons?: boolean;
-    debugPanel?: IDebugPanel;
+    geocoderPanel?: GeocoderOptions[];
 }
 export declare const useCesiumMap: () => CesiumViewer;
 export declare const useCesiumMapViewstate: () => IMapViewState;

package/dist/cesium-map/tools/cesium-compass.tool.css

@@ -1,9 +1,9 @@
-.compass.rtl {
-  right: unset;
-  left: 24px;
+.cesium-viewer .compass {
+  top: 20px;
+  right: 0px;
 }
 
-.compass.ltr {
-  left: unset;
-  right: 24px;
-}
+body[dir='rtl'] .cesium-viewer .compass {
+  right: unset;
+  left: 0px;
+}

package/dist/cesium-map/tools/cesium-compass.tool.d.ts

@@ -7,5 +7,5 @@ interface CesiumCompassToolProps {
         [key: string]: string;
     };
 }
-declare const CesiumCompassTool: React.FC<CesiumCompassToolProps>;
-export default CesiumCompassTool;
+export declare const CesiumCompassTool: React.FC<CesiumCompassToolProps>;
+export {};

package/dist/cesium-map/tools/coordinates-tracker.tool.css

@@ -1,11 +1,9 @@
-.trackerPosition {
+.cesium-viewer .coordinatesTracker {
   background-color: var(--mdc-theme-surface);
-  z-index: 2000;
-  padding: 2px 2px;
+  padding-top: 7px;
   border-radius: 2px;
   font-size: 12px;
-  height: 24px;
   text-align: center;
-  line-height: 20px;
   white-space: nowrap;
+  min-width: 200px;
 }

package/dist/cesium-map/tools/index.d.ts

@@ -1,8 +1,7 @@
+export * from './cesium-compass.tool';
 export * from './coordinates-tracker.tool';
 export * from './inspector.tool';
 export * from './scale-tracker.tool';
 export * from './terranian-height.tool';
-export * from './zoom_level-tracker.tool';
-export * from './geojson';
-export * from './draw/drawHelper';
-export * from './cesium/primitives-conversions.cesium';
+export * from './zoom-buttons';
+export * from './zoom-level-tracker.tool';

package/dist/cesium-map/tools/inspector.tool.d.ts

@@ -1,4 +1,2 @@
 import React from 'react';
-export interface InspectorProps {
-}
-export declare const InspectorTool: React.FC<InspectorProps>;
+export declare const InspectorTool: React.FC;

package/dist/cesium-map/tools/scale-tracker.tool.css

@@ -1,14 +1,16 @@
-.scalePosition {
+.cesium-viewer .scaleTracker {
   background-color: var(--mdc-theme-surface);
-  padding: 1px 1px;
+  padding-top: 4px;
   border-radius: 2px;
   font-size: 12px;
   width: 110px;
 }
-.scale-tracker-label {
+
+.cesium-viewer .scaleTrackerLabel {
   text-align: center;
 }
-.scale-tracker-bar {
+
+.cesium-viewer .scaleTrackerBar {
   background: var(--mdc-theme-on-surface);
   margin: 0 auto;
   display: block;

package/dist/cesium-map/tools/zoom-buttons.css

@@ -0,0 +1,31 @@
+.cesium-viewer .zoomButtons {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  position: absolute;
+  bottom: 48px;
+  right: 30px;
+}
+
+body[dir='rtl'] .cesium-viewer .zoomButtons {
+  right: unset;
+  left: 30px;
+}
+
+.cesium-viewer .zoomButton {
+  width: 32px;
+  height: 32px;
+  background: #303336;
+  border: 1px solid #444;
+  border-radius: 4px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  padding: 4px;
+  cursor: pointer;
+}
+
+.cesium-viewer .zoomButton:hover {
+  background: #48b;
+  border-color: #aef;
+}

package/dist/cesium-map/tools/{zoom_level-tracker.tool.css → zoom-level-tracker.tool.css}

@@ -1,19 +1,20 @@
-.zoomLevel {
-  z-index: 2000;
+.cesium-viewer .zoomLevel {
   background-color: var(--mdc-theme-surface);
   border-radius: 2px;
   padding: 2px;
   height: 24px;
 }
 
-.zoomLevelValue {
+.cesium-viewer .zoomLevelValue {
   margin: 2px;
   font-size: 14px;
-  line-height: 10px;
+  line-height: 12px;
   text-align: center;
 }
 
-.zoomLevelLabel {
+.cesium-viewer .zoomLevelLabel {
   font-size: 8px;
   line-height: 8px;
+  display: table;
+  margin: auto;
 }

package/dist/cesium-map/widget/cesium-button.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface ICesiumButtonProps {
+    title: string;
+    onClick: () => void;
+}
+export declare const CesiumButton: React.FC<ICesiumButtonProps>;
+export {};

package/dist/cesium-map/widget/cesium-icon.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface ICesiumIconProps {
+    onClick: () => void;
+    children: React.ReactNode;
+}
+export declare const CesiumIcon: React.FC<ICesiumIconProps>;
+export {};

package/dist/cesium-map/widget/cesium-inspector.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface ICesiumInspectorProps {
+    title: string;
+    isVisible: boolean;
+    onClick: () => void;
+    children: React.ReactNode;
+}
+export declare const CesiumInspector: React.FC<ICesiumInspectorProps>;
+export {};

package/dist/cesium-map/widget/cesium-title.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface ICesiumTitleProps {
+    title: string;
+}
+export declare const CesiumTitle: React.FC<ICesiumTitleProps>;
+export {};

package/dist/cesium-map/widget/cesium-tool.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface ICesiumToolProps {
+    isVisible: boolean;
+    children: React.ReactNode;
+    title?: string;
+}
+export declare const CesiumTool: React.FC<ICesiumToolProps>;
+export {};

package/dist/circular-progress-bar/circular-progress-bar.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { buildStyles } from 'react-circular-progressbar';
+interface CircularProgressBarStylesProps {
+    rotation?: number;
+    strokeLinecap?: any;
+    textColor?: string;
+    textSize?: string | number;
+    pathColor?: string;
+    pathTransition?: string;
+    pathTransitionDuration?: number;
+    trailColor?: string;
+    backgroundColor?: string;
+}
+interface CircularProgressBarProps {
+    value: number;
+    text?: string;
+    children?: React.ReactNode;
+    strokeWidth?: number;
+    styles?: CircularProgressBarStylesProps;
+    background?: boolean;
+    backgroundPadding?: number;
+    counterClockwise?: boolean;
+    circleRatio?: number;
+}
+export declare const CircularProgressBar: React.FC<CircularProgressBarProps>;
+export { buildStyles };

package/dist/circular-progress-bar/index.d.ts

@@ -0,0 +1 @@
+export * from './circular-progress-bar';

package/dist/index.d.ts

@@ -12,4 +12,6 @@ export * from './theme';
 export * from './cesium-map';
 export * from './autocomplete';
 export * from './file-picker';
-export * from './multiSelection';
+export * from './multi-selection';
+export * from './circular-progress-bar';
+export * from './animated';

package/dist/multi-selection/index.d.ts

@@ -0,0 +1 @@
+export * from './multi-selection';

package/dist/{multiSelection/multiSelection.d.ts → multi-selection/multi-selection.d.ts}

@@ -1,18 +1,18 @@
 import React from 'react';
 import { GroupBase, StylesConfig as rcStylesConfig } from 'react-select';
-export type MultiSelectOption = {
+export type MultiSelectionOption = {
     value: string;
     label: string;
     color?: string;
     disabled?: boolean;
 };
-interface IPropsMultiSelection {
-    options: MultiSelectOption[];
-    values?: MultiSelectOption[];
+interface MultiSelectionProps {
+    options: MultiSelectionOption[];
+    values?: MultiSelectionOption[];
     onChange?: (data: any) => void;
     placeholder?: string;
     styles?: StylesConfig;
 }
-export declare const MultiSelection: (props: IPropsMultiSelection) => React.JSX.Element;
+export declare const MultiSelection: (props: MultiSelectionProps) => React.JSX.Element;
 export type StylesConfig = rcStylesConfig<unknown, false, GroupBase<unknown>> | undefined;
 export {};

package/dist/theme/theme.d.ts

@@ -6,4 +6,7 @@ declare const useMappedMuiTheme: (theme: {
 declare const mapMcToMuiTheme: (mcTheme: {
     [key: string]: string;
 }, prefersDarkMode?: boolean) => Theme;
-export { useMediaQuery, useMappedMuiTheme, mapMcToMuiTheme };
+declare const useMappedCesiumTheme: (theme: {
+    [key: string]: string;
+}) => any;
+export { useMediaQuery, useMappedMuiTheme, mapMcToMuiTheme, useMappedCesiumTheme };

package/dist/utils/config.d.ts

@@ -0,0 +1 @@
+export declare const getValue: (storyName: string, key: string) => string;