@vertigis/react-ui 9.14.0 → 10.0.0

package/Tabs/Tabs.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import MUITabs, { tabsClasses as muiTabsClasses, } from "@mui/material/Tabs";
+import MUITabs, { tabsClasses as muiTabsClasses } from "@mui/material/Tabs";
 import clsx from "clsx";
 import { forwardRef } from "react";
 import { mergeStyles, styled } from "../styles/index.js";

package/TimePicker/index.d.ts

@@ -0,0 +1,3 @@
+export * from "@mui/x-date-pickers/TimePicker";
+import { TimePicker } from "@mui/x-date-pickers/TimePicker";
+export default TimePicker;

package/TimePicker/index.js

@@ -0,0 +1,3 @@
+export * from "@mui/x-date-pickers/TimePicker";
+import { TimePicker } from "@mui/x-date-pickers/TimePicker";
+export default TimePicker;

package/ToggleButton/ToggleButton.d.ts

@@ -1,6 +1,6 @@
 import type { ButtonBaseClasses } from "@mui/material/ButtonBase";
 import type { OverridableComponent } from "@mui/material/OverridableComponent";
-import { ToggleButtonProps as MUIToggleButtonProps, ToggleButtonClasses as MUIToggleButtonClasses } from "@mui/material/ToggleButton";
+import type { ToggleButtonProps as MUIToggleButtonProps, ToggleButtonClasses as MUIToggleButtonClasses } from "@mui/material/ToggleButton";
 export * from "@mui/material/ToggleButton";
 export interface ToggleButtonClasses extends MUIToggleButtonClasses, ButtonBaseClasses {
 }

package/colors/blue.d.ts

@@ -1,3 +1,3 @@
-import Color from "./Color.js";
+import type Color from "./Color.js";
 declare const blue: Color;
 export default blue;

package/colors/burntOrange.d.ts

@@ -1,3 +1,3 @@
-import Color from "./Color.js";
+import type Color from "./Color.js";
 declare const burntOrange: Color;
 export default burntOrange;

package/colors/darkBurntOrange.d.ts

@@ -1,3 +1,3 @@
-import Color from "./Color.js";
+import type Color from "./Color.js";
 declare const darkBurntOrange: Color;
 export default darkBurntOrange;

package/colors/darkRed.d.ts

@@ -1,3 +1,3 @@
-import Color from "./Color.js";
+import type Color from "./Color.js";
 declare const darkRed: Color;
 export default darkRed;

package/colors/green.d.ts

@@ -1,3 +1,3 @@
-import Color from "./Color.js";
+import type Color from "./Color.js";
 declare const green: Color;
 export default green;

package/colors/grey.d.ts

@@ -1,3 +1,3 @@
-import Color from "./Color.js";
+import type Color from "./Color.js";
 declare const grey: Color;
 export default grey;

package/colors/orange.d.ts

@@ -1,3 +1,3 @@
-import Color from "./Color.js";
+import type Color from "./Color.js";
 declare const orange: Color;
 export default orange;

package/colors/purple.d.ts

@@ -1,3 +1,3 @@
-import Color from "./Color.js";
+import type Color from "./Color.js";
 declare const purple: Color;
 export default purple;

package/colors/red.d.ts

@@ -1,3 +1,3 @@
-import Color from "./Color.js";
+import type Color from "./Color.js";
 declare const red: Color;
 export default red;

package/colors/teal.d.ts

@@ -1,3 +1,3 @@
-import Color from "./Color.js";
+import type Color from "./Color.js";
 declare const teal: Color;
 export default teal;

package/colors/woodlandGreen.d.ts

@@ -1,3 +1,3 @@
-import Color from "./Color.js";
+import type Color from "./Color.js";
 declare const woodlandGreen: Color;
 export default woodlandGreen;

package/icons/utils/createSvgIcon.d.ts

@@ -1,12 +1,13 @@
 import SvgIcon from "@mui/material/SvgIcon";
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 /**
  * Creates an SVG icon component from a <path>.
+ *
  * @param path The React component representing the inner path of the SVG.
  * @param displayName The display name.
  * @param mirror Whether or not to mirror the icon in RTL mode. By default it
- * will mirror anything with "Left" or "Right" in the display name, as well as
- * some built-in icons. See the Material UI guidelines for a discussion of which
- * icons should be mirrored.
+ *   will mirror anything with "Left" or "Right" in the display name, as well as
+ *   some built-in icons. See the Material UI guidelines for a discussion of
+ *   which icons should be mirrored.
  */
 export default function createSvgIcon(path: ReactNode, displayName: string, mirror?: boolean): typeof SvgIcon;

package/icons/utils/createSvgIcon.js

@@ -10,12 +10,13 @@ const gcxSvgIconClasses = {
 };
 /**
  * Creates an SVG icon component from a <path>.
+ *
  * @param path The React component representing the inner path of the SVG.
  * @param displayName The display name.
  * @param mirror Whether or not to mirror the icon in RTL mode. By default it
- * will mirror anything with "Left" or "Right" in the display name, as well as
- * some built-in icons. See the Material UI guidelines for a discussion of which
- * icons should be mirrored.
+ *   will mirror anything with "Left" or "Right" in the display name, as well as
+ *   some built-in icons. See the Material UI guidelines for a discussion of
+ *   which icons should be mirrored.
  */
 export default function createSvgIcon(path, displayName, mirror) {
     const Icon = baseCreateSvgIcon(path, displayName);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vertigis/react-ui",
-    "version": "9.14.0",
+    "version": "10.0.0",
     "description": "Utilities and React components used in VertiGIS applications.",
     "keywords": [
         "vertigis",
@@ -15,24 +15,33 @@
     "sideEffects": false,
     "scripts": {},
     "dependencies": {
+        "@esri/arcgis-html-sanitizer": "^2.10.0",
         "@emotion/cache": "^11.7.1",
         "@emotion/react": "^11.8.2",
         "@emotion/styled": "^11.8.1",
-        "@mui/icons-material": "5.5.1",
-        "@mui/material": "5.5.2",
+        "@mui/icons-material": "5.8.4",
+        "@mui/x-date-pickers-pro": "5.0.0-alpha.7",
+        "@mui/x-data-grid-pro": "5.13.0",
+        "@mui/material": "5.9.0",
         "clsx": "^1.1.1",
+        "color": "^3.1.3",
         "lodash.escape": "^4.0.1",
         "lodash.merge": "^4.6.2",
         "marked": "^4.0.12",
-        "tslib": "^2.1.0"
+        "react-color": "^2.19.3",
+        "tslib": "^2.1.0",
+        "xss": "^1.0.13"
     },
     "devDependencies": {
         "@geocortex/icons": "5.0.457",
         "@testing-library/react": "^12.1.2",
         "@testing-library/user-event": "^13.5.0",
+        "@types/color": "^3.0.1",
+        "@types/lodash.escape": "^4.0.1",
         "@types/lodash.merge": "^4.6.7",
         "@types/marked": "^4.0.2",
         "@types/react": "^17.0.34",
+        "@types/react-color": "^3.0.6",
         "@types/react-dom": "^17.0.11",
         "react": "^17.0.2",
         "react-dom": "^17.0.2"

package/styles/CacheProvider.d.ts

@@ -1,4 +1,4 @@
-import { EmotionCache, Options as CacheOptions } from "@emotion/cache";
+import type { EmotionCache, Options as CacheOptions } from "@emotion/cache";
 /**
  * Creates a style cache with the given options.
  */

package/styles/createTheme.js

@@ -1,4 +1,4 @@
-import { alpha, createTheme as createMuiTheme, } from "@mui/material/styles";
+import { alpha, createTheme as createMuiTheme } from "@mui/material/styles";
 import merge from "lodash.merge";
 import blue from "../colors/blue.js";
 import common from "../colors/common.js";
@@ -137,8 +137,8 @@ const getMenuItemStyles = ({ palette, transitions }) => ({
     },
 });
 /**
- * The overrides may be based on the theme's palette.
- * We must create these separately after the fact.
+ * The overrides may be based on the theme's palette. We must create these
+ * separately after the fact.
  */
 function getOverrides(theme) {
     const { palette, shape, spacing, transitions, typography } = theme;
@@ -335,6 +335,24 @@ function getOverrides(theme) {
                     },
                 },
             },
+            MuiDatePicker: {
+                defaultProps: {
+                    OpenPickerButtonProps: { size: "small" },
+                    PopperProps: { dir: theme.direction },
+                },
+            },
+            MuiDateRangePicker: {
+                defaultProps: {
+                    OpenPickerButtonProps: { size: "small" },
+                    PopperProps: { dir: theme.direction },
+                },
+            },
+            MuiDateTimePicker: {
+                defaultProps: {
+                    OpenPickerButtonProps: { size: "small" },
+                    PopperProps: { dir: theme.direction },
+                },
+            },
             MuiDialogActions: {
                 styleOverrides: {
                     root: {
@@ -782,6 +800,12 @@ function getOverrides(theme) {
                     },
                 },
             },
+            MuiTimePicker: {
+                defaultProps: {
+                    OpenPickerButtonProps: { size: "small" },
+                    PopperProps: { dir: theme.direction },
+                },
+            },
             MuiToggleButton: {
                 defaultProps: {
                     disableFocusRipple: true,

package/styles/index.js

@@ -15,7 +15,7 @@ export function mergeStyles(standardClasses, classesProp = {}) {
         ...classesProp,
         ...standardClasses,
     };
-    for (const key of Object.keys(standardClasses).filter((k) => k in classesProp)) {
+    for (const key of Object.keys(standardClasses).filter(k => k in classesProp)) {
         // The order here is important. The class name(s) passed into the props
         // for a given class key need to come after the component's own class
         // name for that key in order to be able to override default styles.

package/styles/themeAugmentation.d.ts

@@ -1,3 +1,8 @@
+import { ComponentsProps, ComponentsOverrides, ComponentsVariants } from "@mui/material/styles";
+
+export * from "@mui/x-date-pickers-pro/themeAugmentation";
+export * from "@mui/x-date-pickers/themeAugmentation";
+
 // These are needed to mimic the MUI v4 "default" color for buttons, which was
 // removed in v5. See https://mui.com/guides/migration-v4/#button for more
 // details.
@@ -24,3 +29,20 @@ declare module "@mui/material" {
 }
 
 export default {};
+
+// TODO: For some reason, MUI's list of x-date-pickers components in the above
+// augmentation is incomplete. Remove these overrides if they ever fix this.
+export interface UndocumentedDatePickersComponents {
+    MuiDateRangePicker?: {
+        defaultProps?: ComponentsProps["MuiDateRangePicker"];
+        styleOverrides?: ComponentsOverrides["MuiDateRangePicker"];
+    };
+    MuiTimePicker?: {
+        defaultProps?: ComponentsProps["MuiTimePicker"];
+        styleOverrides?: ComponentsOverrides["MuiTimePicker"];
+    };
+}
+
+declare module "@mui/material/styles" {
+    interface Components extends UndocumentedDatePickersComponents {}
+}

package/utils/color.d.ts

@@ -0,0 +1,11 @@
+import Color from "color";
+/**
+ * Returns a Color object if valid. Undefined if invalid
+ */
+export declare function parse(color: string | {
+    r: string | number;
+    g: string | number;
+    b: string | number;
+    a?: string | number;
+    alpha?: string | number;
+} | undefined): Color | undefined;

package/utils/color.js

@@ -0,0 +1,39 @@
+import Color from "color";
+/**
+ * Returns a Color object if valid. Undefined if invalid
+ */
+export function parse(color) {
+    try {
+        if (!color) {
+            return undefined;
+        }
+        // Likely testing a value from the input element
+        if (typeof color === "string") {
+            return Color(color);
+        }
+        if (typeof color.r !== "undefined" &&
+            typeof color.g !== "undefined" &&
+            typeof color.b !== "undefined") {
+            const rgb = [
+                parseInt(color.r),
+                parseInt(color.g),
+                parseInt(color.b),
+            ];
+            let alpha = undefined;
+            if (color.a !== undefined) {
+                alpha = color.a;
+            }
+            else if (color.alpha !== undefined) {
+                alpha = color.alpha;
+            }
+            if (alpha !== undefined) {
+                rgb.push(parseFloat(alpha));
+            }
+            return Color(rgb);
+        }
+    }
+    catch {
+        // Didn't validate. Let's ignore.
+    }
+    return undefined;
+}

package/utils/generateId.d.ts

@@ -1,5 +1,6 @@
 /**
  * Generate a random 10 digit id.
+ *
  * @param prefix An optional prefix to prepend to the generated id.
  */
 export default function generateId(prefix?: string): string;

package/utils/generateId.js

@@ -1,5 +1,6 @@
 /**
  * Generate a random 10 digit id.
+ *
  * @param prefix An optional prefix to prepend to the generated id.
  */
 export default function generateId(prefix) {

package/utils/html.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Sanitize a string of unsafe HTML to eliminate XSS (cross-site scripting)
+ * security risks. This method allows tags and standard attributes, however
+ * `data-` attributes are not allowed. Script tags are not allowed either.
+ *
+ * @param unsafeHtml String of HTML to be scrubbed clean.
+ * @returns Safe HTML that has been sanitized.
+ */
+export declare function sanitizeHtml(unsafeHtml: string): string;
+/**
+ * Strip all HTML out of a string.
+ *
+ * @param html String of text which will have its HTML stripped away.
+ * @returns A plain text string without any HTML markup.
+ */
+export declare function stripHtml(html: string | undefined): string | undefined;

package/utils/html.js

@@ -0,0 +1,105 @@
+import { Sanitizer } from "@esri/arcgis-html-sanitizer";
+import { escapeAttrValue, safeAttrValue, friendlyAttrValue } from "xss";
+/**
+ * Sanitize a string of unsafe HTML to eliminate XSS (cross-site scripting)
+ * security risks. This method allows tags and standard attributes, however
+ * `data-` attributes are not allowed. Script tags are not allowed either.
+ *
+ * @param unsafeHtml String of HTML to be scrubbed clean.
+ * @returns Safe HTML that has been sanitized.
+ */
+export function sanitizeHtml(unsafeHtml) {
+    const checkUris = (tag, attr, value, cssFilter) => {
+        if (attr === "href" || attr === "src") {
+            // Override the default implementation to allow relative URLs.
+            if (!value) {
+                return "";
+            }
+            try {
+                // Unescape attribute value first.
+                let href = friendlyAttrValue(value);
+                // Remove any surrounding grave accents and embedded whitespace
+                // that can fool the parsing in the URL class, potentially
+                // allowing unsafe URLs through.
+                href = href.replace(/^`|`$|\s+/g, "");
+                // The base URL can be anything -- it's just there to set the
+                // protocol to "https" for all relative URLs.
+                const url = new URL(href, "https://vertigis.com/");
+                if (url.protocol === "http:" ||
+                    url.protocol === "https:" ||
+                    url.protocol === "mailto:") {
+                    return escapeAttrValue(value);
+                }
+            }
+            catch {
+                // Ignore and let it be stripped out below. It's probably
+                // safest to err on the side of disallowing URLs that cannot be
+                // parsed.
+            }
+            return "";
+        }
+        return safeAttrValue(tag, attr, value, cssFilter);
+    };
+    const options = {
+        safeAttrValue: checkUris,
+        // This list builds on the default list in Esri's sanitization
+        // library (since we are passing `true` as the second parameter).
+        // See here for the default rules:
+        // https://github.com/Esri/arcgis-html-sanitizer/blob/master/src/index.ts
+        // In addition to what they support, we also need to support benign
+        // tags generated by the markdown library.
+        whiteList: {
+            a: ["href", "style", "target", "title"],
+            code: [],
+            blockquote: [],
+            del: [],
+            h1: [],
+            h2: [],
+            h3: [],
+            h4: [],
+            h5: [],
+            h6: [],
+            img: ["alt", "border", "height", "src", "style", "title", "width"],
+            ol: ["start"],
+            p: ["style"],
+            pre: [],
+            span: ["style"],
+            thead: [],
+        },
+        stripIgnoreTag: true,
+        stripIgnoreTagBody: true,
+        allowCommentTag: false,
+        css: {
+            // Allow properties that are configurable on PopupTemplate
+            // content, via AGOL Map Viewer's rich text editor; they are
+            // injected as span elements with style attributes.
+            whiteList: {
+                "background-color": true,
+                color: true,
+                "font-size": true,
+                "font-family": true,
+                "font-weight": true,
+                "text-align": true,
+                "text-decoration": true,
+            },
+        },
+    };
+    return new Sanitizer(options, true).sanitize(unsafeHtml);
+}
+/**
+ * Strip all HTML out of a string.
+ *
+ * @param html String of text which will have its HTML stripped away.
+ * @returns A plain text string without any HTML markup.
+ */
+export function stripHtml(html) {
+    if (!html) {
+        return html;
+    }
+    // Sanitize any HTML that is present, to make it safe (from XSS risks).
+    const safe = sanitizeHtml(html);
+    // Create a temporary div (using the browser to strip away HTML content).
+    const div = document.createElement("div");
+    div.innerHTML = safe;
+    return div.innerText;
+}

package/utils/intl.d.ts

@@ -1,33 +1,36 @@
 /**
  * Formats a date for display. The time portion will not appear in the output.
+ *
  * @param date The Date value to format.
  * @param locale An optional locale to use. If not specified, the browser's
- * locale will be used.
+ *   locale will be used.
  * @param options Additional options that control how the date is formatted.
  */
 export declare function formatDate(date: Date | undefined, options?: Intl.DateTimeFormatOptions, locale?: string): string;
 /**
  * Formats a time for display. The date portion will not appear in the output.
+ *
  * @param date The Date value to format.
  * @param locale An optional locale to use. If not specified, the browser's
- * locale will be used.
+ *   locale will be used.
  * @param options Additional options that control how the time is formatted.
  */
 export declare function formatTime(date: Date | undefined, options?: Intl.DateTimeFormatOptions, locale?: string): string;
 /**
  * Formats a date and time for display.
+ *
  * @param date The Date value to format.
  * @param locale An optional locale to use. If not specified, the browser's
- * locale will be used.
- * @param options Additional options that control how the date & time are
- * formatted.
+ *   locale will be used.
+ * @param options Additional options that control how the date & time are formatted.
  */
 export declare function formatDateTime(date: Date | undefined, options?: Intl.DateTimeFormatOptions, locale?: string): string;
 /**
  * Formats a number for display.
+ *
  * @param number The number to format.
  * @param locale An optional locale to use. If not specified, the browser's
- * locale will be used.
+ *   locale will be used.
  * @param options Additional options that control how the number is formatted.
  */
 export declare function formatNumber(number: number | undefined, options?: Intl.NumberFormatOptions, locale?: string): string;

package/utils/intl.js

@@ -7,9 +7,10 @@
 // functions.
 /**
  * Formats a date for display. The time portion will not appear in the output.
+ *
  * @param date The Date value to format.
  * @param locale An optional locale to use. If not specified, the browser's
- * locale will be used.
+ *   locale will be used.
  * @param options Additional options that control how the date is formatted.
  */
 export function formatDate(date, options, locale = navigator.language) {
@@ -17,9 +18,10 @@ export function formatDate(date, options, locale = navigator.language) {
 }
 /**
  * Formats a time for display. The date portion will not appear in the output.
+ *
  * @param date The Date value to format.
  * @param locale An optional locale to use. If not specified, the browser's
- * locale will be used.
+ *   locale will be used.
  * @param options Additional options that control how the time is formatted.
  */
 export function formatTime(date, options, locale = navigator.language) {
@@ -27,20 +29,21 @@ export function formatTime(date, options, locale = navigator.language) {
 }
 /**
  * Formats a date and time for display.
+ *
  * @param date The Date value to format.
  * @param locale An optional locale to use. If not specified, the browser's
- * locale will be used.
- * @param options Additional options that control how the date & time are
- * formatted.
+ *   locale will be used.
+ * @param options Additional options that control how the date & time are formatted.
  */
 export function formatDateTime(date, options, locale = navigator.language) {
     return date ? date.toLocaleString(locale, options) : "";
 }
 /**
  * Formats a number for display.
+ *
  * @param number The number to format.
  * @param locale An optional locale to use. If not specified, the browser's
- * locale will be used.
+ *   locale will be used.
  * @param options Additional options that control how the number is formatted.
  */
 export function formatNumber(number, options, locale = navigator.language) {

package/utils/markdown.d.ts

@@ -5,9 +5,9 @@ export interface MarkdownToHtmlOptions {
     /**
      * If specified, produces HTML that is valid to place within an HTML element
      * that only supports inline content (called "phrasing content" in the HTML5
-     * spec). Example elements that only support phrasing content are <span> and
-     * <h2>. In this mode, any block-level elements resulting from the Markdown
-     * conversion will be stripped. The default is `false`.
+     * spec). Example elements that only support phrasing content are <span>
+     * and<h2>. In this mode, any block-level elements resulting from the
+     * Markdown conversion will be stripped. The default is `false`.
      */
     inline?: boolean;
     /**
@@ -21,6 +21,14 @@ export interface MarkdownToHtmlOptions {
      */
     escapeHtml?: boolean;
 }
+/**
+ * Converts markdown text into HTML. The resulting HTML is sanitized and safe to
+ * insert into the DOM.
+ *
+ * @param markdown The markdown text to convert.
+ * @param options Options that affect how the text is converted.
+ */
+export declare function markdownToSafeHtml(markdown: string, options?: MarkdownToHtmlOptions): string;
 /**
  * Converts markdown text into HTML.
  *

package/utils/markdown.js

@@ -1,15 +1,25 @@
 import escapeHtml from "lodash.escape";
 import { marked } from "marked";
+import { sanitizeHtml } from "./html.js";
 /**
  * A custom marked renderer that escapes HTML in the original markdown.
  */
 class EscapeHtmlRenderer extends marked.Renderer {
     html(html) {
-        /* eslint-disable @typescript-eslint/no-unsafe-call */
         return escapeHtml(html);
     }
 }
 EscapeHtmlRenderer.instance = new EscapeHtmlRenderer();
+/**
+ * Converts markdown text into HTML. The resulting HTML is sanitized and safe to
+ * insert into the DOM.
+ *
+ * @param markdown The markdown text to convert.
+ * @param options Options that affect how the text is converted.
+ */
+export function markdownToSafeHtml(markdown, options) {
+    return sanitizeHtml(markdownToHtml(markdown, options));
+}
 /**
  * Converts markdown text into HTML.
  *

package/utils/react.d.ts

@@ -0,0 +1,15 @@
+import type { MutableRefObject, Ref, RefCallback } from "react";
+/**
+ * Produces a unique ID that can be used for the HTML `id` attribute. Will use
+ * the provided value if defined (typically obtained from the calling
+ * component's `id` prop), otherwise one will be generated. The ID will remain
+ * the same between renders (even if `idProp` changes).
+ */
+export declare function useId(idProp?: string): string;
+/**
+ * Combines multiple refs into a single ref.
+ *
+ * Useful when a component needs a ref to one of its own elements, but also
+ * supports forwarding a ref from its parent component.
+ */
+export declare function mergeRefs<T>(...refs: (RefCallback<T> | MutableRefObject<T | null> | null)[]): Ref<T>;